Convert `Ui/Dropdown/Reusable` to TypeScript

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Data.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Data.js
new file mode 100644 (file)
index 0000000..2ae92b6
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Data.js
@@ -0,0 +1,4 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Reusable.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Reusable.js
index d430838e6c10b3d5428cbe2a7e84918df77002eb..ecb4f2c7c2896351d827b0a49afdd2d318052281 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Reusable.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Reusable.js
@@ -1,73 +1,63 @@
 /**
  * Simple interface to work with reusable dropdowns that are not bound to a specific item.
  *
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     Ui/ReusableDropdown (alias)
- * @module     WoltLabSuite/Core/Ui/Dropdown/Reusable
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  Ui/ReusableDropdown (alias)
+ * @module  WoltLabSuite/Core/Ui/Dropdown/Reusable
  */
-define(['Dictionary', 'Ui/SimpleDropdown'], function (Dictionary, UiSimpleDropdown) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+define(["require", "exports", "./Simple"], function (require, exports, Simple_1) {
     "use strict";
-    var _dropdowns = new Dictionary();
-    var _ghostElementId = 0;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.toggleDropdown = exports.registerCallback = exports.getDropdownMenu = exports.init = void 0;
+    Simple_1 = __importDefault(Simple_1);
+    const _dropdowns = new Map();
+    let _ghostElementId = 0;
     /**
      * Returns dropdown name by internal identifier.
-     *
-     * @param       {string}        identifier      internal identifier
-     * @returns     {string}        dropdown name
      */
-    function _getDropdownName(identifier) {
+    function getDropdownName(identifier) {
         if (!_dropdowns.has(identifier)) {
             throw new Error("Unknown dropdown identifier '" + identifier + "'");
         }
         return _dropdowns.get(identifier);
     }
     /**
-     * @exports     WoltLabSuite/Core/Ui/Dropdown/Reusable
+     * Initializes a new reusable dropdown.
      */
-    return {
-        /**
-         * Initializes a new reusable dropdown.
-         *
-         * @param       {string}        identifier      internal identifier
-         * @param       {Element}       menu            dropdown menu element
-         */
-        init: function (identifier, menu) {
-            if (_dropdowns.has(identifier)) {
-                return;
-            }
-            var ghostElement = elCreate('div');
-            ghostElement.id = 'reusableDropdownGhost' + _ghostElementId++;
-            UiSimpleDropdown.initFragment(ghostElement, menu);
-            _dropdowns.set(identifier, ghostElement.id);
-        },
-        /**
-         * Returns the dropdown menu element.
-         *
-         * @param       {string}        identifier      internal identifier
-         * @returns     {Element}       dropdown menu element
-         */
-        getDropdownMenu: function (identifier) {
-            return UiSimpleDropdown.getDropdownMenu(_getDropdownName(identifier));
-        },
-        /**
-         * Registers a callback invoked upon open and close.
-         *
-         * @param       {string}        identifier      internal identifier
-         * @param       {function}      callback        callback function
-         */
-        registerCallback: function (identifier, callback) {
-            UiSimpleDropdown.registerCallback(_getDropdownName(identifier), callback);
-        },
-        /**
-         * Toggles a dropdown.
-         *
-         * @param       {string}        identifier              internal identifier
-         * @param       {Element}       referenceElement        reference element used for alignment
-         */
-        toggleDropdown: function (identifier, referenceElement) {
-            UiSimpleDropdown.toggleDropdown(_getDropdownName(identifier), referenceElement);
+    function init(identifier, menu) {
+        if (_dropdowns.has(identifier)) {
+            return;
         }
-    };
+        const ghostElement = document.createElement('div');
+        ghostElement.id = 'reusableDropdownGhost' + _ghostElementId++;
+        Simple_1.default.initFragment(ghostElement, menu);
+        _dropdowns.set(identifier, ghostElement.id);
+    }
+    exports.init = init;
+    /**
+     * Returns the dropdown menu element.
+     */
+    function getDropdownMenu(identifier) {
+        return Simple_1.default.getDropdownMenu(getDropdownName(identifier));
+    }
+    exports.getDropdownMenu = getDropdownMenu;
+    /**
+     * Registers a callback invoked upon open and close.
+     */
+    function registerCallback(identifier, callback) {
+        Simple_1.default.registerCallback(getDropdownName(identifier), callback);
+    }
+    exports.registerCallback = registerCallback;
+    /**
+     * Toggles a dropdown.
+     */
+    function toggleDropdown(identifier, referenceElement) {
+        Simple_1.default.toggleDropdown(getDropdownName(identifier), referenceElement);
+    }
+    exports.toggleDropdown = toggleDropdown;
 });

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Data.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Data.ts
new file mode 100644 (file)
index 0000000..4a2de38
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Data.ts
@@ -0,0 +1,2 @@
+export type NotificationAction = 'close' | 'open';
+export type NotificationCallback = (containerId: string, action: NotificationAction) => void;

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.js
deleted file mode 100644 (file)
index 5a2cd98..0000000
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Simple interface to work with reusable dropdowns that are not bound to a specific item.
- * 
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     Ui/ReusableDropdown (alias)
- * @module     WoltLabSuite/Core/Ui/Dropdown/Reusable
- */
-define(['Dictionary', 'Ui/SimpleDropdown'], function(Dictionary, UiSimpleDropdown) {
-       "use strict";
-       
-       var _dropdowns = new Dictionary();
-       var _ghostElementId = 0;
-       
-       /**
-        * Returns dropdown name by internal identifier.
-        *
-        * @param       {string}        identifier      internal identifier
-        * @returns     {string}        dropdown name
-        */
-       function _getDropdownName(identifier) {
-               if (!_dropdowns.has(identifier)) {
-                       throw new Error("Unknown dropdown identifier '" + identifier + "'");
-               }
-               
-               return _dropdowns.get(identifier);
-       }
-       
-       /**
-        * @exports     WoltLabSuite/Core/Ui/Dropdown/Reusable
-        */
-       return {
-               /**
-                * Initializes a new reusable dropdown.
-                * 
-                * @param       {string}        identifier      internal identifier
-                * @param       {Element}       menu            dropdown menu element
-                */
-               init: function(identifier, menu) {
-                       if (_dropdowns.has(identifier)) {
-                               return;
-                       }
-                       
-                       var ghostElement = elCreate('div');
-                       ghostElement.id = 'reusableDropdownGhost' + _ghostElementId++;
-                       
-                       UiSimpleDropdown.initFragment(ghostElement, menu);
-                       
-                       _dropdowns.set(identifier, ghostElement.id);
-               },
-               
-               /**
-                * Returns the dropdown menu element.
-                * 
-                * @param       {string}        identifier      internal identifier
-                * @returns     {Element}       dropdown menu element
-                */
-               getDropdownMenu: function(identifier) {
-                       return UiSimpleDropdown.getDropdownMenu(_getDropdownName(identifier));
-               },
-               
-               /**
-                * Registers a callback invoked upon open and close.
-                * 
-                * @param       {string}        identifier      internal identifier
-                * @param       {function}      callback        callback function
-                */
-               registerCallback: function(identifier, callback) {
-                       UiSimpleDropdown.registerCallback(_getDropdownName(identifier), callback);
-               },
-               
-               /**
-                * Toggles a dropdown.
-                * 
-                * @param       {string}        identifier              internal identifier
-                * @param       {Element}       referenceElement        reference element used for alignment
-                */
-               toggleDropdown: function(identifier, referenceElement) {
-                       UiSimpleDropdown.toggleDropdown(_getDropdownName(identifier), referenceElement);
-               }
-       };
-});

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.ts
new file mode 100644 (file)
index 0000000..0f958db
--- /dev/null
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.ts
@@ -0,0 +1,63 @@
+/**
+ * Simple interface to work with reusable dropdowns that are not bound to a specific item.
+ *
+ * @author  Alexander Ebert
+ * @copyright  2001-2019 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  Ui/ReusableDropdown (alias)
+ * @module  WoltLabSuite/Core/Ui/Dropdown/Reusable
+ */
+
+import UiDropdownSimple from './Simple';
+import { NotificationCallback } from './Data';
+
+const _dropdowns = new Map<string, string>();
+let _ghostElementId = 0;
+
+/**
+ * Returns dropdown name by internal identifier.
+ */
+function getDropdownName(identifier: string): string {
+  if (!_dropdowns.has(identifier)) {
+    throw new Error("Unknown dropdown identifier '" + identifier + "'");
+  }
+
+  return _dropdowns.get(identifier)!;
+}
+
+/**
+ * Initializes a new reusable dropdown.
+ */
+export function init(identifier: string, menu: HTMLElement): void {
+  if (_dropdowns.has(identifier)) {
+    return;
+  }
+
+  const ghostElement = document.createElement('div');
+  ghostElement.id = 'reusableDropdownGhost' + _ghostElementId++;
+
+  UiDropdownSimple.initFragment(ghostElement, menu);
+
+  _dropdowns.set(identifier, ghostElement.id);
+}
+
+/**
+ * Returns the dropdown menu element.
+ */
+export function getDropdownMenu(identifier: string): HTMLElement {
+  return UiDropdownSimple.getDropdownMenu(getDropdownName(identifier))!;
+}
+
+/**
+ * Registers a callback invoked upon open and close.
+ */
+export function registerCallback(identifier: string, callback: NotificationCallback): void {
+  UiDropdownSimple.registerCallback(getDropdownName(identifier), callback);
+}
+
+/**
+ * Toggles a dropdown.
+ */
+export function toggleDropdown(identifier: string, referenceElement: HTMLElement): void {
+  UiDropdownSimple.toggleDropdown(getDropdownName(identifier), referenceElement);
+}

diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
index 7ebe4b433820db7fb821094ccd53d8a33f72dfa9..9f1f17da67f76758f699cbe5088428e934d787dc 100644 (file)
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
@@ -16,6 +16,7 @@ import DomUtil from '../../Dom/Util';
 import * as UiAlignment from '../Alignment';
 import UiCloseOverlay from '../CloseOverlay';
 import { AllowFlip } from '../Alignment';
+import { NotificationAction, NotificationCallback } from './Data';
 
 let _availableDropdowns: HTMLCollectionOf<HTMLElement>;
 const _callbacks = new CallbackList();
@@ -75,9 +76,6 @@ function onScroll() {
   });
 }
 
-type NotificationAction = 'close' | 'open';
-type NotificationCallback = (containerId: string, action: NotificationAction) => void;
-
 /**
  * Notifies callbacks on status change.
  */