typo3-typescript-sources 13.4.20

package/backend/form-engine/field-control/link-popup.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 FormEngine from '@typo3/backend/form-engine';
+import Modal from '../../modal';
+
+/**
+ * This module is used for the field control "Link popup"
+ */
+class LinkPopup {
+  private controlElement: HTMLElement = null;
+
+  constructor(controlElementId: string) {
+    DocumentService.ready().then((): void => {
+      this.controlElement = <HTMLElement>document.querySelector(controlElementId);
+      if (this.controlElement === null) {
+        return;
+      }
+      this.controlElement.addEventListener('click', this.handleControlClick);
+    });
+  }
+
+  /**
+   * @param {Event} e
+   */
+  private readonly handleControlClick = (e: Event): void => {
+    e.preventDefault();
+
+    const itemName = this.controlElement.dataset.itemName;
+    const url = this.controlElement.getAttribute('href')
+      + '&P[currentValue]=' + encodeURIComponent(document.forms.namedItem('editform')[itemName].value)
+      + '&P[currentSelectedValues]=' + encodeURIComponent(FormEngine.getFieldElement(itemName).val());
+
+    Modal.advanced({
+      type: Modal.types.iframe,
+      content: url,
+      size: Modal.sizes.large,
+    });
+  };
+}
+
+export default LinkPopup;

package/backend/form-engine/field-control/list-module.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 DocumentService from '@typo3/core/document-service';
+import FormEngine from '@typo3/backend/form-engine';
+
+/**
+ * This module is used for the field control "List module" used for "group" fields
+ */
+class ListModule {
+  private controlElement: HTMLElement = null;
+
+  constructor(controlElementId: string) {
+    DocumentService.ready().then((): void => {
+      this.controlElement = <HTMLElement>document.querySelector(controlElementId);
+      this.controlElement.addEventListener('click', this.registerClickHandler);
+    });
+  }
+
+  /**
+   * @param {Event} e
+   */
+  private readonly registerClickHandler = (e: Event): void => {
+    e.preventDefault();
+
+    FormEngine.preventFollowLinkIfNotSaved(this.controlElement.getAttribute('href'));
+  };
+}
+
+export default ListModule;

package/backend/form-engine/field-control/password-generator.ts

