Added post reordering animation.

chapter14-1
DiscoverMeteor · Oct 19, 2015 · f101ae4 · f101ae4 · DiogoAngelim · Aug 31, 2016
1 parent 0696e8a
commit f101ae4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/client/templates/posts/posts_list.html b/client/templates/posts/posts_list.html
@@ -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>

diff --git a/client/templates/posts/posts_list.js b/client/templates/posts/posts_list.js
@@ -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);
+    }
+  }
+});
diff --git a/lib/router.js b/lib/router.js
@@ -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();
+      }
     };
   }
 });