typo3-typescript-sources 13.4.20

package/backend/tree/page-tree.ts

@@ -0,0 +1,152 @@
+/*
+ * 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 { Tree } from '@typo3/backend/tree/tree';
+import { html, type TemplateResult } from 'lit';
+import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types';
+import Modal from '@typo3/backend/modal';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
+import type { ContentElementDragDropData } from '@typo3/backend/layout-module/drag-drop';
+import DragDropUtility from '@typo3/backend/utility/drag-drop-utility';
+
+/**
+ * A Tree based on for pages, which has a AJAX-based loading of the tree
+ * and also handles search + filter via AJAX.
+ */
+export class PageTree extends Tree
+{
+  public constructor() {
+    super();
+    this.settings.defaultProperties = {
+      hasChildren: false,
+      nameSourceField: 'title',
+      prefix: '',
+      suffix: '',
+      locked: false,
+      loaded: false,
+      overlayIcon: '',
+      selectable: true,
+      expanded: false,
+      checked: false,
+      stopPageTree: false,
+    };
+  }
+
+  public override getDataUrl(parentNode: TreeNodeInterface|null = null): string {
+    if (parentNode === null) {
+      return this.settings.dataUrl;
+    }
+
+    return this.settings.dataUrl + '&parent=' + parentNode.identifier + '&mount=' + parentNode.mountPoint + '&depth=' + parentNode.depth;
+  }
+
+  protected override createNodeToggle(node: TreeNodeInterface): TemplateResult {
+    return html`${node.stopPageTree && node.depth !== 0
+      ? html`
+          <span class="node-stop" @click="${(event: PointerEvent) => { event.preventDefault(); event.stopImmediatePropagation(); document.dispatchEvent(new CustomEvent('typo3:pagetree:mountPoint', { detail: { pageId: parseInt(node.identifier, 10) } })); }}">
+            <typo3-backend-icon identifier="actions-caret-end" size="small"></typo3-backend-icon>
+          </span>
+        `
+      : super.createNodeToggle(node)
+    }`;
+  }
+
+  protected override handleNodeDragOver(event: DragEvent): boolean {
+    // @todo incorporate isDropAllowed
+    if (super.handleNodeDragOver(event)) {
+      return true;
+    }
+
+    // @TODO Unity with parent
+    if (event.dataTransfer.types.includes(DataTransferTypes.content)) {
+      // Find the current hovered node
+      // Exit when no node was hovered
+      const targetNode = this.getNodeFromDragEvent(event);
+      if (targetNode === null) {
+        return false;
+      }
+
+      this.cleanDrag();
+
+      // Add hover styling to the current hovered node
+      // element, during the drag the default mouse over
+      // is disabled by the browser
+      const hoverElement = this.getElementFromNode(targetNode);
+      hoverElement.classList.add('node-hover');
+
+      // Open node with children while holding the
+      // node/element over this node for 1 second
+      if (targetNode.hasChildren && !targetNode.__expanded) {
+        if (this.openNodeTimeout.targetNode != targetNode) {
+          this.openNodeTimeout.targetNode = targetNode;
+          clearTimeout(this.openNodeTimeout.timeout);
+          this.openNodeTimeout.timeout = setTimeout(() => {
+            this.showChildren(this.openNodeTimeout.targetNode);
+            this.openNodeTimeout.targetNode = null;
+            this.openNodeTimeout.timeout = null;
+          }, 1000);
+        }
+      } else {
+        clearTimeout(this.openNodeTimeout.timeout);
+        this.openNodeTimeout.targetNode = null;
+        this.openNodeTimeout.timeout = null;
+      }
+
+      // Allow drop
+      event.preventDefault();
+
+      // Adjust allowed drop effect
+      DragDropUtility.updateEventAndTooltipToReflectCopyMoveIntention(event);
+
+      return true;
+    }
+
+    return false;
+  }
+
+  protected override handleNodeDrop(event: DragEvent): boolean {
+    if (super.handleNodeDrop(event)) {
+      return true;
+    }
+    if (event.dataTransfer.types.includes(DataTransferTypes.content)) {
+      const node = this.getNodeFromDragEvent(event);
+      if (node === null) {
+        return false;
+      }
+
+      const newNodeData = event.dataTransfer.getData(DataTransferTypes.content);
+      const parsedData = JSON.parse(newNodeData) as ContentElementDragDropData;
+
+      // allow drop
+      event.preventDefault();
+
+      const moveElementUrl = new URL(parsedData.moveElementUrl, window.origin);
+      moveElementUrl.searchParams.set('expandPage', node.identifier);
+      moveElementUrl.searchParams.set('originalPid', node.identifier);
+      if (DragDropUtility.isCopyModifierFromEvent(event)) {
+        moveElementUrl.searchParams.set('makeCopy', '1');
+      }
+
+      Modal.advanced({
+        content: moveElementUrl.toString(),
+        severity: SeverityEnum.notice,
+        size: Modal.sizes.large,
+        type: Modal.types.iframe,
+      });
+
+      return true;
+    }
+    return false;
+  }
+}