@@ -0,0 +1,102 @@
+/*
+ * 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 FormEngineValidation from '@typo3/backend/form-engine-validation';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import Notification from '@typo3/backend/notification';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+interface PasswordRules {
+  length: number;
+  random: string;
+  digitCharacters: boolean;
+  lowerCaseCharacters: boolean;
+  upperCaseCharacters: boolean;
+  specialCharacters: boolean;
+}
+
+/**
+ * Handles the "Generate Password" field control
+ */
+class PasswordGenerator {
+  private controlElement: HTMLAnchorElement = null;
+  private humanReadableField: HTMLInputElement = null;
+  private hiddenField: HTMLInputElement = null;
+  private passwordRules: PasswordRules = null;
+
+  constructor(controlElementId: string) {
+    DocumentService.ready().then((): void => {
+      this.controlElement = <HTMLAnchorElement>document.getElementById(controlElementId);
+      this.humanReadableField = <HTMLInputElement>document.querySelector(
+        'input[data-formengine-input-name="' + this.controlElement.dataset.itemName + '"]',
+      );
+      this.hiddenField = <HTMLInputElement>document.querySelector(
+        'input[name="' + this.controlElement.dataset.itemName + '"]',
+      );
+      this.passwordRules = JSON.parse(this.controlElement.dataset.passwordRules || '{}');
+
+      // Set human-readable field to disable and readonly in case edit is disallowed in the field control settings
+      if (!this.controlElement.dataset.allowEdit) {
+        this.humanReadableField.disabled = true;
+        this.humanReadableField.readOnly = true;
+        // Also remove clearable possibility
+        if (this.humanReadableField.isClearable || this.humanReadableField.classList.contains('t3js-clearable')) {
+          this.humanReadableField.classList.remove('t3js-clearable');
+          const clearableContainer = <HTMLDivElement>this.humanReadableField.closest('div.form-control-clearable-wrapper');
+          if (clearableContainer) {
+            clearableContainer.classList.remove('form-control-clearable');
+            const closeButton = <HTMLButtonElement>clearableContainer.querySelector('button.close');
+            if (closeButton) {
+              clearableContainer.removeChild(closeButton);
+            }
+          }
+        }
+      }
+
+      this.controlElement.addEventListener('click', this.generatePassword.bind(this));
+    });
+  }
+
+  private generatePassword(e: Event): void {
+    e.preventDefault();
+
+    // Generate new password
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.password_generate)).post({
+      passwordRules: this.passwordRules,
+    })
+      .then(async (response: AjaxResponse): Promise<void> => {
+        const resolvedBody = await response.resolve();
+        if (resolvedBody.success === true) {
+          // Set type=text to display the generated password (allow to copy) and update the field value
+          this.humanReadableField.type = 'text';
+          this.humanReadableField.value = resolvedBody.password;
+          // Manually dispatch "change" to enable FormEngine handling (instead of manually calling "updateInputField()").
+          // This way custom modules are also triggered when listening on this event.
+          this.humanReadableField.dispatchEvent(new Event('change'));
+          // Due to formatting and processing done by FormEngine, we need to set the value again (allow to copy)
+          this.humanReadableField.value = this.hiddenField.value;
+          // Finally validate and mark the field as changed
+          FormEngineValidation.validateField(this.humanReadableField);
+          FormEngineValidation.markFieldAsChanged(this.humanReadableField);
+        } else {
+          Notification.warning(resolvedBody.message || 'No password was generated');
+        }
+      })
+      .catch(() => {
+        Notification.error('Password could not be generated');
+      });
+  }
+}
+
+export default PasswordGenerator;

package/backend/form-engine/field-control/reset-selection.ts

@@ -0,0 +1,48 @@
+/*
+ * 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';
+
+/**
+ * This module is used for the field control "Reset selection" used for selectSingleBox
+ */
+class ResetSelection {
+  private controlElement: HTMLElement = null;
+
+  constructor(controlElementId: string) {
+    DocumentService.ready().then((): void => {
+      this.controlElement = <HTMLElement>document.querySelector(controlElementId);
+      if (this.controlElement !== null) {
+        this.controlElement.addEventListener('click', this.registerClickHandler);
+      }
+    });
+  }
+
+  /**
+   * @param {Event} e
+   */
+  private readonly registerClickHandler = (e: Event): void => {
+    e.preventDefault();
+
+    const itemName: string = this.controlElement.dataset.itemName;
+    const selectedIndices: Array<number> = JSON.parse(this.controlElement.dataset.selectedIndices);
+    const field = (<HTMLSelectElement>document.forms.namedItem('editform').querySelector('[name="' + itemName + '[]"]'));
+
+    field.selectedIndex = -1;
+    for (const i of selectedIndices) {
+      field.options[i].selected = true;
+    }
+  };
+}
+
+export default ResetSelection;

package/backend/form-engine/field-wizard/localization-state-selector.ts

