typo3-typescript-sources 13.4.20

package/backend/tests/popover-test.ts

@@ -0,0 +1,83 @@
+import { Popover as BootstrapPopover } from 'bootstrap';
+import Popover from '@typo3/backend/popover.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/popover-test', () => {
+  describe('initialize', () => {
+    const element = document.createElement('div');
+    element.dataset.bsToggle = 'popover';
+    document.body.append(element);
+
+    it('works with default selector', () => {
+      Popover.initialize();
+      expect(element.outerHTML).to.equal('<div data-bs-toggle="popover"></div>');
+    });
+
+    const element2 = document.createElement('div');
+    element2.dataset.bsToggle = 'popover';
+    element2.dataset.title = 'foo';
+    document.body.append(element2);
+    it('works with default selector and title attribute', () => {
+      Popover.initialize();
+      expect(element2.outerHTML).to.equal('<div data-bs-toggle="popover" data-title="foo" data-bs-title="foo"></div>');
+    });
+
+    const element3 = document.createElement('div');
+    element3.dataset.bsToggle = 'popover';
+    element3.dataset.bsContent = 'foo';
+    document.body.append(element3);
+    it('works with default selector and content attribute', () => {
+      Popover.initialize();
+      expect(element3.outerHTML).to.equal('<div data-bs-toggle="popover" data-bs-content="foo"></div>');
+    });
+
+    const element4 = document.createElement('div');
+    element4.classList.add('t3js-popover');
+    document.body.append(element4);
+    it('works with custom selector', () => {
+      Popover.initialize('.t3js-popover');
+      expect(element4.outerHTML).to.equal('<div class="t3js-popover"></div>');
+    });
+  });
+
+  describe('call setOptions', () => {
+    const element = document.createElement('div');
+    element.classList.add('t3js-test-set-options');
+    element.dataset.title = 'foo-title';
+    element.dataset.bsContent = 'foo-content';
+    document.body.append(element);
+
+    it('can set title', () => {
+      Popover.initialize('.t3js-test-set-options');
+      expect(element.getAttribute('data-title')).to.equal('foo-title');
+      expect(element.getAttribute('data-bs-content')).to.equal('foo-content');
+      Popover.setOptions(element, <BootstrapPopover.Options>{
+        'title': 'bar-title'
+      });
+      expect(element.getAttribute('data-title')).to.equal('foo-title');
+      expect(element.getAttribute('data-bs-content')).to.equal('foo-content');
+      expect(element.getAttribute('data-bs-original-title')).to.equal('bar-title');
+    });
+
+    const element2 = document.createElement('div');
+    element2.classList.add('t3js-test-set-options2');
+    element2.dataset.title = 'foo-title';
+    element2.dataset.bsContent = 'foo-content';
+    document.body.append(element2);
+
+    it('can set content', () => {
+      Popover.initialize('.t3js-test-set-options2');
+      // Popover must be visible before the content can be updated manually via setOptions()
+      Popover.show(element2);
+      expect(element2.getAttribute('data-title')).to.equal('foo-title');
+      expect(element2.getAttribute('data-bs-content')).to.equal('foo-content');
+      Popover.setOptions(element2, <BootstrapPopover.Options>{
+        'content': 'bar-content'
+      });
+      expect(element2.getAttribute('data-title')).to.equal('foo-title');
+      expect(element2.getAttribute('data-bs-content')).to.equal('bar-content');
+      expect(element2.getAttribute('data-bs-original-title')).to.equal('foo-title');
+    });
+  });
+});

