aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 14:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

navigation refactor

Browse Source
This commit is contained in:
rafapaezbas
2024-01-23 13:44:14 +01:00
parent 3ad2f72142
commit 09d575d90e
2 changed files with 43 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
lib/docs-viewer.js
View File

@@ -54,6 +54,8 @@ customElements.define('docs-viewer', class extends HTMLElement {
this.home = document.querySelector('#home')
this.status = document.querySelector('#status')
this.page = '/readme.md'
this.home.style.display = 'none'
@@ -64,59 +66,60 @@ customElements.define('docs-viewer', class extends HTMLElement {
})
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
this.panel.addEventListener('click', (evt) => {
this.panel.addEventListener('click', async (evt) => {
evt.preventDefault()
if (evt.target?.tagName !== 'A') return
const targetUrl = new URL(evt.target.href)
if (targetUrl.hash === '#documentation') {
await this.load('/readme.md')
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)
evt.preventDefault()
this.load(evt.target.pathname)
})
window.addEventListener('hashchange', () => {
if (location.hash === '#documentation' && this.page === '/readme.md') this.home.style.display = 'none'
else this.home.style.display = ''
})
window.addEventListener('popstate', (evt) => {
if (location.hash.startsWith('#documentation')) {
const home = location.hash.endsWith('-home')
if (home) {
this.page = '/readme.md'
history.replaceState(null, null, this.page + location.hash)
location.href = '/pulse.html#documentation'
return
}
if (location.pathname.endsWith('.md') === false) {
history.replaceState(null, null, this.page + location.hash)
return
}
evt.preventDefault()
this.page = location.pathname
this.#load().catch((err) => this.#error(err))
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')
}
})
this.#load().catch((err) => this.#error(err))
window.addEventListener('popstate', async (evt) => {
console.log(evt)
if (evt.state === null) {
this.home.style.display = 'none'
this.panel.style.display = 'none'
this.status.style.display = ''
return
}
const docsViewer = document.querySelector('docs-viewer')
await docsViewer.load(evt.state.page, { back: true })
return
})
const config = global[Symbol.for('pear.config')] || {}
if (config.link && config.link !== 'pear:dev') {
window.addEventListener('load', async () => {
await this.load(config.link.slice(5))
})
}
}
#error (err) {
try { this.panel.querySelector('slot').innerHTML = err.stack } catch (e) { console.error(err, e) }
}
load (page) {
document.documentElement.scrollTo(0, 0)
this.page = page
history.pushState(null, null, page + location.hash)
return this.#load().catch((err) => this.#error(err))
}
async #load () {
this.panel.querySelector('slot').innerHTML = marked.parse(await (await fetch(this.page)).text(), { headerIds: false, mangle: false })
if (location.hash === '#documentation' && this.page === '/readme.md') this.home.style.display = 'none'
else this.home.style.display = ''
async load (page, opts = {}) {
const html = await fetch(page)
const text = await marked.parse(await html.text())
this.panel.querySelector('slot').innerHTML = text, { headerIds: false, mangle: false }
this.home.style.display = ''
this.panel.style.display = ''
this.status.style.display = 'none'
if (!opts.back) history.pushState({ page }, null)
}
})