typo3-typescript-sources 13.4.20

package/backend/action-button/deferred-action.ts

@@ -0,0 +1,41 @@
+/*
+ * 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!
+ */
+
+import { AbstractAction } from './abstract-action';
+import Icons from '../icons';
+
+/**
+ * Action used when an operation execution time is unknown.
+ */
+class DeferredAction extends AbstractAction {
+  protected override callback: () => Promise<void>;
+
+  public async execute(el: HTMLAnchorElement|HTMLButtonElement): Promise<void> {
+    el.dataset.actionLabel = el.innerText;
+    el.classList.add('disabled');
+
+    Icons.getIcon('spinner-circle', Icons.sizes.small).then((spinner: string): void => {
+      el.innerHTML = spinner;
+    });
+    return await this.executeCallback(el);
+  }
+
+  private async executeCallback(el: HTMLElement): Promise<void> {
+    return await Promise.resolve(this.callback()).finally(() => {
+      el.innerText = el.dataset.actionLabel;
+      el.classList.remove('disabled');
+    });
+  }
+}
+
+export default DeferredAction;

package/backend/action-button/immediate-action.ts

@@ -0,0 +1,31 @@
+/*
+ * 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!
+ */
+
+import { AbstractAction } from './abstract-action';
+
+/**
+ * Action used when an operation is executed immediately.
+ */
+class ImmediateAction extends AbstractAction {
+  protected override callback: () => void;
+
+  public execute(): Promise<void> {
+    return this.executeCallback();
+  }
+
+  private async executeCallback(): Promise<void> {
+    return Promise.resolve(this.callback());
+  }
+}
+
+export default ImmediateAction;

package/backend/action-dispatcher.ts

@@ -0,0 +1,104 @@
+/*
+ * 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!
+ */
+
+import InfoWindow from '@typo3/backend/info-window';
+import RegularEvent from '@typo3/core/event/regular-event';
+import shortcutMenu from '@typo3/backend/toolbar/shortcut-menu';
+import windowManager from '@typo3/backend/window-manager';
+import moduleMenuApp from '@typo3/backend/module-menu';
+import documentService from '@typo3/core/document-service';
+import Utility from '@typo3/backend/utility';
+
+declare type ActionDispatchArgument = unknown;
+
+/**
+ * Module: @typo3/backend/action-dispatcher
+ *
+ * @example
+ * <a class="btn btn-default" href="#"
+ *  data-dispatch-action="TYPO3.InfoWindow.showItem"
+ *  data-dispatch-args-list="tt_content,123"
+ *  ...
+ *  data-dispatch-args="[$quot;tt_content&quot;,123]"
+ *  ...
+ *  data-dispatch-disabled>
+ */
+class ActionDispatcher {
+  private delegates: {[key: string]: (...args: ActionDispatchArgument[]) => void} = {};
+
+  public constructor() {
+    this.createDelegates();
+    documentService.ready().then((): void => this.registerEvents());
+  }
+
+  private static resolveArguments(element: HTMLElement): null | string[] {
+    if (element.dataset.dispatchArgs) {
+      // `&quot;` is the only literal of a PHP `json_encode` that needs to be substituted
+      // all other payload values are expected to be serialized to unicode literals
+      const json = element.dataset.dispatchArgs.replace(/&quot;/g, '"');
+      const args = JSON.parse(json);
+      return args instanceof Array ? Utility.trimItems(args) : null;
+    } else if (element.dataset.dispatchArgsList) {
+      const args = element.dataset.dispatchArgsList.split(',');
+      return Utility.trimItems(args);
+    }
+    return null;
+  }
+
+
+
+  private createDelegates(): void {
+    this.delegates = {
+      'TYPO3.InfoWindow.showItem': InfoWindow.showItem.bind(null),
+      'TYPO3.ShortcutMenu.createShortcut': shortcutMenu.createShortcut.bind(shortcutMenu),
+      'TYPO3.WindowManager.localOpen': windowManager.localOpen.bind(windowManager),
+      'TYPO3.ModuleMenu.showModule': moduleMenuApp.App.showModule.bind(moduleMenuApp.App),
+    };
+  }
+
+  private registerEvents(): void {
+    new RegularEvent('click', this.handleClickEvent.bind(this))
+      .delegateTo(document, '[data-dispatch-action]');
+  }
+
+  private handleClickEvent(evt: Event, target: HTMLElement): void {
+    evt.preventDefault();
+    this.delegateTo(evt, target);
+  }
+
+  private delegateTo(evt: Event, target: HTMLElement): void {
+    const disabled = target.hasAttribute('data-dispatch-disabled');
+    if (disabled) {
+      return;
+    }
+    const action = target.dataset.dispatchAction;
+    let args: ActionDispatchArgument[] = ActionDispatcher.resolveArguments(target);
+    if (args instanceof Array) {
+      args = args.map((arg: string): ActionDispatchArgument => {
+        switch (arg) {
+          case '{$target}':
+            return target;
+          case '{$event}':
+            return evt;
+          default:
+            return arg;
+        }
+      });
+    }
+    if (this.delegates[action]) {
+      this.delegates[action].apply(null, args || []);
+    }
+  }
+}
+
+export default new ActionDispatcher();

