typo3-typescript-sources 13.4.20

package/backend/wizard/move-content-element.ts

@@ -0,0 +1,107 @@
+/*
+ * 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';
+import DocumentService from '@typo3/core/document-service';
+import AjaxDataHandler from '@typo3/backend/ajax-data-handler';
+import Modal from '@typo3/backend/modal';
+import Notification from '@typo3/backend/notification';
+import ImmediateAction from '@typo3/backend/action-button/immediate-action';
+import { lll } from '@typo3/core/lit-helper';
+import Viewport from '@typo3/backend/viewport';
+
+export class MoveContentElement {
+  public constructor() {
+    this.initialize();
+  }
+
+  private async initialize(): Promise<void> {
+    await DocumentService.ready();
+    this.registerEvents(document.querySelector('.element-browser-body') as HTMLElement);
+  }
+
+  private registerEvents(container: HTMLElement): void {
+    new RegularEvent('change', async (e: Event): Promise<void> => {
+      const recordTitle = (document.querySelector('#elementRecordTitle') as HTMLInputElement).value;
+      const url = new URL(window.location.href);
+      const uid = url.searchParams.get('uid');
+      const headline = document.querySelector('h2') as HTMLHeadingElement;
+      if (headline) {
+        headline.innerText = lll('headline.' + ((e.target as HTMLInputElement).checked ? 'copy' : 'move'), recordTitle, uid);
+      }
+
+      const buttonLabel = (e.target as HTMLInputElement).checked
+        ? lll('copyElementToHere')
+        : lll('moveElementToHere');
+
+      document.querySelectorAll('[data-action="paste"]').forEach((button: HTMLButtonElement): void => {
+        button.querySelector('span.t3js-button-label').textContent = buttonLabel;
+      });
+    }).delegateTo(container, '#makeCopy');
+
+    new RegularEvent('click', async (e: Event, actionElement: HTMLElement): Promise<void> => {
+      const modeCheckbox = (document.querySelector('#makeCopy') as HTMLInputElement);
+      const recordTitle = (document.querySelector('#elementRecordTitle') as HTMLInputElement).value;
+      const targetPageTitle = (document.querySelector('#pageRecordTitle') as HTMLInputElement).value;
+      const pageUid = (document.querySelector('#pageUid') as HTMLInputElement).value;
+      const url = new URL(window.location.href);
+      const uid = url.searchParams.get('uid');
+      const returnUrl = new URL(url.searchParams.get('returnUrl'), window.origin);
+
+      const isCopyAction = modeCheckbox.checked;
+      const action = isCopyAction ? 'copy' : 'move';
+      const parameters: { cmd: object, data?: object } = {
+        cmd: {
+          tt_content: {
+            [uid]: {
+              [action]: actionElement.dataset.position
+            }
+          }
+        }
+      };
+
+      if (actionElement.dataset.colpos !== undefined) {
+        parameters.data = {
+          tt_content: {
+            [uid]: {
+              colPos: actionElement.dataset.colpos
+            }
+          }
+        };
+      }
+      AjaxDataHandler.process(parameters).then((): void => {
+        Modal.dismiss();
+
+        Notification.success(
+          lll(isCopyAction ? 'moveElement.notification.elementCopied.title' : 'moveElement.notification.elementMoved.title'),
+          lll(isCopyAction ? 'moveElement.notification.elementCopied.message' : 'moveElement.notification.elementMoved.message', recordTitle),
+          10,
+          [
+            {
+              label: lll('moveElement.notification.elementPasted.action.dismiss'),
+            },
+            {
+              label: lll('moveElement.notification.elementPasted.action.open', targetPageTitle),
+              action: new ImmediateAction((): void => {
+                returnUrl.searchParams.set('id', pageUid);
+                Viewport.ContentContainer.setUrl(returnUrl.toString());
+              })
+            }
+          ]
+        );
+
+        Viewport.ContentContainer.setUrl(returnUrl.toString());
+      });
+    }).delegateTo(container, '[data-action="paste"]');
+  }
+}

package/backend/wizard/move-page.ts

@@ -0,0 +1,74 @@
+/*
+ * 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';
+import DocumentService from '@typo3/core/document-service';
+import AjaxDataHandler from '@typo3/backend/ajax-data-handler';
+import Modal from '@typo3/backend/modal';
+import ModuleMenu from '@typo3/backend/module-menu';
+import Notification from '@typo3/backend/notification';
+import ImmediateAction from '@typo3/backend/action-button/immediate-action';
+import { lll } from '@typo3/core/lit-helper';
+
+export class MovePage {
+  public constructor() {
+    this.initialize();
+  }
+
+  private async initialize(): Promise<void> {
+    await DocumentService.ready();
+    this.registerEvents(document.querySelector('.element-browser-body') as HTMLElement);
+  }
+
+  private registerEvents(container: HTMLElement): void {
+    const recordTitle = (document.querySelector('#elementRecordTitle') as HTMLInputElement).value;
+    const url = new URL(window.location.href);
+
+    new RegularEvent('click', async (e: Event, actionElement: HTMLElement): Promise<void> => {
+      const isCopyAction = (document.querySelector('#makeCopy') as HTMLInputElement).checked;
+      const action = isCopyAction ? 'copy' : 'move';
+      const parameters = {
+        cmd: {
+          [url.searchParams.get('table')]: {
+            [url.searchParams.get('uid')]: {
+              [action]: actionElement.dataset.position
+            }
+          }
+        }
+      };
+      AjaxDataHandler.process(parameters).then((): void => {
+        Modal.dismiss();
+
+        Notification.success(
+          lll(isCopyAction ? 'movePage.notification.pageCopied.title' : 'movePage.notification.pageMoved.title'),
+          lll(isCopyAction ? 'movePage.notification.pageCopied.message' : 'movePage.notification.pageMoved.message', recordTitle),
+          10,
+          [
+            {
+              label: lll('movePage.notification.pagePasted.action.dismiss'),
+            },
+            {
+              label: lll('movePage.notification.pagePasted.action.open', recordTitle),
+              action: new ImmediateAction((): void => {
+                ModuleMenu.App.showModule('web_list', 'id=' + url.searchParams.get('uid'));
+              })
+            }
+          ]
+        );
+
+        top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+        ModuleMenu.App.showModule('web_list', 'id=' + url.searchParams.get('expandPage'));
+      });
+    }).delegateTo(container, '[data-action="paste"]');
+  }
+}

package/backend/wizard.ts

@@ -0,0 +1,331 @@
+/*
+ * 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 { SeverityEnum } from './enum/severity';
+import $ from 'jquery';
+import { Carousel } from 'bootstrap';
+import { default as Modal, type ModalElement } from './modal';
+import Severity from './severity';
+import Icons from './icons';
+import { topLevelModuleImport } from './utility/top-level-module-import';
+
+type SlideCallback = ($slide: JQuery, settings: WizardSettings, identifier: string) => void;
+
+interface WizardSettings {
+  [key: string]: any;
+}
+
+interface WizardSetup {
+  slides: Array<any>;
+  settings: WizardSettings;
+  forceSelection: boolean;
+  $carousel: JQuery;
+  carousel: Carousel;
+}
+
+interface Slide {
+  identifier: string;
+  title: string;
+  content: string|JQuery;
+  severity: SeverityEnum;
+  callback?: SlideCallback;
+}
+
+/**
+ * Module: @typo3/backend/wizard
+ * @exports @typo3/backend/wizard
+ * @deprecated will be removed in TYPO3 14.0
+ */
+class Wizard {
+  private setup: WizardSetup;
+  private readonly originalSetup: WizardSetup;
+
+  constructor() {
+    console.warn(
+      'The module `@typo3/backend/wizard.js` has been marked as deprecated and will be removed in TYPO3 v14.0. '
+      + 'Consider migrating to `@typo3/backend/multi-step-wizard.js`.'
+    );
+
+    this.setup = {
+      slides: [],
+      settings: {},
+      forceSelection: true,
+      $carousel: null,
+      carousel: null,
+    };
+    this.originalSetup = $.extend(true, {}, this.setup);
+  }
+
+  public set(key: string, value: any): Wizard {
+    this.setup.settings[key] = value;
+    return this;
+  }
+
+  public addSlide(
+    identifier: string,
+    title: string,
+    content: string = '',
+    severity: SeverityEnum = SeverityEnum.notice,
+    callback?: SlideCallback,
+  ): Wizard {
+    const slide: Slide = {
+      identifier: identifier,
+      title: title,
+      content: content,
+      severity: severity,
+      callback: callback,
+    };
+    this.setup.slides.push(slide);
+    return this;
+  }
+
+  public addFinalProcessingSlide(callback?: SlideCallback): Promise<void> {
+    if (!callback) {
+      callback = (): void => {
+        this.dismiss();
+      };
+    }
+
+    return Icons.getIcon('spinner-circle', Icons.sizes.large, null, null).then((markup: string) => {
+      const $processingSlide = $('<div />', { class: 'text-center' }).append(markup);
+      this.addSlide(
+        'final-processing-slide', top.TYPO3.lang['wizard.processing.title'],
+        $processingSlide[0].outerHTML,
+        Severity.notice,
+        callback,
+      );
+    });
+  }
+
+  public show(): void {
+    const $slides = this.generateSlides();
+    const firstSlide = this.setup.slides[0];
+
+    Modal.advanced({
+      title: firstSlide.title,
+      content: $slides,
+      severity: firstSlide.severity,
+      staticBackdrop: true,
+      buttons: [{
+        text: top.TYPO3.lang['wizard.button.cancel'],
+        active: true,
+        btnClass: 'btn-default',
+        name: 'cancel',
+        trigger: (): void => {
+          this.getComponent().trigger('wizard-dismiss');
+        },
+      }, {
+        text: top.TYPO3.lang['wizard.button.next'],
+        btnClass: 'btn-primary',
+        name: 'next',
+      }],
+      callback: (modal: ModalElement): void => {
+        topLevelModuleImport('@typo3/backend/element/progress-bar-element.js').then((): void => {
+          this.setup.carousel = new Carousel(modal.querySelector('.carousel'));
+          this.addProgressBar();
+          this.initializeEvents(modal);
+        });
+      }
+    });
+
+    if (this.setup.forceSelection) {
+      this.lockNextStep();
+    }
+
+    this.getComponent().on('wizard-visible', (): void => {
+      this.runSlideCallback(firstSlide, this.setup.$carousel.find('.carousel-item').first());
+    }).on('wizard-dismissed', (): void => {
+      this.setup = $.extend(true, {}, this.originalSetup);
+    });
+  }
+
+  public getComponent(): JQuery {
+    if (this.setup.$carousel === null) {
+      this.generateSlides();
+    }
+    return this.setup.$carousel;
+  }
+
+  public dismiss(): void {
+    Modal.dismiss();
+  }
+
+  public lockNextStep(): JQuery {
+    const $button = this.setup.$carousel.closest('.modal').find('button[name="next"]');
+    $button.prop('disabled', true);
+    return $button;
+  }
+
+  public unlockNextStep(): JQuery {
+    const $button = this.setup.$carousel.closest('.modal').find('button[name="next"]');
+    $button.prop('disabled', false);
+    return $button;
+  }
+
+  public setForceSelection(force: boolean): void {
+    this.setup.forceSelection = force;
+  }
+
+  private initializeEvents(modal: ModalElement): void {
+    const $modal = this.setup.$carousel.closest('.modal');
+    const $modalTitle = $modal.find('.modal-title');
+    const $modalFooter = $modal.find('.modal-footer');
+    const $nextButton = $modalFooter.find('button[name="next"]');
+
+    $nextButton.on('click', (): void => {
+      this.setup.carousel.next();
+    });
+
+    this.setup.$carousel.get(0).addEventListener('slide.bs.carousel', (): void => {
+      const nextSlideNumber = this.setup.$carousel.data('currentSlide') + 1;
+      const currentIndex = this.setup.$carousel.data('currentIndex') + 1;
+
+      $modalTitle.text(this.setup.slides[currentIndex].title);
+
+      this.setup.$carousel.data('currentSlide', nextSlideNumber);
+      this.setup.$carousel.data('currentIndex', currentIndex);
+
+      if (nextSlideNumber >= this.setup.$carousel.data('realSlideCount')) {
+        // Point of no return - hide modal footer disable any closing ability
+        $modal.find('.modal-header .close').remove();
+        $modalFooter.slideUp();
+      } else {
+        const progressBar = $modalFooter.find('typo3-backend-progress-bar');
+        progressBar.attr('value', currentIndex);
+        progressBar.attr('label', top.TYPO3.lang['wizard.progress']
+          .replace('{0}', nextSlideNumber)
+          .replace('{1}', this.setup.$carousel.data('slideCount'))
+        );
+      }
+
+      $modal
+        .removeClass('modal-severity-' + Severity.getCssClass(this.setup.slides[currentIndex - 1].severity))
+        .addClass('modal-severity-' + Severity.getCssClass(this.setup.slides[currentIndex].severity));
+    });
+    this.setup.$carousel.get(0).addEventListener('slid.bs.carousel', (evt: Event & Carousel.Event): void => {
+      const currentIndex = this.setup.$carousel.data('currentIndex');
+      const slide = this.setup.slides[currentIndex];
+
+      this.runSlideCallback(slide, $(evt.relatedTarget));
+
+      if (this.setup.forceSelection) {
+        this.lockNextStep();
+      }
+    });
+
+    /**
+     * Custom event, closes the wizard
+     */
+    const cmp = this.getComponent();
+    cmp.on('wizard-dismiss', this.dismiss);
+
+    modal.addEventListener('typo3-modal-hidden', (): void => {
+      cmp.trigger('wizard-dismissed');
+    });
+    modal.addEventListener('typo3-modal-shown', (): void => {
+      cmp.trigger('wizard-visible');
+    });
+  }
+
+  private runSlideCallback(slide: Slide, $slide: JQuery): void {
+    if (typeof slide.callback === 'function') {
+      slide.callback($slide, this.setup.settings, slide.identifier);
+    }
+  }
+
+  private addProgressBar(): void {
+    const realSlideCount = this.setup.$carousel.find('.carousel-item').length;
+    const slideCount = Math.max(1, realSlideCount);
+    const initialStep = Math.round(100 / slideCount);
+    const $modal = this.setup.$carousel.closest('.modal');
+    const $modalFooter = $modal.find('.modal-footer');
+
+    this.setup.$carousel
+      .data('initialStep', initialStep)
+      .data('slideCount', slideCount)
+      .data('realSlideCount', realSlideCount)
+      .data('currentIndex', 0)
+      .data('currentSlide', 1);
+
+    // Append progress bar to modal footer
+    if (slideCount > 1) {
+      const progressBar = document.createElement('typo3-backend-progress-bar');
+      progressBar.value = 0;
+      progressBar.max = slideCount - 1; // progress is index-based
+      progressBar.label = top.TYPO3.lang['wizard.progress']
+        .replace('{0}', '1')
+        .replace('{1}', slideCount.toString());
+      $modalFooter.prepend(progressBar);
+    }
+  }
+
+  private generateSlides(): JQuery {
+    // Check whether the slides were already generated
+    if (this.setup.$carousel !== null) {
+      return this.setup.$carousel;
+    }
+
+    let slides = '<div class="carousel slide" data-bs-ride="false">'
+      + '<div class="carousel-inner" role="listbox">';
+
+    for (const currentSlide of Object.values(this.setup.slides)) {
+      let slideContent = currentSlide.content;
+
+      if (typeof slideContent === 'object') {
+        slideContent = slideContent.html();
+      }
+      slides += '<div class="carousel-item" data-bs-slide="' + currentSlide.identifier + '">' + slideContent + '</div>';
+    }
+
+    slides += '</div></div>';
+
+    this.setup.$carousel = $(slides);
+    this.setup.$carousel.find('.carousel-item').first().addClass('active');
+
+    return this.setup.$carousel;
+  }
+}
+
+let wizardObject: Wizard;
+try {
+  // fetch from opening window
+  if (window.opener && window.opener.TYPO3 && window.opener.TYPO3.Wizard) {
+    wizardObject = window.opener.TYPO3.Wizard;
+  }
+
+  // fetch from parent
+  if (parent && parent.window.TYPO3 && parent.window.TYPO3.Wizard) {
+    wizardObject = parent.window.TYPO3.Wizard;
+  }
+
+  // fetch object from outer frame
+  if (top && top.TYPO3 && top.TYPO3.Wizard) {
+    wizardObject = top.TYPO3.Wizard;
+  }
+} catch {
+  // This only happens if the opener, parent or top is some other url (eg a local file)
+  // which loaded the current window. Then the browser's cross domain policy jumps in
+  // and raises an exception.
+  // For this case we are safe and we can create our global object below.
+}
+
+if (!wizardObject) {
+  wizardObject = new Wizard();
+
+  // attach to global frame
+  if (typeof TYPO3 !== 'undefined') {
+    TYPO3.Wizard = wizardObject;
+  }
+}
+
+export default wizardObject;

