typo3-typescript-sources 13.4.20

package/backend/storage/persistent.ts

@@ -0,0 +1,204 @@
+/*
+ * 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 AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+export type UC = { [key: string]: string | number | boolean | null | UC };
+
+/**
+ * Module: @typo3/backend/storage/persistent
+ * Wrapper for persistent storage in UC
+ * @exports @typo3/backend/storage/persistent
+ */
+class Persistent {
+  private data: UC|null = null;
+
+  /**
+   * Persistent storage, stores everything on the server via AJAX, does a greedy load on read
+   * common functions get/set/clear
+   *
+   * @param {String} key
+   * @returns {any}
+   */
+  public get(key: string): any {
+    if (this.data === null) {
+      this.data = this.loadFromServer();
+    }
+
+    return this.getRecursiveDataByDeepKey(this.data, key.split('.'));
+  }
+
+  /**
+   * Store data persistent on server
+   *
+   * @param {String} key
+   * @param {String} value
+   * @returns {Promise<UC>}
+   */
+  public set(key: string, value: string|UC): Promise<UC> {
+    if (this.data !== null) {
+      this.data = this.setRecursiveDataByDeepKey(this.data, key.split('.'), value);
+    }
+    return this.storeOnServer(key, value);
+  }
+
+  /**
+   * @param {string} key
+   * @param {string} value
+   * @returns {Promise<UC>}
+   */
+  public async addToList(key: string, value: string): Promise<UC> {
+    const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.usersettings_process).post({
+      action: 'addToList',
+      key,
+      value,
+    });
+    return this.resolveResponse(response);
+  }
+
+  /**
+   * @param {string} key
+   * @param {string} value
+   * @returns {Promise<UC>}
+   */
+  public async removeFromList(key: string, value: string): Promise<UC> {
+    const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.usersettings_process).post({
+      action: 'removeFromList',
+      key,
+      value,
+    });
+    return this.resolveResponse(response);
+  }
+
+  public async unset(key: string): Promise<UC> {
+    const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.usersettings_process).post({
+      action: 'unset',
+      key,
+    });
+    return this.resolveResponse(response);
+  }
+
+  /**
+   * Clears the UC
+   */
+  public clear(): void {
+    new AjaxRequest(TYPO3.settings.ajaxUrls.usersettings_process).post({
+      action: 'clear',
+    });
+    this.data = null;
+  }
+
+  /**
+   * Checks if a key was set before, useful to not do all the undefined checks all the time
+   *
+   * @param {string} key
+   * @returns {boolean}
+   */
+  public isset(key: string): boolean {
+    const value = this.get(key);
+    return (typeof value !== 'undefined' && value !== null);
+  }
+
+  /**
+   * Loads the data from outside, only used for the initial call from BackendController
+   *
+   * @param {UC} data
+   */
+  public load(data: UC): void {
+    this.data = data;
+  }
+
+  /**
+   * Loads all data from the server
+   */
+  private loadFromServer(): UC {
+    const url = new URL(location.origin + TYPO3.settings.ajaxUrls.usersettings_process);
+    url.searchParams.set('action', 'getAll');
+
+    const request = new XMLHttpRequest();
+    const async = false;
+    request.open('GET', url.toString(), async);
+    request.send();
+
+    if (request.status === 200) {
+      return JSON.parse(request.responseText);
+    }
+
+    throw `Unexpected response code ${request.status}, reason: ${request.responseText}`;
+  }
+
+  /**
+   * Stores data on the server, and gets the updated data on return
+   * to always be up-to-date inside the browser
+   *
+   * @param {string} key
+   * @param {string|object} value
+   * @returns {Promise<UC>}
+   */
+  private async storeOnServer(key: string, value: string|object): Promise<UC> {
+    const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.usersettings_process).post({
+      action: 'set',
+      key,
+      value,
+    });
+    return this.resolveResponse(response);
+  }
+
+  /**
+   * Helper function used to set a value which could have been a flat object key data["my.foo.bar"] to
+   * data[my][foo][bar] is called recursively by itself
+   *
+   * @param {object} data the data to be used as base
+   * @param {string[]} keyParts the keyParts for the subtree
+   * @returns {UC}
+   */
+  private getRecursiveDataByDeepKey(data: any, keyParts: string[]): any {
+    if (keyParts.length === 1) {
+      return (data || {})[keyParts[0]];
+    }
+
+    const firstKey = keyParts.shift();
+    return this.getRecursiveDataByDeepKey(data[firstKey] || {}, keyParts);
+  }
+
+  /**
+   * helper function used to set a value which could have been a flat object key data["my.foo.bar"] to
+   * data[my][foo][bar]
+   * is called recursively by itself
+   *
+   * @param {UC} data
+   * @param {string[]} keyParts
+   * @param {UC} value
+   * @returns {UC}
+   */
+  private setRecursiveDataByDeepKey(data: UC, keyParts: string[], value: string | UC): UC {
+    if (keyParts.length === 1) {
+      data = data || {};
+      data[keyParts[0]] = value;
+    } else {
+      const firstKey = keyParts.shift();
+      data[firstKey] = this.setRecursiveDataByDeepKey((data[firstKey] as UC) || {}, keyParts, value);
+    }
+    return data;
+  }
+
+  private async resolveResponse(response: AjaxResponse): Promise<UC> {
+    const resolvedResponse = await response.resolve();
+    this.data = resolvedResponse;
+
+    return resolvedResponse;
+  }
+}
+
+export default new Persistent();

