Skip to content
Permalink
Browse files

Added post reordering animation.

chapter14-1
  • Loading branch information
tmeasday committed Oct 19, 2015
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);
}
}
});
@@ -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.

Copy link

@digelim digelim commented on f101ae4 Aug 31, 2016

pathFor couldn't find a route named "postsList"

Please sign in to comment.
You can’t perform that action at this time.