Skip to content

Commit

Permalink
Merge pull request #418 from magento-vanilla/MAGETWO-41205-PR
Browse files Browse the repository at this point in the history
[Vanilla+WebDev] Staging: Dashboard
  • Loading branch information
Momotenko,Natalia(nmomotenko) committed Mar 10, 2016
2 parents c98c73d + 2270be2 commit 197a6df
Show file tree
Hide file tree
Showing 28 changed files with 2,853 additions and 93 deletions.
54 changes: 52 additions & 2 deletions app/code/Magento/Ui/view/base/web/js/grid/listing.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,16 @@ define([
defaults: {
template: 'ui/grid/listing',
stickyTmpl: 'ui/grid/sticky/listing',
viewSwitcherTmpl: 'ui/grid/view-switcher',
positions: false,
displayMode: 'grid',
displayModes: {
grid: {
value: 'grid',
label: 'Grid',
template: '${ $.template }'
}
},
dndConfig: {
name: '${ $.name }_dnd',
component: 'Magento_Ui/js/grid/dnd',
Expand Down Expand Up @@ -48,6 +57,12 @@ define([
modules: {
dnd: '${ $.dndConfig.name }',
resize: '${ $.resizeConfig.name }'
},
tracks: {
displayMode: true
},
statefull: {
displayMode: true
}
},

Expand Down Expand Up @@ -96,7 +111,7 @@ define([
},

/**
* Inititalizes resize component.
* Initializes resize component.
*
* @returns {Listing} Chainable.
*/
Expand Down Expand Up @@ -170,7 +185,7 @@ define([
},

/**
* Reseorts child elements array according to provided positions.
* Resorts child elements array according to provided positions.
*
* @param {Object} positions - Object where key represents child
* index and value is its' position.
Expand Down Expand Up @@ -202,6 +217,41 @@ define([
return observable || this.visibleColumns;
},

/**
* Returns path to the template
* defined for a current display mode.
*
* @returns {String} Path to the template.
*/
getTemplate: function () {
var mode = this.displayModes[this.displayMode];

return mode.template;
},

/**
* Returns an array of available display modes.
*
* @returns {Array<Object>}
*/
getDisplayModes: function () {
var modes = this.displayModes;

return _.values(modes);
},

/**
* Sets display mode to provided value.
*
* @param {String} index
* @returns {Listing} Chainable
*/
setDisplayMode: function (index) {
this.displayMode = index;

return this;
},

/**
* Returns total number of displayed columns in grid.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ define(function (require) {
return {
i18n: require('./i18n'),
scope: require('./scope'),
range: require('./range'),
mageInit: require('./mage-init'),
keyboard: require('./keyboard'),
optgroup: require('./optgroup'),
Expand All @@ -32,6 +33,7 @@ define(function (require) {
collapsible: require('./collapsible'),
staticChecked: require('./staticChecked'),
simpleChecked: require('./simple-checked'),
tooltip: require('./tooltip'),
repeat: require('knockoutjs/knockout-repeat'),
fastForEach: require('knockoutjs/knockout-fast-foreach')
};
Expand Down
203 changes: 203 additions & 0 deletions app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/range.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

define([
'ko',
'jquery',
'underscore',
'../template/renderer',
'jquery/ui'
], function (ko, $, _, renderer) {
'use strict';

var isTouchDevice = !_.isUndefined(document.ontouchstart),
sliderFn = 'slider';

ko.bindingHandlers.range = {

/**
* Initializes binding and a slider update.
*
* @param {HTMLElement} element
* @param {Function} valueAccessor
*/
init: function (element, valueAccessor) {
var config = valueAccessor(),
value = config.value;

_.extend(config, {
value: value(),

/**
* Callback which is being called when sliders' value changes.
*
* @param {Event} event
* @param {Object} ui
*/
slide: function (event, ui) {
value(ui.value);
}
});

$(element)[sliderFn](config);
},

/**
* Updates sliders' plugin configuration.
*
* @param {HTMLElement} element
* @param {Function} valueAccessor
*/
update: function (element, valueAccessor) {
var config = valueAccessor();

config.value = ko.unwrap(config.value);

$(element)[sliderFn]('option', config);
}
};

renderer.addAttribute('range');

if (!isTouchDevice) {
return;
}

$.widget('mage.touchSlider', $.ui.slider, {

/**
* Creates instance of widget.
*
* @override
*/
_create: function () {
_.bindAll(
this,
'_mouseDown',
'_mouseMove',
'_onTouchEnd'
);

return this._superApply(arguments);
},

/**
* Initializes mouse events on element.
* @override
*/
_mouseInit: function () {
var result = this._superApply(arguments);

this.element
.off('mousedown.' + this.widgetName)
.on('touchstart.' + this.widgetName, this._mouseDown);

return result;
},

/**
* Elements' 'mousedown' event handler polyfill.
* @override
*/
_mouseDown: function (event) {
var prevDelegate = this._mouseMoveDelegate,
result;

event = this._touchToMouse(event);
result = this._super(event);

if (prevDelegate === this._mouseMoveDelegate) {
return result;
}

$(document)
.off('mousemove.' + this.widgetName)
.off('mouseup.' + this.widgetName);

$(document)
.on('touchmove.' + this.widgetName, this._mouseMove)
.on('touchend.' + this.widgetName, this._onTouchEnd)
.on('tochleave.' + this.widgetName, this._onTouchEnd);

return result;
},

/**
* Documents' 'mousemove' event handler polyfill.
*
* @override
* @param {Event} event - Touch event object.
*/
_mouseMove: function (event) {
event = this._touchToMouse(event);

return this._super(event);
},

/**
* Documents' 'touchend' event handler.
*/
_onTouchEnd: function (event) {
$(document).trigger('mouseup');

return this._mouseUp(event);
},

/**
* Removes previously assigned touch handlers.
*
* @override
*/
_mouseUp: function () {
this._removeTouchHandlers();

return this._superApply(arguments);
},

/**
* Removes previously assigned touch handlers.
*
* @override
*/
_mouseDestroy: function () {
this._removeTouchHandlers();

return this._superApply(arguments);
},

/**
* Removes touch events from document object.
*/
_removeTouchHandlers: function () {
$(document)
.off('touchmove.' + this.widgetName)
.off('touchend.' + this.widgetName)
.off('touchleave.' + this.widgetName);
},

/**
* Adds properties to the touch event to mimic mouse event.
*
* @param {Event} event - Touch event object.
* @returns {Event}
*/
_touchToMouse: function (event) {
var orig = event.originalEvent,
touch = orig.touches[0];

return _.extend(event, {
which: 1,
pageX: touch.pageX,
pageY: touch.pageY,
clientX: touch.clientX,
clientY: touch.clientY,
screenX: touch.screenX,
screenY: touch.screenY
});
}
});

sliderFn = 'touchSlider';
});
Loading

0 comments on commit 197a6df

Please sign in to comment.