From 4c581bf6c77424b0a769839943e711757d839418 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 2 Nov 2020 01:10:01 +0100 Subject: [PATCH] Convert `Ui/Style/FontAwesome` to TypeScript --- .../WoltLabSuite/Core/Ui/Style/FontAwesome.js | 147 +++++++++--------- .../WoltLabSuite/Core/Ui/Style/FontAwesome.js | 115 -------------- .../WoltLabSuite/Core/Ui/Style/FontAwesome.ts | 111 +++++++++++++ 3 files changed, 182 insertions(+), 191 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Style/FontAwesome.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Style/FontAwesome.js index df228ac6e7..5e5ae715ce 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Style/FontAwesome.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Style/FontAwesome.js @@ -1,99 +1,94 @@ /** * Provides a selection dialog for FontAwesome icons with filter capabilities. * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Style/FontAwesome + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Style/FontAwesome */ -define(['Language', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/ItemList/Filter'], function (Language, UiDialog, UiItemListFilter) { +define(["require", "exports", "tslib", "../../Language", "../Dialog", "../ItemList/Filter"], function (require, exports, tslib_1, Language, Dialog_1, Filter_1) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - setup: function () { }, - open: function () { }, - _click: function () { }, - _dialogSetup: function () { } - }; - return Fake; - } - var _callback, _iconList, _itemListFilter; - var _icons = []; - /** - * @exports WoltLabSuite/Core/Ui/Style/FontAwesome - */ - return { - /** - * Sets the list of available icons, must be invoked prior to any call - * to the `open()` method. - * - * @param {string[]} icons list of icon names excluding the `fa-` prefix - */ - setup: function (icons) { - _icons = icons; - }, - /** - * Shows the FontAwesome selection dialog, supplied callback will be - * invoked with the selection icon's name as the only argument. - * - * @param {Function} callback callback on icon selection, receives icon name only - */ - open: function (callback) { - if (_icons.length === 0) { - throw new Error("Missing icon data, please include the template before calling this method using `{include file='fontAwesomeJavaScript'}`."); - } - _callback = callback; - UiDialog.open(this); - }, + Object.defineProperty(exports, "__esModule", { value: true }); + exports.open = exports.setup = void 0; + Language = tslib_1.__importStar(Language); + Dialog_1 = tslib_1.__importDefault(Dialog_1); + Filter_1 = tslib_1.__importDefault(Filter_1); + class UiStyleFontAwesome { + constructor(icons) { + this.callback = undefined; + this.iconList = undefined; + this.itemListFilter = undefined; + this.icons = icons; + } + open(callback) { + this.callback = callback; + Dialog_1.default.open(this); + } /** * Selects an icon, notifies the callback and closes the dialog. - * - * @param {Event} event event object - * @protected */ - _click: function (event) { + click(event) { event.preventDefault(); - var item = event.target.closest('li'); - var icon = elBySel('small', item).textContent.trim(); - UiDialog.close(this); - _callback(icon); - }, - _dialogSetup: function () { + const target = event.target; + const item = target.closest("li"); + const icon = item.querySelector("small").textContent.trim(); + Dialog_1.default.close(this); + this.callback(icon); + } + _dialogSetup() { return { - id: 'fontAwesomeSelection', + id: "fontAwesomeSelection", options: { - onSetup: (function () { - _iconList = elById('fontAwesomeIcons'); + onSetup: () => { + this.iconList = document.getElementById("fontAwesomeIcons"); // build icons - var icon, html = ''; - for (var i = 0, length = _icons.length; i < length; i++) { - icon = _icons[i]; - html += '
  • ' + icon + '
    • '; - } - _iconList.innerHTML = html; - _iconList.addEventListener('click', this._click.bind(this)); - _itemListFilter = new UiItemListFilter('fontAwesomeIcons', { - callbackPrepareItem: function (item) { - var small = elBySel('small', item); - var text = small.textContent.trim(); + this.iconList.innerHTML = this.icons + .map((icon) => `
  • ${icon}
    • `) + .join(""); + this.iconList.addEventListener("click", (ev) => this.click(ev)); + this.itemListFilter = new Filter_1.default("fontAwesomeIcons", { + callbackPrepareItem: (item) => { + const small = item.querySelector("small"); + const text = small.textContent.trim(); return { - item: item, + item, span: small, - text: text + text, }; }, enableVisibilityFilter: false, - filterPosition: 'top' + filterPosition: "top", }); - }).bind(this), - onShow: function () { - _itemListFilter.reset(); }, - title: Language.get('wcf.global.fontAwesome.selectIcon') + onShow: () => { + this.itemListFilter.reset(); + }, + title: Language.get("wcf.global.fontAwesome.selectIcon"), }, - source: '
      ' + source: '
        ', }; } - }; + } + let uiStyleFontAwesome; + /** + * Sets the list of available icons, must be invoked prior to any call + * to the `open()` method. + */ + function setup(icons) { + if (!uiStyleFontAwesome) { + uiStyleFontAwesome = new UiStyleFontAwesome(icons); + } + } + exports.setup = setup; + /** + * Shows the FontAwesome selection dialog, supplied callback will be + * invoked with the selection icon's name as the only argument. + */ + function open(callback) { + if (!uiStyleFontAwesome) { + throw new Error("Missing icon data, please include the template before calling this method using `{include file='fontAwesomeJavaScript'}`."); + } + uiStyleFontAwesome.open(callback); + } + exports.open = open; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.js deleted file mode 100644 index ac6213cc0c..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.js +++ /dev/null @@ -1,115 +0,0 @@ -/** - * Provides a selection dialog for FontAwesome icons with filter capabilities. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Ui/Style/FontAwesome - */ -define(['Language', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/ItemList/Filter'], function (Language, UiDialog, UiItemListFilter) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - setup: function() {}, - open: function() {}, - _click: function() {}, - _dialogSetup: function() {} - }; - return Fake; - } - - var _callback, _iconList, _itemListFilter; - var _icons = []; - - /** - * @exports WoltLabSuite/Core/Ui/Style/FontAwesome - */ - return { - /** - * Sets the list of available icons, must be invoked prior to any call - * to the `open()` method. - * - * @param {string[]} icons list of icon names excluding the `fa-` prefix - */ - setup: function (icons) { - _icons = icons; - }, - - /** - * Shows the FontAwesome selection dialog, supplied callback will be - * invoked with the selection icon's name as the only argument. - * - * @param {Function} callback callback on icon selection, receives icon name only - */ - open: function(callback) { - if (_icons.length === 0) { - throw new Error("Missing icon data, please include the template before calling this method using `{include file='fontAwesomeJavaScript'}`."); - } - - _callback = callback; - - UiDialog.open(this); - }, - - /** - * Selects an icon, notifies the callback and closes the dialog. - * - * @param {Event} event event object - * @protected - */ - _click: function(event) { - event.preventDefault(); - - var item = event.target.closest('li'); - var icon = elBySel('small', item).textContent.trim(); - - UiDialog.close(this); - - _callback(icon); - }, - - _dialogSetup: function() { - return { - id: 'fontAwesomeSelection', - options: { - onSetup: (function() { - _iconList = elById('fontAwesomeIcons'); - - // build icons - var icon, html = ''; - for (var i = 0, length = _icons.length; i < length; i++) { - icon = _icons[i]; - - html += '
      • ' + icon + '
        • '; - } - - _iconList.innerHTML = html; - _iconList.addEventListener('click', this._click.bind(this)); - - _itemListFilter = new UiItemListFilter('fontAwesomeIcons', { - callbackPrepareItem: function (item) { - var small = elBySel('small', item); - var text = small.textContent.trim(); - - return { - item: item, - span: small, - text: text - }; - }, - enableVisibilityFilter: false, - filterPosition: 'top' - }); - }).bind(this), - onShow: function () { - _itemListFilter.reset(); - }, - title: Language.get('wcf.global.fontAwesome.selectIcon') - }, - source: '
          ' - }; - } - } -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.ts new file mode 100644 index 0000000000..90b937024d --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Style/FontAwesome.ts @@ -0,0 +1,111 @@ +/** + * Provides a selection dialog for FontAwesome icons with filter capabilities. + * + * @author Alexander Ebert + * @copyright 2001-2019 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Style/FontAwesome + */ + +import { DialogCallbackObject, DialogCallbackSetup } from "../Dialog/Data"; +import * as Language from "../../Language"; +import UiDialog from "../Dialog"; +import UiItemListFilter from "../ItemList/Filter"; + +type CallbackSelect = (icon: string) => void; + +class UiStyleFontAwesome implements DialogCallbackObject { + private callback?: CallbackSelect = undefined; + private iconList?: HTMLElement = undefined; + private itemListFilter?: UiItemListFilter = undefined; + private readonly icons: string[]; + + constructor(icons: string[]) { + this.icons = icons; + } + + open(callback: CallbackSelect): void { + this.callback = callback; + + UiDialog.open(this); + } + + /** + * Selects an icon, notifies the callback and closes the dialog. + */ + protected click(event: MouseEvent): void { + event.preventDefault(); + + const target = event.target as HTMLElement; + const item = target.closest("li") as HTMLLIElement; + const icon = item.querySelector("small")!.textContent!.trim(); + + UiDialog.close(this); + + this.callback!(icon); + } + + _dialogSetup(): ReturnType { + return { + id: "fontAwesomeSelection", + options: { + onSetup: () => { + this.iconList = document.getElementById("fontAwesomeIcons") as HTMLElement; + + // build icons + this.iconList.innerHTML = this.icons + .map((icon) => `
        • ${icon}
          • `) + .join(""); + + this.iconList.addEventListener("click", (ev) => this.click(ev)); + + this.itemListFilter = new UiItemListFilter("fontAwesomeIcons", { + callbackPrepareItem: (item) => { + const small = item.querySelector("small") as HTMLElement; + const text = small.textContent!.trim(); + + return { + item, + span: small, + text, + }; + }, + enableVisibilityFilter: false, + filterPosition: "top", + }); + }, + onShow: () => { + this.itemListFilter!.reset(); + }, + title: Language.get("wcf.global.fontAwesome.selectIcon"), + }, + source: '
            ', + }; + } +} + +let uiStyleFontAwesome: UiStyleFontAwesome; + +/** + * Sets the list of available icons, must be invoked prior to any call + * to the `open()` method. + */ +export function setup(icons: string[]): void { + if (!uiStyleFontAwesome) { + uiStyleFontAwesome = new UiStyleFontAwesome(icons); + } +} + +/** + * Shows the FontAwesome selection dialog, supplied callback will be + * invoked with the selection icon's name as the only argument. + */ +export function open(callback: CallbackSelect): void { + if (!uiStyleFontAwesome) { + throw new Error( + "Missing icon data, please include the template before calling this method using `{include file='fontAwesomeJavaScript'}`." + ); + } + + uiStyleFontAwesome.open(callback); +} -- 2.20.1