From c78c5356915eb8244c8657b961e4450abcfc2bd6 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 28 Nov 2020 17:52:03 +0100 Subject: [PATCH] Convert `Acp/Ui/Box/Handler` to TypeScript --- .../WoltLabSuite/Core/Acp/Ui/Box/Handler.js | 213 +++++++++--------- .../WoltLabSuite/Core/Acp/Ui/Box/Handler.js | 182 --------------- .../WoltLabSuite/Core/Acp/Ui/Box/Handler.ts | 200 ++++++++++++++++ 3 files changed, 309 insertions(+), 286 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Handler.js index 55fc71aab7..26ab6f7778 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Handler.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Box/Handler.js @@ -1,152 +1,157 @@ /** * Provides the interface logic to add and edit boxes. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Box/Handler + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Box/Handler */ -define(['Dictionary', 'Language', 'WoltLabSuite/Core/Ui/Page/Search/Handler'], function (Dictionary, Language, UiPageSearchHandler) { +define(["require", "exports", "tslib", "../../../Dom/Util", "../../../Language", "../../../Ui/Page/Search/Handler"], function (require, exports, tslib_1, Util_1, Language, UiPageSearchHandler) { "use strict"; - var _activePageId = 0; - var _boxController; - var _cache; - var _containerExternalLink; - var _containerPageID; - var _containerPageObjectId = null; - var _handlers; - var _pageId; - var _pageObjectId; - var _position; - /** - * @exports WoltLabSuite/Core/Acp/Ui/Box/Handler - */ - return { + Object.defineProperty(exports, "__esModule", { value: true }); + exports.init = void 0; + Util_1 = tslib_1.__importDefault(Util_1); + Language = tslib_1.__importStar(Language); + UiPageSearchHandler = tslib_1.__importStar(UiPageSearchHandler); + class AcpUiBoxHandler { /** * Initializes the interface logic. - * - * @param {Dictionary} handlers list of handlers by page id supporting page object ids - * @param {string} boxType box type */ - init: function (handlers, boxType) { - _handlers = handlers; - _boxController = elById('boxControllerID'); - if (boxType !== 'system') { - _containerPageID = elById('linkPageIDContainer'); - _containerExternalLink = elById('externalURLContainer'); - _containerPageObjectId = elById('linkPageObjectIDContainer'); - if (_handlers.size) { - _pageId = elById('linkPageID'); - _pageId.addEventListener('change', this._togglePageId.bind(this)); - _pageObjectId = elById('linkPageObjectID'); - _cache = new Dictionary(); - _activePageId = ~~_pageId.value; - if (_activePageId && _handlers.has(_activePageId)) { - _cache.set(_activePageId, ~~_pageObjectId.value); + constructor(handlers, boxType) { + this.activePageId = 0; + this.cache = new Map(); + this.boxType = boxType; + this.handlers = handlers; + this.boxController = document.getElementById("boxControllerID"); + if (boxType !== "system") { + this.containerPageId = document.getElementById("linkPageIDContainer"); + this.containerExternalLink = document.getElementById("externalURLContainer"); + this.containerPageObjectId = document.getElementById("linkPageObjectIDContainer"); + if (this.handlers.size) { + this.pageId = document.getElementById("linkPageID"); + this.pageId.addEventListener("change", () => this.togglePageId()); + this.pageObjectId = document.getElementById("linkPageObjectID"); + this.cache = new Map(); + this.activePageId = ~~this.pageId.value; + if (this.activePageId && this.handlers.has(this.activePageId)) { + this.cache.set(this.activePageId, ~~this.pageObjectId.value); } - elById('searchLinkPageObjectID').addEventListener('click', this._openSearch.bind(this)); + const searchButton = document.getElementById("searchLinkPageObjectID"); + searchButton.addEventListener("click", (ev) => this.openSearch(ev)); // toggle page object id container on init - if (_handlers.has(~~_pageId.value)) { - elShow(_containerPageObjectId); + if (this.handlers.has(~~this.pageId.value)) { + Util_1.default.show(this.containerPageObjectId); } } - elBySelAll('input[name="linkType"]', null, (function (input) { - input.addEventListener('change', this._toggleLinkType.bind(this, input.value)); + document.querySelectorAll('input[name="linkType"]').forEach((input) => { + input.addEventListener("change", () => this.toggleLinkType(input.value)); if (input.checked) { - this._toggleLinkType(input.value); + this.toggleLinkType(input.value); } - }).bind(this)); + }); } - if (_boxController !== null) { - _position = elById('position'); - _boxController.addEventListener('change', this._setAvailableBoxPositions.bind(this)); + if (this.boxController) { + this.position = document.getElementById("position"); + this.boxController.addEventListener("change", () => this.setAvailableBoxPositions()); // update positions on init - this._setAvailableBoxPositions(); + this.setAvailableBoxPositions(); } - }, + } /** * Toggles between the interface for internal and external links. - * - * @param {string} value selected option value - * @protected */ - _toggleLinkType: function (value) { + toggleLinkType(value) { switch (value) { - case 'none': - elHide(_containerPageID); - elHide(_containerPageObjectId); - elHide(_containerExternalLink); + case "none": + Util_1.default.hide(this.containerPageId); + Util_1.default.hide(this.containerPageObjectId); + Util_1.default.hide(this.containerExternalLink); break; - case 'internal': - elShow(_containerPageID); - elHide(_containerExternalLink); - if (_handlers.size) - this._togglePageId(); + case "internal": + Util_1.default.show(this.containerPageId); + Util_1.default.hide(this.containerExternalLink); + if (this.handlers.size) { + this.togglePageId(); + } break; - case 'external': - elHide(_containerPageID); - elHide(_containerPageObjectId); - elShow(_containerExternalLink); + case "external": + Util_1.default.hide(this.containerPageId); + Util_1.default.hide(this.containerPageObjectId); + Util_1.default.show(this.containerExternalLink); break; } - }, + } /** * Handles the changed page selection. - * - * @protected */ - _togglePageId: function () { - if (_handlers.has(_activePageId)) { - _cache.set(_activePageId, ~~_pageObjectId.value); + togglePageId() { + if (this.handlers.has(this.activePageId)) { + this.cache.set(this.activePageId, ~~this.pageObjectId.value); } - _activePageId = ~~_pageId.value; + this.activePageId = ~~this.pageId.value; // page w/o pageObjectID support, discard value - if (!_handlers.has(_activePageId)) { - _pageObjectId.value = ''; - elHide(_containerPageObjectId); + if (!this.handlers.has(this.activePageId)) { + this.pageObjectId.value = ""; + Util_1.default.hide(this.containerPageObjectId); return; } - var newValue = ~~_cache.get(_activePageId); - _pageObjectId.value = (newValue) ? newValue : ''; - var pageIdentifier = elData(_pageId.options[_pageId.selectedIndex], 'identifier'); - var languageItem = 'wcf.page.pageObjectID.' + pageIdentifier; + const newValue = this.cache.get(this.activePageId); + this.pageObjectId.value = newValue ? newValue.toString() : ""; + const selectedOption = this.pageId.options[this.pageId.selectedIndex]; + const pageIdentifier = selectedOption.dataset.identifier; + let languageItem = `wcf.page.pageObjectID.${pageIdentifier}`; if (Language.get(languageItem) === languageItem) { - languageItem = 'wcf.page.pageObjectID'; + languageItem = "wcf.page.pageObjectID"; } - elByTag('label', _containerPageObjectId)[0].textContent = Language.get(languageItem); - elShow(_containerPageObjectId); - }, + this.containerPageObjectId.querySelector("label").textContent = Language.get(languageItem); + Util_1.default.show(this.containerPageObjectId); + } /** * Opens the handler lookup dialog. - * - * @param {Event} event event object - * @protected */ - _openSearch: function (event) { + openSearch(event) { event.preventDefault(); - var labelLanguageItem; - var pageIdentifier = elData(_pageId.options[_pageId.selectedIndex], 'identifier'); - var languageItem = 'wcf.page.pageObjectID.search.' + pageIdentifier; + const selectedOption = this.pageId.options[this.pageId.selectedIndex]; + const pageIdentifier = selectedOption.dataset.identifier; + const languageItem = `wcf.page.pageObjectID.search.${pageIdentifier}`; + let labelLanguageItem; if (Language.get(languageItem) !== languageItem) { labelLanguageItem = languageItem; } - UiPageSearchHandler.open(_activePageId, _pageId.options[_pageId.selectedIndex].textContent.trim(), function (objectId) { - _pageObjectId.value = objectId; - _cache.set(_activePageId, objectId); + UiPageSearchHandler.open(this.activePageId, selectedOption.textContent.trim(), (objectId) => { + this.pageObjectId.value = objectId.toString(); + this.cache.set(this.activePageId, objectId); }, labelLanguageItem); - }, + } /** * Updates the available box positions per box controller. - * - * @protected */ - _setAvailableBoxPositions: function () { - var supportedPositions = JSON.parse(elData(_boxController.options[_boxController.selectedIndex], 'supported-positions')); - var option; - for (var i = 0, length = _position.childElementCount; i < length; i++) { - option = _position.children[i]; - option.disabled = (supportedPositions.indexOf(option.value) === -1); + setAvailableBoxPositions() { + const selectedOption = this.boxController.options[this.boxController.selectedIndex]; + const supportedPositions = JSON.parse(selectedOption.dataset.supportedPositions); + Array.from(this.position).forEach((option) => { + option.disabled = !supportedPositions.includes(option.value); + }); + } + } + let acpUiBoxHandler; + /** + * Initializes the interface logic. + */ + function init(handlers, boxType) { + if (!acpUiBoxHandler) { + let map; + if (!(handlers instanceof Map)) { + map = new Map(); + handlers.forEach((value, key) => { + map.set(~~key, value); + }); + } + else { + map = handlers; } + acpUiBoxHandler = new AcpUiBoxHandler(map, boxType); } - }; + } + exports.init = init; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.js deleted file mode 100644 index 6cee951c39..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.js +++ /dev/null @@ -1,182 +0,0 @@ -/** - * Provides the interface logic to add and edit boxes. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Acp/Ui/Box/Handler - */ -define(['Dictionary', 'Language', 'WoltLabSuite/Core/Ui/Page/Search/Handler'], function(Dictionary, Language, UiPageSearchHandler) { - "use strict"; - - var _activePageId = 0; - var _boxController; - var _cache; - var _containerExternalLink; - var _containerPageID; - var _containerPageObjectId = null; - var _handlers; - var _pageId; - var _pageObjectId; - var _position; - - /** - * @exports WoltLabSuite/Core/Acp/Ui/Box/Handler - */ - return { - /** - * Initializes the interface logic. - * - * @param {Dictionary} handlers list of handlers by page id supporting page object ids - * @param {string} boxType box type - */ - init: function(handlers, boxType) { - _handlers = handlers; - - _boxController = elById('boxControllerID'); - - if (boxType !== 'system') { - _containerPageID = elById('linkPageIDContainer'); - _containerExternalLink = elById('externalURLContainer'); - _containerPageObjectId = elById('linkPageObjectIDContainer'); - - if (_handlers.size) { - _pageId = elById('linkPageID'); - _pageId.addEventListener('change', this._togglePageId.bind(this)); - - _pageObjectId = elById('linkPageObjectID'); - - _cache = new Dictionary(); - _activePageId = ~~_pageId.value; - if (_activePageId && _handlers.has(_activePageId)) { - _cache.set(_activePageId, ~~_pageObjectId.value); - } - - elById('searchLinkPageObjectID').addEventListener('click', this._openSearch.bind(this)); - - // toggle page object id container on init - if (_handlers.has(~~_pageId.value)) { - elShow(_containerPageObjectId); - } - } - - elBySelAll('input[name="linkType"]', null, (function (input) { - input.addEventListener('change', this._toggleLinkType.bind(this, input.value)); - - if (input.checked) { - this._toggleLinkType(input.value); - } - }).bind(this)); - } - - if (_boxController !== null) { - _position = elById('position'); - _boxController.addEventListener('change', this._setAvailableBoxPositions.bind(this)); - - // update positions on init - this._setAvailableBoxPositions(); - } - }, - - /** - * Toggles between the interface for internal and external links. - * - * @param {string} value selected option value - * @protected - */ - _toggleLinkType: function(value) { - switch (value) { - case 'none': - elHide(_containerPageID); - elHide(_containerPageObjectId); - elHide(_containerExternalLink); - break; - - case 'internal': - elShow(_containerPageID); - elHide(_containerExternalLink); - if (_handlers.size) this._togglePageId(); - break; - - case 'external': - elHide(_containerPageID); - elHide(_containerPageObjectId); - elShow(_containerExternalLink); - break; - } - }, - - /** - * Handles the changed page selection. - * - * @protected - */ - _togglePageId: function() { - if (_handlers.has(_activePageId)) { - _cache.set(_activePageId, ~~_pageObjectId.value); - } - - _activePageId = ~~_pageId.value; - - // page w/o pageObjectID support, discard value - if (!_handlers.has(_activePageId)) { - _pageObjectId.value = ''; - - elHide(_containerPageObjectId); - - return; - } - - var newValue = ~~_cache.get(_activePageId); - _pageObjectId.value = (newValue) ? newValue : ''; - - var pageIdentifier = elData(_pageId.options[_pageId.selectedIndex], 'identifier'); - var languageItem = 'wcf.page.pageObjectID.' + pageIdentifier; - if (Language.get(languageItem) === languageItem) { - languageItem = 'wcf.page.pageObjectID'; - } - - elByTag('label', _containerPageObjectId)[0].textContent = Language.get(languageItem); - - elShow(_containerPageObjectId); - }, - - /** - * Opens the handler lookup dialog. - * - * @param {Event} event event object - * @protected - */ - _openSearch: function(event) { - event.preventDefault(); - - var labelLanguageItem; - var pageIdentifier = elData(_pageId.options[_pageId.selectedIndex], 'identifier'); - var languageItem = 'wcf.page.pageObjectID.search.' + pageIdentifier; - if (Language.get(languageItem) !== languageItem) { - labelLanguageItem = languageItem; - } - - UiPageSearchHandler.open(_activePageId, _pageId.options[_pageId.selectedIndex].textContent.trim(), function(objectId) { - _pageObjectId.value = objectId; - _cache.set(_activePageId, objectId); - }, labelLanguageItem); - }, - - /** - * Updates the available box positions per box controller. - * - * @protected - */ - _setAvailableBoxPositions: function() { - var supportedPositions = JSON.parse(elData(_boxController.options[_boxController.selectedIndex], 'supported-positions')); - - var option; - for (var i = 0, length = _position.childElementCount; i < length; i++) { - option = _position.children[i]; - - option.disabled = (supportedPositions.indexOf(option.value) === -1); - } - } - }; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.ts new file mode 100644 index 0000000000..13e295839a --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Acp/Ui/Box/Handler.ts @@ -0,0 +1,200 @@ +/** + * Provides the interface logic to add and edit boxes. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Acp/Ui/Box/Handler + */ + +import Dictionary from "../../../Dictionary"; +import DomUtil from "../../../Dom/Util"; +import * as Language from "../../../Language"; +import * as UiPageSearchHandler from "../../../Ui/Page/Search/Handler"; + +class AcpUiBoxHandler { + private activePageId = 0; + private readonly boxController: HTMLSelectElement | null; + private readonly boxType: string; + private readonly cache = new Map(); + private readonly containerExternalLink: HTMLElement; + private readonly containerPageId: HTMLElement; + private readonly containerPageObjectId: HTMLElement; + private readonly handlers: Map; + private readonly pageId: HTMLSelectElement; + private readonly pageObjectId: HTMLInputElement; + private readonly position: HTMLSelectElement; + + /** + * Initializes the interface logic. + */ + constructor(handlers: Map, boxType: string) { + this.boxType = boxType; + this.handlers = handlers; + + this.boxController = document.getElementById("boxControllerID") as HTMLSelectElement; + + if (boxType !== "system") { + this.containerPageId = document.getElementById("linkPageIDContainer")!; + this.containerExternalLink = document.getElementById("externalURLContainer")!; + this.containerPageObjectId = document.getElementById("linkPageObjectIDContainer")!; + + if (this.handlers.size) { + this.pageId = document.getElementById("linkPageID") as HTMLSelectElement; + this.pageId.addEventListener("change", () => this.togglePageId()); + + this.pageObjectId = document.getElementById("linkPageObjectID") as HTMLInputElement; + + this.cache = new Map(); + this.activePageId = ~~this.pageId.value; + if (this.activePageId && this.handlers.has(this.activePageId)) { + this.cache.set(this.activePageId, ~~this.pageObjectId.value); + } + + const searchButton = document.getElementById("searchLinkPageObjectID")!; + searchButton.addEventListener("click", (ev) => this.openSearch(ev)); + + // toggle page object id container on init + if (this.handlers.has(~~this.pageId.value)) { + DomUtil.show(this.containerPageObjectId); + } + } + + document.querySelectorAll('input[name="linkType"]').forEach((input: HTMLInputElement) => { + input.addEventListener("change", () => this.toggleLinkType(input.value)); + + if (input.checked) { + this.toggleLinkType(input.value); + } + }); + } + + if (this.boxController) { + this.position = document.getElementById("position") as HTMLSelectElement; + this.boxController.addEventListener("change", () => this.setAvailableBoxPositions()); + + // update positions on init + this.setAvailableBoxPositions(); + } + } + + /** + * Toggles between the interface for internal and external links. + */ + private toggleLinkType(value: string): void { + switch (value) { + case "none": + DomUtil.hide(this.containerPageId); + DomUtil.hide(this.containerPageObjectId); + DomUtil.hide(this.containerExternalLink); + break; + + case "internal": + DomUtil.show(this.containerPageId); + DomUtil.hide(this.containerExternalLink); + if (this.handlers.size) { + this.togglePageId(); + } + break; + + case "external": + DomUtil.hide(this.containerPageId); + DomUtil.hide(this.containerPageObjectId); + DomUtil.show(this.containerExternalLink); + break; + } + } + + /** + * Handles the changed page selection. + */ + private togglePageId(): void { + if (this.handlers.has(this.activePageId)) { + this.cache.set(this.activePageId, ~~this.pageObjectId.value); + } + + this.activePageId = ~~this.pageId.value; + + // page w/o pageObjectID support, discard value + if (!this.handlers.has(this.activePageId)) { + this.pageObjectId.value = ""; + + DomUtil.hide(this.containerPageObjectId); + + return; + } + + const newValue = this.cache.get(this.activePageId); + this.pageObjectId.value = newValue ? newValue.toString() : ""; + + const selectedOption = this.pageId.options[this.pageId.selectedIndex]; + const pageIdentifier = selectedOption.dataset.identifier!; + let languageItem = `wcf.page.pageObjectID.${pageIdentifier}`; + if (Language.get(languageItem) === languageItem) { + languageItem = "wcf.page.pageObjectID"; + } + + this.containerPageObjectId.querySelector("label")!.textContent = Language.get(languageItem); + + DomUtil.show(this.containerPageObjectId); + } + + /** + * Opens the handler lookup dialog. + */ + private openSearch(event: MouseEvent): void { + event.preventDefault(); + + const selectedOption = this.pageId.options[this.pageId.selectedIndex]; + const pageIdentifier = selectedOption.dataset.identifier!; + const languageItem = `wcf.page.pageObjectID.search.${pageIdentifier}`; + + let labelLanguageItem; + if (Language.get(languageItem) !== languageItem) { + labelLanguageItem = languageItem; + } + + UiPageSearchHandler.open( + this.activePageId, + selectedOption.textContent!.trim(), + (objectId) => { + this.pageObjectId.value = objectId.toString(); + this.cache.set(this.activePageId, objectId); + }, + labelLanguageItem, + ); + } + + /** + * Updates the available box positions per box controller. + */ + private setAvailableBoxPositions(): void { + const selectedOption = this.boxController!.options[this.boxController!.selectedIndex]; + const supportedPositions: string[] = JSON.parse(selectedOption.dataset.supportedPositions!); + + Array.from(this.position).forEach((option: HTMLOptionElement) => { + option.disabled = !supportedPositions.includes(option.value); + }); + } +} + +let acpUiBoxHandler: AcpUiBoxHandler; + +/** + * Initializes the interface logic. + */ +export function init(handlers: Dictionary | Map, boxType: string): void { + if (!acpUiBoxHandler) { + let map: Map; + if (!(handlers instanceof Map)) { + map = new Map(); + handlers.forEach((value, key) => { + map.set(~~key, value); + }); + } else { + map = handlers; + } + + acpUiBoxHandler = new AcpUiBoxHandler(map, boxType); + } +} -- 2.20.1