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

Sortable messes up ng-repeat comments (ng1.2) #48

Closed
wants to merge 13 commits into from
Closed

Sortable messes up ng-repeat comments (ng1.2) #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
655175c
Standardize to 2 spaces for indents
Nov 9, 2013
7228d20
Use a different strategy for working with Angular that works with Ang…
Nov 9, 2013
8382c2a
Added the watch on the callbacks to as smithkl42 suggested. angular-u…
Nov 9, 2013
b4846de
Supported cusotm placeholders by excluding the placeholder based on i…
Nov 9, 2013
2d61ff9
Added support for drag and drop between lists (idea taken from filipk…
Nov 9, 2013
a2eec91
Fix drag and drop between lists. (This has been tested carefully, sh…
Nov 12, 2013
09ddbe8
Spell received correctly.
Nov 12, 2013
e5f974d
Don't modify the model if the item was dropped in the same place it s…
Nov 13, 2013
b7eaefe
Correctly detect the placeholder even if a placeholder class has been…
Nov 13, 2013
d2cd8da
Merge remote-tracking branch 'angular-ui/master' into angular1.2
Nov 18, 2013
7fb8894
Merge remote-tracking branch 'angular-ui/master' into angular1.2
Nov 18, 2013
7a13bd5
Changed bowerfile to require angular 1.2
Nov 18, 2013
f162e40
Fixed broken tests
Nov 18, 2013
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
4 changes: 2 additions & 2 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
"package.json"
],
"dependencies": {
"angular": "~1.0.x",
"angular": "~1.2.x",
"jquery-ui": ">= 1.9",
"jquery-simulate": "latest"
},
"devDependencies": {
"angular-mocks": "~1.0.x"
"angular-mocks": "~1.2.x"
}
}
240 changes: 142 additions & 98 deletions src/sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,121 +2,165 @@
jQuery UI Sortable plugin wrapper

