typo3-typescript-sources 13.4.20

package/backend/utility/collapse-state-search.ts

@@ -0,0 +1,183 @@
+/*
+ * 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 Client from '@typo3/backend/storage/client';
+import '@typo3/backend/input/clearable';
+import DocumentService from '@typo3/core/document-service';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Mark from 'mark.js';
+import DomHelper from '@typo3/backend/utility/dom-helper';
+
+/**
+ * Utility class to perform client side search on ul/li trees. This is used in various
+ * backend modules that show trees, especially the "Active PageTsConfig" and "Active TypoScript".
+ *
+ * This is an add-on to collapse-state-persister.ts: When a search is performed, this search
+ * result collapse/expand state is not persisted in local storage, so the state without search
+ * "comes back" when a search word is reset.
+ *
+ * @internal
+ */
+class CollapseStateSearch {
+  private readonly searchValueSelector: string = '.t3js-collapse-search-term';
+  private searchField: HTMLInputElement;
+  private searchForm: HTMLFormElement;
+  private searchSessionKey: string;
+  private searchValue: string = '';
+  private treeContainers: NodeListOf<HTMLElement>;
+  private numberOfSearchMatchesContainer: NodeListOf<HTMLElement>;
+  private markInstances: Array<any> = [];
+
+  constructor() {
+    DocumentService.ready().then(() => {
+      this.treeContainers = document.querySelectorAll('.t3js-collapse-states-search-tree');
+      if (this.treeContainers.length === 0) {
+        return;
+      }
+      this.numberOfSearchMatchesContainer = document.querySelectorAll('.t3js-collapse-states-search-numberOfSearchMatches');
+      this.searchField = document.querySelector(this.searchValueSelector);
+      this.searchForm = this.searchField.closest('form');
+      this.searchSessionKey = this.searchField.dataset.persistCollapseSearchKey;
+      this.searchValue = Client.get(this.searchSessionKey) ?? '';
+
+      this.registerEvents();
+
+      for (let i = 0; i < this.treeContainers.length; i++) {
+        this.markInstances[i] = new Mark(this.treeContainers[i]);
+      }
+
+      if (this.searchValue !== '') {
+        this.searchField.value = this.searchValue;
+        // Trigger "keyup" event to update clearable status
+        this.searchField.dispatchEvent(new Event('keyup'));
+        this.searchForm.requestSubmit();
+      }
+    });
+  }
+
+  private registerEvents(): void {
+    this.searchField.clearable({
+      onClear: (input: HTMLInputElement): void => {
+        input.closest('form').requestSubmit();
+      },
+    });
+
+    new DebounceEvent('input', (): void => {
+      this.searchForm.requestSubmit();
+    }).bindTo(this.searchField);
+
+    new RegularEvent('submit', (e: SubmitEvent): void => {
+      e.preventDefault();
+      for (let i = 0; i < this.treeContainers.length; i++) {
+        this.filterTree(this.searchField.value, this.treeContainers[i], this.numberOfSearchMatchesContainer[i], this.markInstances[i]);
+      }
+    }).bindTo(this.searchForm);
+  }
+
+  private filterTree(term: string, treeContainer: HTMLElement, numberOfSearchMatchesContainer: HTMLElement, markInstance: any): void {
+    // Normalize search term
+    term = term.toLowerCase();
+
+    markInstance.unmark();
+    Client.set(this.searchSessionKey, term);
+    if (term.length < 3) {
+      numberOfSearchMatchesContainer.classList.add('hidden');
+      return;
+    }
+
+    const matchingCollapsibleIds = new Set();
+    const matchingNodes = [
+      ...this.findNodesByIdentifier(term, treeContainer),
+      ...this.findNodesByValue(term, treeContainer),
+      ...this.findNodesByComment(term, treeContainer),
+      ...this.findNodesByConstantSubstitution(term, treeContainer)
+    ];
+
+    numberOfSearchMatchesContainer.innerText = String(TYPO3.lang['collapse-state-search.numberOfSearchMatches']).replace('%s', String(matchingNodes.length));
+    numberOfSearchMatchesContainer.classList.remove('hidden');
+
+    matchingNodes.forEach((match: Element|null): void => {
+      if (match === null) {
+        return;
+      }
+
+      const collapsibleIdentifier = (match.parentElement.querySelector('[data-bs-toggle="collapse"]') as HTMLElement|null)?.dataset.bsTarget;
+      if (collapsibleIdentifier !== undefined) {
+        matchingCollapsibleIds.add(collapsibleIdentifier.substring(1));
+      }
+
+      const parentElements = DomHelper.parents(match, '.collapse');
+      for (const parentEl of parentElements) {
+        matchingCollapsibleIds.add(parentEl.id);
+      }
+    });
+
+    const allNodes = Array.from(treeContainer.querySelectorAll('.collapse')) as HTMLElement[];
+    for (const node of allNodes) {
+      const isExpanded: boolean = node.classList.contains('show');
+      const id: string = node.id;
+      if (matchingCollapsibleIds.has(id)) {
+        // We're not using BootstrapCollapse.getOrCreateInstance() since this is too slow when
+        // dealing with many elements like with System > Configuration with TCA tree.
+        if (!isExpanded) {
+          const toggle: HTMLElement = document.querySelector('[data-bs-target="#' + id + '"]');
+          toggle.classList.remove('collapsed');
+          toggle.setAttribute('aria-expanded', 'true');
+          node.classList.add('show');
+        }
+      } else {
+        if (isExpanded) {
+          const toggle: HTMLElement = document.querySelector('[data-bs-target="#' + id + '"]');
+          toggle.classList.add('collapsed');
+          toggle.setAttribute('aria-expanded', 'false');
+          node.classList.remove('show');
+        }
+      }
+    }
+
+    markInstance.mark(term, {
+      element: 'span',
+      className: 'text-highlight'
+    });
+  }
+
+  private findNodesByIdentifier(term: string, treeContainer: HTMLElement): Element[] {
+    return Array.from(treeContainer.querySelectorAll('.treelist-label')).filter((el: Element): boolean => {
+      return el.textContent.toLowerCase().includes(term);
+    });
+  }
+
+  private findNodesByValue(term: string, treeContainer: HTMLElement): Element[] {
+    const matchingValueNodes = Array.from(treeContainer.querySelectorAll('.treelist-value')).filter((el: Element): boolean => {
+      return el.textContent.toLowerCase().includes(term);
+    });
+    return matchingValueNodes.map((node: Element): Element => {
+      return node.previousElementSibling;
+    });
+  }
+
+  private findNodesByComment(term: string, treeContainer: HTMLElement): Element[] {
+    return Array.from(treeContainer.querySelectorAll('.treelist-comment')).filter((el: Element): boolean => {
+      return el.textContent.toLowerCase().includes(term);
+    });
+  }
+
+  private findNodesByConstantSubstitution(term: string, treeContainer: HTMLElement): Element[] {
+    return Array.from(treeContainer.querySelectorAll('.treelist-constant-substitution')).filter((el: Element): boolean => {
+      return el.textContent.toLowerCase().includes(term);
+    });
+  }
+}
+
+export default new CollapseStateSearch();