package/backend/toolbar/clear-cache-menu.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 AjaxRequest from '@typo3/core/ajax/ajax-request';
+import Icons from '../icons';
+import Notification from '../notification';
+import Viewport from '../viewport';
+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-clearcachetoolbaritem',
+  menuItemSelector = '.t3js-toolbar-cache-flush-action',
+  toolbarIconSelector = '.toolbar-item-icon .t3js-icon',
+}
+
+/**
+ * Module: @typo3/backend/toolbar/clear-cache-menu
+ * main functionality for clearing caches via the top bar
+ * reloading the clear cache icon
+ */
+class ClearCacheMenu {
+  constructor() {
+    Viewport.Topbar.Toolbar.registerEvent(this.initializeEvents);
+  }
+
+  /**
+   * Registers listeners for the icons inside the dropdown to trigger
+   * the clear cache call
+   */
+  private readonly initializeEvents = (): void => {
+    const toolbarItemContainer = document.querySelector(Identifiers.containerSelector);
+
+    new RegularEvent('click', (e: Event, menuItem: HTMLAnchorElement): void => {
+      e.preventDefault();
+      if (menuItem.href) {
+        this.clearCache(menuItem.href);
+      }
+    }).delegateTo(toolbarItemContainer, Identifiers.menuItemSelector);
+  };
+
+  /**
+   * Calls TYPO3 to clear a cache, then changes the topbar icon
+   * to a spinner. Restores the original topbar icon when the request completed.
+   *
+   * @param {string} ajaxUrl The URL to load
+   */
+  private clearCache(ajaxUrl: string): void {
+    const toolbarItemContainer = document.querySelector(Identifiers.containerSelector);
+    // Close clear cache menu
+    toolbarItemContainer.classList.remove('open');
+
+    const toolbarItemIcon = toolbarItemContainer.querySelector(Identifiers.toolbarIconSelector);
+    const existingIcon = toolbarItemIcon.cloneNode(true);
+
+    Icons.getIcon('spinner-circle', Icons.sizes.small).then((spinner: string): void => {
+      toolbarItemIcon.replaceWith(document.createRange().createContextualFragment(spinner));
+    });
+
+    (new AjaxRequest(ajaxUrl)).post({}).then(
+      async (response: AjaxResponse): Promise<void> => {
+        const data = await response.resolve();
+        if (data.success === true) {
+          Notification.success(data.title, data.message);
+        } else if (data.success === false) {
+          Notification.error(data.title, data.message);
+        }
+      },
+      (): void => {
+        Notification.error(TYPO3.lang['flushCaches.error'], TYPO3.lang['flushCaches.error.description']);
+      },
+    ).finally((): void => {
+      toolbarItemContainer.querySelector(Identifiers.toolbarIconSelector).replaceWith(existingIcon);
+    });
+  }
+}
+
+export default new ClearCacheMenu();

package/backend/toolbar/live-search.ts

