typo3-typescript-sources 13.4.20

package/backend/form-engine-link-browser-adapter.ts

@@ -0,0 +1,129 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/backend/form-engine-link-browser-adapter
+ * LinkBrowser communication with parent window
+ */
+import LinkBrowser from '@typo3/backend/link-browser';
+import Modal from '@typo3/backend/modal';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+interface OnFieldChangeItem {
+  name: string;
+  data: {[key: string]: string|number|boolean|null}
+}
+
+interface Response {
+  typoLink?: string;
+}
+
+export default (function() {
+
+  /**
+   * @exports @typo3/backend/form-engine-link-browser-adapter
+   */
+  const FormEngineLinkBrowserAdapter: any = {
+    onFieldChangeItems: null // those are set in the module initializer function in PHP
+  };
+
+  /**
+   * @param {OnFieldChangeItem[]} onFieldChangeItems
+   */
+  FormEngineLinkBrowserAdapter.setOnFieldChangeItems = function(onFieldChangeItems: Array<OnFieldChangeItem>) {
+    FormEngineLinkBrowserAdapter.onFieldChangeItems = onFieldChangeItems;
+  };
+
+  /**
+   * Return reference to parent's form element
+   *
+   * @returns {Element}
+   */
+  FormEngineLinkBrowserAdapter.checkReference = function(): void {
+    const selector = 'form[name="' + LinkBrowser.parameters.formName + '"] [data-formengine-input-name="' + LinkBrowser.parameters.itemName + '"]';
+    const opener = FormEngineLinkBrowserAdapter.getParent();
+
+    if (opener && opener.document && opener.document.querySelector(selector)) {
+      return opener.document.querySelector(selector);
+    } else {
+      Modal.dismiss();
+    }
+  };
+
+  /**
+   * Save the current link back to the opener
+   *
+   * @param {String} input
+   */
+  LinkBrowser.finalizeFunction = function(input: string): void {
+    const field = FormEngineLinkBrowserAdapter.checkReference();
+    if (field) {
+      const attributeValues = LinkBrowser.getLinkAttributeValues();
+      // encode link on server
+      attributeValues.url = input;
+
+      (new AjaxRequest(TYPO3.settings.ajaxUrls.link_browser_encodetypolink))
+        .withQueryArguments(attributeValues)
+        .get()
+        .then(async (response: AjaxResponse): Promise<void> => {
+          const data: Response = await response.resolve();
+          if (data.typoLink) {
+            field.value = data.typoLink;
+            field.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+
+            if (FormEngineLinkBrowserAdapter.onFieldChangeItems instanceof Array) {
+              // @todo us `CustomEvent` or broadcast channel as alternative
+              FormEngineLinkBrowserAdapter.getParent()
+                .TYPO3.FormEngine.processOnFieldChange(FormEngineLinkBrowserAdapter.onFieldChangeItems);
+            }
+
+            Modal.dismiss();
+          }
+        });
+    }
+  };
+
+  /**
+   * Returns the parent document object
+   */
+  FormEngineLinkBrowserAdapter.getParent = function(): Window {
+    let opener: Window;
+    if (
+      typeof window.parent !== 'undefined' &&
+      typeof window.parent.document.list_frame !== 'undefined' &&
+      window.parent.document.list_frame.parent.document.querySelector('.t3js-modal-iframe') !== null
+    ) {
+      opener = window.parent.document.list_frame;
+    } else if (
+      typeof window.parent !== 'undefined' &&
+      typeof window.parent.frames.list_frame !== 'undefined' &&
+      window.parent.frames.list_frame.parent.document.querySelector('.t3js-modal-iframe') !== null
+    ) {
+      opener = window.parent.frames.list_frame;
+    } else if (
+      typeof window.frames !== 'undefined' &&
+      typeof window.frames.frameElement !== 'undefined' &&
+      window.frames.frameElement !== null &&
+      window.frames.frameElement.classList.contains('t3js-modal-iframe')
+    ) {
+      opener = (window.frames.frameElement as HTMLIFrameElement).contentWindow.parent;
+    } else if (window.opener) {
+      opener = window.opener;
+    }
+
+    return opener;
+  };
+
+  return FormEngineLinkBrowserAdapter;
+})();

package/backend/form-engine-review.ts

