typo3-typescript-sources 13.4.20

package/backend/form-engine/element/slug-element.ts

@@ -0,0 +1,243 @@
+/*
+ * 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 DocumentService from '@typo3/core/document-service';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import RegularEvent from '@typo3/core/event/regular-event';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+interface FieldOptions {
+  pageId: number;
+  recordId: number;
+  tableName: string;
+  fieldName: string;
+  config: { [key: string]: any };
+  listenerFieldNames: Record<string, string>;
+  language: number;
+  originalValue: string;
+  signature: string;
+  command: string;
+  parentPageId: number;
+  includeUidInValues: boolean;
+}
+
+interface Response {
+  hasConflicts: boolean;
+  manual: string;
+  proposal: ProposalModes;
+}
+
+enum Selectors {
+  toggleButton = '.t3js-form-field-slug-toggle',
+  recreateButton = '.t3js-form-field-slug-recreate',
+  inputField = '.t3js-form-field-slug-input',
+  readOnlyField = '.t3js-form-field-slug-readonly',
+  hiddenField = '.t3js-form-field-slug-hidden',
+}
+
+enum ProposalModes {
+  AUTO = 'auto',
+  RECREATE = 'recreate',
+  MANUAL = 'manual',
+}
+
+/**
+ * Module: @typo3/backend/form-engine/element/slug-element
+ * Logic for a TCA type "slug"
+ *
+ * For new records, changes on the other fields of the record (typically the record title) are listened
+ * on as well and the response is put in as "placeholder" into the input field.
+ *
+ * For new and existing records, the toggle switch will allow editors to modify the slug
+ *  - for new records, we only need to see if that is already in use or not (uniqueInSite), if it is taken, show a message.
+ *  - for existing records, we also check for conflicts, and check if we have subpages, or if we want to add a redirect (todo)
+ */
+class SlugElement {
+  private readonly options: FieldOptions = null;
+  private fullElement: HTMLElement = null;
+  private manuallyChanged: boolean = false;
+  private readOnlyField: HTMLInputElement = null;
+  private inputField: HTMLInputElement = null;
+  private hiddenField: HTMLInputElement = null;
+  private request: AjaxRequest = null;
+  private readonly fieldsToListenOn: Record<string, string> = {};
+
+  constructor(selector: string, options: FieldOptions) {
+    this.options = options;
+    this.fieldsToListenOn = this.options.listenerFieldNames || {};
+
+    DocumentService.ready().then((document: Document): void => {
+      this.fullElement = document.querySelector(selector);
+      this.inputField = this.fullElement.querySelector(Selectors.inputField);
+      this.readOnlyField = this.fullElement.querySelector(Selectors.readOnlyField);
+      this.hiddenField = this.fullElement.querySelector(Selectors.hiddenField);
+
+      this.registerEvents();
+    });
+  }
+
+  private registerEvents(): void {
+    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field: HTMLElement) => `[id="${field.id}"]`);
+    const recreateButton: HTMLButtonElement = this.fullElement.querySelector(Selectors.recreateButton);
+
+    // Listen on 'listenerFieldNames' for new pages. This is typically the 'title' field
+    // of a page to create slugs from the title when title is set / changed.
+    if (fieldsToListenOnList.length > 0) {
+      if (this.options.command === 'new') {
+        new DebounceEvent('input', (): void => {
+          if (!this.manuallyChanged) {
+            this.sendSlugProposal(ProposalModes.AUTO);
+          }
+        }).delegateTo(document, fieldsToListenOnList.join(','));
+      }
+    }
+
+    // Clicking the recreate button makes new slug proposal created from 'title' field or any defined postModifiers
+    if (fieldsToListenOnList.length > 0 || this.hasPostModifiersDefined()) {
+      new RegularEvent('click', (e: Event): void => {
+        e.preventDefault();
+        if (this.readOnlyField.classList.contains('hidden')) {
+          // Switch to readonly version - similar to 'new' page where field is
+          // written on the fly with title change
+          this.readOnlyField.classList.toggle('hidden', false);
+          this.inputField.classList.toggle('hidden', true);
+        }
+        this.sendSlugProposal(ProposalModes.RECREATE);
+      }).bindTo(recreateButton);
+    } else {
+      recreateButton.classList.add('disabled');
+      recreateButton.disabled = true;
+    }
+
+    // Scenario for new pages: Usually, slug is created from the page title. However, if user toggles the
+    // input field and feeds an own slug, and then changes title again, the slug should stay. manuallyChanged
+    // is used to track this.
+    new DebounceEvent('input', (): void => {
+      this.manuallyChanged = true;
+      this.sendSlugProposal(ProposalModes.MANUAL);
+    }).bindTo(this.inputField);
+
+    // Clicking the toggle button toggles the read only field and the input field.
+    // Also set the value of either the read only or the input field to the hidden field
+    // and update the value of the read only field after manual change of the input field.
+    const toggleButton = this.fullElement.querySelector(Selectors.toggleButton);
+    new RegularEvent('click', (e: Event): void => {
+      e.preventDefault();
+      const showReadOnlyField = this.readOnlyField.classList.contains('hidden');
+      this.readOnlyField.classList.toggle('hidden', !showReadOnlyField);
+      this.inputField.classList.toggle('hidden', showReadOnlyField);
+      if (!showReadOnlyField) {
+        this.hiddenField.value = this.inputField.value;
+        return;
+      }
+      if (this.inputField.value !== this.readOnlyField.value) {
+        this.readOnlyField.value = this.inputField.value;
+      } else {
+        this.manuallyChanged = false;
+        this.fullElement.querySelector('.t3js-form-proposal-accepted').classList.add('hidden');
+        this.fullElement.querySelector('.t3js-form-proposal-different').classList.add('hidden');
+      }
+      this.hiddenField.value = this.readOnlyField.value;
+    }).bindTo(toggleButton);
+  }
+
+  /**
+   * @param {ProposalModes} mode
+   */
+  private sendSlugProposal(mode: ProposalModes): void {
+    const input: Record<string, string> = {};
+    if (mode === ProposalModes.AUTO || mode === ProposalModes.RECREATE) {
+      Object.entries(this.getAvailableFieldsForProposalGeneration()).forEach((entry: [fieldName: string, field: HTMLInputElement|HTMLSelectElement]) => {
+        input[entry[0]] = entry[1].value;
+      });
+      if (this.options.includeUidInValues === true) {
+        input.uid = this.options.recordId.toString();
+      }
+    } else {
+      input.manual = this.inputField.value;
+    }
+    if (this.request instanceof AjaxRequest) {
+      this.request.abort();
+    }
+    this.request = (new AjaxRequest(TYPO3.settings.ajaxUrls.record_slug_suggest));
+    this.request.post({
+      values: input,
+      mode: mode,
+      tableName: this.options.tableName,
+      pageId: this.options.pageId,
+      parentPageId: this.options.parentPageId,
+      recordId: this.options.recordId,
+      language: this.options.language,
+      fieldName: this.options.fieldName,
+      command: this.options.command,
+      signature: this.options.signature,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data: Response = await response.resolve();
+      const visualProposal = '/' + data.proposal.replace(/^\//, '');
+      const acceptedProposalField: HTMLElement = this.fullElement.querySelector('.t3js-form-proposal-accepted');
+      const differentProposalField: HTMLElement = this.fullElement.querySelector('.t3js-form-proposal-different');
+
+      acceptedProposalField.classList.toggle('hidden', data.hasConflicts);
+      differentProposalField.classList.toggle('hidden', !data.hasConflicts);
+      (data.hasConflicts ? differentProposalField : acceptedProposalField).querySelector('span').innerText = visualProposal;
+
+      const isChanged = this.hiddenField.value !== data.proposal;
+      if (isChanged) {
+        this.fullElement.querySelector('input[data-formengine-input-name]')
+          .dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+      }
+      if (mode === ProposalModes.AUTO || mode === ProposalModes.RECREATE) {
+        this.readOnlyField.value = data.proposal;
+        this.hiddenField.value = data.proposal;
+        this.inputField.value = data.proposal;
+      } else {
+        this.hiddenField.value = data.proposal;
+      }
+    }).finally((): void => {
+      this.request = null;
+    });
+  }
+
+  /**
+   * Gets a list of all available fields that can be used for slug generation
+   *
+   * @return Record<string, string>
+   */
+  private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLElement } {
+    const availableFields: { [key: string]: HTMLElement } = {};
+    for (const [fieldName, selector] of Object.entries(this.fieldsToListenOn)) {
+      let field = document.querySelector('[data-formengine-input-name="' + selector + '"]') as HTMLElement;
+      if (field === null) {
+        // Also check for fields, which do not point to a hidden input field (e.g. "input type=hidden", readOnly, or select fields)
+        field = document.querySelector('[name="' + selector + '"]') as HTMLElement;
+      }
+      if (field !== null) {
+        availableFields[fieldName] = field;
+      }
+    }
+
+    return availableFields;
+  }
+
+  /**
+   * Check whether the slug element has post modifiers defined for slug generation
+   *
+   * @return boolean
+   */
+  private hasPostModifiersDefined(): boolean {
+    return Array.isArray(this.options.config.generatorOptions.postModifiers) && this.options.config.generatorOptions.postModifiers.length > 0;
+  }
+}
+
+export default SlugElement;