package/backend/tree/tree-module-state.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 AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { ModuleStateStorage } from '@typo3/backend/storage/module-state-storage';
+import type { LitElement } from 'lit';
+import type { ModuleStateUpdateEvent } from '@typo3/backend/storage/module-state-storage';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
+import type { Tree } from '@typo3/backend/tree/tree';
+import type { Constructor } from '@lit/reactive-element/decorators/base';
+
+export const TreeModuleState = <T extends Constructor<LitElement>>(superClass: T) => {
+  abstract class TreeModuleStateClass extends superClass {
+    protected abstract tree: Tree;
+    protected abstract moduleStateType: string;
+
+    public override connectedCallback(): void {
+      super.connectedCallback();
+      document.addEventListener('typo3:module-state-storage:update:' + this.moduleStateType, this.moduleStateUpdated);
+    }
+
+    public override disconnectedCallback(): void {
+      super.disconnectedCallback();
+      document.removeEventListener('typo3:module-state-storage:update:' + this.moduleStateType, this.moduleStateUpdated);
+    }
+
+    protected transformModuleStateIdentifierToNodeIdentifier(moduleStateIdentifier: string): string {
+      return moduleStateIdentifier;
+    }
+
+    protected transformNodeIdentifierToModuleStateIdentifier(nodeIdentifier: string): string {
+      return nodeIdentifier;
+    }
+
+    protected async selectActiveViaRootline(identifier: string) {
+      const url = new URL(this.tree.settings.rootlineUrl, window.location.origin);
+      url.searchParams.set('identifier', identifier);
+      const response = await new AjaxRequest(url.toString()).get({ cache: 'no-cache' });
+      const { rootline }: { rootline: string[] } = await response.resolve();
+      rootline.pop();
+      const propagate = false;
+      await this.selectActiveNodeByParents(identifier, rootline.map(id => this.transformModuleStateIdentifierToNodeIdentifier(id)), propagate);
+    }
+
+    /**
+     * Event listener called for each loaded node,
+     * here used to mark node remembered from/in ModuleState as selected
+     */
+    protected readonly selectActiveNodeInLoadedNodes = (evt: CustomEvent<{nodes: TreeNodeInterface[]}>): void => {
+      let moduleState = ModuleStateStorage.current(this.moduleStateType);
+      if (!moduleState.identifier) {
+        // No active node selected yet
+        return;
+      }
+
+      const { nodes } = evt.detail;
+      const treeIdentifier = this.transformModuleStateIdentifierToNodeIdentifier(moduleState.treeIdentifier);
+      const identifier = this.transformModuleStateIdentifierToNodeIdentifier(moduleState.identifier);
+      const nodeToActivate = nodes.find((node) => (
+        (moduleState.treeIdentifier !== null && node.__treeIdentifier === treeIdentifier) ||
+        (moduleState.treeIdentifier === null && node.identifier === identifier)
+      ));
+
+
+      if (!nodeToActivate) {
+        // The active node was not found. That is fine since we only enhance a
+        // subset of nodes here (like an ondemand loaded subtree) and we must not
+        // initiate new rootline requests.
+        // This will be checked by this.fetchActiveNodeIfMissing().
+        return;
+      }
+
+      if (moduleState.treeIdentifier === null) {
+        moduleState = ModuleStateStorage.updateWithTreeIdentifier(
+          this.moduleStateType,
+          this.transformNodeIdentifierToModuleStateIdentifier(nodeToActivate.identifier),
+          this.transformNodeIdentifierToModuleStateIdentifier(nodeToActivate.__treeIdentifier)
+        );
+      }
+      nodeToActivate.checked = true;
+      // If the parent was loaded with this chunk, expand it (and its parents) immediately
+      const parent = nodes.find((node) => node.__treeIdentifier === nodeToActivate.__parents.join('_'));
+      if (parent && !parent.__expanded) {
+        this.tree.updateComplete.then(() => this.tree.expandNodeParents(nodeToActivate));
+      }
+    };
+
+    protected readonly fetchActiveNodeIfMissing = async (): Promise<void> => {
+      const moduleState = ModuleStateStorage.current(this.moduleStateType);
+      if (!moduleState.identifier) {
+        // No active node selected yet
+        return;
+      }
+
+      if (this.tree.nodes.find((node: TreeNodeInterface) => node.checked)) {
+        return;
+      }
+
+      await this.selectActiveViaRootline(moduleState.identifier);
+    };
+
+    private readonly moduleStateUpdated = async (e: CustomEvent<ModuleStateUpdateEvent>): Promise<void> => {
+      const identifier = e.detail.state.identifier;
+      if (!this.tree) {
+        /* @todo store all module state updates in a stack to be consumed by a "slow" tree initialization */
+        return;
+      }
+      if (identifier && identifier === e.detail.oldState.identifier && this.tree.nodes.find((node: TreeNodeInterface) => node.checked)) {
+        return;
+      }
+
+      if (!identifier) {
+        console.error('invalid identifier', e.detail);
+        return;
+      }
+
+      if (this.tree.loading) {
+        await this.tree.loadComplete;
+      }
+
+      const nodeIdentifier = this.transformModuleStateIdentifierToNodeIdentifier(identifier);
+      const node = this.tree.nodes.find((node) => node.identifier === nodeIdentifier);
+      const selectedNode = this.tree.nodes.find((node: TreeNodeInterface) => node.checked);
+      if (node && node === selectedNode) {
+        // node is already selected, only ensure parents are expanded
+        await this.tree.expandNodeParents(node);
+        return;
+      }
+
+      const propagate = false;
+      if (node) {
+        await this.selectActiveNodeByParents(identifier, node.__parents, propagate);
+        return;
+      }
+
+      await this.selectActiveViaRootline(identifier);
+    };
+
+    private async selectActiveNodeByParents(identifier: string, parents: string[], propagate: boolean = true) {
+      await this.tree.expandParents(parents);
+      const nodeIdentifier = this.transformModuleStateIdentifierToNodeIdentifier(identifier);
+      const node = this.tree.nodes.find((node) => node.identifier === nodeIdentifier);
+      if (node) {
+        this.tree.selectNode(node, propagate);
+      }
+    }
+  };
+  return TreeModuleStateClass;
+};

