typo3-typescript-sources 13.4.20

package/backend/toolbar/shortcut-menu.ts

@@ -0,0 +1,254 @@
+/*
+ * 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 Icons from '../icons';
+import Modal from '../modal';
+import Notification from '../notification';
+import Viewport from '../viewport';
+import SecurityUtility from '@typo3/core/security-utility';
+import '@typo3/backend/element/spinner-element';
+import { Sizes } from '../enum/icon-types';
+import RegularEvent from '@typo3/core/event/regular-event';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+enum Identifiers {
+  containerSelector = '#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem',
+  toolbarIconSelector = '.dropdown-toggle span.icon',
+  toolbarMenuSelector = '.dropdown-menu',
+
+  shortcutItemSelector = '.t3js-topbar-shortcut',
+  shortcutJumpSelector = '.t3js-shortcut-jump',
+  shortcutDeleteSelector = '.t3js-shortcut-delete',
+  shortcutEditSelector = '.t3js-shortcut-edit',
+
+  shortcutFormSelector = '.t3js-shortcut-form',
+
+  createShortcutSelector = '[data-dispatch-action="TYPO3.ShortcutMenu.createShortcut"]',
+}
+
+interface BookmarkData {
+  route: string;
+  args: string;
+}
+
+/**
+ * Module: @typo3/backend/toolbar/shortcut-menu
+ * shortcut menu logic to add new shortcut, remove a shortcut
+ * and edit a shortcut
+ */
+class ShortcutMenu {
+  constructor() {
+    Viewport.Topbar.Toolbar.registerEvent(this.initializeEvents);
+  }
+
+  /**
+   * makes a call to the backend class to create a new shortcut,
+   * when finished it reloads the menu
+   *
+   * @param {String} routeIdentifier
+   * @param {String} routeArguments
+   * @param {String} displayName
+   * @param {String} confirmationText
+   * @param {Object} shortcutButton
+   */
+  public createShortcut(
+    routeIdentifier: string,
+    routeArguments: string,
+    displayName: string,
+    confirmationText: string,
+    shortcutButton: HTMLElement,
+  ): void {
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.shortcut_create)).post({
+      routeIdentifier: routeIdentifier,
+      arguments: routeArguments,
+      displayName: displayName,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const jsonResponse = await response.resolve();
+      if (jsonResponse.result === 'success') {
+        Notification.success(TYPO3.lang['bookmark.savedTitle'], TYPO3.lang['bookmark.savedMessage']);
+      } else if (jsonResponse.result === 'alreadyExists') {
+        Notification.info(TYPO3.lang['bookmark.alreadyExistsTitle'], TYPO3.lang['bookmark.alreadyExistsMessage']);
+      }
+
+      // Always reload the bookmark menu, could be out-of-sync in the "alreadyExists" case
+      this.refreshMenu();
+
+      if (typeof shortcutButton !== 'object') {
+        // @todo: when does this happen?
+        console.warn(`Expected argument shortcutButton to be an object, got ${typeof shortcutButton}`);
+        return;
+      }
+
+      const isDropdownItem = shortcutButton.classList.contains('dropdown-item');
+      const securityUtility = new SecurityUtility();
+      Icons.getIcon('actions-system-shortcut-active', Icons.sizes.small).then((icon: string): void => {
+        shortcutButton.innerHTML = icon + (isDropdownItem ? ' ' + securityUtility.encodeHtml(TYPO3.lang['labels.alreadyBookmarked']) : '');
+      });
+
+      if (isDropdownItem) {
+        shortcutButton.setAttribute('disabled', 'disabled');
+      } else {
+        shortcutButton.classList.add('active');
+      }
+
+      shortcutButton.dataset.dispatchDisabled = 'disabled';
+      shortcutButton.title = securityUtility.encodeHtml(TYPO3.lang['labels.alreadyBookmarked']);
+    }).catch((): void => {
+      Notification.error(TYPO3.lang['bookmark.failedTitle'], TYPO3.lang['bookmark.failedMessage']);
+    });
+  }
+
+  private readonly initializeEvents = (): void => {
+    const containerSelector = document.querySelector(Identifiers.containerSelector);
+    new RegularEvent('click', (evt: Event, target: HTMLElement): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+
+      const shortcutItem = target.closest(Identifiers.shortcutItemSelector) as HTMLElement;
+      this.deleteShortcut(parseInt(shortcutItem.dataset.shortcutid, 10));
+    }).delegateTo(containerSelector, Identifiers.shortcutDeleteSelector);
+
+    new RegularEvent('click', (evt: Event, target: HTMLElement): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+
+      const shortcutItem = target.closest(Identifiers.shortcutItemSelector) as HTMLElement;
+      this.editShortcut(parseInt(shortcutItem.dataset.shortcutid, 10), shortcutItem.dataset.shortcutgroup);
+    }).delegateTo(containerSelector, Identifiers.shortcutEditSelector);
+
+    new RegularEvent('submit', (evt: Event, target: HTMLFormElement): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+
+      this.saveShortcutForm(target);
+    }).delegateTo(containerSelector, Identifiers.shortcutFormSelector);
+
+    new RegularEvent('reset', (evt: Event): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+
+      this.refreshMenu();
+    }).delegateTo(containerSelector, Identifiers.shortcutFormSelector);
+
+    new RegularEvent('click', (evt: Event, target: HTMLAnchorElement): void => {
+      evt.preventDefault();
+
+      const router = document.querySelector('typo3-backend-module-router');
+      router.setAttribute('endpoint', target.href);
+      router.setAttribute('module', target.dataset.module);
+    }).delegateTo(containerSelector, Identifiers.shortcutJumpSelector);
+  };
+
+  /**
+   * Removes an existing short by sending an AJAX call
+   *
+   * @param shortcutId number
+   */
+  private deleteShortcut(shortcutId: number): void {
+    const modal = Modal.confirm(TYPO3.lang['bookmark.delete'], TYPO3.lang['bookmark.confirmDelete']);
+    modal.addEventListener('confirm.button.ok', (): void => {
+      (new AjaxRequest(TYPO3.settings.ajaxUrls.shortcut_remove)).post({
+        shortcutId,
+      }).then(async (response: AjaxResponse): Promise<void> => {
+        const data = await response.resolve();
+        // a reload is used in order to restore the original behaviour
+        // e.g. remove groups that are now empty because the last one in the group
+        // was removed
+        this.refreshMenu();
+        // if we remove bookmark entry for current page, we want to enable the bookmark link
+        // again in the dropdown menu
+        this.checkIfEnableBookmarkLink(data.data);
+      });
+      modal.hideModal();
+    });
+    modal.addEventListener('confirm.button.cancel', (): void => {
+      modal.hideModal();
+    });
+  }
+
+  /**
+   * Build the in-place-editor for a shortcut
+   */
+  private editShortcut(shortcutId: number, shortcutGroup: string): void {
+    // load the form
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.shortcut_editform)).withQueryArguments({
+      shortcutId,
+      shortcutGroup,
+    }).get({ cache: 'no-cache' }).then(async (response: AjaxResponse): Promise<void> => {
+      document.querySelector(Identifiers.containerSelector + ' ' + Identifiers.toolbarMenuSelector).innerHTML = await response.resolve();
+    });
+  }
+
+  /**
+   * Save the data from the in-place-editor for a shortcut
+   */
+  private saveShortcutForm(shortcutForm: HTMLFormElement): void {
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.shortcut_saveform)).post(new FormData(shortcutForm)).then((): void => {
+      Notification.success(TYPO3.lang['bookmark.savedTitle'], TYPO3.lang['bookmark.savedMessage']);
+      this.refreshMenu();
+    });
+  }
+
+  /**
+   * Reloads the menu after an update
+   */
+  private refreshMenu(): void {
+    const toolbarItemIcon = document.querySelector(Identifiers.containerSelector + ' ' + Identifiers.toolbarIconSelector);
+    const existingIcon = toolbarItemIcon.cloneNode(true);
+
+    const spinner = document.createElement('typo3-backend-spinner');
+    spinner.setAttribute('size', Sizes.small);
+    toolbarItemIcon.replaceWith(spinner);
+
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.shortcut_list)).get({ cache: 'no-cache' }).then(async (response: AjaxResponse): Promise<void> => {
+      document.querySelector(Identifiers.containerSelector + ' ' + Identifiers.toolbarMenuSelector).innerHTML = await response.resolve();
+    }).finally((): void => {
+      document.querySelector(Identifiers.containerSelector + ' typo3-backend-spinner').replaceWith(existingIcon);
+    });
+  }
+
+  private checkIfEnableBookmarkLink(bookmarkData: BookmarkData): void {
+    const shortcutButton: HTMLElement|null = top.list_frame?.document.querySelector(Identifiers.createShortcutSelector);
+    if (!shortcutButton) {
+      return;
+    }
+
+    const dispatchArgs = JSON.parse(shortcutButton.dataset.dispatchArgs.replace(/&quot;/g, '"'));
+    if (dispatchArgs[0] !== bookmarkData.route || dispatchArgs[1] !== bookmarkData.args) {
+      return;
+    }
+
+    const securityUtility = new SecurityUtility();
+    const isDropdownItem = shortcutButton.classList.contains('dropdown-item');
+
+    Icons.getIcon('actions-system-shortcut-new', Icons.sizes.small).then((icon: string): void => {
+      shortcutButton.innerHTML = icon + (isDropdownItem ? ' ' + securityUtility.encodeHtml(TYPO3.lang['labels.makeBookmark']) : '');
+    });
+    shortcutButton.title = securityUtility.encodeHtml(TYPO3.lang['labels.makeBookmark']);
+    delete shortcutButton.dataset.dispatchDisabled;
+
+    if (isDropdownItem) {
+      shortcutButton.removeAttribute('disabled');
+    } else {
+      shortcutButton.classList.remove('active');
+    }
+  }
+}
+
+if (!top.TYPO3.ShortcutMenu || typeof top.TYPO3.ShortcutMenu !== 'object') {
+  top.TYPO3.ShortcutMenu = new ShortcutMenu();
+}
+
+const shortcutMenuObject: ShortcutMenu = top.TYPO3.ShortcutMenu;
+export default shortcutMenuObject;

