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.
47 lines
1013 B
JavaScript
47 lines
1013 B
JavaScript
export class Layout extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({mode: 'open'})
|
|
this.header = document.createElement('m-header')
|
|
this.shadowRoot.appendChild(this.header)
|
|
this.load()
|
|
addEventListener('hashchange', () => {
|
|
this.load()
|
|
})
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
width: 100%;
|
|
height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.m-page {
|
|
flex-grow: 1;
|
|
}
|
|
`
|
|
document.appendChild(style)
|
|
}
|
|
|
|
load() {
|
|
const path = this.path
|
|
const prevPage = this.page
|
|
this.page = document.createElement('m-page')
|
|
this.page.path = path
|
|
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
|
|
}
|
|
} |