typo3-typescript-sources 13.4.20

package/backend/pagetsconfig/pagetsconfig-includes.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 DocumentService from '@typo3/core/document-service';
+import { default as Modal } from '@typo3/backend/modal';
+import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { html, type TemplateResult } from 'lit';
+import { until } from 'lit/directives/until';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type { JavaScriptItemPayload } from '@typo3/core/java-script-item-processor';
+
+/**
+ * @todo: This could be code-de-duplicated with ext:tstemplate template-analyzer.ts,
+ *        by making "Show t3editor code in a modal" a more general solution.
+ *        Main trigger is t3js-pagetsconfig-includes-modal vs. t3js-typoscript-analyzer-modal
+ */
+class PageTsConfigIncludes {
+  constructor() {
+    this.registerEventListeners();
+  }
+
+  private async registerEventListeners(): Promise<void> {
+    await DocumentService.ready();
+
+    document.querySelectorAll('.t3js-pagetsconfig-includes-modal').forEach((link: HTMLAnchorElement): void => {
+      link.addEventListener('click', (e: Event): void => {
+        e.preventDefault();
+
+        const type = Modal.types.default;
+        const title = link.dataset.modalTitle || link.textContent.trim();
+        const url = link.getAttribute('href');
+        const size = Modal.sizes.large;
+        const content = html`${until(
+          this.fetchModalContent(url),
+          html`<div class="modal-loading"><typo3-backend-spinner size="large"></typo3-backend-spinner></div>`
+        )}`;
+        Modal.advanced({ type, title, size, content });
+      });
+    });
+  }
+
+  private async fetchModalContent(url: string): Promise<TemplateResult> {
+    // no `await` purpose (webcomponents initialize lazily)
+    topLevelModuleImport('@typo3/backend/code-editor/element/code-mirror-element.js');
+
+    const response: AjaxResponse = await (new AjaxRequest(url)).get();
+    const source: string = await response.resolve();
+
+    const mode: JavaScriptItemPayload = {
+      name: '@typo3/backend/code-editor/language/typoscript.js',
+      flags: 2 /* FLAG_USE_IMPORTMAP */,
+      exportName: 'typoscript',
+      items: [
+        { type: 'invoke', args: [] }
+      ]
+    };
+
+    return html`
+      <typo3-t3editor-codemirror .mode="${mode}" nolazyload readonly class="flex-grow-1 mh-100">
+        <textarea readonly disabled class="form-control">${source}</textarea>
+      </typo3-t3editor-codemirror>
+    `;
+  }
+}
+
+export default new PageTsConfigIncludes();

package/backend/popover.ts

