typo3-typescript-sources 13.4.20

package/backend/layout-module/paste.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 DocumentService from '@typo3/core/document-service';
+/**
+ * Module: @typo3/backend/layout-module/paste
+ * Dynamically adds "Paste" Icons in the Page Layout module (Web => Page)
+ * and triggers a modal window. which then calls the AjaxDataHandler
+ * to execute the action to paste the current clipboard contents.
+ */
+import DataHandler from '../ajax-data-handler';
+import { default as Modal, type ModalElement, type Button } from '@typo3/backend/modal';
+import Severity from '../severity';
+import '@typo3/backend/element/icon-element';
+import { SeverityEnum } from '../enum/severity';
+import RegularEvent from '@typo3/core/event/regular-event';
+import type ResponseInterface from '../ajax-data-handler/response-interface';
+
+type PasteOptions = {
+  itemOnClipboardUid: number;
+  itemOnClipboardTitle: string;
+  copyMode: string;
+};
+
+class Paste {
+  private readonly itemOnClipboardUid: number = 0;
+  private readonly itemOnClipboardTitle: string = '';
+  private readonly copyMode: string = '';
+  private readonly elementIdentifier: string = '.t3js-page-ce';
+  private pasteAfterLinkTemplate: string = '';
+  private pasteIntoLinkTemplate: string = '';
+
+  /**
+   * initializes paste icons for all content elements on the page
+   */
+  constructor(args: PasteOptions) {
+    this.itemOnClipboardUid = args.itemOnClipboardUid;
+    this.itemOnClipboardTitle = args.itemOnClipboardTitle;
+    this.copyMode = args.copyMode;
+
+    DocumentService.ready().then((): void => {
+      if (document.querySelectorAll('.t3js-page-columns').length > 0) {
+        this.generateButtonTemplates();
+        this.activatePasteIcons();
+        this.initializeEvents();
+      }
+    });
+  }
+
+  private static determineColumn(element: HTMLElement): number {
+    const columnContainer = element.closest('[data-colpos]') as HTMLElement|null;
+    return parseInt(columnContainer?.dataset?.colpos ?? '0', 10);
+  }
+
+  private initializeEvents(): void
+  {
+    new RegularEvent('click', (evt: Event, target: HTMLElement): void => {
+      evt.preventDefault();
+
+      this.activatePasteModal(target);
+    }).delegateTo(document, '.t3js-paste');
+  }
+
+  private generateButtonTemplates(): void {
+    if (!this.itemOnClipboardUid) {
+      return;
+    }
+    this.pasteAfterLinkTemplate = '<button'
+      + ' type="button"'
+      + ' class="t3js-paste t3js-paste' + (this.copyMode ? '-' + this.copyMode : '') + ' t3js-paste-after btn btn-default btn-sm"'
+      + ' title="' + TYPO3.lang?.pasteAfterRecord + '">'
+      + '<typo3-backend-icon identifier="actions-document-paste-into" size="small"></typo3-backend-icon>'
+      + '</button>';
+    this.pasteIntoLinkTemplate = '<button'
+      + ' type="button"'
+      + ' class="t3js-paste t3js-paste' + (this.copyMode ? '-' + this.copyMode : '') + ' t3js-paste-into btn btn-default btn-sm"'
+      + ' title="' + TYPO3.lang?.pasteIntoColumn + '">'
+      + '<typo3-backend-icon identifier="actions-document-paste-into" size="small"></typo3-backend-icon>'
+      + '</button>';
+  }
+
+  /**
+   * activates the paste into / paste after icons outside the context menus
+   */
+  private activatePasteIcons(): void {
+    if (this.pasteAfterLinkTemplate && this.pasteIntoLinkTemplate) {
+      document.querySelectorAll('.t3js-page-new-ce').forEach((el: HTMLElement): void => {
+        const template = el.parentElement.dataset.page ? this.pasteIntoLinkTemplate : this.pasteAfterLinkTemplate;
+        el.append(document.createRange().createContextualFragment(template));
+      });
+    }
+  }
+
+  /**
+   * generates the paste into / paste after modal
+   */
+  private activatePasteModal(element: HTMLElement): void {
+    const title = (TYPO3.lang['paste.modal.title.paste'] || 'Paste record') + ': "' + this.itemOnClipboardTitle + '"';
+    const content = TYPO3.lang['paste.modal.paste'] || 'Do you want to paste the record to this position?';
+
+    let buttons: Array<Button> = [];
+    buttons = [
+      {
+        text: TYPO3.lang['paste.modal.button.cancel'] || 'Cancel',
+        active: true,
+        btnClass: 'btn-default',
+        trigger: (e: Event, modal: ModalElement): void => modal.hideModal(),
+      },
+      {
+        text: TYPO3.lang['paste.modal.button.paste'] || 'Paste',
+        btnClass: 'btn-' + Severity.getCssClass(SeverityEnum.warning),
+        trigger: (e: Event, modal: ModalElement): void => {
+          modal.hideModal();
+          this.execute(element);
+        },
+      },
+    ];
+
+    Modal.show(title, content, SeverityEnum.warning, buttons);
+  }
+
+  /**
+   * Send an AJAX request via the AjaxDataHandler
+   */
+  private execute(element: HTMLElement): void {
+    const colPos = Paste.determineColumn(element);
+    const closestElement = element.closest(this.elementIdentifier) as HTMLElement;
+    const targetFound = closestElement.dataset.uid;
+    let targetPid;
+    if (typeof targetFound === 'undefined') {
+      targetPid = parseInt(closestElement.dataset.page, 10);
+    } else {
+      targetPid = 0 - parseInt(targetFound, 10);
+    }
+    const language = parseInt((element.closest('[data-language-uid]') as HTMLElement).dataset.languageUid, 10);
+    const parameters = {
+      CB: {
+        paste: 'tt_content|' + targetPid,
+        pad: 'normal',
+        update: {
+          colPos: colPos,
+          sys_language_uid: language,
+        },
+      },
+    };
+
+    DataHandler.process(parameters).then((result: ResponseInterface): void => {
+      if (!result.hasErrors) {
+        window.location.reload();
+      }
+    });
+  }
+}
+
+export default Paste;

