-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 = '<span class="icon icon16 fa-' + (type === 'group' ? 'users' : 'user') + '"></span>';
- html += '<span class="aclLabel">' + StringUtil.escapeHTML(label) + '</span>';
- html += '<span class="icon icon16 fa-times pointer jsTooltip" title="' + Language.get('wcf.global.button.delete') + '"></span>';
- html += '<input type="hidden" name="' + this._inputName + '[' + type + '][]" value="' + elData(listItem, 'object-id') + '">';
- 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 = `<span class="icon icon16 fa-${iconName}"></span>
+ <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
+ <span class="icon icon16 fa-times pointer jsTooltip" title="${Language.get('wcf.global.button.delete')}"></span>
+ <input type="hidden" name="${this.inputName}[${type}][]" value="${objectId}">`;
+ 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;
});
+++ /dev/null
-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 = '<span class="icon icon16 fa-' + (type === 'group' ? 'users' : 'user') + '"></span>';
- html += '<span class="aclLabel">' + StringUtil.escapeHTML(label) + '</span>';
- html += '<span class="icon icon16 fa-times pointer jsTooltip" title="' + Language.get('wcf.global.button.delete') + '"></span>';
- html += '<input type="hidden" name="' + this._inputName + '[' + type + '][]" value="' + elData(listItem, 'object-id') + '">';
-
- 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;
-});
--- /dev/null
+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 = `<span class="icon icon16 fa-${iconName}"></span>
+ <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
+ <span class="icon icon16 fa-times pointer jsTooltip" title="${Language.get('wcf.global.button.delete')}"></span>
+ <input type="hidden" name="${this.inputName}[${type}][]" value="${objectId}">`;
+
+ 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
projects / GitHub / WoltLab / WCF.git / commitdiff