package/backend/toolbar/system-information-menu.ts

@@ -0,0 +1,161 @@
+/*
+ * 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 RegularEvent from '@typo3/core/event/regular-event';
+import Icons from '../icons';
+import PersistentStorage from '../storage/persistent';
+import Viewport from '../viewport';
+import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+/**
+ * Explicit selectors to avoid nesting queries
+ */
+enum SystemInformationSelector {
+  element = '#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem',
+  icon = '#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem .toolbar-item-icon .t3js-icon',
+  menu = '#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem .dropdown-menu',
+  data = '[data-systeminformation-data]',
+  badge = '[data-systeminformation-badge]',
+  message = '[data-systeminformation-message-module]',
+  messageLink = '[data-systeminformation-message-module] a'
+}
+
+interface SystemInformationData {
+  count: number,
+  severityBadgeClass: string,
+}
+
+interface SystemInformationMessageData {
+  count: number,
+  status: string,
+  module: string,
+  params: string
+}
+
+/**
+ * Module: @typo3/backend/toolbar/system-information-menu
+ * System information menu handler
+ */
+class SystemInformationMenu {
+  private timer: number = null;
+
+  constructor() {
+    new RegularEvent('click', this.handleMessageLinkClick)
+      .delegateTo(document, SystemInformationSelector.messageLink);
+    Viewport.Topbar.Toolbar.registerEvent(this.updateMenu);
+
+    //  triggred via BackendUtility::setUpdateSignal('updateSystemInformationMenu')
+    document.addEventListener('typo3:system-information-menu:update', () => this.updateMenu());
+  }
+
+  private static getData(): SystemInformationData {
+    const element: null|HTMLElement = document.querySelector(SystemInformationSelector.data) as HTMLElement;
+    const data: null|DOMStringMap = element?.dataset;
+    return {
+      count: data?.systeminformationDataCount ? parseInt(data.systeminformationDataCount, 10) : 0,
+      severityBadgeClass: data?.systeminformationDataSeveritybadgeclass ?? '',
+    };
+  }
+
+  private static getMessageDataFromElement(element: HTMLElement): SystemInformationMessageData {
+    const data: DOMStringMap = element.dataset;
+    return {
+      count: data.systeminformationMessageCount ? parseInt(data.systeminformationMessageCount, 10) : 0,
+      status: data.systeminformationMessageStatus ?? '',
+      module: data.systeminformationMessageModule ?? '',
+      params: data.systeminformationMessageParams ?? '',
+    };
+  }
+
+  private static updateBadge(): void {
+    const data = SystemInformationMenu.getData();
+    const element = document.querySelector(SystemInformationSelector.badge) as HTMLElement;
+
+    // ensure all default classes are available and previous
+    // (at this time in processing unknown) class is removed
+    element.removeAttribute('class');
+    element.classList.add('toolbar-item-badge');
+    element.classList.add('badge');
+    element.classList.add('badge-pill');
+    if (data.severityBadgeClass !== '') {
+      element.classList.add(data.severityBadgeClass);
+    }
+
+    element.textContent = data.count.toString();
+    element.classList.toggle('hidden', !(data.count > 0));
+  }
+
+  private readonly updateMenu = async (): Promise<void> => {
+    const toolbarItemIcon = document.querySelector(SystemInformationSelector.icon);
+    const currentIcon = toolbarItemIcon.cloneNode(true);
+
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+
+    Icons.getIcon('spinner-circle', Icons.sizes.small).then((spinner: string): void => {
+      toolbarItemIcon.replaceWith(document.createRange().createContextualFragment(spinner));
+    });
+
+    try {
+      const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.systeminformation_render).get({ redirect: 'manual' });
+      const htmlResult = await response.resolve();
+      document.querySelector(SystemInformationSelector.menu).innerHTML = htmlResult;
+      SystemInformationMenu.updateBadge();
+    } catch (e: unknown) {
+      const errorToBeSurpressed = (
+        // Backend is not available and returned a redirect to the login page, ignore
+        e instanceof AjaxResponse && e.response.type === 'opaqueredirect'
+      );
+      if (!errorToBeSurpressed) {
+        throw e;
+      }
+    } finally {
+      document.querySelector(SystemInformationSelector.icon).replaceWith(currentIcon);
+      // reload error data every five minutes
+      this.timer = setTimeout(this.updateMenu, 1000 * 300);
+    }
+  };
+
+  /**
+   * Updates the UC and opens the linked module
+   */
+  private handleMessageLinkClick(event: Event, target: HTMLElement): void {
+    const messageData = SystemInformationMenu.getMessageDataFromElement(target.closest(SystemInformationSelector.message));
+    if (messageData.module === '') {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+
+    const moduleStorageObject: { [key: string]: object } = {};
+    const timestamp = Math.floor(Date.now() / 1000);
+    let storedSystemInformationSettings = {};
+    if (PersistentStorage.isset('systeminformation')) {
+      storedSystemInformationSettings = JSON.parse(PersistentStorage.get('systeminformation'));
+    }
+
+    moduleStorageObject[messageData.module] = { lastAccess: timestamp };
+    Object.assign(storedSystemInformationSettings, moduleStorageObject);
+    const ajax = PersistentStorage.set('systeminformation', JSON.stringify(storedSystemInformationSettings));
+    ajax.then((): void => {
+      // finally, open the module now
+      TYPO3.ModuleMenu.App.showModule(messageData.module, messageData.params);
+      Viewport.Topbar.refresh();
+    });
+  }
+}
+
+export default new SystemInformationMenu();

