hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-06 18:11:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

still working on rank animation

Browse source
This commit is contained in:
Sacha Greif 2013-10-28 16:04:55 +09:00
parent 91066818a4
commit 2fbb506096
5 changed files with 23 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/helpers/handlebars.js
View file

@ -1,6 +1,9 @@
// ** Handlebars helpers ** // ** Handlebars helpers **
Handlebars.registerHelper('each_with_index', function(items, options) { Handlebars.registerHelper('eachWithRank', function(items, options) {
console.log('======= eachWithRank ========')
// note: cannot use this because it would delete and recreate all nodes
items.rewind()
var out = ''; var out = '';
items.forEach(function(item, i){ items.forEach(function(item, i){
var key = 'Branch-' + i; var key = 'Branch-' + i;
@ -8,10 +11,9 @@ Handlebars.registerHelper('each_with_index', function(items, options) {
return options.fn(_.extend(item, {rank: i})); return options.fn(_.extend(item, {rank: i}));
}); });
}); });
console.log('each_with_index:')
console.log(out)
return out; return out;
}); });
Handlebars.registerHelper('getSetting', function(setting, defaultArgument){ Handlebars.registerHelper('getSetting', function(setting, defaultArgument){
return getSetting(setting, defaultArgument); return getSetting(setting, defaultArgument);
}); });

5
client/helpers/router.js
View file

@ -256,15 +256,14 @@ PostsListController = RouteController.extend({
Session.set('postsLimit', limit); Session.set('postsLimit', limit);
// get posts and decorate them with rank property // get posts and decorate them with rank property
// note: using handlebars helper instead
// posts = posts.map(function (post, index) { // posts = posts.map(function (post, index) {
// post.rank = index; // post.rank = index;
// return post; // return post;
// }); // });
console.log('postsWithRank:')
console.log(posts)
return { return {
posts: posts postsList: posts
} }
}, },
after: function() { after: function() {

10
client/views/posts/post_item.js
View file

@ -78,7 +78,6 @@ Template.post_item.helpers({
Template.post_item.rendered = function(){ Template.post_item.rendered = function(){
// animate post from previous position to new position // animate post from previous position to new position
console.log(this)
var instance = this; var instance = this;
var $instance = $(instance.firstNode.nextSibling); var $instance = $(instance.firstNode.nextSibling);
var rank = instance.data.rank; // use jQuery instead of decorating the data object var rank = instance.data.rank; // use jQuery instead of decorating the data object
@ -87,15 +86,16 @@ Template.post_item.rendered = function(){
var previousPosition = 0; var previousPosition = 0;
var newPosition = $instance.position().top; var newPosition = $instance.position().top;
console.log('-----------------------') // console.log('-----------------------')
console.log('headline: '+this.data.headline) // console.log('headline: '+this.data.headline)
console.log('new rank: '+(rank+1)) // console.log('new rank: '+(rank+1))
console.log('newPosition: '+newPosition) // console.log('newPosition: '+newPosition)
// if element has a currentPosition (i.e. it's not the first ever render) // if element has a currentPosition (i.e. it's not the first ever render)
if(previousPosition = instance.currentPosition){ if(previousPosition = instance.currentPosition){
// calculate difference between old position and new position and send element here // calculate difference between old position and new position and send element here
var delta = previousPosition - newPosition; var delta = previousPosition - newPosition;
// console.log('deta: '+delta)
$instance.css("top", delta + "px"); $instance.css("top", delta + "px");
} }

4
client/views/posts/posts_list.html
View file

@ -1,8 +1,8 @@
<template name="posts_list"> <template name="posts_list">
<div class="posts grid list"> <div class="posts grid list">
{{#each_with_index posts}} {{#each posts}}
{{> post_item}} {{> post_item}}
{{/each_with_index}} {{/each}}
</div> </div>
<div class="grid more-button {{#if allPostsLoaded}} hidden {{/if}}"> <div class="grid more-button {{#if allPostsLoaded}} hidden {{/if}}">
<a class="more-link" href="{{loadMoreUrl}}">Load more</a> <a class="more-link" href="{{loadMoreUrl}}">Load more</a>

17
client/views/posts/posts_list.js
View file

@ -1,12 +1,13 @@
Template.posts_list.helpers({ Template.posts_list.helpers({
// posts : function () { posts : function () {
// this.postsList.rewind();
// var posts = this.postsList.map(function (post, index, cursor) { // var posts = this.postsList.map(function (post, index, cursor) {
// post._rank = index + 1; // post.rank = index;
// return post; // return post;
// }); // });
// return this.postsList; // return posts;
// }, return this.postsList;
},
allPostsLoaded: function(){ allPostsLoaded: function(){
return false; return false;
// TODO: find out when all posts have been loaded // TODO: find out when all posts have been loaded