From 0b5079c3580de45fdf474ade0e5d79e62ff74e54 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 25 Oct 2020 00:07:30 +0200 Subject: [PATCH] Convert `Ui/Dropdown/Reusable` to TypeScript --- .../js/WoltLabSuite/Core/Ui/Dropdown/Data.js | 4 + .../WoltLabSuite/Core/Ui/Dropdown/Reusable.js | 102 ++++++++---------- .../ts/WoltLabSuite/Core/Ui/Dropdown/Data.ts | 2 + .../WoltLabSuite/Core/Ui/Dropdown/Reusable.js | 83 -------------- .../WoltLabSuite/Core/Ui/Dropdown/Reusable.ts | 63 +++++++++++ .../WoltLabSuite/Core/Ui/Dropdown/Simple.ts | 4 +- 6 files changed, 116 insertions(+), 142 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Data.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Data.ts delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Dropdown/Reusable.ts 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 index 0000000000..2ae92b6a8b --- /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 d430838e6c..ecb4f2c7c2 100644 --- 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 - * @module Ui/ReusableDropdown (alias) - * @module WoltLabSuite/Core/Ui/Dropdown/Reusable + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @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 index 0000000000..4a2de38c3b --- /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 index 5a2cd98aa2..0000000000 --- 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 - * @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 index 0000000000..0f958db895 --- /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 + * @module Ui/ReusableDropdown (alias) + * @module WoltLabSuite/Core/Ui/Dropdown/Reusable + */ + +import UiDropdownSimple from './Simple'; +import { NotificationCallback } from './Data'; + +const _dropdowns = new Map(); +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 7ebe4b4338..9f1f17da67 100644 --- 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; 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. */ -- 2.20.1