From 586174ddbac15507cd2c115794cd53fa6a2d8d31 Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Fri, 6 Mar 2020 13:15:12 +0100
Subject: [PATCH] [TASK] Use Core API in ClearCache module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This patch replaces jQuery in the ClearCache module used in RecordList
with Core APIs in regards of AJAX and event handling.
Resolves: #90663
Releases: master
Change-Id: I526a2136462c3cd494a8d3191b87f64257114b1a
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63562
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Roland Golla <rolandgolla@gmail.com>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Daniel Goerz <daniel.goerz@posteo.de>
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>
---
.../Resources/Public/TypeScript/ClearCache.ts | 97 ++++++++++---------
.../Resources/Public/JavaScript/ClearCache.js | 2 +-
2 files changed, 52 insertions(+), 47 deletions(-)
diff --git a/Build/Sources/TypeScript/recordlist/Resources/Public/TypeScript/ClearCache.ts b/Build/Sources/TypeScript/recordlist/Resources/Public/TypeScript/ClearCache.ts
index a296abff1cb7..640319dd839c 100644
--- a/Build/Sources/TypeScript/recordlist/Resources/Public/TypeScript/ClearCache.ts
+++ b/Build/Sources/TypeScript/recordlist/Resources/Public/TypeScript/ClearCache.ts
@@ -11,9 +11,11 @@
* The TYPO3 project - inspiring people to share!
*/
-import * as $ from 'jquery';
+import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import Notification = require('TYPO3/CMS/Backend/Notification');
import Icons = require('TYPO3/CMS/Backend/Icons');
+import RegularEvent = require('TYPO3/CMS/Core/Event/RegularEvent');
+import AjaxRequest = require('TYPO3/CMS/Core/Ajax/AjaxRequest');
enum Identifiers {
clearCache = '.t3js-clear-page-cache',
@@ -24,59 +26,62 @@ enum Identifiers {
* Module: TYPO3/CMS/Recordlist/ClearCache
*/
class ClearCache {
- constructor() {
- $(() => {
- this.registerClickHandler();
- });
- }
-
- private registerClickHandler(): void {
- $(Identifiers.clearCache + ':not([disabled])').on('click', (event: JQueryEventObject): void => {
- event.preventDefault();
- const $me = $(event.currentTarget);
- const id = parseInt($me.data('id'), 10);
- const $iconElement = $me.find(Identifiers.icon);
-
- $me.prop('disabled', true).addClass('disabled');
- Icons.getIcon('spinner-circle-dark', Icons.sizes.small, null, 'disabled').done((icon: string): void => {
- $iconElement.replaceWith(icon);
- });
-
- this.sendClearCacheRequest(id).always((): void => {
- Icons.getIcon('actions-system-cache-clear', Icons.sizes.small).done((icon: string): void => {
- $me.find(Identifiers.icon).replaceWith(icon);
- });
- $me.prop('disabled', false).removeClass('disabled');
- });
- });
+ private static setDisabled(element: HTMLButtonElement, isDisabled: boolean): void {
+ element.disabled = isDisabled;
+ element.classList.toggle('disabled', isDisabled);
}
/**
* Send an AJAX request to clear a page's cache
*
* @param {number} pageId
+ * @return Promise<AjaxResponse>
*/
- private sendClearCacheRequest(pageId: number): JQueryXHR {
- return $.ajax({
- url: TYPO3.settings.ajaxUrls.web_list_clearpagecache,
- data: {
- id: pageId,
- },
- cache: false,
- dataType: 'json',
- success: (data: any): void => {
- if (data.success === true) {
- Notification.success(data.title, data.message, 1);
- } else {
- Notification.error(data.title, data.message, 1);
- }
- },
- error: (): void => {
- Notification.error(
- 'Clearing page caches went wrong on the server side.',
- );
- },
+ private static sendClearCacheRequest(pageId: number): Promise<AjaxResponse> {
+ const request = new AjaxRequest(TYPO3.settings.ajaxUrls.web_list_clearpagecache).withQueryArguments({id: pageId}).get({cache: 'no-cache'});
+ request.then(async (response: AjaxResponse): Promise<void> => {
+ const data = await response.resolve();
+ if (data.success === true) {
+ Notification.success(data.title, data.message, 1);
+ } else {
+ Notification.error(data.title, data.message, 1);
+ }
+ }, (): void => {
+ Notification.error(
+ 'Clearing page caches went wrong on the server side.',
+ );
});
+
+ return request;
+ }
+
+ constructor() {
+ this.registerClickHandler();
+ }
+
+ private registerClickHandler(): void {
+ const trigger = document.querySelector(`${Identifiers.clearCache}:not([disabled])`);
+ if (trigger !== null) {
+ new RegularEvent('click', (e: Event): void => {
+ e.preventDefault();
+
+ // The action trigger behaves like a button
+ const me = e.currentTarget as HTMLButtonElement;
+ const id = parseInt(me.dataset.id, 10);
+ ClearCache.setDisabled(me, true);
+
+ Icons.getIcon('spinner-circle-dark', Icons.sizes.small, null, 'disabled').then((icon: string): void => {
+ me.querySelector(Identifiers.icon).outerHTML = icon;
+ });
+
+ ClearCache.sendClearCacheRequest(id).finally((): void => {
+ Icons.getIcon('actions-system-cache-clear', Icons.sizes.small).then((icon: string): void => {
+ me.querySelector(Identifiers.icon).outerHTML = icon;
+ });
+ ClearCache.setDisabled(me, false);
+ })
+ }).bindTo(trigger);
+ }
}
}
diff --git a/typo3/sysext/recordlist/Resources/Public/JavaScript/ClearCache.js b/typo3/sysext/recordlist/Resources/Public/JavaScript/ClearCache.js
index d2ff0f089758..a2fc54bc4d98 100644
--- a/typo3/sysext/recordlist/Resources/Public/JavaScript/ClearCache.js
+++ b/typo3/sysext/recordlist/Resources/Public/JavaScript/ClearCache.js
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-define(["require","exports","jquery","TYPO3/CMS/Backend/Notification","TYPO3/CMS/Backend/Icons"],(function(e,s,a,r,c){"use strict";var t;!function(e){e.clearCache=".t3js-clear-page-cache",e.icon=".t3js-icon"}(t||(t={}));return new class{constructor(){a(()=>{this.registerClickHandler()})}registerClickHandler(){a(t.clearCache+":not([disabled])").on("click",e=>{e.preventDefault();const s=a(e.currentTarget),r=parseInt(s.data("id"),10),n=s.find(t.icon);s.prop("disabled",!0).addClass("disabled"),c.getIcon("spinner-circle-dark",c.sizes.small,null,"disabled").done(e=>{n.replaceWith(e)}),this.sendClearCacheRequest(r).always(()=>{c.getIcon("actions-system-cache-clear",c.sizes.small).done(e=>{s.find(t.icon).replaceWith(e)}),s.prop("disabled",!1).removeClass("disabled")})})}sendClearCacheRequest(e){return a.ajax({url:TYPO3.settings.ajaxUrls.web_list_clearpagecache,data:{id:e},cache:!1,dataType:"json",success:e=>{!0===e.success?r.success(e.title,e.message,1):r.error(e.title,e.message,1)},error:()=>{r.error("Clearing page caches went wrong on the server side.")}})}}}));
\ No newline at end of file
+define(["require","exports","TYPO3/CMS/Backend/Notification","TYPO3/CMS/Backend/Icons","TYPO3/CMS/Core/Event/RegularEvent","TYPO3/CMS/Core/Ajax/AjaxRequest"],(function(e,s,t,c,a,r){"use strict";var n;!function(e){e.clearCache=".t3js-clear-page-cache",e.icon=".t3js-icon"}(n||(n={}));class i{static setDisabled(e,s){e.disabled=s,e.classList.toggle("disabled",s)}static sendClearCacheRequest(e){const s=new r(TYPO3.settings.ajaxUrls.web_list_clearpagecache).withQueryArguments({id:e}).get({cache:"no-cache"});return s.then(async e=>{const s=await e.resolve();!0===s.success?t.success(s.title,s.message,1):t.error(s.title,s.message,1)},()=>{t.error("Clearing page caches went wrong on the server side.")}),s}constructor(){this.registerClickHandler()}registerClickHandler(){const e=document.querySelector(`${n.clearCache}:not([disabled])`);null!==e&&new a("click",e=>{e.preventDefault();const s=e.currentTarget,t=parseInt(s.dataset.id,10);i.setDisabled(s,!0),c.getIcon("spinner-circle-dark",c.sizes.small,null,"disabled").then(e=>{s.querySelector(n.icon).outerHTML=e}),i.sendClearCacheRequest(t).finally(()=>{c.getIcon("actions-system-cache-clear",c.sizes.small).then(e=>{s.querySelector(n.icon).outerHTML=e}),i.setDisabled(s,!1)})}).bindTo(e)}}return new i}));
\ No newline at end of file
--
GitLab