package/backend/ajax-data-handler/message-interface.ts

@@ -0,0 +1,18 @@
+/*
+ * 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!
+ */
+
+export default interface MessageInterface {
+  title: string;
+  message: string;
+  severity: number;
+}

package/backend/ajax-data-handler/response-interface.ts

@@ -0,0 +1,20 @@
+/*
+ * 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!
+ */
+
+import type MessageInterface from './message-interface';
+
+export default interface ResponseInterface {
+  redirect: string;
+  messages: Array<MessageInterface>;
+  hasErrors: boolean;
+}

package/backend/ajax-data-handler.ts

@@ -0,0 +1,214 @@
+/*
+ * 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!
+ */
+
+import { BroadcastMessage } from '@typo3/backend/broadcast-message';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import DocumentService from '@typo3/core/document-service';
+import BroadcastService from '@typo3/backend/broadcast-service';
+import Icons from './icons';
+import Notification from './notification';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { sudoModeInterceptor } from '@typo3/backend/security/sudo-mode-interceptor';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type ResponseInterface from './ajax-data-handler/response-interface';
+
+enum Identifiers {
+  hide = 'button[data-datahandler-action="visibility"]',
+  icon = '.t3js-icon',
+}
+
+interface AfterProcessEventDict {
+  component: string;
+  action: string;
+  table: string;
+  uid: number;
+}
+
+/**
+ * Module: @typo3/backend/ajax-data-handler
+ * Javascript functions to work with AJAX and interacting with Datahandler
+ * through \TYPO3\CMS\Backend\Controller\SimpleDataHandlerController->processAjaxRequest (record_process route)
+ */
+class AjaxDataHandler {
+  constructor() {
+    DocumentService.ready().then((): void => {
+      this.initialize();
+    });
+  }
+
+  /**
+   * Refresh the page tree
+   */
+  private static refreshPageTree(): void {
+    top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+  }
+
+  /**
+   * AJAX call to record_process route (SimpleDataHandlerController->processAjaxRequest)
+   * returns a jQuery Promise to work with
+   *
+   * @param {string | object} params
+   * @returns {Promise<ResponseInterface>}
+   */
+  private static call(params: string | object): Promise<ResponseInterface> {
+    return (new AjaxRequest(TYPO3.settings.ajaxUrls.record_process))
+      .addMiddleware(sudoModeInterceptor)
+      .withQueryArguments(params)
+      .get()
+      .then(async (response: AjaxResponse): Promise<ResponseInterface> => {
+        return await response.resolve();
+      });
+  }
+
+  /**
+   * Generic function to call from the outside the script and validate directly showing errors
+   *
+   * @param {string | object} parameters
+   * @param {AfterProcessEventDict} eventDict Dictionary used as event detail. This is private API yet.
+   * @returns {Promise<ResponseInterface>}
+   */
+  public process(parameters: string | object, eventDict?: AfterProcessEventDict): Promise<ResponseInterface> {
+    const promise = AjaxDataHandler.call(parameters);
+    return promise.then((result: ResponseInterface): ResponseInterface => {
+      if (result.hasErrors) {
+        this.handleErrors(result);
+      }
+
+      if (eventDict) {
+        const payload = { ...eventDict, hasErrors: result.hasErrors };
+        const message = new BroadcastMessage(
+          'datahandler',
+          'process',
+          payload
+        );
+        BroadcastService.post(message);
+
+        const event = new CustomEvent('typo3:datahandler:process',{
+          detail: {
+            payload: payload
+          }
+        });
+        document.dispatchEvent(event);
+      }
+
+      return result;
+    });
+  }
+
+  // @todo: Many extensions rely on this behavior but it's misplaced in AjaxDataHandler. Move into recordlist.ts and deprecate in v11.
+  private initialize(): void {
+    // HIDE/UNHIDE: click events for all action icons to hide/unhide
+    new RegularEvent('click', (e: Event, element: HTMLButtonElement): void => {
+      e.preventDefault();
+      this.handleVisibilityToggle(element);
+    }).delegateTo(document, Identifiers.hide);
+  }
+
+  private handleVisibilityToggle(element: HTMLButtonElement): void
+  {
+    const rowElement = element.closest('tr[data-uid]');
+
+    // Show spinner
+    const iconElement = element.querySelector(Identifiers.icon);
+    this._showSpinnerIcon(iconElement);
+
+    const isVisible = element.dataset.datahandlerStatus === 'visible';
+    // Get Settings from element
+    const settings = {
+      table: element.dataset.datahandlerTable,
+      uid: element.dataset.datahandlerUid,
+      field: element.dataset.datahandlerField,
+      visible: isVisible,
+      overlayIcon: isVisible
+        ? element.dataset.datahandlerRecordHiddenOverlayIcon ?? 'overlay-hidden'
+        : element.dataset.datahandlerRecordVisibleOverlayIcon ?? null
+    };
+
+    const params = {
+      data: {
+        [settings.table]: {
+          [settings.uid]: {
+            [settings.field]: settings.visible
+              ? element.dataset.datahandlerHiddenValue
+              : element.dataset.datahandlerVisibleValue
+          }
+        }
+      }
+    };
+
+    // Submit Data
+    this.process(params).then((result: ResponseInterface): void => {
+      if (!result.hasErrors) {
+        // Inverse current state
+        settings.visible = !(settings.visible);
+        element.setAttribute('data-datahandler-status', settings.visible ? 'visible' : 'hidden');
+
+        const elementLabel = settings.visible
+          ? element.dataset.datahandlerVisibleLabel
+          : element.dataset.datahandlerHiddenLabel;
+        element.setAttribute('title', elementLabel);
+
+        const elementIconIdentifier = settings.visible
+          ? element.dataset.datahandlerVisibleIcon
+          : element.dataset.datahandlerHiddenIcon;
+        const iconElement = element.querySelector(Identifiers.icon);
+        Icons.getIcon(elementIconIdentifier, Icons.sizes.small).then((icon: string): void => {
+          iconElement.replaceWith(document.createRange().createContextualFragment(icon));
+        });
+
+        // Set overlay for the record icon
+        const recordIcon = rowElement.querySelector('.col-icon ' + Identifiers.icon);
+        recordIcon.querySelector('.icon-overlay')?.remove();
+        Icons.getIcon('miscellaneous-placeholder', Icons.sizes.small, settings.overlayIcon).then((icon: string): void => {
+          const iconFragment = document.createRange().createContextualFragment(icon);
+          recordIcon.append(iconFragment.querySelector('.icon-overlay'));
+        });
+
+        // Animate row
+        const animationEvent = new RegularEvent('animationend', (): void => {
+          rowElement.classList.remove('record-pulse');
+          animationEvent.release();
+        });
+        animationEvent.bindTo(rowElement);
+        rowElement.classList.add('record-pulse');
+
+        // Refresh Pagetree
+        if (settings.table === 'pages') {
+          AjaxDataHandler.refreshPageTree();
+        }
+      }
+    });
+  }
+
+  /**
+   * Handle the errors from result object
+   *
+   * @param {Object} result
+   */
+  private handleErrors(result: ResponseInterface): void {
+    for (const message of result.messages) {
+      Notification.error(message.title, message.message);
+    }
+  }
+
+  /**
+   * Replace the given icon with a spinner icon
+   */
+  private _showSpinnerIcon(iconElement: Element): void {
+    Icons.getIcon('spinner-circle', Icons.sizes.small).then((icon: string): void => {
+      iconElement.replaceWith(document.createRange().createContextualFragment(icon));
+    });
+  }
+}
+
+export default new AjaxDataHandler();

