diff options
Diffstat (limited to 'static/input_list.js')
-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..b15162d6 --- /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, ...old_unit.querySelectorAll("*")], + [new_unit, ...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')) { + + for (let el of lst.getElementsByTagName('input')) { + el.addEventListener('input', update_inline_list); + } + + let oldUnit = lst.querySelector('.final.unit') + let unit = oldUnit.cloneNode(true); + + transferListeners(oldUnit, unit); + + lst.unit = unit; + } +} |