playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge pull request #180 from RubaXa/meteor-integration 

Improve Meteor demo
pull/182/head
Lebedev Konstantin 10 years ago
parent
2636c8ea7a 281f5fc7f8
commit
22e971d62f
5 changed files with 135 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      meteor/example/README.md
  2. 52
      meteor/example/client/define-object-type.html
  3. 32
      meteor/example/client/define-object-type.js
  4. 1
      meteor/example/package.json
  5. 4
      meteor/example/run.sh

60
meteor/example/README.md
Unescape View File

@ -0,0 +1,60 @@
# 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, so it needs to wire
up some files (`package.js` and `package.json`). This is done by the handy
run script:
### Windows
git clone git@github.com:RubaXa/Sortable.git
cd Sortable
git checkout dev
cd meteor\example
run.bat
### Elsewhere
git clone git@github.com:RubaXa/Sortable.git
cd Sortable
git checkout dev
meteor/example./run.sh
## Prior art
### Differential
Differential wrote [a blog post on reorderable lists with
Meteor](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

52
meteor/example/client/define-object-type.html
Unescape View File

@ -1,11 +1,15 @@
<head> <head>
<title>RubaXa:Sortable Demo</title> <title>Reactive RubaXa:Sortable for Meteor</title>
</head> </head>
<body> <body>
{{> navbar}}
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
<h1>Custom attributes</h1> <h1>RubaXa:Sortable - reactive reorderable lists for Meteor</h1>
<h2>Drag attribute types from the left to define an object type on the right</h2>
<h3>Drag the <i class="sortable-handle mdi-action-view-headline"></i> handle to reorder elements</h3>
</div> </div>
{{> typeDefinition}} {{> typeDefinition}}
@ -26,7 +30,7 @@
</div> </div>
<div class="sortable target" id="object"> <div class="sortable target" id="object">
{{#sortable items=attributes animation="0" handle=".sortable-handle" ghostClass="sortable-ghost" options=attributesOptions}} {{#sortable items=attributes animation="100" handle=".sortable-handle" ghostClass="sortable-ghost" options=attributesOptions}}
{{> sortableItemTarget}} {{> sortableItemTarget}}
{{/sortable}} {{/sortable}}
</div> </div>
@ -34,7 +38,6 @@
</div> </div>
</div> </div>
</template> </template>
<template name="sortableItemTarget"> <template name="sortableItemTarget">
@ -48,3 +51,44 @@
</button> </button>
</div> </div>
</template> </template>
<template name="navbar">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://atmospherejs.com/rubaxa/sortable">RubaXa:Sortable</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://rubaxa-sortable.meteor.com">Meteor Demo</a></li>
<li><a href="https://rubaxa.github.io/Sortable/" target="_blank">Sortable standalone demo</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Source <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">GitHub</li>
<li><a href="https://github.com/RubaXa/Sortable/tree/dev/meteor/example" target="_blank">This demo</a></li>
<li><a href="https://github.com/RubaXa/Sortable/tree/dev/meteor" target="_blank">Meteor integration</a></li>
<li><a href="https://github.com/RubaXa/Sortable" target="_blank">rubaxa/sortable</a></li>
<li class="divider"></li>
<li><a href="https://atmospherejs.com/rubaxa/sortable">Star this package on Atmosphere!</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.meteorpedia.com/read/Packaging_existing_Libraries">Packaging 3rd party libraries for Meteor</a></li>
<li><a href="https://twitter.com/dandv">Author: @dandv</a></li>
</ul>
</li>
</ul>
</div>
</div>
</template>

32
meteor/example/client/define-object-type.js
Unescape View File

@ -32,12 +32,12 @@ Template.typeDefinition.helpers({
delete event.data._id; // Generate a new id when inserting in the Attributes collection. Otherwise, if we add the same type twice, we'll get an error that the ids are not unique. delete event.data._id; // Generate a new id when inserting in the Attributes collection. Otherwise, if we add the same type twice, we'll get an error that the ids are not unique.
delete event.data.icon; delete event.data.icon;
event.data.type = event.data.name; event.data.type = event.data.name;
event.data.name = 'Rename me' event.data.name = 'Rename me (double click)'
}, },
// event handler for reordering attributes // event handler for reordering attributes
onSort: function (event) { onSort: function (event) {
console.log('Moved object %d from %d to %d', console.log('Item %s went from #%d to #%d',
event.data.order, event.oldIndex, event.newIndex event.data.name, event.oldIndex, event.newIndex
); );
} }
} }
@ -59,17 +59,23 @@ Template.sortableItemTarget.events({
input.focus(); input.focus();
}, },
'blur input[type=text]': function (event, template) { 'blur input[type=text]': function (event, template) {
// commit the change to the name // commit the change to the name, if any
var input = template.$('input'); var input = template.$('input');
input.hide(); input.hide();
template.$('.name').show(); template.$('.name').show();
// TODO - what is the collection here? We'll hard-code for now. // TODO - what is the collection here? We'll hard-code for now.
// https://github.com/meteor/meteor/issues/3303 // https://github.com/meteor/meteor/issues/3303
Attributes.update(this._id, {$set: {name: input.val()}}); if (this.name !== input.val() && this.name !== '')
Attributes.update(this._id, {$set: {name: input.val()}});
}, },
'keydown input[type=text]': function(event) { 'keydown input[type=text]': function (event, template) {
// ESC or ENTER if (event.which === 27) {
if (event.which === 27 || event.which === 13) { // ESC - discard edits and keep existing value
template.$('input').val(this.name);
event.preventDefault();
event.target.blur();
} else if (event.which === 13) {
// ENTER
event.preventDefault(); event.preventDefault();
event.target.blur(); event.target.blur();
} }
@ -81,5 +87,15 @@ Template.sortable.events({
'click .close': function (event, template) { 'click .close': function (event, template) {
// `this` is the data context set by the enclosing block helper (#each, here) // `this` is the data context set by the enclosing block helper (#each, here)
template.collection.remove(this._id); template.collection.remove(this._id);
// custom code, working on a specific collection
if (Attributes.find().count() === 0) {
Meteor.setTimeout(function () {
Attributes.insert({
name: 'Not nice to delete the entire list! Add some attributes instead.',
type: 'String',
order: 0
})
}, 1000);
}
} }
}); });

1
meteor/example/package.json
Unescape View File

@ -0,0 +1 @@
../../package.json

4
meteor/example/run.sh
Unescape View File

@ -7,8 +7,8 @@ int_trap() {
} }
trap int_trap INT trap int_trap INT
ln -s "meteor/package.js" ../../package.js ln -s "meteor/package.js" ../../package.js 2>/dev/null
ln -s "../../package.json" package.json ln -s "../../package.json" package.json 2>/dev/null
meteor run "$@" meteor run "$@"

Write Preview
Loading…
Cancel
Save