@@ -0,0 +1,284 @@
+/*
+ * 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 { lll } from '@typo3/core/lit-helper';
+import Modal from '../modal';
+import '@typo3/backend/element/icon-element';
+import '@typo3/backend/input/clearable';
+import '../live-search/element/hint';
+import '../live-search/element/result/result-pagination';
+import '../live-search/element/search-option-item';
+import '../live-search/live-search-shortcut';
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import BrowserSession from '@typo3/backend/storage/browser-session';
+import { componentName as resultContainerComponentName, type ResultContainer } from '@typo3/backend/live-search/element/result/result-container';
+import { ModuleStateStorage } from '@typo3/backend/storage/module-state-storage';
+import type { ResultItemInterface } from '@typo3/backend/live-search/element/result/item/item';
+import type { Pagination, ResultPagination } from '@typo3/backend/live-search/element/result/result-pagination';
+
+enum Identifiers {
+  toolbarItem = '.t3js-topbar-button-search',
+}
+
+interface SearchOption {
+  key: string;
+  value: string;
+}
+
+type SearchResponse = {
+  pagination: Pagination,
+  results: ResultItemInterface[]|null;
+};
+
+export interface ChooseItemEventData {
+  resultItem: ResultItemInterface;
+}
+
+export interface InvokeOptionEventData {
+  active: boolean;
+}
+
+export interface SelectPageEventData {
+  offset: number;
+}
+
+
+/**
+ * Module: @typo3/backend/toolbar/live-search
+ * Global search to deal with everything in the backend that is search-related
+ * @exports @typo3/backend/toolbar/live-search
+ */
+class LiveSearch {
+  private currentSearchRequest: AjaxRequest|null = null;
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      this.registerEvents();
+    });
+  }
+
+  private registerEvents(): void {
+    new RegularEvent('click', (): void => {
+      this.openSearchModal();
+    }).delegateTo(document, Identifiers.toolbarItem);
+
+    new RegularEvent('typo3:live-search:trigger-open', (): void => {
+      if (Modal.currentModal) {
+        return;
+      }
+
+      this.openSearchModal();
+    }).bindTo(document);
+  }
+
+  private openSearchModal(): void {
+    const url = new URL(TYPO3.settings.ajaxUrls.livesearch_form, window.location.origin);
+    const moduleStateStorage = ModuleStateStorage.current('web');
+    if (moduleStateStorage.identifier) {
+      url.searchParams.set('pageId', moduleStateStorage.identifier);
+    }
+    url.searchParams.set('query', BrowserSession.get('livesearch-term') ?? '');
+    url.searchParams.set('offset', BrowserSession.get('livesearch-offset') ?? '0');
+
+    const persistedSearchOptions = Object.entries(BrowserSession.getByPrefix('livesearch-option-'))
+      .filter((item: [string, string]) => item[1] === '1')
+      .map((item: [string, string]): SearchOption => {
+        const trimmedKey = item[0].replace('livesearch-option-', '');
+        const [key, value] = trimmedKey.split('-', 2);
+        return { key, value };
+      });
+
+    const searchOptions = this.composeSearchOptions(persistedSearchOptions);
+    for (const [optionKey, optionValues] of Object.entries(searchOptions)) {
+      for (const optionValue of optionValues) {
+        url.searchParams.append(`${optionKey}[]`, optionValue);
+      }
+    }
+
+    const modal = Modal.advanced({
+      type: Modal.types.ajax,
+      content: url.toString(),
+      title: lll('labels.search'),
+      severity: SeverityEnum.notice,
+      size: Modal.sizes.medium,
+      ajaxCallback: (): void => {
+        const liveSearchContainer = modal.querySelector('typo3-backend-live-search');
+        const searchForm = liveSearchContainer.querySelector('form');
+        const searchField = searchForm.querySelector('input[type="search"]') as HTMLInputElement;
+        const offsetField = searchForm.querySelector('input[name="offset"]') as HTMLInputElement;
+
+        new RegularEvent('livesearch:demand-changed', (): void => {
+          offsetField.value = '0';
+          searchForm.requestSubmit();
+        }).bindTo(liveSearchContainer);
+
+        new RegularEvent('livesearch:pagination-selected', (e: CustomEvent<SelectPageEventData>): void => {
+          offsetField.value = e.detail.offset.toString(10);
+          searchForm.requestSubmit();
+        }).bindTo(liveSearchContainer);
+
+        new RegularEvent('submit', (e: SubmitEvent): void => {
+          e.preventDefault();
+
+          const formData = new FormData(searchForm);
+          this.search(formData).then((): void => {
+            const query = formData.get('query').toString();
+            const offset = formData.get('offset')?.toString();
+            BrowserSession.set('livesearch-term', query);
+            if (offset) {
+              BrowserSession.set('livesearch-offset', offset);
+            }
+          });
+          const optionCounterElement = searchForm.querySelector('[data-active-options-counter]') as HTMLElement;
+          const count = parseInt(optionCounterElement.dataset.activeOptionsCounter, 10);
+          optionCounterElement.querySelector('output').textContent = count.toString(10);
+          optionCounterElement.classList.toggle('hidden', count === 0);
+        }).bindTo(searchForm);
+
+        searchField.clearable({
+          onClear: (): void => {
+            searchForm.requestSubmit();
+          },
+        });
+
+        const searchResultContainer: ResultContainer = document.querySelector('typo3-backend-live-search-result-container');
+        new RegularEvent('live-search:item-chosen', (): void => {
+          Modal.dismiss();
+        }).bindTo(searchResultContainer);
+
+        new RegularEvent('typo3:live-search:option-invoked', (e: CustomEvent<InvokeOptionEventData>): void => {
+          const optionCounterElement = searchForm.querySelector('[data-active-options-counter]') as HTMLElement;
+          let count = parseInt(optionCounterElement.dataset.activeOptionsCounter, 10);
+          count = e.detail.active ? count + 1 : count - 1;
+
+          // Update data attribute only, the visible text content is updated in the submit handler
+          optionCounterElement.dataset.activeOptionsCounter = count.toString(10);
+
+          liveSearchContainer.dispatchEvent(new CustomEvent('livesearch:demand-changed'));
+        }).bindTo(liveSearchContainer);
+
+        new DebounceEvent('input', (): void => {
+          liveSearchContainer.dispatchEvent(new CustomEvent('livesearch:demand-changed'));
+        }).bindTo(searchField);
+
+        new RegularEvent('keydown', this.handleKeyDown).bindTo(searchField);
+
+        searchForm.requestSubmit();
+      }
+    });
+
+    /**
+     * The events `modal-loaded` and `typo3-modal-shown` are dispatched in any order, therefore we have to listen to
+     * both events to handle search field focus. Unfortunately, there's currently a bug that makes it impossible using
+     * Promises  instead, which would be much better: https://forge.typo3.org/issues/100026
+     *
+     * Once the aforementioned issue is fixed, we may use this instead:
+     *
+     * ```
+     * Promise.all([
+     *   new Promise(res1 => modal.addEventListener('modal-loaded', res1)),
+     *   new Promise(res2 => modal.addEventListener('typo3-modal-shown', res2))
+     * ]).then((): void => {
+     *   // do stuff here
+     * });
+     */
+    ['modal-loaded', 'typo3-modal-shown'].forEach((eventToListenOn: string) => {
+      modal.addEventListener(eventToListenOn, () => {
+        const searchField = modal.querySelector('input[type="search"]') as HTMLInputElement|null;
+        if (searchField !== null) {
+          searchField.focus();
+          searchField.select();
+        }
+      });
+    });
+  }
+
+  private composeSearchOptions(searchOptions: SearchOption[]): { [key: string]: string[] } {
+    const composedSearchOptions: { [key: string]: string[] } = {};
+    searchOptions.forEach((searchOption: SearchOption): void => {
+      if (composedSearchOptions[searchOption.key] === undefined) {
+        composedSearchOptions[searchOption.key] = [];
+      }
+      composedSearchOptions[searchOption.key].push(searchOption.value);
+    });
+
+    return composedSearchOptions;
+  }
+
+  private readonly search = async (formData: FormData): Promise<void> => {
+    const query = formData.get('query').toString();
+
+    if (query === '') {
+      this.updateSearchResults(null);
+    } else {
+      const searchResultContainer = document.querySelector(resultContainerComponentName) as ResultContainer;
+      searchResultContainer.loading = true;
+
+      this.currentSearchRequest?.abort();
+      try {
+        this.currentSearchRequest = new AjaxRequest(TYPO3.settings.ajaxUrls.livesearch);
+        const response = await this.currentSearchRequest.post(formData);
+        const json = await response.raw().json();
+        this.currentSearchRequest = null;
+        this.updateSearchResults(json);
+      } catch (err: unknown) {
+        if (err instanceof DOMException && err.name === 'AbortError') {
+          // Request has been aborted, do not flood the error console
+          return;
+        }
+
+        // Something else happened, throw again
+        throw err;
+      }
+    }
+  };
+
+  private handleKeyDown(e: KeyboardEvent): void {
+    if (e.key !== 'ArrowDown') {
+      return;
+    }
+
+    e.preventDefault();
+
+    // Select first available result item
+    const firstSearchResultItem = document.querySelector('typo3-backend-live-search').querySelector('typo3-backend-live-search-result-item') as HTMLElement|null;
+    firstSearchResultItem?.focus();
+  }
+
+  private updateSearchResults(response: SearchResponse): void {
+    const searchResultContainer: ResultContainer = document.querySelector('typo3-backend-live-search-result-container');
+    searchResultContainer.results = response?.results ?? null;
+    searchResultContainer.loading = false;
+
+    this.updatePagination(response?.pagination ?? null);
+  }
+
+  private updatePagination(pagination: Pagination): void {
+    const paginationElement: ResultPagination = document.querySelector('typo3-backend-live-search-result-pagination');
+    paginationElement.pagination = pagination;
+  }
+}
+
+let liveSearchObject: LiveSearch;
+if (!top.TYPO3.LiveSearch) {
+  liveSearchObject = new LiveSearch();
+  top.TYPO3.LiveSearch = liveSearchObject;
+} else {
+  liveSearchObject = top.TYPO3.LiveSearch;
+}
+
+export default liveSearchObject;