package/backend/form-engine/element/suggest/result-container.ts

@@ -0,0 +1,118 @@
+/*
+ * 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 { css, html, LitElement, type TemplateResult } from 'lit';
+import { lll } from '@typo3/core/lit-helper';
+import './result-item';
+import type { ResultItemInterface } from './result-item';
+
+@customElement('typo3-backend-formengine-suggest-result-container')
+export class ResultContainer extends LitElement {
+  @property({ type: Object }) results: ResultItemInterface[]|null = null;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('keydown', this.handleKeyDown);
+
+    super.disconnectedCallback();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    let content;
+    if (this.results !== null) {
+      if (this.results.length === 0) {
+        content = html`<div class="alert alert-info">${lll('search.no_records_found')}</div>`;
+      } else {
+        content = html`${this.results.map((result: ResultItemInterface) => this.renderResultItem(result))}`;
+      }
+    }
+
+    return html`<typo3-backend-formengine-suggest-result-list>${content}</typo3-backend-formengine-suggest-result-list>`;
+  }
+
+  private renderResultItem(result: ResultItemInterface): TemplateResult {
+    return html`<typo3-backend-formengine-suggest-result-item
+      tabindex="1"
+      icon="${JSON.stringify(result.icon)}"
+      uid="${result.uid}"
+      table="${result.table}"
+      label="${result.label}"
+      path="${result.path}">
+    </typo3-backend-formengine-suggest-result-item>`;
+  }
+
+  private handleKeyDown(e: KeyboardEvent): void {
+    e.preventDefault();
+
+    if (e.key === 'Escape') {
+      (this.closest('.t3-form-suggest-container').querySelector('input[type="search"]') as HTMLInputElement).focus();
+      this.hidden = true;
+
+      return;
+    }
+
+    if (!['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      return;
+    }
+
+    if (document.activeElement.tagName.toLowerCase() !== 'typo3-backend-formengine-suggest-result-item') {
+      return;
+    }
+
+    let focusableCandidate;
+    if (e.key === 'ArrowDown') {
+      focusableCandidate = document.activeElement.nextElementSibling;
+    } else {
+      focusableCandidate = document.activeElement.previousElementSibling;
+      if (focusableCandidate === null) {
+        // No possible candidate found, fall back to search input
+        focusableCandidate = this.closest('.t3-form-suggest-container').querySelector('input[type="search"]');
+      }
+    }
+
+    if (focusableCandidate !== null) {
+      (focusableCandidate as HTMLElement).focus();
+    }
+  }
+}
+
+@customElement('typo3-backend-formengine-suggest-result-list')
+export class ResultList extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-formengine-suggest-result-container': ResultContainer;
+    'typo3-backend-formengine-suggest-result-list': ResultList;
+  }
+}

package/backend/form-engine/element/suggest/result-item.ts

@@ -0,0 +1,90 @@
+/*
+ * 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 { html, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import '@typo3/backend/element/icon-element';
+
+export interface ResultItemInterface {
+  icon: Record<string, string>;
+  uid: number;
+  table: string;
+  label: string;
+  path: string;
+}
+
+@customElement('typo3-backend-formengine-suggest-result-item')
+export class ResultItem extends PseudoButtonLitElement {
+  @property({ type: Object }) icon: Record<string, string>;
+  @property({ type: Number }) uid: number;
+  @property({ type: String }) table: string;
+  @property({ type: String }) label: string;
+  @property({ type: String }) path: string;
+
+  constructor() {
+    super();
+
+    this.addEventListener('blur', this.onBlur);
+  }
+
+  protected override buttonActivated(e: Event): void {
+    this.dispatchItemChosenEvent(e.currentTarget as Element);
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="formengine-suggest-result-item-icon">
+        <typo3-backend-icon title="${this.icon.title}" identifier="${this.icon.identifier}" overlay="${this.icon.overlay}" size="small"></typo3-backend-icon>
+      </div>
+      <div class="formengine-suggest-result-item-label">
+        ${this.label} <small>[${this.uid}] ${this.path}</small>
+      </div>
+    `;
+  }
+
+  private onBlur(e: FocusEvent): void {
+    let closeResultContainer = true;
+    const relatedElement = e.relatedTarget as HTMLElement|null;
+    const resultContainer = this.closest('typo3-backend-formengine-suggest-result-container') as HTMLElement;
+
+    if (relatedElement?.tagName.toLowerCase() === 'typo3-backend-formengine-suggest-result-item') {
+      closeResultContainer = false;
+    }
+
+    if (relatedElement?.matches('input[type="search"]') && resultContainer.contains(relatedElement)) {
+      closeResultContainer = false;
+    }
+
+    resultContainer.hidden = closeResultContainer;
+  }
+
+  private dispatchItemChosenEvent(selectedItem: Element): void {
+    selectedItem.closest('typo3-backend-formengine-suggest-result-container').dispatchEvent(new CustomEvent('typo3:formengine:suggest-item-chosen', {
+      detail: {
+        element: selectedItem
+      }
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-formengine-suggest-result-item': ResultItem;
+  }
+}

package/backend/form-engine/element/table-permission-element.ts

@@ -0,0 +1,101 @@
+/*
+ * 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';
+import { selector } from '@typo3/core/literals';
+import { MultiRecordSelectionSelectors } from '@typo3/backend/multi-record-selection';
+
+enum Permissions {
+  none = 'none',
+  select = 'select',
+  modify = 'modify',
+}
+
+/**
+ * Module: @typo3/backend/form-engine/element/table-permissions-element
+ *
+ * Functionality for the tablePermission form element
+ *
+ * @example
+ * <typo3-formengine-element-tablepermission selectStateFieldName="<field>" modifyStateFieldName="<field>">
+ *   ...
+ * </typo3-formengine-element-tablepermission>
+ *
+ * This is based on W3C custom elements ("web components") specification, see
+ * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
+ */
+class TablePermissionElement extends HTMLElement {
+  private selectStateField: HTMLInputElement = null;
+  private modifyStateField: HTMLInputElement = null;
+
+  public async connectedCallback(): Promise<void> {
+    await DocumentService.ready();
+    this.selectStateField = <HTMLInputElement>this.querySelector(selector`input[name=${this.getAttribute('selectStateFieldName') || '' as string}]`);
+    this.modifyStateField = <HTMLInputElement>this.querySelector(selector`input[name=${this.getAttribute('modifyStateFieldName') || '' as string}]`);
+
+    if (this.selectStateField === null || this.modifyStateField === null) {
+      return;
+    }
+
+    this.registerEventHandler();
+  }
+
+  private registerEventHandler() {
+    new RegularEvent('change', (e: CustomEvent): void => {
+      this.handleSingleItemChange(e.target as HTMLInputElement);
+    }).delegateTo(this.querySelector('table'), '.t3js-table-permissions-item');
+    new RegularEvent('multiRecordSelection:checkbox:state:changed', (e: CustomEvent): void => {
+      const name = (e.target as HTMLInputElement).name;
+      if (this.querySelectorAll(selector`input[name="${name}"]:checked`).length === 0) {
+        const item: HTMLInputElement = this.querySelector(selector`input[name="${name}"]`) as HTMLInputElement;
+        item.value = Permissions.none;
+        this.handleSingleItemChange(item);
+        (this.querySelector(selector`input[name="${name}"][value="${Permissions.none}"]`) as HTMLInputElement).checked = true;
+      }
+    }).delegateTo(this.querySelector('table') , MultiRecordSelectionSelectors.checkboxSelector);
+  }
+
+  private handleSingleItemChange(target: HTMLInputElement): void {
+    switch (target.value) {
+      case Permissions.select:
+        this.addItem(target.dataset.table, this.selectStateField);
+        this.removeItem(target.dataset.table, this.modifyStateField);
+        break;
+      case Permissions.modify:
+        this.addItem(target.dataset.table, this.selectStateField);
+        this.addItem(target.dataset.table, this.modifyStateField);
+        break;
+      case Permissions.none:
+      default:
+        this.removeItem(target.dataset.table, this.selectStateField);
+        this.removeItem(target.dataset.table, this.modifyStateField);
+        break;
+    }
+  }
+
+  private removeItem(table: string, field: HTMLInputElement) {
+    field.value = (field.value.length ? field.value.split(',') : []).filter(item => item !== table).join(',');
+  }
+
+  private addItem(table: string, field: HTMLInputElement) {
+    const list: string[] = field.value.length ? field.value.split(',') : [];
+    if (list.includes(table)) {
+      return;
+    }
+    list.push(table);
+    field.value = list.join(',');
+  }
+}
+
+window.customElements.define('typo3-formengine-element-tablepermission', TablePermissionElement);