@@ -0,0 +1,165 @@
+/*
+ * 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 { Popover as BootstrapPopover } from 'bootstrap';
+
+/**
+ * Module: @typo3/backend/popover
+ * API for popover windows powered by Twitter Bootstrap.
+ * @exports @typo3/backend/popover
+ */
+class Popover {
+
+  /**
+   * Default selector string.
+   *
+   * @return {string}
+   */
+  private readonly DEFAULT_SELECTOR: string = '[data-bs-toggle="popover"]';
+
+  constructor() {
+    this.initialize();
+  }
+
+  /**
+   * Initialize
+   */
+  public initialize(selector?: string): void {
+    selector = selector || this.DEFAULT_SELECTOR;
+    document.querySelectorAll(selector).forEach((element: HTMLElement): void => {
+      this.applyTitleIfAvailable(element);
+      new BootstrapPopover(element);
+    });
+  }
+
+  // noinspection JSMethodCanBeStatic
+  /**
+   * Popover wrapper function
+   */
+  public popover(element: NodeListOf<HTMLElement> | HTMLElement) {
+    this.toIterable(element).forEach((element: HTMLElement): void => {
+      this.applyTitleIfAvailable(element);
+      new BootstrapPopover(element);
+    });
+  }
+
+  // noinspection JSMethodCanBeStatic
+  /**
+   * Set popover options on $element
+   */
+  public setOptions(element: HTMLElement, options?: BootstrapPopover.Options): void {
+    options = options || <BootstrapPopover.Options>{};
+    const title: string = (options.title as string) || element.dataset.title || element.dataset.bsTitle || '';
+    const content: string = (options.content as string) || element.dataset.bsContent || '';
+    element.dataset.bsTitle = title;
+    element.dataset.bsOriginalTitle = title;
+    element.dataset.bsContent = content;
+    element.dataset.bsPlacement = 'auto';
+
+    delete options.title;
+    delete options.content;
+
+    const popover = BootstrapPopover.getInstance(element);
+    if (popover === null) {
+      console.warn('Failed to get popover instance for element.');
+      return;
+    }
+    popover.setContent({
+      '.popover-header': title,
+      '.popover-body': content
+    });
+
+    for (const [optionName, optionValue] of Object.entries(options)) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: using internal _config attribute
+      popover._config[optionName] = optionValue;
+    }
+  }
+
+  // noinspection JSMethodCanBeStatic
+  /**
+   * Show popover with title and content on $element
+   */
+  public show(element: HTMLElement): void {
+    const popover = BootstrapPopover.getInstance(element);
+    if (popover === null) {
+      console.warn('Failed to get popover instance for element.');
+      return;
+    }
+    popover.show();
+  }
+
+  // noinspection JSMethodCanBeStatic
+  /**
+   * Hide popover on $element
+   */
+  public hide(element: HTMLElement): void {
+    const popover = BootstrapPopover.getInstance(element);
+    if (popover === null) {
+      console.warn('Failed to get popover instance for element.');
+      return;
+    }
+    popover.hide();
+  }
+
+  // noinspection JSMethodCanBeStatic
+  /**
+   * Destroy popover on $element
+   */
+  public destroy(element: HTMLElement): void {
+    const popover = BootstrapPopover.getInstance(element);
+    if (popover === null) {
+      console.warn('Failed to get popover instance for element.');
+      return;
+    }
+    popover.dispose();
+  }
+
+  // noinspection JSMethodCanBeStatic
+  /**
+   * Toggle popover on $element
+   */
+  public toggle(element: HTMLElement): void {
+    const popover = BootstrapPopover.getInstance(element);
+    if (popover === null) {
+      console.warn('Failed to get popover instance for element.');
+      return;
+    }
+    popover.toggle();
+  }
+
+  private toIterable(element: NodeListOf<HTMLElement> | HTMLElement | unknown): NodeList | HTMLElement[] {
+    let elementList;
+    if (element instanceof HTMLElement) {
+      elementList = [element];
+    } else if (element instanceof NodeList) {
+      elementList = element;
+    } else {
+      throw `Cannot consume element of type ${element.constructor.name}, expected NodeListOf<HTMLElement> or HTMLElement`;
+    }
+
+    return elementList;
+  }
+
+  /**
+   * If the element contains an attributes that qualifies as a title, store it as data attribute "bs-title"
+   */
+  private applyTitleIfAvailable(element: HTMLElement): void {
+    const title = (element.title as string) || element.dataset.title || '';
+    if (title) {
+      element.dataset.bsTitle = title;
+    }
+  }
+}
+
+export default new Popover();

