From 72bd4c479ace8c8f3befd311e54a3f784e65b43c Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski Date: Mon, 20 Oct 2014 20:30:13 +0200 Subject: [PATCH] Added current page info to endless scroll --- TODO | 1 - public_html/css/user-list.css | 2 +- public_html/js/Pager.js | 5 +++++ .../js/Presenters/GlobalCommentListPresenter.js | 13 ++++--------- public_html/js/Presenters/PagerPresenter.js | 17 ++++++++++++++--- .../js/Presenters/PostCommentListPresenter.js | 11 ++++------- public_html/js/Presenters/PostListPresenter.js | 13 ++++--------- public_html/js/Presenters/TagListPresenter.js | 13 ++++--------- public_html/js/Presenters/UserListPresenter.js | 13 ++++--------- public_html/templates/pager.tpl | 1 - 10 files changed, 40 insertions(+), 49 deletions(-) diff --git a/TODO b/TODO index 8731cc31..8ca8673b 100644 --- a/TODO +++ b/TODO @@ -10,7 +10,6 @@ first major release. - tags: add tag merging - tags: add tag descriptions - tags: add tag edit snapshots (backed-only) -- misc: endless pager should include information about page number - misc: add spinner to forms such as registration, login, settings... - post notes diff --git a/public_html/css/user-list.css b/public_html/css/user-list.css index 29cf0648..5e91471e 100644 --- a/public_html/css/user-list.css +++ b/public_html/css/user-list.css @@ -24,7 +24,7 @@ #user-list .users { display: inline-block; - margin: 1em auto; + margin: 0 auto; } #user-list .users li { text-align: left; diff --git a/public_html/js/Pager.js b/public_html/js/Pager.js index bdc6ef9d..1f0c522d 100644 --- a/public_html/js/Pager.js +++ b/public_html/js/Pager.js @@ -26,6 +26,10 @@ App.Pager = function( return pageNumber; } + function getTotalPages() { + return totalPages; + } + function prevPage() { if (pageNumber > 1) { setPage(pageNumber - 1); @@ -118,6 +122,7 @@ App.Pager = function( return { init: init, getPage: getPage, + getTotalPages: getTotalPages, prevPage: prevPage, nextPage: nextPage, setPage: setPage, diff --git a/public_html/js/Presenters/GlobalCommentListPresenter.js b/public_html/js/Presenters/GlobalCommentListPresenter.js index 15bca4f6..b4ca6d3b 100644 --- a/public_html/js/Presenters/GlobalCommentListPresenter.js +++ b/public_html/js/Presenters/GlobalCommentListPresenter.js @@ -32,8 +32,8 @@ App.Presenters.GlobalCommentListPresenter = function( baseUri: '#/comments', backendUri: '/comments', $target: $el.find('.pagination-target'), - updateCallback: function(data, clear) { - renderPosts(data.entities, clear); + updateCallback: function($page, data) { + renderPosts($page, data.entities); }, }, function() { @@ -59,13 +59,8 @@ App.Presenters.GlobalCommentListPresenter = function( $el.html(templates.list()); } - function renderPosts(data, clear) { - var $target = $el.find('.posts'); - - if (clear) { - $target.empty(); - } - + function renderPosts($page, data) { + var $target = $page.find('.posts'); _.each(data, function(data) { var post = data.post; var comments = data.comments; diff --git a/public_html/js/Presenters/PagerPresenter.js b/public_html/js/Presenters/PagerPresenter.js index 58d1fe26..91730f37 100644 --- a/public_html/js/Presenters/PagerPresenter.js +++ b/public_html/js/Presenters/PagerPresenter.js @@ -91,7 +91,18 @@ App.Presenters.PagerPresenter = function( promise.wait(pager.retrieve()) .then(function(response) { progress.done(); - updateCallback(response, forceClear || !endlessScroll); + + if (forceClear || !endlessScroll) { + clearContent(); + } + var $page = jQuery('
'); + if (endlessScroll && pager.getTotalPages() > 1) { + $page.append('

Page ' + pager.getPage() + ' of ' + pager.getTotalPages() + '

