routing

lib/docs-viewer.js

@@ -10,6 +10,13 @@
 /* eslint-enable */
 
 customElements.define('docs-viewer', class extends HTMLElement {
+  router = null
+  connectedCallback () {
+    this.root.addEventListener('click', (evt) => {
+      this.router.link(evt)
+    })
+  }
+
   constructor () {
     super()
     const lightMode = document.documentElement.classList.contains('light')
@@ -52,66 +59,24 @@ customElements.define('docs-viewer', class extends HTMLElement {
 
     this.panel = this.root.querySelector('#panel')
 
-    this.status = document.querySelector('#status')
-
-    this.page = '/readme.md'
+    this.entry = '/readme.md'
 
     const observer = new MutationObserver(() => {
       if (document.documentElement.classList.contains('light')) this.panel.classList.add('light')
       else this.panel.classList.remove('light')
     })
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
-
-    this.panel.addEventListener('click', async (evt) => {
-      evt.preventDefault()
-      if (evt.target?.tagName !== 'A') return
-      const href = evt.target.href
-      const { origin } = new URL(location.href)
-      const url = new URL(href, location.href)
-      if (url.origin !== origin) return window.open(href)
-      this.load(evt.target.pathname)
-    })
-
-    window.addEventListener('click', async (evt) => {
-      evt.preventDefault()
-      if (evt.target?.tagName !== 'A') return
-      const targetUrl = new URL(evt.target.href)
-      if (targetUrl.hash === '#documentation') {
-        const docsViewer = document.querySelector('docs-viewer')
-        await docsViewer.load('/readme.md')
-      }
-      if (targetUrl.hash === '#status') {
-        this.panel.style.display = 'none'
-        this.status.style.display = ''
-      }
-    })
-
-    window.addEventListener('popstate', async (evt) => {
-      console.log(evt)
-      if (evt.state === null) {
-        this.panel.style.display = 'none'
-        this.status.style.display = ''
-        return
-      }
-      const docsViewer = document.querySelector('docs-viewer')
-      await docsViewer.load(evt.state.page, { back: true })
-    })
-
-    const config = global[Symbol.for('pear.config')] || {}
-    if (config.link.indexOf('pear://pulse') === 0) {
-      window.addEventListener('load', async () => {
-        await this.load(config.link.slice(12))
-      })
-    }
   }
 
-  async load (page, opts = {}) {
-    if (page.length === 0) return
+  async load (page = '/') {
+    if (page === '/') page = this.entry
     const html = await fetch(page)
     const text = await marked.parse(await html.text())
     this.panel.querySelector('slot').innerHTML = text
     this.panel.style.display = ''
-    this.status.style.display = 'none'
-    if (!opts.back) history.pushState({ page }, null)
+  }
+
+  unload () {
+    this.panel.style.display = 'none'
   }
 })