package/backend/record-download-button.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 { customElement, property } from 'lit/decorators';
+import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import Severity from '@typo3/backend/severity';
+import Modal from '@typo3/backend/modal';
+import { lll } from '@typo3/core/lit-helper';
+
+enum Selectors {
+  formatSelector = '.t3js-record-download-format-selector',
+  formatOptions = '.t3js-record-download-format-option'
+}
+
+/**
+ * Module: @typo3/backend/record-download-button
+ *
+ * @example
+ * <typo3-recordlist-record-download-button url="/url/to/configuration/form" subject="Download records" ok="Download" close="Cancel">
+ *   <button>Download records/button>
+ * </typo3-recordlist-record-download-button>
+ */
+@customElement('typo3-recordlist-record-download-button')
+export class RecordDownloadButton extends PseudoButtonLitElement {
+  @property({ type: String }) url: string;
+  @property({ type: String }) subject: string;
+  @property({ type: String }) ok: string;
+  @property({ type: String }) close: string;
+
+  protected override buttonActivated(): void {
+    this.showDownloadConfigurationModal();
+  }
+
+  private showDownloadConfigurationModal(): void {
+    if (!this.url) {
+      // Don't render modal in case no url is given
+      return;
+    }
+
+    const modal = Modal.advanced({
+      content: this.url,
+      title: this.subject || 'Download records',
+      severity: SeverityEnum.notice,
+      size: Modal.sizes.small,
+      type: Modal.types.ajax,
+      buttons: [
+        {
+          text: this.close || lll('button.close') || 'Close',
+          active: true,
+          btnClass: 'btn-default',
+          name: 'cancel',
+          trigger: (): void => modal.hideModal(),
+        },
+        {
+          text: this.ok || lll('button.ok') || 'Download',
+          btnClass: 'btn-' + Severity.getCssClass(SeverityEnum.info),
+          name: 'download',
+          trigger: (): void => {
+            const form: HTMLFormElement = modal.querySelector('form');
+            form?.submit();
+            modal.hideModal();
+          }
+        }
+      ],
+      ajaxCallback: (): void => {
+        const formatSelect: HTMLSelectElement = modal.querySelector(Selectors.formatSelector);
+        const formatOptions: NodeListOf<HTMLDivElement> = modal.querySelectorAll(Selectors.formatOptions);
+
+        if (formatSelect === null || !formatOptions.length) {
+          // Return in case elements do not exist in the ajax loaded modal content
+          return;
+        }
+
+        formatSelect.addEventListener('change', (e: Event): void => {
+          const selectetFormat: string = (<HTMLSelectElement>e.target).value;
+          formatOptions.forEach((option: HTMLDivElement) => {
+            if (option.dataset.formatname !== selectetFormat) {
+              option.classList.add('hide');
+            } else {
+              option.classList.remove('hide');
+            }
+          });
+        });
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-recordlist-record-download-button': RecordDownloadButton;
+  }
+}

package/backend/record-link-handler.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 LinkBrowser from './link-browser';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/backend/record-link-handler
+ * record link interaction
+ */
+class RecordLinkHandler {
+  constructor() {
+    new RegularEvent('click', (evt: MouseEvent, targetEl: HTMLElement): void => {
+      evt.preventDefault();
+      const data = targetEl.closest('span').dataset;
+      LinkBrowser.finalizeFunction(document.body.dataset.linkbrowserIdentifier + data.uid);
+    }).delegateTo(document, '[data-close]');
+  }
+}
+
+export default new RecordLinkHandler();

package/backend/record-search.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+enum Selectors {
+  searchFieldSelector = '#recordsearchbox-searchterm',
+}
+
+/**
+ * Module: @typo3/backend/record-search
+ * Usability improvements for the record search
+ * @exports @typo3/backend/record-search
+ */
+class RecordSearch {
+  private readonly searchField: HTMLInputElement = document.querySelector(Selectors.searchFieldSelector);
+  private readonly activeSearch: boolean = this.searchField ? (this.searchField.value !== '') : false;
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      // Respond to browser related clearable event
+      if (this.searchField) {
+        new RegularEvent('search', (): void => {
+          if (this.searchField.value === '' && this.activeSearch) {
+            this.searchField.closest('form').submit();
+          }
+        }).bindTo(this.searchField);
+      }
+    });
+  }
+}
+
+export default new RecordSearch();

package/backend/recordlist.ts

