diff --git a/assets/js/sidebar/sidebar-list.js b/assets/js/sidebar/sidebar-list.js index a76b0dfdf..bf0d7b634 100644 --- a/assets/js/sidebar/sidebar-list.js +++ b/assets/js/sidebar/sidebar-list.js @@ -1,6 +1,8 @@ import { el, getCurrentPageSidebarType, qs, qsAll } from '../helpers' import { getSidebarNodes } from '../globals' +// Sidebar list is only rendered when needed. +// Mobile users may never see the sidebar. let init = false export function initialize () { if (init) return @@ -88,15 +90,15 @@ export function initialize () { })) }) - window.addEventListener('hashchange', markCurrentHashInSidebar) - - // We listen to swup:page:view event because we need to trigger - // markCurrentHashInSidebar() before scollNodeListToCurrentCategory. - window.addEventListener('swup:page:view', markCurrentHashInSidebar) + // Update new sidebar list with current hash. markCurrentHashInSidebar() // Triggers layout, defer. requestAnimationFrame(scrollNodeListToCurrentCategory) + + // Keep updated with future changes. + window.addEventListener('hashchange', markCurrentHashInSidebar) + window.addEventListener('exdoc:loaded', markCurrentHashInSidebar) } /** diff --git a/assets/js/swup.js b/assets/js/swup.js index 6f9fccd6b..85bfa74b0 100644 --- a/assets/js/swup.js +++ b/assets/js/swup.js @@ -3,9 +3,14 @@ import SwupA11yPlugin from '@swup/a11y-plugin' import SwupProgressPlugin from '@swup/progress-plugin' import { isEmbedded } from './globals' -window.addEventListener('DOMContentLoaded', () => { +// Emit exdoc:loaded each time content loads: +// - on initial page load (DOMContentLoaded) +// - on subsequent SWUP page loads (page:view) +const emitExdocLoaded = () => { window.dispatchEvent(new Event('exdoc:loaded')) -}) +} + +window.addEventListener('DOMContentLoaded', emitExdocLoaded) if (!isEmbedded && window.location.protocol !== 'file:') { new Swup({ @@ -17,10 +22,9 @@ if (!isEmbedded && window.location.protocol !== 'file:') { path === window.location.pathname + '.html' }, linkSelector: 'a[href]:not([href^="/"]):not([href^="http"])', + hooks: { + 'page:view': emitExdocLoaded + }, plugins: [new SwupA11yPlugin(), new SwupProgressPlugin({delay: 500})] }) - - window.addEventListener('swup:page:view', () => { - window.dispatchEvent(new Event('exdoc:loaded')) - }) }