typo3-typescript-sources 13.4.20

package/styleguide/filter.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 DocumentService from '@typo3/core/document-service';
+import DateTimePicker from '@typo3/backend/date-time-picker';
+
+DocumentService.ready().then(() => {
+  const dateTimePickers: NodeListOf<HTMLInputElement>|null = document.querySelectorAll('.t3js-datetimepicker');
+  dateTimePickers?.forEach((element) => {
+    DateTimePicker.initialize(element);
+  });
+});

package/styleguide/find-icons.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 DebounceEvent from '@typo3/core/event/debounce-event';
+
+DocumentService.ready().then(() => {
+  const searchField = document.getElementById('search-field') as HTMLInputElement;
+  const filterContainer = document.getElementById('t3js-filter-container');
+
+  new RegularEvent('click', (e: MouseEvent, target: HTMLButtonElement): void => {
+    e.preventDefault();
+
+    searchField.value = target.dataset.filter;
+    filterContainer.dispatchEvent(new CustomEvent('typo3:styleguide:update-icons', {
+      detail: {
+        searchValue: searchField.value
+      }
+    }));
+  }).delegateTo(document, '.t3js-filter-buttons button');
+
+  new DebounceEvent('input', (e: Event): void => {
+    filterContainer.dispatchEvent(new CustomEvent('typo3:styleguide:update-icons', {
+      detail: {
+        searchValue: (e.target as HTMLInputElement).value
+      }
+    }));
+  }).bindTo(searchField);
+
+  new RegularEvent('typo3:styleguide:update-icons', (e: CustomEvent): void => {
+    const typedQuery = e.detail.searchValue;
+    const iconContainerElements = Array.from(filterContainer.querySelectorAll('[data-icon-identifier]') as NodeListOf<HTMLElement>);
+    if (typedQuery === '') {
+      iconContainerElements.map((iconContainer) => iconContainer.hidden = false);
+    } else {
+      if (typedQuery.includes('type:')) {
+        const [ , type ] = typedQuery.split(':');
+
+        switch (type.toLowerCase()) {
+          case 'bitmap':
+            iconContainerElements.forEach((iconContainer): void => {
+              const containsIconsOfType = iconContainer.querySelector('img:not([src$=".svg"])') !== null;
+              iconContainer.hidden = !containsIconsOfType;
+            });
+            break;
+          case 'font':
+            iconContainerElements.forEach((iconContainer): void => {
+              const containsIconsOfType = iconContainer.querySelector('i.fa') !== null;
+              iconContainer.hidden = !containsIconsOfType;
+            });
+            break;
+          case 'vector':
+            iconContainerElements.forEach((iconContainer): void => {
+              const containsIconsOfType = iconContainer.querySelector('img[src$=".svg"]') !== null;
+              iconContainer.hidden = !containsIconsOfType;
+            });
+            break;
+          default:
+        }
+      } else {
+        iconContainerElements.forEach((iconContainer): void => {
+          iconContainer.hidden = !iconContainer.matches('[data-icon-identifier*="' + typedQuery + '"]');
+        });
+      }
+    }
+  }).bindTo(filterContainer);
+});

package/styleguide/processing-indicator.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 NProgress from 'nprogress';
+import Notification from '@typo3/backend/notification';
+import RegularEvent from '@typo3/core/event/regular-event';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+let itemProcessing = 0;
+
+function setButtonStates(scope: HTMLElement, action: string): void {
+  for (const _button of scope.children) {
+    if (_button.nodeType !== 1 || _button.nodeName !== 'BUTTON') {
+      continue;
+    }
+
+    const button = _button as HTMLElement;
+    if (button.dataset.generatorAction === action) {
+      button.classList.remove('disabled');
+      button.hidden = false;
+      button.querySelector('typo3-backend-icon').identifier = 'actions-' + action;
+    } else {
+      button.classList.add('disabled');
+      button.hidden = true;
+    }
+  }
+}
+
+new RegularEvent('click', (e: MouseEvent, target: HTMLButtonElement): void => {
+  e.preventDefault();
+
+  for (const children of target.parentElement.children) {
+    if (children.nodeType === 1) {
+      children.classList.add('disabled');
+    }
+  }
+  target.querySelector('typo3-backend-icon').identifier = 'spinner-circle';
+
+  NProgress.start();
+  itemProcessing++;
+
+  // Trigger generate action
+  new AjaxRequest(target.dataset.href).get().then(async (response: AjaxResponse): Promise<void> => {
+    const json = await response.resolve('application/json');
+    if (json.status === false) {
+      NProgress.done();
+      Notification.error(json.title, json.body, 5);
+      target.querySelector('typo3-backend-icon').identifier = 'actions-' + target.dataset.generatorAction;
+      target.classList.remove('disabled');
+      return;
+    }
+    itemProcessing--;
+    Notification.showMessage(json.title, json.body, json.status, 5);
+    // Hide nprogress only if all items done loading/processing
+    if (itemProcessing === 0) {
+      NProgress.done();
+    }
+    // Set button states
+    setButtonStates(target.parentElement, target.dataset.generatorAction === 'plus' ? 'delete' : 'plus');
+  }).catch((error: AjaxResponse): void => {
+    // Action failed, reset to its original state
+    NProgress.done();
+    Notification.error('', error.response.status + ' ' + error.response.statusText, 5);
+    target.querySelector('typo3-backend-icon').identifier = 'actions-' + target.dataset.generatorAction;
+    target.classList.remove('disabled');
+  });
+}).delegateTo(document, '.t3js-generator-action');

