blob: df1c8fe488613189d8fb01e1cbd24f1b473c44e6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
"use strict";
(() => {
const outerContainer = document.querySelector("div.tag-input-container");
const rawInput = document.createElement("input");
const name = outerContainer.querySelector("span#tags-input-name-span").innerText;
rawInput.setAttribute("type", "hidden");
rawInput.setAttribute("name", name);
outerContainer.appendChild(rawInput);
function parseSpaceSeparatedTags(inp) {
const tags = new Set();
let tag = ""
let escaped = false;
for (const c of inp) {
switch (c) {
case "\\":
if (!escaped) {
escaped = true;
continue;
}
case " ":
if (!escaped) {
tags.add(tag);
tag = "";
continue;
}
}
escaped = false;
tag += c;
}
if (tag) {
tags.add(tag);
}
return Array.from(tags).sort((a, b) => a.localeCompare(b));
}
const dynamicInputContainer = document.createElement("span");
function createDynamicInput() {
const dynamicInput = document.createElement("input");
dynamicInput.setAttribute("class", "dynamic-tag-input");
// So autocomplete will work
dynamicInput.setAttribute("name", "dynamic_tag_input");
dynamicInput.addEventListener("input", handleInput);
return dynamicInput;
};
function handleInput(e) {
const sources = document.querySelectorAll("input.dynamic-tag-input");
const lastDynamicInput = sources[sources.length - 1];
if (e.currentTarget === lastDynamicInput && e.currentTarget.value) {
dynamicInputContainer.appendChild(createDynamicInput());
} else if (e.currentTarget === sources[sources.length - 2] && !e.currentTarget.value) {
dynamicInputContainer.removeChild(lastDynamicInput);
}
let serialised = "";
for (const [i, source] of sources.entries()) {
const tag = source.value;
if (!tag) { continue; }
if (i > 0) {
serialised += " ";
}
serialised += tag.replaceAll("\\", "\\\\").replaceAll(" ", "\\ ");
}
rawInput.value = serialised;
};
const firstDynamicInput = createDynamicInput();
firstDynamicInput.setAttribute("id", "tags-input");
dynamicInputContainer.appendChild(firstDynamicInput);
const initialValue = outerContainer.querySelector("span#tags-input-initial-value-span").innerText;
if (initialValue) {
const tags = parseSpaceSeparatedTags(initialValue);
let input = dynamicInputContainer.querySelector("input.dynamic-tag-input:last-of-type");
for (const tag of tags) {
input.value = tag;
input = createDynamicInput();
dynamicInputContainer.appendChild(input);
}
}
outerContainer.appendChild(dynamicInputContainer);
})();
|
