/**
* Provides a selection dialog for FontAwesome icons with filter capabilities.
*
- * @author Alexander Ebert
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Ui/Style/FontAwesome
+ * @author Alexander Ebert
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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<string>} 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 += '<li><span class="icon icon48 fa-' + icon + '"></span><small>' + icon + '</small></li>';
- }
- _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) => `<li><span class="icon icon48 fa-${icon}"></span><small>${icon}</small></li>`)
+ .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: '<ul class="fontAwesomeIcons" id="fontAwesomeIcons"></ul>'
+ source: '<ul class="fontAwesomeIcons" id="fontAwesomeIcons"></ul>',
};
}
- };
+ }
+ 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;
});
+++ /dev/null
-/**
- * Provides a selection dialog for FontAwesome icons with filter capabilities.
- *
- * @author Alexander Ebert
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @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<string>} 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 += '<li><span class="icon icon48 fa-' + icon + '"></span><small>' + icon + '</small></li>';
- }
-
- _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: '<ul class="fontAwesomeIcons" id="fontAwesomeIcons"></ul>'
- };
- }
- }
-});
--- /dev/null
+/**
+ * Provides a selection dialog for FontAwesome icons with filter capabilities.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @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<DialogCallbackSetup> {
+ return {
+ id: "fontAwesomeSelection",
+ options: {
+ onSetup: () => {
+ this.iconList = document.getElementById("fontAwesomeIcons") as HTMLElement;
+
+ // build icons
+ this.iconList.innerHTML = this.icons
+ .map((icon) => `<li><span class="icon icon48 fa-${icon}"></span><small>${icon}</small></li>`)
+ .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: '<ul class="fontAwesomeIcons" id="fontAwesomeIcons"></ul>',
+ };
+ }
+}
+
+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);
+}
projects / GitHub / WoltLab / WCF.git / commitdiff