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

feat(sortable): support helper functions returning an existing list element #198

Closed
wants to merge 1 commit into from
Closed

feat(sortable): support helper functions returning an existing list element #198

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
31 changes: 26 additions & 5 deletions src/sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ angular.module('ui.sortable', [])
return first;
}

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

var opts = {};
Expand All @@ -38,6 +38,10 @@ angular.module('ui.sortable', [])
update:null
};

var wrappers = {
helper: null
};

angular.extend(opts, uiSortableConfig, scope.$eval(attrs.uiSortable));

if (!angular.element.fn || !angular.element.fn.jquery) {
Expand Down Expand Up @@ -70,7 +74,11 @@ angular.module('ui.sortable', [])
isCanceled: function () {
return ui.item.sortable._isCanceled;
},
_isCanceled: false
isCustomHelperUsed: function () {
return !!ui.item.sortable._isCustomHelperUsed;
},
_isCanceled: false,
_isCustomHelperUsed: ui.item.sortable._isCustomHelperUsed
};
};

Expand Down Expand Up @@ -125,7 +133,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 (hasSortingHelper(element) && !ui.item.sortable.received) {
if (hasSortingHelper(element, ui) && !ui.item.sortable.received) {
// 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 @@ -161,7 +169,7 @@ angular.module('ui.sortable', [])
// 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()) &&
!hasSortingHelper(element)) {
!hasSortingHelper(element, ui)) {
savedNodes.appendTo(element);
}
}
Expand All @@ -184,6 +192,17 @@ angular.module('ui.sortable', [])
}
};

wrappers.helper = function (inner) {
if (inner && typeof inner === 'function') {
return function (e, item) {
var innerResult = inner(e, item);
item.sortable._isCustomHelperUsed = item !== innerResult;
return innerResult;
};
}
return inner;
};

scope.$watch(attrs.uiSortable, function(newVal /*, oldVal*/) {
// ensure that the jquery-ui-sortable widget instance
// is still bound to the directive's element
Expand All @@ -197,6 +216,8 @@ angular.module('ui.sortable', [])
}
// wrap the callback
value = combineCallbacks(callbacks[key], value);
} else if (wrappers[key]) {
value = wrappers[key](value);
}

element.sortable('option', key, value);
Expand Down
39 changes: 39 additions & 0 deletions test/sortable.e2e.callbacks.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,45 @@ describe('uiSortable', function() {
});
});

it('should cancel sorting of node "Two" and "helper: function" that returns a list element 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}}">{{ item }}</li></ul>')($rootScope);
$rootScope.$apply(function() {
$rootScope.opts = {
update: function(e, ui) {
if (ui.item.scope().item === 'Two') {
ui.item.sortable.cancel();
}
}
};
$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', 'Two', 'Three']);
expect($rootScope.items).toEqual(listContent(element));

li = element.find(':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(':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 nodes that contain "Two"', function() {
inject(function($compile, $rootScope) {
var elementTop, elementBottom;
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 @@ -346,6 +346,89 @@ describe('uiSortable', function() {
});
});

it('should work when "helper: function" that returns a list element 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;
},
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" that returns a list element 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;
},
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();
});
});

});

});
93 changes: 93 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 @@ -553,6 +553,99 @@ describe('uiSortable', function() {
});
});

it('should work when "helper: function" that returns a list element 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;
}
};
$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" that returns a list element 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;
},
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();
});
});

});

});