Skip to content

Commit

Permalink
Add drag/drop reordering. Closes elastic#9
Browse files Browse the repository at this point in the history
  • Loading branch information
Rashid Khan committed Nov 4, 2015
1 parent 6641cb9 commit e78591b
Show file tree
Hide file tree
Showing 13 changed files with 1,044 additions and 6 deletions.
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
37 changes: 37 additions & 0 deletions bower_components/angular-sortable-view/.bower.json
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
}
86 changes: 86 additions & 0 deletions bower_components/angular-sortable-view/CHANGELOG.md
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
43 changes: 43 additions & 0 deletions bower_components/angular-sortable-view/Gruntfile.js
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']);
};
21 changes: 21 additions & 0 deletions bower_components/angular-sortable-view/LICENSE
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.
159 changes: 159 additions & 0 deletions bower_components/angular-sortable-view/README.md
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>
```
27 changes: 27 additions & 0 deletions bower_components/angular-sortable-view/bower.json
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"
]
}
Loading

0 comments on commit e78591b

Please sign in to comment.