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.
65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
export class Layout extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({mode: 'open'})
|
|
this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
|
|
this.header = document.createElement('m-header')
|
|
this.editing = false
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.m-page {
|
|
flex-grow: 1;
|
|
}
|
|
`
|
|
this.shadowRoot.appendChild(style)
|
|
this.header.editing = this.editing
|
|
this.header.addEventListener('click-edit', () => {
|
|
this.editing = !this.editing
|
|
})
|
|
this.shadowRoot.appendChild(this.header)
|
|
this.load()
|
|
addEventListener('hashchange', () => {
|
|
this.load()
|
|
})
|
|
}
|
|
|
|
load() {
|
|
const path = this.path
|
|
const prevPage = this.page
|
|
this.page = document.createElement('m-page')
|
|
this.page.csp = this.csp
|
|
this.page.path = path
|
|
this.editing = this.editing
|
|
if (prevPage !== undefined) {
|
|
prevPage.remove()
|
|
}
|
|
this.shadowRoot.appendChild(this.page)
|
|
this.header.path = path
|
|
}
|
|
|
|
get path() {
|
|
return new URL(
|
|
window.location.hash.slice(1) || '/',
|
|
window.location
|
|
).pathname
|
|
}
|
|
|
|
set editing(value) {
|
|
this._editing = value
|
|
this.header.editing = this.editing
|
|
if (this.page) {
|
|
this.page.editing = this.editing
|
|
}
|
|
}
|
|
|
|
get editing() {
|
|
return this._editing
|
|
}
|
|
} |