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

feat(sortable): add workaround for nested sortings not triggering update #199

Merged
merged 3 commits into from
Jun 11, 2014
Merged

feat(sortable): add workaround for nested sortings not triggering update #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e29492b
test(sortable): add test for nested sortables where update is not firing
thgreasi Jun 10, 2014
10e5866
feat(sortable): add workaround for nested sortings not triggering update
thgreasi Jun 10, 2014
191f70a
test(sortable): add test for dragging items from parent list into nes…
thgreasi Jun 10, 2014
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
8 changes: 8 additions & 0 deletions src/sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,14 @@ angular.module('ui.sortable', [])
};

callbacks.remove = function(e, ui) {
// Workaround for a problem observed in nested connected lists.
// There should be an 'update' event before 'remove' when moving
// elements. If the event did not fire, cancel sorting.
if (!('dropindex' in ui.item.sortable)) {
element.sortable('cancel');
ui.item.sortable.cancel();
}

// Remove the item from this list's model and copy data into item,
// so the next list can retrive it
if (!ui.item.sortable.isCanceled()) {
Expand Down
107 changes: 106 additions & 1 deletion test/sortable.e2e.multi.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@ describe('uiSortable', function() {
beforeEach(module('ui.sortable'));
beforeEach(module('ui.sortable.testHelper'));

var EXTRA_DY_PERCENTAGE, listContent;
var EXTRA_DY_PERCENTAGE, listContent, listInnerContent;

beforeEach(inject(function (sortableTestHelper) {
EXTRA_DY_PERCENTAGE = sortableTestHelper.EXTRA_DY_PERCENTAGE;
listContent = sortableTestHelper.listContent;
listInnerContent = sortableTestHelper.listInnerContent;
}));

describe('Multiple sortables related', function() {
Expand Down Expand Up @@ -346,6 +347,110 @@ describe('uiSortable', function() {
});
});

it('should update model when sorting between nested sortables', function() {
inject(function($compile, $rootScope) {
var elementTree, li1, li2, dy;

elementTree = $compile(''.concat(
'<ul ui-sortable="sortableOptions" ng-model="items" class="apps-container outterList" style="float: left;margin-left: 10px;padding-bottom: 10px;">',
'<li ng-repeat="item in items">',
'<div>',
'<span class="itemContent lvl1ItemContent">{{item.text}}</span>',
'<ul ui-sortable="sortableOptions" ng-model="item.items" class="apps-container innerList" style="margin-left: 10px;padding-bottom: 10px;">',
'<li ng-repeat="i in item.items">',
'<span class="itemContent lvl2ItemContent">{{i.text}}</span>',
'</li>',
'</ul>',
'</div>',
'</li>',
'</ul>',
'<div style="clear: both;"></div>'))($rootScope);

$rootScope.$apply(function() {
$rootScope.items = [
{
text: 'Item 1',
items: []
},
{
text: 'Item 2',
items: [
{ text: 'Item 2.1', items: [] },
{ text: 'Item 2.2', items: [] }
]
}
];

$rootScope.sortableOptions = {
connectWith: '.apps-container'
};
});

host.append(elementTree);

// this should drag the item out of the list and
// the item should return back to its original position
li1 = elementTree.find('.innerList:last').find(':last');
li1.simulate('drag', { dx: -200, moves: 30 });
expect($rootScope.items.map(function(x){ return x.text; }))
.toEqual(['Item 1', 'Item 2']);
expect($rootScope.items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree, '.lvl1ItemContent'));
expect($rootScope.items[0].items.map(function(x){ return x.text; }))
.toEqual([]);
expect($rootScope.items[0].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent'));
expect($rootScope.items[1].items.map(function(x){ return x.text; }))
.toEqual(['Item 2.1', 'Item 2.2']);
expect($rootScope.items[1].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent'));

// this should drag the item from the inner list and
// drop it to the outter list
li1 = elementTree.find('.innerList:last').find(':last');
li2 = elementTree.find('> li:last');
dy = EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
li1.simulate('drag', { dy: dy });
expect($rootScope.items.map(function(x){ return x.text; }))
.toEqual(['Item 1', 'Item 2.2', 'Item 2']);
expect($rootScope.items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree, '.lvl1ItemContent'));
expect($rootScope.items[0].items.map(function(x){ return x.text; }))
.toEqual([]);
expect($rootScope.items[0].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent'));
expect($rootScope.items[1].items.map(function(x){ return x.text; }))
.toEqual([]);
expect($rootScope.items[1].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent'));
expect($rootScope.items[2].items.map(function(x){ return x.text; }))
.toEqual(['Item 2.1']);
expect($rootScope.items[2].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(2)'), '.lvl2ItemContent'));

// this should drag the item from the outter list and
// drop it to the inner list
li1 = elementTree.find('> li:first');
li2 = elementTree.find('.innerList:last').find(':last');
dy = -EXTRA_DY_PERCENTAGE * li1.outerHeight() + (li2.position().top - li1.position().top);
li1.simulate('drag', { dy: dy });
expect($rootScope.items.map(function(x){ return x.text; }))
.toEqual(['Item 2.2', 'Item 2']);
expect($rootScope.items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree, '.lvl1ItemContent'));
expect($rootScope.items[0].items.map(function(x){ return x.text; }))
.toEqual([]);
expect($rootScope.items[0].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(0)'), '.lvl2ItemContent'));
expect($rootScope.items[1].items.map(function(x){ return x.text; }))
.toEqual(['Item 1', 'Item 2.1']);
expect($rootScope.items[1].items.map(function(x){ return x.text; }))
.toEqual(listInnerContent(elementTree.find('.innerList:eq(1)'), '.lvl2ItemContent'));

$(elementTree).remove();
});
});

});

});
8 changes: 6 additions & 2 deletions test/sortable.test-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@ angular.module('ui.sortable.testHelper', [])
return [];
}

function listInnerContent (list) {
function listInnerContent (list, contentSelector) {
if (!contentSelector) {
contentSelector = '.itemContent';
}

if (list && list.length) {
return list.children().map(function(){ return $(this).find('.itemContent').html(); }).toArray();
return list.children().map(function(){ return $(this).find(contentSelector).html(); }).toArray();
}
return [];
}
Expand Down