package/backend/switch-user.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import { customElement, property } from 'lit/decorators';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Notification from '@typo3/backend/notification';
+
+enum Modes {
+  switch = 'switch',
+  exit = 'exit',
+}
+
+/**
+ * Module: @typo3/backend/switch-user
+ *
+ * @example
+ * <typo3-backend-switch-user class="some" targetuser="123" mode="switch">
+ *   Switch user
+ * </typo3-backend-switch-user>
+ */
+@customElement('typo3-backend-switch-user')
+export class SwitchUser extends PseudoButtonLitElement {
+
+  @property({ type: String }) targetUser: string;
+  @property({ type: Modes }) mode: Modes = Modes.switch;
+
+  protected override buttonActivated(): void {
+    if (this.mode === Modes.switch) {
+      this.handleSwitchUser();
+    } else if (this.mode === Modes.exit) {
+      this.handleExitSwitchUser();
+    }
+  }
+
+  private handleSwitchUser(): void {
+    if (!this.targetUser) {
+      // Invalid request without target user
+      Notification.error('Switching to user went wrong.');
+      return;
+    }
+
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.switch_user)).post({
+      targetUser: this.targetUser,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      if (data.success === true && data.url) {
+        top.window.location.href = data.url;
+      } else {
+        Notification.error('Switching to user went wrong.');
+      }
+    });
+  }
+
+  private handleExitSwitchUser(): void {
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.switch_user_exit)).post({}).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      if (data.success === true && data.url) {
+        top.window.location.href = data.url;
+      } else {
+        Notification.error('Exiting current user went wrong.');
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-switch-user': SwitchUser;
+  }
+}

package/backend/tabs.ts

@@ -0,0 +1,72 @@
+/*
+ * 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 { Tab } from 'bootstrap';
+import BrowserSession from './storage/browser-session';
+import Client from './storage/client';
+import DocumentService from '@typo3/core/document-service';
+
+/**
+ * Module: @typo3/backend/tabs
+ * @exports @typo3/backend/tabs
+ */
+class Tabs {
+  constructor() {
+    DocumentService.ready().then((): void => {
+      const tabContainers = document.querySelectorAll('.t3js-tabs');
+      tabContainers.forEach((tabContainer: HTMLElement): void => {
+        const currentActiveTab = Tabs.receiveActiveTab(tabContainer.id);
+        if (currentActiveTab) {
+          const tabButton = document.querySelector('[data-bs-target="#' + currentActiveTab + '"]');
+          if (tabButton) {
+            new Tab(tabButton).show();
+          }
+        }
+
+        const storeLastActiveTab = tabContainer.dataset.storeLastTab === '1';
+        if (storeLastActiveTab) {
+          tabContainer.addEventListener('show.bs.tab', (e: Event): void => {
+            const id = (e.currentTarget as HTMLElement).id;
+            const tabTarget = (e.target as HTMLButtonElement).dataset.bsTarget.slice(1);
+            Tabs.storeActiveTab(id, tabTarget);
+          });
+        }
+      });
+    });
+
+    // Remove legacy values from localStorage
+    Client.unsetByPrefix('tabs-');
+  }
+
+  /**
+   * Receive active tab from storage
+   *
+   * @param {string} id
+   * @returns {string}
+   */
+  private static receiveActiveTab(id: string): string {
+    return BrowserSession.get(id) || '';
+  }
+
+  /**
+   * Set active tab to storage
+   *
+   * @param {string} id
+   * @param {string} target
+   */
+  private static storeActiveTab(id: string, target: string): void {
+    BrowserSession.set(id, target);
+  }
+}
+
+export default new Tabs();

