Cleanup and move input_list to own file.

1 files changed, 77 insertions, 0 deletions

diff --git a/static/input_list.js b/static/input_list.js
new file mode 100644
index 00000000..642d9ade
--- /dev/null
+++ b/static/input_list.js
@@ -0,0 +1,77 @@
+/*
+  TODO document 'input-list'.
+
+  ∀ children('.input-list') => 'unit' ∈ classList(child)
+
+  <div class="input-list">
+    <div class="unit"><input/></div>
+    <div class="unit final"><input/></div>
+  </div>
+
+*/
+
+
+function transferListeners(old_unit, new_unit) {
+    for (let [o, n] of zip(old_unit.querySelectorAll("*"),
+                           new_unit.querySelectorAll("*"))) {
+        for (const key in o.listeners) {
+            if (! o.listeners.hasOwnProperty(key)) continue;
+            for (let proc of o.listeners[key]) {
+                n.addEventListener(key, proc);
+            }
+        }
+    }
+}
+
+
+function advance_final(input_list) {
+    let old_unit = input_list.unit;
+    let new_unit = old_unit.cloneNode(true);
+    new_unit.classList.add('final');
+    transferListeners(old_unit, new_unit);
+    input_list.appendChild(new_unit);
+}
+
+
+
+function update_inline_list () {
+
+    /* can target self */
+    let unit = this.closest('.unit');
+
+    let lst = this.closest('.input-list');
+
+    if (unit.classList.contains("final")) {
+        if (this.value !== '') {
+            unit.classList.remove('final');
+            advance_final(lst);
+        }
+    } else {
+        /* TODO all significant fields empty, instead of just current */
+        if (this.value === '') {
+            let sibling = unit.previousElementSibling || unit.nextElementSibling;
+            unit.remove();
+            if (sibling.tagName !== 'input')
+                sibling = sibling.querySelector('input');
+            sibling.focus();
+        }
+    }
+}
+
+/* run this from window.onload (or similar) */
+function init_input_list() {
+
+    for (let lst of document.getElementsByClassName('input-list')) {
+        let oldUnit = lst.querySelector('.final.unit')
+
+        for (let el of lst.getElementsByTagName('input')) {
+            el.addEventListener('input', update_inline_list);
+        }
+
+        let unit = oldUnit.cloneNode(true);
+
+        transferListeners(oldUnit, unit);
+
+        lst.unit = unit;
+    }
+}