From 2c358b3c772ba3b57471bd4177fb304439908894 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Thu, 18 Sep 2014 11:29:19 +0200
Subject: [PATCH] Changed pagers to use own spinners; improved looks

---
 public_html/css/core.css                      |  25 +++-
 public_html/css/pager.css                     |  19 +--
 public_html/index.html                        |  18 +--
 public_html/js/PresenterManager.js            |  16 ++-
 .../js/Presenters/PagedCollectionPresenter.js | 136 ++++++++++++------
 .../js/Presenters/PostListPresenter.js        |  46 +++---
 .../js/Presenters/UserListPresenter.js        |  38 ++---
 public_html/templates/pager.tpl               |  20 ++-
 public_html/templates/post-list.tpl           |   2 +-
 public_html/templates/user-list.tpl           |   2 +-
 10 files changed, 190 insertions(+), 132 deletions(-)

diff --git a/public_html/css/core.css b/public_html/css/core.css
index 05681fcd..3ad95931 100644
--- a/public_html/css/core.css
+++ b/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;
 }
diff --git a/public_html/css/pager.css b/public_html/css/pager.css
index 687e97b0..e96705aa 100644
--- a/public_html/css/pager.css
+++ b/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;
-}
diff --git a/public_html/index.html b/public_html/index.html
index ba49e6e4..dfec08cc 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -37,20 +37,20 @@
 	<div id="main">
 		<div id="top-navigation"></div>
 		<div id="middle">
+			<div id="wait">
+				<div id="wait-cover">
+					<div class="spinner">
+						<i class="fa fa-spin fa-circle-o-notch"></i>
+						<p>Loading&hellip;</p>
+					</div>
+				</div>
+			</div>
+
 			<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>
-			</div>
-		</div>
-	</div>
-
 	<!-- build:template
 	<% _.each(templates, function(templateString, templateName) { %>
 		<script type="text/template" id="<%= templateName %>-template">
diff --git a/public_html/js/PresenterManager.js b/public_html/js/PresenterManager.js
index 43c8385d..f1861820 100644
--- a/public_html/js/PresenterManager.js
+++ b/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');
-		}, 300);
+			showContentSpinner();
+		}, 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,
 	};
 
 };
diff --git a/public_html/js/Presenters/PagedCollectionPresenter.js b/public_html/js/Presenters/PagedCollectionPresenter.js
index f246dd34..9ca0ec69 100644
--- a/public_html/js/Presenters/PagedCollectionPresenter.js
+++ b/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;
-		searchParams = args.searchParams;
-		pageNumber = parseInt(args.page) || 1;
+		$target = args.$target;
+		targetContent = jQuery(args.$target).html();
 
 		baseUri = args.baseUri;
 		backendUri = args.backendUri;
@@ -37,23 +39,33 @@ App.Presenters.PagedCollectionPresenter = function(
 		promise.wait(util.promiseTemplate('pager'))
 			.then(function(html) {
 				template = _.template(html);
-				softChangePage(pageNumber)
-					.then(loaded)
-					.fail(loaded);
+				render();
+				loaded();
+			});
+	}
 
-				if (!endlessScroll) {
-					mousetrap.bind('a', function(e) {
-						if (!e.altKey && !e.ctrlKey) {
-							prevPage();
-						}
-					});
-					mousetrap.bind('d', function(e) {
-						if (!e.altKey && !e.ctrlKey) {
-							nextPage();
-						}
-					});
+	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);
+
+		if (!endlessScroll) {
+			mousetrap.bind('a', function(e) {
+				if (!e.altKey && !e.ctrlKey) {
+					prevPage();
 				}
 			});
+			mousetrap.bind('d', function(e) {
+				if (!e.altKey && !e.ctrlKey) {
+					nextPage();
+				}
+			});
+		}
 	}
 
 	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,31 +144,49 @@ App.Presenters.PagedCollectionPresenter = function(
 		});
 	}
 
