From e1a05a727f91622bfcf2c7c9025592c51f1abd20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Fri, 19 Nov 2021 16:43:12 +0100
Subject: Add input-list custom element.

---
 static/components/input-list.ts | 59 +++++++++++++++++++++++++++++++++++++++++
 static/elements.ts              |  2 ++
 2 files changed, 61 insertions(+)
 create mode 100644 static/components/input-list.ts

(limited to 'static')

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);
+    }
+}
diff --git a/static/elements.ts b/static/elements.ts
index 06e0e31f..720f8abb 100644
--- a/static/elements.ts
+++ b/static/elements.ts
@@ -5,6 +5,7 @@ import { ComponentBlock } from './components/vevent-block'
 import { DateTimeInput } from './components/date-time-input'
 import { PopupElement } from './components/popup-element'
 import { TabElement } from './components/tab-element'
+import { InputList } from './components/input-list'
 
 export { initialize_components }
 
@@ -23,6 +24,7 @@ function initialize_components() {
     becouse why not */
 
     customElements.define('date-time-input', DateTimeInput /*, { extends: 'input' } */)
+    customElements.define('input-list', InputList);
 
     /* These maybe also require that the global maps are initialized */
     customElements.define('popup-element', PopupElement)
-- 
cgit v1.2.3