package/backend/backend-exception.ts

@@ -0,0 +1,22 @@
+/*
+ * 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!
+ */
+
+export class BackendException {
+  public readonly message: string;
+  public readonly code: number;
+
+  constructor(message: string = '', code: number = 0) {
+    this.message = message;
+    this.code = code;
+  }
+}

package/backend/broadcast-message.ts

@@ -0,0 +1,50 @@
+/*
+ * 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!
+ */
+
+export type BroadcastEvent<Payload extends object> = CustomEvent<{ payload: Payload }>;
+
+/**
+ * @module @typo3/backend/broadcast-message
+ */
+export class BroadcastMessage<Payload = unknown> {
+  readonly componentName: string;
+  readonly eventName: string;
+  readonly payload: Payload;
+
+  constructor(componentName: string, eventName: string, payload: Payload) {
+    if (!componentName || !eventName) {
+      throw new Error('Properties componentName and eventName have to be defined');
+    }
+    this.componentName = componentName;
+    this.eventName = eventName;
+    this.payload = payload || ({} as Payload);
+  }
+
+  public static fromData(data: any): BroadcastMessage {
+    const payload = Object.assign({}, data);
+    delete payload.componentName;
+    delete payload.eventName;
+    return new BroadcastMessage(
+      data.componentName,
+      data.eventName,
+      payload,
+    );
+  }
+
+  public createCustomEvent(scope: string = 'typo3'): CustomEvent {
+    return new CustomEvent(
+      [scope, this.componentName, this.eventName].join(':'),
+      { detail: this.payload },
+    );
+  }
+}