@@ -0,0 +1,155 @@
+/*
+ * 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 'bootstrap';
+import DocumentService from '@typo3/core/document-service';
+import { selector } from '@typo3/core/literals';
+import '@typo3/backend/element/icon-element';
+import Popover from './popover';
+import { type Popover as BootstrapPopover, Tab as BootstrapTab } from 'bootstrap';
+import DomHelper from '@typo3/backend/utility/dom-helper';
+import type { PostValidationEvent } from '@typo3/backend/form-engine-validation';
+
+/**
+ * Module: @typo3/backend/form-engine-review
+ * Enables interaction with record fields that need review
+ * @exports @typo3/backend/form-engine-review
+ */
+export class FormEngineReview {
+
+  private readonly toggleButtonClass: string = 't3js-toggle-review-panel';
+  private readonly labelSelector: string = '.t3js-formengine-label';
+  private readonly invalidFields: Set<HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement>;
+
+  /**
+   * The constructor, set the class properties default values
+   */
+  constructor(
+    private readonly formElement: HTMLFormElement
+  ) {
+    this.invalidFields = new Set();
+    this.initialize();
+  }
+
+  /**
+   * Initialize the events
+   */
+  private initialize(): void {
+    this.formElement.addEventListener('t3-formengine-postfieldvalidation', (e: CustomEvent<PostValidationEvent>): void => {
+      const field = e.detail.field;
+      if (e.detail.isValid) {
+        this.invalidFields.delete(field);
+      } else {
+        this.invalidFields.add(field);
+      }
+      this.checkForReviewableField();
+    });
+
+    DocumentService.ready().then((): void => {
+      this.attachButtonToModuleHeader();
+      this.checkForReviewableField();
+    });
+  }
+
+  /**
+   * Renders an invisible button to toggle the review panel into the least possible toolbar
+   */
+  private attachButtonToModuleHeader(): void {
+    const leastButtonBar: HTMLElement = document.querySelector('.t3js-module-docheader-bar-buttons').lastElementChild.querySelector('[role="toolbar"]');
+
+    const icon = document.createElement('typo3-backend-icon');
+    icon.setAttribute('identifier', 'actions-exclamation-circle');
+    icon.setAttribute('size', 'small');
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.classList.add('btn', 'btn-danger', 'btn-sm', 'hidden', this.toggleButtonClass);
+    button.title = TYPO3.lang['buttons.reviewFailedValidationFields'];
+    button.appendChild(icon);
+
+    Popover.popover(button);
+    leastButtonBar.prepend(button);
+  }
+
+  /**
+   * Checks if fields have failed validation. In such case, the markup is rendered and the toggle button is unlocked.
+   */
+  private checkForReviewableField(): void {
+    const toggleButton: HTMLElement = document.querySelector('.' + this.toggleButtonClass);
+    if (toggleButton === null) {
+      return;
+    }
+
+    if (this.invalidFields.size > 0) {
+      const erroneousListGroup = document.createElement('div');
+      erroneousListGroup.classList.add('list-group');
+
+      for (const invalidField of this.invalidFields) {
+        const fieldContainer = invalidField.closest('.t3js-formengine-validation-marker');
+        if (fieldContainer === null) {
+          console.error(invalidField);
+          throw new Error('Could not find an element containing the `t3js-formengine-validation-marker` class for the previously logged input field.');
+        }
+        const relatedInputField = fieldContainer.querySelector('[data-formengine-validation-rules]') as HTMLElement;
+        if (relatedInputField === null) {
+          console.error(fieldContainer);
+          throw new Error('Could not find an element containing the `data-formengine-validation-rules` attribute for the previously logged container.');
+        }
+        const link = document.createElement('a');
+        link.classList.add('list-group-item');
+        link.href = '#';
+        link.textContent = fieldContainer.querySelector(this.labelSelector)?.textContent || '';
+        link.addEventListener('click', (e: Event) => {
+          this.switchToField(e, fieldContainer, relatedInputField);
+        });
+
+        erroneousListGroup.append(link);
+      }
+
+      toggleButton.classList.remove('hidden');
+      Popover.setOptions(toggleButton, <BootstrapPopover.Options>{
+        html: true,
+        content: erroneousListGroup as Element
+      });
+    } else {
+      toggleButton.classList.add('hidden');
+      Popover.hide(toggleButton);
+    }
+  }
+
+  /**
+   * Finds the field in the form and focuses it
+   */
+  private switchToField(e: Event, fieldContainer: Element, inputField: HTMLElement): void {
+    e.preventDefault();
+
+    // iterate possibly nested tab panels
+    let ref = inputField;
+    while (ref) {
+      if (ref.matches('[id][role="tabpanel"]')) {
+        const tabContainer = document.querySelector(selector`[aria-controls="${ref.id}"]`);
+        new BootstrapTab(tabContainer).show();
+      }
+      ref = ref.parentElement;
+    }
+
+    // Check if the field is visible to the user. If this is the case, the field will be focussed, triggering a scroll
+    // to the input field. If checkVisibility() returns false, the input field is not visible, therefore scroll the
+    // field container into the view instead.
+    if (inputField.checkVisibility()) {
+      inputField.focus();
+    } else {
+      DomHelper.scrollIntoViewIfNeeded(fieldContainer);
+    }
+  }
+}

