Meteor + JQuery-UI Sortable + Animation + Todos
Animation and drag and drop on the Meteor is so far more a dream than reality. Craftsmen find ways to implement such things, but research shows that this is a bypass of the basic meteor development patterns.
This post is about how I tried to screw animation and sorting to the famous todos example .
The developers of the meteor promise that they are working on the possibility of using JQuery-UI Sortable or its similarity. But I have not yet found how to touch it with my hands.
But with the animation until the light is not visible. Here is what Tom Coleman writes about it:
It so happened that I needed it for yesterday, so I tried to see what the implementation difficulties were.
In short, a couple of days of research and experimentation resulted in a github code: meteor-todos-sortable-animation . There I tried to describe in detail how to use it.
You can see the demo . Open two windows at the same time and watch the changes in the second while you drag the toddlers in the first. If someone already does this there, you can chat with him in a mini-chat.
In particular, it works there:
Development began for the buzzers. After completing in 10 minutes, I managed to fasten the same for the list of sheets. Actually, for the sake of a quick reuse this was done.
The main bug that I could not get rid of was the inability to re-render created through the
Many problems were with neat changes to the DOM elements. Both Meteor and Sortable work with the DOM very dynamically, I had to make friends with them.
One of the main know-how of the solution is the use of incremental DOM changes following successive signals of changes from
At the same time, to resolve conflicts with the DOM between Meteor and Sortable, taking into account animation delays, an event queue is created. The queue blocks changes and sequentially performs one change after another.
Thus, it simulates the same sequential changes that Meteor would do, but with delays for the animation.
First of all, it should be noted that it turned out to be a relatively quick way to fasten drag and drop and animation to lists.
I hope that this solution, although it is a hack, is nevertheless as close as possible to the meteor pattern. And this means that when Meteor is able to do the same, it will not be difficult to remake the finished code of a large application with hacks into a regular circuit without hacks.
During development, I came across very difficult to catch bugs. Perhaps not all were caught. Those who wish, please test. I would be glad if the solution is considered by more experienced developers who will tell you how to improve it.
This post is about how I tried to screw animation and sorting to the famous todos example .
Introduction
The developers of the meteor promise that they are working on the possibility of using JQuery-UI Sortable or its similarity. But I have not yet found how to touch it with my hands.
But with the animation until the light is not visible. Here is what Tom Coleman writes about it:
I think there is a big need for such a widget, done in a meteoric way. It's on my personal radar (but so are a lot of things, including a nice way to re-order with animation).
It so happened that I needed it for yesterday, so I tried to see what the implementation difficulties were.
What happened
In short, a couple of days of research and experimentation resulted in a github code: meteor-todos-sortable-animation . There I tried to describe in detail how to use it.
You can see the demo . Open two windows at the same time and watch the changes in the second while you drag the toddlers in the first. If someone already does this there, you can chat with him in a mini-chat.
In particular, it works there:
- Sorting todushki.
- Sort sheets.
- Sort animation on another client.
- Aniamation of deleting and adding elements.
Development began for the buzzers. After completing in 10 minutes, I managed to fasten the same for the list of sheets. Actually, for the sake of a quick reuse this was done.
Bugs
The main bug that I could not get rid of was the inability to re-render created through the
Meteor.rendertemplate. If the data has changed, the code deletes the old fragment and creates a new one. Because of this, preservefeatures do not work . Many problems were with neat changes to the DOM elements. Both Meteor and Sortable work with the DOM very dynamically, I had to make friends with them.
Tricks of the solution
One of the main know-how of the solution is the use of incremental DOM changes following successive signals of changes from
Meteor cursor observer. At the same time, to resolve conflicts with the DOM between Meteor and Sortable, taking into account animation delays, an event queue is created. The queue blocks changes and sequentially performs one change after another.
Thus, it simulates the same sequential changes that Meteor would do, but with delays for the animation.
Conclusion
First of all, it should be noted that it turned out to be a relatively quick way to fasten drag and drop and animation to lists.
I hope that this solution, although it is a hack, is nevertheless as close as possible to the meteor pattern. And this means that when Meteor is able to do the same, it will not be difficult to remake the finished code of a large application with hacks into a regular circuit without hacks.
During development, I came across very difficult to catch bugs. Perhaps not all were caught. Those who wish, please test. I would be glad if the solution is considered by more experienced developers who will tell you how to improve it.