li7y/static/app.js

// SPDX-FileCopyrightText: 2024 Simon Bruder <simon@sbruder.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later

(() => {
  // Allows a form checkbox to toggle an input element.
  // This requires the form to have a structure like described in the bootstrap documentation:
  // https://getbootstrap.com/docs/5.3/forms/input-group/#checkboxes-and-radios
  const inputToggle = target => {
    target.parentElement.parentElement.querySelector("input:not(.input-toggle)").disabled = !target.checked
  }
  Array.from(document.getElementsByClassName("input-toggle")).forEach(el => {
    inputToggle(el)
    el.addEventListener("change", e => inputToggle(e.target))
  })

  const datalistHint = (input, hint) => {
    const selected = input.list.querySelector(`option[value="${input.value}"]`);
    if (selected === null)
      hint.innerText = ""
    else {
      hint.innerHTML = selected.innerHTML
    }
  }
  Array.from(document.getElementsByClassName("datalist-hint")).forEach(hint => {
    const input = hint.parentElement.querySelector("input[list]")
    datalistHint(input, hint)
    input.addEventListener("input", _ => datalistHint(input, hint))
  })
})()