typo3-typescript-sources 13.4.20

package/backend/viewport/content-container.ts

@@ -0,0 +1,98 @@
+/*
+ * 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 { ScaffoldIdentifierEnum } from '../enum/viewport/scaffold-identifier';
+import { AbstractContainer } from './abstract-container';
+import ClientRequest from '../event/client-request';
+import InteractionRequest from '../event/interaction-request';
+import Loader from './loader';
+import TriggerRequest from '../event/trigger-request';
+
+class ContentContainer extends AbstractContainer {
+  public get(): Window {
+    return (document.querySelector(ScaffoldIdentifierEnum.contentModuleIframe) as HTMLIFrameElement).contentWindow;
+  }
+
+  public beforeSetUrl(interactionRequest: InteractionRequest): Promise<void> {
+    return this.consumerScope.invoke(
+      new TriggerRequest('typo3.beforeSetUrl', interactionRequest),
+    );
+  }
+
+  public setUrl(urlToLoad: string, interactionRequest?: InteractionRequest, module?: string): Promise<void> {
+    const router = this.resolveRouterElement();
+    if (router === null && self !== top) {
+      // abort, if router can not be found and this module is not used in a top frame (popup)
+      return Promise.reject(new Error('Content container used in unsupported frame context'));
+    }
+
+    if (!(interactionRequest instanceof InteractionRequest)) {
+      interactionRequest = new ClientRequest('typo3.setUrl', null);
+    }
+    const promise: Promise<void> = this.consumerScope.invoke(
+      new TriggerRequest('typo3.setUrl', interactionRequest),
+    );
+    promise.then((): void => {
+      if (router !== null) {
+        Loader.start();
+        router.setAttribute('endpoint', urlToLoad);
+        router.setAttribute('module', module ? module : null);
+        router.parentElement.addEventListener('typo3-module-loaded', (): void => Loader.finish(), { once: true });
+      } else {
+        // popup mode assume that we're in a standalone frame if the router cannot be found.
+        document.location.assign(urlToLoad);
+      }
+    });
+    return promise;
+  }
+
+  /**
+   * @returns {string}
+   */
+  public getUrl(): string {
+    return this.resolveRouterElement().getAttribute('endpoint');
+  }
+
+  public refresh(interactionRequest?: InteractionRequest): Promise<void> {
+    const iFrame = <HTMLIFrameElement>this.resolveIFrameElement();
+    // abort, if no IFRAME can be found
+    if (iFrame === null) {
+      return Promise.reject();
+    }
+    const promise: Promise<void> = this.consumerScope.invoke(
+      new TriggerRequest('typo3.refresh', interactionRequest),
+    );
+    promise.then((): void => {
+      iFrame.contentWindow.location.reload();
+    });
+    return promise;
+  }
+
+  public getIdFromUrl(): number {
+    if (this.getUrl()) {
+      const id = new URL(this.getUrl(), window.location.origin).searchParams.get('id') ?? '';
+      return parseInt(id, 10);
+    }
+    return 0;
+  }
+
+  private resolveIFrameElement(): HTMLElement|null {
+    return document.querySelector(ScaffoldIdentifierEnum.contentModuleIframe);
+  }
+
+  private resolveRouterElement(): HTMLElement|null {
+    return document.querySelector(ScaffoldIdentifierEnum.contentModuleRouter);
+  }
+}
+
+export default ContentContainer;

package/backend/viewport/loader.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { ScaffoldIdentifierEnum } from '../enum/viewport/scaffold-identifier';
+import NProgress from 'nprogress';
+
+class Loader {
+  public static start(): void {
+    NProgress.configure({ parent: ScaffoldIdentifierEnum.contentModule, showSpinner: false });
+    NProgress.start();
+  }
+
+  public static finish(): void {
+    NProgress.done();
+  }
+}
+
+export default Loader;

package/backend/viewport/navigation-container.ts