package/styleguide/render-notifications.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 Notification from '@typo3/backend/notification';
+import ImmediateAction from '@typo3/backend/action-button/immediate-action';
+import DeferredAction from '@typo3/backend/action-button/deferred-action';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Action used when an operation execution time is unknown.
+ */
+class RenderNotifications {
+  constructor() {
+    this.registerEvents();
+  }
+
+  private registerEvents() {
+    new RegularEvent('click', (e: MouseEvent, target: HTMLButtonElement): void => {
+      const severity = target.dataset.severity as 'notice' | 'info' | 'success' | 'warning' | 'error';
+      const title = target.dataset.title;
+      const message = target.dataset.message;
+      const duration = parseInt(target.dataset.duration, 10);
+      const includeActions = target.dataset.includeActions === '1';
+
+      Notification[severity](title, message, duration, this.createActions(includeActions));
+    }).delegateTo(document, 'button[data-action="trigger-notification"]');
+  }
+
+  private createActions(includeActions: boolean) {
+    if (!includeActions) {
+      return [];
+    }
+
+    return [
+      {
+        label: 'Immediate action',
+        action: new ImmediateAction(function () {
+          alert('Immediate action done');
+        }),
+      },
+      {
+        label: 'Deferred action',
+        action: new DeferredAction(function () {
+          return new Promise(resolve => setTimeout(() => {
+            alert('Deferred action done after 3000 ms');
+            resolve();
+          }, 3000));
+        }),
+      }
+    ];
+  }
+}
+
+export default new RenderNotifications();

package/sys-note/element/delete-button.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import Modal from '@typo3/backend/modal';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import DeferredAction from '@typo3/backend/action-button/deferred-action';
+import AjaxDataHandler from '@typo3/backend/ajax-data-handler';
+import Viewport from '@typo3/backend/viewport';
+import type ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface';
+
+/**
+ * Module: @typo3/sys-note/delete-button
+ *
+ * @example
+ * <typo3-sysnote-delete-button uid="42" return-url="">
+ *   ...
+ * </typo3-sysnote-delete-button>
+ */
+@customElement('typo3-sysnote-delete-button')
+export class DeleteButton extends PseudoButtonLitElement {
+  @property({ type: Number }) uid: number;
+  @property({ type: String, attribute: 'return-url' }) returnUrl: string;
+  @property({ type: String, attribute: 'modal-title' }) modalTitle: string;
+  @property({ type: String, attribute: 'modal-content' }) modalContent: string;
+  @property({ type: String, attribute: 'modal-button-ok' }) okButtonLabel: string;
+  @property({ type: String, attribute: 'modal-button-cancel' }) cancelButtonLabel: string;
+
+  protected override buttonActivated(): void {
+    Modal.advanced({
+      content: this.modalContent,
+      title: this.modalTitle,
+      severity: SeverityEnum.warning,
+      size: Modal.sizes.small,
+      buttons: [
+        {
+          text: this.cancelButtonLabel || 'Close',
+          btnClass: 'btn-default',
+          trigger: function(): void {
+            Modal.dismiss();
+          },
+        }, {
+          text: this.okButtonLabel || 'OK',
+          btnClass: 'btn-warning',
+          action: new DeferredAction(async (): Promise<void> => {
+            await this.deleteRecord();
+          }),
+        },
+      ]
+    });
+  }
+
+  private async deleteRecord(): Promise<ResponseInterface> {
+    const processing = AjaxDataHandler.process(`cmd[sys_note][${this.uid}][delete]=1`);
+    processing.then((): void => {
+      Viewport.ContentContainer.setUrl(this.returnUrl);
+    });
+
+    return processing;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-sysnote-delete-button': DeleteButton;
+  }
+}

