123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568 |
- /**
- * angular-ui-sortable - This directive allows you to jQueryUI Sortable.
- * @version v0.17.1 - 2017-04-15
- * @link http://angular-ui.github.com
- * @license MIT
- */
- (function(window, angular, undefined) {
- 'use strict';
- /*
- 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',{
- // the default for jquery-ui sortable is "> *", we need to restrict this to
- // ng-repeat items
- // if the user uses
- items: '> [ng-repeat],> [data-ng-repeat],> [x-ng-repeat]'
- })
- .directive('uiSortable', [
- 'uiSortableConfig', '$timeout', '$log',
- function(uiSortableConfig, $timeout, $log) {
- return {
- require:'?ngModel',
- scope: {
- ngModel:'=',
- uiSortable:'=',
- ////Expression bindings from html.
- create:'&uiSortableCreate',
- // helper:'&uiSortableHelper',
- start:'&uiSortableStart',
- activate:'&uiSortableActivate',
- // sort:'&uiSortableSort',
- // change:'&uiSortableChange',
- // over:'&uiSortableOver',
- // out:'&uiSortableOut',
- beforeStop:'&uiSortableBeforeStop',
- update:'&uiSortableUpdate',
- remove:'&uiSortableRemove',
- receive:'&uiSortableReceive',
- deactivate:'&uiSortableDeactivate',
- stop:'&uiSortableStop'
- },
- link: function(scope, element, attrs, ngModel) {
- var savedNodes;
- var helper;
- function combineCallbacks(first, second){
- var firstIsFunc = typeof first === 'function';
- var secondIsFunc = typeof second === 'function';
- if(firstIsFunc && secondIsFunc) {
- return function() {
- first.apply(this, arguments);
- second.apply(this, arguments);
- };
- } else if (secondIsFunc) {
- return second;
- }
- 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 patchSortableOption(key, value) {
- 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);
- }
- // patch the options that need to have values set
- if (!value && (key === 'items' || key === 'ui-model-items')) {
- value = uiSortableConfig.items;
- }
- return value;
- }
- function patchUISortableOptions(newVal, oldVal, sortableWidgetInstance) {
- function addDummyOptionKey(value, key) {
- if (!(key in opts)) {
- // add the key in the opts object so that
- // the patch function detects and handles it
- opts[key] = null;
- }
- }
- // for this directive to work we have to attach some callbacks
- angular.forEach(callbacks, addDummyOptionKey);
- // only initialize it in case we have to
- // update some options of the sortable
- var optsDiff = null;
- if (oldVal) {
- // reset deleted options to default
- var defaultOptions;
- angular.forEach(oldVal, function(oldValue, key) {
- if (!newVal || !(key in newVal)) {
- if (key in directiveOpts) {
- if (key === 'ui-floating') {
- opts[key] = 'auto';
- } else {
- opts[key] = patchSortableOption(key, undefined);
- }
- return;
- }
- if (!defaultOptions) {
- defaultOptions = angular.element.ui.sortable().options;
- }
- var defaultValue = defaultOptions[key];
- defaultValue = patchSortableOption(key, defaultValue);
- if (!optsDiff) {
- optsDiff = {};
- }
- optsDiff[key] = defaultValue;
- opts[key] = defaultValue;
- }
- });
- }
- // update changed options
- 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) {
- sortableWidgetInstance.floating = value;
- }
- opts[key] = patchSortableOption(key, value);
- return;
- }
- value = patchSortableOption(key, value);
- if (!optsDiff) {
- optsDiff = {};
- }
- optsDiff[key] = value;
- opts[key] = value;
- });
- return optsDiff;
- }
- function getPlaceholderElement (element) {
- 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 result = placeholder.element();
- // workaround for jquery ui 1.9.x,
- // not returning jquery collection
- result = angular.element(result);
- return result;
- }
- return null;
- }
- function getPlaceholderExcludesludes (element, placeholder) {
- // exact match with the placeholder's class attribute to handle
- // the case that multiple connected sortables exist and
- // the placeholder option equals the class of sortable items
- var notCssSelector = opts['ui-model-items'].replace(/[^,]*>/g, '');
- var excludes = element.find('[class="' + placeholder.attr('class') + '"]:not(' + notCssSelector + ')');
- return excludes;
- }
- function hasSortingHelper (element, ui) {
- var helperOption = element.sortable('option','helper');
- return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed());
- }
- function getSortingHelper (element, ui/*, savedNodes*/) {
- var result = null;
- if (hasSortingHelper(element, ui) &&
- element.sortable( 'option', 'appendTo' ) === 'parent') {
- // The .ui-sortable-helper element (that's the default class name)
- result = helper;
- }
- return result;
- }
- // thanks jquery-ui
- function isFloating (item) {
- return (/left|right/).test(item.css('float')) || (/inline|table-cell/).test(item.css('display'));
- }
- function getElementContext(elementScopes, element) {
- for (var i = 0; i < elementScopes.length; i++) {
- var c = elementScopes[i];
- if (c.element[0] === element[0]) {
- return c;
- }
- }
- }
- function afterStop(e, ui) {
- ui.item.sortable._destroy();
- }
- // return the index of ui.item among the items
- // we can't just do ui.item.index() because there it might have siblings
- // which are not items
- function getItemIndex(item) {
- return item.parent()
- .find(opts['ui-model-items'])
- .index(item);
- }
- var opts = {};
- // directive specific options
- var directiveOpts = {
- 'ui-floating': undefined,
- 'ui-model-items': uiSortableConfig.items
- };
- var callbacks = {
- create: null,
- start: null,
- activate: null,
- // sort: null,
- // change: null,
- // over: null,
- // out: null,
- beforeStop: null,
- update: null,
- remove: null,
- receive: null,
- deactivate: null,
- stop: 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;
- }
- function wireUp () {
- // When we add or remove elements, we need the sortable to 'refresh'
- // so it can find the new/removed elements.
- scope.$watchCollection('ngModel', 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
- var index = getItemIndex(ui.item);
- ui.item.sortable = {
- model: ngModel.$modelValue[index],
- index: index,
- source: element,
- sourceList: 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;
- });
- },
- _connectedSortables: [],
- _getElementContext: function (element) {
- return getElementContext(this._connectedSortables, element);
- }
- };
- };
- callbacks.activate = function(e, ui) {
- var isSourceContext = ui.item.sortable.source === element;
- var savedNodesOrigin = isSourceContext ?
- ui.item.sortable.sourceList :
- element;
- var elementContext = {
- element: element,
- scope: scope,
- isSourceContext: isSourceContext,
- savedNodesOrigin: savedNodesOrigin
- };
- // save the directive's scope so that it is accessible from ui.item.sortable
- ui.item.sortable._connectedSortables.push(elementContext);
- // 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 = savedNodesOrigin.contents();
- helper = ui.helper;
- // If this list has a placeholder (the connected lists won't),
- // don't inlcude it in saved nodes.
- var placeholder = getPlaceholderElement(element);
- if (placeholder && placeholder.length) {
- var excludes = getPlaceholderExcludesludes(element, placeholder);
- savedNodes = savedNodes.not(excludes);
- }
- };
- 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 = getItemIndex(ui.item);
- var droptarget = ui.item.closest('[ui-sortable], [data-ui-sortable], [x-ui-sortable]');
- ui.item.sortable.droptarget = droptarget;
- ui.item.sortable.droptargetList = ui.item.parent();
- var droptargetContext = ui.item.sortable._getElementContext(droptarget);
- ui.item.sortable.droptargetModel = droptargetContext.scope.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).
- var sortingHelper = !ui.item.sortable.received && getSortingHelper(element, ui, savedNodes);
- if (sortingHelper && sortingHelper.length) {
- // Restore all the savedNodes except from the sorting helper element.
- // That way it will be garbage collected.
- savedNodes = savedNodes.not(sortingHelper);
- }
- var elementContext = ui.item.sortable._getElementContext(element);
- savedNodes.appendTo(elementContext.savedNodesOrigin);
- // 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);
- });
- scope.$emit('ui-sortable:moved', ui);
- }
- };
- 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.
- var wasMoved = ('dropindex' in ui.item.sortable) &&
- !ui.item.sortable.isCanceled();
- if (wasMoved && !ui.item.sortable.received) {
- scope.$apply(function () {
- ngModel.$modelValue.splice(
- ui.item.sortable.dropindex, 0,
- ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);
- });
- scope.$emit('ui-sortable:moved', ui);
- } else if (!wasMoved &&
- !angular.equals(element.contents().toArray(), savedNodes.toArray())) {
- // if the item was not moved
- // and the DOM element order has changed,
- // then restore the elements
- // so that the ngRepeat's comment are correct.
- var sortingHelper = getSortingHelper(element, ui, savedNodes);
- if (sortingHelper && sortingHelper.length) {
- // Restore all the savedNodes except from the sorting helper element.
- // That way it will be garbage collected.
- savedNodes = savedNodes.not(sortingHelper);
- }
- var elementContext = ui.item.sortable._getElementContext(element);
- savedNodes.appendTo(elementContext.savedNodesOrigin);
- }
- // It's now safe to clear the savedNodes and helper
- // since stop is the last callback.
- savedNodes = null;
- helper = 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];
- });
- }
- };
- // setup attribute handlers
- angular.forEach(callbacks, function(value, key) {
- callbacks[key] = combineCallbacks(callbacks[key],
- function () {
- var attrHandler = scope[key];
- var attrHandlerFn;
- if (typeof attrHandler === 'function' &&
- ('uiSortable' + key.substring(0,1).toUpperCase() + key.substring(1)).length &&
- typeof (attrHandlerFn = attrHandler()) === 'function') {
- attrHandlerFn.apply(this, arguments);
- }
- });
- });
- wrappers.helper = function (inner) {
- if (inner && typeof inner === 'function') {
- return function (e, item) {
- var oldItemSortable = item.sortable;
- var index = getItemIndex(item);
- item.sortable = {
- model: ngModel.$modelValue[index],
- index: index,
- source: element,
- sourceList: item.parent(),
- sourceModel: ngModel.$modelValue,
- _restore: function () {
- angular.forEach(item.sortable, function(value, key) {
- item.sortable[key] = undefined;
- });
- item.sortable = oldItemSortable;
- }
- };
- var innerResult = inner.apply(this, arguments);
- item.sortable._restore();
- item.sortable._isCustomHelperUsed = item !== innerResult;
- return innerResult;
- };
- }
- return inner;
- };
- scope.$watchCollection('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) {
- var optsDiff = patchUISortableOptions(newVal, oldVal, sortableWidgetInstance);
- if (optsDiff) {
- element.sortable('option', optsDiff);
- }
- }
- }, true);
- patchUISortableOptions(opts);
- }
- function init () {
- if (ngModel) {
- wireUp();
- } else {
- $log.info('ui.sortable: ngModel not provided!', element);
- }
- // Create sortable
- element.sortable(opts);
- }
- function initIfEnabled () {
- if (scope.uiSortable && scope.uiSortable.disabled) {
- return false;
- }
- init();
- // Stop Watcher
- initIfEnabled.cancelWatcher();
- initIfEnabled.cancelWatcher = angular.noop;
- return true;
- }
- initIfEnabled.cancelWatcher = angular.noop;
- if (!initIfEnabled()) {
- initIfEnabled.cancelWatcher = scope.$watch('uiSortable.disabled', initIfEnabled);
- }
- }
- };
- }
- ]);
- })(window, window.angular);
|