[TASK] Migrate FormEngineLinkBrowserAdapter to TypeScript

A human-readable diff of the applied changes can be inspected on:
https://review.typo3.org/c/Packages/TYPO3.CMS/+/72795/1/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngineLinkBrowserAdapter.ts

No functional change to keep the diff minimal and prepare behaviour
as-is.

Releases: main
Resolves: #88435
Related: #96425
Related: #96323
Change-Id: I512739d5827e2951ac6a63312de380870bdebd8d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/72795


Tested-by: core-ci <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Jochen <rothjochen@gmail.com>
Tested-by: Benjamin Franzke <bfr@qbus.de>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Jochen <rothjochen@gmail.com>
Reviewed-by: Benjamin Franzke <bfr@qbus.de>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngineLinkBrowserAdapter.ts

+/*
+ * 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/CMS/Backend/FormEngineLinkBrowserAdapter
+ * LinkBrowser communication with parent window
+ */
+import $ from 'jquery';
+import LinkBrowser = require('TYPO3/CMS/Recordlist/LinkBrowser')
+import Modal = require('TYPO3/CMS/Backend/Modal');
+
+interface OnFieldChangeItem {
+  name: string;
+  data: {[key: string]: string|number|boolean|null}
+}
+
+export = (function() {
+
+  /**
+   * @exports TYPO3/CMS/Backend/FormEngineLinkBrowserAdapter
+   */
+  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;
+
+      $.ajax({
+        url: TYPO3.settings.ajaxUrls.link_browser_encodetypolink,
+        data: attributeValues,
+        method: 'GET'
+      }).done(function(data: {typoLink: string}) {
+        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(): void {
+    let opener;
+    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;
+})();

typo3/sysext/backend/Resources/Public/JavaScript/FormEngineLinkBrowserAdapter.js

@@ -10,107 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
+var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Modal"],(function(e,n,t,r,a){"use strict";return t=__importDefault(t),function(){const e={onFieldChangeItems:null,setOnFieldChangeItems:function(n){e.onFieldChangeItems=n},checkReference:function(){const n='form[name="'+r.parameters.formName+'"] [data-formengine-input-name="'+r.parameters.itemName+'"]',t=e.getParent();if(t&&t.document&&t.document.querySelector(n))return t.document.querySelector(n);a.dismiss()}};return r.finalizeFunction=function(n){const i=e.checkReference();if(i){const o=r.getLinkAttributeValues();o.url=n,t.default.ajax({url:TYPO3.settings.ajaxUrls.link_browser_encodetypolink,data:o,method:"GET"}).done((function(n){n.typoLink&&(i.value=n.typoLink,i.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),e.onFieldChangeItems instanceof Array&&e.getParent().TYPO3.FormEngine.processOnFieldChange(e.onFieldChangeItems),a.dismiss())}))}},e.getParent=function(){let e;return void 0!==window.parent&&void 0!==window.parent.document.list_frame&&null!==window.parent.document.list_frame.parent.document.querySelector(".t3js-modal-iframe")?e=window.parent.document.list_frame:void 0!==window.parent&&void 0!==window.parent.frames.list_frame&&null!==window.parent.frames.list_frame.parent.document.querySelector(".t3js-modal-iframe")?e=window.parent.frames.list_frame:void 0!==window.frames&&void 0!==window.frames.frameElement&&null!==window.frames.frameElement&&window.frames.frameElement.classList.contains("t3js-modal-iframe")?e=window.frames.frameElement.contentWindow.parent:window.opener&&(e=window.opener),e},e}()}));
\ No newline at end of file
- * Module: TYPO3/CMS/Backend/FormEngineLinkBrowserAdapter
- * LinkBrowser communication with parent window
- */
-define(['jquery', 'TYPO3/CMS/Recordlist/LinkBrowser', 'TYPO3/CMS/Backend/Modal'], function($, LinkBrowser, Modal) {
-  'use strict';
-
-  /**
-   * @exports TYPO3/CMS/Backend/FormEngineLinkBrowserAdapter
-   */
-  var FormEngineLinkBrowserAdapter = {
-    onFieldChangeItems: null // those are set in the module initializer function in PHP
-  };
-
-  /**
-   * @param {OnFieldChangeItem[]} onFieldChangeItems
-   */
-  FormEngineLinkBrowserAdapter.setOnFieldChangeItems = function(onFieldChangeItems) {
-    FormEngineLinkBrowserAdapter.onFieldChangeItems = onFieldChangeItems;
-  };
-
-  /**
-   * Return reference to parent's form element
-   *
-   * @returns {Element}
-   */
-  FormEngineLinkBrowserAdapter.checkReference = function() {
-    var selector = 'form[name="' + LinkBrowser.parameters.formName + '"] [data-formengine-input-name="' + LinkBrowser.parameters.itemName + '"]';
-    let 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) {
-    var field = FormEngineLinkBrowserAdapter.checkReference();
-    if (field) {
-      var attributeValues = LinkBrowser.getLinkAttributeValues();
-      // encode link on server
-      attributeValues.url = input;
-
-      $.ajax({
-        url: TYPO3.settings.ajaxUrls['link_browser_encodetypolink'],
-        data: attributeValues,
-        method: 'GET'
-      }).done(function(data) {
-        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() {
-    let opener;
-    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.contentWindow.parent;
-    } else if (window.opener) {
-      opener = window.opener;
-    }
-
-    return opener;
-  };
-
-  return FormEngineLinkBrowserAdapter;
-});