91 lines
1.9 KiB
JavaScript
91 lines
1.9 KiB
JavaScript
export class pre extends HTMLPreElement {
|
|
constructor() {
|
|
super()
|
|
}
|
|
static text(text) {
|
|
const pre = new this()
|
|
pre.textContent = text
|
|
return pre
|
|
}
|
|
w(width) {
|
|
this.style.width = `${width}px`
|
|
return this
|
|
}
|
|
h(height) {
|
|
this.style.height = `${height}px`
|
|
return this
|
|
}
|
|
}
|
|
|
|
export class div extends HTMLDivElement {
|
|
constructor({ width = 0, height = 0 }) {
|
|
super()
|
|
this.style.width = `${width}px`
|
|
this.style.height = `${height}px`
|
|
}
|
|
|
|
static w(width) {
|
|
return new this({ width })
|
|
}
|
|
static h(height) {
|
|
return new this({ height })
|
|
}
|
|
|
|
w(width) {
|
|
this.style.width = `${width}px`
|
|
return this
|
|
}
|
|
h(height) {
|
|
this.style.height = `${height}px`
|
|
return this
|
|
}
|
|
text(text) {
|
|
this.textContent = text
|
|
return this
|
|
}
|
|
|
|
static get onclick() {
|
|
console.log('onclick event')
|
|
return {
|
|
stop: function (event) {
|
|
console.log(`Stop event: ${event}`)
|
|
return div
|
|
}
|
|
}
|
|
}
|
|
|
|
static get onkeydown() {
|
|
console.log('onkeydown event')
|
|
return {
|
|
esc: function () {
|
|
console.log('esc event')
|
|
return {
|
|
keydown: function () {
|
|
console.log('keydown event')
|
|
return div
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
static classList(classes) {
|
|
console.log(`Classes: ${classes}`)
|
|
return this
|
|
}
|
|
}
|
|
|
|
customElements.define('my-div', div, { extends: 'div' })
|
|
customElements.define('my-pre', pre, { extends: 'pre' })
|
|
|
|
//
|
|
//export class button extends div { }
|
|
//export class span extends div { }
|
|
//
|
|
//export class header extends div { }
|
|
//export class footer extends div { }
|
|
//export class main extends div { }
|
|
//
|
|
|
|
export default { div, pre }
|