Permalink
Browse files

Add drag/drop reordering. Closes #9

  • Loading branch information...
1 parent 6641cb9 commit e78591b708a6b1e06bfe66935191829b74e590ed @rashidkpc rashidkpc committed Nov 4, 2015
View
@@ -3,6 +3,7 @@
"version": "0.0.0",
"dependencies": {
"pegjs": "~0.8.0",
- "flot": "~0.8.3"
+ "flot": "~0.8.3",
+ "angular-sortable-view": "~0.0.13"
}
}
@@ -0,0 +1,37 @@
+{
+ "name": "angular-sortable-view",
+ "version": "0.0.13",
+ "homepage": "http://kamilkp.github.io/angular-sortable-view/",
+ "authors": [
+ "Kamil Pękala <kamilkp@gmail.com>"
+ ],
+ "description": "Fully declarative (multi)sortable for AngularJS",
+ "main": "./src/angular-sortable-view.js",
+ "keywords": [
+ "angularjs",
+ "sortable",
+ "ui-sortable",
+ "sort",
+ "sorting",
+ "declarative"
+ ],
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests",
+ "lib"
+ ],
+ "_release": "0.0.13",
+ "_resolution": {
+ "type": "version",
+ "tag": "v0.0.13",
+ "commit": "187250cb1cfbd25096185049bded7bcedeab4dbd"
+ },
+ "_source": "git://github.com/kamilkp/angular-sortable-view.git",
+ "_target": "~0.0.13",
+ "_originalSource": "angular-sortable-view",
+ "_direct": true
+}
@@ -0,0 +1,86 @@
+Version 0.0.13 - 2015/01/13
+================
+
+ * bug fixes
+
+Version 0.0.12 - 2014/12/09
+================
+
+ * bug fixes
+
+Version 0.0.11 - 2014/11/28
+================
+
+ * touch support
+
+Version 0.0.9 - 2014/09/11
+================
+
+ * fixed a bug where `$digest` hasn't been called after `sv-on-start` handler
+ * added a `sv-on-stop` optional attribute. Function bound there will be called when dragging ended regardless of the fact whether elements have been reordered or not
+
+Version 0.0.8 - 2014/07/15
+================
+
+ * fixed a bug where nothing within an element without handle could have been clicked
+
+
+Version 0.0.7 - 2014/07/02
+================
+
+You can now use these optional attributes on the element with `sv-root`:
+ * `sv-on-sort` - The expression passed as a value of that attribute will be evaluated when elements order has changed after sorting. Several parameters can be injected there like: `sv-on-sort="foo($item, $partFrom, $partTo, $indexFrom, $indexTo)"` where:
+ <ul>
+ <li>`$item` is the item in model which has been moved</li>
+ <li>`$partFrom` is the part from which the $item originated</li>
+ <li>`$partTo` is the part to which the $item has been moved</li>
+ <li>`$indexFrom` is the previous index of the $item in $partFrom</li>
+ <li>`$indedTo` is the index of the $item in $partTo</li>
+ </ul>
+ </li>
+ * `sv-on-start` - The expression passed as a value of that attribute will be evaluated when a user starts moving an element. Several parameters can be injected there like: `sv-on-start="bar($item, $part, $index, $helper)"` where:
+ <ul>
+ <li>`$item` is the item in model which started being moved</li>
+ <li>`$part` is the part from which the $item originates</li>
+ <li>`$index` is the index of the $item in $part</li>
+ <li>`$helper` is the jqLite/jQuery object of an element that is being dragged around</li>
+ </ul>
+ </li>
+
+Version 0.0.6 - 2014/07/01
+================
+
+ * You can now listen for resorting. An `sv-on-sort` attribute can be now placed on an element with `sv-root`. The expression passed as a value of that attribute will be evaluated when elements order has changed after sorting.
+
+Version 0.0.5 - 2014/06/26
+================
+
+ * source element for sorting is now detached from DOM instead of giving him `display: none`
+
+Version 0.0.4 - 2014/06/25
+================
+
+ * Fixed the issue with helper styles
+ * Dropped the need for the browser to support pointer-events CSS property
+ * Added the project to the bower registy, it is available to download via `bower install angular-sortable-view`
+
+Version 0.0.3 - 2014/06/11
+================
+
+ * Added support for custom placeholders
+ * Better containment handling
+ * Bug fixes
+ * BREAKING CHANGE: the module name is now `angular-sortable-view`
+
+Version 0.0.2 - 2014/06/11
+================
+
+ * Added support for empty lists
+ * Added support for custom helpers
+
+Version 0.0.1
+================
+
+ * Support for setting a containment
+ * Support for multiple sortable lists connected with each other
+ * Support for specifying a handle element
@@ -0,0 +1,43 @@
+module.exports = function(grunt){
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ // grunt.loadNpmTasks('grunt-karma');
+
+ grunt.initConfig({
+ uglify: {
+ target: {
+ files: {
+ 'src/angular-sortable-view.min.js': ['src/angular-sortable-view.js']
+ }
+ },
+ options: {
+ banner: '/*\n\tCopyright Kamil Pękala http://github.com/kamilkp\n' +
+ '\tangular-sortable-view v0.0.13 2015/01/13\n*/\n'
+ }
+ },
+ jshint: {
+ all: [
+ 'src/angular-sortable-view.js',
+ 'Gruntfile.js'
+ ]
+ }//,
+ // karma: {
+ // unit: {
+ // configFile: 'karma.conf.js',
+ // singleRun: true,
+ // },
+ // travis: {
+ // configFile: 'karma.conf.js',
+ // singleRun: true,
+ // browsers: [
+ // 'Firefox'
+ // ]
+ // }
+ // }
+ });
+
+ grunt.registerTask('min', 'Minify javascript source code', 'uglify');
+ // grunt.registerTask('test', 'Run unit tests', ['jshint', 'min', 'karma:unit']);
+ // grunt.registerTask('default', ['test']);
+ // grunt.registerTask('travis', ['jshint', 'min', 'karma:travis']);
+};
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 kamilkp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,159 @@
+angular-sortable-view v0.0.13 [![Bower version](https://badge.fury.io/bo/angular-sortable-view.svg)](http://badge.fury.io/bo/angular-sortable-view)
+=================
+
+Fully declarative (multi)sortable for AngularJS
+
+Demo: http://kamilkp.github.io/angular-sortable-view/
+
+You can find the source code for this demo on branch "gh-pages".
+
+Also see the changelog [here](https://github.com/kamilkp/angular-sortable-view/blob/master/CHANGELOG.md)
+
+###DESCRIPTION:
+
+This is a simple library written as a module for [AngularJS](https://github.com/angular/angular.js) for sorting elements in the UI. It supports both single elements list, and multiple connected lists, where an element can be moved from one to another.
+
+This library requires ***no dependencies whatsoever*** (except angular.js of course), so ***you no longer need to include jQuery and jQueryUI and angularUI*** which altogether gives the size of around ***340kB minified***. Whereas the [angular-sortable-view](https://github.com/kamilkp/angular-sortable-view) is only ***5kB minified!***.
+
+###API:
+
+The API is declarative. There are four directives (hooked on attributes) that need to be nested properly:
+
+ * `sv-root` - this is where all the logic is happening. If multiple lists should be connected with each other so that elements can be moved between them and they have a common ancestor, put this attribute on that element. If not and you still want the multi-sortable behaviour a value for that attribue must be provided. That value will be used as an identifier to connect those roots together.
+ **Optional attributes:**
+ * `sv-on-sort` - The expression passed as a value of that attribute will be evaluated when elements order has changed after sorting. Several parameters can be injected there like: `sv-on-sort="foo($item, $partFrom, $partTo, $indexFrom, $indexTo)"` where:
+ <ul>
+ <li>`$item` is the item in model which has been moved</li>
+ <li>`$partFrom` is the part from which the $item originated</li>
+ <li>`$partTo` is the part to which the $item has been moved</li>
+ <li>`$indexFrom` is the previous index of the $item in $partFrom</li>
+ <li>`$indexTo` is the index of the $item in $partTo</li>
+ </ul>
+ </li>
+ <li>`sv-on-start` - The expression passed as a value of that attribute will be evaluated when a user starts moving an element. Several parameters can be injected there like: `sv-on-start="bar($item, $part, $index, $helper)"` where:
+ <ul>
+ <li>`$item` is the item in model which started being moved</li>
+ <li>`$part` is the part from which the $item originates</li>
+ <li>`$index` is the index of the $item in $part</li>
+ <li>`$helper` is the jqLite/jQuery object of an element that is being dragged around</li>
+ </ul>
+ </li>
+ <li>`sv-on-stop` - The expression passed as a value of that attribute will be evaluated when a user stops moving an element (drops it). This will be called regardless of the fact whether elements have been reordered or now. Several parameters can be injected there like: `sv-on-end="baz($item, $part, $index)"` where:
+ <ul>
+ <li>`$item` is the item in model which started being moved</li>
+ <li>`$part` is the part from which the $item originates</li>
+ <li>`$index` is the index of the $item in $part</li>
+ </ul>
+ </li>
+ * `sv-part` - this attribute should be placed on an element that is a container for the `ngRepeat`'ed elements. Its value should be the same as the right hand side expression in `ng-repeat` attribute.
+ * `sv-element` - this attribute should be placed on the same element as `ng-repeat` attribute. Its (optional) value should be an expression that evaluates to the options object.
+ * `sv-handle` - this attribute is optional. If needed it can be placed on an element within the sortable element. This element will be the handle for sorting operations.
+ * `sv-helper` - the element with this attribute will serve as a custom helper for sorting operations
+ * `sv-placeholder` - the element with this attribute will serve as a custom placeholder for sorting operations
+
+###Example of single sortable list
+
+```html
+<div sv-root sv-part="modelArray">
+ <div ng-repeat="item in modelArray" sv-element>
+ <div>{{item}}</div>
+ </div>
+</div>
+```
+
+###Example of multiple sortable lists with common ancestor
+
+```html
+<div sv-root>
+ <div sv-part="modelArray1">
+ <div ng-repeat="item in modelArray1" sv-element>
+ <div>{{item}}</div>
+ </div>
+ </div>
+ <div sv-part="modelArray2">
+ <div ng-repeat="item in modelArray2" sv-element>
+ <div>{{item}}</div>
+ </div>
+ </div>
+</div>
+```
+
+###Example of multiple sortable lists without common ancestor
+
+```html
+<div>
+ <div sv-root="someUniqueId" sv-part="modelArray1">
+ <div ng-repeat="item in modelArray1" sv-element>
+ <div>{{item}}</div>
+ </div>
+ </div>
+ <div sv-root="someUniqueId" sv-part="modelArray2">
+ <div ng-repeat="item in modelArray2" sv-element>
+ <div>{{item}}</div>
+ </div>
+ </div>
+</div>
+```
+
+###Example of using handles
+
+```html
+<div sv-root sv-part="modelArray">
+ <div ng-repeat="item in modelArray" sv-element>
+ <div>{{item}}</div>
+ <span sv-handle>`
+ </div>
+</div>
+```
+
+###Example of using custom helpers per part
+
+```html
+<div sv-root sv-part="modelArray">
+ <div sv-helper>
+ custom helper
+ </div>
+ <div ng-repeat="item in modelArray" sv-element>
+ {{item}}
+ </div>
+</div>
+```
+
+###Example of using custom helpers per element
+
+```html
+<div sv-root sv-part="modelArray">
+ <div ng-repeat="item in modelArray" sv-element>
+ <div sv-helper>
+ custom helper {{item}}
+ </div>
+ {{item}}
+ </div>
+</div>
+```
+
+###Example of using custom placeholders per part
+
+```html
+<div sv-root sv-part="modelArray">
+ <div sv-placeholder>
+ custom placeholder
+ </div>
+ <div ng-repeat="item in modelArray" sv-element>
+ {{item}}
+ </div>
+</div>
+```
+
+###Example of using custom placeholders per element
+
+```html
+<div sv-root sv-part="modelArray">
+ <div ng-repeat="item in modelArray" sv-element>
+ <div sv-placeholder>
+ custom placeholder {{item}}
+ </div>
+ {{item}}
+ </div>
+</div>
+```
@@ -0,0 +1,27 @@
+{
+ "name": "angular-sortable-view",
+ "version": "0.0.13",
+ "homepage": "http://kamilkp.github.io/angular-sortable-view/",
+ "authors": [
+ "Kamil Pękala <kamilkp@gmail.com>"
+ ],
+ "description": "Fully declarative (multi)sortable for AngularJS",
+ "main": "./src/angular-sortable-view.js",
+ "keywords": [
+ "angularjs",
+ "sortable",
+ "ui-sortable",
+ "sort",
+ "sorting",
+ "declarative"
+ ],
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests",
+ "lib"
+ ]
+}
Oops, something went wrong.

0 comments on commit e78591b

Please sign in to comment.