@@ -0,0 +1,67 @@
+/*
+ * 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 States {
+  CUSTOM = 'custom',
+}
+
+class LocalizationStateSelector {
+  constructor(fieldName: string) {
+    DocumentService.ready().then((): void => {
+      this.registerEventHandler(fieldName);
+    });
+  }
+
+  /**
+   * @param {string} fieldName
+   */
+  private registerEventHandler(fieldName: string): void {
+    new RegularEvent('change', (e: Event): void => {
+      const target = e.target as HTMLInputElement;
+      const input: HTMLInputElement = target.closest('.t3js-formengine-field-item')?.querySelector('[data-formengine-input-name]');
+      if (!input) {
+        return;
+      }
+
+      const lastState = input.dataset.lastL10nState || false;
+      const currentState = target.value;
+
+      if (lastState && currentState === lastState) {
+        return;
+      }
+
+      if (currentState === States.CUSTOM) {
+        if (lastState) {
+          target.dataset.originalLanguageValue = input.value;
+        }
+        input.disabled = false;
+      } else {
+        if (lastState === States.CUSTOM) {
+          (target.closest('.t3js-l10n-state-container')
+            .querySelector('.t3js-l10n-state-custom') as HTMLElement)
+            .dataset.originalLanguageValue = input.value;
+        }
+        input.disabled = true;
+      }
+
+      input.value = target.dataset.originalLanguageValue;
+      input.dispatchEvent(new Event('change'));
+      input.dataset.lastL10nState = target.value;
+    }).delegateTo(document, '.t3js-l10n-state-container input[type="radio"][name="' + fieldName + '"]');
+  }
+}
+
+export default LocalizationStateSelector;

package/backend/form-engine/field-wizard/value-picker.ts

