Skip to content

Commit

Permalink
Merge pull request #375 from magento-vanilla/PR
Browse files Browse the repository at this point in the history 
[Vanilla] Stories + Tasks + Bug fixes
  • Loading branch information
@guz-anton
guz-anton committed Feb 19, 2016
2 parents 3d843e9 + b36c558 commit 0d2000c
Show file tree
Hide file tree
Showing 21 changed files with 795 additions and 195 deletions.
28 changes: 10 additions & 18 deletions app/code/Magento/Ui/etc/ui_configuration.xsd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
<xs:element type="button" name="button"/>
<xs:element type="htmlContent" name="htmlContent"/>
<xs:element type="actionDelete" name="actionDelete"/>
<xs:element type="dynamicRowsConfiguration" name="dynamicRows"/>
</xs:choice>
</xs:extension>
</xs:complexContent>
Expand Down Expand Up @@ -99,7 +100,6 @@
<xs:element type="insertFormConfiguration" name="insertForm"/>
<xs:element type="insertListingConfiguration" name="insertListing"/>
<xs:element type="modalConfiguration" name="modal"/>
<xs:element type="dynamicRowsConfiguration" name="dynamicRows"/>
</xs:choice>
</xs:extension>
</xs:complexContent>
Expand Down Expand Up @@ -131,34 +131,26 @@
</xs:complexType>
<xs:complexType name="modalConfiguration">
<xs:complexContent>
<xs:extension base="modal">
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:element type="field" name="field" />
<xs:element type="fieldsetConfiguration" name="fieldset"/>
<xs:element type="containerConfiguration" name="container"/>
<xs:element type="modalConfiguration" name="modal"/>
<xs:element type="dynamicRowsConfiguration" name="dynamicRows"/>
<xs:element type="insertListingConfiguration" name="insertListing"/>
<xs:element type="insertFormConfiguration" name="insertForm"/>
</xs:choice>
<xs:extension base="containerConfiguration">
<xs:choice minOccurs="0" maxOccurs="unbounded"/>
</xs:extension>
</xs:complexContent>
</xs:complexType>
<xs:complexType name="dynamicRowsConfiguration">
<xs:complexType name="massactionConfiguration">
<xs:complexContent>
<xs:extension base="dynamicRows">
<xs:extension base="massaction">
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:element type="containerConfiguration" name="container"/>
<xs:element type="actionDelete" name="actionDelete"/>
<xs:element name="action" type="action" />
</xs:choice>
</xs:extension>
</xs:complexContent>
</xs:complexType>
<xs:complexType name="massactionConfiguration">
<xs:complexType name="dynamicRowsConfiguration">
<xs:complexContent>
<xs:extension base="massaction">
<xs:extension base="dynamicRows">
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:element name="action" type="action" />
<xs:element type="containerConfiguration" name="container"/>
<xs:element type="actionDelete" name="actionDelete"/>
</xs:choice>
</xs:extension>
</xs:complexContent>
Expand Down
18 changes: 8 additions & 10 deletions app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,25 +206,23 @@
</item>
</argument>
</wysiwyg>
<input class="Magento\Ui\Component\Form\Element\Input">
<actionDelete class="Magento\Ui\Component\Form\Element\ActionDelete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/dynamic-rows/cells/action-delete</item>
<item name="template" xsi:type="string">ui/dynamic-rows/cells/action-delete</item>
</item>
</argument>
</input>
<actionDelete class="Magento\Ui\Component\Form\Element\ActionDelete">
</actionDelete>
<input class="Magento\Ui\Component\Form\Element\Input">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<item name="elementTmpl" xsi:type="string">ui/dynamic-rows/cells/action-delete</item>
<item name="template" xsi:type="string">ui/dynamic-rows/cells/action-delete</item>
</item>
<item name="template" xsi:type="string">ui/form/field</item>
</item>
</argument>
</actionDelete>
</input>
<hidden class="Magento\Ui\Component\Form\Element\Hidden">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
Expand Down
162 changes: 95 additions & 67 deletions app/code/Magento/Ui/view/base/web/js/dynamic-rows/dnd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ define([
defaults: {
rootSelector: '${ $.recordsProvider }:div.admin__field',
tableSelector: '${ $.rootSelector } -> table.admin__dynamic-rows',
separatorsClass: {
top: '_dragover-top',
bottom: '_dragover-bottom'
},
step: 'auto',
recordsCache: [],
draggableElement: {},
draggableElementClass: '_dragged',
Expand Down Expand Up @@ -115,22 +120,21 @@ define([
*/
mousedownHandler: function (data, elem, event) {
var recordNode = this.getRecordNode(elem),
originRecord = $(elem).parents('tr');
originRecord = $(elem).parents('tr'),
drEl = this.draggableElement;

$(recordNode).addClass(this.draggableElementClass);
$(originRecord).addClass(this.draggableElementClass);
this.draggableElement.originRow = originRecord;
this.draggableElement.instance = recordNode = this.processingStyles(recordNode, elem);
this.draggableElement.instanceCtx = this.getRecord(originRecord[0]);
this.draggableElement.eventMousedownY = event.pageY;
this.draggableElement.minYpos =
this.step = this.step === 'auto' ? originRecord.height() / 2 : this.step;
drEl.originRow = originRecord;
drEl.instance = recordNode = this.processingStyles(recordNode, elem);
drEl.instanceCtx = this.getRecord(originRecord[0]);
drEl.eventMousedownY = event.pageY;
drEl.minYpos =
this.table.offset().top - originRecord.offset().top +
this.table.outerHeight() - this.table.find('tbody').outerHeight();
this.draggableElement.maxYpos =
this.draggableElement.minYpos +
this.table.find('tbody').outerHeight() - originRecord.outerHeight();
drEl.maxYpos = drEl.minYpos + this.table.find('tbody').outerHeight() - originRecord.outerHeight();
this.tableWrapper.append(recordNode);

this.body.bind('mousemove', this.mousemoveHandler);
this.body.bind('mouseup', this.mouseupHandler);
},
Expand All @@ -141,32 +145,51 @@ define([
* @param {Object} event - mouse move event
*/
mousemoveHandler: function (event) {
var positionY = event.pageY - this.draggableElement.eventMousedownY,
var depEl = this.draggableElement,
positionY = event.pageY - depEl.eventMousedownY,
processingPositionY = positionY + 'px',
processingMaxYpos = this.draggableElement.maxYpos + 'px',
processingMinYpos = this.draggableElement.minYpos + 'px';

if (positionY > this.draggableElement.minYpos && positionY < this.draggableElement.maxYpos) {
$(this.draggableElement.instance)[0].style[transformProp] = 'translateY(' + processingPositionY + ')';
} else if (positionY < this.draggableElement.minYpos) {
$(this.draggableElement.instance)[0].style[transformProp] = 'translateY(' + processingMinYpos + ')';
} else if (positionY >= this.draggableElement.maxYpos) {
$(this.draggableElement.instance)[0].style[transformProp] = 'translateY(' + processingMaxYpos + ')';
processingMaxYpos = depEl.maxYpos + 'px',
processingMinYpos = depEl.minYpos + 'px',
depElement = this.getDepElement(depEl.instance, positionY);

if (depElement) {
depEl.depElement ? depEl.depElement.elem.removeClass(depEl.depElement.className) : false;
depEl.depElement = depElement;
depEl.depElement.insert !== 'none' ? depEl.depElement.elem.addClass(depElement.className) : false;
} else if (depEl.depElement && depEl.depElement.insert !== 'none') {
depEl.depElement.elem.removeClass(depEl.depElement.className);
depEl.depElement.insert = 'none';
}

if (positionY > depEl.minYpos && positionY < depEl.maxYpos) {
$(depEl.instance)[0].style[transformProp] = 'translateY(' + processingPositionY + ')';
} else if (positionY < depEl.minYpos) {
$(depEl.instance)[0].style[transformProp] = 'translateY(' + processingMinYpos + ')';
} else if (positionY >= depEl.maxYpos) {
$(depEl.instance)[0].style[transformProp] = 'translateY(' + processingMaxYpos + ')';
}
},

/**
* Mouse up handler
*/
mouseupHandler: function () {
var depElement = this._getDepElement(this.draggableElement.instance),
depElementCtx = this.getRecord(depElement[0]);
var depElementCtx,
drEl = this.draggableElement;

if (drEl.depElement) {
depElementCtx = this.getRecord(drEl.depElement.elem[0]);
drEl.depElement.elem.removeClass(drEl.depElement.className);

this.setPosition(depElement, depElementCtx, this.draggableElement);
this.draggableElement.originRow.removeClass(this.draggableElementClass);
if (drEl.depElement.insert !== 'none') {
this.setPosition(drEl.depElement.elem, depElementCtx, drEl);
}
}

drEl.originRow.removeClass(this.draggableElementClass);
this.body.unbind('mousemove', this.mousemoveHandler);
this.body.unbind('mouseup', this.mouseupHandler);
this.draggableElement.instance.remove();
drEl.instance.remove();
this.draggableElement = {};
},

Expand All @@ -178,64 +201,69 @@ define([
* @param {Object} dragData - data draggable element
*/
setPosition: function (depElem, depElementCtx, dragData) {
var prevElem = depElem.prev(),
nextElem = depElem.next(),
depElemPosition = parseInt(depElementCtx.position, 10),
prevElemCtx,
prevElemPosition;

if (prevElem[0] === dragData.originRow[0]) {
dragData.instanceCtx.position = depElemPosition;
depElementCtx.position = depElemPosition - 1;

return false;
}
var depElemPosition = parseInt(depElementCtx.position, 10);

if (!prevElem.length) {
depElemPosition = --depElemPosition ? depElemPosition : 1;
if (dragData.depElement.insert === 'after') {
dragData.instanceCtx.position = depElemPosition + 1;
} else if (dragData.depElement.insert === 'before') {
dragData.instanceCtx.position = depElemPosition;

return false;
}
},

if (!nextElem.length) {
depElemPosition = ++depElemPosition;
dragData.instanceCtx.position = depElemPosition;

return false;
}
/**
* Get dependency element
*
* @param {Object} curInstance - current element instance
* @param {Number} position
*/

prevElemCtx = this.getRecord(prevElem[0]);
prevElemPosition = prevElemCtx.position;
getDepElement: function (curInstance, position) {
var recordsCollection = this.table.find('tbody > tr'),
curInstancePositionTop = $(curInstance).position().top,
curInstancePositionBottom = curInstancePositionTop + $(curInstance).height();

if (prevElemPosition === depElemPosition - 1) {
dragData.instanceCtx.position = depElemPosition;
} else {
dragData.instanceCtx.position = --depElemPosition;
if (position < 0) {
return this._getDepElement(recordsCollection, 'before', curInstancePositionTop);
} else if (position > 0) {
return this._getDepElement(recordsCollection, 'after', curInstancePositionBottom);
}

},

/**
* Get dependency element
* Get dependency element private
*
* @param {Object} curInstance - current element instance
* @param {Array} collection - record collection
* @param {String} position - position to add
* @param {Number} dragPosition - position drag element
*/
_getDepElement: function (curInstance) {
var recordsCollection = this.table.find('tbody > tr'),
curInstancePosition = $(curInstance).position().top,
i = 0,
length = recordsCollection.length,
result,
_getDepElement: function (collection, position, dragPosition) {
var rec,
rangeEnd,
rangeStart,
rangeEnd;
result,
className,
i = 0,
length = collection.length;

for (i; i < length; i++) {
rangeStart = recordsCollection.eq(i).position().top;
rangeEnd = rangeStart + recordsCollection.eq(i).height();
rec = collection.eq(i);

if (position === 'before') {
rangeStart = collection.eq(i).position().top;
rangeEnd = rangeStart + this.step;
className = this.separatorsClass.top;
} else if (position === 'after') {
rangeEnd = rec.position().top + rec.height();
rangeStart = rangeEnd - this.step;
className = this.separatorsClass.bottom;
}

if (curInstancePosition > rangeStart && curInstancePosition < rangeEnd) {
result = recordsCollection.eq(i);
if (dragPosition > rangeStart && dragPosition < rangeEnd) {
result = {
elem: rec,
insert: rec[0] === this.draggableElement.originRow[0] ? 'none' : position,
className: className
};
}
}

Expand Down
5 changes: 1 addition & 4 deletions app/code/Magento/Ui/view/base/web/js/dynamic-rows/dynamic-rows-grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,9 @@
*/

define([
'ko',
'mageUtils',
'underscore',
'uiLayout',
'./dynamic-rows'
], function (ko, utils, _, layout, dynamicRows) {
], function (_, dynamicRows) {
'use strict';

return dynamicRows.extend({
Expand Down
9 changes: 5 additions & 4 deletions app/code/Magento/Ui/view/base/web/js/dynamic-rows/dynamic-rows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ define([
this._super()
.initChildren()
.initDnd()
.isColumnsHeader()
.setColumnsHeaderListener()
.initDefaultRecord();

return this;
Expand Down Expand Up @@ -118,7 +118,7 @@ define([
*
* @returns {Object} Chainable.
*/
isColumnsHeader: function () {
setColumnsHeaderListener: function () {
if (this.columnsHeaderAfterRender) {
this.on('elems', this.renderColumnsHeader.bind(this));
}
Expand Down Expand Up @@ -217,6 +217,7 @@ define([
sorted = this.elems().sort(function (propOne, propTwo) {
return parseInt(propOne.position, 10) - parseInt(propTwo.position, 10);
});

updatedCollection = this.updatePosition(sorted, position, elem.name);
this.elems(updatedCollection);
},
Expand Down Expand Up @@ -317,9 +318,9 @@ define([
this.removeMaxPosition();
recordsData = this._getDataByProp(recordId);
this._updateData(recordsData);
this._sortAfterDelete();
--this.recordIterator;
}
this._sort();
},

/**
Expand All @@ -339,7 +340,7 @@ define([
/**
* Sort elems by position property
*/
_sortAfterDelete: function () {
_sort: function () {
this.elems(this.elems().sort(function (propOne, propTwo) {
return parseInt(propOne.position, 10) - parseInt(propTwo.position, 10);
}));
Expand Down
Loading

0 comments on commit 0d2000c

Please sign in to comment.