Permalink
Browse files

Added post reordering animation.

chapter14-1
  • Loading branch information...
tmeasday committed Nov 27, 2013
1 parent 0696e8a commit f101ae42154b9bf920f7b9df97c5ae52bfce5fb8
Showing with 50 additions and 7 deletions.
  1. +5 −3 client/templates/posts/posts_list.html
  2. +38 −0 client/templates/posts/posts_list.js
  3. +7 −4 lib/router.js
@@ -1,8 +1,10 @@
<template name="postsList">
<div class="posts page">
- {{#each posts}}
- {{> postItem}}
- {{/each}}
+ <div class="wrapper">
+ {{#each posts}}
+ {{> postItem}}
+ {{/each}}
+ </div>
{{#if nextPath}}
<a class="load-more" href="{{nextPath}}">Load more</a>
@@ -0,0 +1,38 @@
+Template.postsList.onRendered(function () {
+ this.find('.wrapper')._uihooks = {
+ moveElement: function (node, next) {
+ var $node = $(node), $next = $(next);
+ var oldTop = $node.offset().top;
+ var height = $(node).outerHeight(true);
+
+ // find all the elements between next and node
+ var $inBetween = $(next).nextUntil(node);
+ if ($inBetween.length === 0)
+ $inBetween = $(node).nextUntil(next);
+
+ // now put node in place
+ $(node).insertBefore(next);
+
+ // measure new top
+ var newTop = $(node).offset().top;
+
+ // move node *back* to where it was before
+ $(node)
+ .removeClass('animate')
+ .css('top', oldTop - newTop);
+
+ // push every other element down (or up) to put them back
+ $inBetween
+ .removeClass('animate')
+ .css('top', oldTop < newTop ? height : -1 * height)
+
+
+ // force a redraw
+ $(node).offset();
+
+ // reset everything to 0, animated
+ $(node).addClass('animate').css('top', 0);
+ $inBetween.addClass('animate').css('top', 0);
+ }
+ }
+});
View
@@ -23,11 +23,14 @@ PostsListController = RouteController.extend({
return Posts.find({}, this.findOptions());
},
data: function() {
- var hasMore = this.posts().count() === this.postsLimit();
+ var self = this;
return {
- posts: this.posts(),
- ready: this.postsSub.ready,
- nextPath: hasMore ? this.nextPath() : null
+ posts: self.posts(),
+ ready: self.postsSub.ready,
+ nextPath: function() {
+ if (self.posts().count() === self.postsLimit())
+ return self.nextPath();
+ }
};
}
});

1 comment on commit f101ae4

@digelim

This comment has been minimized.

Show comment
Hide comment
@digelim

digelim Aug 31, 2016

pathFor couldn't find a route named "postsList"

pathFor couldn't find a route named "postsList"

Please sign in to comment.