@@ -0,0 +1,123 @@
+/*
+ * 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!
+ */
+
+enum InsertModes {
+  append = 'append',
+  replace = 'replace',
+  prepend = 'prepend'
+}
+
+/**
+ * Module @typo3/backend/form-engine/field-wizard/value-picker
+ *
+ * @example
+ * <typo3-formengine-valuepicker mode="prepend" linked-field="css-selector">
+ *   <select>
+ * </typo3-formengine-valuepicker>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+export class ValuePicker extends HTMLElement {
+  private valuePicker: HTMLSelectElement|null = null;
+  private linkedField: HTMLInputElement|HTMLTextAreaElement|null = null;
+  private initialValueSet: boolean = false;
+
+  public constructor() {
+    super();
+    const slot = document.createElement('slot');
+    slot.addEventListener('slotchange', () => this.initializeValuePicker(slot));
+    this.attachShadow({ mode: 'open' }).append(slot);
+  }
+
+  public connectedCallback(): void {
+    this.linkedField = document.querySelector(this.getAttribute('linked-field')) as HTMLInputElement|HTMLTextAreaElement|null;
+    this.linkedField?.addEventListener('change', this.linkedFieldOnChange);
+    this.initializeValuePicker(this.shadowRoot.querySelector('slot'));
+  }
+
+  public disconnectedCallback(): void {
+    this.linkedField?.removeEventListener('change', this.linkedFieldOnChange);
+    this.linkedField = null;
+  }
+
+  private initializeValuePicker(slot: HTMLSlotElement): void {
+    const picker = (slot.assignedElements()[0] ?? null) as HTMLSelectElement|null;
+    if (picker !== null && picker.tagName.toLowerCase() !== 'select') {
+      throw new Error(`ValuePicker could not be initialized. Expected <select> child name, but found: ${picker}`);
+    }
+    if (picker !== this.valuePicker) {
+      this.valuePicker?.removeEventListener('change', this.onChange);
+      this.valuePicker = picker;
+      this.valuePicker?.addEventListener('change', this.onChange);
+      this.initialValueSet = false;
+    }
+    this.setInitialPickerValue();
+  }
+
+  private setInitialPickerValue() {
+    if (this.linkedField === null || this.valuePicker === null || this.initialValueSet) {
+      return;
+    }
+    if (this.getInsertMode() === InsertModes.replace) {
+      const formEngineInputField = (document.getElementsByName(this.linkedField.dataset.formengineInputName)[0] ?? null) as HTMLInputElement|HTMLTextAreaElement;
+      if (formEngineInputField !== null) {
+        this.selectValue(formEngineInputField.value);
+        this.initialValueSet = true;
+      }
+    }
+  }
+
+  private readonly onChange = () => {
+    this.setValue();
+    this.valuePicker.blur();
+  };
+
+  private readonly linkedFieldOnChange = () => {
+    if (this.valuePicker === null) {
+      return;
+    }
+    if (this.getInsertMode() === InsertModes.replace) {
+      this.selectValue(this.linkedField.value);
+    } else {
+      this.valuePicker.selectedIndex = 0;
+    }
+  };
+
+  private selectValue (value: string): void {
+    this.valuePicker.selectedIndex = Array.from(this.valuePicker.options).findIndex((option): boolean => option.value === value);
+  }
+
+  private getInsertMode (): InsertModes {
+    return this.getAttribute('mode') as InsertModes ?? InsertModes.replace;
+  }
+
+  private setValue (): void {
+    const selectedValue = this.valuePicker.options[this.valuePicker.selectedIndex].value;
+
+    switch (this.getInsertMode()) {
+      case InsertModes.append:
+        this.linkedField.value += selectedValue;
+        break;
+      case InsertModes.prepend:
+        this.linkedField.value = selectedValue + this.linkedField.value;
+        break;
+      default:
+        this.linkedField.value = selectedValue;
+        break;
+    }
+    this.linkedField.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  }
+}
+
+window.customElements.define('typo3-formengine-valuepicker', ValuePicker);

package/backend/form-engine/field-wizard/value-slider.ts

@@ -0,0 +1,86 @@
+/*
+ * 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 ThrottleEvent from '@typo3/core/event/throttle-event';
+
+enum Format {
+  integer = 'integer',
+  decimal = 'decimal'
+}
+
+/**
+ * Module @typo3/backend/form-engine/field-wizard/value-slider
+ *
+ * @example
+ * <typo3-formengine-valueslider linked-field="css-selector" format="integer" precision="2">
+ *   <input>
+ * </typo3-formengine-valueslider>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+export class ValueSlider extends HTMLElement {
+  private valueSlider: HTMLInputElement = null;
+
+  public async connectedCallback(): Promise<void> {
+    if (this.valueSlider !== null) {
+      // Element is already initialized, which means the component has been rendered before. Nothing to do here.
+      return;
+    }
+
+    await DocumentService.ready();
+    this.valueSlider = this.querySelector('input') as HTMLInputElement;
+    if (this.valueSlider !== null) {
+      new ThrottleEvent('input', this.handleRangeChange, 25).bindTo(this.valueSlider);
+    }
+  }
+
+  private readonly handleRangeChange = (e: Event): void => {
+    const target = e.target as HTMLInputElement;
+    this.updateValue(target);
+    this.updateTooltipValue(target);
+  };
+
+  /**
+   * Update value of slider element
+   *
+   * @param {HTMLInputElement} element
+   */
+  private updateValue(element: HTMLInputElement): void {
+    const foreignField = document.querySelector(this.getAttribute('linked-field')) as HTMLInputElement;
+    foreignField.value = element.value;
+    foreignField.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+  }
+
+  /**
+   * @param {HTMLInputElement} element
+   */
+  private updateTooltipValue(element: HTMLInputElement): void {
+    let renderedValue;
+    const value = element.value;
+
+    switch (this.getAttribute('format')) {
+      case Format.decimal:
+        renderedValue = parseFloat(value).toFixed(Number(this.getAttribute('precision')) || 2);
+        break;
+      case Format.integer:
+      default:
+        renderedValue = parseInt(value, 10);
+    }
+
+    element.title = renderedValue.toString();
+  }
+}
+
+window.customElements.define('typo3-formengine-valueslider', ValueSlider);

package/backend/form-engine/inline-relation/ajax-dispatcher.ts

