mirror of https://github.com/veypi/OneAuth.git
feat: add js base build function
veypi
1 month ago
parent
3cadef35be
commit
7a2ef864a3
@ -0,0 +1,24 @@
|
|||||||
|
/*
|
||||||
|
* app.ts
|
||||||
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||||
|
* 2024-10-23 15:35
|
||||||
|
* Distributed under terms of the GPL license.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import b from "./build";
|
||||||
|
|
||||||
|
|
||||||
|
export default class {
|
||||||
|
main: HTMLElement
|
||||||
|
body: HTMLElement
|
||||||
|
constructor() {
|
||||||
|
this.body = b('voa-apps-body')
|
||||||
|
this.main = b({
|
||||||
|
class: 'voa-apps',
|
||||||
|
children: [
|
||||||
|
b({ class: 'voa-apps-header', children: [b('voa-apps-title')] }),
|
||||||
|
this.body
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,73 +0,0 @@
|
|||||||
/*
|
|
||||||
* base.ts
|
|
||||||
* Copyright (C) 2024 veypi <i@veypi.com>
|
|
||||||
* 2024-10-22 18:21
|
|
||||||
* Distributed under terms of the GPL license.
|
|
||||||
*/
|
|
||||||
interface buildOpts {
|
|
||||||
id?: string
|
|
||||||
typ?: 'div'
|
|
||||||
class?: string
|
|
||||||
style?: string
|
|
||||||
innerHtml?: string
|
|
||||||
onclick?: any
|
|
||||||
children?: HTMLElement[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class {
|
|
||||||
class_prefix: string
|
|
||||||
constructor(p?: string) {
|
|
||||||
this.class_prefix = p || 'voa-'
|
|
||||||
}
|
|
||||||
build(opts: buildOpts) {
|
|
||||||
let dom = document.createElement(opts.typ || 'div')
|
|
||||||
if (opts.id) {
|
|
||||||
dom.id = opts.id
|
|
||||||
}
|
|
||||||
if (opts.class) {
|
|
||||||
this.addClass(dom, opts.class)
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
while ((match = regex.exec(opts.style)) !== null) {
|
|
||||||
const key = match[1].trim();
|
|
||||||
const value = match[2].trim();
|
|
||||||
console.log([key, value])
|
|
||||||
dom.style.setProperty(key, value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return dom
|
|
||||||
}
|
|
||||||
addClass(dom: HTMLElement, c: string) {
|
|
||||||
let items = c.split(' ')
|
|
||||||
for (let i of items) {
|
|
||||||
if (i.startsWith(this.class_prefix)) {
|
|
||||||
dom.classList.add(i)
|
|
||||||
} else {
|
|
||||||
dom.classList.add(this.class_prefix + i)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
removeClass(dom: HTMLElement, c: string) {
|
|
||||||
let items = c.split(' ')
|
|
||||||
for (let i of items) {
|
|
||||||
if (i.startsWith(this.class_prefix)) {
|
|
||||||
dom.classList.remove(i)
|
|
||||||
} else {
|
|
||||||
dom.classList.remove(this.class_prefix + i)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
/*
|
||||||
|
* build.ts
|
||||||
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||||
|
* 2024-10-23 15:54
|
||||||
|
* Distributed under terms of the GPL license.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
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']
|
||||||
|
const caches: (() => void)[] = []
|
||||||
|
function update() {
|
||||||
|
for (let c of caches) {
|
||||||
|
c()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export { update }
|
||||||
|
|
||||||
|
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();
|
||||||
|
console.log([key, value])
|
||||||
|
dom.style.setProperty(key, value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dom.setAttribute('voa', '1')
|
||||||
|
if (updator) {
|
||||||
|
caches.push(() => {
|
||||||
|
updator(dom)
|
||||||
|
})
|
||||||
|
updator(dom)
|
||||||
|
}
|
||||||
|
return dom
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue