diff options
Diffstat (limited to 'js/vendor/angular-ui/modules/directives/sortable')
3 files changed, 206 insertions, 0 deletions
diff --git a/js/vendor/angular-ui/modules/directives/sortable/REDME.md b/js/vendor/angular-ui/modules/directives/sortable/REDME.md new file mode 100644 index 000000000..8d8786140 --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/sortable/REDME.md @@ -0,0 +1,54 @@ +# ui-sortable directive + +This directive allows you to sort array with drag & drop. + +## Requirements + +- JQuery +- JQueryUI + +## Usage + +Load the script file: sortable.js in your application: + +```html +<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script> +``` + +Add the sortable module as a dependency to your application module: + +```js +var myAppModule = angular.module('MyApp', ['ui.directives.sortable']) +``` + +Apply the directive to your form elements: + +```html +<ul ui-sortable ng-model="items"> + <li ng-repeat="item in items">{{ item }}</li> +</ul> +``` + +### Options + +All the jQueryUI Sortable options can be passed through the directive. + + +```js +myAppModule.controller('MyController', function($scope) { + $scope.items = ["One", "Two", "Three"]; + + $scope.sortableOptions = { + update: function(e, ui) { ... }, + axis: 'x' + }; +}); +``` + +```html +<ul ui-sortable="sortableOptions" ng-model="items"> + <li ng-repeat="item in items">{{ item }}</li> +</ul> +``` + + diff --git a/js/vendor/angular-ui/modules/directives/sortable/sortable.js b/js/vendor/angular-ui/modules/directives/sortable/sortable.js new file mode 100644 index 000000000..d2a73032e --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/sortable/sortable.js @@ -0,0 +1,112 @@ +/* + jQuery UI Sortable plugin wrapper + + @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config +*/ +angular.module('ui.directives').directive('uiSortable', [ + 'ui.config', function(uiConfig) { + return { + require: '?ngModel', + link: function(scope, element, attrs, ngModel) { + var onReceive, onRemove, onStart, onUpdate, opts, _receive, _remove, _start, _update; + + opts = angular.extend({}, uiConfig.sortable, scope.$eval(attrs.uiSortable)); + + if (ngModel) { + + ngModel.$render = function() { + element.sortable( "refresh" ); + }; + + onStart = function(e, ui) { + // Save position of dragged item + ui.item.sortable = { index: ui.item.index() }; + }; + + onUpdate = function(e, ui) { + // For some reason the reference to ngModel in stop() is wrong + ui.item.sortable.resort = ngModel; + }; + + onReceive = 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); + }; + + onRemove = 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]; + } + }; + + onStop = function(e, ui) { + // digest all prepared changes + if (ui.item.sortable.resort && !ui.item.sortable.relocate) { + + // Fetch saved and current position of dropped element + var end, start; + start = ui.item.sortable.index; + end = ui.item.index(); + if (start < end) + end--; + + // Reorder array and apply change to scope + ui.item.sortable.resort.$modelValue.splice(end, 0, ui.item.sortable.resort.$modelValue.splice(start, 1)[0]); + + } + if (ui.item.sortable.resort || ui.item.sortable.relocate) { + scope.$apply(); + } + }; + + // If user provided 'start' callback compose it with onStart function + _start = opts.start; + opts.start = function(e, ui) { + onStart(e, ui); + if (typeof _start === "function") + _start(e, ui); + }; + + // If user provided 'start' callback compose it with onStart function + _stop = opts.stop; + opts.stop = function(e, ui) { + onStop(e, ui); + if (typeof _stop === "function") + _stop(e, ui); + }; + + // If user provided 'update' callback compose it with onUpdate function + _update = opts.update; + opts.update = function(e, ui) { + onUpdate(e, ui); + if (typeof _update === "function") + _update(e, ui); + }; + + // If user provided 'receive' callback compose it with onReceive function + _receive = opts.receive; + opts.receive = function(e, ui) { + onReceive(e, ui); + if (typeof _receive === "function") + _receive(e, ui); + }; + + // If user provided 'remove' callback compose it with onRemove function + _remove = opts.remove; + opts.remove = function(e, ui) { + onRemove(e, ui); + if (typeof _remove === "function") + _remove(e, ui); + }; + } + + // Create sortable + element.sortable(opts); + } + }; + } +]); diff --git a/js/vendor/angular-ui/modules/directives/sortable/test/sortableSpec.js b/js/vendor/angular-ui/modules/directives/sortable/test/sortableSpec.js new file mode 100644 index 000000000..04a46a072 --- /dev/null +++ b/js/vendor/angular-ui/modules/directives/sortable/test/sortableSpec.js @@ -0,0 +1,40 @@ +describe('uiSortable', function() { + + // Ensure the sortable angular module is loaded + beforeEach(module('ui.directives')); + + describe('simple use', function() { + + it('should have a ui-sortable class', function() { + inject(function($compile, $rootScope) { + var element; + element = $compile("<ul ui-sortable></ul>")($rootScope); + expect(element.hasClass("ui-sortable")).toBeTruthy(); + }); + }); + + it('should update model when order changes', function() { + inject(function($compile, $rootScope) { + var element; + element = $compile('<ul ui-sortable ng-model="items"><li ng-repeat="item in items" id="s-{{$index}}">{{ item }}</li></ul>')($rootScope); + $rootScope.$apply(function() { + return $rootScope.items = ["One", "Two", "Three"]; + }); + + element.find('li:eq(1)').insertAfter(element.find('li:eq(2)')); + + // None of this work, one way is to use .bind("sortupdate") + // and then use .trigger("sortupdate", e, ui) but I have no idea how to + // construct ui object + + // element.sortable('refresh') + // element.sortable('refreshPositions') + // element.trigger('sortupdate') + + // expect($rootScope.items).toEqual(["One", "Three", "Two"]) + }); + }); + + }); + +});
\ No newline at end of file |