From ffca898a875caa66156b8525d517b87c9b9f5327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 26 Oct 2020 18:14:42 +0100 Subject: Cleanup and move input_list to own file. --- static/input_list.js | 77 +++++++++++++++++++++++++++++++++++++++++++ static/lib.js | 10 ++++++ static/script.js | 92 +--------------------------------------------------- 3 files changed, 88 insertions(+), 91 deletions(-) create mode 100644 static/input_list.js (limited to 'static') 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) + +
+
+
+
+ +*/ + + +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) - -
-
-
-
- -*/ - - -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(); - } - } } -- cgit v1.2.3