142 lines
3.3 KiB
JavaScript
142 lines
3.3 KiB
JavaScript
export class pre extends HTMLPreElement {
|
|
constructor() {
|
|
super()
|
|
}
|
|
static text(text) {
|
|
const pre = new this()
|
|
pre.textContent = text
|
|
pre.style.backgroundColor = '#eee'
|
|
pre.style.padding = '1rem'
|
|
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 })
|
|
}
|
|
static m(margin) {
|
|
return new this({ margin })
|
|
}
|
|
static p(padding) {
|
|
return new this({ padding })
|
|
}
|
|
static absolute(absolute) {
|
|
return new this({ absolute })
|
|
}
|
|
static relative(relative) {
|
|
return new this({ relative })
|
|
}
|
|
|
|
w(width) {
|
|
this.style.width = `${width}px`
|
|
return this
|
|
}
|
|
h(height) {
|
|
this.style.height = `${height}px`
|
|
return this
|
|
}
|
|
m(margin) {
|
|
this.style.margin = margin
|
|
return this
|
|
}
|
|
p(padding) {
|
|
this.style.padding = padding
|
|
return this
|
|
}
|
|
|
|
absolute({ top, left, right, bottom }) {
|
|
this.style.position = 'absolute'
|
|
if (top) this.style.top = top + 'px'
|
|
if (left) this.style.left = left + 'px'
|
|
if (right) this.style.right = right + 'px'
|
|
if (bottom) this.style.bottom = bottom + 'px'
|
|
return this
|
|
}
|
|
relative({ top, left, right, bottom }) {
|
|
this.style.position = 'relative'
|
|
if (top) this.style.top = top + 'px'
|
|
if (left) this.style.left = left + 'px'
|
|
if (right) this.style.right = right + 'px'
|
|
if (bottom) this.style.bottom = bottom + 'px'
|
|
return this
|
|
}
|
|
transition({ }) {
|
|
return this
|
|
}
|
|
text(text) {
|
|
this.textContent = text
|
|
return this
|
|
}
|
|
click(callback) {
|
|
this.onclick = callback
|
|
return this
|
|
}
|
|
childrens(childrens) {
|
|
childrens.forEach(element => {
|
|
this.appendChild(element)
|
|
})
|
|
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 }
|