Added current page info to endless scroll

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

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;

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,

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;

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('<div class="page">');
+					if (endlessScroll && pager.getTotalPages() > 1) {
+						$page.append('<p>Page ' + pager.getPage() + ' of ' + pager.getTotalPages() + '</p>');
+					}
+					$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) {

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();
-		}
-
 		_.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);
 	}
 

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);

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,

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('<li>' + templates.listItem({
 				user: user,

public_html/templates/pager.tpl

@@ -1,5 +1,4 @@
 <div class="pagination-content">
-	<%= originalHtml %>
 </div>
 
 <ul class="page-list">