package/backend/broadcast-service.ts

@@ -0,0 +1,52 @@
+/*
+ * 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!
+ */
+
+import { BroadcastMessage } from '@typo3/backend/broadcast-message';
+import { MessageUtility } from '@typo3/backend/utility/message-utility';
+
+/**
+ * @module @typo3/backend/broadcast-service
+ */
+class BroadcastService {
+  private readonly channel: BroadcastChannel;
+
+  public constructor() {
+    this.channel = new BroadcastChannel('typo3');
+  }
+
+  public get isListening(): boolean {
+    return typeof this.channel.onmessage === 'function';
+  }
+
+  private static onMessage(evt: MessageEvent): void {
+    if (!MessageUtility.verifyOrigin(evt.origin)) {
+      throw 'Denied message sent by ' + evt.origin;
+    }
+    const message = BroadcastMessage.fromData(evt.data);
+    document.dispatchEvent(message.createCustomEvent('typo3'));
+  }
+
+  public listen(): void {
+    if (this.isListening) {
+      return;
+    }
+    // once `this` becomes necessary, use `.bind(this)`
+    this.channel.onmessage = BroadcastService.onMessage;
+  }
+
+  public post(message: BroadcastMessage): void {
+    this.channel.postMessage(message);
+  }
+}
+
+export default new BroadcastService();

package/backend/browse-database.ts

@@ -0,0 +1,38 @@
+/*
+ * 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!
+ */
+
+import ElementBrowser from './element-browser';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/backend/browse-database
+ * Database record selection
+ * @exports @typo3/backend/browse-database
+ */
+class BrowseDatabase {
+  constructor() {
+    new RegularEvent('click', (evt: MouseEvent, targetEl: HTMLElement): void => {
+      evt.preventDefault();
+      const data = targetEl.closest('span').dataset;
+      ElementBrowser.insertElement(
+        data.table,
+        data.uid,
+        data.title,
+        '',
+        parseInt(targetEl.dataset.close || '0', 10) === 1,
+      );
+    }).delegateTo(document, '[data-close]');
+  }
+}
+
+export default new BrowseDatabase();

package/backend/clear-cache.ts

@@ -0,0 +1,88 @@
+/*
+ * 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!
+ */
+
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Notification from '@typo3/backend/notification';
+import Icons from '@typo3/backend/icons';
+import RegularEvent from '@typo3/core/event/regular-event';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+
+enum Identifiers {
+  clearCache = '.t3js-clear-page-cache',
+  icon = '.t3js-icon',
+}
+
+/**
+ * Module: @typo3/backend/clear-cache
+ */
+class ClearCache {
+  constructor() {
+    this.registerClickHandler();
+  }
+
+  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 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;
+  }
+
+  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', 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);
+    }
+  }
+}
+
+export default new ClearCache();