typo3-typescript-sources 13.4.20

package/backend/copy-to-clipboard.ts

@@ -0,0 +1,79 @@
+/*
+ * 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 Notification from '@typo3/backend/notification';
+import { lll } from '@typo3/core/lit-helper';
+
+export function copyToClipboard(text: string): void {
+  if (!text.length) {
+    console.warn('No text for copy to clipboard given.');
+    Notification.error(lll('copyToClipboard.error'));
+    return;
+  }
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text).then((): void => {
+      Notification.success(lll('copyToClipboard.success'), '', 1);
+    }).catch((): void => {
+      Notification.error(lll('copyToClipboard.error'));
+    });
+  } else {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    try {
+      if (document.execCommand('copy')) {
+        Notification.success(lll('copyToClipboard.success'), '', 1);
+      } else {
+        Notification.error(lll('copyToClipboard.error'));
+      }
+    } catch {
+      Notification.error(lll('copyToClipboard.error'));
+    }
+    document.body.removeChild(textarea);
+  }
+}
+
+/**
+ * Module: @typo3/backend/copy-to-clipboard
+ *
+ * This module can be used to copy a given text to
+ * the operating systems' clipboard.
+ *
+ * @example
+ * <typo3-copy-to-clipboard text="some text">
+ *   Copy to clipboard
+ * </typo3-copy-to-clipboard>
+ */
+@customElement('typo3-copy-to-clipboard')
+export class CopyToClipboard extends PseudoButtonLitElement {
+  @property({ type: String }) text: string;
+
+  protected override buttonActivated(): void {
+    if (typeof this.text !== 'string') {
+      console.warn('No text for copy to clipboard given.');
+      Notification.error(lll('copyToClipboard.error'));
+      return;
+    }
+    copyToClipboard(this.text);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-copy-to-clipboard': CopyToClipboard;
+  }
+}

package/backend/date-time-picker.ts