@@ -0,0 +1,119 @@
+/*
+ * 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 { ScaffoldIdentifierEnum } from '../enum/viewport/scaffold-identifier';
+import { AbstractContainer } from './abstract-container';
+import TriggerRequest from '../event/trigger-request';
+import { selector } from '@typo3/core/literals';
+import type InteractionRequest from '../event/interaction-request';
+
+class NavigationContainer extends AbstractContainer {
+  private activeComponentId: string = '';
+
+  public constructor(consumerScope: any)
+  {
+    super(consumerScope);
+  }
+
+  private get parent(): HTMLElement
+  {
+    return document.querySelector(ScaffoldIdentifierEnum.scaffold);
+  }
+
+  private get container(): HTMLElement
+  {
+    return document.querySelector(ScaffoldIdentifierEnum.contentNavigation);
+  }
+
+  /**
+   * Renders registered (non-iframe) navigation component e.g. a page tree
+   *
+   * @param {string} navigationComponentId
+   */
+  public showComponent(navigationComponentId: string): void {
+    const container = this.container;
+    this.show(navigationComponentId);
+    // Component is already loaded and active, nothing to do
+    if (navigationComponentId === this.activeComponentId) {
+      return;
+    }
+    if (this.activeComponentId !== '') {
+      const activeComponentElement = container.querySelector('#navigationComponent-' + this.activeComponentId.replace(/[/@]/g, '_')) as HTMLElement;
+      if (activeComponentElement) {
+        activeComponentElement.style.display = 'none';
+      }
+    }
+
+    const componentCssName = navigationComponentId.replace(/[/@]/g, '_');
+    const navigationComponentElement = 'navigationComponent-' + componentCssName;
+
+    // The component was already set up, so requiring the module again can be excluded.
+    if (container.querySelectorAll(selector`[data-component="${navigationComponentId}"]`).length === 1) {
+      this.show(navigationComponentId);
+      this.activeComponentId = navigationComponentId;
+      return;
+    }
+
+    import(navigationComponentId + '.js').then((__esModule: {navigationComponentName?: string}): void => {
+      if (typeof __esModule.navigationComponentName === 'string') {
+        const tagName: string = __esModule.navigationComponentName;
+        const element = document.createElement(tagName);
+        element.setAttribute('id', navigationComponentElement);
+        element.classList.add('scaffold-content-navigation-component');
+        element.dataset.component = navigationComponentId;
+        container.append(element);
+      } else {
+        // Because the component does not exist, let's create the div as wrapper
+        container.insertAdjacentHTML(
+          'beforeend',
+          '<div class="scaffold-content-navigation-component" data-component="' + navigationComponentId + '" id="' + navigationComponentElement + '"></div>'
+        );
+
+        // manual static initialize method, unused but kept for backwards-compatibility until TYPO3 v12
+        const navigationComponent = Object.values(__esModule)[0] as any;
+        navigationComponent.initialize('#' + navigationComponentElement);
+      }
+      this.show(navigationComponentId);
+      this.activeComponentId = navigationComponentId;
+    });
+  }
+
+  public hide(): void {
+    const parent = this.parent;
+    parent.classList.remove('scaffold-content-navigation-available');
+  }
+
+  public show(component: string): void {
+    const parent = this.parent;
+    const container = this.container;
+    container.querySelectorAll(ScaffoldIdentifierEnum.contentNavigationDataComponent).forEach((el: HTMLElement) => el.style.display = 'none');
+    parent.classList.add('scaffold-content-navigation-available');
+    const selectedElement = container.querySelector('[data-component="' + component + '"]') as HTMLElement;
+    if (selectedElement) {
+      // Re-set to the display setting from CSS
+      selectedElement.style.display = null;
+    }
+  }
+
+  public setUrl(urlToLoad: string, interactionRequest: InteractionRequest): Promise<void> {
+    const promise = this.consumerScope.invoke(
+      new TriggerRequest('typo3.setUrl', interactionRequest),
+    );
+    promise.then((): void => {
+      this.parent.classList.add('scaffold-content-navigation-expanded');
+    });
+    return promise;
+  }
+}
+
+export default NavigationContainer;

