forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add drag/drop reordering. Closes elastic#9
- Loading branch information
Rashid Khan
committed
Nov 4, 2015
1 parent
6641cb9
commit e78591b
Showing
13 changed files
with
1,044 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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']); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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.