diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-10-26 18:14:42 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-10-26 18:14:42 +0100 |
commit | ffca898a875caa66156b8525d517b87c9b9f5327 (patch) | |
tree | a48f74cc1a497c6b6a8a5edb93411d7399317659 /static/input_list.js | |
parent | Fields for extra properties update correctly! (diff) | |
download | calp-ffca898a875caa66156b8525d517b87c9b9f5327.tar.gz calp-ffca898a875caa66156b8525d517b87c9b9f5327.tar.xz |
Cleanup and move input_list to own file.
Diffstat (limited to '')
-rw-r--r-- | static/input_list.js | 77 |
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; + } +} |