Skip to content

Commit 479f3b3

Browse files
RubaXaRubaXa
committed
+ [MOVED] rubaxa/sortable
0 parents  commit 479f3b3

27 files changed

+1091
-0
lines changed

‎.gitignore

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Logs
2+
logs
3+
*.log
4+
5+
# Runtime data
6+
pids
7+
*.pid
8+
*.seed
9+
10+
# Directory for instrumented libs generated by jscoverage/JSCover
11+
lib-cov
12+
13+
# Coverage directory used by tools like istanbul
14+
coverage
15+
16+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17+
.grunt
18+
19+
# node-waf configuration
20+
.lock-wscript
21+
22+
# Compiled binary addons (http://nodejs.org/api/addons.html)
23+
build/Release
24+
25+
# Dependency directory
26+
jam
27+
packages
28+
node_modules
29+
30+
# IDE
31+
.idea

‎.versions

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
base64@1.0.3
2+
binary-heap@1.0.3
3+
blaze@2.1.2
4+
blaze-tools@1.0.3
5+
callback-hook@1.0.3
6+
check@1.0.5
7+
dburles:mongo-collection-instances@0.3.4
8+
ddp@1.1.0
9+
deps@1.0.7
10+
ejson@1.0.6
11+
geojson-utils@1.0.3
12+
html-tools@1.0.4
13+
htmljs@1.0.4
14+
id-map@1.0.3
15+
jquery@1.11.3_2
16+
json@1.0.3
17+
lai:collection-extensions@0.1.4
18+
local-test:rubaxa:sortable@1.2.1
19+
logging@1.0.7
20+
meteor@1.1.6
21+
minifiers@1.1.5
22+
minimongo@1.0.8
23+
mongo@1.1.0
24+
observe-sequence@1.0.6
25+
ordered-dict@1.0.3
26+
random@1.0.3
27+
reactive-var@1.0.5
28+
retry@1.0.3
29+
rubaxa:sortable@1.2.1
30+
spacebars-compiler@1.0.6
31+
templating@1.1.1
32+
tinytest@1.0.5
33+
tracker@1.0.7
34+
underscore@1.0.3