package/backend/link-browser.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+
+export interface LinkAttributes {
+  [s: string]: any;
+}
+
+export interface LinkBrowserFieldChangeFunc {
+  name: string;
+  data: Record<string, string>;
+}
+
+export interface LinkBrowserParameters {
+  table: string;
+  uid: string;
+  pid: string;
+  field?: string;
+  fieldName?: string;
+  formName?: string;
+  itemName?: string;
+  hmac?: string;
+  recordType?: string;
+  richtextConfigurationName?: string;
+  fieldChangeFunc?:LinkBrowserFieldChangeFunc[];
+  fieldChangeFuncHash?: string;
+  curUrl?: Record<string, string>,
+  currentValue?: string;
+  currentSelectedValues?: string;
+}
+
+/**
+ * Module: @typo3/backend/link-browser
+ * @exports @typo3/backend/link-browser
+ */
+class LinkBrowser {
+  public parameters: LinkBrowserParameters;
+  private readonly linkAttributeFields: LinkAttributes;
+
+  constructor() {
+    this.parameters = JSON.parse(document.body.dataset.linkbrowserParameters || '{}');
+    this.linkAttributeFields = JSON.parse(document.body.dataset.linkbrowserAttributeFields || '{}');
+
+    new RegularEvent('click', (event: PointerEvent): void => {
+      event.preventDefault();
+      this.finalizeFunction(document.body.dataset.linkbrowserCurrentLink);
+    }).delegateTo(document, 'button.t3js-linkCurrent');
+
+    new RegularEvent('change', this.loadTarget)
+      .delegateTo(document, '.t3js-targetPreselect');
+  }
+
+  public getLinkAttributeValues(): LinkAttributes {
+    const linkAttributeValues: LinkAttributes = {};
+    for (const fieldName of this.linkAttributeFields.values()) {
+      const linkAttribute: HTMLInputElement = document.querySelector('[name="l' + fieldName + '"]');
+      if (linkAttribute !== null) {
+        linkAttributeValues[fieldName] = linkAttribute.value;
+      }
+    }
+
+    return linkAttributeValues;
+  }
+
+  public loadTarget(this: HTMLSelectElement): void {
+    const linkTarget: HTMLInputElement = document.querySelector('.t3js-linkTarget');
+    if (linkTarget !== null) {
+      linkTarget.value = this.value;
+      this.selectedIndex = 0;
+    }
+  }
+
+  public finalizeFunction(link: string): void {
+    throw 'The link browser requires the finalizeFunction to be set in order for ' + link + ' to be handled. Seems like you discovered a major bug.';
+  }
+}
+
+export default new LinkBrowser();

