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

Commit 5e3d471

Browse files
thgreasithgreasi
committed
Merge pull request #168 from thgreasi/master
fix(sortable): support `helper` option when set to a function
2 parents d8ac4e8 + 050c9c1 commit 5e3d471

File tree

5 files changed

+217
-4
lines changed

5 files changed

+217
-4
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-ui-sortable",
3-
"version": "0.12.5",
3+
"version": "0.12.6",
44
"description": "This directive allows you to jQueryUI Sortable.",
55
"author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
66
"license": "MIT",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-ui-sortable",
3-
"version": "0.12.5",
3+
"version": "0.12.6",
44
"description": "This directive allows you to jQueryUI Sortable.",
55
"author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
66
"license": "MIT",

‎src/sortable.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ angular.module('ui.sortable', [])
2323
return first;
2424
}
2525

26+
function hasSortingHelper (element) {
27+
var helperOption = element.sortable('option','helper');
28+
return helperOption === 'clone' || typeof helperOption === 'function';
29+
}
30+
2631
var opts = {};
2732

2833
var callbacks = {
@@ -120,7 +125,7 @@ angular.module('ui.sortable', [])
120125
// the start and stop of repeat sections and sortable doesn't
121126
// respect their order (even if we cancel, the order of the
122127
// comments are still messed up).
123-
if (element.sortable('option','helper') === 'clone') {
128+
if (hasSortingHelper(element)) {
124129
// restore all the savedNodes except .ui-sortable-helper element
125130
// (which is placed last). That way it will be garbage collected.
126131
savedNodes = savedNodes.not(savedNodes.last());
@@ -155,7 +160,8 @@ angular.module('ui.sortable', [])
155160
} else {
156161
// if the item was not moved, then restore the elements
157162
// so that the ngRepeat's comment are correct.
158-
if((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) && element.sortable('option','helper') !== 'clone') {
163+
if ((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) &&
164+
!hasSortingHelper(element)) {
159165
savedNodes.appendTo(element);
160166
}
161167
}

‎test/sortable.e2e.multi.spec.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,89 @@ describe('uiSortable', function() {
263263
});
264264
});
265265

266+
it('should work when "helper: function" option is used', function() {
267+
inject(function($compile, $rootScope) {
268+
var elementTop, elementBottom;
269+
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);
270+
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);
271+
$rootScope.$apply(function() {
272+
$rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three'];
273+
$rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three'];
274+
$rootScope.opts = {
275+
helper: function (e, item) {
276+
return item.clone().text('helper');
277+
},
278+
connectWith: '.cross-sortable'
279+
};
280+
});
281+
282+
host.append(elementTop).append(elementBottom);
283+
284+
var li1 = elementTop.find(':eq(0)');
285+
var li2 = elementBottom.find(':eq(0)');
286+
var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
287+
li1.simulate('drag', { dy: dy });
288+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']);
289+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Top One', 'Bottom Two', 'Bottom Three']);
290+
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
291+
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));
292+
293+
li1 = elementBottom.find(':eq(1)');
294+
li2 = elementTop.find(':eq(1)');
295+
dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top);
296+
li1.simulate('drag', { dy: dy });
297+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']);
298+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
299+
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
300+
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));
301+
302+
$(elementTop).remove();
303+
$(elementBottom).remove();
304+
});
305+
});
306+
307+
it('should work when "placeholder" and "helper: function" options are used', function() {
308+
inject(function($compile, $rootScope) {
309+
var elementTop, elementBottom;
310+
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);
311+
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);
312+
$rootScope.$apply(function() {
313+
$rootScope.itemsTop = ['Top One', 'Top Two', 'Top Three'];
314+
$rootScope.itemsBottom = ['Bottom One', 'Bottom Two', 'Bottom Three'];
315+
$rootScope.opts = {
316+
helper: function (e, item) {
317+
return item.clone().text('helper');
318+
},
319+
placeholder: 'sortable-item-placeholder',
320+
connectWith: '.cross-sortable'
321+
};
322+
});
323+
324+
host.append(elementTop).append(elementBottom);
325+
326+
var li1 = elementTop.find(':eq(0)');
327+
var li2 = elementBottom.find(':eq(0)');
328+
var dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
329+
li1.simulate('drag', { dy: dy });
330+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top Three']);
331+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Top One', 'Bottom Two', 'Bottom Three']);
332+
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
333+
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));
334+
335+
li1 = elementBottom.find(':eq(1)');
336+
li2 = elementTop.find(':eq(1)');
337+
dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() - (li1.position().top - li2.position().top);
338+
li1.simulate('drag', { dy: dy });
339+
expect($rootScope.itemsTop).toEqual(['Top Two', 'Top One', 'Top Three']);
340+
expect($rootScope.itemsBottom).toEqual(['Bottom One', 'Bottom Two', 'Bottom Three']);
341+
expect($rootScope.itemsTop).toEqual(listContent(elementTop));
342+
expect($rootScope.itemsBottom).toEqual(listContent(elementBottom));
343+
344+
$(elementTop).remove();
345+
$(elementBottom).remove();
346+
});
347+
});
348+
266349
});
267350