@@ -0,0 +1,230 @@
+/*
+ * 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 Icons from '@typo3/backend/icons';
+import PersistentStorage from '@typo3/backend/storage/persistent';
+import RegularEvent from '@typo3/core/event/regular-event';
+import DocumentService from '@typo3/core/document-service';
+import { MultiRecordSelectionSelectors } from '@typo3/backend/multi-record-selection';
+import { selector } from '@typo3/core/literals';
+import type { ActionConfiguration, ActionEventDetails } from '@typo3/backend/multi-record-selection-action';
+
+interface IconIdentifier {
+  collapse: string;
+  expand: string;
+}
+interface RecordlistIdentifier {
+  entity: string;
+  toggle: string;
+  localize: string;
+  editMultiple: string;
+  icons: IconIdentifier;
+}
+interface EditRecordsConfiguration extends ActionConfiguration {
+  tableName: string;
+  columnsOnly: Array<string>;
+  returnUrl: string;
+}
+
+/**
+ * Module: @typo3/backend/recordlist
+ * Usability improvements for the record list
+ * @exports @typo3/backend/recordlist
+ */
+class Recordlist {
+  identifier: RecordlistIdentifier = {
+    entity: '.t3js-entity',
+    toggle: '.t3js-toggle-recordlist',
+    localize: '.t3js-action-localize',
+    editMultiple: '.t3js-record-edit-multiple',
+    icons: {
+      collapse: 'actions-view-list-collapse',
+      expand: 'actions-view-list-expand'
+    },
+  };
+
+  constructor() {
+    new RegularEvent('click', this.toggleClick).delegateTo(document, this.identifier.toggle);
+    new RegularEvent('click', this.onEditMultiple).delegateTo(document, this.identifier.editMultiple);
+    new RegularEvent('click', this.disableButton).delegateTo(document, this.identifier.localize);
+    DocumentService.ready().then((): void => {
+      this.registerPaginationEvents();
+    });
+
+    // multi record selection events
+    new RegularEvent('multiRecordSelection:action:edit', this.onEditMultiple).bindTo(document);
+    new RegularEvent('multiRecordSelection:action:copyMarked', (event: CustomEvent): void => {
+      Recordlist.submitClipboardFormWithCommand('copyMarked', event.target as HTMLButtonElement);
+    }).bindTo(document);
+    new RegularEvent('multiRecordSelection:action:removeMarked', (event: CustomEvent): void => {
+      Recordlist.submitClipboardFormWithCommand('removeMarked', event.target as HTMLButtonElement);
+    }).bindTo(document);
+  }
+
+  private static submitClipboardFormWithCommand(cmd: string, target: HTMLButtonElement) {
+    const clipboardForm = <HTMLFormElement>target.closest('form');
+    if (!clipboardForm) {
+      return;
+    }
+    const commandField = <HTMLInputElement>clipboardForm.querySelector('input[name="cmd"]');
+    if (!commandField) {
+      return;
+    }
+    commandField.value = cmd;
+    clipboardForm.submit();
+  }
+
+  private static getReturnUrl(returnUrl: string): string {
+    if (returnUrl === '') {
+      returnUrl = top.list_frame.document.location.pathname + top.list_frame.document.location.search;
+    }
+    return encodeURIComponent(returnUrl);
+  }
+
+  public toggleClick = (e: MouseEvent, targetEl: HTMLElement): void => {
+    e.preventDefault();
+
+    const table = targetEl.dataset.table;
+    const target = document.querySelector(targetEl.dataset.bsTarget) as HTMLElement;
+    const isExpanded = target.dataset.state === 'expanded';
+    const collapseIcon = targetEl.querySelector('.t3js-icon');
+    const toggleIcon = isExpanded ? this.identifier.icons.expand : this.identifier.icons.collapse;
+
+    Icons.getIcon(toggleIcon, Icons.sizes.small).then((icon: string): void => {
+      collapseIcon.replaceWith(document.createRange().createContextualFragment(icon));
+    });
+
+    // Store collapse state in UC
+    let storedModuleDataList = {};
+
+    if (PersistentStorage.isset('moduleData.web_list.collapsedTables')) {
+      storedModuleDataList = PersistentStorage.get('moduleData.web_list.collapsedTables');
+    }
+
+    const collapseConfig: Record<string, number> = {};
+    collapseConfig[table] = isExpanded ? 1 : 0;
+
+    storedModuleDataList = Object.assign(storedModuleDataList, collapseConfig);
+    PersistentStorage.set('moduleData.web_list.collapsedTables', storedModuleDataList).then((): void => {
+      target.dataset.state = isExpanded ? 'collapsed' : 'expanded';
+    });
+  };
+
+  /**
+   * Handles editing multiple records.
+   */
+  public onEditMultiple = (event: Event, target: HTMLElement): void => {
+    event.preventDefault();
+    let tableName: string = '';
+    let returnUrl: string = '';
+    let columnsOnly: Array<string> = [];
+    const entityIdentifiers: Array<string> = [];
+
+    if (event.type === 'multiRecordSelection:action:edit') {
+      // In case the request is triggerd by the multi record selection event, handling
+      // is slightly different since the event data already contain the selected records.
+      const eventDetails: ActionEventDetails = (event as CustomEvent).detail as ActionEventDetails;
+      const configuration: EditRecordsConfiguration = eventDetails.configuration;
+      returnUrl = configuration.returnUrl || '';
+      columnsOnly = configuration.columnsOnly || [];
+      tableName = configuration.tableName || '';
+      if (tableName === '') {
+        return;
+      }
+      // Evaluate all checked records and if valid, add their uid to the list
+      eventDetails.checkboxes.forEach((checkbox: HTMLInputElement): void => {
+        const checkboxContainer: HTMLElement = checkbox.closest(MultiRecordSelectionSelectors.elementSelector);
+        if (checkboxContainer !== null && checkboxContainer.dataset[configuration.idField]) {
+          entityIdentifiers.push(checkboxContainer.dataset[configuration.idField]);
+        }
+      });
+    } else {
+      // Edit record request was triggered via t3js-* class on target.
+      const tableContainer: HTMLElement = target.closest('[data-table]');
+      if (tableContainer === null) {
+        return;
+      }
+      tableName = tableContainer.dataset.table || '';
+      if (tableName === '') {
+        return;
+      }
+      returnUrl = target.dataset.returnUrl || '';
+      columnsOnly = JSON.parse(target.dataset.columnsOnly || '{}');
+      // Check if there are selected records, which would limit the records to edit
+      const selection: NodeListOf<HTMLElement> = tableContainer.querySelectorAll(
+        this.identifier.entity + '[data-uid][data-table="' + tableName + '"] td.col-checkbox input[type="checkbox"]:checked'
+      );
+      if (selection.length) {
+        // If there are selected records, only those are added to the list
+        selection.forEach((entity: HTMLInputElement): void => {
+          entityIdentifiers.push((entity.closest(this.identifier.entity + selector`[data-uid][data-table="${tableName}"]`) as HTMLElement).dataset.uid);
+        });
+      } else {
+        // Get all records for the current table and add their uid to the list
+        const entities: NodeListOf<HTMLElement> = tableContainer.querySelectorAll(this.identifier.entity + selector`[data-uid][data-table="${tableName}"]`);
+        if (!entities.length) {
+          return;
+        }
+        entities.forEach((entity: HTMLElement): void => {
+          entityIdentifiers.push(entity.dataset.uid);
+        });
+      }
+    }
+
+    if (!entityIdentifiers.length) {
+      // Return in case no records to edit were found
+      return;
+    }
+
+    let editUrl: string = top.TYPO3.settings.FormEngine.moduleUrl
+      + '&edit[' + tableName + '][' + entityIdentifiers.join(',') + ']=edit'
+      + '&returnUrl=' + Recordlist.getReturnUrl(returnUrl);
+
+    if (columnsOnly.length > 0) {
+      editUrl += columnsOnly.map((column: string, i: number): string => '&columnsOnly[' + tableName + '][' + i + ']=' + column).join('');
+    }
+
+    window.location.href = editUrl;
+  };
+
+  private readonly disableButton = (event: Event, target: HTMLElement): void => {
+    target.setAttribute('disabled', 'disabled');
+    target.classList.add('disabled');
+  };
+
+  private readonly registerPaginationEvents = (): void => {
+    document.querySelectorAll('.t3js-recordlist-paging').forEach((trigger: HTMLInputElement) => {
+      trigger.addEventListener('keyup', (e: KeyboardEvent) => {
+        e.preventDefault();
+        let value = Number(trigger.value);
+        const min = Number(trigger.min);
+        const max = Number(trigger.max);
+        if (min && value < min) {
+          value = min;
+        }
+        if (max && value > max) {
+          value = max;
+        }
+        trigger.value = value.toString(10);
+        if (e.key === 'Enter' && value !== Number(trigger.dataset.currentpage)) {
+          const form = trigger.closest('form[name^="list-table-form-"]') as HTMLFormElement;
+          const submitUrl = new URL(form.action, window.origin);
+          submitUrl.searchParams.set('pointer', value.toString());
+          window.location.href = submitUrl.toString();
+        }
+      });
+    });
+  };
+}
+
+export default new Recordlist();

package/backend/resource/resource.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 interface ResourceInterface {
+  type: string;
+  identifier: string;
+  name: string;
+  hasPreview: boolean;
+  uid: number | null;
+  metaUid: number | null;
+  url: string | null;
+}
+
+export class Resource implements ResourceInterface {
+  public constructor(
+    public readonly type: string,
+    public readonly identifier: string,
+    public readonly name: string,
+    public readonly hasPreview: boolean = false,
+    public readonly uid: number | null = null,
+    public readonly metaUid: number | null = null,
+    public readonly url: string | null = null,
+  ) {
+  }
+}