123 lines
2.7 KiB
JavaScript
123 lines
2.7 KiB
JavaScript
(function(window) {
|
|
"use strict";
|
|
|
|
window.ls.container.get("view").add({
|
|
selector: "data-forms-tags",
|
|
controller: function(element) {
|
|
let array = [];
|
|
let tags = window.document.createElement("div");
|
|
let preview = window.document.createElement("ul");
|
|
let add = window.document.createElement("input");
|
|
|
|
let listen = function(event) {
|
|
if (
|
|
(event.key === "Enter" || event.key === " " || event.key === "Tab") &&
|
|
add.value.length > 0
|
|
) {
|
|
array.push(add.value);
|
|
|
|
add.value = "";
|
|
|
|
element.value = JSON.stringify(array);
|
|
|
|
check();
|
|
|
|
if(event.key !== "Tab") { // Don't lock accessibility
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
if (
|
|
(event.key === "Backspace" || event.key === "Delete") &&
|
|
add.value === ""
|
|
) {
|
|
array.splice(-1, 1);
|
|
|
|
element.value = JSON.stringify(array);
|
|
|
|
check();
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
let check = function() {
|
|
try {
|
|
array = JSON.parse(element.value) || [];
|
|
} catch (error) {
|
|
array = [];
|
|
}
|
|
|
|
if (!Array.isArray(array)) {
|
|
array = [];
|
|
}
|
|
|
|
preview.innerHTML = "";
|
|
|
|
for (let index = 0; index < array.length; index++) {
|
|
let value = array[index];
|
|
let tag = window.document.createElement("li");
|
|
|
|
if(!value || value === ' ') {
|
|
continue;
|
|
}
|
|
|
|
tag.className = "tag";
|
|
tag.textContent = value;
|
|
|
|
tag.addEventListener("click", function() {
|
|
array.splice(index, 1);
|
|
|
|
element.value = JSON.stringify(array);
|
|
|
|
check();
|
|
});
|
|
|
|
preview.appendChild(tag);
|
|
}
|
|
|
|
if (element.required && array.length === 0) {
|
|
add.setCustomValidity("Please add permissions");
|
|
} else {
|
|
add.setCustomValidity("");
|
|
}
|
|
};
|
|
|
|
tags.className = "tags";
|
|
|
|
preview.className = "tags-list";
|
|
|
|
add.type = "text";
|
|
add.className = "add";
|
|
add.placeholder = element.placeholder;
|
|
|
|
//add.required = element.required;
|
|
|
|
tags.addEventListener("click", function() {
|
|
add.focus();
|
|
});
|
|
|
|
add.addEventListener("keydown", listen);
|
|
add.addEventListener("blur", function(event) {
|
|
if(add.value !== '') {
|
|
array.push(add.value);
|
|
|
|
add.value = "";
|
|
|
|
element.value = JSON.stringify(array);
|
|
|
|
check();
|
|
}
|
|
});
|
|
|
|
tags.appendChild(preview);
|
|
tags.appendChild(add);
|
|
|
|
element.parentNode.insertBefore(tags, element);
|
|
|
|
element.addEventListener("change", check);
|
|
|
|
check();
|
|
}
|
|
});
|
|
})(window);
|