From 7d9f15a5ab13cb7da0aa3152de537999aefeb42b Mon Sep 17 00:00:00 2001 From: Nathan Gray Date: Thu, 12 Mar 2015 16:56:36 +0000 Subject: [PATCH] * Add a loading overlay while an application is loading --- jdots/egw_fw.css | 8 +++++- phpgwapi/js/framework/fw_base.js | 24 ++++++++++++++---- phpgwapi/js/framework/fw_browser.js | 38 ++++++++++++++++++++++++++-- pixelegg/css/mobile.css | 5 ++++ pixelegg/css/pixelegg.css | 5 ++++ pixelegg/less/layout_ajaxLoader.less | 6 +++++ 6 files changed, 78 insertions(+), 8 deletions(-) diff --git a/jdots/egw_fw.css b/jdots/egw_fw.css index 013681f55c..87977619e9 100644 --- a/jdots/egw_fw.css +++ b/jdots/egw_fw.css @@ -241,7 +241,13 @@ html, body { background-position: center; float: right; } - +.egw_fw_ui_tab_content > .loading { + background-image:url(images/ajax-loader.gif); + background-repeat: no-repeat; + background-position: center; + text-align: center; + line-height: 400px; +} .egw_fw_ui_sidemenu_entry_header h1, .egw_fw_ui_sidemenu_marker h1{ display: inline; font-size: 10pt; diff --git a/phpgwapi/js/framework/fw_base.js b/phpgwapi/js/framework/fw_base.js index ad5772dfb4..e82e32d863 100644 --- a/phpgwapi/js/framework/fw_base.js +++ b/phpgwapi/js/framework/fw_base.js @@ -152,6 +152,8 @@ var fw_base = Class.extend({ * @param {bool} _hidden specifies, whether the application should be set active * after opening the tab * @param {int} _pos + * + * @return {Deferred|null} Deferred Promise, will be resolved when the tab is loaded */ applicationTabNavigate: function(_app, _url, _hidden, _pos) { @@ -162,6 +164,9 @@ var fw_base = Class.extend({ //Create the tab for that application this.createApplicationTab(_app, _pos); + // Response + var deferred = new jQuery.Deferred(); + if (typeof _url == 'undefined' || _url == null) { _url = _app.indexUrl; @@ -178,7 +183,8 @@ var fw_base = Class.extend({ { this.setActiveApp(_app); } - return; + deferred.resolve(); + return deferred.promise(); } if (_app.browser == null) @@ -191,13 +197,15 @@ var fw_base = Class.extend({ if (typeof _hidden == 'undefined' || !_hidden) { - _app.browser.browse(_url); + deferred = _app.browser.browse(_url); this.setActiveApp(_app); } else { - this.notifyTabChange(); + this.notifyTabChange(deferred); } + + return deferred.promise(); }, /** @@ -348,9 +356,11 @@ var fw_base = Class.extend({ } }, /** + * Notify a tab that it was changed, update preferences * + * @param {Deferred} deferred Someone is listening, and wants to know when done. */ - notifyTabChange: function() + notifyTabChange: function(deferred) { // Call the "resize" function of the currently active app if (this.activeApp) @@ -373,6 +383,10 @@ var fw_base = Class.extend({ { window.focus(); } + if(deferred) + { + deferred.resolve(); + } }, 100); } } @@ -722,7 +736,7 @@ var fw_base = Class.extend({ this.tabsUi.showTab(_app.tab); //Going to a new tab changes the tab state - this.notifyTabChange(_app.tab); + this.notifyTabChange(); } } }, diff --git a/phpgwapi/js/framework/fw_browser.js b/phpgwapi/js/framework/fw_browser.js index 4c589c620e..db72cc1f33 100644 --- a/phpgwapi/js/framework/fw_browser.js +++ b/phpgwapi/js/framework/fw_browser.js @@ -36,6 +36,8 @@ var fw_browser = Class.extend({ this.heightCallback = _heightCallback; this.app = _app; this.currentLocation = ''; + this.ajaxLoaderDiv = null; + this.loadingDeferred = null; }, /** @@ -88,7 +90,10 @@ var fw_browser = Class.extend({ $j(this.baseDiv).empty(); this.iframe = null; this.contentDiv = null; - this.ajaxLoaderDiv = null; + if(this.loadingDeferred && this.type) + { + this.loadingDeferred.reject(); + } switch (_type) { @@ -121,6 +126,7 @@ var fw_browser = Class.extend({ /** * Sets url to browse and load the content in proper content browser * @param {string} _url + * @return {Deferred} Returns a Deferred promise object */ browse: function(_url) { @@ -139,6 +145,24 @@ var fw_browser = Class.extend({ } var useIframe = true; var targetUrl = _url; + if(_url == this.currentLocation && this.loadingDeferred != null) + { + // Still loading + return this.loadingDeferred.promise(); + } + + // Show loader div, start blocking + var self = this; + this.ajaxLoaderDiv = jQuery('
'+egw.lang('please wait...')+'
').insertBefore(this.baseDiv); + this.loadingDeferred = new jQuery.Deferred(); + this.loadingDeferred.always(function() { + if(self.ajaxLoaderDiv) + { + self.ajaxLoaderDiv.hide().remove(); + self.ajaxLoaderDiv = null; + } + self.loadingDeferred = null; + }); // Check whether the given url is a pseudo url which should be executed // by calling the ajax_exec function @@ -204,7 +228,6 @@ var fw_browser = Class.extend({ //Postpone the actual "navigation" - gives some speedup with internet explorer //as it does no longer blocks the complete page until all frames have loaded. - var self = this; window.setTimeout(function() { //Load the iframe content self.iframe.src = _url; @@ -225,6 +248,11 @@ var fw_browser = Class.extend({ // ignoer SecurityError: Blocked a frame ..., caused by different origin } } + + if(self.loadingDeferred) + { + self.loadingDeferred.resolve(); + } }, 1); } else @@ -257,6 +285,7 @@ var fw_browser = Class.extend({ req.sendRequest(); } } + return this.loadingDeferred.promise(); }, /** @@ -299,6 +328,11 @@ var fw_browser = Class.extend({ // Run the javascript code //console.log(content.js); $j(this.contentDiv).append(content.js); + + if(this.loadingDeferred) + { + this.loadingDeferred.resolve(); + } }, /** diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 4344359391..be0c78a690 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -2527,6 +2527,11 @@ body { background-position: center; float: right; } +.egw_fw_ui_tab_content > .loading { + background-image: url('../images/loading.gif'); + text-align: center; + line-height: 400px; +} /** * EGroupware: Stylite Pixelegg template * diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index dd32e2281c..f24b89d74b 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -2516,6 +2516,11 @@ body { background-position: center; float: right; } +.egw_fw_ui_tab_content > .loading { + background-image: url('../images/loading.gif'); + text-align: center; + line-height: 400px; +} /** * EGroupware: Stylite Pixelegg template * diff --git a/pixelegg/less/layout_ajaxLoader.less b/pixelegg/less/layout_ajaxLoader.less index 21ce6bb9fb..4c39bb2167 100644 --- a/pixelegg/less/layout_ajaxLoader.less +++ b/pixelegg/less/layout_ajaxLoader.less @@ -24,3 +24,9 @@ background-position: center; float: right; } + +.egw_fw_ui_tab_content > .loading { + background-image:url('../images/loading.gif'); + text-align: center; + line-height: 400px; +} \ No newline at end of file