@@ -0,0 +1,270 @@
+/*
+ * 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 flatpickr from 'flatpickr';
+import ShortcutButtonsPlugin from 'shortcut-buttons-flatpickr';
+import { DateTime } from 'luxon';
+import ThrottleEvent from '@typo3/core/event/throttle-event';
+import type { PostValidationEvent } from '@typo3/backend/form-engine-validation';
+import '@typo3/backend/input/clearable';
+
+const ISO8601_UTC = 'ISO8601_UTC';
+
+interface FlatpickrInputElement extends HTMLInputElement {
+  _flatpickr: flatpickr.Instance;
+}
+
+/**
+ * Module: @typo3/backend/date-time-picker
+ * contains all logic for the date time picker used in FormEngine, EXT:belog and EXT:scheduler
+ */
+class DateTimePicker {
+  private readonly format: string = (typeof opener?.top?.TYPO3 !== 'undefined' ? opener.top : top).TYPO3.settings.DateTimePicker.DateFormat;
+
+  /**
+   * initialize date fields to add a datepicker to each field
+   * note: this function can be called multiple times (e.g. after AJAX requests) because it only
+   * applies to fields which haven't been used yet.
+   */
+  public initialize(element: HTMLInputElement): void {
+    if (!(element instanceof HTMLInputElement) || typeof element.dataset.datepickerInitialized !== 'undefined') {
+      return;
+    }
+
+    let userLocale = document.documentElement.lang;
+    if (!userLocale || userLocale === 'en') {
+      // flatpickr's English localization is "default"
+      userLocale = 'default';
+    } else if (userLocale === 'ch') {
+      // Fix our made up locale "ch"
+      userLocale = 'zh';
+    }
+
+    element.dataset.datepickerInitialized = '1';
+    import('flatpickr/dist/l10n').then((): void => {
+      this.initializeField(element, userLocale as flatpickr.Options.LocaleKey);
+    });
+  }
+
+  /**
+   * Initialize a single field
+   */
+  private initializeField(inputElement: HTMLInputElement, locale: flatpickr.Options.LocaleKey): void {
+    const scrollEvent = this.getScrollEvent();
+    const options = this.getDateOptions(inputElement);
+    options.locale = locale;
+    options.onOpen = [
+      (): void => {
+        scrollEvent.bindTo(document.querySelector('.t3js-module-body'));
+      }
+    ];
+    options.onClose = (): void => {
+      scrollEvent.release();
+    };
+
+    // initialize the date time picker on this element
+    const dateTimePicker = flatpickr(inputElement, options);
+    if (dateTimePicker.altInput instanceof HTMLInputElement) {
+      // Explicitly handle clearing input (invoked by clearable control) if altInput is available
+      dateTimePicker.input.addEventListener('typo3:internal:clear', (): void => {
+        // @todo The `typo3:internal:clear` event is a hack and must fall again
+        dateTimePicker.clear();
+      });
+    }
+
+    dateTimePicker._input.addEventListener('change', (e: Event): void => {
+      // Update selected date in picker after manually entering a value
+      const value = (e.target as HTMLInputElement).value;
+      const parsedDate: Date = dateTimePicker.parseDate(value, dateTimePicker.config.altFormat);
+
+      dateTimePicker.setDate(parsedDate, true);
+    });
+
+    dateTimePicker._input.addEventListener('keyup', (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        dateTimePicker.close();
+      }
+    });
+  }
+
+  /**
+   * Due to some whack CSS the scrollPosition of the document stays 0 which renders a stuck date time picker.
+   * Because of this the position is recalculated on scrolling `.t3js-module-body`.
+   *
+   * @return {ThrottleEvent}
+   */
+  private getScrollEvent(): ThrottleEvent {
+    return new ThrottleEvent('scroll', (): void => {
+      const activeFlatpickrElement = document.querySelector('.flatpickr-input.active') as FlatpickrInputElement;
+      if (activeFlatpickrElement === null) {
+        return;
+      }
+
+      const bounds = activeFlatpickrElement.getBoundingClientRect();
+      const additionalOffset = 2;
+      const calendarHeight = activeFlatpickrElement._flatpickr.calendarContainer.offsetHeight;
+      const distanceFromBottom = window.innerHeight - bounds.bottom;
+      const showOnTop = distanceFromBottom < calendarHeight && bounds.top > calendarHeight;
+
+      let newPosition;
+      let arrowClass;
+      if (showOnTop) {
+        newPosition = bounds.y - calendarHeight - additionalOffset;
+        arrowClass = 'arrowBottom';
+      } else {
+        newPosition = bounds.y + bounds.height + additionalOffset;
+        arrowClass = 'arrowTop';
+      }
+
+      activeFlatpickrElement._flatpickr.calendarContainer.style.top = newPosition + 'px';
+      activeFlatpickrElement._flatpickr.calendarContainer.classList.remove('arrowBottom', 'arrowTop');
+      activeFlatpickrElement._flatpickr.calendarContainer.classList.add(arrowClass);
+    }, 15);
+  }
+
+  /**
+   * Initialize a single field
+   *
+   * @param {HTMLInputElement} inputElement
+   */
+  private getDateOptions(inputElement: HTMLInputElement): flatpickr.Options.Options {
+
+    const format = this.format;
+    const type = inputElement.dataset.dateType;
+    const now = new Date();
+    const options: flatpickr.Options.Options = {
+      altFormat: '',
+      allowInput: true,
+      altInput: true,
+      ariaDateFormat: 'DDDD',
+      // We configure a dummy dateFormat token and use luxon parsing/formatting
+      // internally, as flatpickr cannot be configured to ignore timezones
+      // (in order to behave similar to <input type=datetime-local>)
+      dateFormat: ISO8601_UTC,
+      defaultHour: now.getHours(),
+      defaultMinute: now.getMinutes(),
+      enableSeconds: false,
+      enableTime: false,
+      formatDate: (date: Date, format: string) => {
+        const dt = DateTime.fromJSDate(date);
+        if (format === ISO8601_UTC) {
+          // JS dates are always encoded in localtime (flatpickr can only operate in localtime) and are now "intepreted" as UTC:
+          // We discard the intermediate local-time offset; that means the hours and minutes from localtime are rendered as-is
+          return dt.toUTC().plus(dt.offset * 60 * 1000).toISO({ suppressMilliseconds: true });
+        }
+        return dt.toFormat(format);
+      },
+      parseDate: (currentDateString: string, format: string): Date => {
+        if (format === ISO8601_UTC) {
+          const isoDt = DateTime.fromISO(currentDateString, { zone: 'utc' });
+          if (!isoDt.isValid) {
+            throw new Error('Invalid ISO8601 date: ' + currentDateString);
+          }
+          const localDate = isoDt.toLocal();
+          // This is the reverse operation of the formatting in `formatDate`:
+          // We substract the localtime offset to generate a local-time JS Date instance,
+          // that will contain the same local-time hour/time values as the UTC input.
+          return localDate.minus(localDate.offset * 60 * 1000).toJSDate();
+        }
+        return DateTime.fromFormat(currentDateString, format).toJSDate();
+      },
+      onReady: (dates: Date[], currentDateString: string, self: flatpickr.Instance): void => {
+        if (self.altInput !== undefined) {
+          // Transfer the id of the original input to the altInput
+          // This is a hack for the picker button - one would use `{wrap: true}` in flatpickr, but this apparently
+          // collides with using altInput – sigh.
+          self.altInput.id = self.input.id;
+          self.input.removeAttribute('id');
+          self.altInput.clearable();
+          if (self.input.dataset.formengineInputName !== undefined) {
+            self.altInput.dataset.formengineDatepickerRealInputName = self.input.dataset.formengineInputName;
+          }
+
+          // Register a custom event handler for `t3-formengine-postfieldvalidation` to be able to toggle the `has-error` class on the mirrored field
+          self.altInput.form.addEventListener('t3-formengine-postfieldvalidation', (e: CustomEvent<PostValidationEvent>): void => {
+            if (e.detail.field === self.input) {
+              self.altInput.classList.toggle('has-error', !e.detail.isValid);
+            }
+          });
+        }
+      },
+      onChange: (dates: Date[], currentDateString: string, self: flatpickr.Instance): void => {
+        self.input.dispatchEvent(new Event('formengine.dp.change'));
+      },
+      maxDate: '',
+      minDate: '',
+      minuteIncrement: 1,
+      noCalendar: false,
+      showMonths: 1,
+      // Disable month dropdown in `time`, `timesec` or `year` fields to fix:
+      //   `TypeError: Cannot set properties of undefined (setting 'tabIndex')` in flatpickr
+      // Rproducible when entering an arbitrary time (e.g. "13:30")
+      // and pressing the TAB key in a time field.
+      monthSelectorType: type.startsWith('date') ? 'dropdown' : 'static',
+      weekNumbers: true,
+      time_24hr: !Intl.DateTimeFormat(navigator.language, { hour: 'numeric' }).resolvedOptions().hour12,
+      plugins: [
+        ShortcutButtonsPlugin({
+          theme: 'typo3',
+          button: [
+            {
+              label: top.TYPO3.lang['labels.datepicker.today'] || 'Today'
+            },
+          ],
+          onClick: (index: number, fp: flatpickr.Instance) => {
+            fp.setDate(new Date(), true);
+          }
+        })
+      ],
+    };
+
+    // set options based on type
+    switch (type) {
+      case 'datetime':
+        options.altFormat = format[1];
+        options.enableTime = true;
+        break;
+      case 'date':
+        options.altFormat = format[0];
+        break;
+      case 'time':
+        options.altFormat = 'HH:mm';
+        options.enableTime = true;
+        options.noCalendar = true;
+        break;
+      case 'timesec':
+        options.altFormat = 'HH:mm:ss';
+        options.enableSeconds = true;
+        options.enableTime = true;
+        options.noCalendar = true;
+        break;
+      case 'year':
+        options.altFormat = 'yyyy';
+        break;
+      default:
+    }
+
+    if (inputElement.dataset.dateMinDate !== undefined) {
+      options.minDate = options.parseDate(inputElement.dataset.dateMinDate, ISO8601_UTC);
+      options.minDate.setSeconds(0);
+    }
+    if (inputElement.dataset.dateMaxDate !== undefined) {
+      options.maxDate = options.parseDate(inputElement.dataset.dateMaxDate, ISO8601_UTC);
+      options.maxDate.setSeconds(59);
+    }
+
+    return options;
+  }
+}
+
+export default new DateTimePicker();

