/* 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', '$timeout', '$log', function(uiSortableConfig, $timeout, $log) { return { require: '?ngModel', scope: { ngModel: '=', uiSortable: '=' }, link: function(scope, element, attrs, ngModel) { var savedNodes; function combineCallbacks(first,second){ if(second && (typeof second === 'function')) { return function() { first.apply(this, arguments); second.apply(this, arguments); }; } return first; } function getSortableWidgetInstance(element) { // this is a fix to support jquery-ui prior to v1.11.x // otherwise we should be using `element.sortable('instance')` var data = element.data('ui-sortable'); if (data && typeof data === 'object' && data.widgetFullName === 'ui-sortable') { return data; } return null; } function hasSortingHelper (element, ui) { var helperOption = element.sortable('option','helper'); return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed()); } // thanks jquery-ui function isFloating (item) { return (/left|right/).test(item.css('float')) || (/inline|table-cell/).test(item.css('display')); } function getElementScope(elementScopes, element) { var result = null; for (var i = 0; i < elementScopes.length; i++) { var x = elementScopes[i]; if (x.element[0] === element[0]) { result = x.scope; break; } } return result; } function afterStop(e, ui) { ui.item.sortable._destroy(); } var opts = {}; // directive specific options var directiveOpts = { 'ui-floating': undefined }; var callbacks = { receive: null, remove:null, start:null, stop:null, update:null }; var wrappers = { helper: null }; angular.extend(opts, directiveOpts, uiSortableConfig, scope.uiSortable); if (!angular.element.fn || !angular.element.fn.jquery) { $log.error('ui.sortable: jQuery should be included before AngularJS!'); return; } if (ngModel) { // When we add or remove elements, we need the sortable to 'refresh' // so it can find the new/removed elements. scope.$watch('ngModel.length', function() { // Timeout to let ng-repeat modify the DOM $timeout(function() { // ensure that the jquery-ui-sortable widget instance // is still bound to the directive's element if (!!getSortableWidgetInstance(element)) { element.sortable('refresh'); } }, 0, false); }); callbacks.start = function(e, ui) { if (opts['ui-floating'] === 'auto') { // since the drag has started, the element will be // absolutely positioned, so we check its siblings var siblings = ui.item.siblings(); var sortableWidgetInstance = getSortableWidgetInstance(angular.element(e.target)); sortableWidgetInstance.floating = isFloating(siblings); } // Save the starting position of dragged item ui.item.sortable = { model: ngModel.$modelValue[ui.item.index()], index: ui.item.index(), source: ui.item.parent(), sourceModel: ngModel.$modelValue, cancel: function () { ui.item.sortable._isCanceled = true; }, isCanceled: function () { return ui.item.sortable._isCanceled; }, isCustomHelperUsed: function () { return !!ui.item.sortable._isCustomHelperUsed; }, _isCanceled: false, _isCustomHelperUsed: ui.item.sortable._isCustomHelperUsed, _destroy: function () { angular.forEach(ui.item.sortable, function(value, key) { ui.item.sortable[key] = undefined; }); } }; }; 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 && typeof placeholder.element === 'function') { var phElement = placeholder.element(); // workaround for jquery ui 1.9.x, // not returning jquery collection phElement = angular.element(phElement); // exact match with the placeholder's class attribute to handle // the case that multiple connected sortables exist and // the placehoilder option equals the class of sortable items var excludes = element.find('[class="' + phElement.attr('class') + '"]:not([ng-repeat], [data-ng-repeat])'); savedNodes = savedNodes.not(excludes); } // save the directive's scope so that it is accessible from ui.item.sortable var connectedSortables = ui.item.sortable._connectedSortables || []; connectedSortables.push({ element: element, scope: scope }); ui.item.sortable._connectedSortables = connectedSortables; }; 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(); var droptarget = ui.item.parent(); ui.item.sortable.droptarget = droptarget; var droptargetScope = getElementScope(ui.item.sortable._connectedSortables, droptarget); ui.item.sortable.droptargetModel = droptargetScope.ngModel; // 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'); } // 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). if (hasSortingHelper(element, ui) && !ui.item.sortable.received && element.sortable( 'option', 'appendTo' ) === 'parent') { // 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()); } savedNodes.appendTo(element); // If this is the target connected list then // it's safe to clear the restored nodes since: // update is currently running and // stop is not called for the target list. if(ui.item.sortable.received) { savedNodes = null; } // 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 && !ui.item.sortable.isCanceled()) { scope.$apply(function () { ngModel.$modelValue.splice(ui.item.sortable.dropindex, 0, ui.item.sortable.moved); }); } }; 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) && !ui.item.sortable.isCanceled()) { scope.$apply(function () { ngModel.$modelValue.splice( ui.item.sortable.dropindex, 0, ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]); }); } 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()) && !hasSortingHelper(element, ui)) { savedNodes.appendTo(element); } } // It's now safe to clear the savedNodes // since stop is the last callback. savedNodes = null; }; callbacks.receive = function(e, ui) { // An item was dropped here from another list, set a flag on the // item. ui.item.sortable.received = true; }; 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()) { scope.$apply(function () { ui.item.sortable.moved = ngModel.$modelValue.splice( ui.item.sortable.index, 1)[0]; }); } }; wrappers.helper = function (inner) { if (inner && typeof inner === 'function') { return function (e, item) { var innerResult = inner.apply(this, arguments); item.sortable._isCustomHelperUsed = item !== innerResult; return innerResult; }; } return inner; }; scope.$watch('uiSortable', function(newVal /*, oldVal*/) { // ensure that the jquery-ui-sortable widget instance // is still bound to the directive's element var sortableWidgetInstance = getSortableWidgetInstance(element); if (!!sortableWidgetInstance) { angular.forEach(newVal, function(value, key) { // if it's a custom option of the directive, // handle it approprietly if (key in directiveOpts) { if (key === 'ui-floating' && (value === false || value === true)) { sortableWidgetInstance.floating = value; } opts[key] = value; return; } if (callbacks[key]) { if( key === 'stop' ){ // call apply after stop value = combineCallbacks( value, function() { scope.$apply(); }); value = combineCallbacks(value, afterStop); } // wrap the callback value = combineCallbacks(callbacks[key], value); } else if (wrappers[key]) { value = wrappers[key](value); } opts[key] = value; element.sortable('option', key, value); }); } }, true); angular.forEach(callbacks, function(value, key) { opts[key] = combineCallbacks(value, opts[key]); if( key === 'stop' ){ opts[key] = combineCallbacks(opts[key], afterStop); } }); } else { $log.info('ui.sortable: ngModel not provided!', element); } // Create sortable element.sortable(opts); } }; } ]);