-	function render($target) {
-		var pages = getVisiblePages();
-
+	function attachNextPageLoader() {
 		if (!endlessScroll) {
-			$target.find('.pager').remove();
-			$target.append(template({
-				pages: pages,
-				pageNumber: pageNumber,
-				link: getPageChangeLink,
-			}));
+			return;
+		}
+		var $scroller = jQuery('<div/>');
+		window.clearInterval(scrollInterval);
+		scrollInterval = window.setInterval(function() {
+			if ($scroller.is(':visible')) {
+				nextPageInplace();
+				window.clearInterval(scrollInterval);
+			}
+		}, 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 {
-			var $scroller = jQuery('<div/>');
-			window.clearInterval(scrollInterval);
-			scrollInterval = window.setInterval(function() {
-				if ($scroller.is(':visible')) {
-					nextPageInplace();
-					window.clearInterval(scrollInterval);
-				}
-			}, 50);
-			$target.append($scroller);
+			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);
diff --git a/public_html/js/Presenters/PostListPresenter.js b/public_html/js/Presenters/PostListPresenter.js
index cd52c542..b74ce5ea 100644
--- a/public_html/js/Presenters/PostListPresenter.js
+++ b/public_html/js/Presenters/PostListPresenter.js
@@ -28,43 +28,37 @@ App.Presenters.PostListPresenter = function(
 				itemTemplate = _.template(itemHtml);
 
 				render();
-				reinit(args, loaded);
+				loaded();
+
+				pagedCollectionPresenter.init({
+						baseUri: '#/posts',
+						backendUri: '/posts',
+						$target: $el.find('.pagination-target'),
+						updateCallback: function(data, clear) {
+							renderPosts(data.entities, clear);
+						},
+						failCallback: function(response) {
+							$el.empty();
+							messagePresenter.showError($el, response.json && response.json.error || response);
+						}
+					},
+					function() {
+						reinit(args, function() {});
+					});
 			});
 	}
 
 	function reinit(args, loaded) {
+		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',
-			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);
+		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');
 
diff --git a/public_html/js/Presenters/UserListPresenter.js b/public_html/js/Presenters/UserListPresenter.js
index f47654b2..78a049ef 100644
--- a/public_html/js/Presenters/UserListPresenter.js
+++ b/public_html/js/Presenters/UserListPresenter.js
@@ -28,32 +28,34 @@ App.Presenters.UserListPresenter = function(
 				itemTemplate = _.template(itemHtml);
 
 				render();
-				reinit(args, loaded);
+				loaded();
+
+				pagedCollectionPresenter.init({
+						baseUri: '#/users',
+						backendUri: '/users',
+						$target: $el.find('.pagination-target'),
+						updateCallback: function(data, clear) {
+							renderUsers(data.entities, clear);
+						},
+						failCallback: function(response) {
+							$el.empty();
+							messagePresenter.showError($el, response.json && response.json.error || response);
+						}
+					},
+					function() {
+						reinit(args, function() {});
+					});
 			});
 	}
 
 	function reinit(args, loaded) {
+		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',
-			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);
+		pagedCollectionPresenter.reinit({page: searchArgs.page, searchParams: {order: searchArgs.order}});
 	}
 
 	function render() {
diff --git a/public_html/templates/pager.tpl b/public_html/templates/pager.tpl
index 96485413..38774997 100644
--- a/public_html/templates/pager.tpl
+++ b/public_html/templates/pager.tpl
@@ -1,15 +1,11 @@
-<ul class="pager">
+<div class="pagination-content">
+	<%= originalHtml %>
+</div>
 
-	<% _.each(pages, function(page) { %>
-		<% if (page == pageNumber) { %>
-			<li class="active">
-		<% } else { %>
-			<li>
-		<% } %>
-			<a href="<%= link(page) %>">
-				<%= page %>
-			</a>
-		</li>
-	<% }); %>
+<div class="spinner">
+	<i class="fa fa-spin fa-circle-o-notch"></i>
+	<p>Loading&hellip;</p>
+</div>
 
+<ul class="page-list">
 </ul>
diff --git a/public_html/templates/post-list.tpl b/public_html/templates/post-list.tpl
index c1f6b1dc..c4852836 100644
--- a/public_html/templates/post-list.tpl
+++ b/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>
diff --git a/public_html/templates/user-list.tpl b/public_html/templates/user-list.tpl
index 30766f04..09b7e112 100644
--- a/public_html/templates/user-list.tpl
+++ b/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>