package/backend/utility/dom-helper.ts

@@ -0,0 +1,91 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/backend/utility/dom-helper
+ *
+ * @internal
+ */
+export default class DomHelper {
+  /**
+   * Get all parent elements matching the passed `selector`
+   */
+  public static parents(el: Element, selector: string): Element[] {
+    const parents = [];
+    let closest;
+    while ((closest = el.parentElement.closest(selector)) !== null) {
+      el = closest;
+      parents.push(closest);
+    }
+
+    return parents;
+  }
+
+  /**
+   * Get the next scrollable parent element
+   */
+  public static scrollableParent(element: Element) {
+    let parent = element.parentElement;
+
+    while (parent) {
+      const style = window.getComputedStyle(parent);
+      const overflowY = style.overflowY;
+
+      if (overflowY === 'auto' || overflowY === 'scroll') {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+
+    return document.documentElement;
+  }
+
+  /**
+   * Get all next siblings the passed `target` element inside `el`
+   */
+  public static nextAll(target: Element): Element[] {
+    const nextSiblings = [];
+    let node = target.nextElementSibling;
+    while (node !== null) {
+      nextSiblings.push(node);
+      node = node.nextElementSibling;
+    }
+
+    return nextSiblings;
+  }
+
+  /**
+   * This is a wrapper for scrollIntoViewIfNeeded() that falls back to scrollIntoView() if the former
+   * is not available.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
+   */
+  public static scrollIntoViewIfNeeded(target: Element, smooth: boolean = false): void {
+    if (!smooth && 'scrollIntoViewIfNeeded' in target && typeof target.scrollIntoViewIfNeeded === 'function') {
+      target.scrollIntoViewIfNeeded(true);
+    } else {
+      const rect = target.getBoundingClientRect();
+      const isInViewport = rect.top >= 0
+        && rect.left >= 0
+        && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+      if (!isInViewport) {
+        if (smooth) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+        } else {
+          target.scrollIntoView();
+        }
+      }
+    }
+  }
+}

package/backend/utility/drag-drop-utility.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { DragTooltipMetadata } from '@typo3/backend/drag-tooltip';
+
+/**
+ * Module: @typo3/backend/utility/drag-drop-utility
+ *
+ * @internal
+ */
+export default class DragDropUtility {
+  public static isCopyModifierFromEvent(event: DragEvent): boolean {
+    if (event.dataTransfer.dropEffect === 'copy') {
+      return true;
+    }
+
+    if (event.dataTransfer.dropEffect === 'move') {
+      return false;
+    }
+
+    return navigator.userAgent.includes('Mac')
+      ? (event.dataTransfer.effectAllowed === 'copy' || event.altKey)
+      : event.ctrlKey;
+  }
+
+  public static updateEventAndTooltipToReflectCopyMoveIntention(event: DragEvent): void {
+    const isCopy = DragDropUtility.isCopyModifierFromEvent(event);
+    event.dataTransfer.dropEffect = isCopy ? 'copy' : 'move';
+    top.document.dispatchEvent(
+      new CustomEvent<DragTooltipMetadata>('typo3:drag-tooltip:metadata-update', {
+        detail: {
+          statusIconIdentifier: isCopy ? 'actions-duplicate' : 'actions-move'
+        }
+      })
+    );
+  }
+}

package/backend/utility/message-utility.ts

@@ -0,0 +1,45 @@
+/*
+ * 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!
+ */
+
+interface Message {
+  [key: string]: any;
+  actionName: string;
+}
+
+export class MessageUtility {
+  /**
+   * Generates an URL for usage in postMessage
+   *
+   * @return {string}
+   */
+  public static getOrigin(): string {
+    return window.origin;
+  }
+
+  /**
+   * @param {string} receivedOrigin
+   */
+  public static verifyOrigin(receivedOrigin: string): boolean {
+    const currentDomain = MessageUtility.getOrigin();
+
+    return currentDomain === receivedOrigin;
+  }
+
+  /**
+   * @param {*} message
+   * @param {Window} windowObject
+   */
+  public static send(message: Message, windowObject: Window = window): void {
+    windowObject.postMessage(message, MessageUtility.getOrigin());
+  }
+}

package/backend/utility/top-level-module-import.ts

@@ -0,0 +1,32 @@
+/*
+ * 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!
+ */
+
+/**
+ * @internal
+ */
+export function topLevelModuleImport(specifier: string): Promise<any> {
+  const event: CustomEvent<{ specifier: string; importPromise?: Promise<any>; }> = new CustomEvent('typo3:import-javascript-module', {
+    detail: {
+      specifier,
+      importPromise: null
+    }
+  });
+
+  top.document.dispatchEvent(event);
+
+  if (event.detail.importPromise) {
+    return event.detail.importPromise;
+  }
+
+  return Promise.reject(new Error('Top level did not respond with a promise.'));
+}

package/backend/utility.ts

@@ -0,0 +1,194 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/backend/utility
+ */
+class Utility {
+  /**
+   * Splits a string by a given delimiter and trims the values
+   *
+   * @param {string} delimiter
+   * @param {string} string
+   * @return Array<string>
+   */
+  public static trimExplode(delimiter: string, string: string): Array<string> {
+    return string.split(delimiter).map((item: string) => item.trim()).filter((item: string) => item !== '');
+  }
+
+  /**
+   * Trims string items.
+   *
+   * @param {string[]|any[]} items
+   */
+  public static trimItems(items: any[]): any[] {
+    return items.map((item: any) => {
+      if (item instanceof String) {
+        return item.trim();
+      }
+      return item;
+    });
+  }
+
+  /**
+   * Splits a string by a given delimiter and converts the values to integer
+   *
+   * @param {string} delimiter
+   * @param {string} string
+   * @param {boolean} excludeZeroValues
+   * @return Array<number>
+   */
+  public static intExplode(delimiter: string, string: string, excludeZeroValues: boolean = false): Array<number> {
+    return string
+      .split(delimiter)
+      .map((item: string) => parseInt(item, 10))
+      .filter((item: number) => !isNaN(item) || excludeZeroValues && item === 0);
+  }
+
+  /**
+   * Checks if a given number is really a number
+   *
+   * Taken from:
+   * http://dl.dropbox.com/u/35146/js/tests/isNumber.html
+   *
+   * @param {number} value
+   * @returns {boolean}
+   */
+  public static isNumber(value: number): boolean {
+    return !isNaN(parseFloat(value.toString())) && isFinite(value);
+  }
+
+  /**
+   * Updates a parameter inside of given url
+   *
+   * @param {string} url
+   * @param {string} key
+   * @param {string} value
+   * @returns {string}
+   * @deprecated will be removed in TYPO3 v14
+   */
+  public static updateQueryStringParameter(url: string, key: string, value: string): string {
+    console.warn('Utility.updateQueryStringParameter() has been marked as deprecated and will be removed in TYPO3 v14.');
+
+    const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+    const separator = url.includes('?') ? '&' : '?';
+
+    if (url.match(re)) {
+      return url.replace(re, '$1' + key + '=' + value + '$2');
+    }
+    return url + separator + key + '=' + value;
+  }
+
+  public static convertFormToObject(form: HTMLFormElement): { [key: string]: any } {
+    const obj: { [key: string]: any } = {};
+    form.querySelectorAll('input, select, textarea').forEach((element: HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement): void => {
+      const name = element.name;
+      const value = element.value;
+
+      if (name) {
+        if (element.tagName.toLowerCase() === 'input' && element.type == 'checkbox') {
+          const checkbox = element as HTMLInputElement;
+          if (obj[name] === undefined) {
+            obj[name] = [];
+          }
+          if (checkbox.checked){
+            obj[name].push(value);
+          }
+
+        }else{
+          obj[name] = value;
+        }
+      }
+    });
+
+    return obj;
+  }
+
+  /**
+   * Performs a deep merge of `source` into `target`.
+   * Mutates `target` only but not its objects and arrays.
+   *
+   * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209/4828813).
+   */
+  public static mergeDeep(...objects: object[]) {
+    type IndexedObject = { [key: string]: any };
+    const isObject = (obj: any) => {
+      return obj && typeof obj === 'object';
+    };
+
+    return objects.reduce((prev: IndexedObject, obj: IndexedObject): IndexedObject => {
+      Object.keys(obj).forEach((key: string): void => {
+        const pVal = prev[key];
+        const oVal = obj[key];
+
+        if (Array.isArray(pVal) && Array.isArray(oVal)) {
+          prev[key] = pVal.concat(...oVal);
+        }
+        else if (isObject(pVal) && isObject(oVal)) {
+          prev[key] = Utility.mergeDeep(pVal, oVal);
+        }
+        else {
+          prev[key] = oVal;
+        }
+      });
+
+      return prev;
+    }, {});
+  }
+
+  /**
+   * Checks if the origin, pathnames and query string are equal (ignoring different fragments),
+   * and therefore point to the same server side resource.
+   *
+   * @param {string|null} url1
+   * @param {string|null} url2
+   *
+   * @returns {boolean}
+   */
+  public static urlsPointToSameServerSideResource(url1: null|string, url2: null|string): boolean {
+    if (!url1 || !url2) {
+      return false;
+    }
+
+    const currentWindowUrlOrigin = window.location.origin;
+
+    try {
+      const uriObject1 = new URL(url1, Utility.isValidUrl(url1) ? undefined : currentWindowUrlOrigin);
+      const uriObject2 = new URL(url2, Utility.isValidUrl(url2) ? undefined : currentWindowUrlOrigin);
+      const resource1 = uriObject1.origin + uriObject1.pathname + uriObject1.search;
+      const resource2 = uriObject2.origin + uriObject2.pathname + uriObject2.search;
+
+      return resource1 === resource2;
+    } catch {
+      return false;
+    }
+  }
+
+
+  /**
+   * Checks, if the given URL is valid.
+   *
+   * @param {null|string} url
+   * @private
+   */
+  private static isValidUrl(url: null|string): boolean {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
+
+export default Utility;

package/backend/viewport/abstract-container.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!
+ */
+
+import ConsumerScope from '../event/consumer-scope';
+
+export abstract class AbstractContainer {
+  protected readonly consumerScope: any = ConsumerScope;
+
+  constructor(consumerScope: any) {
+    this.consumerScope = consumerScope;
+  }
+}