Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

fix(sortable): support helper option when set to a function #168

Merged
merged 1 commit into from
May 4, 2014
Merged

fix(sortable): support helper option when set to a function #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-ui-sortable",
"version": "0.12.5",
"version": "0.12.6",
"description": "This directive allows you to jQueryUI Sortable.",
"author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
"license": "MIT",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-ui-sortable",
"version": "0.12.5",
"version": "0.12.6",
"description": "This directive allows you to jQueryUI Sortable.",
"author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
"license": "MIT",
Expand Down
10 changes: 8 additions & 2 deletions src/sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ angular.module('ui.sortable', [])
return first;
}

function hasSortingHelper (element) {
var helperOption = element.sortable('option','helper');
return helperOption === 'clone' || typeof helperOption === 'function';
}

var opts = {};

var callbacks = {
Expand Down Expand Up @@ -120,7 +125,7 @@ angular.module('ui.sortable', [])
// the start and stop of repeat sections and sortable doesn't
// respect their order (even if we cancel, the order of the
// comments are still messed up).
if (element.sortable('option','helper') === 'clone') {
if (hasSortingHelper(element)) {
// restore all the savedNodes except .ui-sortable-helper element
// (which is placed last). That way it will be garbage collected.
savedNodes = savedNodes.not(savedNodes.last());
Expand Down Expand Up @@ -155,7 +160,8 @@ angular.module('ui.sortable', [])
} else {
// if the item was not moved, then restore the elements
// so that the ngRepeat's comment are correct.
if((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) && element.sortable('option','helper') !== 'clone') {
if ((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) &&
!hasSortingHelper(element)) {
savedNodes.appendTo(element);
}
}
Expand Down
83 changes: 83 additions & 0 deletions test/sortable.e2e.multi.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,89 @@ describe('uiSortable', function() {
});
});

it('should work when "helper: function" option is used', function() {
inject(function($compile, $rootScope) {
var elementTop, elementBottom;
elementTop = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsTop"><li ng-repeat="item in itemsTop" id="s-top-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
elementBottom = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsBottom"><li ng-repeat="item in itemsBottom" id="s-bottom-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
$rootScope.$apply(function() {
$rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three'];
$rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three'];
$rootScope.opts = {
helper: function (e, item) {
return item.clone().text('helper');
},
connectWith: '.cross-sortable'
};
});

host.append(elementTop).append(elementBottom);

var li1 = elementTop.find(':eq(0)');
var li2 = elementBottom.find(':eq(0)');
var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
li1.simulate('drag', { dy: dy });
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']);
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Top One', 'Bottom Two', 'Bottom Three']);
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));

li1 = elementBottom.find(':eq(1)');
li2 = elementTop.find(':eq(1)');
dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top);
li1.simulate('drag', { dy: dy });
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']);
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));

$(elementTop).remove();
$(elementBottom).remove();
});
});

it('should work when "placeholder" and "helper: function" options are used', function() {
inject(function($compile, $rootScope) {
var elementTop, elementBottom;
elementTop = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsTop"><li ng-repeat="item in itemsTop" id="s-top-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
elementBottom = $compile('<ul ui-sortable="opts" class="cross-sortable" ng-model="itemsBottom"><li ng-repeat="item in itemsBottom" id="s-bottom-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
$rootScope.$apply(function() {
$rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three'];
$rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three'];
$rootScope.opts = {
helper: function (e, item) {
return item.clone().text('helper');
},
placeholder: 'sortable-item-placeholder',
connectWith: '.cross-sortable'
};
});

host.append(elementTop).append(elementBottom);

var li1 = elementTop.find(':eq(0)');
var li2 = elementBottom.find(':eq(0)');
var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
li1.simulate('drag', { dy: dy });
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']);
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Top One', 'Bottom Two', 'Bottom Three']);
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));

li1 = elementBottom.find(':eq(1)');
li2 = elementTop.find(':eq(1)');
dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top);
li1.simulate('drag', { dy: dy });
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']);
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));

$(elementTop).remove();
$(elementBottom).remove();
});
});

});

});
124 changes: 124 additions & 0 deletions test/sortable.e2e.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,130 @@ describe('uiSortable', function() {
});
});

it('should work when "helper: function" option is used', function() {
inject(function($compile, $rootScope) {
var element;
element = $compile('<ul ui-sortable="opts" ng-model="items"><li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
$rootScope.$apply(function() {
$rootScope.opts = {
helper: function (e, item) {
return item.clone().text('helper');
}
};
$rootScope.items = ['One', 'Two', 'Three'];
});

host.append(element);

var li = element.find(':eq(1)');
var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('drag', { dy: dy });
expect($rootScope.items).toEqual(['One', 'Three', 'Two']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':eq(1)');
dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('drag', { dy: dy });
expect($rootScope.items).toEqual(['Three', 'One', 'Two']);
expect($rootScope.items).toEqual(listContent(element));

$(element).remove();
});
});

it('should work when "helper: function" option is used and a drag is reverted', function() {
inject(function($compile, $rootScope) {
var element;
element = $compile('<ul ui-sortable="opts" ng-model="items"><li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
$rootScope.$apply(function() {
$rootScope.opts = {
helper: function (e, item) {
return item.clone().text('helper');
}
};
$rootScope.items = ['One', 'Two', 'Three'];
});

host.append(element);

var li = element.find(':eq(0)');
var dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('dragAndRevert', { dy: dy });
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':eq(0)');
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('drag', { dy: dy });
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':eq(1)');
dy = (1 + 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(':eq(1)');
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('drag', { dy: dy });
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

$(element).remove();
});
});

it('should work when "helper: function" and "placeholder" options are used together.', function() {
inject(function($compile, $rootScope) {
var element;
element = $compile('<ul ui-sortable="opts" ng-model="items"><li ng-repeat="item in items" id="s-{{$index}}" class="sortable-item">{{ item }}</li></ul>')($rootScope);
$rootScope.$apply(function() {
$rootScope.opts = {
helper: function (e, item) {
return item.clone().text('helper');
},
placeholder: 'sortable-item'
};
$rootScope.items = ['One', 'Two', 'Three'];
});

host.append(element);

var li = element.find(':eq(0)');
var dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('dragAndRevert', { dy: dy });
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':eq(0)');
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('drag', { dy: dy });
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':eq(1)');
dy = (1 + 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(':eq(1)');
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('dragAndRevert', { dy: dy });
expect($rootScope.items).toEqual(['Two', 'Three', 'One']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':eq(1)');
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
li.simulate('drag', { dy: dy });
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

$(element).remove();
});
});

});

});