pages/components/layout.js

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: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: hidden;
        position: relative;
      }
      m-page {
        flex-grow: 1;
        background: #ffb;
      }
    `
    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() {
    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
    }
  }
}