OneAuth/oaer/lib/components/build.ts

/*
 * build.ts
 * Copyright (C) 2024 veypi <i@veypi.com>
 * 2024-10-23 15:54
 * Distributed under terms of the GPL license.
 */

import proxy from "./proxy"


interface buildOpts {
  id?: string
  typ?: string
  class?: string
  style?: string
  innerHtml?: string
  onclick?: any
  children?: HTMLElement[]
  updator?: (p: HTMLElement) => void
}

const typs = ['div', 'img', 'span', 'p', 'a']

export default (opts: buildOpts | string, inner?: string | HTMLElement[], updator?: (p: HTMLElement) => void) => {
  if (typeof opts === 'string') {
    if (typs.indexOf(opts) >= 0) {
      opts = { typ: opts }
    } else {
      opts = { class: opts }
    }
  }
  if (inner) {
    if (typeof inner == 'string') {
      opts.innerHtml = inner
    } else {
      opts.children = inner
    }
  }
  if (opts.updator) {
    updator = opts.updator
  }
  let dom = document.createElement(opts.typ || 'div')
  if (opts.id) {
    dom.id = opts.id
  }
  if (opts.class) {
    dom.classList.add(...opts.class.split(' '))
  }
  if (opts.innerHtml) {
    dom.innerHTML = opts.innerHtml
  }
  if (opts.onclick) {
    dom.onclick = opts.onclick
  }
  if (opts.children) {
    for (let c in opts.children) {
      dom.appendChild(opts.children[c])
    }
  }
  if (opts.style) {
    const regex = /([a-zA-Z-]+)\s*:\s*([^;]+);?/g;
    let match: any
    while ((match = regex.exec(opts.style)) !== null) {
      const key = match[1].trim();
      const value = match[2].trim();
      dom.style.setProperty(key, value)
    }
  }
  dom.setAttribute('voa', '1')
  if (updator) {
    proxy.Listen(() => {
      updator(dom)
    })
  }
  return dom
}