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

Docs viewer improvements (#83)

Browse Source 
* fixed some broken hyperdht.md anchors

* naming refactor in anchor scrolling

---------

Co-authored-by: rafapaezbas <rafa@holepunch.com>
This commit is contained in:
rafapaezbas
2024-03-01 10:44:09 +01:00
committed by GitHub
parent 1c7a120113
commit 675ac09c4f
2 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
lib/app-router.js
View File

@@ -19,22 +19,21 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
await element.load(page, opts)
const isDocumentationPage = pathname.startsWith('/documentation')
if (isDocumentationPage && !!opts.header) {
const anchor = opts.header
if (anchor) {
const element = this.routes['/documentation'].shadowRoot.getElementById(anchor)
element.scrollIntoView()
const elementY = Math.floor(element.getBoundingClientRect().y)
const pearHeaderHeight = 170
const extraScroll = 80
const isUnderPearHeader = elementY < pearHeaderHeight + extraScroll
if (isUnderPearHeader) {
window.scrollBy(0, -1 * (pearHeaderHeight + extraScroll - elementY))
}
const anchor = opts.anchor
const shouldShowSpecificSection = anchor && isDocumentationPage
if (shouldShowSpecificSection) {
const element = this.routes['/documentation'].shadowRoot.getElementById(anchor)
element.scrollIntoView()
const elementY = Math.floor(element.getBoundingClientRect().y)
const pearHeaderHeight = 170
const extraScroll = 80
const isUnderPearHeader = elementY < pearHeaderHeight + extraScroll
if (isUnderPearHeader) {
window.scrollBy(0, -1 * (pearHeaderHeight + extraScroll - elementY))
}
}
if (!opts.back) history.pushState({ pathname, header: opts.header }, null, pathname)
if (!opts.back) history.pushState({ pathname, anchor: opts.anchor }, null, pathname)
break
}
}
@@ -47,8 +46,8 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
const { tagName } = evt.target.getRootNode().host || {}
const route = tagName ? this.getAttribute(tagName) : ''
if (evt.target.pathname.startsWith(route)) {
const header = evt.target.href.split('#')[1]
this.load(evt.target.pathname, { header }).catch(console.error)
const anchor = evt.target.href.split('#')[1]
this.load(evt.target.pathname, { anchor }).catch(console.error)
} else {
this.load(route + evt.target.pathname).catch(console.error)
}
@@ -64,7 +63,7 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
this.addEventListener('click', (evt) => this.link(evt))
window.addEventListener('popstate', (evt) => {
this.load(evt.state?.pathname, { back: true, header: evt.state?.header }).catch(console.error)
this.load(evt.state?.pathname, { back: true, anchor: evt.state?.anchor }).catch(console.error)
})
window.addEventListener('load', () => {