package/backend/toolbar.ts

@@ -0,0 +1,41 @@
+/*
+ * 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';
+
+/**
+ * Module: @typo3/backend/toolbar
+ * Toolbar component of the TYPO3 backend
+ * @exports @typo3/backend/toolbar
+ */
+class Toolbar {
+  public static initialize(): void {
+    Toolbar.initializeEvents();
+  }
+
+  private static initializeEvents(): void {
+    new RegularEvent('click', (): void => {
+      const scaffold = document.querySelector('.scaffold');
+      scaffold.classList.remove('scaffold-modulemenu-expanded');
+      scaffold.classList.toggle('scaffold-toolbar-expanded');
+    }).bindTo(document.querySelector('.t3js-topbar-button-toolbar'));
+
+    new RegularEvent('click', (): void => {
+      const scaffold = document.querySelector('.scaffold');
+      scaffold.classList.remove('scaffold-modulemenu-expanded', 'scaffold-toolbar-expanded');
+    }).bindTo(document.querySelector('.t3js-topbar-button-search'));
+  }
+}
+
+DocumentService.ready().then(Toolbar.initialize);

package/backend/tree/file-storage-browser.ts

@@ -0,0 +1,194 @@
+/*
+ * 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, query } from 'lit/decorators';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { type TreeToolbar } from '@typo3/backend/tree/tree-toolbar';
+import ElementBrowser from '@typo3/backend/element-browser';
+import LinkBrowser from '@typo3/backend/link-browser';
+import '@typo3/backend/element/icon-element';
+import { FileStorageTree } from './file-storage-tree';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
+
+/**
+ * Extension of the Tree, allowing to show additional actions on the right hand of the tree to directly link
+ * select a folder
+ */
+@customElement('typo3-backend-component-filestorage-browser-tree')
+export class FileStorageBrowserTree extends FileStorageTree {
+
+  protected override createNodeContentAction(node: TreeNodeInterface): TemplateResult {
+    if (this.settings.actions.includes('link')) {
+      return html`
+        <span class="node-action" @click="${() => this.linkItem(node)}">
+          <typo3-backend-icon identifier="actions-link" size="small"></typo3-backend-icon>
+        </span>
+      `;
+    } else if (this.settings.actions.includes('select')) {
+      return html`
+        <span class="node-action" @click="${() => this.selectItem(node)}">
+          <typo3-backend-icon identifier="actions-link" size="small"></typo3-backend-icon>
+        </span>
+      `;
+    }
+    return super.createNodeContentAction(node);
+  }
+
+  /**
+   * Link to a folder - Link Handler specific
+   */
+  private linkItem(node: TreeNodeInterface): void {
+    LinkBrowser.finalizeFunction('t3://folder?storage=' + node.storage + '&identifier=' + node.pathIdentifier);
+  }
+
+  /**
+   * Element Browser specific
+   */
+  private selectItem(node: TreeNodeInterface): void {
+    ElementBrowser.insertElement(
+      node.recordType,
+      node.identifier,
+      node.name,
+      node.identifier,
+      true
+    );
+  }
+}
+
+@customElement('typo3-backend-component-filestorage-browser')
+export class FileStorageBrowser extends LitElement {
+  @query('.tree-wrapper') tree: FileStorageBrowserTree;
+
+  private activeFolder: string = '';
+  private actions: Array<string> = [];
+
+  protected override firstUpdated(): void {
+    this.activeFolder = this.getAttribute('active-folder') || '';
+  }
+
+  // disable shadow dom for now
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    if (this.hasAttribute('tree-actions') && this.getAttribute('tree-actions').length) {
+      this.actions = JSON.parse(this.getAttribute('tree-actions'));
+    }
+    const treeSetup = {
+      dataUrl: top.TYPO3.settings.ajaxUrls.filestorage_tree_data,
+      rootlineUrl: top.TYPO3.settings.ajaxUrls.filestorage_tree_rootline,
+      filterUrl: top.TYPO3.settings.ajaxUrls.filestorage_tree_filter,
+      showIcons: true,
+      actions: this.actions
+    };
+
+    const initialized = () => {
+      // set up toolbar now with updated properties
+      const toolbar = this.querySelector('typo3-backend-tree-toolbar') as TreeToolbar;
+      toolbar.tree = this.tree;
+      // Expand to the active folder if one is set
+      if (this.activeFolder) {
+        this.expandToActiveFolder();
+      }
+    };
+
+    return html`
+      <div class="tree">
+        <typo3-backend-tree-toolbar .tree="${this.tree}"></typo3-backend-tree-toolbar>
+        <div class="navigation-tree-container">
+          <typo3-backend-component-filestorage-browser-tree
+            class="tree-wrapper"
+            .setup=${treeSetup}
+            @tree:initialized=${initialized}
+            @typo3:tree:node-selected=${this.loadFolderDetails}
+            @typo3:tree:nodes-prepared=${this.selectActiveNode}
+          ></typo3-backend-component-page-browser-tree>
+        </div>
+      </div>
+    `;
+  }
+
+  private readonly selectActiveNode = (evt: CustomEvent): void => {
+    // Activate the current node
+    const nodes = evt.detail.nodes as Array<TreeNodeInterface>;
+    evt.detail.nodes = nodes.map((node: TreeNodeInterface) => {
+      if (decodeURIComponent(node.identifier) === this.activeFolder) {
+        node.checked = true;
+      }
+      return node;
+    });
+  };
+
+  /**
+   * Expand the tree to show the active folder
+   */
+  private async expandToActiveFolder(): Promise<void> {
+    if (!this.activeFolder || !this.tree.settings.rootlineUrl) {
+      return;
+    }
+
+    // Check if the active node is already in the tree
+    const existingNode = this.tree.nodes.find((node) => decodeURIComponent(node.identifier) === this.activeFolder);
+    if (existingNode) {
+      // Node is already loaded, just expand its parents
+      await this.tree.expandNodeParents(existingNode);
+      return;
+    }
+
+    // Fetch the rootline to find the path to the active folder
+    try {
+      const url = new URL(this.tree.settings.rootlineUrl, window.location.origin);
+      url.searchParams.set('identifier', this.activeFolder);
+      const response = await new AjaxRequest(url.toString()).get({ cache: 'no-cache' });
+      const { rootline }: { rootline: string[] } = await response.resolve();
+
+      // Expand all parent nodes
+      if (rootline && rootline.length > 0) {
+        // Remove the last element (the active folder itself)
+        rootline.pop();
+        // Encode identifiers to match the URL-encoded format stored in tree nodes
+        await this.tree.expandParents(rootline.map(id => encodeURIComponent(id)));
+      }
+    } catch (error) {
+      // If rootline fetch fails, silently ignore (folder might not exist or no access)
+      console.debug('Could not expand to active folder:', error);
+    }
+  }
+
+  /**
+   * If a page is clicked, the content area needs to be updated
+   */
+  private readonly loadFolderDetails = (evt: CustomEvent): void => {
+    const node = evt.detail.node as TreeNodeInterface;
+    if (!node.checked) {
+      return;
+    }
+    const contentsUrl = document.location.href + '&contentOnly=1&expandFolder=' + node.identifier;
+    (new AjaxRequest(contentsUrl)).get()
+      .then((response: AjaxResponse) => response.resolve())
+      .then((response) => {
+        const contentContainer = document.querySelector('.element-browser-main-content .element-browser-body') as HTMLElement;
+        contentContainer.innerHTML = response;
+      });
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-component-filestorage-browser-tree': FileStorageBrowserTree;
+    'typo3-backend-component-filestorage-browser': FileStorageBrowser;
+  }
+}