package/backend/viewport/resizable-navigation.ts

@@ -0,0 +1,176 @@
+/*
+ * 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, LitElement, type TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { lll } from '@typo3/core/lit-helper';
+import Persistent from '../storage/persistent';
+import '@typo3/backend/element/icon-element';
+
+const selectorConverter = {
+  fromAttribute(selector: string) {
+    return document.querySelector(selector);
+  }
+};
+
+enum ReadingModeDirection {
+  ltr = 'ltr',
+  rtl = 'rtl',
+}
+
+class ReadingMode {
+  public static get(): ReadingModeDirection {
+    return document.querySelector('html').dir === 'rtl' ? ReadingModeDirection.rtl : ReadingModeDirection.ltr;
+  }
+}
+
+@customElement('typo3-backend-navigation-switcher')
+export class ResizableNavigation extends LitElement {
+  @property({ type: Number, attribute: 'minimum-width' }) minimumWidth: number = 250;
+  @property({ type: Number, attribute: 'initial-width' }) initialWidth: number;
+  @property({ type: String, attribute: 'persistence-identifier' }) persistenceIdentifier: string;
+
+  @property({ attribute: 'parent', converter: selectorConverter }) parentContainer: HTMLElement;
+  @property({ attribute: 'navigation', converter: selectorConverter }) navigationContainer: HTMLElement;
+
+  @state() resizing: boolean = false;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const initialWidth = this.initialWidth || parseInt(Persistent.get(this.persistenceIdentifier), 10);
+    this.setNavigationWidth(initialWidth);
+    window.addEventListener('resize', this.fallbackNavigationSizeIfNeeded, { passive: true });
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener('resize', this.fallbackNavigationSizeIfNeeded);
+  }
+
+  // disable shadow dom
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override async firstUpdated(): Promise<void> {
+    // Give the browser a chance to paint
+    await new Promise((r) => setTimeout(r, 0));
+    // needed to avoid any issues related to browsers, as lit-decorators (eventOptions) do not work yet
+    // properly https://lit-element.polymer-project.org/guide/events - @touchstart would throw warnings in browser console without passive=true
+    this.querySelector('.scaffold-content-navigation-switcher-btn').addEventListener('touchstart', this.toggleNavigation, { passive: true });
+    this.querySelector('.scaffold-content-navigation-drag').addEventListener('touchstart', this.startResizeNavigation, { passive: true });
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="scaffold-content-navigation-switcher">
+        <button @click="${this.toggleNavigation}" class="btn btn-sm btn-default btn-borderless scaffold-content-navigation-switcher-btn scaffold-content-navigation-switcher-open" role="button" title="${lll('viewport_navigation_show')}">
+          <typo3-backend-icon identifier="actions-chevron-end" size="small"></typo3-backend-icon>
+        </button>
+        <button @click="${this.toggleNavigation}" class="btn btn-sm btn-default btn-borderless scaffold-content-navigation-switcher-btn scaffold-content-navigation-switcher-close" role="button" title="${lll('viewport_navigation_hide')}">
+          <typo3-backend-icon identifier="actions-chevron-start" size="small"></typo3-backend-icon>
+        </button>
+      </div>
+      <div @mousedown="${this.startResizeNavigation}" class="scaffold-content-navigation-drag ${this.resizing ? 'resizing' : ''}"></div>
+    `;
+  }
+
+  private readonly toggleNavigation = (event: MouseEvent | TouchEvent | KeyboardEvent) => {
+    event.stopPropagation();
+    this.parentContainer.classList.toggle('scaffold-content-navigation-expanded');
+
+    if (event.currentTarget instanceof HTMLElement) {
+      const sibling = (event.currentTarget.nextElementSibling ?? event.currentTarget.previousElementSibling) as HTMLElement;
+      sibling.focus();
+    }
+  };
+
+  private readonly fallbackNavigationSizeIfNeeded = (event: UIEvent) => {
+    const window = <Window>event.currentTarget;
+    if (this.getNavigationWidth() === 0) {
+      return;
+    }
+    if (window.outerWidth < this.getNavigationWidth() + this.getNavigationPosition().left + this.minimumWidth) {
+      this.autoNavigationWidth();
+    }
+  };
+
+  private readonly handleMouseMove = (event: MouseEvent) => {
+    this.resizeNavigation(<number>event.clientX);
+  };
+
+  private readonly handleTouchMove = (event: TouchEvent) => {
+    this.resizeNavigation(<number>event.changedTouches[0].clientX);
+  };
+
+  private readonly resizeNavigation = (position: number) => {
+    let width : number = 0;
+    if (ReadingMode.get() === ReadingModeDirection.ltr) {
+      width = Math.round(position) - Math.round(this.getNavigationPosition().left);
+    } else {
+      width = Math.round(this.getNavigationPosition().right) - Math.round(position);
+    }
+
+    this.setNavigationWidth(width);
+  };
+
+  private readonly startResizeNavigation = (event: MouseEvent | TouchEvent) => {
+    if (event instanceof MouseEvent && event.button === 2) {
+      return;
+    }
+    event.stopPropagation();
+    this.resizing = true;
+    document.addEventListener('mousemove', this.handleMouseMove, false);
+    document.addEventListener('mouseup', this.stopResizeNavigation, false);
+    document.addEventListener('touchmove', this.handleTouchMove, false);
+    document.addEventListener('touchend', this.stopResizeNavigation, false);
+  };
+
+  private readonly stopResizeNavigation = () => {
+    this.resizing = false;
+    document.removeEventListener('mousemove', this.handleMouseMove, false);
+    document.removeEventListener('mouseup', this.stopResizeNavigation, false);
+    document.removeEventListener('touchmove', this.handleTouchMove, false);
+    document.removeEventListener('touchend', this.stopResizeNavigation, false);
+    Persistent.set(this.persistenceIdentifier, <string><unknown>this.getNavigationWidth());
+    document.dispatchEvent(new CustomEvent('typo3:navigation:resized'));
+  };
+
+  private getNavigationPosition(): DOMRect {
+    return this.navigationContainer.getBoundingClientRect();
+  }
+
+  private getNavigationWidth(): number {
+    return <number>this.navigationContainer.offsetWidth;
+  }
+
+  private autoNavigationWidth(): void {
+    this.navigationContainer.style.width = 'auto';
+  }
+
+  private setNavigationWidth(width: number): void {
+    // Allow only 50% of the main document
+    const maxWidth = Math.round(this.parentContainer.getBoundingClientRect().width / 2);
+    if (width > maxWidth) {
+      width = maxWidth;
+    }
+    width = width > this.minimumWidth ? width : this.minimumWidth;
+    this.navigationContainer.style.width = width + 'px';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-navigation-switcher': ResizableNavigation;
+  }
+}

package/backend/viewport/toolbar.ts

@@ -0,0 +1,27 @@
+/*
+* 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 { ScaffoldIdentifierEnum } from '../enum/viewport/scaffold-identifier';
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+class Toolbar {
+  public registerEvent(callback: () => void): void {
+    DocumentService.ready().then(() => {
+      callback();
+    });
+    new RegularEvent('t3-topbar-update', callback).bindTo(document.querySelector(ScaffoldIdentifierEnum.header));
+  }
+}
+
+export default Toolbar;

package/backend/viewport/topbar.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { ScaffoldIdentifierEnum } from '../enum/viewport/scaffold-identifier';
+import Toolbar from './toolbar';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+class Topbar {
+  public static readonly topbarSelector: string = ScaffoldIdentifierEnum.header;
+  public readonly Toolbar: Toolbar;
+
+  public constructor() {
+    this.Toolbar = new Toolbar();
+  }
+
+  public refresh(): void {
+    new AjaxRequest(TYPO3.settings.ajaxUrls.topbar).get().then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      const topbar = document.querySelector(Topbar.topbarSelector);
+      if (topbar !== null) {
+        topbar.innerHTML = data.topbar;
+        topbar.dispatchEvent(new Event('t3-topbar-update'));
+      }
+    });
+  }
+}
+
+export default Topbar;

package/backend/viewport.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 ContentContainer from './viewport/content-container';
+import ConsumerScope from './event/consumer-scope';
+import Loader from './viewport/loader';
+import NavigationContainer from './viewport/navigation-container';
+import Topbar from './viewport/topbar';
+
+class Viewport {
+  // The attributes are uppercase for compatibility reasons
+  public readonly Loader: Loader = Loader;
+  public readonly Topbar: Topbar;
+  public readonly NavigationContainer: NavigationContainer = null;
+  public readonly ContentContainer: ContentContainer = null;
+  public readonly consumerScope: any = ConsumerScope;
+
+  constructor() {
+    this.Topbar = new Topbar();
+    this.NavigationContainer = new NavigationContainer(this.consumerScope);
+    this.ContentContainer = new ContentContainer(this.consumerScope);
+  }
+}
+
+let viewportObject: Viewport;
+
+if (!top.TYPO3 || !top.TYPO3.Backend) {
+  viewportObject = new Viewport();
+  if (typeof top.TYPO3 !== 'undefined') {
+    top.TYPO3.Backend = viewportObject;
+  }
+} else {
+  viewportObject = top.TYPO3.Backend;
+}
+
+export default viewportObject;

package/backend/window-manager.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 Utility from '@typo3/backend/utility';
+
+/**
+ * Module: @typo3/backend/window-manager
+ */
+class WindowManager {
+  private windows: {[key: string]: Window} = {};
+
+  // alias for `localOpen`
+  public open(...params: any[]): Window {
+    return this._localOpen.apply(null, params);
+  }
+
+  // @todo Not implemented, yet
+  public globalOpen(...params: any[]): Window {
+    return this._localOpen.apply(null, params);
+  }
+
+  public localOpen = (uri: string, switchFocus?: boolean, windowName: string = 'newTYPO3frontendWindow', windowFeatures: string = ''): Window | null => this._localOpen(uri, switchFocus, windowName, windowFeatures);
+
+  private _localOpen(uri: string, switchFocus?: boolean, windowName: string = 'newTYPO3frontendWindow', windowFeatures: string = ''): Window | null {
+    if (!uri) {
+      return null;
+    }
+    if (switchFocus === null) {
+      // @todo Check how this would happen, taken from legacy code
+      switchFocus = !window.opener;
+    } else if (switchFocus === undefined) {
+      switchFocus = true;
+    }
+    const existingWindow = this.windows[windowName] ?? window.open('', windowName, windowFeatures);
+    let isInstanceOfWindow = false;
+    try {
+      // Note: `existingWindow instanceof Window` wouldn't work here as `existingWindow` is from another browser context/window.
+      // Note: this will still fail if `existingWindow` points to a cross-origin frame
+      // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms
+      isInstanceOfWindow = existingWindow.constructor.name === 'Window';
+    } catch {
+      // Intended fall-thru
+      // DOMException is thrown if existingWindow points to a cross-origin frame which we're not allowed to access
+    }
+    const existingUri = isInstanceOfWindow && !existingWindow.closed ? existingWindow.location.href : null;
+
+    if (Utility.urlsPointToSameServerSideResource(uri, existingUri)) {
+      existingWindow.location.replace(uri);
+      existingWindow.location.reload();
+      existingWindow.focus();
+      return existingWindow;
+    }
+    const newWindow = window.open(uri, windowName, windowFeatures);
+    this.windows[windowName] = newWindow;
+    if (switchFocus) {
+      newWindow.focus();
+    }
+    return newWindow;
+  }
+}
+
+const windowManager = new WindowManager();
+
+if (!top.TYPO3.WindowManager) {
+  if (top.document === window.document) {
+    // our instance is available in top/global scope
+    top.TYPO3.WindowManager = windowManager;
+  } else {
+    // ensure there is an instance in top/global scope
+    top.TYPO3.WindowManager = new WindowManager();
+  }
+}
+
+export default windowManager;