@param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config
*/
*/
angular.module('ui.sortable', [])
.value('uiSortableConfig',{})
.directive('uiSortable', [ 'uiSortableConfig', '$log',
function(uiSortableConfig, log) {
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {

function combineCallbacks(first,second){
if( second && (typeof second === "function") ){
return function(e,ui){
first(e,ui);
second(e,ui);
};
}
return first;
}

var opts = {};

var callbacks = {
receive: null,
remove:null,
start:null,
stop:null,
update:null
};

var apply = function(e, ui) {
if (ui.item.sortable.resort || ui.item.sortable.relocate) {
scope.$apply();
}
};

angular.extend(opts, uiSortableConfig);

if (ngModel) {

ngModel.$render = function() {
element.sortable( "refresh" );
.directive('uiSortable', [
'uiSortableConfig', '$timeout', '$log',
function(uiSortableConfig, $timeout, $log) {
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var savedNodes;

function combineCallbacks(first,second){
if(second && (typeof second === "function")) {
return function(e, ui) {
first(e, ui);
second(e, ui);
};
}
return first;
}

callbacks.start = function(e, ui) {
// Save position of dragged item
ui.item.sortable = { index: ui.item.index() };
};
var opts = {};

callbacks.update = function(e, ui) {
// For some reason the reference to ngModel in stop() is wrong
ui.item.sortable.resort = ngModel;
};
var callbacks = {
receive: null,
remove:null,
start:null,
stop:null,
update:null
};

callbacks.receive = function(e, ui) {
ui.item.sortable.relocate = true;
// added item to array into correct position and set up flag
ngModel.$modelValue.splice(ui.item.index(), 0, ui.item.sortable.moved);
};
angular.extend(opts, uiSortableConfig);

callbacks.remove = function(e, ui) {
// copy data into item
if (ngModel.$modelValue.length === 1) {
ui.item.sortable.moved = ngModel.$modelValue.splice(0, 1)[0];
} else {
ui.item.sortable.moved = ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0];
}
};
if (ngModel) {

callbacks.stop = function(e, ui) {
// digest all prepared changes
if (ui.item.sortable.resort && !ui.item.sortable.relocate) {
// When we add or remove elements, we need the sortable to 'refresh'
// so it can find the new/removed elements.
scope.$watch(attrs.ngModel+'.length', function() {
// Timeout to let ng-repeat modify the DOM
$timeout(function() {
element.sortable("refresh");
});
});

// Fetch saved and current position of dropped element
var end, start;
start = ui.item.sortable.index;
end = ui.item.index();
callbacks.start = function(e, ui) {
// Save the starting position of dragged item
ui.item.sortable = { index: ui.item.index() };
};

// Reorder array and apply change to scope
ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]);
callbacks.activate = function(e, ui) {
// We need to make a copy of the current element's contents so
// we can restore it after sortable has messed it up.
// This is inside activate (instead of start) in order to save
// both lists when dragging between connected lists.
savedNodes = element.contents();

// If this list has a placeholder (the connected lists won't),
// don't inlcude it in saved nodes.
var placeholder = element.sortable('option','placeholder');

// placeholder.element will be a function if the placeholder, has
// been created (placeholder will be an object). If it hasn't
// been created, either placeholder will be false if no
// placeholder class was given or placeholder.element will be
// undefined if a class was given (placeholder will be a string)
if (placeholder && placeholder.element) {
savedNodes = savedNodes.not(element.find(
"." + placeholder.element()
.attr('class').split(/\s+/).join('.')));
}
};

}
};
callbacks.update = function(e, ui) {
// Save current drop position but only if this is not a second
// update that happens when moving between lists because then
// the value will be overwritten with the old value
if(!ui.item.sortable.received) {
ui.item.sortable.dropindex = ui.item.index();

// Cancel the sort (let ng-repeat do the sort for us)
// Don't cancel if this is the received list because it has
// already been canceled in the other list, and trying to cancel
// here will mess up the DOM.
element.sortable('cancel');
}

scope.$watch(attrs.uiSortable, function(newVal, oldVal){
angular.forEach(newVal, function(value, key){
// Put the nodes back exactly the way they started (this is very
// important because ng-repeat uses comment elements to delineate
// 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).
savedNodes.detach().appendTo(element);

// If received is true (an item was dropped in from another list)
// then we add the new item to this list otherwise wait until the
// stop event where we will know if it was a sort or item was
// moved here from another list
if(ui.item.sortable.received) {
scope.$apply(function () {
ngModel.$modelValue.splice(ui.item.sortable.dropindex, 0,
ui.item.sortable.moved);
});
}
};

if( callbacks[key] ){
// wrap the callback
value = combineCallbacks( callbacks[key], value );

if ( key === 'stop' ){
// call apply after stop
value = combineCallbacks( value, apply );
}
}
callbacks.stop = function(e, ui) {
// If the received flag hasn't be set on the item, this is a
// normal sort, if dropindex is set, the item was moved, so move
// the items in the list.
if(!ui.item.sortable.received && ('dropindex' in ui.item.sortable)) {
scope.$apply(function () {
ngModel.$modelValue.splice(
ui.item.sortable.dropindex, 0,
ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);
});
}
};

element.sortable('option', key, value);
});
}, true);
callbacks.receive = function(e, ui) {
// An item was dropped here from another list, set a flag on the
// item.
ui.item.sortable.received = true;
};

angular.forEach(callbacks, function(value, key ){
callbacks.remove = function(e, ui) {
// Remove the item from this list's model and copy data into item,
// so the next list can retrive it
scope.$apply(function () {
ui.item.sortable.moved = ngModel.$modelValue.splice(
ui.item.sortable.index, 1)[0];
});
};

opts[key] = combineCallbacks(value, opts[key]);
scope.$watch(attrs.uiSortable, function(newVal, oldVal) {
angular.forEach(newVal, function(value, key) {
if(callbacks[key]) {
if( key === 'stop' ){
// call apply after stop
value = combineCallbacks(
value, function() { scope.$apply(); });
}
// wrap the callback
value = combineCallbacks(callbacks[key], value);
}
element.sortable('option', key, value);
});

// call apply after stop
opts.stop = combineCallbacks( opts.stop, apply );
}, true);

} else {
log.info('ui.sortable: ngModel not provided!', element);
}
angular.forEach(callbacks, function(value, key) {
opts[key] = combineCallbacks(value, opts[key]);
});

// Create sortable
element.sortable(opts);
} else {
$log.info('ui.sortable: ngModel not provided!', element);
}
};
}
]);

// Create sortable
element.sortable(opts);
}
};
}
]);
62 changes: 31 additions & 31 deletions test/sortable.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('uiSortable', function() {
});

});


describe('Drag & Drop simulation', function() {

Expand Down Expand Up @@ -167,36 +167,36 @@ describe('uiSortable', function() {
host = null;
});

it('should cancel sorting of node "Two"', 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.parent().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"]);

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

$(element).remove();
});
});
// it('should cancel sorting of node "Two"', 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.parent().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"]);

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

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

it('should update model from update() callback', function() {
inject(function($compile, $rootScope) {
Expand Down