package/backend/telephone-link-handler.ts

@@ -0,0 +1,40 @@
+/*
+ * 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/telephone-link-handler
+ * @exports @typo3/backend/telephone-link-handler
+ * Telephone link interaction
+ */
+class TelephoneLinkHandler {
+  constructor() {
+    new RegularEvent('submit', (evt: MouseEvent, targetEl: HTMLElement): void => {
+      evt.preventDefault();
+      const inputField = targetEl.querySelector('[name="ltelephone"]') as HTMLInputElement;
+      let value = inputField.value;
+      if (value === 'tel:') {
+        return;
+      }
+      if (value.startsWith('tel:')) {
+        value = value.substr(4);
+      }
+
+      LinkBrowser.finalizeFunction('tel:' + value);
+    }).delegateTo(document, '#ltelephoneform');
+  }
+}
+
+export default new TelephoneLinkHandler();

package/backend/tests/backend/storage/browser-storage-test.ts

@@ -0,0 +1,87 @@
+/*
+ * 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 BrowserSession from '@typo3/backend/storage/browser-session.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/storage/browser-session', () => {
+  afterEach((): void => {
+    BrowserSession.clear();
+  });
+
+  it('can set and get item', () => {
+    const key = 'test-key';
+    BrowserSession.set(key, 'foo');
+    expect(BrowserSession.get(key)).to.equal('foo');
+  });
+
+  it('can check if item is set', () => {
+    const key = 'test-key';
+    expect(BrowserSession.isset(key)).to.be.false;
+    BrowserSession.set(key, 'foo');
+    expect(BrowserSession.isset(key)).to.be.true;
+  });
+
+  it('can get multiple items by prefix', () => {
+    const entries = {
+      'test-prefix-foo': 'foo',
+      'test-prefix-bar': 'bar',
+      'test-prefix-baz': 'baz',
+    };
+    for (const [key, value] of Object.entries(entries)) {
+      BrowserSession.set(key, value);
+    }
+
+    const items = BrowserSession.getByPrefix('test-prefix-');
+    expect(items).to.eql(entries);
+  });
+
+  it('can remove item', () => {
+    const key = 'item-to-be-removed';
+    BrowserSession.set(key, 'foo');
+    expect(BrowserSession.get(key)).not.to.be.null;
+
+    BrowserSession.unset(key);
+    expect(BrowserSession.get(key)).to.be.null;
+  });
+
+  it('can remove multiple items by prefix', () => {
+    const entries = {
+      'test-prefix-foo': 'foo',
+      'test-prefix-bar': 'bar',
+      'test-prefix-baz': 'baz',
+    };
+    for (const [key, value] of Object.entries(entries)) {
+      BrowserSession.set(key, value);
+    }
+    BrowserSession.unsetByPrefix('test-prefix-');
+
+    const items = BrowserSession.getByPrefix('test-prefix-');
+    expect(items).to.be.empty;
+  });
+
+  it('can clear storage', () => {
+    const entries = {
+      'foo': 'foo',
+      'baz': 'bencer',
+      'huselpusel': '42',
+    };
+    for (const [key, value] of Object.entries(entries)) {
+      BrowserSession.set(key, value);
+    }
+    BrowserSession.clear();
+
+    expect(sessionStorage).to.be.empty;
+  });
+});

package/backend/tests/backend/storage/client-test.ts

@@ -0,0 +1,87 @@
+/*
+ * 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.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/storage/client', () => {
+  afterEach((): void => {
+    Client.clear();
+  });
+
+  it('can set and get item', () => {
+    const key = 'test-key';
+    Client.set(key, 'foo');
+    expect(Client.get(key)).to.equal('foo');
+  });
+
+  it('can check if item is set', () => {
+    const key = 'test-key';
+    expect(Client.isset(key)).to.be.false;
+    Client.set(key, 'foo');
+    expect(Client.isset(key)).to.be.true;
+  });
+
+  it('can get multiple items by prefix', () => {
+    const entries = {
+      'test-prefix-foo': 'foo',
+      'test-prefix-bar': 'bar',
+      'test-prefix-baz': 'baz',
+    };
+    for (const [key, value] of Object.entries(entries)) {
+      Client.set(key, value);
+    }
+
+    const items = Client.getByPrefix('test-prefix-');
+    expect(items).to.eql(entries);
+  });
+
+  it('can remove item', () => {
+    const key = 'item-to-be-removed';
+    Client.set(key, 'foo');
+    expect(Client.get(key)).not.to.be.null;
+
+    Client.unset(key);
+    expect(Client.get(key)).to.be.null;
+  });
+
+  it('can remove multiple items by prefix', () => {
+    const entries = {
+      'test-prefix-foo': 'foo',
+      'test-prefix-bar': 'bar',
+      'test-prefix-baz': 'baz',
+    };
+    for (const [key, value] of Object.entries(entries)) {
+      Client.set(key, value);
+    }
+    Client.unsetByPrefix('test-prefix-');
+
+    const items = Client.getByPrefix('test-prefix-');
+    expect(items).to.be.empty;
+  });
+
+  it('can clear storage', () => {
+    const entries = {
+      'foo': 'foo',
+      'baz': 'bencer',
+      'huselpusel': '42',
+    };
+    for (const [key, value] of Object.entries(entries)) {
+      Client.set(key, value);
+    }
+    Client.clear();
+
+    expect(localStorage).to.be.empty;
+  });
+});

package/backend/tests/backend/utility/dom-helper-test.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 DomHelper from '@typo3/backend/utility/dom-helper.js';
+import { expect } from '@open-wc/testing';
+
+describe('@typo3/backend/utility/dom-helper', () => {
+  it('parents() returns all parents matching the selector', () => {
+    const markup =
+      `<div class="dummy-matching-element">
+        <ul>
+          <li>
+            <p class="dummy-matching-element">
+              <span class="dummy-matching-element">
+                <span id="enter-here"></span>
+              </span>
+            </p>
+          </li>
+        </ul>
+      </div>`;
+    const wrapperElement = document.createElement('div');
+    wrapperElement.append(document.createRange().createContextualFragment(markup));
+
+    const parents = DomHelper.parents(wrapperElement.querySelector('#enter-here'), '.dummy-matching-element');
+    expect(parents).to.length(3);
+    expect(parents.map((el: HTMLElement) => el.tagName)).to.have.ordered.members(['SPAN', 'P', 'DIV']);
+  });
+
+  it('nextAll() returns a proper list of all next elements', () => {
+    const wrapperElement = document.createElement('div');
+    const pElement = document.createElement('p');
+    const strongElement = document.createElement('strong');
+    const ulElement = document.createElement('ul');
+    ulElement.append(document.createElement('li'));
+    wrapperElement.append(pElement, strongElement, ulElement);
+
+    const nextAll = DomHelper.nextAll(pElement);
+    expect(nextAll).to.length(2);
+    expect(nextAll).to.have.ordered.members([strongElement, ulElement]);
+  });
+});

package/backend/tests/backend-exception-test.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { BackendException } from '@typo3/backend/backend-exception.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/backend-exception', () => {
+  it('sets exception message', () => {
+    const backendException: BackendException = new BackendException('some message');
+    expect(backendException.message).to.equal('some message');
+  });
+
+  it('sets exception code', () => {
+    const backendException: BackendException = new BackendException('', 12345);
+    expect(backendException.code).to.equal(12345);
+  });
+});