From 7feb33bad76763eee4192b08fdfdae214431530a Mon Sep 17 00:00:00 2001
From: Wouter Wolters <typo3@wouterwolters.nl>
Date: Sun, 9 Nov 2014 20:50:22 +0100
Subject: [PATCH] [TASK] Migrate Toolbar JS of ClearCache to jQuery
This patch refactors the Toolbar code for clearing
caches to use RequireJS and jQuery
over Prototype.js.
Resolves: #62798
Releases: master
Change-Id: Ice57e1bf5d54e002eba631b0fa22896a32ceb99e
Reviewed-on: http://review.typo3.org/33929
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
---
.../Classes/Toolbar/ClearCacheToolbarItem.php | 2 +-
.../JavaScript/Toolbar/ClearCacheMenu.js | 79 +++++++++++++++++++
.../Public/JavaScript/clearcachemenu.js | 76 ------------------
3 files changed, 80 insertions(+), 77 deletions(-)
create mode 100644 typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
delete mode 100644 typo3/sysext/backend/Resources/Public/JavaScript/clearcachemenu.js
diff --git a/typo3/sysext/backend/Classes/Toolbar/ClearCacheToolbarItem.php b/typo3/sysext/backend/Classes/Toolbar/ClearCacheToolbarItem.php
index f25a65f7f023..fe12f859b2d7 100644
--- a/typo3/sysext/backend/Classes/Toolbar/ClearCacheToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Toolbar/ClearCacheToolbarItem.php
@@ -155,7 +155,7 @@ class ClearCacheToolbarItem implements ToolbarItemInterface {
* @return void
*/
protected function addJavascriptToBackend() {
- $this->backendReference->addJavascriptFile('sysext/backend/Resources/Public/JavaScript/clearcachemenu.js');
+ $this->backendReference->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Backend/Toolbar/ClearCacheMenu');
}
/**
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
new file mode 100644
index 000000000000..24bf19d9d950
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
@@ -0,0 +1,79 @@
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+/**
+ * main functionality for clearing caches via the top bar
+ * reloading the clear cache icon
+ */
+define('TYPO3/CMS/Backend/Toolbar/ClearCacheMenu', ['jquery'], function($) {
+
+ var ClearCacheMenu = {
+ $spinnerElement: $('<span>', {
+ 'class': 't3-icon fa fa-circle-o-notch spinner fa-spin'
+ }),
+ options: {
+ containerSelector: '#clear-cache-actions-menu',
+ menuItemSelector: '.dropdown-menu li a',
+ toolbarIconSelector: '.dropdown-toggle span.t3-icon'
+ }
+ };
+
+ /**
+ * Registers listeners for the icons inside the dropdown to trigger
+ * the clear cache call
+ */
+ ClearCacheMenu.initializeEvents = function() {
+ $(ClearCacheMenu.options.menuItemSelector, ClearCacheMenu.options.containerSelector).on('click', function(evt) {
+ evt.preventDefault();
+ var ajaxUrl = $(this).attr('href');
+ if (ajaxUrl) {
+ ClearCacheMenu.clearCache(ajaxUrl);
+ }
+ });
+ };
+
+ /**
+ * calls TYPO3 to clear a cache, then changes the topbar icon
+ * to a spinner. Once done, restores the original topbar icon
+ *
+ * @param ajaxUrl the URL to load
+ */
+ ClearCacheMenu.clearCache = function(ajaxUrl) {
+ // Close clear cache menu
+ $(ClearCacheMenu.options.containerSelector).removeClass('open');
+
+ var $toolbarItemIcon = $(ClearCacheMenu.options.toolbarIconSelector, ClearCacheMenu.options.containerSelector);
+
+ var $spinnerIcon = ClearCacheMenu.$spinnerElement.clone();
+ var $existingIcon = $toolbarItemIcon.replaceWith($spinnerIcon);
+ $.ajax({
+ url: ajaxUrl,
+ type: 'post',
+ cache: false,
+ success: function() {
+ $spinnerIcon.replaceWith($existingIcon);
+ }
+ });
+ };
+
+ /**
+ * initialize and return the ClearCacheMenu object
+ */
+ return function() {
+ $(document).ready(function() {
+ ClearCacheMenu.initializeEvents();
+ });
+
+ TYPO3.ClearCacheMenu = ClearCacheMenu;
+ return ClearCacheMenu;
+ }();
+});
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/clearcachemenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/clearcachemenu.js
deleted file mode 100644
index 3988e6320ec1..000000000000
--- a/typo3/sysext/backend/Resources/Public/JavaScript/clearcachemenu.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-/**
- * class to handle the clear cache menu
- */
-var ClearCacheMenu = Class.create({
-
- /**
- * registers for resize event listener and executes on DOM ready
- */
- initialize: function() {
-
- Ext.onReady(function() {
- var self = this;
-
- this.toolbarItemIcon = $$('#clear-cache-actions-menu .dropdown-toggle span.t3-icon')[0];
-
- // observe all clicks on clear cache actions in the menu
- $$('#clear-cache-actions-menu li a').each(function(element) {
- $(element).onclick = function(event) {
- event = event || window.event;
- self.clearCache.call(self, event);
- return false;
- };
- });
- }, this);
- },
-
- toggleMenu: function(event) {
-
- },
-
- /**
- * calls the actual clear cache URL using an asynchronious HTTP request
- *
- * @param Event prototype event object
- */
- clearCache: function(event) {
- var toolbarItemIcon = $$('#clear-cache-actions-menu .dropdown-toggle span.t3-icon')[0];
- var url = '';
- var clickedElement = Event.element(event);
-
- // activate the spinner
- var parent = Element.up(toolbarItemIcon);
- var spinner = new Element('span').addClassName('t3-icon fa fa-spinner fa-spin');
- var oldIcon = toolbarItemIcon.replace(spinner);
-
- if (clickedElement.tagName === 'SPAN') {
- link = clickedElement.up('a');
- } else {
- link = clickedElement;
- }
-
- if (link.href) {
- var call = new Ajax.Request(link.href, {
- 'method': 'get',
- 'onComplete': function(result) {
- spinner.replace(oldIcon);
- }.bind(this)
- });
- }
- }
-});
-
-var TYPO3BackendClearCacheMenu = new ClearCacheMenu();
--
GitLab