working on posts ranking animation

This commit is contained in:
Sacha Greif 2012-09-12 08:53:13 +09:00
parent 9c295ce677
commit fe3a349a8e
5 changed files with 37 additions and 80 deletions

View file

@ -430,11 +430,11 @@ body.pageslide-open {
/* For modern browsers */
/* For IE 6/7 (trigger hasLayout) */
*zoom: 1;
-webkit-transition: ease-out top 400ms;
-webkit-transition: ease-out top 2000ms;
-webkit-transition-delay: 0ms;
-moz-transition: ease-out top 400ms 0ms;
-o-transition: ease-out top 400ms 0ms;
transition: ease-out top 400ms 0ms; }
-moz-transition: ease-out top 2000ms 0ms;
-o-transition: ease-out top 2000ms 0ms;
transition: ease-out top 2000ms 0ms; }
/* line 3, ../sass/partials/_mixins.scss */
.posts .post:before, .posts .post:after {
content: "";
@ -442,66 +442,6 @@ body.pageslide-open {
/* line 7, ../sass/partials/_mixins.scss */
.posts .post:after {
clear: both; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(1) {
top: 0px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(2) {
top: 80px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(3) {
top: 160px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(4) {
top: 240px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(5) {
top: 320px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(6) {
top: 400px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(7) {
top: 480px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(8) {
top: 560px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(9) {
top: 640px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(10) {
top: 720px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(11) {
top: 800px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(12) {
top: 880px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(13) {
top: 960px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(14) {
top: 1040px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(15) {
top: 1120px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(16) {
top: 1200px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(17) {
top: 1280px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(18) {
top: 1360px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(19) {
top: 1440px; }
/* line 10, ../sass/modules/_posts.scss */
.posts .post:nth-child(20) {
top: 1520px; }
/* line 16, ../sass/modules/_posts.scss */
.post-content {

View file

@ -5,12 +5,12 @@
width:100%;
// margin-bottom:$grid-margin;
@include cf;
@include single-transition(ease-out, top, 400ms, 0ms);
@for $i from 0 through 19 {
&:nth-child(#{$i+1}){
top:#{$i*80px};
};
}
@include single-transition(ease-out, top, 2000ms, 0ms);
// @for $i from 0 through 19 {
// &:nth-child(#{$i+1}){
// top:#{$i*80px};
// };
// }
}
}
.post-content{

View file

@ -1,5 +1,5 @@
<template name="post_item">
<div class="post my-post">
<div class="post my-post" style="top:{{top_distance}}px;" id="{{_id}}">
<ul class="post-actions">
<li class="post-share desktop"><a href="#" class="share-link"><i class="icon-share"></i><span class="action">Share</span></a>
<div class="share-options hidden">

View file

@ -20,6 +20,12 @@ Template.post_item.events = {
};
Template.post_item.rendered = function(){
// var $this=$(this.find(".post"));
// var distance=(getRank(this.data)-1)*80
// $this.css("top", distance+"px");
// console.log(this.data);
// console.log(distance+"px");
if (Meteor.is_client) {
if($(window).width()>400){ //do not load social media plugin on mobile
// $('.share-replace').sharrre({
@ -41,9 +47,9 @@ Template.post_item.rendered = function(){
}
};
Template.post_item.rank = function(){
return 1;
};
Template.post_item.preserve({
'.post': function (node) { return node.id; }
});
Template.post_item.ago = function(){
var submitted = new Date(this.submitted);
@ -58,12 +64,20 @@ Template.post_item.voted = function(){
return _.include(this.voters, user._id);
};
Template.post_item.rank = function() {
var getRank = function(post){
var filter = {$or: [
{score: {$gt: this.score}},
{$and: [{score: this.score}, {submitted: {$lt: this.submitted}}]}
{score: {$gt: post.score}},
{$and: [{score: post.score}, {submitted: {$lt: post.submitted}}]}
]};
return Posts.find(filter).count();
return Posts.find(filter).count()+1;
}
Template.post_item.rank = function() {
return getRank(this);
}
Template.post_item.top_distance = function(){
return (getRank(this)-1) * 80;
}
Template.post_item.domain = function(){

View file

@ -7,12 +7,15 @@ var Scoring = {
// just count the number of votes for now
var baseScore = object.votes;
// now multiply by 'age' exponentiated
// FIXME: timezones <-- set by server or is getTime() ok?
var ageInHours = (new Date().getTime() - object.submitted) / (60 * 60 * 1000);
object.score = baseScore * Math.pow(ageInHours + 2, -0.1375);
// object.score = baseScore * Math.pow(ageInHours + 2, -0.1375);
// debug: just add 1 to the score for each new vote
object.score = object.score+1;
},
// rerun all the scoring