@@ -0,0 +1,124 @@
+/*
+ * 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 { JavaScriptItemProcessor } from '@typo3/core/java-script-item-processor';
+import Notification from '../../notification';
+import Utility from '../../utility';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+export interface Context {
+  config: object;
+  hmac: string;
+}
+
+interface Message {
+  title: string;
+  message: string;
+}
+
+export interface AjaxDispatcherResponse {
+  hasErrors: boolean;
+  messages: Message[];
+  stylesheetFiles: string[];
+  inlineData: object;
+  scriptItems?: any[];
+}
+
+export class AjaxDispatcher {
+  private readonly objectGroup: string = null;
+
+  constructor(objectGroup: string) {
+    this.objectGroup = objectGroup;
+  }
+
+  public newRequest(endpoint: string): AjaxRequest {
+    return new AjaxRequest(endpoint);
+  }
+
+  /**
+   * @param {String} routeName
+   */
+  public getEndpoint(routeName: string): string {
+    if (typeof TYPO3.settings.ajaxUrls[routeName] !== 'undefined') {
+      return TYPO3.settings.ajaxUrls[routeName];
+    }
+
+    throw 'Undefined endpoint for route "' + routeName + '"';
+  }
+
+  public send(request: AjaxRequest, params: Array<string>): Promise<AjaxDispatcherResponse> {
+    const sentRequest = request.post(this.createRequestBody(params)).then(async (response: AjaxResponse): Promise<AjaxDispatcherResponse> => {
+      return this.processResponse(await response.resolve());
+    });
+    sentRequest.catch((reason: Error): void => {
+      Notification.error('Error ' + reason.message);
+    });
+
+    return sentRequest;
+  }
+
+  private createRequestBody(input: Array<string>): Record<string, string> {
+    const body: Record<string, string> = {};
+    for (let i = 0; i < input.length; i++) {
+      body['ajax[' + i + ']'] = input[i];
+    }
+
+    body['ajax[context]'] = JSON.stringify(this.getContext());
+
+    return body;
+  }
+
+  private getContext(): Context {
+    let context: Context;
+
+    if (typeof TYPO3.settings.FormEngineInline.config[this.objectGroup] !== 'undefined'
+      && typeof TYPO3.settings.FormEngineInline.config[this.objectGroup].context !== 'undefined'
+    ) {
+      context = TYPO3.settings.FormEngineInline.config[this.objectGroup].context;
+    }
+
+    return context;
+  }
+
+  private processResponse(json: AjaxDispatcherResponse): AjaxDispatcherResponse {
+    if (json.hasErrors) {
+      for (const message of json.messages) {
+        Notification.error(message.title, message.message);
+      }
+    }
+
+    if (json.stylesheetFiles) {
+      document.querySelector('head').append(
+        ...json.stylesheetFiles.filter(file => file).map(file => {
+          const element = document.createElement('link');
+          element.rel = 'stylesheet';
+          element.type = 'text/css';
+          element.href = file;
+          return element;
+        })
+      );
+    }
+
+    if (typeof json.inlineData === 'object') {
+      TYPO3.settings.FormEngineInline = Utility.mergeDeep(TYPO3.settings.FormEngineInline, json.inlineData) as typeof TYPO3.settings.FormEngineInline;
+    }
+
+    if (json.scriptItems instanceof Array && json.scriptItems.length > 0) {
+      const processor = new JavaScriptItemProcessor();
+      processor.processItems(json.scriptItems);
+    }
+
+    return json;
+  }
+}

package/backend/form-engine/inline-relation/inline-response-interface.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 type { AjaxDispatcherResponse } from '@typo3/backend/form-engine/inline-relation/ajax-dispatcher';
+
+export interface InlineResponseInterface extends AjaxDispatcherResponse{
+  data: string;
+  inlineData: InlineData;
+  stylesheetFiles: Array<string>;
+  compilerInput?: CompilerInput,
+}
+
+interface InlineData {
+  config: { [key: string]: object };
+  map: { [key: string]: Array<string> };
+  nested: { [key: string]: Array<Array<string>> };
+}
+
+interface CompilerInput {
+  uid: string;
+  childChildUid: string;
+  parentConfig: { [key: string]: any };
+  delete?: Array<string>;
+  localize?: Array<LocalizeItem>;
+}
+
+interface LocalizeItem {
+  uid: string;
+  selectedValue: string;
+  remove?: number;
+}