package/belog/backend-log.ts

@@ -0,0 +1,88 @@
+/*
+ * 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 Modal from '@typo3/backend/modal';
+import DocumentService from '@typo3/core/document-service';
+import DateTimePicker from '@typo3/backend/date-time-picker';
+import '@typo3/backend/input/clearable';
+import { MessageUtility } from '@typo3/backend/utility/message-utility';
+
+/**
+ * Module: @typo3/belog/backend-log
+ * JavaScript for backend log
+ * @exports @typo3/belog/backend-log
+ */
+class BackendLog {
+  private clearableElements: NodeListOf<HTMLInputElement> = null;
+  private dateTimePickerElements: NodeListOf<HTMLInputElement> = null;
+  private elementBrowserElements: NodeListOf<HTMLAnchorElement> = null;
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      this.clearableElements = document.querySelectorAll('.t3js-clearable') as NodeListOf<HTMLInputElement>;
+      this.dateTimePickerElements = document.querySelectorAll('.t3js-datetimepicker');
+      this.elementBrowserElements = document.querySelectorAll('.t3js-element-browser');
+      this.initializeClearableElements();
+      this.initializeDateTimePickerElements();
+      this.initializeElementBrowserElements();
+      this.initializeElementBrowserEventListener();
+    });
+  }
+
+  private initializeClearableElements(): void {
+    this.clearableElements.forEach(
+      (clearableField) => clearableField.clearable()
+    );
+  }
+
+  private initializeDateTimePickerElements(): void {
+    this.dateTimePickerElements.forEach(
+      (dateTimePickerElement: HTMLInputElement) => DateTimePicker.initialize(dateTimePickerElement)
+    );
+  }
+
+  private initializeElementBrowserElements(): void {
+    this.elementBrowserElements.forEach((element: HTMLAnchorElement): void => {
+      const triggerField = <HTMLInputElement>document.getElementById(element.dataset.triggerFor);
+      element.dataset.params = triggerField.name + '|||pages';
+      element.addEventListener('click', (event: Event): void => {
+        event.preventDefault();
+        const target = <HTMLAnchorElement>event.currentTarget;
+        Modal.advanced({
+          type: Modal.types.iframe,
+          content: target.dataset.target + '&mode=' + target.dataset.mode + '&bparams=' + target.dataset.params,
+          size: Modal.sizes.large
+        });
+      });
+    });
+  }
+
+  private initializeElementBrowserEventListener(): void {
+    window.addEventListener('message', (e: MessageEvent): void => {
+      if (!MessageUtility.verifyOrigin(e.origin)
+        || e.data.actionName !== 'typo3:elementBrowser:elementAdded'
+        || typeof e.data.fieldName !== 'string'
+        || typeof e.data.value !== 'string'
+      ) {
+        return;
+      }
+
+      const field = <HTMLInputElement>document.querySelector('input[name="' + e.data.fieldName + '"]');
+      if (field) {
+        field.value = e.data.value.split('_').pop();
+      }
+    });
+  }
+}
+
+export default new BackendLog();

package/beuser/backend-user-listing.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 RegularEvent from '@typo3/core/event/regular-event';
+import DocumentService from '@typo3/core/document-service';
+
+/**
+ * Module: @typo3/beuser/backend-user-listing
+ * JavaScript for backend user listing
+ * @exports @typo3/beuser/backend-user-listing
+ */
+class BackendUserListing {
+  private readonly searchField: HTMLInputElement = document.querySelector('#tx_Beuser_username');
+  private readonly activeSearch: boolean = this.searchField ? (this.searchField.value !== '') : false;
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      // Respond to browser related clearable event
+      if (this.searchField) {
+        new RegularEvent('search', (): void => {
+          if (this.searchField.value === '' && this.activeSearch) {
+            this.searchField.closest('form').submit();
+          }
+        }).bindTo(this.searchField);
+      }
+    });
+  }
+}
+
+export default new BackendUserListing();