package/backend/tree/tree-node-toggle.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 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, type TemplateResult } from 'lit';
+import '@typo3/backend/element/icon-element';
+
+@customElement('typo3-backend-tree-node-toggle')
+export default class TreeNodeToggle extends LitElement {
+  @property({ type: String, reflect: true, attribute: 'aria-expanded' }) expanded: string = 'false';
+
+  protected override render(): TemplateResult | symbol {
+    return html`<typo3-backend-icon size="small" identifier="${this.expanded === 'true' ? 'actions-chevron-down' : 'actions-chevron-end'}"></typo3-backend-icon>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-tree-node-toggle': TreeNodeToggle;
+  }
+}

package/backend/tree/tree-node.ts

@@ -0,0 +1,97 @@
+/*
+ * 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 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!
+ */
+
+export enum TreeNodeCommandEnum {
+  COPY = 'copy',
+  EDIT = 'edit',
+  MOVE = 'move',
+  DELETE = 'delete',
+  NEW = 'new'
+}
+
+export enum TreeNodePositionEnum {
+  INSIDE = 'inside',
+  BEFORE = 'before',
+  AFTER = 'after'
+}
+
+
+export interface TreeNodeStatusInformation {
+  label: string,
+  icon: string,
+  severity: number,
+  overlayIcon: string,
+  priority: number
+}
+
+export interface TreeNodeLabel {
+  label: string,
+  color: string,
+  priority: number,
+}
+
+/**
+ * Represents a single node in the tree that is rendered.
+ */
+export interface TreeNodeInterface {
+
+  // TYPO3\CMS\Backend\Dto\Tree\TreeItem
+  type: string,
+  identifier: string,
+  parentIdentifier: string,
+  recordType: string,
+  name: string,
+  note: string,
+  prefix: string,
+  suffix: string,
+  tooltip: string,
+  depth: number,
+  hasChildren: boolean,
+  loaded: boolean,
+  editable: boolean,
+  deletable: boolean,
+  icon: string,
+  overlayIcon: string,
+  statusInformation: Array<TreeNodeStatusInformation>,
+  labels: Array<TreeNodeLabel>,
+
+  // Calculated Internal
+  __treeIdentifier: string,
+  __treeParents: Array<string>,
+  __treeDragAction: string,
+  __parents: Array<string>,
+  __processed: boolean,
+  __loading: boolean,
+  __hidden: boolean,
+  __expanded: boolean,
+  __indeterminate: boolean,
+  __x: number,
+  __y: number,
+
+  // TYPO3\CMS\Backend\Dto\Tree\PageTreeItem
+  nameSourceField?: string,
+  workspaceId?: number,
+  locked?: boolean,
+  stopPageTree?: boolean,
+  mountPoint?: number,
+  doktype?: number;
+
+  // TYPO3\CMS\Backend\Dto\Tree\FileTreeItem
+  pathIdentifier?: string,
+  storage?: number,
+  resourceType?: string,
+
+  // TYPO3\CMS\Backend\Dto\Tree\SelectTreeItem
+  checked?: boolean,
+  selectable?: boolean,
+}

package/backend/tree/tree-toolbar.ts

@@ -0,0 +1,117 @@
+/*
+ * 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 } from 'lit/decorators';
+import { lll } from '@typo3/core/lit-helper';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import '@typo3/backend/element/icon-element';
+import { Tree } from './tree';
+import type { TreeNodeInterface } from './tree-node';
+
+@customElement('typo3-backend-tree-toolbar')
+export class TreeToolbar extends LitElement {
+  @property({ type: Tree }) tree: Tree = null;
+  protected settings = {
+    searchInput: '.search-input',
+    filterTimeout: 450
+  };
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override firstUpdated(): void
+  {
+    const inputEl = this.querySelector(this.settings.searchInput) as HTMLInputElement;
+    if (inputEl) {
+      new DebounceEvent('input', (evt: InputEvent) => {
+        const el = evt.target as HTMLInputElement;
+        this.tree.filter(el.value.trim());
+      }, this.settings.filterTimeout).bindTo(inputEl);
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="tree-toolbar">
+        <div class="tree-toolbar__menu">
+          <div class="tree-toolbar__search">
+              <label for="toolbarSearch" class="visually-hidden">
+                ${lll('labels.label.searchString')}
+              </label>
+              <input type="search" id="toolbarSearch" class="form-control form-control-sm search-input" placeholder="${lll('tree.searchTermInfo')}">
+          </div>
+        </div>
+        <div class="tree-toolbar__submenu">
+          <button
+            type="button"
+            class="tree-toolbar__menuitem dropdown-toggle dropdown-toggle-no-chevron float-end"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+            aria-label="${lll('labels.openTreeOptionsMenu')}"
+          >
+            <typo3-backend-icon identifier="actions-menu-alternative" size="small"></typo3-backend-icon>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <button class="dropdown-item" @click="${() => this.refreshTree()}">
+                <span class="dropdown-item-columns">
+                  <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                    <typo3-backend-icon identifier="actions-refresh" size="small"></typo3-backend-icon>
+                  </span>
+                  <span class="dropdown-item-column dropdown-item-column-title">
+                    ${lll('labels.refresh')}
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li>
+              <button class="dropdown-item" @click="${(evt: MouseEvent) => this.collapseAll(evt)}">
+                <span class="dropdown-item-columns">
+                  <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                    <typo3-backend-icon identifier="apps-pagetree-category-collapse-all" size="small"></typo3-backend-icon>
+                  </span>
+                  <span class="dropdown-item-column dropdown-item-column-title">
+                    ${lll('labels.collapse')}
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    `;
+  }
+
+  protected refreshTree(): void {
+    this.tree.refreshOrFilterTree();
+  }
+
+  protected collapseAll(evt: MouseEvent): void {
+    evt.preventDefault();
+    // Only collapse nodes that aren't on the root level
+    // @TODO Implement into tree
+    this.tree.nodes.forEach((node: TreeNodeInterface) => {
+      if (node.__parents.length) {
+        this.tree.hideChildren(node);
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-tree-toolbar': TreeToolbar;
+  }
+}