You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
927 B
JavaScript
32 lines
927 B
JavaScript
3 years ago
|
export class Dialog extends HTMLElement {
|
||
|
|
constructor() {
|
||
|
|
super()
|
||
|
|
this.attachShadow({mode: 'open'})
|
||
|
|
this.windowEl = document.createElement('div')
|
||
|
|
this.windowEl.classList.add('window')
|
||
|
|
this.headerEl = document.createElement('div')
|
||
|
|
this.headerEl.classList.add('header')
|
||
|
|
this.bodyEl = document.createElement('div')
|
||
|
|
this.bodyEl.classList.add('body')
|
||
|
|
this.footerEl = document.createElement('div')
|
||
|
|
this.footerEl.classList.add('footer')
|
||
|
|
this.windowEl.replaceChildren(
|
||
|
|
this.headerEl, this.bodyEl, this.footerEl
|
||
|
|
)
|
||
|
|
this.shadowRoot.appendChild(this.windowEl)
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
this.textArea.value = this.body
|
||
|
|
const style = document.createElement('style')
|
||
|
|
style.textContent = `
|
||
|
|
:host {
|
||
|
|
overflow-y: auto;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
this.shadowRoot.append(style)
|
||
|
|
}
|
||
|
|
}
|