diff options
Diffstat (limited to 'static/components/input-list.ts')
-rw-r--r-- | static/components/input-list.ts | 120 |
1 files changed, 0 insertions, 120 deletions
diff --git a/static/components/input-list.ts b/static/components/input-list.ts deleted file mode 100644 index 0afd4999..00000000 --- a/static/components/input-list.ts +++ /dev/null @@ -1,120 +0,0 @@ -export { InputList } - -/* - TODO allow each item to be a larger unit, possibly containing multiple input - fields. -*/ -class InputList extends HTMLElement { - - el: HTMLInputElement; - - #listeners: [string, (e: Event) => void][] = []; - - constructor() { - super(); - this.el = this.children[0].cloneNode(true) as HTMLInputElement; - } - - connectedCallback() { - for (let child of this.children) { - child.remove(); - } - this.addInstance(); - } - - createInstance(): HTMLInputElement { - let new_el = this.el.cloneNode(true) as HTMLInputElement - let that = this; - new_el.addEventListener('input', function() { - /* TODO .value is empty both if it's actually empty, but also - for invalid input. Check new_el.validity, and new_el.validationMessage - */ - if (new_el.value === '') { - let sibling = (this.previousElementSibling || this.nextElementSibling) - /* Only remove ourselves if we have siblings - Otherwise we just linger */ - if (sibling) { - this.remove(); - (sibling as HTMLInputElement).focus(); - } - } else { - if (!this.nextElementSibling) { - that.addInstance(); - // window.setTimeout(() => this.focus()) - this.focus(); - } - } - }); - - for (let [type, proc] of this.#listeners) { - new_el.addEventListener(type, proc); - } - - return new_el; - } - - addInstance() { - let new_el = this.createInstance(); - this.appendChild(new_el); - } - - get value(): any[] { - let value_list = [] - for (let child of this.children) { - value_list.push((child as any).value); - } - if (value_list[value_list.length - 1] === '') { - value_list.pop(); - } - return value_list - } - - set value(new_value: any[]) { - - let all_equal = true; - for (let i = 0; i < this.children.length; i++) { - let sv = (this.children[i] as any).value - all_equal - &&= (sv == new_value[i]) - || (sv === '' && new_value[i] == undefined) - } - if (all_equal) return; - - /* Copy our current input elements into a dictionary. - This allows us to only create new elements where needed - */ - let values = new Map; - for (let child of this.children) { - values.set((child as HTMLInputElement).value, child); - } - - let output_list: HTMLInputElement[] = [] - for (let value of new_value) { - let element; - /* Only create element if needed */ - if ((element = values.get(value))) { - output_list.push(element) - /* clear dictionary */ - values.set(value, false); - } else { - let new_el = this.createInstance(); - new_el.value = value; - output_list.push(new_el); - } - } - /* final, trailing, element */ - output_list.push(this.createInstance()); - - this.replaceChildren(...output_list); - } - - addEventListener(type: string, proc: ((e: Event) => void)) { - // if (type != 'input') throw "Only input supported"; - - this.#listeners.push([type, proc]) - - for (let child of this.children) { - child.addEventListener(type, proc); - } - } -} |