Changed throbber to nprogress

TODO

@@ -13,7 +13,6 @@ first major release.
 - 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...
-- misc: improve throbber appearance
 
 - post notes
     - "add note" in sidebar creates new note in the middle of image
@@ -29,6 +28,4 @@ first major release.
 refactors:
     - add enum validation in IValidatables (needs refactors of enums and
       possible disposal of EnumHelper in favor of something more subtle)
-    - change content spinner to nprogress: http://ricostacruz.com/nprogress/
-      (unsure)
     - reduce dependencies

gruntfile.js

@@ -83,6 +83,8 @@ module.exports = function(grunt) {
 					{ src: 'node_modules/pathjs/path.js', dest: 'public_html/lib/path.js' },
 					{ src: 'node_modules/underscore/underscore-min.js', dest: 'public_html/lib/underscore.min.js' },
 					{ src: 'node_modules/marked/lib/marked.js', dest: 'public_html/lib/marked.js' },
+					{ src: 'node_modules/nprogress/nprogress.js', dest: 'public_html/lib/nprogress.js' },
+					{ src: 'node_modules/nprogress/nprogress.css', dest: 'public_html/lib/nprogress.css' },
 				]
 			}
 		},

package.json

@@ -7,6 +7,7 @@
 		"underscore": "1.7.0",
 		"mousetrap": "git://github.com/ccampbell/mousetrap.git",
 		"marked": "~0.3.2",
+		"nprogress": "git://github.com/rstacruz/nprogress.git",
 
 		"requirejs": "*",
 		"ini": "*",

public_html/css/core.css

@@ -73,42 +73,6 @@ hr {
 	outline: 0;
 }
 
