Changed pagers to use own spinners; improved looks

public_html/css/core.css

@@ -6,6 +6,7 @@ body {
 	color: #555;
 	font-family: 'Droid Sans', sans-serif;
 	font-size: 17px;
+	overflow-y: scroll;
 }
 
 h2 {
@@ -15,6 +16,7 @@ h2 {
 
 #middle {
 	padding: 0 2em;
+	position: relative;
 }
 
 #content {
@@ -55,19 +57,36 @@ hr {
 
 #wait-cover {
 	display: flex;
-	position: fixed;
+	position: absolute;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
 	width: 100%;
 	height: 100%;
-	background: rgba(255, 255, 255, 0.9);
+	min-height: 25em;
+	background: rgba(255, 255, 255, 0.7);
 	z-index: 100;
 }
 #wait .spinner {
 	margin: auto;
+	padding: 1em 2em;
+	box-shadow: 0 0 1em 1em rgba(255, 255, 255, 0.5);
+	background: rgba(255, 255, 255, 0.5);
+	color: #888;
 }
 #wait .spinner .fa {
-	font-size: 40px;
+	font-size: 42px;
+}
+#wait p {
+	font-size: 15px;
+}
+
+.pagination-target .spinner {
+	display: none;
+	color: #888;
+	text-align: center;
+}
+.pagination-target .spinner .fa {
+	font-size: 28px;
 }

public_html/css/pager.css

