diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-19 16:43:12 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-11-19 16:44:02 +0100 |
commit | e1a05a727f91622bfcf2c7c9025592c51f1abd20 (patch) | |
tree | 466d63ef0bed79e50c636f34406a18aeb3ae9fd5 /static/components | |
parent | vevent-dl formats rrules. (diff) | |
download | calp-e1a05a727f91622bfcf2c7c9025592c51f1abd20.tar.gz calp-e1a05a727f91622bfcf2c7c9025592c51f1abd20.tar.xz |
Add input-list custom element.
Diffstat (limited to '')
-rw-r--r-- | static/components/input-list.ts | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/static/components/input-list.ts b/static/components/input-list.ts new file mode 100644 index 00000000..326cb2b5 --- /dev/null +++ b/static/components/input-list.ts @@ -0,0 +1,59 @@ +export { InputList } + +/* This file replaces input_list.js */ + +class InputList extends HTMLElement { + + el: HTMLInputElement; + + values: [HTMLInputElement, any][] = []; + + constructor() { + super(); + this.el = this.children[0].cloneNode(true) as HTMLInputElement; + } + + connectedCallback() { + this.addInstance(); + } + + addInstance() { + let new_el = this.el.cloneNode(true) as HTMLInputElement + let that = this; + new_el.addEventListener('input', function() { + if (new_el.value === '') { + let sibling = this.previousElementSibling || this.nextElementSibling; + // this.remove(); + // that.values = that.values.filter((p) => p[0] == this) + that.values = that.values.filter((p) => p[0] != this); + this.remove(); + (sibling as HTMLInputElement).focus(); + } else { + if (!this.nextElementSibling) { + that.addInstance(); + // window.setTimeout(() => this.focus()) + this.focus(); + } + } + }); + this.values.push([new_el, '']) + // this.appendChild(new_el); + this.replaceChildren(... this.values.map((p) => p[0])) + } + + get value(): any[] { + return [] + } + + set value(new_value: any[]) { + let els = []; + for (let value of new_value) { + let new_el = this.el.cloneNode() as HTMLInputElement; + new_el.value = value; + els.push(new_el); + } + /* Final element (empty) */ + els.push(this.el.cloneNode() as HTMLInputElement); + this.replaceChildren(...els); + } +} |