From 79ba2d03c9ac74e5451cf6f2205ad1f9fd344fc7 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 19 May 2015 18:31:12 +0200 Subject: [PATCH] Added AjaxStatus and using Ajax.api --- wcfsetup/install/files/js/WCF.js | 61 ++------------- wcfsetup/install/files/js/WoltLab/WCF/Ajax.js | 10 +-- .../files/js/WoltLab/WCF/Ajax/Status.js | 77 +++++++++++++++++++ .../WoltLab/WCF/Controller/Notice/Dismiss.js | 5 +- .../js/WoltLab/WCF/Controller/Popover.js | 2 +- .../js/WoltLab/WCF/Controller/Sitemap.js | 8 +- .../WoltLab/WCF/Controller/Style/Changer.js | 8 +- 7 files changed, 99 insertions(+), 72 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ajax/Status.js diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index ce88b23550..eec52b467b 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -2068,71 +2068,26 @@ WCF.PeriodicalExecuter = Class.extend({ /** * Handler for loading overlays + * + * @deprecated 2.2 - Please use WoltLab/WCF/Ajax/Status */ WCF.LoadingOverlayHandler = { - /** - * count of active loading-requests - * @var integer - */ - _activeRequests: 0, - - /** - * loading overlay - * @var jQuery - */ - _loadingOverlay: null, - - /** - * WCF.PeriodicalExecuter instance - * @var WCF.PeriodicalExecuter - */ - _pending: null, - /** * Adds one loading-request and shows the loading overlay if nessercery */ show: function() { - if (this._loadingOverlay === null) { // create loading overlay on first run - this._loadingOverlay = $('').appendTo($('body')); - - // fix position - var $width = this._loadingOverlay.outerWidth(); - if ($width < 70) $width = 70; - this._loadingOverlay.css({ - marginLeft: Math.ceil(-1 * $width / 2), - width: $width - }).hide(); - } - - this._activeRequests++; - if (this._activeRequests == 1) { - if (this._pending === null) { - var self = this; - this._pending = new WCF.PeriodicalExecuter(function(pe) { - if (self._activeRequests) { - self._loadingOverlay.stop(true, true).fadeIn(100); - } - - pe.stop(); - self._pending = null; - }, 250); - } - } + require(['WoltLab/WCF/Ajax/Status'], function(AjaxStatus) { + AjaxStatus.show(); + }); }, /** * Removes one loading-request and hides loading overlay if there're no more pending requests */ hide: function() { - this._activeRequests--; - if (this._activeRequests == 0) { - if (this._pending !== null) { - this._pending.stop(); - this._pending = null; - } - - this._loadingOverlay.stop(true, true).fadeOut(100); - } + require(['WoltLab/WCF/Ajax/Status'], function(AjaxStatus) { + AjaxStatus.hide(); + }); }, /** diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ajax.js b/wcfsetup/install/files/js/WoltLab/WCF/Ajax.js index ea015aa893..ffb37e5865 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ajax.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ajax.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLab/WCF/Ajax */ -define(['Core', 'Language', 'DOM/Util', 'UI/Dialog'], function(Core, Language, DOMUtil, UIDialog) { +define(['Core', 'Language', 'DOM/Util', 'UI/Dialog', 'WoltLab/WCF/Ajax/Status'], function(Core, Language, DOMUtil, UIDialog, AjaxStatus) { "use strict"; var _didInit = false; @@ -66,7 +66,7 @@ define(['Core', 'Language', 'DOM/Util', 'UI/Dialog'], function(Core, Language, D } if (!this._options.silent) { - WCF.LoadingOverlayHandler.show(); + AjaxStatus.show(); } if (this._xhr instanceof XMLHttpRequest) { @@ -118,7 +118,7 @@ define(['Core', 'Language', 'DOM/Util', 'UI/Dialog'], function(Core, Language, D this._previousXhr = null; if (!this._options.silent) { - WCF.LoadingOverlayHandler.hide(); + AjaxStatus.hide(); } }, @@ -144,7 +144,7 @@ define(['Core', 'Language', 'DOM/Util', 'UI/Dialog'], function(Core, Language, D */ _success: function(xhr) { if (!this._options.silent) { - WCF.LoadingOverlayHandler.hide(); + AjaxStatus.hide(); } if (typeof this._options.success === 'function') { @@ -174,7 +174,7 @@ define(['Core', 'Language', 'DOM/Util', 'UI/Dialog'], function(Core, Language, D } if (!this._options.silent) { - WCF.LoadingOverlayHandler.hide(); + AjaxStatus.hide(); } var data = null; diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ajax/Status.js b/wcfsetup/install/files/js/WoltLab/WCF/Ajax/Status.js new file mode 100644 index 0000000000..7eedcc80ac --- /dev/null +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ajax/Status.js @@ -0,0 +1,77 @@ +/** + * Provides the AJAX status overlay. + * + * @author Alexander Ebert + * @copyright 2001-2015 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLab/WCF/Ajax/Status + */ +define(['Language'], function(Language) { + "use strict"; + + var _activeRequests = 0; + var _overlay = null; + var _timeoutShow = null; + + /** + * @constructor + */ + function AjaxStatus() {} + AjaxStatus.prototype = { + /** + * Initializes the status overlay on first usage. + */ + _init: function() { + _overlay = document.createElement('div'); + _overlay.classList.add('spinner'); + + var icon = document.createElement('span'); + icon.className = 'icon icon48 fa-spinner'; + _overlay.appendChild(icon); + + var title = document.createElement('span'); + title.textContent = Language.get('wcf.global.loading'); + _overlay.appendChild(title); + + document.body.appendChild(_overlay); + }, + + /** + * Shows the loading overlay. + */ + show: function() { + if (_overlay === null) { + this._init(); + } + + _activeRequests++; + + if (_timeoutShow === null) { + _timeoutShow = window.setTimeout(function() { + if (_activeRequests) { + _overlay.classList.add('active'); + } + + _timeoutShow = null; + }, 250); + } + }, + + /** + * Hides the loading overlay. + */ + hide: function() { + _activeRequests--; + + if (_activeRequests === 0) { + if (_timeoutShow !== null) { + window.clearTimeout(_timeoutShow); + } + + _overlay.classList.remove('active'); + } + } + }; + + return new AjaxStatus(); +}); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Notice/Dismiss.js b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Notice/Dismiss.js index 7df379022f..757db6e246 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Notice/Dismiss.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Notice/Dismiss.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLab/WCF/Controller/Notice/Dismiss */ -define([], function() { +define(['Ajax'], function(Ajax) { "use strict"; /** @@ -34,8 +34,7 @@ define([], function() { _click: function(event) { var button = event.currentTarget; - new WCF.Action.Proxy({ - autoSend: true, + Ajax.api({ data: { actionName: 'dismiss', className: 'wcf\\data\\notice\\NoticeAction', diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Popover.js b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Popover.js index 80a13d0c24..5793d0b928 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Popover.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Popover.js @@ -109,7 +109,7 @@ define(['Dictionary', 'DOM/Util', 'UI/Alignment'], function(Dictionary, DOMUtil, * className: 'fooLink', * identifier: 'com.example.bar.foo', * loadCallback: function(objectId, popover) { - * // request data for object id (e.g. via WCF.Action.Proxy) + * // request data for object id (e.g. via Ajax) * * // then call this to set the content * popover.setContent('com.example.bar.foo', objectId, htmlTemplateString); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Sitemap.js b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Sitemap.js index e2e81d042f..4a4197ae0e 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Sitemap.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Sitemap.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLab/WCF/Controller/Sitemap */ -define(['EventHandler', 'Language', 'DOM/Util', 'UI/Dialog', 'UI/TabMenu'], function(EventHandler, Language, DOMUtil, UIDialog, UITabMenu) { +define(['Ajax', 'EventHandler', 'Language', 'DOM/Util', 'UI/Dialog', 'UI/TabMenu'], function(Ajax, EventHandler, Language, DOMUtil, UIDialog, UITabMenu) { "use strict"; var _cache = []; @@ -33,8 +33,7 @@ define(['EventHandler', 'Language', 'DOM/Util', 'UI/Dialog', 'UI/TabMenu'], func event.preventDefault(); if (UIDialog.getDialog('sitemapDialog') === undefined) { - new WCF.Action.Proxy({ - autoSend: true, + Ajax.api({ data: { actionName: 'getSitemap', className: 'wcf\\data\\sitemap\\SitemapAction' @@ -70,8 +69,7 @@ define(['EventHandler', 'Language', 'DOM/Util', 'UI/Dialog', 'UI/TabMenu'], func var name = tabData.active.getAttribute('data-name').replace(/^sitemap_/, ''); if (_cache.indexOf(name) === -1) { - new WCF.Action.Proxy({ - autoSend: true, + Ajax.api({ data: { actionName: 'getSitemap', className: 'wcf\\data\\sitemap\\SitemapAction', diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js index 5841090083..d966ea3ef3 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Controller/Style/Changer.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLab/WCF/Controller/Style/Changer */ -define(['Language', 'UI/Dialog'], function(Language, UIDialog) { +define(['Ajax', 'Language', 'UI/Dialog'], function(Ajax, Language, UIDialog) { "use strict"; /** @@ -44,8 +44,7 @@ define(['Language', 'UI/Dialog'], function(Language, UIDialog) { event.preventDefault(); if (UIDialog.getDialog('styleChanger') === undefined) { - new WCF.Action.Proxy({ - autoSend: true, + Ajax.api({ data: { actionName: 'getStyleChooser', className: 'wcf\\data\\style\\StyleAction' @@ -79,8 +78,7 @@ define(['Language', 'UI/Dialog'], function(Language, UIDialog) { _click: function(event) { event.preventDefault(); - new WCF.Action.Proxy({ - autoSend: true, + Ajax.api({ data: { actionName: 'changeStyle', className: 'wcf\\data\\style\\StyleAction', -- 2.20.1