package/backend/document-save-actions.ts

@@ -0,0 +1,159 @@
+/*
+ * 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 Icons from './icons';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { selector } from '@typo3/core/literals';
+
+export type PreSubmitCallback = (e: Event) => boolean;
+
+type SubmitTriggerHTMLElement = HTMLAnchorElement|HTMLButtonElement;
+
+/**
+ * Module: @typo3/backend/document-save-actions
+ * @deprecated: use @typo3/backend/form/submit-interceptor instead
+ */
+class DocumentSaveActions {
+  private static instance: DocumentSaveActions = null;
+  private preventDoubleClick: boolean = false;
+  private readonly preSubmitCallbacks: PreSubmitCallback[] = [];
+
+  private constructor() {
+    console.warn('The module `@typo3/backend/document-save-actions.js` has been deprecated and will be removed in TYPO3 v14. Please consider migrating to `@typo3/backend/form/submit-interceptor.js` instead.');
+    DocumentService.ready().then((): void => {
+      this.initializeSaveHandling();
+    });
+  }
+
+  public static getInstance(): DocumentSaveActions {
+    if (DocumentSaveActions.instance === null) {
+      DocumentSaveActions.instance = new DocumentSaveActions();
+    }
+
+    return DocumentSaveActions.instance;
+  }
+
+  public static registerEvents(): void {
+    DocumentSaveActions.getInstance();
+  }
+
+  /**
+   * Adds a callback being executed before submit
+   */
+  public addPreSubmitCallback(callback: PreSubmitCallback): void {
+    if (typeof callback !== 'function') {
+      throw 'callback must be a function.';
+    }
+
+    this.preSubmitCallbacks.push(callback);
+  }
+
+  /**
+   * Initializes the save handling
+   */
+  private initializeSaveHandling(): void {
+    const docHeader = document.querySelector('.t3js-module-docheader');
+    if (docHeader === null) {
+      return;
+    }
+
+    const elements = [
+      'button[form]',
+      'button[name^="_save"]',
+      'a[data-name^="_save"]',
+      'button[name="CMD"][value^="save"]',
+      'a[data-name="CMD"][data-value^="save"]',
+    ].join(',');
+
+    new RegularEvent('click', (e: Event, target: SubmitTriggerHTMLElement): void => {
+      if (this.preventDoubleClick) {
+        return;
+      }
+
+      const form = this.getAttachedForm(target);
+      if (form === null) {
+        return;
+      }
+
+      // Run any preSubmit callbacks
+      for (const callback of this.preSubmitCallbacks) {
+        const callbackResult = callback(e);
+        if (!callbackResult) {
+          e.preventDefault();
+          return;
+        }
+      }
+
+      this.preventDoubleClick = true;
+
+      // All callbacks were executed, add dummy field for POST action to make clear we're submitting something...
+      this.attachSaveFieldToForm(form, target);
+
+      form.addEventListener('submit', (): void => {
+        const splitButton = target.closest('.t3js-splitbutton');
+        let affectedButton: SubmitTriggerHTMLElement;
+        if (splitButton !== null) {
+          affectedButton = splitButton.firstElementChild as HTMLButtonElement;
+          splitButton.querySelectorAll('button').forEach((button: HTMLButtonElement): void => { button.disabled = true; });
+        } else {
+          affectedButton = target;
+          if (affectedButton instanceof HTMLAnchorElement) {
+            affectedButton.classList.add('disabled');
+          } else {
+            affectedButton.disabled = true;
+          }
+        }
+
+        Icons.getIcon('spinner-circle', Icons.sizes.small).then((markup: string): void => {
+          affectedButton.replaceChild(document.createRange().createContextualFragment(markup), target.querySelector('.t3js-icon'));
+        }).catch(() => {
+          // Catch error in case the promise was not resolved
+          // e.g. loading a new page
+        });
+      }, { once: true });
+    }).delegateTo(docHeader, elements);
+  }
+
+  private getAttachedForm(trigger: SubmitTriggerHTMLElement): HTMLFormElement|null {
+    let form;
+    if (trigger instanceof HTMLAnchorElement) {
+      form = document.querySelector(selector`#${trigger.dataset.form}`) as HTMLFormElement|null;
+    } else {
+      form = trigger.form;
+    }
+
+    if (!form) {
+      form = trigger.closest('form');
+    }
+
+    return form;
+  }
+
+  private attachSaveFieldToForm(form: HTMLFormElement, trigger: SubmitTriggerHTMLElement): void {
+    const inputId = form.name + '_save_field';
+    let saveValueInput = document.getElementById(inputId) as HTMLInputElement|null;
+    if (saveValueInput === null) {
+      saveValueInput = document.createElement('input');
+      saveValueInput.id = inputId;
+      saveValueInput.type = 'hidden';
+
+      form.append(saveValueInput);
+    }
+
+    saveValueInput.name = trigger instanceof HTMLAnchorElement ? trigger.dataset.name : trigger.name;
+    saveValueInput.value = trigger instanceof HTMLAnchorElement ? trigger.dataset.value : trigger.value;
+  }
+}
+
+export default DocumentSaveActions;