57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
export class CustomHTMLElement extends HTMLElement {
|
|
constructor() {// {{{
|
|
super()
|
|
|
|
this.appendChild(this.constructor.tmpl.content.cloneNode(true))
|
|
|
|
this.querySelectorAll('*').forEach(el => {
|
|
const field = el.dataset.field
|
|
if (field !== undefined) {
|
|
const fieldName = this.toElementName('field', field)
|
|
this[fieldName] = el
|
|
}
|
|
|
|
const name = el.dataset.el
|
|
if (name !== undefined) {
|
|
const elName = this.toElementName('el', name)
|
|
this[elName] = el
|
|
el.classList.add('el-' + name)
|
|
}
|
|
})
|
|
}// }}}
|
|
toElementName(prefix, str) {// {{{
|
|
str = prefix + '-' + str
|
|
return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
|
|
}// }}}
|
|
}
|
|
|
|
export class StupidPreactCustomHTMLElement extends HTMLElement {
|
|
constructor() {// {{{
|
|
super()
|
|
|
|
// Stupid stuff because of Preact.
|
|
this.clonedNodes = this.constructor.tmpl.content.cloneNode(true)
|
|
this.clonedNodes.querySelectorAll('*').forEach(el => {
|
|
const field = el.dataset.field
|
|
if (field !== undefined) {
|
|
const fieldName = this.toElementName('field', field)
|
|
this[fieldName] = el
|
|
}
|
|
|
|
const name = el.dataset.el
|
|
if (name !== undefined) {
|
|
const elName = this.toElementName('el', name)
|
|
this[elName] = el
|
|
el.classList.add('el-' + name)
|
|
}
|
|
})
|
|
}// }}}
|
|
toElementName(prefix, str) {// {{{
|
|
str = prefix + '-' + str
|
|
return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
|
|
}// }}}
|
|
connectedCallback() {// {{{
|
|
// Stupid stuff because of Preact.
|
|
this.appendChild(this.clonedNodes)
|
|
}// }}}
|
|
}
|