package/tstemplate/constant-editor.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 '@typo3/backend/color-picker';
+
+enum Selectors {
+  editIconSelector = '.t3js-toggle',
+}
+
+/**
+ * Module: @typo3/tstemplate/constant-editor
+ * Various functions related to the Constant Editor
+ * e.g. updating the field and working with colors
+ */
+class ConstantEditor {
+  constructor() {
+    DocumentService.ready().then((document: Document): void => {
+      if (document.querySelectorAll('typo3-backend-color-picker').length) {
+        import('@typo3/backend/color-picker');
+      }
+      this.registerEvents();
+    });
+  }
+
+  private registerEvents(): void {
+    new RegularEvent('click', this.changeProperty)
+      .delegateTo(document, Selectors.editIconSelector);
+  }
+
+  /**
+   * initially register event listeners
+   */
+  private changeProperty(this: HTMLElement): void {
+    const constantName: string = this.getAttribute('rel');
+    const defaultDiv: HTMLDivElement = document.getElementById('defaultTS-' + constantName) as HTMLDivElement;
+    const userDiv: HTMLDivElement = document.getElementById('userTS-' + constantName) as HTMLDivElement;
+    const checkBox: HTMLInputElement = document.getElementById('check-' + constantName) as HTMLInputElement;
+    const toggleState: string = this.dataset.bsToggle;
+
+    if (toggleState === 'edit') {
+      defaultDiv.style.display = 'none';
+      userDiv.style.removeProperty('display');
+      checkBox.removeAttribute('disabled');
+    } else if (toggleState === 'undo') {
+      userDiv.style.display = 'none';
+      defaultDiv.style.removeProperty('display');
+      checkBox.setAttribute('disabled', 'disabled');
+    }
+  }
+}
+
+export default new ConstantEditor();

package/tstemplate/information-module.ts

@@ -0,0 +1,31 @@
+/*
+ * 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';
+
+class InformationModule {
+  constructor() {
+    this.registerEventListeners();
+  }
+
+  private registerEventListeners(): void {
+    new RegularEvent('typo3:datahandler:process', (e: CustomEvent): void => {
+      const payload = e.detail.payload;
+      if (payload.action === 'delete' && !payload.hasErrors) {
+        document.location.reload();
+      }
+    }).bindTo(document);
+  }
+}
+
+export default new InformationModule();

package/tstemplate/template-analyzer.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 { default as Modal } from '@typo3/backend/modal';
+import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { html, type TemplateResult } from 'lit';
+import { until } from 'lit/directives/until';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type { JavaScriptItemPayload } from '@typo3/core/java-script-item-processor';
+
+/**
+ * @todo: This could be code-de-duplicated with ext:backend pagetsconfig/pagetconfig-includes.ts,
+ *        by making "Show t3editor code in a modal" a more general solution.
+ *        Main trigger is t3js-pagetsconfig-includes-modal vs. t3js-typoscript-analyzer-modal
+ */
+class TemplateAnalyzer {
+  constructor() {
+    this.registerEventListeners();
+  }
+
+  private async registerEventListeners(): Promise<void> {
+    await DocumentService.ready();
+
+    document.querySelectorAll('.t3js-typoscript-analyzer-modal').forEach((link: HTMLAnchorElement): void => {
+      link.addEventListener('click', (e: Event): void => {
+        e.preventDefault();
+
+        const type = Modal.types.default;
+        const title = link.dataset.modalTitle || link.textContent.trim();
+        const url = link.getAttribute('href');
+        const size = Modal.sizes.large;
+        const content = html`${until(
+          this.fetchModalContent(url),
+          html`<div class="modal-loading"><typo3-backend-spinner size="large"></typo3-backend-spinner></div>`
+        )}`;
+        Modal.advanced({ type, title, size, content });
+      });
+    });
+  }
+
+  private async fetchModalContent(url: string): Promise<TemplateResult> {
+    // no `await` purpose (webcomponents initialize lazily)
+    topLevelModuleImport('@typo3/backend/code-editor/element/code-mirror-element.js');
+
+    const response: AjaxResponse = await (new AjaxRequest(url)).get();
+    const source: string = await response.resolve();
+
+    const mode: JavaScriptItemPayload = {
+      name: '@typo3/backend/code-editor/language/typoscript.js',
+      flags: 2 /* FLAG_USE_IMPORTMAP */,
+      exportName: 'typoscript',
+      items: [
+        { type: 'invoke', args: [] }
+      ]
+    };
+
+    return html`
+      <typo3-t3editor-codemirror .mode="${mode}" nolazyload readonly class="flex-grow-1 mh-100">
+        <textarea readonly disabled class="form-control">${source}</textarea>
+      </typo3-t3editor-codemirror>
+    `;
+  }
+}
+
+export default new TemplateAnalyzer();