From 9216b96c8581ed34154972e677525f20552f06f1 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@thesnail.org>
Date: Wed, 27 Nov 2013 14:34:16 +1100
Subject: [PATCH] Added post reordering animation.

chapter14-1
---
 client/templates/posts/posts_list.html |  8 ++++--
 client/templates/posts/posts_list.js   | 38 ++++++++++++++++++++++++++
 lib/router.js                          | 11 +++++---
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/client/templates/posts/posts_list.html b/client/templates/posts/posts_list.html
index 7b6b51f8..e5f1780c 100644
--- 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
index e69de29b..340afe48 100644
--- 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);
+    }
+  }
+});
\ No newline at end of file
diff --git a/lib/router.js b/lib/router.js
index 8e46c7ca..9513e11a 100644
--- 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();
+      }
     };
   }
 });