-#wait-cover {
-	display: flex;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-	height: 100%;
-	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: 42px;
-}
-#wait p {
-	font-size: 15px;
-}
-
-.pagination-target .spinner {
-	display: none;
-	color: #888;
-	text-align: center;
-}
-.pagination-target .spinner .fa {
-	font-size: 28px;
-}
-
 span.spoiler:before {
 	content: '[';
 	color: #000;

public_html/index.html

@@ -20,6 +20,8 @@
 	<script type="text/javascript" src="/lib/underscore.min.js"></script>
 	<script type="text/javascript" src="/lib/mousetrap.min.js"></script>
 	<script type="text/javascript" src="/lib/marked.js"></script>
+	<script type="text/javascript" src="/lib/nprogress.js"></script>
+	<link rel="stylesheet" type="text/css" href="/lib/nprogress.css"/>
 
 	<!-- build:template
 		<link rel="stylesheet" type="text/css" href="app.min.css?<%= timestamp %>"/>
@@ -61,15 +63,6 @@
 	<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="content"></div>
 		</div>
 	</div>

public_html/js/Bootstrap.js

@@ -34,4 +34,5 @@ App.DI.registerManual('pathJs', function() { return window.pathjs; });
 App.DI.registerManual('_', function() { return window._; });
 App.DI.registerManual('mousetrap', function() { return window.Mousetrap; });
 App.DI.registerManual('marked', function() { return window.marked; });
+App.DI.registerManual('nprogress', function() { return window.NProgress; });
 App.DI.get('bootstrap');

public_html/js/PresenterManager.js

@@ -1,13 +1,10 @@
 var App = App || {};
 
-App.PresenterManager = function(jQuery, promise, topNavigationPresenter, keyboard) {
+App.PresenterManager = function(jQuery, promise, topNavigationPresenter, keyboard, nprogress) {
 
 	var lastContentPresenter = null;
-	var $spinner;
-	var spinnerTimeout;
 
 	function init() {
-		$spinner = jQuery('body').find('#wait');
 		return promise.make(function(resolve, reject) {
 			initPresenter(topNavigationPresenter, [], resolve);
 		});
@@ -17,22 +14,8 @@ App.PresenterManager = function(jQuery, promise, topNavigationPresenter, keyboar
 		presenter.init.call(presenter, args, loaded);
 	}
 
-	function showContentSpinner() {
-		if (spinnerTimeout !== null) {
-			spinnerTimeout = window.setTimeout(function() {
-				$spinner.show();
-			}, 150);
-		}
-	}
-
-	function hideContentSpinner() {
-		window.clearTimeout(spinnerTimeout);
-		spinnerTimeout = null;
-		$spinner.hide();
-	}
-
 	function switchContentPresenter(presenter, args) {
-		showContentSpinner();
+		nprogress.start();
 
 		if (lastContentPresenter === null || lastContentPresenter.name !== presenter.name) {
 			if (lastContentPresenter !== null && lastContentPresenter.deinit) {
@@ -41,10 +24,10 @@ App.PresenterManager = function(jQuery, promise, topNavigationPresenter, keyboar
 			keyboard.reset();
 			topNavigationPresenter.changeTitle(null);
 			topNavigationPresenter.focus();
-			presenter.init.call(presenter, args, hideContentSpinner);
+			presenter.init.call(presenter, args, nprogress.done);
 			lastContentPresenter = presenter;
 		} else if (lastContentPresenter.reinit) {
-			lastContentPresenter.reinit.call(lastContentPresenter, args, hideContentSpinner);
+			lastContentPresenter.reinit.call(lastContentPresenter, args, nprogress.done);
 		}
 	}
 
@@ -67,10 +50,8 @@ App.PresenterManager = function(jQuery, promise, topNavigationPresenter, keyboar
 		initPresenter: initPresenter,
 		initPresenters: initPresenters,
 		switchContentPresenter: switchContentPresenter,
-		showContentSpinner: showContentSpinner,
-		hideContentSpinner: hideContentSpinner,
 	};
 
 };
 
-App.DI.registerSingleton('presenterManager', ['jQuery', 'promise', 'topNavigationPresenter', 'keyboard'], App.PresenterManager);
+App.DI.registerSingleton('presenterManager', ['jQuery', 'promise', 'topNavigationPresenter', 'keyboard', 'nprogress'], App.PresenterManager);

public_html/js/Presenters/PagerPresenter.js

@@ -6,13 +6,12 @@ App.Presenters.PagerPresenter = function(
 	jQuery,
 	util,
 	promise,
-	api,
 	keyboard,
 	router,
 	pager,
-	presenterManager,
 	messagePresenter,
-	browsingSettings) {
+	browsingSettings,
+	nprogress) {
 
 	var $target;
 	var $pageList;
@@ -85,25 +84,9 @@ App.Presenters.PagerPresenter = function(
 		router.navigateInplace(getUrl());
 	}
 
-	function showSpinner() {
-		if (endlessScroll) {
-			$target.find('.spinner').show();
-		} else {
-			presenterManager.showContentSpinner();
-		}
-	}
-
-	function hideSpinner() {
-		if (endlessScroll) {
-			$target.find('.spinner').hide();
-		} else {
-			presenterManager.hideContentSpinner();
-		}
-	}
-
 	function retrieve() {
 		messagePresenter.hideMessages($messages);
-		showSpinner();
+		nprogress.start();
 
 		return promise.make(function(resolve, reject) {
 			promise.wait(pager.retrieve())
@@ -125,12 +108,12 @@ App.Presenters.PagerPresenter = function(
 						attachNextPageLoader();
 					}
 					refreshPageList();
-					hideSpinner();
+					nprogress.done();
 					resolve();
 				}).fail(function(response) {
 					clearContent();
 					hidePageList();
-					hideSpinner();
+					nprogress.done();
 					messagePresenter.showError($messages, response.json && response.json.error || response);
 
 					reject();
@@ -239,4 +222,4 @@ App.Presenters.PagerPresenter = function(
 
 };
 
-App.DI.register('pagerPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'keyboard', 'router', 'pager', 'presenterManager', 'messagePresenter', 'browsingSettings'], App.Presenters.PagerPresenter);
+App.DI.register('pagerPresenter', ['_', 'jQuery', 'util', 'promise', 'keyboard', 'router', 'pager', 'messagePresenter', 'browsingSettings', 'nprogress'], App.Presenters.PagerPresenter);

public_html/templates/pager.tpl

@@ -2,10 +2,5 @@
 	<%= originalHtml %>
 </div>
 
-<div class="spinner">
-	<i class="fa fa-spin fa-circle-o-notch"></i>
-	<p>Loading&hellip;</p>
-</div>
-
 <ul class="page-list">
 </ul>