From 96aa1be2cf4665001d63d5e446607846595ab3ff Mon Sep 17 00:00:00 2001 From: Hyzual Date: Thu, 28 May 2015 22:07:17 +0200 Subject: [PATCH] Display the loading spinner gif for all angular ajax requests Remove the ajax-loader.gif which appeared only in unused styles. --- app/app.js | 84 +++++++++++++++++++++------------- app/common/loading-service.js | 10 ++++ app/common/main-controller.js | 24 +++++----- app/images/ajax-loader.gif | Bin 723 -> 0 bytes app/index.html | 3 +- app/styles/Style.css | 17 ------- 6 files changed, 78 insertions(+), 60 deletions(-) create mode 100644 app/common/loading-service.js delete mode 100644 app/images/ajax-loader.gif diff --git a/app/app.js b/app/app.js index b2fa8fc..bf506c2 100755 --- a/app/app.js +++ b/app/app.js @@ -2,9 +2,9 @@ /* Declare app level module */ angular.module('JamStash', ['ngCookies', 'ngRoute', 'ngSanitize', 'ui.keypress', 'angular-underscore/utils', - 'jamstash.subsonic.controller', 'jamstash.archive.controller', 'jamstash.player.controller', 'jamstash.queue.controller', 'jamstash.settings.controller', 'jamstash.persistence']) + 'jamstash.subsonic.controller', 'jamstash.archive.controller', 'jamstash.player.controller', 'jamstash.queue.controller', 'jamstash.settings.controller', 'jamstash.persistence', 'jamstash.loading']) -.config(['$routeProvider',function($routeProvider) { +.config(['$routeProvider',function ($routeProvider) { $routeProvider .when('/index', { redirectTo: '/library' }) .when('/settings', { templateUrl: 'settings/settings.html', controller: 'SettingsController' }) @@ -19,33 +19,55 @@ angular.module('JamStash', ['ngCookies', 'ngRoute', 'ngSanitize', 'ui.keypress', .otherwise({ redirectTo: '/index' }); }]) -.config(['$httpProvider',function($httpProvider) { - $httpProvider.interceptors.push(['$rootScope', '$location', '$q', 'globals', function ($rootScope, $location, $q, globals) { - return { - 'request': function (request) { - // if we're not logged-in to the AngularJS app, redirect to login page - //$rootScope.loggedIn = $rootScope.loggedIn || globals.settings.Username; - $rootScope.loggedIn = false; - if (globals.settings.Username != "" && globals.settings.Password != "" && globals.settings.Server != "") { - $rootScope.loggedIn = true; - } - var path = ''; - path = $location.path(); - if (globals.settings.Debug) { console.log('Logged In: ' + $rootScope.loggedIn); } - if (globals.settings.Debug) { console.log('Current Path: ' + path); } - if (!$rootScope.loggedIn && path != '/settings' && path.search('archive') < 0) { - $location.path('/settings'); - } - return request; - }, - 'responseError': function (rejection) { - // if we're not logged-in to the web service, redirect to login page - if (rejection.status === 401 && $location.path() != '/settings') { - $rootScope.loggedIn = false; - $location.path('/settings'); - } - return $q.reject(rejection); - } - }; - }]); +.config(['$httpProvider', function httpConfig ($httpProvider) { + $httpProvider.interceptors.push(authenticationInterceptor); + $httpProvider.interceptors.push(loadingInterceptor); }]); + +authenticationInterceptor.$inject = ['$rootScope', '$location', '$q', 'globals']; +function authenticationInterceptor($rootScope, $location, $q, globals) { + return { + 'request': function (request) { + // if we're not logged-in to the AngularJS app, redirect to login page + //$rootScope.loggedIn = $rootScope.loggedIn || globals.settings.Username; + $rootScope.loggedIn = false; + if (globals.settings.Username != "" && globals.settings.Password != "" && globals.settings.Server != "") { + $rootScope.loggedIn = true; + } + var path = ''; + path = $location.path(); + if (globals.settings.Debug) { console.log('Logged In: ' + $rootScope.loggedIn); } + if (globals.settings.Debug) { console.log('Current Path: ' + path); } + if (!$rootScope.loggedIn && path != '/settings' && path.search('archive') < 0) { + $location.path('/settings'); + } + return request; + }, + 'responseError': function (rejection) { + // if we're not logged-in to the web service, redirect to login page + if (rejection.status === 401 && $location.path() != '/settings') { + $rootScope.loggedIn = false; + $location.path('/settings'); + } + return $q.reject(rejection); + } + }; +} + +loadingInterceptor.$inject = ['Loading']; +function loadingInterceptor(Loading) { + return { + request: function (request) { + Loading.isLoading = true; + return request; + }, + response: function (response) { + Loading.isLoading = false; + return response; + }, + responseError: function (error) { + Loading.isLoading = false; + return error; + } + }; +} diff --git a/app/common/loading-service.js b/app/common/loading-service.js new file mode 100644 index 0000000..257e390 --- /dev/null +++ b/app/common/loading-service.js @@ -0,0 +1,10 @@ +/** +* jamstash.loading Module +* +* Keeps the loading state across the app in order to display the spinner gif +*/ +angular.module('jamstash.loading', []) + +.value('Loading', { + isLoading: false +}); diff --git a/app/common/main-controller.js b/app/common/main-controller.js index 0aa3bbe..e8af1e0 100644 --- a/app/common/main-controller.js +++ b/app/common/main-controller.js @@ -1,6 +1,6 @@ angular.module('JamStash') -.controller('AppController', ['$scope', '$rootScope', '$document', '$window', '$location', '$cookieStore', '$http', 'utils', 'globals', 'model', 'notifications', 'player', 'persistence', 'Page', 'subsonic', - function ($scope, $rootScope, $document, $window, $location, $cookieStore, $http, utils, globals, model, notifications, player, persistence, Page, subsonic) { +.controller('AppController', ['$scope', '$rootScope', '$document', '$window', '$location', '$cookieStore', '$http', 'utils', 'globals', 'model', 'notifications', 'player', 'persistence', 'Page', 'subsonic', 'Loading', + function ($scope, $rootScope, $document, $window, $location, $cookieStore, $http, utils, globals, model, notifications, player, persistence, Page, subsonic, Loading) { 'use strict'; $rootScope.settings = globals.settings; @@ -27,6 +27,17 @@ angular.module('JamStash') $location.path(path); }; + $scope.loading = Loading; + // TODO: Hyz: remove when there are no longer jQuery ajax calls + $.ajaxSetup({ + 'beforeSend': function () { + $("#loading").removeClass('ng-hide'); + }, + 'complete': function () { + $("#loading").addClass('ng-hide'); + } + }); + // Reads cookies and sets globals.settings values $scope.loadSettings = function () { // Temporary Code to Convert Cookies added 2/2/2014 @@ -58,15 +69,6 @@ angular.module('JamStash') notifications.updateMessage(setting + ' : ' + globals.settings[id], true); }; - $.ajaxSetup({ - 'beforeSend': function () { - $("#loading").show(); - }, - 'complete': function () { - $("#loading").hide(); - } - }); - var submenu_active = false; $('div.submenu').mouseenter(function () { submenu_active = true; diff --git a/app/images/ajax-loader.gif b/app/images/ajax-loader.gif deleted file mode 100644 index 09d621ede9dbe610877292e554c858d60573359e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 723 zcmZ?wbhEHb6ky3UH!ouR`=lAT{vl};VeEIUl!ouRtojadCecHBd+kyoPPMtdS z?%g|}ArPSWpWDwhB-q(8z|~04fSC~}s`yXJxhOTUBsE2$JhLQ2Au%hlA}2pFMK3ci zEuTU0CkrPxP?ZiyKgf{`thx#ceJPpqmMq|Ubc$)6gFv&z8PkHx)%R}in9s-lM6i9! zBZm__dd2Imak;LY=7h}zm4rkI)`WR0GG*E)?mKYn(8@QLmiIn?v-kDx2z`w?tc})! zof1sgG@1de?oQNs+@Zp$B*l}wBx#YxN$K-jdS4q!9hlC1plNUP#}nRyjb|@j-XZKa z^H3#V%=s`!CV{ zGZTv~S)?jgU+dnbH8)5Rn@L8H@VK@q;+ad}wo4-xl69peI z>rMAn>7QZ36tBx*W_EhPz6U`Z*qo#fG3yD?Ju5c7TU8{Z8nlJ?f$93++hq!-bARhP dGOMsv=2x69g9)2+ -
+
@@ -106,6 +106,7 @@ + diff --git a/app/styles/Style.css b/app/styles/Style.css index 91bc706..1b87cf0 100644 --- a/app/styles/Style.css +++ b/app/styles/Style.css @@ -349,16 +349,8 @@ span.apiversion .leftsubsection { border-top: 1px solid #DDDDDD; } -.loading -{ - display: none; - height: 100%; - width: 100%; - background: url('../images/ajax-loader.gif') no-repeat center center #f4f4f4; -} #loading { - display: none; width: 64px; height: 64px; position: fixed; @@ -374,15 +366,6 @@ span.apiversion -ms-border-radius: 8px; border-radius: 8px; } -#toploading -{ - display: none; - height: 35px; - width: 40px; - margin: 0 0 0 2px; - background: url('../images/ajax-loader.gif') no-repeat center center; - float: left; -} #messages { display: none;