'); + } + $page.append(targetContent); + $target.find('.pagination-content').append($page); + updateCallback($page, response); + forceClear = false; if (!response.entities.length) { messagePresenter.showInfo($messages, 'No data to show'); @@ -122,7 +133,7 @@ App.Presenters.PagerPresenter = function( function clearContent() { detachNextPageLoader(); - updateCallback({entities: [], totalRecords: 0}, true); + $target.find('.pagination-content').empty(); } function attachNextPageLoader() { @@ -183,7 +194,7 @@ App.Presenters.PagerPresenter = function( } function render() { - $target.html(templates.pager({originalHtml: targetContent})); + $target.html(templates.pager()); $messages = $target.find('.pagination-content'); $pageList = $target.find('.page-list'); if (endlessScroll) { diff --git a/public_html/js/Presenters/PostCommentListPresenter.js b/public_html/js/Presenters/PostCommentListPresenter.js index f4fe4a41..c432f085 100644 --- a/public_html/js/Presenters/PostCommentListPresenter.js +++ b/public_html/js/Presenters/PostCommentListPresenter.js @@ -78,10 +78,10 @@ App.Presenters.PostCommentListPresenter = function( privileges))); $el.find('.comment-add form button[type=submit]').click(function(e) { commentFormSubmitted(e, null); }); - renderComments(comments, true); + renderComments(comments); } - function renderComments(comments, clear) { + function renderComments(comments) { var $target = $el.find('.comments'); var $targetList = $el.find('ul'); @@ -91,10 +91,7 @@ App.Presenters.PostCommentListPresenter = function( $target.hide(); } - if (clear) { - $targetList.empty(); - } - + $targetList.empty(); _.each(comments, function(comment) { renderComment($targetList, comment); }); @@ -206,7 +203,7 @@ App.Presenters.PostCommentListPresenter = function( promise.wait(api.delete('/comments/' + comment.id)) .then(function(response) { comments = _.filter(comments, function(c) { return c.id !== comment.id; }); - renderComments(comments, true); + renderComments(comments); }).fail(showGenericError); } diff --git a/public_html/js/Presenters/PostListPresenter.js b/public_html/js/Presenters/PostListPresenter.js index c2e503c0..30ed7cdf 100644 --- a/public_html/js/Presenters/PostListPresenter.js +++ b/public_html/js/Presenters/PostListPresenter.js @@ -43,8 +43,8 @@ App.Presenters.PostListPresenter = function( baseUri: '#/posts', backendUri: '/posts', $target: $el.find('.pagination-target'), - updateCallback: function(data, clear) { - renderPosts(data.entities, clear); + updateCallback: function($page, data) { + renderPosts($page, data.entities); }, }, function() { @@ -102,13 +102,8 @@ App.Presenters.PostListPresenter = function( _.map($el.find('.posts .post-small'), function(postNode) { softRenderPost(jQuery(postNode).parents('li')); }); } - function renderPosts(posts, clear) { - var $target = $el.find('.posts'); - - if (clear) { - $target.empty(); - } - + function renderPosts($page, posts) { + var $target = $page.find('.posts'); _.each(posts, function(post) { var $post = renderPost(post); softRenderPost($post); diff --git a/public_html/js/Presenters/TagListPresenter.js b/public_html/js/Presenters/TagListPresenter.js index 3aed72e9..1f881669 100644 --- a/public_html/js/Presenters/TagListPresenter.js +++ b/public_html/js/Presenters/TagListPresenter.js @@ -38,8 +38,8 @@ App.Presenters.TagListPresenter = function( baseUri: '#/tags', backendUri: '/tags', $target: $el.find('.pagination-target'), - updateCallback: function(data, clear) { - renderTags(data.entities, clear); + updateCallback: function($page, data) { + renderTags($page, data.entities); }, }, function() { @@ -111,13 +111,8 @@ App.Presenters.TagListPresenter = function( $el.find('.order [href*="' + activeOrder + '"]').addClass('active'); } - function renderTags(tags, clear) { - var $target = $el.find('tbody'); - - if (clear) { - $target.empty(); - } - + function renderTags($page, tags) { + var $target = $page.find('tbody'); _.each(tags, function(tag) { var $item = jQuery(templates.listItem({ tag: tag, diff --git a/public_html/js/Presenters/UserListPresenter.js b/public_html/js/Presenters/UserListPresenter.js index 98f94fcd..f4e531c1 100644 --- a/public_html/js/Presenters/UserListPresenter.js +++ b/public_html/js/Presenters/UserListPresenter.js @@ -32,8 +32,8 @@ App.Presenters.UserListPresenter = function( baseUri: '#/users', backendUri: '/users', $target: $el.find('.pagination-target'), - updateCallback: function(data, clear) { - renderUsers(data.entities, clear); + updateCallback: function($page, data) { + renderUsers($page, data.entities); }, }, function() { @@ -68,13 +68,8 @@ App.Presenters.UserListPresenter = function( $el.find('.order [href*="' + activeOrder + '"]').addClass('active'); } - function renderUsers(users, clear) { - var $target = $el.find('.users'); - - if (clear) { - $target.empty(); - } - + function renderUsers($page, users) { + var $target = $page.find('.users'); _.each(users, function(user) { var $item = jQuery('
  • ' + templates.listItem({ user: user, diff --git a/public_html/templates/pager.tpl b/public_html/templates/pager.tpl index 71711efe..ce71b637 100644 --- a/public_html/templates/pager.tpl +++ b/public_html/templates/pager.tpl @@ -1,5 +1,4 @@
    - <%= originalHtml %>