package/backend/live-search/element/backend-search.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 } from 'lit/decorators';
+import { LitElement } from 'lit';
+
+/**
+ * Module: @typo3/backend/live-search/element/backend-search
+ * Simple wrapper element around search container
+ * @exports @typo3/backend/live-search/element/backend-search
+ */
+@customElement('typo3-backend-live-search')
+export class BackendSearch extends LitElement {
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search': BackendSearch;
+  }
+}

package/backend/live-search/element/hint.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { markdown } from '@typo3/core/directive/markdown';
+import '@typo3/backend/element/icon-element';
+
+@customElement('typo3-backend-live-search-hint')
+export class Hint extends LitElement {
+  @property({ type: String }) hint: string;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult | symbol {
+    if (this.hint === '') {
+      return nothing;
+    }
+    return html`<typo3-backend-icon identifier="actions-lightbulb-on" size="small"></typo3-backend-icon> ${markdown(this.hint, 'minimal')}`;
+  }
+}

package/backend/live-search/element/provider/default-result-item.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 { html, LitElement, nothing, type TemplateResult } from 'lit';
+import '@typo3/backend/element/icon-element';
+import { lll } from '@typo3/core/lit-helper';
+
+@customElement('typo3-backend-live-search-result-item-default')
+export class DefaultProviderResultItem extends LitElement {
+  @property({ type: Object, attribute: false }) icon: Record<string, string>;
+  @property({ type: String, attribute: false }) itemTitle: string;
+  @property({ type: String, attribute: false }) typeLabel: string;
+  @property({ type: Object, attribute: false }) extraData: { [key: string]: any };
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="livesearch-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="livesearch-result-item-summary">
+        <div class="livesearch-result-item-title">
+          <div class="livesearch-result-item-title-contentlabel">${this.itemTitle}</div>
+          ${this.extraData.inWorkspace ? html`<div class="livesearch-result-item-title-indicator"><typo3-backend-icon title="${lll('liveSearch.versionizedRecord')}" identifier="actions-dot" size="small" class="text-warning"></typo3-backend-icon></div>` : nothing}
+        </div>
+        ${this.extraData.breadcrumb !== undefined ? html`<small>${this.extraData.breadcrumb}</small>` : nothing}
+      </div>
+
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item-default': DefaultProviderResultItem;
+  }
+}

package/backend/live-search/element/provider/page-provider-result-item.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 { html, LitElement, nothing, type TemplateResult } from 'lit';
+import '@typo3/backend/element/icon-element';
+import { lll } from '@typo3/core/lit-helper';
+
+@customElement('typo3-backend-live-search-result-item-page-provider')
+export default class PageProviderResultItem extends LitElement {
+  @property({ type: Object, attribute: false }) icon: Record<string, string>;
+  @property({ type: String, attribute: false }) itemTitle: string;
+  @property({ type: String, attribute: false }) typeLabel: string;
+  @property({ type: Object, attribute: false }) extraData: { [key: string]: any };
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="livesearch-result-item-icon">
+        <typo3-backend-icon title="${this.icon.title}" identifier="${this.icon.identifier}" overlay="${this.icon.overlay}" size="small"></typo3-backend-icon>
+        <typo3-backend-icon title="${this.extraData.flagIcon.title}" identifier="${this.extraData.flagIcon.identifier}" size="small"></typo3-backend-icon>
+      </div>
+      <div class="livesearch-result-item-summary">
+        <div class="livesearch-result-item-title">
+          <div class="livesearch-result-item-title-contentlabel">${this.itemTitle}</div>
+          ${this.extraData.inWorkspace ? html`<div class="livesearch-result-item-title-indicator"><typo3-backend-icon title="${lll('liveSearch.versionizedRecord')}" identifier="actions-dot" size="small" class="text-warning"></typo3-backend-icon></div>` : nothing}
+        </div>
+        <small>${this.extraData.breadcrumb}</small>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item-page-provider': PageProviderResultItem;
+  }
+}

package/backend/live-search/element/result/item/action/action-container.ts