@@ -1,27 +1,16 @@
-.pager {
+.page-list {
 	text-align: center;
-	margin-top: 1em;
-}
-
-.pager ul {
 	list-style-type: none;
 	padding: 0;
-	margin: 0 auto;
+	margin: 1em auto 0 auto;
 	display: inline-block;
 }
 
-.pager li {
+.page-list li {
 	display: inline-block;
 }
 
-.pager li a {
+.page-list li a {
 	display: inline-block;
 	padding: 0.4em 1.2em;
 }
-
-.pager li:hover a {
-	background: #efa;
-}
-.pager li.active a {
-	background: #f7fbfc;
-}

public_html/index.html

@@ -37,20 +37,20 @@
 	<div id="main">
 		<div id="top-navigation"></div>
 		<div id="middle">
-			<div id="sidebar"></div>
-			<div id="content"></div>
-		</div>
-	</div>
-
 			<div id="wait">
 				<div id="wait-cover">
 					<div class="spinner">
 						<i class="fa fa-spin fa-circle-o-notch"></i>
-				<p>Loading</p>
+						<p>Loading&hellip;</p>
 					</div>
 				</div>
 			</div>
 
+			<div id="sidebar"></div>
+			<div id="content"></div>
+		</div>
+	</div>
+
 	<!-- build:template
 	<% _.each(templates, function(templateString, templateName) { %>
 		<script type="text/template" id="<%= templateName %>-template">

public_html/js/PresenterManager.js

@@ -15,15 +15,23 @@ App.PresenterManager = function(jQuery, topNavigationPresenter) {
 		presenter.init.call(presenter, args, loaded);
 	}
 
+	function showContentSpinner() {
+		$spinner.show();
+	}
+
+	function hideContentSpinner() {
+		$spinner.hide();
+	}
+
 	function switchContentPresenter(presenter, args) {
 		var contentPresenterLoaded = function() {
 			window.clearTimeout(spinnerTimeout);
-			$spinner.hide();
+			hideContentSpinner();
 		};
 
 		spinnerTimeout = window.setTimeout(function() {
-			$spinner.stop().fadeIn('slow');
+			showContentSpinner();
-		}, 300);
+		}, 100);
 
 		if (lastContentPresenter === null || lastContentPresenter.name !== presenter.name) {
 			topNavigationPresenter.changeTitle(null);
@@ -53,6 +61,8 @@ App.PresenterManager = function(jQuery, topNavigationPresenter) {
 		initPresenter: initPresenter,
 		initPresenters: initPresenters,
 		switchContentPresenter: switchContentPresenter,
+		showContentSpinner: showContentSpinner,
+		hideContentSpinner: hideContentSpinner,
 	};
 
 };

public_html/js/Presenters/PagedCollectionPresenter.js

@@ -9,13 +9,16 @@ App.Presenters.PagedCollectionPresenter = function(
 	api,
 	mousetrap,
 	router,
+	presenterManager,
 	browsingSettings) {
 
+	var $target;
+	var targetContent;
 	var endlessScroll = browsingSettings.getSettings().endlessScroll;
 	var scrollInterval;
 	var template;
 	var totalPages;
-	var forceClear;
+	var forceClear = false;
 
 	var pageNumber;
 	var searchParams;
@@ -25,9 +28,8 @@ App.Presenters.PagedCollectionPresenter = function(
 	var failCallback;
 
 	function init(args, loaded) {
-		forceClear = !_.isEqual(args.searchParams, searchParams) || parseInt(args.page) !== pageNumber + 1;
+		$target = args.$target;
-		searchParams = args.searchParams;
+		targetContent = jQuery(args.$target).html();
-		pageNumber = parseInt(args.page) || 1;
 
 		baseUri = args.baseUri;
 		backendUri = args.backendUri;
@@ -37,6 +39,17 @@ App.Presenters.PagedCollectionPresenter = function(
 		promise.wait(util.promiseTemplate('pager'))
 			.then(function(html) {
 				template = _.template(html);
+				render();
+				loaded();
+			});
+	}
+
+	function reinit(args, loaded) {
+		forceClear = !_.isEqual(args.searchParams, searchParams) || parseInt(args.page) !== pageNumber + 1;
+
+		searchParams = args.searchParams;
+		pageNumber = parseInt(args.page) || 1;
+
 		softChangePage(pageNumber)
 			.then(loaded)
 			.fail(loaded);
@@ -53,7 +66,6 @@ App.Presenters.PagedCollectionPresenter = function(
 				}
 			});
 		}
-			});
 	}
 
 	function prevPage() {
@@ -82,9 +94,27 @@ App.Presenters.PagedCollectionPresenter = function(
 		router.navigate(getPageChangeLink(newPageNumber));
 	}
 
+	function showSpinner() {
+		if (endlessScroll) {
+			$target.find('.spinner').show();
+		} else {
+			presenterManager.showContentSpinner();
+		}
+	}
+
+	function hideSpinner() {
+		if (endlessScroll) {
+			$target.find('.spinner').hide();
+		} else {
+			presenterManager.hideContentSpinner();
+		}
+	}
+
 	function softChangePage(newPageNumber) {
 		pageNumber = newPageNumber;
 
+		showSpinner();
+
 		return promise.make(function(resolve, reject) {
 			promise.wait(
 				api.get(backendUri, _.extend({}, searchParams, {page: pageNumber})))
@@ -94,13 +124,15 @@ App.Presenters.PagedCollectionPresenter = function(
 						var totalRecords = response.json.totalRecords;
 						totalPages = Math.ceil(totalRecords / pageSize);
 
-						var $target = updateCallback({
+						updateCallback({
 							entities: response.json.data,
 							totalRecords: totalRecords},
 							forceClear || !endlessScroll);
 						forceClear = false;
 
-						render($target);
+						refreshPageList();
+						hideSpinner();
+						attachNextPageLoader();
 					}).fail(function(response) {
 						reject(response);
 						if (typeof(failCallback) !== 'undefined') {
@@ -112,17 +144,10 @@ App.Presenters.PagedCollectionPresenter = function(
 		});
 	}
 
-	function render($target) {
+	function attachNextPageLoader() {
-		var pages = getVisiblePages();
-
 		if (!endlessScroll) {
-			$target.find('.pager').remove();
+			return;
-			$target.append(template({
+		}
-				pages: pages,
-				pageNumber: pageNumber,
-				link: getPageChangeLink,
-			}));
-		} else {
 		var $scroller = jQuery('<div/>');
 		window.clearInterval(scrollInterval);
 		scrollInterval = window.setInterval(function() {
@@ -133,10 +158,35 @@ App.Presenters.PagedCollectionPresenter = function(
 		}, 50);
 		$target.append($scroller);
 	}
+
+	function refreshPageList() {
+		var pages = getVisiblePages();
+		$target.find('.page-list').empty();
+		_.each(pages, function(page) {
+			var $a = jQuery('<a/>');
+			$a.addClass('big-button');
+			$a.attr('href', getPageChangeLink(page));
+			$a.text(page);
+			if (page === pageNumber) {
+				$a.addClass('active');
+			}
+			var $li = jQuery('<li/>');
+			$li.append($a);
+			$target.find('.page-list').append($li);
+		});
+	}
+
+	function render() {
+		$target.html(template({originalHtml: targetContent}));
+		if (endlessScroll) {
+			$target.find('.page-list').remove();
+		} else {
+			refreshPageList();
+		}
 	}
 
 	function getVisiblePages() {
-		var pages = [1, totalPages];
+		var pages = [1, totalPages || 1];
 		var pagesAroundCurrent = 2;
 		for (var i = -pagesAroundCurrent; i <= pagesAroundCurrent; i ++) {
 			if (pageNumber + i >= 1 && pageNumber + i <= totalPages) {
@@ -150,11 +200,9 @@ App.Presenters.PagedCollectionPresenter = function(
 			pages.push(totalPages - 1);
 		}
 
-		pages = pages.sort(function(a, b) { return a - b; }).filter(function(item, pos) {
+		return pages.sort(function(a, b) { return a - b; }).filter(function(item, pos) {
 			return !pos || item !== pages[pos - 1];
 		});
-
-		return pages;
 	}
 
 	function getSearchChangeLink(newSearchParams) {
@@ -167,7 +215,7 @@ App.Presenters.PagedCollectionPresenter = function(
 
 	return {
 		init: init,
-		render: render,
+		reinit: reinit,
 		changePage: changePage,
 		getSearchChangeLink: getSearchChangeLink,
 		getPageChangeLink: getPageChangeLink
@@ -175,4 +223,4 @@ App.Presenters.PagedCollectionPresenter = function(
 
 };
 
-App.DI.register('pagedCollectionPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'mousetrap', 'router', 'browsingSettings'], App.Presenters.PagedCollectionPresenter);
+App.DI.register('pagedCollectionPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'mousetrap', 'router', 'presenterManager', 'browsingSettings'], App.Presenters.PagedCollectionPresenter);

public_html/js/Presenters/PostListPresenter.js

@@ -28,43 +28,37 @@ App.Presenters.PostListPresenter = function(
 				itemTemplate = _.template(itemHtml);
 
 				render();
-				reinit(args, loaded);
+				loaded();
-			});
-	}
 
-	function reinit(args, loaded) {
-		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
-		searchArgs.order = searchArgs.order;
-
-		updateActiveOrder(searchArgs.order);
-		initPaginator(searchArgs, loaded);
-	}
-
-	function initPaginator(searchArgs, onLoad) {
 				pagedCollectionPresenter.init({
-			page: searchArgs.page,
-			searchParams: {order: searchArgs.order},
 						baseUri: '#/posts',
 						backendUri: '/posts',
+						$target: $el.find('.pagination-target'),
 						updateCallback: function(data, clear) {
 							renderPosts(data.entities, clear);
-				return $el.find('.pagination-content');
 						},
 						failCallback: function(response) {
 							$el.empty();
 							messagePresenter.showError($el, response.json && response.json.error || response);
-			}}, onLoad);
+						}
+					},
+					function() {
+						reinit(args, function() {});
+					});
+			});
+	}
+
+	function reinit(args, loaded) {
+		loaded();
+
+		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
+		pagedCollectionPresenter.reinit({page: searchArgs.page, searchParams: {order: searchArgs.order}});
 	}
 
 	function render() {
 		$el.html(listTemplate());
 	}
 
-	function updateActiveOrder(activeOrder) {
-		$el.find('.order li a').removeClass('active');
-		$el.find('.order [data-order="' + activeOrder + '"]').addClass('active');
-	}
-
 	function renderPosts(posts, clear) {
 		var $target = $el.find('.posts');
 

public_html/js/Presenters/UserListPresenter.js

@@ -28,32 +28,34 @@ App.Presenters.UserListPresenter = function(
 				itemTemplate = _.template(itemHtml);
 
 				render();
-				reinit(args, loaded);
+				loaded();
-			});
-	}
 
-	function reinit(args, loaded) {
-		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
-		searchArgs.order = searchArgs.order || 'name';
-
-		updateActiveOrder(searchArgs.order);
-		initPaginator(searchArgs, loaded);
-	}
-
-	function initPaginator(searchArgs, onLoad) {
 				pagedCollectionPresenter.init({
-			page: searchArgs.page,
-			searchParams: {order: searchArgs.order},
 						baseUri: '#/users',
 						backendUri: '/users',
+						$target: $el.find('.pagination-target'),
 						updateCallback: function(data, clear) {
 							renderUsers(data.entities, clear);
-				return $el.find('.pagination-content');
 						},
 						failCallback: function(response) {
 							$el.empty();
 							messagePresenter.showError($el, response.json && response.json.error || response);
-			}}, onLoad);
+						}
+					},
+					function() {
+						reinit(args, function() {});
+					});
+			});
+	}
+
+	function reinit(args, loaded) {
+		loaded();
+
+		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
+		searchArgs.order = searchArgs.order || 'name';
+		updateActiveOrder(searchArgs.order);
+
+		pagedCollectionPresenter.reinit({page: searchArgs.page, searchParams: {order: searchArgs.order}});
 	}
 
 	function render() {

public_html/templates/pager.tpl

@@ -1,15 +1,11 @@
-<ul class="pager">
+<div class="pagination-content">
+	<%= originalHtml %>
+</div>
 
-	<% _.each(pages, function(page) { %>
+<div class="spinner">
-		<% if (page == pageNumber) { %>
+	<i class="fa fa-spin fa-circle-o-notch"></i>
-			<li class="active">
+	<p>Loading&hellip;</p>
-		<% } else { %>
+</div>
-			<li>
-		<% } %>
-			<a href="<%= link(page) %>">
-				<%= page %>
-			</a>
-		</li>
-	<% }); %>
 
+<ul class="page-list">
 </ul>

public_html/templates/post-list.tpl

@@ -1,5 +1,5 @@
 <div id="post-list">
-	<div class="pagination-content">
+	<div class="pagination-target">
 		<div class="wrapper">
 			<ul class="posts">
 			</ul>

public_html/templates/user-list.tpl

@@ -14,7 +14,7 @@
 		</li>
 	</ul>
 
-	<div class="pagination-content">
+	<div class="pagination-target">
 		<ul class="users">
 		</ul>
 	</div>