268351
});

‎test/sortable.e2e.spec.js‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,130 @@ describe('uiSortable', function() {
429429
});
430430
});
431431

432+
it('should work when "helper: function" option is used', function() {
433+
inject(function($compile, $rootScope) {
434+
var element;
435+
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);
436+
$rootScope.$apply(function() {
437+
$rootScope.opts = {
438+
helper: function (e, item) {
439+
return item.clone().text('helper');
440+
}
441+
};
442+
$rootScope.items = ['One', 'Two', 'Three'];
443+
});
444+
445+
host.append(element);
446+
447+
var li = element.find(':eq(1)');
448+
var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
449+
li.simulate('drag', { dy: dy });
450+
expect($rootScope.items).toEqual(['One', 'Three', 'Two']);
451+
expect($rootScope.items).toEqual(listContent(element));
452+
453+
li = element.find(':eq(1)');
454+
dy = -(1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
455+
li.simulate('drag', { dy: dy });
456+
expect($rootScope.items).toEqual(['Three', 'One', 'Two']);
457+
expect($rootScope.items).toEqual(listContent(element));
458+
459+
$(element).remove();
460+
});
461+
});
462+
463+
it('should work when "helper: function" option is used and a drag is reverted', function() {
464+
inject(function($compile, $rootScope) {
465+
var element;
466+
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);
467+
$rootScope.$apply(function() {
468+
$rootScope.opts = {
469+
helper: function (e, item) {
470+
return item.clone().text('helper');
471+
}
472+
};
473+
$rootScope.items = ['One', 'Two', 'Three'];
474+
});
475+
476+
host.append(element);
477+
478+
var li = element.find(':eq(0)');
479+
var dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
480+
li.simulate('dragAndRevert', { dy: dy });
481+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
482+
expect($rootScope.items).toEqual(listContent(element));
483+
484+
li = element.find(':eq(0)');
485+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
486+
li.simulate('drag', { dy: dy });
487+
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
488+
expect($rootScope.items).toEqual(listContent(element));
489+
490+
li = element.find(':eq(1)');
491+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
492+
li.simulate('drag', { dy: dy });
493+
expect($rootScope.items).toEqual(['Two', 'Three', 'One']);
494+
expect($rootScope.items).toEqual(listContent(element));
495+
496+
li = element.find(':eq(1)');
497+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
498+
li.simulate('drag', { dy: dy });
499+
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
500+
expect($rootScope.items).toEqual(listContent(element));
501+
502+
$(element).remove();
503+
});
504+
});
505+
506+
it('should work when "helper: function" and "placeholder" options are used together.', function() {
507+
inject(function($compile, $rootScope) {
508+
var element;
509+
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);
510+
$rootScope.$apply(function() {
511+
$rootScope.opts = {
512+
helper: function (e, item) {
513+
return item.clone().text('helper');
514+
},
515+
placeholder: 'sortable-item'
516+
};
517+
$rootScope.items = ['One', 'Two', 'Three'];
518+
});
519+
520+
host.append(element);
521+
522+
var li = element.find(':eq(0)');
523+
var dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
524+
li.simulate('dragAndRevert', { dy: dy });
525+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
526+
expect($rootScope.items).toEqual(listContent(element));
527+
528+
li = element.find(':eq(0)');
529+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
530+
li.simulate('drag', { dy: dy });
531+
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
532+
expect($rootScope.items).toEqual(listContent(element));
533+
534+
li = element.find(':eq(1)');
535+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
536+
li.simulate('drag', { dy: dy });
537+
expect($rootScope.items).toEqual(['Two', 'Three', 'One']);
538+
expect($rootScope.items).toEqual(listContent(element));
539+
540+
li = element.find(':eq(1)');
541+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
542+
li.simulate('dragAndRevert', { dy: dy });
543+
expect($rootScope.items).toEqual(['Two', 'Three', 'One']);
544+
expect($rootScope.items).toEqual(listContent(element));
545+
546+
li = element.find(':eq(1)');
547+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
548+
li.simulate('drag', { dy: dy });
549+
expect($rootScope.items).toEqual(['Two', 'One', 'Three']);
550+
expect($rootScope.items).toEqual(listContent(element));
551+
552+
$(element).remove();
553+
});
554+
});
555+
432556
});
433557

434558
});

0 commit comments

Comments
 (0)