-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
1,074 additions
and
31 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
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,34 @@ | ||
base64@1.0.3 | ||
binary-heap@1.0.3 | ||
blaze@2.1.2 | ||
blaze-tools@1.0.3 | ||
callback-hook@1.0.3 | ||
check@1.0.5 | ||
dburles:mongo-collection-instances@0.3.4 | ||
ddp@1.1.0 | ||
deps@1.0.7 | ||
ejson@1.0.6 | ||
geojson-utils@1.0.3 | ||
html-tools@1.0.4 | ||
htmljs@1.0.4 | ||
id-map@1.0.3 | ||
jquery@1.11.3_2 | ||
json@1.0.3 | ||
lai:collection-extensions@0.1.4 | ||
local-test:rubaxa:sortable@1.2.1 | ||
logging@1.0.7 | ||
meteor@1.1.6 | ||
minifiers@1.1.5 | ||
minimongo@1.0.8 | ||
mongo@1.1.0 | ||
observe-sequence@1.0.6 | ||
ordered-dict@1.0.3 | ||
random@1.0.3 | ||
reactive-var@1.0.5 | ||
retry@1.0.3 | ||
rubaxa:sortable@1.2.1 | ||
spacebars-compiler@1.0.6 | ||
templating@1.1.1 | ||
tinytest@1.0.5 | ||
tracker@1.0.7 | ||
underscore@1.0.3 |
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,133 @@ | ||
Reactive reorderable lists with [Sortable](http://rubaxa.github.io/Sortable/), | ||
backed by [Meteor.js](http://meteor.com) collections: | ||
|
||
* new elements arriving in the collection will update the list as you expect | ||
* elements removed from the collection will be removed from the list | ||
* drag and drop between lists updates collections accordingly | ||
|
||
Demo: http://rubaxa-sortable.meteor.com | ||
|
||
# Meteor | ||
|
||
If you're new to Meteor, here's what the excitement is all about - | ||
[watch the first two minutes](https://www.youtube.com/watch?v=fsi0aJ9yr2o); you'll be hooked by 1:28. | ||
That screencast is from 2012. In the meantime, Meteor has become a mature JavaScript-everywhere web | ||
development framework. Read more at [Why Meteor](http://wiki.dandascalescu.com/essays/why_meteor). | ||
|
||
|
||
# Usage | ||
|
||
Simplest invocation - order will be lost when the page is refreshed: | ||
|
||
```handlebars | ||
{{#sortable <collection|cursor|array>}} | ||
``` | ||
|
||
Persist the sort order in the 'order' field of each document in the collection: | ||
|
||
*Client:* | ||
|
||
```handlebars | ||
{{#sortable items=<collection|cursor|array> sortField="order"}} | ||
``` | ||
|
||
*Server:* | ||
|
||
```js | ||
Sortable.collections = <collectionName>; // the name, not the variable | ||
``` | ||
|
||
Along with `items`, `sortField` is the only Meteor-specific option. If it's missing, the package will | ||
assume there is a field called "order" in the collection, holding unique `Number`s such that every | ||
`order` differs from that before and after it by at least 1. Basically, keep to 0, 1, 2, ... . | ||
Try not to depend on a particular format for this field; it *is* though guaranteed that a `sort` will | ||
produce lexicographical order, and that the order will be maintained after an arbitrary number of | ||
reorderings, unlike with [naive solutions](http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible). | ||
|
||
Remember to declare on the server which collections you want to be reorderable from the client. | ||
Otherwise, the library will error because the client would be able to modify numerical fields in | ||
any collection, which represents a security risk. | ||
|
||
|
||
## Passing options to the Sortable library | ||
|
||
{{#sortable items=<collection|cursor|array> option1=value1 option2=value2...}} | ||
{{#sortable items=<collection|cursor|array> options=myOptions}} | ||
|
||
For available options, please refer to [the main README](../README.md#options). You can pass them directly | ||
or under the `options` object. Direct options (`key=value`) override those in `options`. It is best | ||
to pass presentation-related options directly, and functionality-related settings in an `options` | ||
object, as this will enable designers to work without needing to inspect the JavaScript code: | ||
|
||
<template name="myTemplate"> | ||
... | ||
{{#sortable items=Players handle=".sortable-handle" ghostClass="sortable-ghost" options=playerOptions}} | ||
</template> | ||
|
||
Define the options in a helper for the template that calls Sortable: | ||
|
||
```js | ||
Template.myTemplate.helpers({ | ||
playerOptions: function () { | ||
return { | ||
group: { | ||
name: "league", | ||
pull: true, | ||
put: false | ||
}, | ||
sort: false | ||
}; | ||
} | ||
}); | ||
``` | ||
|
||
#### Meteor-specific options | ||
|
||
* `selector` - you can specify a collection selector if your list operates only on a subset of the collection. Example: | ||
|
||
```js | ||
Template.myTemplate.helpers({ | ||
playerOptions: function() { | ||
return { | ||
selector: { city: 'San Francisco' } | ||
} | ||
} | ||
}); | ||
``` | ||
|
||
|
||
## Events | ||
|
||
All the original Sortable events are supported. In addition, they will receive | ||
the data context in `event.data`. You can access `event.data.order` this way: | ||
|
||
```handlebars | ||
{{#sortable items=players options=playersOptions}} | ||
``` | ||
|
||
```js | ||
Template.myTemplate.helpers({ | ||
playersOptions: function () { | ||
return { | ||
onSort: function(/**Event*/event) { | ||
console.log('Moved player #%d from %d to %d', | ||
event.data.order, event.oldIndex, event.newIndex | ||
); | ||
} | ||
}; | ||
} | ||
}); | ||
``` | ||
|
||
|
||
# Issues | ||
|
||
If you encounter an issue while using this package, please CC @dandv when you file it in this repo. | ||
|
||
|
||
# TODO | ||
|
||
* Array support | ||
* Tests | ||
* Misc. - see reactivize.js | ||
* [GitHub issues](https://github.com/RubaXa/Sortable/labels/%E2%98%84%20meteor) |
8 changes: 8 additions & 0 deletions
8
imports/ui/bower_components/Sortable/meteor/example/.meteor/.finished-upgraders
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,8 @@ | ||
# This file contains information which helps Meteor properly upgrade your | ||
# app when you run 'meteor update'. You should check it into version control | ||
# with your project. | ||
|
||
notices-for-0.9.0 | ||
notices-for-0.9.1 | ||
0.9.4-platform-file | ||
notices-for-facebook-graph-api-2 |
1 change: 1 addition & 0 deletions
1
imports/ui/bower_components/Sortable/meteor/example/.meteor/.gitignore
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 @@ | ||
local |
7 changes: 7 additions & 0 deletions
7
imports/ui/bower_components/Sortable/meteor/example/.meteor/.id
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,7 @@ | ||
# This file contains a token that is unique to your project. | ||
# Check it into your repository along with the rest of this directory. | ||
# It can be used for purposes such as: | ||
# - ensuring you don't accidentally deploy one app on top of another | ||
# - providing package authors with aggregated statistics | ||
|
||
ir0jg2douy3yo5mehw |
10 changes: 10 additions & 0 deletions
10
imports/ui/bower_components/Sortable/meteor/example/.meteor/packages
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,10 @@ | ||
# Meteor packages used by this project, one per line. | ||
# | ||
# 'meteor add' and 'meteor remove' will edit this file for you, | ||
# but you can also edit it by hand. | ||
|
||
meteor-platform | ||
autopublish | ||
insecure | ||
rubaxa:sortable | ||
fezvrasta:bootstrap-material-design |
2 changes: 2 additions & 0 deletions
2
imports/ui/bower_components/Sortable/meteor/example/.meteor/platforms
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,2 @@ | ||
browser | ||
server |
1 change: 1 addition & 0 deletions
1
imports/ui/bower_components/Sortable/meteor/example/.meteor/release
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 @@ | ||
METEOR@1.1.0.3 |
53 changes: 53 additions & 0 deletions
53
imports/ui/bower_components/Sortable/meteor/example/.meteor/versions
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,53 @@ | ||
autopublish@1.0.3 | ||
autoupdate@1.2.1 | ||
base64@1.0.3 | ||
binary-heap@1.0.3 | ||
blaze@2.1.2 | ||
blaze-tools@1.0.3 | ||
boilerplate-generator@1.0.3 | ||
callback-hook@1.0.3 | ||
check@1.0.5 | ||
dburles:mongo-collection-instances@0.3.4 | ||
ddp@1.1.0 | ||
deps@1.0.7 | ||
ejson@1.0.6 | ||
fastclick@1.0.3 | ||
fezvrasta:bootstrap-material-design@0.3.0 | ||
geojson-utils@1.0.3 | ||
html-tools@1.0.4 | ||
htmljs@1.0.4 | ||
http@1.1.0 | ||
id-map@1.0.3 | ||
insecure@1.0.3 | ||
jquery@1.11.3_2 | ||
json@1.0.3 | ||
lai:collection-extensions@0.1.4 | ||
launch-screen@1.0.2 | ||
livedata@1.0.13 | ||
logging@1.0.7 | ||
meteor@1.1.6 | ||
meteor-platform@1.2.2 | ||
minifiers@1.1.5 | ||
minimongo@1.0.8 | ||
mobile-status-bar@1.0.3 | ||
mongo@1.1.0 | ||
observe-sequence@1.0.6 | ||
ordered-dict@1.0.3 | ||
random@1.0.3 | ||
reactive-dict@1.1.0 | ||
reactive-var@1.0.5 | ||
reload@1.1.3 | ||
retry@1.0.3 | ||
routepolicy@1.0.5 | ||
rubaxa:sortable@1.2.1 | ||
session@1.1.0 | ||
spacebars@1.0.6 | ||
spacebars-compiler@1.0.6 | ||
templating@1.1.1 | ||
tracker@1.0.7 | ||
twbs:bootstrap@3.3.5 | ||
ui@1.0.6 | ||
underscore@1.0.3 | ||
url@1.0.4 | ||
webapp@1.2.0 | ||
webapp-hashing@1.0.3 |
59 changes: 59 additions & 0 deletions
59
imports/ui/bower_components/Sortable/meteor/example/README.md
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,59 @@ | ||
# RubaXa:Sortable Meteor demo | ||
|
||
This demo showcases the two-way integration between the reorderable list | ||
widget [Sortable](https://github.com/RubaXa/Sortable/) and Meteor.js. Meteor | ||
Mongo collections are updated when items are added, removed or reordered, and | ||
the order is persisted. | ||
|
||
It also shows list grouping and control over what lists can give or receive | ||
elements. You can only drag elements from the list to the left onto the list | ||
to the right. | ||
|
||
|
||
## Usage | ||
|
||
The example uses the local package from the checkout, with the help of the run script: | ||
|
||
### Windows | ||
|
||
git clone https://github.com/RubaXa/Sortable.git | ||
cd Sortable | ||
# git checkout dev # optional | ||
meteor\example\run.bat | ||
|
||
### Elsewhere | ||
|
||
git clone https://github.com/RubaXa/Sortable.git | ||
cd Sortable | ||
# git checkout dev # optional | ||
meteor/example/run.sh | ||
|
||
|
||
## [Prior art](http://slides.com/dandv/prior-art) | ||
|
||
### Differential | ||
|
||
Differential wrote [a blog post on reorderable lists with | ||
Meteor](http://differential.com/blog/sortable-lists-in-meteor-using-jquery-ui) and | ||
[jQuery UI Sortable](http://jqueryui.com/sortable/). It served as inspiration | ||
for integrating [rubaxa:sortable](rubaxa.github.io/Sortable/), | ||
which uses the HTML5 native drag&drop API (not without [its | ||
limitations](https://github.com/RubaXa/Sortable/issues/106)). | ||
The reordering method used by the Differential example can lead to data loss | ||
though, because it calculates the new order of a dropped element as the | ||
arithmetic mean of the elements before and after it. This [runs into limitations | ||
of floating point precision](http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible) | ||
in JavaScript after <50 reorderings. | ||
|
||
### Todos animated | ||
|
||
http://todos-dnd-animated.meteor.com/ ([source](https://github.com/nleush/meteor-todos-sortable-animation)) | ||
is based on old Meteor Blaze (back then Spark) API, and won't work with current versions. | ||
It does showcase some neat features, such as animation when collection elements | ||
are reordered by another client. It uses jQuery UI Sortable as well, which lacks | ||
some features vs. rubaxa:Sortable, e.g. text selection within the item. | ||
|
||
## TODO | ||
|
||
* Animation | ||
* Indication that an item is being edited |
Oops, something went wrong.