‎README.md

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
Reactive reorderable lists with [Sortable](http://rubaxa.github.io/Sortable/),
2+
backed by [Meteor.js](http://meteor.com) collections:
3+
4+
* new elements arriving in the collection will update the list as you expect
5+
* elements removed from the collection will be removed from the list
6+
* drag and drop between lists updates collections accordingly
7+
8+
Demo: http://rubaxa-sortable.meteor.com
9+
10+
11+
# Issues
12+
13+
<s>If you encounter an issue while using this package, please CC @dandv when you file it in this repo.</s>
14+
<b>This project needs a maintainer.</b>
15+
16+
17+
# Meteor
18+
19+
If you're new to Meteor, here's what the excitement is all about -
20+
[watch the first two minutes](https://www.youtube.com/watch?v=fsi0aJ9yr2o); you'll be hooked by 1:28.
21+
That screencast is from 2012. In the meantime, Meteor has become a mature JavaScript-everywhere web
22+
development framework. Read more at [Why Meteor](http://wiki.dandascalescu.com/essays/why_meteor).
23+
24+
25+
# Usage
26+
27+
Simplest invocation - order will be lost when the page is refreshed:
28+
29+
```handlebars
30+
{{#sortable <collection|cursor|array>}}
31+
```
32+
33+
Persist the sort order in the 'order' field of each document in the collection:
34+
35+
*Client:*
36+
37+
```handlebars
38+
{{#sortable items=<collection|cursor|array> sortField="order"}}
39+
```
40+
41+
*Server:*
42+
43+
```js
44+
Sortable.collections = <collectionName>; // the name, not the variable
45+
```
46+
47+
Along with `items`, `sortField` is the only Meteor-specific option. If it's missing, the package will
48+
assume there is a field called "order" in the collection, holding unique `Number`s such that every
49+
`order` differs from that before and after it by at least 1. Basically, keep to 0, 1, 2, ... .
50+
Try not to depend on a particular format for this field; it *is* though guaranteed that a `sort` will
51+
produce lexicographical order, and that the order will be maintained after an arbitrary number of
52+
reorderings, unlike with [naive solutions](http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible).
53+
54+
Remember to declare on the server which collections you want to be reorderable from the client.
55+
Otherwise, the library will error because the client would be able to modify numerical fields in
56+
any collection, which represents a security risk.
57+
58+
59+
## Passing options to the Sortable library
60+
61+
{{#sortable items=<collection|cursor|array> option1=value1 option2=value2...}}
62+
{{#sortable items=<collection|cursor|array> options=myOptions}}
63+
64+
For available options, please refer to [the main README](../README.md#options). You can pass them directly
65+
or under the `options` object. Direct options (`key=value`) override those in `options`. It is best
66+
to pass presentation-related options directly, and functionality-related settings in an `options`
67+
object, as this will enable designers to work without needing to inspect the JavaScript code:
68+
69+
<template name="myTemplate">
70+
...
71+
{{#sortable items=Players handle=".sortable-handle" ghostClass="sortable-ghost" options=playerOptions}}
72+
</template>
73+
74+
Define the options in a helper for the template that calls Sortable:
75+
76+
```js
77+
Template.myTemplate.helpers({
78+
playerOptions: function () {
79+
return {
80+
group: {
81+
name: "league",
82+
pull: true,
83+
put: false
84+
},
85+
sort: false
86+
};
87+
}
88+
});
89+
```
90+
91+
#### Meteor-specific options
92+
93+
* `selector` - you can specify a collection selector if your list operates only on a subset of the collection. Example:
94+
95+
```js
96+
Template.myTemplate.helpers({
97+
playerOptions: function() {
98+
return {
99+
selector: { city: 'San Francisco' }
100+
}
101+
}
102+
});
103+
```
104+
105+
106+
## Events
107+
108+
All the original Sortable events are supported. In addition, they will receive
109+
the data context in `event.data`. You can access `event.data.order` this way:
110+
111+
```handlebars
112+
{{#sortable items=players options=playersOptions}}
113+
```
114+
115+
```js
116+
Template.myTemplate.helpers({
117+
playersOptions: function () {
118+
return {
119+
onSort: function(/**Event*/event) {
120+
console.log('Moved player #%d from %d to %d',
121+
event.data.order, event.oldIndex, event.newIndex
122+
);
123+
}
124+
};
125+
}
126+
});
127+
```
128+
129+
130+
# TODO
131+
132+
* Array support
133+
* Tests
134+
* Misc. - see reactivize.js
135+
* [GitHub issues](https://github.com/RubaXa/Sortable/labels/%E2%98%84%20meteor)

‎example/.meteor/.finished-upgraders

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# This file contains information which helps Meteor properly upgrade your
2+
# app when you run 'meteor update'. You should check it into version control
3+
# with your project.
4+
5+
notices-for-0.9.0
6+
notices-for-0.9.1
7+
0.9.4-platform-file
8+
notices-for-facebook-graph-api-2

‎example/.meteor/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
local

‎example/.meteor/.id

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# This file contains a token that is unique to your project.
2+
# Check it into your repository along with the rest of this directory.
3+
# It can be used for purposes such as:
4+
# - ensuring you don't accidentally deploy one app on top of another
5+
# - providing package authors with aggregated statistics
6+
7+
ir0jg2douy3yo5mehw

‎example/.meteor/platforms

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
browser
2+
server

‎example/.meteor/release

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
METEOR@1.1.0.3

‎example/.meteor/versions

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
autopublish@1.0.3
2+
autoupdate@1.2.1
3+
base64@1.0.3
4+
binary-heap@1.0.3
5+
blaze@2.1.2
6+
blaze-tools@1.0.3
7+
boilerplate-generator@1.0.3
8+
callback-hook@1.0.3
9+
check@1.0.5
10+
dburles:mongo-collection-instances@0.3.4
11+
ddp@1.1.0
12+
deps@1.0.7
13+
ejson@1.0.6
14+
fastclick@1.0.3
15+
fezvrasta:bootstrap-material-design@0.3.0
16+
geojson-utils@1.0.3
17+
html-tools@1.0.4
18+
htmljs@1.0.4
19+
http@1.1.0
20+
id-map@1.0.3
21+
insecure@1.0.3
22+
jquery@1.11.3_2
23+
json@1.0.3
24+
lai:collection-extensions@0.1.4
25+
launch-screen@1.0.2
26+
livedata@1.0.13
27+
logging@1.0.7
28+
meteor@1.1.6
29+
meteor-platform@1.2.2
30+
minifiers@1.1.5
31+
minimongo@1.0.8
32+
mobile-status-bar@1.0.3
33+
mongo@1.1.0
34+
observe-sequence@1.0.6
35+
ordered-dict@1.0.3
36+
random@1.0.3
37+
reactive-dict@1.1.0
38+
reactive-var@1.0.5
39+
reload@1.1.3
40+
retry@1.0.3
41+
routepolicy@1.0.5
42+
rubaxa:sortable@1.2.1
43+
session@1.1.0
44+
spacebars@1.0.6
45+
spacebars-compiler@1.0.6
46+
templating@1.1.1
47+
tracker@1.0.7
48+
twbs:bootstrap@3.3.5
49+
ui@1.0.6
50+
underscore@1.0.3
51+
url@1.0.4
52+
webapp@1.2.0
53+
webapp-hashing@1.0.3

‎example/README.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# RubaXa:Sortable Meteor demo
2+
3+
This demo showcases the two-way integration between the reorderable list
4+
widget [Sortable](https://github.com/RubaXa/Sortable/) and Meteor.js. Meteor
5+
Mongo collections are updated when items are added, removed or reordered, and
6+
the order is persisted.
7+
8+
It also shows list grouping and control over what lists can give or receive
9+
elements. You can only drag elements from the list to the left onto the list
10+
to the right.
11+
12+
13+
## Usage
14+
15+
The example uses the local package from the checkout, with the help of the run script:
16+
17+
### Windows
18+
19+
git clone https://github.com/RubaXa/Sortable.git
20+
cd Sortable
21+
# git checkout dev # optional
22+
meteor\example\run.bat
23+
24+
### Elsewhere
25+
26+
git clone https://github.com/RubaXa/Sortable.git
27+
cd Sortable
28+
# git checkout dev # optional
29+
meteor/example/run.sh
30+
31+
32+
## [Prior art](http://slides.com/dandv/prior-art)
33+
34+
### Differential
35+
36+
Differential wrote [a blog post on reorderable lists with
37+
Meteor](http://differential.com/blog/sortable-lists-in-meteor-using-jquery-ui) and
38+
[jQuery UI Sortable](http://jqueryui.com/sortable/). It served as inspiration
39+
for integrating [rubaxa:sortable](rubaxa.github.io/Sortable/),
40+
which uses the HTML5 native drag&drop API (not without [its
41+
limitations](https://github.com/RubaXa/Sortable/issues/106)).
42+
The reordering method used by the Differential example can lead to data loss
43+
though, because it calculates the new order of a dropped element as the
44+
arithmetic mean of the elements before and after it. This [runs into limitations
45+
of floating point precision](http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible)
46+
in JavaScript after <50 reorderings.
47+
48+
### Todos animated
49+
50+
http://todos-dnd-animated.meteor.com/ ([source](https://github.com/nleush/meteor-todos-sortable-animation))
51+
is based on old Meteor Blaze (back then Spark) API, and won't work with current versions.
52+
It does showcase some neat features, such as animation when collection elements
53+
are reordered by another client. It uses jQuery UI Sortable as well, which lacks
54+
some features vs. rubaxa:Sortable, e.g. text selection within the item.
55+
56+
## TODO
57+
58+
* Animation
59+
* Indication that an item is being edited

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy