typo3-typescript-sources 13.4.20

package/lowlevel/query-generator.ts

@@ -0,0 +1,132 @@
+/*
+ * 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 '@typo3/backend/input/clearable';
+import DateTimePicker from '@typo3/backend/date-time-picker';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/lowlevel/query-generator
+ * This module handle the QueryGenerator forms.
+ */
+class QueryGenerator {
+  private readonly form: HTMLFormElement = document.querySelector('form[name="queryform"]');
+  private readonly searchField: HTMLInputElement = document.querySelector('input#searchField');
+  private readonly submitSearch: HTMLInputElement = document.querySelector('button#submitSearch');
+  private readonly activeSearch: boolean = this.searchField ? (this.searchField.value !== '') : false;
+  private readonly limitField: HTMLInputElement = document.querySelector('input#queryLimit');
+
+  constructor() {
+    if (this.submitSearch && this.activeSearch) {
+      this.submitSearch.removeAttribute('disabled');
+    }
+
+    if (this.searchField) {
+      new RegularEvent('search', (): void => {
+        if (this.searchField.value === '' && this.activeSearch) {
+          this.doSubmit();
+        }
+      }).bindTo(this.searchField);
+
+      new RegularEvent('input', (): void => {
+        if (this.searchField.value === '' && this.activeSearch) {
+          this.doSubmit();
+        }
+        this.submitSearch.toggleAttribute('disabled', this.searchField.value === '');
+      }).bindTo(this.searchField);
+
+      new RegularEvent('submit', (event: Event): void => {
+        if (this.searchField.value === '' && !this.activeSearch) {
+          event.preventDefault();
+        }
+      }).bindTo(this.form);
+    }
+
+    new RegularEvent('click', (event: Event) => {
+      event.preventDefault();
+      this.doSubmit();
+    }).delegateTo(this.form, '.t3js-submit-click');
+
+    new RegularEvent('change', (event: Event) => {
+      event.preventDefault();
+      this.doSubmit();
+    }).delegateTo(this.form, '.t3js-submit-change');
+
+    new RegularEvent('click', (event: Event, element: HTMLButtonElement) => {
+      event.preventDefault();
+      this.setLimit(element.value);
+      this.doSubmit();
+    }).delegateTo(this.form, '.t3js-limit-submit input[type="button"]');
+
+    new RegularEvent('click', (event: Event, element: HTMLButtonElement) => {
+      event.preventDefault();
+      this.addValueToField(element.dataset.field, element.value);
+    }).delegateTo(this.form, '.t3js-addfield');
+
+    new RegularEvent('change', (event: Event, element: HTMLSelectElement) => {
+      const titleField = <HTMLInputElement>this.form.querySelector('input[name="storeControl[title]"]');
+      if (element.value !== '0') {
+        titleField.value = element.querySelector('option:selected').textContent;
+      } else {
+        titleField.value = '';
+      }
+    }).delegateTo(this.form, 'select.t3js-addfield');
+
+    (<NodeListOf<HTMLInputElement>>document.querySelectorAll('form[name="queryform"] .t3js-clearable')).forEach(
+      (clearableField: HTMLInputElement) => clearableField.clearable({
+        onClear: (): void => {
+          this.doSubmit();
+        },
+      }),
+    );
+    (<NodeListOf<HTMLInputElement>>document.querySelectorAll('form[name="queryform"] .t3js-datetimepicker')).forEach(
+      (dateTimePickerElement: HTMLInputElement) => DateTimePicker.initialize(dateTimePickerElement)
+    );
+  }
+
+  /**
+   * Submit the form
+   */
+  private doSubmit(): void {
+    this.form.submit();
+  }
+
+  /**
+   * Set query limit
+   *
+   * @param {String} value
+   */
+  private setLimit(value: string): void {
+    this.limitField.value = value;
+  }
+
+  /**
+   * Add value to text field
+   *
+   * @param {String} field the name of the field
+   * @param {String} value the value to add
+   */
+  private addValueToField(field: string, value: string): void {
+    const target = <HTMLInputElement>this.form.querySelector('[name="' + field + '"]');
+    value = target.value + ',' + value;
+    target.value = value
+      .split(',')
+      // Remove whitespace from fields
+      .map(fieldName => fieldName.trim())
+      // Ensure fields only exist once
+      .filter((value, index, array) => array.indexOf(value) === index)
+      .join(',');
+  }
+}
+
+export default new QueryGenerator();

package/lowlevel/reference-index.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 NProgress from 'nprogress';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+enum Selectors {
+  actionsContainerSelector = '.t3js-reference-index-actions'
+}
+
+/**
+ * Module: @typo3/lowlevel/reference-index
+ * Show progress indicator and disable buttons
+ */
+class ReferenceIndex {
+
+  constructor() {
+    this.registerActionButtonEvents();
+  }
+
+  private registerActionButtonEvents(): void {
+    new RegularEvent('click', (e: Event, target: HTMLButtonElement): void => {
+      NProgress.configure({ showSpinner: false });
+      NProgress.start();
+      // Disable all action buttons to avoid duplicate execution
+      Array.from(target.parentNode.querySelectorAll('button')).forEach((button: HTMLButtonElement) => {
+        button.classList.add('disabled');
+      });
+    }).delegateTo(<HTMLElement>document.querySelector(Selectors.actionsContainerSelector), 'button');
+  }
+
+}
+
+export default new ReferenceIndex();

package/opendocs/toolbar/opendocs-menu.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 AjaxRequest from '@typo3/core/ajax/ajax-request';
+import '@typo3/backend/element/spinner-element';
+import Viewport from '@typo3/backend/viewport';
+import { Sizes } from '@typo3/backend/enum/icon-types';
+import RegularEvent from '@typo3/core/event/regular-event';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+enum Selectors {
+  containerSelector = '#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem',
+  closeSelector = '.t3js-topbar-opendocs-close',
+  menuContainerSelector = '.dropdown-menu',
+  toolbarIconSelector = '.toolbar-item-icon .t3js-icon',
+  counterSelector = '#tx-opendocs-counter',
+  entrySelector = '.t3js-open-doc',
+}
+
+/**
+ * Module: @typo3/opendocs/opendocs-menu
+ * main JS part taking care of
+ *  - navigating to the documents
+ *  - updating the menu
+ */
+class OpendocsMenu {
+  private readonly hashDataAttributeName: string = 'opendocsidentifier';
+
+  constructor() {
+    document.addEventListener('typo3:opendocs:updateRequested', () => this.updateMenu());
+    Viewport.Topbar.Toolbar.registerEvent((): void => {
+      this.initializeEvents();
+      this.updateMenu();
+    });
+  }
+
+  /**
+   * Updates the number of open documents in the toolbar according to the
+   * number of items in the menu bar.
+   */
+  private static updateNumberOfDocs(): void {
+    const containerElement = document.querySelector(Selectors.containerSelector);
+    const counterElement = document.querySelector(Selectors.counterSelector) as HTMLElement;
+
+    let num: number = parseInt((containerElement.querySelector('[data-open-docs]') as HTMLElement)?.dataset.openDocs, 10);
+    if (isNaN(num)) {
+      num = 0;
+    }
+
+    counterElement.textContent = num.toString();
+    counterElement.classList.toggle('hidden', (num === 0));
+  }
+
+  /**
+   * Displays the menu and does the AJAX call to the TYPO3 backend
+   */
+  public updateMenu(): void {
+    const toolbarItemIcon = document.querySelector(Selectors.containerSelector + ' ' + Selectors.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.opendocs_menu)).get().then(async (response: AjaxResponse): Promise<void> => {
+      document.querySelector(Selectors.containerSelector + ' ' + Selectors.menuContainerSelector).innerHTML = await response.resolve();
+      OpendocsMenu.updateNumberOfDocs();
+    }).finally((): void => {
+      // Re-open the menu after closing a document
+      document.querySelector(Selectors.containerSelector + ' typo3-backend-spinner').replaceWith(existingIcon);
+    });
+  }
+
+  private initializeEvents(): void {
+    const containerElement = document.querySelector(Selectors.containerSelector);
+    // send a request when removing an opendoc
+    new RegularEvent('click', (e: Event, target: HTMLElement): void => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const md5 = target.dataset[this.hashDataAttributeName];
+      this.closeDocument(md5);
+    }).delegateTo(containerElement, Selectors.closeSelector);
+
+    new RegularEvent('click', (e: Event, entry: HTMLElement): void => {
+      e.preventDefault();
+      const router = document.querySelector('typo3-backend-module-router');
+      router.setAttribute('endpoint', entry.getAttribute('href'));
+    }).delegateTo(containerElement, Selectors.entrySelector);
+  }
+
+  /**
+   * Closes an open document
+   */
+  private closeDocument(md5sum?: string): void {
+    const payload: {[key: string]: string} = {};
+    if (md5sum) {
+      payload.md5sum = md5sum;
+    }
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.opendocs_closedoc)).post(payload).then(async (response: AjaxResponse): Promise<void> => {
+      const containerElement = document.querySelector(Selectors.containerSelector);
+      containerElement.querySelector(Selectors.menuContainerSelector).innerHTML = await response.resolve();
+      OpendocsMenu.updateNumberOfDocs();
+    });
+  }
+}
+
+export default new OpendocsMenu();

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "typo3-typescript-sources",
+  "version": "13.4.20",
+  "description": "TYPO3 Core TypeScript Sources - Extracted from TYPO3/typo3 repository",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"No tests specified\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maikschneider/typo3-typescript-sources.git"
+  },
+  "keywords": [
+    "typo3",
+    "typescript",
+    "sources",
+    "cms"
+  ],
+  "author": "TYPO3 Core Team",
+  "license": "GPL-2.0-or-later",
+  "bugs": {
+    "url": "https://github.com/maikschneider/typo3-typescript-sources/issues"
+  },
+  "homepage": "https://github.com/maikschneider/typo3-typescript-sources#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "typo3": {
+    "sourceRepository": "https://github.com/TYPO3/typo3",
+    "sourceTag": "v13.4.20",
+    "sourcePath": "Build/Sources/TypeScript"
+  }
+}