From 496fb42ba52fbbc5c947f842417fd22cd635c21c Mon Sep 17 00:00:00 2001 From: Johnson Chou Date: Sat, 15 Apr 2017 01:28:15 +0800 Subject: [PATCH 1/4] fix(sortable): fix incorrect helper returned from getSortingHelper(). The helper element is not always in the last position while created from a function and append it to another DOM. E.g. the following will mess up the DOM position after canceled update. ``` var sortableOption = { helper: function (evt, ui) { return ui.clone().appendTo('body'); } }; ``` --- src/sortable.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/sortable.js b/src/sortable.js index e2a9f9c..951588a 100644 --- a/src/sortable.js +++ b/src/sortable.js @@ -36,6 +36,7 @@ angular.module('ui.sortable', []) }, link: function(scope, element, attrs, ngModel) { var savedNodes; + var helper; function combineCallbacks(first, second){ var firstIsFunc = typeof first === 'function'; @@ -190,8 +191,7 @@ angular.module('ui.sortable', []) if (hasSortingHelper(element, ui) && element.sortable( 'option', 'appendTo' ) === 'parent') { // The .ui-sortable-helper element (that's the default class name) - // is placed last. - result = savedNodes.last(); + result = helper; } return result; } @@ -331,6 +331,7 @@ angular.module('ui.sortable', []) // This is inside activate (instead of start) in order to save // both lists when dragging between connected lists. savedNodes = savedNodesOrigin.contents(); + helper = ui.helper; // If this list has a placeholder (the connected lists won't), // don't inlcude it in saved nodes. @@ -428,9 +429,10 @@ angular.module('ui.sortable', []) savedNodes.appendTo(elementContext.savedNodesOrigin); } - // It's now safe to clear the savedNodes + // It's now safe to clear the savedNodes and helper // since stop is the last callback. savedNodes = null; + helper = null; }; callbacks.receive = function(e, ui) { From 6f5604271e8445b3415624c05f5483210d9a7b9c Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Sat, 15 Apr 2017 20:34:05 +0300 Subject: [PATCH 2/4] fix(sortable): fix lint error --- src/sortable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sortable.js b/src/sortable.js index 951588a..8bdaaf9 100644 --- a/src/sortable.js +++ b/src/sortable.js @@ -186,7 +186,7 @@ angular.module('ui.sortable', []) return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed()); } - function getSortingHelper (element, ui, savedNodes) { + function getSortingHelper (element, ui/*, savedNodes*/) { var result = null; if (hasSortingHelper(element, ui) && element.sortable( 'option', 'appendTo' ) === 'parent') { From a8d6002e717335fb29cad0be6fda804b14b01ef3 Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Sat, 15 Apr 2017 20:36:14 +0300 Subject: [PATCH 3/4] test(e2e.callbacks.spec): add test for cloned helper appended to body --- test/sortable.e2e.callbacks.spec.js | 59 +++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/test/sortable.e2e.callbacks.spec.js b/test/sortable.e2e.callbacks.spec.js index 8506ea3..e944353 100644 --- a/test/sortable.e2e.callbacks.spec.js +++ b/test/sortable.e2e.callbacks.spec.js @@ -156,6 +156,65 @@ describe('uiSortable', function() { }); }); + it('should cancel sorting of node "Two" when then helper is appended to the `body`', function() { + inject(function($compile, $rootScope) { + var element; + element = $compile(''.concat( + '
    ', + beforeLiElement, + '
  • {{ item }}
    • ', + afterLiElement + + '
'))($rootScope); + $rootScope.$apply(function() { + $rootScope.opts = { + helper: function (e, item) { + return item.clone().appendTo('body'); + }, + update: function(e, ui) { + if (ui.item.sortable.model === 'Two') { + ui.item.sortable.cancel(); + } + } + }; + $rootScope.items = ['One', 'Two', 'Three']; + }); + + host.append(element); + + var li = element.find('[ng-repeat]:eq(1)'); + var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight(); + li.simulate('drag', { dy: dy }); + expect($rootScope.items).toEqual(['One', 'Two', 'Three']); + expect($rootScope.items).toEqual(listContent(element)); + // try again + li = element.find('[ng-repeat]:eq(1)'); + dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight(); + li.simulate('drag', { dy: dy }); + expect($rootScope.items).toEqual(['One', 'Two', 'Three']); + expect($rootScope.items).toEqual(listContent(element)); + // try again + li = element.find('[ng-repeat]:eq(1)'); + dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight(); + li.simulate('drag', { dy: dy }); + expect($rootScope.items).toEqual(['One', 'Two', 'Three']); + expect($rootScope.items).toEqual(listContent(element)); + + li = element.find('[ng-repeat]:eq(0)'); + dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight(); + li.simulate('drag', { dy: dy }); + expect($rootScope.items).toEqual(['Two', 'Three', 'One']); + expect($rootScope.items).toEqual(listContent(element)); + + li = element.find('[ng-repeat]:eq(2)'); + dy = -(2 + EXTRA_DY_PERCENTAGE) * li.outerHeight(); + li.simulate('drag', { dy: dy }); + expect($rootScope.items).toEqual(['One', 'Two', 'Three']); + expect($rootScope.items).toEqual(listContent(element)); + + $(element).remove(); + }); + }); + it('should cancel sorting of node "Two" and "helper: function" that returns a list element is used', function() { inject(function($compile, $rootScope) { var element; From a9d796fa8e01ade72508fbdfb8c2eaa7e37de7e3 Mon Sep 17 00:00:00 2001 From: Thodoris Greasidis Date: Sat, 15 Apr 2017 20:37:13 +0300 Subject: [PATCH 4/4] chore: increase version to 0.17.1 --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index ab1f79b..ad361a8 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-ui-sortable", - "version": "0.17.0", + "version": "0.17.1", "description": "This directive allows you to jQueryUI Sortable.", "author": "https://github.com/angular-ui/ui-sortable/graphs/contributors", "license": "MIT", diff --git a/package.json b/package.json index 6070b7e..51a1c80 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-ui-sortable", - "version": "0.17.0", + "version": "0.17.1", "description": "This directive allows you to jQueryUI Sortable.", "author": "https://github.com/angular-ui/ui-sortable/graphs/contributors", "license": "MIT",