diff --git a/lib/app-router.js b/lib/app-router.js index 3329b14..c60104c 100644 --- a/lib/app-router.js +++ b/lib/app-router.js @@ -19,22 +19,20 @@ 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 + if (isDocumentationPage && 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)) } } - 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 +45,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 +62,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', () => {