Cleanup and move input_list to own file.

4 files changed, 89 insertions, 91 deletions

diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index abf43118..0e90e5d4 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -106,6 +106,7 @@
 
     (script (@ (defer) (src "/static/types.js")))
     (script (@ (defer) (src "/static/lib.js")))
+    (script (@ (defer) (src "/static/input_list.js")))
     (script (@ (defer) (src "/static/script.js")))
     ,(calendar-styles calendars))
 
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;
+    }
+}
diff --git a/static/lib.js b/static/lib.js
index 46236411..ab279353 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -12,6 +12,16 @@ HTMLElement.prototype.addEventListener = function (name, proc) {
 };
 
 
+
+/* list of lists -> list of tuples */
+function zip(...args) {
+    // console.log(args);
+    if (args === []) return [];
+    return [...Array(Math.min(...args.map(x => x.length))).keys()]
+        .map((_, i) => args.map(lst => lst[i]));
+}
+
+
 /* ----- Date Extensions ---------------------------- */
 
 /*
diff --git a/static/script.js b/static/script.js
index 5af632fd..e55780f6 100644
--- a/static/script.js
+++ b/static/script.js
@@ -337,16 +337,6 @@ async function create_event (event) {
     toggle_popup("popup" + event.id);
 }
 
-
-/* list of lists -> list of tuples */
-function zip(...args) {
-    // console.log(args);
-    if (args === []) return [];
-    return [...Array(Math.min(...args.map(x => x.length))).keys()]
-        .map((_, i) => args.map(lst => lst[i]));
-}
-
-
 /* This incarnation of this function only adds the calendar switcher dropdown.
    All events are already editable by switching to that tab.
 
@@ -499,12 +489,6 @@ window.onload = function () {
     serializer.serializeToString(xml);
     */
 
-    /*
-    for (let el of document.querySelectorAll(".input-list input")) {
-        el.oninput = update_inline_list;
-    }
-    */
-
 
     for (let el of document.getElementsByClassName("newfield")) {
         let [name, type_selector, value_field] = el.children;
@@ -662,21 +646,7 @@ window.onload = function () {
 
 
 
-    /** Set up 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;
-    }
+    init_input_list();
 
 }
 
@@ -989,64 +959,4 @@ function bind_properties (el, wide_event=false) {
 
 
     /* ---------- Calendar ------------------------------ */
-
-
-}
-
-/*
-  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();
-        }
-    }
 }