[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>

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');
 	}
 
 	/**

typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js

+/**
+ * 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

typo3/sysext/backend/Resources/Public/JavaScript/clearcachemenu.js

-/**
- * 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();