@@ -0,0 +1,135 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { css, html, LitElement, type TemplateResult } from 'lit';
+import { type Action } from './action';
+import type { ResultItemActionInterface, ResultItemInterface } from '../item';
+import type { InvokeActionEventData } from '@typo3/backend/live-search/element/result/result-container';
+
+export const componentName = 'typo3-backend-live-search-result-item-action-container';
+
+@customElement('typo3-backend-live-search-result-item-action-container')
+export class ActionContainer extends LitElement {
+  @property({ type: Object, attribute: false }) resultItem: ResultItemInterface|null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`<typo3-backend-live-search-result-action-list>
+      ${this.resultItem.actions.map((action: ResultItemActionInterface) => this.renderActionItem(this.resultItem, action))}
+    </typo3-backend-live-search-result-action-list>`;
+  }
+
+  private renderActionItem(resultItem: ResultItemInterface, action: ResultItemActionInterface): TemplateResult {
+    return html`<typo3-backend-live-search-result-item-action
+      .resultItem="${resultItem}"
+      .resultItemAction="${action}"
+      @click="${() => this.invokeAction(this.resultItem, action)}">
+    </typo3-backend-live-search-result-item-action>`;
+  }
+
+  private invokeAction(resultItem: ResultItemInterface, action: ResultItemActionInterface): void {
+    this.closest('typo3-backend-live-search-result-container').dispatchEvent(new CustomEvent<InvokeActionEventData>('livesearch:invoke-action', {
+      detail: {
+        resultItem: resultItem,
+        action: action
+      }
+    }));
+  }
+}
+
+@customElement('typo3-backend-live-search-result-action-list')
+export class ActionList extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  private parentContainer: HTMLElement;
+  private resultItemContainer: HTMLElement;
+
+  public override async connectedCallback(): Promise<void> {
+    await DocumentService.ready();
+    this.parentContainer = this.closest('typo3-backend-live-search-result-container');
+    this.resultItemContainer = this.parentContainer.querySelector('typo3-backend-live-search-result-item-container');
+
+    super.connectedCallback();
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  public override disconnectedCallback(): void {
+    this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('keyup', this.handleKeyUp);
+
+    super.disconnectedCallback();
+  }
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+
+  private handleKeyDown(e: KeyboardEvent): void {
+    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft'].includes(e.key)) {
+      return;
+    }
+    if (document.activeElement.tagName.toLowerCase() !== 'typo3-backend-live-search-result-item-action') {
+      return;
+    }
+
+    e.preventDefault();
+
+    let focusableCandidate;
+    if (e.key === 'ArrowDown') {
+      focusableCandidate = document.activeElement.nextElementSibling;
+    } else if (e.key === 'ArrowUp') {
+      focusableCandidate = document.activeElement.previousElementSibling;
+    } else if (e.key === 'ArrowLeft') {
+      focusableCandidate = this.resultItemContainer.querySelector('typo3-backend-live-search-result-item.active');
+    }
+
+    if (focusableCandidate !== null) {
+      (focusableCandidate as HTMLElement).focus();
+    }
+  }
+
+  private handleKeyUp(e: KeyboardEvent): void {
+    // @todo Enter should (probably) be handled in keydown, like buttons do
+    if (!['Enter', ' '].includes(e.key)) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const actionElement = e.target as Action;
+    this.parentContainer.dispatchEvent(new CustomEvent<InvokeActionEventData>('livesearch:invoke-action', {
+      detail: {
+        resultItem: actionElement.resultItem,
+        action: actionElement.resultItemAction
+      }
+    }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item-action-container': ActionContainer;
+    'typo3-backend-live-search-result-action-list': ActionList;
+  }
+}

package/backend/live-search/element/result/item/action/action.ts

@@ -0,0 +1,56 @@
+/*
+ * 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 { ifDefined } from 'lit/directives/if-defined';
+import { html, LitElement, type TemplateResult } from 'lit';
+import '@typo3/backend/element/icon-element';
+import type { ResultItemActionInterface, ResultItemInterface } from '../item';
+
+@customElement('typo3-backend-live-search-result-item-action')
+export class Action extends LitElement {
+  @property({ type: Object, attribute: false }) resultItem: ResultItemInterface;
+  @property({ type: Object, attribute: false }) resultItemAction: ResultItemActionInterface;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div>
+        <div class="livesearch-result-item-icon">
+          <typo3-backend-icon identifier="${ifDefined(this.resultItemAction.icon.identifier || 'actions-arrow-right')}" overlay="${this.resultItemAction.icon.overlay}" size="small"></typo3-backend-icon>
+        </div>
+        <div class="livesearch-result-item-title">
+          ${this.resultItemAction.label}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-live-search-result-item-action': Action;
+  }
+}