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.
87 lines
1.9 KiB
JavaScript
87 lines
1.9 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')
|
|
}
|
|
|
|
connectedCallback() {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
height: 100svh;
|
|
min-height: 100svh;
|
|
max-height: 100svh;
|
|
overflow-y: hidden;
|
|
position: relative;
|
|
}
|
|
m-page {
|
|
flex-grow: 1;
|
|
}
|
|
`
|
|
this.shadowRoot.appendChild(style)
|
|
this.header.editing = this.editing
|
|
this.header.addEventListener('click-edit', () => {
|
|
this.editing = !this.editing
|
|
})
|
|
this.header.addEventListener('create-page', () => {
|
|
this.editing = true
|
|
})
|
|
this.shadowRoot.appendChild(this.header)
|
|
this.load()
|
|
addEventListener('hashchange', () => {
|
|
this.load()
|
|
})
|
|
this.addEventListener('hash-change', () => {
|
|
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() {
|
|
const hash = (
|
|
location.hash.slice(1) || '/'
|
|
)
|
|
return hash.startsWith('/') ? new URL(
|
|
hash,
|
|
location.href
|
|
).pathname : hash
|
|
}
|
|
|
|
set editing(value) {
|
|
sessionStorage.setItem(
|
|
'editing', value ? 'true' : 'false'
|
|
)
|
|
this.header.editing = this.editing
|
|
if (this.page) {
|
|
this.page.editing = this.editing
|
|
}
|
|
}
|
|
|
|
get editing() {
|
|
try {
|
|
return (
|
|
sessionStorage.getItem('editing') === 'true'
|
|
)
|
|
} catch (e) {
|
|
return false
|
|
}
|
|
}
|
|
} |