frontend/marko/components/modal/component.js

module.exports = class {
  onCreate() {
    this.mounted = false
    this.opened = false
  }

  closeModal() {
    this.emit("close")
    this.opened = false

    if (this.mounted) {
      window.removeEventListener("keydown", this.onPress)
    }
  }

  onInput(input) {
    if (!this.mounted) {
      return
    }

    if (input) {
      if (input.enabled && !this.opened) {
        this.emit("open")
        this.opened = true
      }

      if (input.closable) {
        if (input.enabled && (!this.input || !this.input.enabled)) {
          window.addEventListener("keydown", this.onPress)
        } else if (!input.enabled && (this.input && this.input.enabled)) {
          window.removeEventListener("keydown", this.onPress)
        }
      }
    }
  }

  onMount() {
    this.onPress = this.onPress.bind(this)
    this.mounted = true

    if (this.input.enabled && this.input.closable) {
      window.addEventListener("keydown", this.onPress)
    }
  }

  onUnmount() {
    if (this.input.enabled) {
      window.removeEventListener("keydown", this.onPress)
    }

    this.mounted = false
    this.opened = false
  }

  /**
   * 
   * @param {KeyboardEvent} ev 
   */
  onPress(ev) {
    if (ev.key === "Escape" && ev.ctrlKey ) {
      this.closeModal()
    }
  }

  getValues() {
    /** @type {HTMLElement[]} */
    const elems = this.findInputs()
    const map = {}

    for (const component of this.getComponents()) {
      if (component.getFormData != null) {
        Object.assign(map, component.getFormData() || {})
      }
    }

    return elems.reduce((map, elem) => {
      let path = elem.getAttribute("name").split(".")
      let node = map
      for (const part of path.slice(0, -1)) {
        if (node[part] == null) {
          node[part] = {}
        }

        node = node[part]
      }

      node[path[path.length - 1]] = elem.value; 
      return map
    }, map)
  }

  /**
   * @param {HTMLElement} elem 
   */
  findInputs(elem = this.getEl()) {
    let results = []

    if (elem.childNodes.length === 0) {
      return []
    }
    
    for (let i = 0; i < elem.children.length; ++i) {
      const child = elem.children.item(i)
      if (child.dataset.formboundary != null) {
        continue
      }
      
      if (child.nodeName === "INPUT" || child.nodeName === "TEXTAREA") {
        results.push(child)
      } else {
        results = results.concat(this.findInputs(child))
      }
    }

    return results
  }
}