working on pagination

This commit is contained in:
Sacha Greif 2012-10-09 12:02:37 +09:00
parent b3d0cca6cb
commit 4801a8c45b
15 changed files with 185 additions and 60 deletions

View file

@ -1,22 +1,43 @@
sessionSetObject=function(name, value){
Session.set(name, JSON.stringify(value));
}
sessionGetObject=function(name){
return JSON.parse(Session.get(name));
}
Errors = new Meteor.Collection(null);
Meteor.subscribe('users');
Posts = new Meteor.Collection('posts');
Session.set('page_size', 8);
Session.set('current_page', 1);
Session.set('sort_order', JSON.stringify({score: -1}));
// Meteor.subscribe('posts');
// Session.set('page_size', 8);
// Session.set('current_page', 1);
// Session.set('sort_order', JSON.stringify({score: -1}));
var postsView={
find: {},
sort: {submitted: -1},
skip:0,
postsPerPage:10,
limit:10
}
sessionSetObject('postsView', postsView);
Meteor.autosubscribe(function() {
Meteor.subscribe('posts', Session.get('page_size'), Session.get('current_page'), Session.get('sort_order'), function() {
var newPostsCount = Posts.find().count();
if (Session.equals('posts_count', newPostsCount)) {
// We didn't fetch any new post, so hide the "View more" button:
$('button.more').hide();
}
else {
Session.set('posts_count', newPostsCount);
$('button.more').show();
}
var view=sessionGetObject('postsView');
console.log(view);
Meteor.subscribe('posts', view.find, view.sort, view.skip, view.limit, function() {
console.log('found '+Posts.find().count()+' posts');
// var newPostsCount = Posts.find().count();
// if (Session.equals('posts_count', newPostsCount)) {
// // We didn't fetch any new post, so hide the "View more" button:
// $('button.more').hide();
// }
// else {
// Session.set('posts_count', newPostsCount);
// $('button.more').show();
// }
});
});

View file

@ -85,7 +85,11 @@ SimpleRouter = FilteredRouter.extend({
routes: {
'': 'top',
'top':'top',
'top/:page':'top',
'new':'new',
'new/:page':'new',
'digest':'digest',
'digest/:page':'digest',
'test':'test',
'signin':'signin',
'signup':'signup',
@ -107,22 +111,27 @@ SimpleRouter = FilteredRouter.extend({
'users/:id': 'user_profile',
'users/:id/edit':'user_edit'
},
top: function() {
top: function(page) {
if (canView(Meteor.user(), 'replace')) {
Session.set('current_page', 1);
Session.set('sort_order', JSON.stringify({score: -1}));
Session.set('posts_count', null);
var page = (typeof page === 'undefined') ? 1 : page;
Session.set('currentPageNumber', page);
this.goto('posts_top');
}
},
new: function() {
new: function(page) {
if (canView(Meteor.user(), 'replace')) {
Session.set('current_page', 1);
Session.set('sort_order', JSON.stringify({submitted: -1}));
Session.set('posts_count', null);
var page = (typeof page === 'undefined') ? 1 : page;
Session.set('currentPageNumber', page);
this.goto('posts_new');
}
},
digest: function(page){
if (canView(Meteor.user(), 'replace')) {
var page = (typeof page === 'undefined') ? 1 : page;
Session.set('currentPageNumber', page);
this.goto('posts_digest');
}
},
signup: function() { this.goto('signup'); },
signin: function() { this.goto('signin'); },
invite: function() { this.goto('no_invite'); },

View file

@ -18,6 +18,7 @@
{{#if canView}}
<li><a class="top" href="/top">Top</a></li>
<li><a class="new" href="/new">New</a></li>
<li><a class="digest" href="/digest">Digest</a></li>
{{/if}}
{{#if intercom}}
<li><a id="Intercom" class="intercom" href="#">Support</a></li>

View file

@ -44,7 +44,7 @@
| <a href="/posts/{{_id}}/edit" class="edit-link goto-edit">Edit</a>
{{/if}}
{{#if currentUser.isAdmin}}
| votes: {{votes}}, baseScore: {{baseScore}}, score: {{short_score}}
| votes: {{votes}}, baseScore: {{baseScore}}, score: {{short_score}}, time: {{timestamp}}
{{/if}}
</p>
</div>

View file

@ -51,6 +51,9 @@ Template.post_item.helpers({
ago: function(){
return moment(this.submitted).fromNow();
},
timestamp: function(){
return moment(this.submitted).format("dddd, MMMM Do YYYY, h:mm:ss a");
},
voted: function(){
var user = Meteor.user();
if(!user) return false;

View file

@ -0,0 +1,9 @@
<template name="posts_digest">
<a href="#" class="prev-link" data-increment="-1">Previous Day</a>
<a href="#" class="next-link" data-increment="1">Next Day</a>
<div class="posts grid list">
{{#each posts}}
{{> post_item}}
{{/each}}
</div>
</template>

View file

@ -0,0 +1,52 @@
getDateRange= function(pageNumber){
var now = moment(new Date());
var dayToDisplay=now.subtract('days', pageNumber-1);
var range={};
range.start = dayToDisplay.startOf('day').valueOf();
range.end = dayToDisplay.endOf('day').valueOf();
console.log("after: ", dayToDisplay.startOf('day').format("dddd, MMMM Do YYYY, h:mm:ss a"));
console.log("before: ", dayToDisplay.endOf('day').format("dddd, MMMM Do YYYY, h:mm:ss a"));
return range;
}
Template.posts_digest.posts = function(){
return Posts.find();
};
Template.posts_digest.created = function(){
var postsPerPage=5;
var pageNumber=Session.get('currentPageNumber') || 1;
var range=getDateRange(pageNumber);
var postsView={
find: {submitted: {$gte: range.start, $lt: range.end}},
sort: {submitted: -1},
skip:0,
postsPerPage: postsPerPage,
limit: postsPerPage,
page: pageNumber
}
sessionSetObject('postsView', postsView);
}
Template.posts_digest.events({
'click .prev-link': function(e) {
e.preventDefault();
var postsView=sessionGetObject('postsView');
postsView.page++;
var range=getDateRange(postsView.page);
postsView.find={submitted: {$gte: range.start, $lt: range.end}}
console.log(postsView.page);
sessionSetObject('postsView', postsView);
},
'click .next-link': function(e) {
e.preventDefault();
var postsView=sessionGetObject('postsView');
if(postsView.page>1){
postsView.page--;
var range=getDateRange(postsView.page);
postsView.find={submitted: {$gte: range.start, $lt: range.end}}
console.log(postsView.page);
sessionSetObject('postsView', postsView);
}
}
});

View file

@ -1,13 +1,15 @@
<template name="posts_new">
{{#if canView replace}}
<a href="#" class="prev-link">Previous Page</a>
<a href="#" class="next-link">Next Page</a>
<div class="posts grid list">
{{#each posts}}
{{> post_item}}
{{/each}}
</div>
<div class="grid" style="position:absolute;bottom:50px;">
<!-- <div class="grid" style="position:absolute;bottom:50px;">
<button class="more">View more</button>
</div>
</div> -->
{{/if}}
</template>

View file

@ -1,14 +1,44 @@
Template.posts_new.posts = function(){
var posts = Posts.find();
return posts;
return Posts.find();
};
Template.posts_new.created = function(){
window.sortBy="time";
var postsPerPage=5;
var pageNumber=Session.get('currentPageNumber') || 1;
var postsView={
find: {},
sort: {submitted: -1},
postsPerPage: postsPerPage,
limit: postsPerPage,
page: pageNumber,
skip:0
}
sessionSetObject('postsView', postsView);
}
Template.posts_new.events({
'click button.more': function() {
Session.set('current_page', Session.get("current_page") + 1);
}
'click button.more': function() {
var postsView=sessionGetObject('postsView');
postsView.postsPerPage+=postsView.postsPerPage;
postsView.pageNumber++;
sessionSetObject('postsView', postsView);
},
'click .next-link': function(e) {
e.preventDefault();
var postsView=sessionGetObject('postsView');
postsView.page++;
postsView.skip=(postsView.page-1)*postsView.postsPerPage
console.log("now showing page: "+postsView.page);
sessionSetObject('postsView', postsView);
},
'click .prev-link': function(e) {
e.preventDefault();
var postsView=sessionGetObject('postsView');
if(postsView.page>1){
postsView.page--;
postsView.skip=(postsView.page-1)*postsView.postsPerPage
console.log("now showing page: "+postsView.page);
sessionSetObject('postsView', postsView);
}
}
});

View file

@ -1,7 +0,0 @@
<template name="posts_today">
<div class="posts grid list">
{{#each posts}}
{{> post_item}}
{{/each}}
</div>
</template>

View file

@ -1,6 +0,0 @@
Template.posts_today.posts = function(){
};
Template.posts_today.created = function(){
}

View file

@ -5,7 +5,7 @@
{{/each}}
</div>
<div class="grid" style="position:absolute;bottom:50px;">
<div class="grid" style="position:fixed;bottom:50px;">
<button class="more">View more</button>
</div>
</template>

View file

@ -1,15 +1,26 @@
Template.posts_top.posts = function(){
var posts = Posts.find();
return posts;
return Posts.find();
};
Template.posts_top.created = function(){
window.sortBy="score";
var postsPerPage=5;
var pageNumber=Session.get('currentPageNumber') || 1;
var postsView={
find: {},
sort: {score: -1},
limit: postsPerPage,
postsPerPage: postsPerPage,
page: pageNumber
}
sessionSetObject('postsView', postsView);
}
Template.posts_top.events({
'click button.more': function() {
Session.set('current_page', Session.get("current_page") + 1);
}
'click button.more': function() {
var postsView=sessionGetObject('postsView');
postsView.limit+=postsView.postsPerPage;
postsView.pageNumber++;
sessionSetObject('postsView', postsView);
}
});

View file

@ -20,12 +20,6 @@ trackEvent = function(event, properties){
mixpanel.track(event, properties);
}
}
sessionSetObject=function(name, value){
Session.set(name, JSON.stringify(value));
}
sessionGetObject=function(name){
return JSON.parse(Session.get(name));
}
getAuthorName = function(item){
// keep both variables for transition period
var id=item.userId || item.user_id;

View file

@ -46,11 +46,17 @@ Meteor.startup(function(){
// Posts
Posts = new Meteor.Collection('posts');
// Meteor.publish('posts', function() {
// return Posts.find({}, {sort: {score: -1}});
// });
Meteor.publish('posts', function(page_size, current_page, sort) {
// Workaround till Session can store objects again:
var sort = JSON.parse(sort);
return Posts.find({}, {skip: 0, limit: page_size * current_page, sort: sort});
Meteor.publish('posts', function(find, sort, skip, limit) {
console.log("publishing…");
console.log(find, sort, skip, limit);
var collection=Posts.find(find, {sort: sort, skip: skip, limit: limit});
console.log('found '+collection.count()+' posts');
console.log('\n\n\n');
return collection;
});
// FIXME -- check all docs, not just the first one.