From fa8c7fb3929dea8e3acdcdd362994a69a9723785 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 27 Oct 2020 12:25:26 +0100 Subject: [PATCH] Convert `Ui/Acl/Simple` to TypeScript --- .../js/WoltLabSuite/Core/Ui/Acl/Simple.js | 135 ++++++++++-------- .../ts/WoltLabSuite/Core/Ui/Acl/Simple.js | 98 ------------- .../ts/WoltLabSuite/Core/Ui/Acl/Simple.ts | 96 +++++++++++++ 3 files changed, 173 insertions(+), 156 deletions(-) delete mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.js create mode 100644 wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js index e1fe85758b..9ef2772c75 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js @@ -1,76 +1,95 @@ -define(['Language', 'StringUtil', 'Dom/ChangeListener', 'WoltLabSuite/Core/Ui/User/Search/Input'], function (Language, StringUtil, DomChangeListener, UiUserSearchInput) { +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +define(["require", "exports", "../../Language", "../../StringUtil", "../../Dom/Change/Listener", "../../Dom/Util", "../User/Search/Input"], function (require, exports, Language, StringUtil, Listener_1, Util_1, Input_1) { "use strict"; - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function () { }; - Fake.prototype = { - init: function () { }, - _build: function () { }, - _select: function () { }, - _removeItem: function () { } - }; - return Fake; - } - function UiAclSimple(prefix, inputName) { this.init(prefix, inputName); } - UiAclSimple.prototype = { - init: function (prefix, inputName) { - this._prefix = prefix || ''; - this._inputName = inputName || 'aclValues'; - this._build(); - }, - _build: function () { - var container = elById(this._prefix + 'aclInputContainer'); - elById(this._prefix + 'aclAllowAll').addEventListener('change', (function () { - elHide(container); - })); - elById(this._prefix + 'aclAllowAll_no').addEventListener('change', (function () { - elShow(container); - })); - this._list = elById(this._prefix + 'aclAccessList'); - this._list.addEventListener(WCF_CLICK_EVENT, this._removeItem.bind(this)); - var excludedSearchValues = []; - elBySelAll('.aclLabel', this._list, function (label) { + Language = __importStar(Language); + StringUtil = __importStar(StringUtil); + Listener_1 = __importDefault(Listener_1); + Util_1 = __importDefault(Util_1); + Input_1 = __importDefault(Input_1); + class UiAclSimple { + constructor(prefix, inputName) { + this.prefix = prefix || ''; + this.inputName = inputName || 'aclValues'; + const container = document.getElementById(this.prefix + 'aclInputContainer'); + const allowAll = document.getElementById(this.prefix + 'aclAllowAll'); + allowAll.addEventListener('change', () => { + Util_1.default.hide(container); + }); + const denyAll = document.getElementById(this.prefix + 'aclAllowAll_no'); + denyAll.addEventListener('change', () => { + Util_1.default.show(container); + }); + this.list = document.getElementById(this.prefix + 'aclAccessList'); + this.list.addEventListener('click', this.removeItem.bind(this)); + const excludedSearchValues = []; + this.list.querySelectorAll('.aclLabel').forEach(label => { excludedSearchValues.push(label.textContent); }); - this._searchInput = new UiUserSearchInput(elById(this._prefix + 'aclSearchInput'), { - callbackSelect: this._select.bind(this), + this.searchInput = new Input_1.default(document.getElementById(this.prefix + 'aclSearchInput'), { + callbackSelect: this.select.bind(this), includeUserGroups: true, excludedSearchValues: excludedSearchValues, preventSubmit: true, }); - this._aclListContainer = elById(this._prefix + 'aclListContainer'); - DomChangeListener.trigger(); - }, - _select: function (listItem) { - var type = elData(listItem, 'type'); - var label = elData(listItem, 'label'); - var html = ''; - html += '' + StringUtil.escapeHTML(label) + ''; - html += ''; - html += ''; - var item = elCreate('li'); + this.aclListContainer = document.getElementById(this.prefix + 'aclListContainer'); + Listener_1.default.trigger(); + } + select(listItem) { + const type = listItem.dataset.type; + const label = listItem.dataset.label; + const objectId = listItem.dataset.objectId; + const iconName = type === 'group' ? 'users' : 'user'; + const html = ` + ${StringUtil.escapeHTML(label)} + + `; + const item = document.createElement('li'); item.innerHTML = html; - var firstUser = elBySel('.fa-user', this._list); + const firstUser = this.list.querySelector('.fa-user'); if (firstUser === null) { - this._list.appendChild(item); + this.list.appendChild(item); } else { - this._list.insertBefore(item, firstUser.parentNode); + this.list.insertBefore(item, firstUser.parentNode); } - elShow(this._aclListContainer); - this._searchInput.addExcludedSearchValues(label); - DomChangeListener.trigger(); + Util_1.default.show(this.aclListContainer); + this.searchInput.addExcludedSearchValues(label); + Listener_1.default.trigger(); return false; - }, - _removeItem: function (event) { - if (event.target.classList.contains('fa-times')) { - var label = elBySel('.aclLabel', event.target.parentNode); - this._searchInput.removeExcludedSearchValues(label.textContent); - elRemove(event.target.parentNode); - if (this._list.childElementCount === 0) { - elHide(this._aclListContainer); + } + removeItem(event) { + const target = event.target; + if (target.classList.contains('fa-times')) { + const parent = target.parentElement; + const label = parent.querySelector('.aclLabel'); + this.searchInput.removeExcludedSearchValues(label.textContent); + parent.remove(); + if (this.list.childElementCount === 0) { + Util_1.default.hide(this.aclListContainer); } } } - }; + } return UiAclSimple; }); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.js b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.js deleted file mode 100644 index 01fcb2a0af..0000000000 --- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.js +++ /dev/null @@ -1,98 +0,0 @@ -define(['Language', 'StringUtil', 'Dom/ChangeListener', 'WoltLabSuite/Core/Ui/User/Search/Input'], function(Language, StringUtil, DomChangeListener, UiUserSearchInput) { - "use strict"; - - if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - init: function() {}, - _build: function() {}, - _select: function() {}, - _removeItem: function() {} - }; - return Fake; - } - - function UiAclSimple(prefix, inputName) { this.init(prefix, inputName); } - UiAclSimple.prototype = { - init: function(prefix, inputName) { - this._prefix = prefix || ''; - this._inputName = inputName || 'aclValues'; - - this._build(); - }, - - _build: function () { - var container = elById(this._prefix + 'aclInputContainer'); - - elById(this._prefix + 'aclAllowAll').addEventListener('change', (function() { - elHide(container); - })); - elById(this._prefix + 'aclAllowAll_no').addEventListener('change', (function() { - elShow(container); - })); - - this._list = elById(this._prefix + 'aclAccessList'); - this._list.addEventListener(WCF_CLICK_EVENT, this._removeItem.bind(this)); - - var excludedSearchValues = []; - elBySelAll('.aclLabel', this._list, function(label) { - excludedSearchValues.push(label.textContent); - }); - - this._searchInput = new UiUserSearchInput(elById(this._prefix + 'aclSearchInput'), { - callbackSelect: this._select.bind(this), - includeUserGroups: true, - excludedSearchValues: excludedSearchValues, - preventSubmit: true, - }); - - this._aclListContainer = elById(this._prefix + 'aclListContainer'); - - DomChangeListener.trigger(); - }, - - _select: function(listItem) { - var type = elData(listItem, 'type'); - var label = elData(listItem, 'label'); - - var html = ''; - html += '' + StringUtil.escapeHTML(label) + ''; - html += ''; - html += ''; - - var item = elCreate('li'); - item.innerHTML = html; - - var firstUser = elBySel('.fa-user', this._list); - if (firstUser === null) { - this._list.appendChild(item); - } - else { - this._list.insertBefore(item, firstUser.parentNode); - } - - elShow(this._aclListContainer); - - this._searchInput.addExcludedSearchValues(label); - - DomChangeListener.trigger(); - - return false; - }, - - _removeItem: function (event) { - if (event.target.classList.contains('fa-times')) { - var label = elBySel('.aclLabel', event.target.parentNode); - this._searchInput.removeExcludedSearchValues(label.textContent); - - elRemove(event.target.parentNode); - - if (this._list.childElementCount === 0) { - elHide(this._aclListContainer); - } - } - } - }; - - return UiAclSimple; -}); diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts new file mode 100644 index 0000000000..cc0e6e1a4e --- /dev/null +++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts @@ -0,0 +1,96 @@ +import * as Language from '../../Language'; +import * as StringUtil from '../../StringUtil'; +import DomChangeListener from '../../Dom/Change/Listener'; +import DomUtil from '../../Dom/Util'; +import UiUserSearchInput from '../User/Search/Input'; + +class UiAclSimple { + private readonly aclListContainer: HTMLElement; + private readonly list: HTMLUListElement; + private readonly prefix: string; + private readonly inputName: string; + private readonly searchInput: UiUserSearchInput; + + constructor(prefix?: string, inputName?: string) { + this.prefix = prefix || ''; + this.inputName = inputName || 'aclValues'; + + const container = document.getElementById(this.prefix + 'aclInputContainer')!; + + const allowAll = document.getElementById(this.prefix + 'aclAllowAll') as HTMLInputElement; + allowAll.addEventListener('change', () => { + DomUtil.hide(container); + }); + + const denyAll = document.getElementById(this.prefix + 'aclAllowAll_no')!; + denyAll.addEventListener('change', () => { + DomUtil.show(container); + }); + + this.list = document.getElementById(this.prefix + 'aclAccessList') as HTMLUListElement; + this.list.addEventListener('click', this.removeItem.bind(this)); + + const excludedSearchValues: string[] = []; + this.list.querySelectorAll('.aclLabel').forEach(label => { + excludedSearchValues.push(label.textContent!); + }); + + this.searchInput = new UiUserSearchInput(document.getElementById(this.prefix + 'aclSearchInput'), { + callbackSelect: this.select.bind(this), + includeUserGroups: true, + excludedSearchValues: excludedSearchValues, + preventSubmit: true, + }); + + this.aclListContainer = document.getElementById(this.prefix + 'aclListContainer')!; + + DomChangeListener.trigger(); + } + + private select(listItem: HTMLLIElement): boolean { + const type = listItem.dataset.type!; + const label = listItem.dataset.label!; + const objectId = listItem.dataset.objectId!; + + const iconName = type === 'group' ? 'users' : 'user'; + const html = ` + ${StringUtil.escapeHTML(label)} + + `; + + const item = document.createElement('li'); + item.innerHTML = html; + + const firstUser = this.list.querySelector('.fa-user'); + if (firstUser === null) { + this.list.appendChild(item); + } else { + this.list.insertBefore(item, firstUser.parentNode); + } + + DomUtil.show(this.aclListContainer); + + this.searchInput.addExcludedSearchValues(label); + + DomChangeListener.trigger(); + + return false; + } + + private removeItem(event: MouseEvent): void { + const target = event.target as HTMLElement; + if (target.classList.contains('fa-times')) { + const parent = target.parentElement!; + const label = parent.querySelector('.aclLabel')!; + this.searchInput.removeExcludedSearchValues(label.textContent!); + + parent.remove() + + if (this.list.childElementCount === 0) { + DomUtil.hide(this.aclListContainer); + } + } + } +} + +export = UiAclSimple -- 2.20.1