/**
* Flexible UI element featuring both a list of items and an input field.
*
- * @author Alexander Ebert, Matthias Schmidt
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Ui/ItemList/Static
+ * @author Alexander Ebert, Matthias Schmidt
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module WoltLabSuite/Core/Ui/ItemList/Static
*/
-define(['Core', 'Dictionary', 'Language', 'Dom/Traverse', 'EventKey', 'Ui/SimpleDropdown'], function (Core, Dictionary, Language, DomTraverse, EventKey, UiSimpleDropdown) {
+define(["require", "exports", "tslib", "../../Core", "../../Dom/Traverse", "../../Language", "../Dropdown/Simple"], function (require, exports, tslib_1, Core, DomTraverse, Language, Simple_1) {
"use strict";
- var _activeId = '';
- var _data = new Dictionary();
- var _didInit = false;
- var _callbackKeyDown = null;
- var _callbackKeyPress = null;
- var _callbackKeyUp = null;
- var _callbackPaste = null;
- var _callbackRemoveItem = null;
- var _callbackBlur = null;
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.setValues = exports.getValues = exports.init = void 0;
+ Core = tslib_1.__importStar(Core);
+ DomTraverse = tslib_1.__importStar(DomTraverse);
+ Language = tslib_1.__importStar(Language);
+ Simple_1 = tslib_1.__importDefault(Simple_1);
+ const _data = new Map();
/**
- * @exports WoltLabSuite/Core/Ui/ItemList/Static
+ * Creates the DOM structure for target element. If `element` is a `<textarea>`
+ * it will be automatically replaced with an `<input>` element.
*/
- return {
- /**
- * Initializes an item list.
- *
- * The `values` argument must be empty or contain a list of strings or object, e.g.
- * `['foo', 'bar']` or `[{ objectId: 1337, value: 'baz'}, {...}]`
- *
- * @param {string} elementId input element id
- * @param {Array} values list of existing values
- * @param {Object} options option list
- */
- init: function (elementId, values, options) {
- var element = elById(elementId);
- if (element === null) {
- throw new Error("Expected a valid element id, '" + elementId + "' is invalid.");
+ function createUI(element, options) {
+ const list = document.createElement("ol");
+ list.className = "inputItemList" + (element.disabled ? " disabled" : "");
+ list.dataset.elementId = element.id;
+ list.addEventListener("click", (event) => {
+ if (event.target === list) {
+ element.focus();
}
- // remove data from previous instance
- if (_data.has(elementId)) {
- var tmp = _data.get(elementId);
- for (var key in tmp) {
- if (tmp.hasOwnProperty(key)) {
- var el = tmp[key];
- if (el instanceof Element && el.parentNode) {
- elRemove(el);
- }
- }
- }
- UiSimpleDropdown.destroy(elementId);
- _data.delete(elementId);
+ });
+ const listItem = document.createElement("li");
+ listItem.className = "input";
+ list.appendChild(listItem);
+ element.addEventListener("keydown", (ev) => keyDown(ev));
+ element.addEventListener("keypress", (ev) => keyPress(ev));
+ element.addEventListener("keyup", (ev) => keyUp(ev));
+ element.addEventListener("paste", (ev) => paste(ev));
+ element.addEventListener("blur", (ev) => blur(ev));
+ element.insertAdjacentElement("beforebegin", list);
+ listItem.appendChild(element);
+ if (options.maxLength !== -1) {
+ element.maxLength = options.maxLength;
+ }
+ let shadow;
+ let values = [];
+ if (options.isCSV) {
+ shadow = document.createElement("input");
+ shadow.className = "itemListInputShadow";
+ shadow.type = "hidden";
+ shadow.name = element.name;
+ element.removeAttribute("name");
+ list.insertAdjacentElement("beforebegin", shadow);
+ values = element.value
+ .split(",")
+ .map((s) => s.trim())
+ .filter((s) => s.length > 0);
+ if (element.nodeName === "TEXTAREA") {
+ const inputElement = document.createElement("input");
+ inputElement.type = "text";
+ element.parentElement.insertBefore(inputElement, element);
+ inputElement.id = element.id;
+ element.remove();
+ element = inputElement;
}
- options = Core.extend({
- // maximum number of items this list may contain, `-1` for infinite
- maxItems: -1,
- // maximum length of an item value, `-1` for infinite
- maxLength: -1,
- // initial value will be interpreted as comma separated value and submitted as such
- isCSV: false,
- // will be invoked whenever the items change, receives the element id first and list of values second
- callbackChange: null,
- // callback once the form is about to be submitted
- callbackSubmit: null,
- // value may contain the placeholder `{$objectId}`
- submitFieldName: ''
- }, options);
- var form = DomTraverse.parentByTag(element, 'FORM');
- if (form !== null) {
- if (options.isCSV === false) {
- if (!options.submitFieldName.length && typeof options.callbackSubmit !== 'function') {
- throw new Error("Expected a valid function for option 'callbackSubmit', a non-empty value for option 'submitFieldName' or enabling the option 'submitFieldCSV'.");
- }
- form.addEventListener('submit', (function () {
- var values = this.getValues(elementId);
- if (options.submitFieldName.length) {
- var input;
- for (var i = 0, length = values.length; i < length; i++) {
- input = elCreate('input');
- input.type = 'hidden';
- input.name = options.submitFieldName.replace('{$objectId}', values[i].objectId);
- input.value = values[i].value;
- form.appendChild(input);
- }
- }
- else {
- options.callbackSubmit(form, values);
- }
- }).bind(this));
- }
+ }
+ return {
+ element,
+ list,
+ shadow,
+ values,
+ };
+ }
+ /**
+ * Enforces the maximum number of items.
+ */
+ function handleLimit(elementId) {
+ const data = _data.get(elementId);
+ if (data.options.maxItems === -1) {
+ return;
+ }
+ if (data.list.childElementCount - 1 < data.options.maxItems) {
+ if (data.element.disabled) {
+ data.element.disabled = false;
+ data.element.removeAttribute("placeholder");
}
- this._setup();
- var data = this._createUI(element, options);
- _data.set(elementId, {
- dropdownMenu: null,
- element: data.element,
- list: data.list,
- listItem: data.element.parentNode,
- options: options,
- shadow: data.shadow
- });
- values = (data.values.length) ? data.values : values;
- if (Array.isArray(values)) {
- var value;
- var forceRemoveIcon = !data.element.disabled;
- for (var i = 0, length = values.length; i < length; i++) {
- value = values[i];
- if (typeof value === 'string') {
- value = { objectId: 0, value: value };
+ }
+ else if (!data.element.disabled) {
+ data.element.disabled = true;
+ data.element.placeholder = Language.get("wcf.global.form.input.maxItems");
+ }
+ }
+ /**
+ * Sets the active item list id and handles keyboard access to remove an existing item.
+ */
+ function keyDown(event) {
+ const input = event.currentTarget;
+ const lastItem = input.parentElement.previousElementSibling;
+ if (event.key === "Backspace") {
+ if (input.value.length === 0) {
+ if (lastItem !== null) {
+ if (lastItem.classList.contains("active")) {
+ removeItem(lastItem);
}
- this._addItem(elementId, value, forceRemoveIcon);
- }
- }
- },
- /**
- * Returns the list of current values.
- *
- * @param {string} elementId input element id
- * @return {Array} list of objects containing object id and value
- */
- getValues: function (elementId) {
- if (!_data.has(elementId)) {
- throw new Error("Element id '" + elementId + "' is unknown.");
- }
- var data = _data.get(elementId);
- var values = [];
- elBySelAll('.item > span', data.list, function (span) {
- values.push({
- objectId: ~~elData(span, 'object-id'),
- value: span.textContent
- });
- });
- return values;
- },
- /**
- * Sets the list of current values.
- *
- * @param {string} elementId input element id
- * @param {Array} values list of objects containing object id and value
- */
- setValues: function (elementId, values) {
- if (!_data.has(elementId)) {
- throw new Error("Element id '" + elementId + "' is unknown.");
- }
- var data = _data.get(elementId);
- // remove all existing items first
- var i, length;
- var items = DomTraverse.childrenByClass(data.list, 'item');
- for (i = 0, length = items.length; i < length; i++) {
- this._removeItem(null, items[i], true);
- }
- // add new items
- for (i = 0, length = values.length; i < length; i++) {
- this._addItem(elementId, values[i]);
- }
- },
- /**
- * Binds static event listeners.
- */
- _setup: function () {
- if (_didInit) {
- return;
- }
- _didInit = true;
- _callbackKeyDown = this._keyDown.bind(this);
- _callbackKeyPress = this._keyPress.bind(this);
- _callbackKeyUp = this._keyUp.bind(this);
- _callbackPaste = this._paste.bind(this);
- _callbackRemoveItem = this._removeItem.bind(this);
- _callbackBlur = this._blur.bind(this);
- },
- /**
- * Creates the DOM structure for target element. If `element` is a `<textarea>`
- * it will be automatically replaced with an `<input>` element.
- *
- * @param {Element} element input element
- * @param {Object} options option list
- */
- _createUI: function (element, options) {
- var list = elCreate('ol');
- list.className = 'inputItemList' + (element.disabled ? ' disabled' : '');
- elData(list, 'element-id', element.id);
- list.addEventListener('click', function (event) {
- if (event.target === list) {
- //noinspection JSUnresolvedFunction
- element.focus();
- }
- });
- var listItem = elCreate('li');
- listItem.className = 'input';
- list.appendChild(listItem);
- element.addEventListener('keydown', _callbackKeyDown);
- element.addEventListener('keypress', _callbackKeyPress);
- element.addEventListener('keyup', _callbackKeyUp);
- element.addEventListener('paste', _callbackPaste);
- element.addEventListener('blur', _callbackBlur);
- element.parentNode.insertBefore(list, element);
- listItem.appendChild(element);
- if (options.maxLength !== -1) {
- elAttr(element, 'maxLength', options.maxLength);
- }
- var shadow = null, values = [];
- if (options.isCSV) {
- shadow = elCreate('input');
- shadow.className = 'itemListInputShadow';
- shadow.type = 'hidden';
- //noinspection JSUnresolvedVariable
- shadow.name = element.name;
- element.removeAttribute('name');
- list.parentNode.insertBefore(shadow, list);
- //noinspection JSUnresolvedVariable
- var value, tmp = element.value.split(',');
- for (var i = 0, length = tmp.length; i < length; i++) {
- value = tmp[i].trim();
- if (value.length) {
- values.push(value);
+ else {
+ lastItem.classList.add("active");
}
}
- if (element.nodeName === 'TEXTAREA') {
- var inputElement = elCreate('input');
- inputElement.type = 'text';
- element.parentNode.insertBefore(inputElement, element);
- inputElement.id = element.id;
- elRemove(element);
- element = inputElement;
- }
}
- return {
- element: element,
- list: list,
- shadow: shadow,
- values: values
- };
- },
- /**
- * Enforces the maximum number of items.
- *
- * @param {string} elementId input element id
- */
- _handleLimit: function (elementId) {
- var data = _data.get(elementId);
- if (data.options.maxItems === -1) {
- return;
- }
- if (data.list.childElementCount - 1 < data.options.maxItems) {
- if (data.element.disabled) {
- data.element.disabled = false;
- data.element.removeAttribute('placeholder');
- }
- }
- else if (!data.element.disabled) {
- data.element.disabled = true;
- elAttr(data.element, 'placeholder', Language.get('wcf.global.form.input.maxItems'));
+ }
+ else if (event.key === "Escape") {
+ if (lastItem !== null && lastItem.classList.contains("active")) {
+ lastItem.classList.remove("active");
}
- },
- /**
- * Sets the active item list id and handles keyboard access to remove an existing item.
- *
- * @param {object} event event object
- */
- _keyDown: function (event) {
- var input = event.currentTarget;
- var lastItem = input.parentNode.previousElementSibling;
- _activeId = input.id;
- if (event.keyCode === 8) {
- // 8 = [BACKSPACE]
- if (input.value.length === 0) {
- if (lastItem !== null) {
- if (lastItem.classList.contains('active')) {
- this._removeItem(null, lastItem);
- }
- else {
- lastItem.classList.add('active');
- }
- }
- }
+ }
+ }
+ /**
+ * Handles the `[ENTER]` and `[,]` key to add an item to the list.
+ */
+ function keyPress(event) {
+ if (event.key === "Enter" || event.key === "Comma") {
+ event.preventDefault();
+ const input = event.currentTarget;
+ const value = input.value.trim();
+ if (value.length) {
+ addItem(input.id, { objectId: 0, value: value });
}
- else if (event.keyCode === 27) {
- // 27 = [ESC]
- if (lastItem !== null && lastItem.classList.contains('active')) {
- lastItem.classList.remove('active');
- }
+ }
+ }
+ /**
+ * Splits comma-separated values being pasted into the input field.
+ */
+ function paste(event) {
+ const input = event.currentTarget;
+ const text = event.clipboardData.getData("text/plain");
+ text
+ .split(",")
+ .map((s) => s.trim())
+ .filter((s) => s.length > 0)
+ .forEach((s) => {
+ addItem(input.id, { objectId: 0, value: s });
+ });
+ event.preventDefault();
+ }
+ /**
+ * Handles the keyup event to unmark an item for deletion.
+ */
+ function keyUp(event) {
+ const input = event.currentTarget;
+ if (input.value.length > 0) {
+ const lastItem = input.parentElement.previousElementSibling;
+ if (lastItem !== null) {
+ lastItem.classList.remove("active");
}
- },
- /**
- * Handles the `[ENTER]` and `[,]` key to add an item to the list.
- *
- * @param {Event} event event object
- */
- _keyPress: function (event) {
- if (EventKey.Enter(event) || EventKey.Comma(event)) {
- event.preventDefault();
- var value = event.currentTarget.value.trim();
- if (value.length) {
- this._addItem(event.currentTarget.id, { objectId: 0, value: value });
- }
+ }
+ }
+ /**
+ * Adds an item to the list.
+ */
+ function addItem(elementId, value, forceRemoveIcon) {
+ const data = _data.get(elementId);
+ const listItem = document.createElement("li");
+ listItem.className = "item";
+ const content = document.createElement("span");
+ content.className = "content";
+ content.dataset.objectId = value.objectId.toString();
+ content.textContent = value.value;
+ listItem.appendChild(content);
+ if (forceRemoveIcon || !data.element.disabled) {
+ const button = document.createElement("a");
+ button.className = "icon icon16 fa-times";
+ button.addEventListener("click", (ev) => removeItem(ev));
+ listItem.appendChild(button);
+ }
+ data.list.insertBefore(listItem, data.listItem);
+ data.element.value = "";
+ if (!data.element.disabled) {
+ handleLimit(elementId);
+ }
+ let values = syncShadow(data);
+ if (typeof data.options.callbackChange === "function") {
+ if (values === null) {
+ values = getValues(elementId);
}
- },
- /**
- * Splits comma-separated values being pasted into the input field.
- *
- * @param {Event} event
- * @protected
- */
- _paste: function (event) {
- var text = '';
- if (typeof window.clipboardData === 'object') {
- // IE11
- text = window.clipboardData.getData('Text');
+ data.options.callbackChange(elementId, values);
+ }
+ }
+ /**
+ * Removes an item from the list.
+ */
+ function removeItem(item, noFocus) {
+ if (item instanceof Event) {
+ item = item.currentTarget.parentElement;
+ }
+ const parent = item.parentElement;
+ const elementId = parent.dataset.elementId;
+ const data = _data.get(elementId);
+ item.remove();
+ if (!noFocus) {
+ data.element.focus();
+ }
+ handleLimit(elementId);
+ let values = syncShadow(data);
+ if (typeof data.options.callbackChange === "function") {
+ if (values === null) {
+ values = getValues(elementId);
}
- else {
- text = event.clipboardData.getData('text/plain');
+ data.options.callbackChange(elementId, values);
+ }
+ }
+ /**
+ * Synchronizes the shadow input field with the current list item values.
+ */
+ function syncShadow(data) {
+ if (!data.options.isCSV) {
+ return null;
+ }
+ const values = getValues(data.element.id);
+ data.shadow.value = values.map((v) => v.value).join(",");
+ return values;
+ }
+ /**
+ * Handles the blur event.
+ */
+ function blur(event) {
+ const input = event.currentTarget;
+ window.setTimeout(() => {
+ const value = input.value.trim();
+ if (value.length) {
+ addItem(input.id, { objectId: 0, value: value });
}
- text.split(/,/).forEach((function (item) {
- item = item.trim();
- if (item.length !== 0) {
- this._addItem(event.currentTarget.id, { objectId: 0, value: item });
+ }, 100);
+ }
+ /**
+ * Initializes an item list.
+ *
+ * The `values` argument must be empty or contain a list of strings or object, e.g.
+ * `['foo', 'bar']` or `[{ objectId: 1337, value: 'baz'}, {...}]`
+ */
+ function init(elementId, values, opts) {
+ const element = document.getElementById(elementId);
+ if (element === null) {
+ throw new Error("Expected a valid element id, '" + elementId + "' is invalid.");
+ }
+ // remove data from previous instance
+ if (_data.has(elementId)) {
+ const tmp = _data.get(elementId);
+ Object.values(tmp).forEach((value) => {
+ if (value instanceof HTMLElement && value.parentElement) {
+ value.remove();
}
- }).bind(this));
- event.preventDefault();
- },
- /**
- * Handles the keyup event to unmark an item for deletion.
- *
- * @param {object} event event object
- */
- _keyUp: function (event) {
- var input = event.currentTarget;
- if (input.value.length > 0) {
- var lastItem = input.parentNode.previousElementSibling;
- if (lastItem !== null) {
- lastItem.classList.remove('active');
+ });
+ Simple_1.default.destroy(elementId);
+ _data.delete(elementId);
+ }
+ const options = Core.extend({
+ // maximum number of items this list may contain, `-1` for infinite
+ maxItems: -1,
+ // maximum length of an item value, `-1` for infinite
+ maxLength: -1,
+ // initial value will be interpreted as comma separated value and submitted as such
+ isCSV: false,
+ // will be invoked whenever the items change, receives the element id first and list of values second
+ callbackChange: null,
+ // callback once the form is about to be submitted
+ callbackSubmit: null,
+ // value may contain the placeholder `{$objectId}`
+ submitFieldName: "",
+ }, opts);
+ const form = DomTraverse.parentByTag(element, "FORM");
+ if (form !== null) {
+ if (!options.isCSV) {
+ if (!options.submitFieldName.length && typeof options.callbackSubmit !== "function") {
+ throw new Error("Expected a valid function for option 'callbackSubmit', a non-empty value for option 'submitFieldName' or enabling the option 'submitFieldCSV'.");
}
+ form.addEventListener("submit", () => {
+ const values = getValues(elementId);
+ if (options.submitFieldName.length) {
+ values.forEach((value) => {
+ const input = document.createElement("input");
+ input.type = "hidden";
+ input.name = options.submitFieldName.replace("{$objectId}", value.objectId.toString());
+ input.value = value.value;
+ form.appendChild(input);
+ });
+ }
+ else {
+ options.callbackSubmit(form, values);
+ }
+ });
}
- },
- /**
- * Adds an item to the list.
- *
- * @param {string} elementId input element id
- * @param {object} value item value
- * @param {?boolean} forceRemoveIcon if `true`, the icon to remove the item will be added in every case
- */
- _addItem: function (elementId, value, forceRemoveIcon) {
- var data = _data.get(elementId);
- var listItem = elCreate('li');
- listItem.className = 'item';
- var content = elCreate('span');
- content.className = 'content';
- elData(content, 'object-id', value.objectId);
- content.textContent = value.value;
- listItem.appendChild(content);
- if (forceRemoveIcon || !data.element.disabled) {
- var button = elCreate('a');
- button.className = 'icon icon16 fa-times';
- button.addEventListener('click', _callbackRemoveItem);
- listItem.appendChild(button);
- }
- data.list.insertBefore(listItem, data.listItem);
- data.element.value = '';
- if (!data.element.disabled) {
- this._handleLimit(elementId);
- }
- var values = this._syncShadow(data);
- if (typeof data.options.callbackChange === 'function') {
- if (values === null)
- values = this.getValues(elementId);
- data.options.callbackChange(elementId, values);
- }
- },
- /**
- * Removes an item from the list.
- *
- * @param {?object} event event object
- * @param {Element?} item list item
- * @param {boolean?} noFocus input element will not be focused if true
- */
- _removeItem: function (event, item, noFocus) {
- item = (event === null) ? item : event.currentTarget.parentNode;
- var parent = item.parentNode;
- //noinspection JSCheckFunctionSignatures
- var elementId = elData(parent, 'element-id');
- var data = _data.get(elementId);
- parent.removeChild(item);
- if (!noFocus)
- data.element.focus();
- this._handleLimit(elementId);
- var values = this._syncShadow(data);
- if (typeof data.options.callbackChange === 'function') {
- if (values === null)
- values = this.getValues(elementId);
- data.options.callbackChange(elementId, values);
- }
- },
- /**
- * Synchronizes the shadow input field with the current list item values.
- *
- * @param {object} data element data
- */
- _syncShadow: function (data) {
- if (!data.options.isCSV)
- return null;
- var value = '', values = this.getValues(data.element.id);
- for (var i = 0, length = values.length; i < length; i++) {
- value += (value.length ? ',' : '') + values[i].value;
- }
- data.shadow.value = value;
- return values;
- },
- /**
- * Handles the blur event.
- *
- * @param {object} event event object
- */
- _blur: function (event) {
- var data = _data.get(event.currentTarget.id);
- var currentTarget = event.currentTarget;
- window.setTimeout(function () {
- var value = currentTarget.value.trim();
- if (value.length) {
- this._addItem(currentTarget.id, { objectId: 0, value: value });
+ }
+ const data = createUI(element, options);
+ _data.set(elementId, {
+ dropdownMenu: null,
+ element: data.element,
+ list: data.list,
+ listItem: data.element.parentElement,
+ options: options,
+ shadow: data.shadow,
+ });
+ values = data.values.length ? data.values : values;
+ if (Array.isArray(values)) {
+ const forceRemoveIcon = !data.element.disabled;
+ values.forEach((value) => {
+ if (typeof value === "string") {
+ value = { objectId: 0, value: value };
}
- }.bind(this), 100);
+ addItem(elementId, value, forceRemoveIcon);
+ });
+ }
+ }
+ exports.init = init;
+ /**
+ * Returns the list of current values.
+ */
+ function getValues(elementId) {
+ if (!_data.has(elementId)) {
+ throw new Error(`Element id '${elementId}' is unknown.`);
+ }
+ const data = _data.get(elementId);
+ const values = [];
+ data.list.querySelectorAll(".item > span").forEach((span) => {
+ values.push({
+ objectId: ~~span.dataset.objectId,
+ value: span.textContent,
+ });
+ });
+ return values;
+ }
+ exports.getValues = getValues;
+ /**
+ * Sets the list of current values.
+ */
+ function setValues(elementId, values) {
+ if (!_data.has(elementId)) {
+ throw new Error(`Element id '${elementId}' is unknown.`);
}
- };
+ const data = _data.get(elementId);
+ // remove all existing items first
+ const items = DomTraverse.childrenByClass(data.list, "item");
+ items.forEach((item) => removeItem(item, true));
+ // add new items
+ values.forEach((v) => addItem(elementId, v));
+ }
+ exports.setValues = setValues;
});
+++ /dev/null
-/**
- * Flexible UI element featuring both a list of items and an input field.
- *
- * @author Alexander Ebert, Matthias Schmidt
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Ui/ItemList/Static
- */
-define(['Core', 'Dictionary', 'Language', 'Dom/Traverse', 'EventKey', 'Ui/SimpleDropdown'], function(Core, Dictionary, Language, DomTraverse, EventKey, UiSimpleDropdown) {
- "use strict";
-
- var _activeId = '';
- var _data = new Dictionary();
- var _didInit = false;
-
- var _callbackKeyDown = null;
- var _callbackKeyPress = null;
- var _callbackKeyUp = null;
- var _callbackPaste = null;
- var _callbackRemoveItem = null;
- var _callbackBlur = null;
-
- /**
- * @exports WoltLabSuite/Core/Ui/ItemList/Static
- */
- return {
- /**
- * Initializes an item list.
- *
- * The `values` argument must be empty or contain a list of strings or object, e.g.
- * `['foo', 'bar']` or `[{ objectId: 1337, value: 'baz'}, {...}]`
- *
- * @param {string} elementId input element id
- * @param {Array} values list of existing values
- * @param {Object} options option list
- */
- init: function(elementId, values, options) {
- var element = elById(elementId);
- if (element === null) {
- throw new Error("Expected a valid element id, '" + elementId + "' is invalid.");
- }
-
- // remove data from previous instance
- if (_data.has(elementId)) {
- var tmp = _data.get(elementId);
-
- for (var key in tmp) {
- if (tmp.hasOwnProperty(key)) {
- var el = tmp[key];
- if (el instanceof Element && el.parentNode) {
- elRemove(el);
- }
- }
- }
-
- UiSimpleDropdown.destroy(elementId);
- _data.delete(elementId);
- }
-
- options = Core.extend({
- // maximum number of items this list may contain, `-1` for infinite
- maxItems: -1,
- // maximum length of an item value, `-1` for infinite
- maxLength: -1,
-
- // initial value will be interpreted as comma separated value and submitted as such
- isCSV: false,
-
- // will be invoked whenever the items change, receives the element id first and list of values second
- callbackChange: null,
- // callback once the form is about to be submitted
- callbackSubmit: null,
- // value may contain the placeholder `{$objectId}`
- submitFieldName: ''
- }, options);
-
- var form = DomTraverse.parentByTag(element, 'FORM');
- if (form !== null) {
- if (options.isCSV === false) {
- if (!options.submitFieldName.length && typeof options.callbackSubmit !== 'function') {
- throw new Error("Expected a valid function for option 'callbackSubmit', a non-empty value for option 'submitFieldName' or enabling the option 'submitFieldCSV'.");
- }
-
- form.addEventListener('submit', (function() {
- var values = this.getValues(elementId);
- if (options.submitFieldName.length) {
- var input;
- for (var i = 0, length = values.length; i < length; i++) {
- input = elCreate('input');
- input.type = 'hidden';
- input.name = options.submitFieldName.replace('{$objectId}', values[i].objectId);
- input.value = values[i].value;
-
- form.appendChild(input);
- }
- }
- else {
- options.callbackSubmit(form, values);
- }
- }).bind(this));
- }
- }
-
- this._setup();
-
- var data = this._createUI(element, options);
- _data.set(elementId, {
- dropdownMenu: null,
- element: data.element,
- list: data.list,
- listItem: data.element.parentNode,
- options: options,
- shadow: data.shadow
- });
-
- values = (data.values.length) ? data.values : values;
- if (Array.isArray(values)) {
- var value;
- var forceRemoveIcon = !data.element.disabled;
- for (var i = 0, length = values.length; i < length; i++) {
- value = values[i];
- if (typeof value === 'string') {
- value = { objectId: 0, value: value };
- }
-
- this._addItem(elementId, value, forceRemoveIcon);
- }
- }
- },
-
- /**
- * Returns the list of current values.
- *
- * @param {string} elementId input element id
- * @return {Array} list of objects containing object id and value
- */
- getValues: function(elementId) {
- if (!_data.has(elementId)) {
- throw new Error("Element id '" + elementId + "' is unknown.");
- }
-
- var data = _data.get(elementId);
- var values = [];
- elBySelAll('.item > span', data.list, function(span) {
- values.push({
- objectId: ~~elData(span, 'object-id'),
- value: span.textContent
- });
- });
-
- return values;
- },
-
- /**
- * Sets the list of current values.
- *
- * @param {string} elementId input element id
- * @param {Array} values list of objects containing object id and value
- */
- setValues: function(elementId, values) {
- if (!_data.has(elementId)) {
- throw new Error("Element id '" + elementId + "' is unknown.");
- }
-
- var data = _data.get(elementId);
-
- // remove all existing items first
- var i, length;
- var items = DomTraverse.childrenByClass(data.list, 'item');
- for (i = 0, length = items.length; i < length; i++) {
- this._removeItem(null, items[i], true);
- }
-
- // add new items
- for (i = 0, length = values.length; i < length; i++) {
- this._addItem(elementId, values[i]);
- }
- },
-
- /**
- * Binds static event listeners.
- */
- _setup: function() {
- if (_didInit) {
- return;
- }
-
- _didInit = true;
-
- _callbackKeyDown = this._keyDown.bind(this);
- _callbackKeyPress = this._keyPress.bind(this);
- _callbackKeyUp = this._keyUp.bind(this);
- _callbackPaste = this._paste.bind(this);
- _callbackRemoveItem = this._removeItem.bind(this);
- _callbackBlur = this._blur.bind(this);
- },
-
- /**
- * Creates the DOM structure for target element. If `element` is a `<textarea>`
- * it will be automatically replaced with an `<input>` element.
- *
- * @param {Element} element input element
- * @param {Object} options option list
- */
- _createUI: function(element, options) {
- var list = elCreate('ol');
- list.className = 'inputItemList' + (element.disabled ? ' disabled' : '');
- elData(list, 'element-id', element.id);
- list.addEventListener('click', function(event) {
- if (event.target === list) {
- //noinspection JSUnresolvedFunction
- element.focus();
- }
- });
-
- var listItem = elCreate('li');
- listItem.className = 'input';
- list.appendChild(listItem);
-
- element.addEventListener('keydown', _callbackKeyDown);
- element.addEventListener('keypress', _callbackKeyPress);
- element.addEventListener('keyup', _callbackKeyUp);
- element.addEventListener('paste', _callbackPaste);
- element.addEventListener('blur', _callbackBlur);
-
- element.parentNode.insertBefore(list, element);
- listItem.appendChild(element);
-
- if (options.maxLength !== -1) {
- elAttr(element, 'maxLength', options.maxLength);
- }
-
- var shadow = null, values = [];
- if (options.isCSV) {
- shadow = elCreate('input');
- shadow.className = 'itemListInputShadow';
- shadow.type = 'hidden';
- //noinspection JSUnresolvedVariable
- shadow.name = element.name;
- element.removeAttribute('name');
-
- list.parentNode.insertBefore(shadow, list);
-
- //noinspection JSUnresolvedVariable
- var value, tmp = element.value.split(',');
- for (var i = 0, length = tmp.length; i < length; i++) {
- value = tmp[i].trim();
- if (value.length) {
- values.push(value);
- }
- }
-
- if (element.nodeName === 'TEXTAREA') {
- var inputElement = elCreate('input');
- inputElement.type = 'text';
- element.parentNode.insertBefore(inputElement, element);
- inputElement.id = element.id;
-
- elRemove(element);
- element = inputElement;
- }
- }
-
- return {
- element: element,
- list: list,
- shadow: shadow,
- values: values
- };
- },
-
- /**
- * Enforces the maximum number of items.
- *
- * @param {string} elementId input element id
- */
- _handleLimit: function(elementId) {
- var data = _data.get(elementId);
- if (data.options.maxItems === -1) {
- return;
- }
-
- if (data.list.childElementCount - 1 < data.options.maxItems) {
- if (data.element.disabled) {
- data.element.disabled = false;
- data.element.removeAttribute('placeholder');
- }
- }
- else if (!data.element.disabled) {
- data.element.disabled = true;
- elAttr(data.element, 'placeholder', Language.get('wcf.global.form.input.maxItems'));
- }
- },
-
- /**
- * Sets the active item list id and handles keyboard access to remove an existing item.
- *
- * @param {object} event event object
- */
- _keyDown: function(event) {
- var input = event.currentTarget;
- var lastItem = input.parentNode.previousElementSibling;
-
- _activeId = input.id;
-
- if (event.keyCode === 8) {
- // 8 = [BACKSPACE]
- if (input.value.length === 0) {
- if (lastItem !== null) {
- if (lastItem.classList.contains('active')) {
- this._removeItem(null, lastItem);
- }
- else {
- lastItem.classList.add('active');
- }
- }
- }
- }
- else if (event.keyCode === 27) {
- // 27 = [ESC]
- if (lastItem !== null && lastItem.classList.contains('active')) {
- lastItem.classList.remove('active');
- }
- }
- },
-
- /**
- * Handles the `[ENTER]` and `[,]` key to add an item to the list.
- *
- * @param {Event} event event object
- */
- _keyPress: function(event) {
- if (EventKey.Enter(event) || EventKey.Comma(event)) {
- event.preventDefault();
-
- var value = event.currentTarget.value.trim();
- if (value.length) {
- this._addItem(event.currentTarget.id, { objectId: 0, value: value });
- }
- }
- },
-
- /**
- * Splits comma-separated values being pasted into the input field.
- *
- * @param {Event} event
- * @protected
- */
- _paste: function (event) {
- var text = '';
- if (typeof window.clipboardData === 'object') {
- // IE11
- text = window.clipboardData.getData('Text');
- }
- else {
- text = event.clipboardData.getData('text/plain');
- }
-
- text.split(/,/).forEach((function(item) {
- item = item.trim();
- if (item.length !== 0) {
- this._addItem(event.currentTarget.id, { objectId: 0, value: item });
- }
- }).bind(this));
-
- event.preventDefault();
- },
-
- /**
- * Handles the keyup event to unmark an item for deletion.
- *
- * @param {object} event event object
- */
- _keyUp: function(event) {
- var input = event.currentTarget;
-
- if (input.value.length > 0) {
- var lastItem = input.parentNode.previousElementSibling;
- if (lastItem !== null) {
- lastItem.classList.remove('active');
- }
- }
- },
-
- /**
- * Adds an item to the list.
- *
- * @param {string} elementId input element id
- * @param {object} value item value
- * @param {?boolean} forceRemoveIcon if `true`, the icon to remove the item will be added in every case
- */
- _addItem: function(elementId, value, forceRemoveIcon) {
- var data = _data.get(elementId);
-
- var listItem = elCreate('li');
- listItem.className = 'item';
-
- var content = elCreate('span');
- content.className = 'content';
- elData(content, 'object-id', value.objectId);
- content.textContent = value.value;
- listItem.appendChild(content);
-
- if (forceRemoveIcon || !data.element.disabled) {
- var button = elCreate('a');
- button.className = 'icon icon16 fa-times';
- button.addEventListener('click', _callbackRemoveItem);
- listItem.appendChild(button);
- }
-
- data.list.insertBefore(listItem, data.listItem);
- data.element.value = '';
-
- if (!data.element.disabled) {
- this._handleLimit(elementId);
- }
- var values = this._syncShadow(data);
-
- if (typeof data.options.callbackChange === 'function') {
- if (values === null) values = this.getValues(elementId);
- data.options.callbackChange(elementId, values);
- }
- },
-
- /**
- * Removes an item from the list.
- *
- * @param {?object} event event object
- * @param {Element?} item list item
- * @param {boolean?} noFocus input element will not be focused if true
- */
- _removeItem: function(event, item, noFocus) {
- item = (event === null) ? item : event.currentTarget.parentNode;
-
- var parent = item.parentNode;
- //noinspection JSCheckFunctionSignatures
- var elementId = elData(parent, 'element-id');
- var data = _data.get(elementId);
-
- parent.removeChild(item);
- if (!noFocus) data.element.focus();
-
- this._handleLimit(elementId);
- var values = this._syncShadow(data);
-
- if (typeof data.options.callbackChange === 'function') {
- if (values === null) values = this.getValues(elementId);
- data.options.callbackChange(elementId, values);
- }
- },
-
- /**
- * Synchronizes the shadow input field with the current list item values.
- *
- * @param {object} data element data
- */
- _syncShadow: function(data) {
- if (!data.options.isCSV) return null;
-
- var value = '', values = this.getValues(data.element.id);
- for (var i = 0, length = values.length; i < length; i++) {
- value += (value.length ? ',' : '') + values[i].value;
- }
-
- data.shadow.value = value;
-
- return values;
- },
-
- /**
- * Handles the blur event.
- *
- * @param {object} event event object
- */
- _blur: function(event) {
- var data = _data.get(event.currentTarget.id);
-
- var currentTarget = event.currentTarget;
- window.setTimeout(function() {
- var value = currentTarget.value.trim();
- if (value.length) {
- this._addItem(currentTarget.id, { objectId: 0, value: value });
- }
- }.bind(this), 100);
- }
- };
-});
--- /dev/null
+/**
+ * Flexible UI element featuring both a list of items and an input field.
+ *
+ * @author Alexander Ebert, Matthias Schmidt
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module WoltLabSuite/Core/Ui/ItemList/Static
+ */
+
+import * as Core from "../../Core";
+import * as DomTraverse from "../../Dom/Traverse";
+import * as Language from "../../Language";
+import UiDropdownSimple from "../Dropdown/Simple";
+
+export type CallbackChange = (elementId: string, values: ItemData[]) => void;
+export type CallbackSubmit = (form: HTMLFormElement, values: ItemData[]) => void;
+
+export interface ItemListStaticOptions {
+ maxItems: number;
+ maxLength: number;
+ isCSV: boolean;
+ callbackChange: CallbackChange | null;
+ callbackSubmit: CallbackSubmit | null;
+ submitFieldName: string;
+}
+
+type ItemListInputElement = HTMLInputElement | HTMLTextAreaElement;
+
+export interface ItemData {
+ objectId: number;
+ value: string;
+ type?: string;
+}
+
+type PlainValue = string;
+
+type ItemDataOrPlainValue = ItemData | PlainValue;
+
+interface UiData {
+ element: HTMLInputElement | HTMLTextAreaElement;
+ list: HTMLOListElement;
+ shadow?: HTMLInputElement;
+ values: string[];
+}
+
+interface ElementData {
+ dropdownMenu: HTMLElement | null;
+ element: ItemListInputElement;
+ list: HTMLOListElement;
+ listItem: HTMLElement;
+ options: ItemListStaticOptions;
+ shadow?: HTMLInputElement;
+}
+
+const _data = new Map<string, ElementData>();
+
+/**
+ * Creates the DOM structure for target element. If `element` is a `<textarea>`
+ * it will be automatically replaced with an `<input>` element.
+ */
+function createUI(element: ItemListInputElement, options: ItemListStaticOptions): UiData {
+ const list = document.createElement("ol");
+ list.className = "inputItemList" + (element.disabled ? " disabled" : "");
+ list.dataset.elementId = element.id;
+ list.addEventListener("click", (event) => {
+ if (event.target === list) {
+ element.focus();
+ }
+ });
+
+ const listItem = document.createElement("li");
+ listItem.className = "input";
+ list.appendChild(listItem);
+
+ element.addEventListener("keydown", (ev: KeyboardEvent) => keyDown(ev));
+ element.addEventListener("keypress", (ev: KeyboardEvent) => keyPress(ev));
+ element.addEventListener("keyup", (ev: KeyboardEvent) => keyUp(ev));
+ element.addEventListener("paste", (ev: ClipboardEvent) => paste(ev));
+ element.addEventListener("blur", (ev: FocusEvent) => blur(ev));
+
+ element.insertAdjacentElement("beforebegin", list);
+ listItem.appendChild(element);
+
+ if (options.maxLength !== -1) {
+ element.maxLength = options.maxLength;
+ }
+
+ let shadow: HTMLInputElement | undefined;
+ let values: string[] = [];
+ if (options.isCSV) {
+ shadow = document.createElement("input");
+ shadow.className = "itemListInputShadow";
+ shadow.type = "hidden";
+ shadow.name = element.name;
+ element.removeAttribute("name");
+
+ list.insertAdjacentElement("beforebegin", shadow);
+
+ values = element.value
+ .split(",")
+ .map((s) => s.trim())
+ .filter((s) => s.length > 0);
+
+ if (element.nodeName === "TEXTAREA") {
+ const inputElement = document.createElement("input");
+ inputElement.type = "text";
+ element.parentElement!.insertBefore(inputElement, element);
+ inputElement.id = element.id;
+
+ element.remove();
+ element = inputElement;
+ }
+ }
+
+ return {
+ element,
+ list,
+ shadow,
+ values,
+ };
+}
+
+/**
+ * Enforces the maximum number of items.
+ */
+function handleLimit(elementId: string): void {
+ const data = _data.get(elementId)!;
+ if (data.options.maxItems === -1) {
+ return;
+ }
+
+ if (data.list.childElementCount - 1 < data.options.maxItems) {
+ if (data.element.disabled) {
+ data.element.disabled = false;
+ data.element.removeAttribute("placeholder");
+ }
+ } else if (!data.element.disabled) {
+ data.element.disabled = true;
+ data.element.placeholder = Language.get("wcf.global.form.input.maxItems");
+ }
+}
+
+/**
+ * Sets the active item list id and handles keyboard access to remove an existing item.
+ */
+function keyDown(event: KeyboardEvent): void {
+ const input = event.currentTarget as HTMLInputElement;
+ const lastItem = input.parentElement!.previousElementSibling as HTMLElement;
+
+ if (event.key === "Backspace") {
+ if (input.value.length === 0) {
+ if (lastItem !== null) {
+ if (lastItem.classList.contains("active")) {
+ removeItem(lastItem);
+ } else {
+ lastItem.classList.add("active");
+ }
+ }
+ }
+ } else if (event.key === "Escape") {
+ if (lastItem !== null && lastItem.classList.contains("active")) {
+ lastItem.classList.remove("active");
+ }
+ }
+}
+
+/**
+ * Handles the `[ENTER]` and `[,]` key to add an item to the list.
+ */
+function keyPress(event: KeyboardEvent): void {
+ if (event.key === "Enter" || event.key === "Comma") {
+ event.preventDefault();
+
+ const input = event.currentTarget as HTMLInputElement;
+ const value = input.value.trim();
+ if (value.length) {
+ addItem(input.id, { objectId: 0, value: value });
+ }
+ }
+}
+
+/**
+ * Splits comma-separated values being pasted into the input field.
+ */
+function paste(event: ClipboardEvent): void {
+ const input = event.currentTarget as HTMLInputElement;
+
+ const text = event.clipboardData!.getData("text/plain");
+ text
+ .split(",")
+ .map((s) => s.trim())
+ .filter((s) => s.length > 0)
+ .forEach((s) => {
+ addItem(input.id, { objectId: 0, value: s });
+ });
+
+ event.preventDefault();
+}
+
+/**
+ * Handles the keyup event to unmark an item for deletion.
+ */
+function keyUp(event: KeyboardEvent): void {
+ const input = event.currentTarget as HTMLInputElement;
+
+ if (input.value.length > 0) {
+ const lastItem = input.parentElement!.previousElementSibling;
+ if (lastItem !== null) {
+ lastItem.classList.remove("active");
+ }
+ }
+}
+
+/**
+ * Adds an item to the list.
+ */
+function addItem(elementId: string, value: ItemData, forceRemoveIcon?: boolean): void {
+ const data = _data.get(elementId)!;
+
+ const listItem = document.createElement("li");
+ listItem.className = "item";
+
+ const content = document.createElement("span");
+ content.className = "content";
+ content.dataset.objectId = value.objectId.toString();
+ content.textContent = value.value;
+ listItem.appendChild(content);
+
+ if (forceRemoveIcon || !data.element.disabled) {
+ const button = document.createElement("a");
+ button.className = "icon icon16 fa-times";
+ button.addEventListener("click", (ev) => removeItem(ev));
+ listItem.appendChild(button);
+ }
+
+ data.list.insertBefore(listItem, data.listItem);
+ data.element.value = "";
+
+ if (!data.element.disabled) {
+ handleLimit(elementId);
+ }
+ let values = syncShadow(data);
+
+ if (typeof data.options.callbackChange === "function") {
+ if (values === null) {
+ values = getValues(elementId);
+ }
+ data.options.callbackChange(elementId, values);
+ }
+}
+
+/**
+ * Removes an item from the list.
+ */
+function removeItem(item: MouseEvent | HTMLElement, noFocus?: boolean): void {
+ if (item instanceof Event) {
+ item = (item.currentTarget as HTMLElement).parentElement as HTMLElement;
+ }
+
+ const parent = item.parentElement!;
+ const elementId = parent.dataset.elementId!;
+ const data = _data.get(elementId)!;
+
+ item.remove();
+ if (!noFocus) {
+ data.element.focus();
+ }
+
+ handleLimit(elementId);
+ let values = syncShadow(data);
+
+ if (typeof data.options.callbackChange === "function") {
+ if (values === null) {
+ values = getValues(elementId);
+ }
+ data.options.callbackChange(elementId, values);
+ }
+}
+
+/**
+ * Synchronizes the shadow input field with the current list item values.
+ */
+function syncShadow(data: ElementData): ItemData[] | null {
+ if (!data.options.isCSV) {
+ return null;
+ }
+
+ const values = getValues(data.element.id);
+
+ data.shadow!.value = values.map((v) => v.value).join(",");
+
+ return values;
+}
+
+/**
+ * Handles the blur event.
+ */
+function blur(event: FocusEvent): void {
+ const input = event.currentTarget as HTMLInputElement;
+
+ window.setTimeout(() => {
+ const value = input.value.trim();
+ if (value.length) {
+ addItem(input.id, { objectId: 0, value: value });
+ }
+ }, 100);
+}
+
+/**
+ * Initializes an item list.
+ *
+ * The `values` argument must be empty or contain a list of strings or object, e.g.
+ * `['foo', 'bar']` or `[{ objectId: 1337, value: 'baz'}, {...}]`
+ */
+export function init(elementId: string, values: ItemDataOrPlainValue[], opts: Partial<ItemListStaticOptions>): void {
+ const element = document.getElementById(elementId) as HTMLInputElement | HTMLTextAreaElement;
+ if (element === null) {
+ throw new Error("Expected a valid element id, '" + elementId + "' is invalid.");
+ }
+
+ // remove data from previous instance
+ if (_data.has(elementId)) {
+ const tmp = _data.get(elementId)!;
+
+ Object.values(tmp).forEach((value) => {
+ if (value instanceof HTMLElement && value.parentElement) {
+ value.remove();
+ }
+ });
+
+ UiDropdownSimple.destroy(elementId);
+ _data.delete(elementId);
+ }
+
+ const options = Core.extend(
+ {
+ // maximum number of items this list may contain, `-1` for infinite
+ maxItems: -1,
+ // maximum length of an item value, `-1` for infinite
+ maxLength: -1,
+
+ // initial value will be interpreted as comma separated value and submitted as such
+ isCSV: false,
+
+ // will be invoked whenever the items change, receives the element id first and list of values second
+ callbackChange: null,
+ // callback once the form is about to be submitted
+ callbackSubmit: null,
+ // value may contain the placeholder `{$objectId}`
+ submitFieldName: "",
+ },
+ opts
+ ) as ItemListStaticOptions;
+
+ const form = DomTraverse.parentByTag(element, "FORM") as HTMLFormElement;
+ if (form !== null) {
+ if (!options.isCSV) {
+ if (!options.submitFieldName.length && typeof options.callbackSubmit !== "function") {
+ throw new Error(
+ "Expected a valid function for option 'callbackSubmit', a non-empty value for option 'submitFieldName' or enabling the option 'submitFieldCSV'."
+ );
+ }
+
+ form.addEventListener("submit", () => {
+ const values = getValues(elementId);
+ if (options.submitFieldName.length) {
+ values.forEach((value) => {
+ const input = document.createElement("input");
+ input.type = "hidden";
+ input.name = options.submitFieldName.replace("{$objectId}", value.objectId.toString());
+ input.value = value.value;
+
+ form.appendChild(input);
+ });
+ } else {
+ options.callbackSubmit!(form, values);
+ }
+ });
+ }
+ }
+
+ const data = createUI(element, options);
+ _data.set(elementId, {
+ dropdownMenu: null,
+ element: data.element,
+ list: data.list,
+ listItem: data.element.parentElement!,
+ options: options,
+ shadow: data.shadow,
+ });
+
+ values = data.values.length ? data.values : values;
+ if (Array.isArray(values)) {
+ const forceRemoveIcon = !data.element.disabled;
+
+ values.forEach((value) => {
+ if (typeof value === "string") {
+ value = { objectId: 0, value: value };
+ }
+
+ addItem(elementId, value, forceRemoveIcon);
+ });
+ }
+}
+
+/**
+ * Returns the list of current values.
+ */
+export function getValues(elementId: string): ItemData[] {
+ if (!_data.has(elementId)) {
+ throw new Error(`Element id '${elementId}' is unknown.`);
+ }
+
+ const data = _data.get(elementId)!;
+
+ const values: ItemData[] = [];
+ data.list.querySelectorAll(".item > span").forEach((span: HTMLElement) => {
+ values.push({
+ objectId: ~~span.dataset.objectId!,
+ value: span.textContent!,
+ });
+ });
+
+ return values;
+}
+
+/**
+ * Sets the list of current values.
+ */
+export function setValues(elementId: string, values: ItemData[]): void {
+ if (!_data.has(elementId)) {
+ throw new Error(`Element id '${elementId}' is unknown.`);
+ }
+
+ const data = _data.get(elementId)!;
+
+ // remove all existing items first
+ const items = DomTraverse.childrenByClass(data.list, "item");
+ items.forEach((item: HTMLElement) => removeItem(item, true));
+
+ // add new items
+ values.forEach((v) => addItem(elementId, v));
+}
projects / GitHub / WoltLab / WCF.git / commitdiff