package/backend/form-engine-suggest.ts

@@ -0,0 +1,133 @@
+/*
+ * 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 './form-engine/element/suggest/result-container';
+import DocumentService from '@typo3/core/document-service';
+import FormEngine from '@typo3/backend/form-engine';
+import RegularEvent from '@typo3/core/event/regular-event';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import { selector } from '@typo3/core/literals';
+
+class FormEngineSuggest {
+  private readonly element: HTMLInputElement;
+  private resultContainer: HTMLElement;
+  private currentRequest: AjaxRequest|null = null;
+
+  constructor(element: HTMLInputElement) {
+    this.element = element;
+
+    DocumentService.ready().then((): void => {
+      this.initialize(element);
+      this.registerEvents();
+    });
+  }
+
+  private initialize(searchField: HTMLElement): void {
+    const containerElement: Element = searchField.closest('.t3-form-suggest-container');
+
+    this.resultContainer = document.createElement('typo3-backend-formengine-suggest-result-container');
+    this.resultContainer.hidden = true;
+    containerElement.append(this.resultContainer);
+  }
+
+  private registerEvents(): void {
+    new RegularEvent('typo3:formengine:suggest-item-chosen', (e: CustomEvent): void => {
+      let insertData: string = '';
+      if (this.element.dataset.fieldtype === 'select') {
+        insertData = e.detail.element.uid;
+      } else {
+        insertData = e.detail.element.table + '_' + e.detail.element.uid;
+      }
+      FormEngine.setSelectOptionFromExternalSource(this.element.dataset.field, insertData, e.detail.element.label, e.detail.element.label);
+      FormEngine.Validation.markFieldAsChanged(document.querySelector(selector`input[name="${this.element.dataset.field}"]`) as HTMLInputElement);
+      this.resultContainer.hidden = true;
+    }).bindTo(this.resultContainer);
+
+    new RegularEvent('focus', (): void => {
+      const results = JSON.parse(this.resultContainer.getAttribute('results'));
+      if (results?.length > 0) {
+        this.resultContainer.hidden = false;
+      }
+    }).bindTo(this.element);
+
+    new RegularEvent('blur', (e: FocusEvent): void => {
+      if ((e.relatedTarget as HTMLElement)?.tagName.toLowerCase() === 'typo3-backend-formengine-suggest-result-item') {
+        // don't to anything if focus switches to a result item
+        return;
+      }
+
+      this.resultContainer.hidden = true;
+    }).bindTo(this.element);
+
+    new DebounceEvent('input', (e: InputEvent): void => {
+      if (this.currentRequest instanceof AjaxRequest) {
+        this.currentRequest.abort();
+      }
+
+      const target = e.target as HTMLInputElement;
+
+      if (target.value.length < parseInt(target.dataset.minchars, 10)) {
+        return;
+      }
+
+      const uid = parseInt(target.dataset.uid, 10);
+      this.currentRequest = new AjaxRequest(TYPO3.settings.ajaxUrls.record_suggest);
+      this.currentRequest.post({
+        value: target.value,
+        tableName: target.dataset.tablename,
+        fieldName: target.dataset.fieldname,
+        uid: (isNaN(uid) ? null : uid),
+        pid: parseInt(target.dataset.pid, 10),
+        dataStructureIdentifier: target.dataset.datastructureidentifier,
+        flexFormSheetName: target.dataset.flexformsheetname,
+        flexFormFieldName: target.dataset.flexformfieldname,
+        flexFormContainerName: target.dataset.flexformcontainername,
+        flexFormContainerFieldName: target.dataset.flexformcontainerfieldname,
+        recordTypeValue: target.dataset.recordtypevalue,
+      }).then(async (response: AjaxResponse): Promise<void> => {
+        const resultSet = await response.raw().text();
+        this.resultContainer.setAttribute('results', resultSet);
+        this.resultContainer.hidden = false;
+      });
+    }).bindTo(this.element);
+
+    new RegularEvent('keydown', this.handleKeyDown).bindTo(this.element);
+  }
+
+  private readonly handleKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      const results = JSON.parse(this.resultContainer.getAttribute('results'));
+      if (results?.length > 0) {
+        this.resultContainer.hidden = false;
+      }
+
+      // Select first available result item
+      const firstSearchResultItem = this.resultContainer.querySelector('typo3-backend-formengine-suggest-result-item') as HTMLElement|null;
+      firstSearchResultItem?.focus();
+
+      return;
+    }
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+
+      this.resultContainer.hidden = true;
+    }
+  };
+}
+
+export default FormEngineSuggest;