diff --git a/assets/js/highlightHeadline.js b/assets/js/highlightHeadline.js index 3939d256..c71efc63 100644 --- a/assets/js/highlightHeadline.js +++ b/assets/js/highlightHeadline.js @@ -5,15 +5,12 @@ function isAsideActive() { } function initHighlightHeadline() { - - // In this site's layout, the table of contents (.content_with_heading) is an element that appears before any other content at the same hierarchy level - const headings = Array.from(document.querySelectorAll('.content_with_heading :is(h1, h2, h3, h4)')); + const headings = Array.from(document.querySelectorAll('.o-single__highlight :is(h1, h2, h3)')); const windowPath = window.location.pathname; if (headings.length === 0) { - return; // No headings? No business here + return; } - // A few helper functions (.o-aside__toc is the top-level ordered list) const markTocItemActive = (a) => {return a.setAttribute('data-current', '');} const markTocItemInactive = (a) => {return a.removeAttribute('data-current');}; const getTocLinkFromHeading = (h) => {return document.querySelector(`.o-aside__toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);} @@ -29,11 +26,10 @@ function initHighlightHeadline() { const observer = new IntersectionObserver( (entries) => { if (!isAsideActive()) { - return; // Exit if .o-aside is not active + return; } entries.forEach((entry) => { - // Keep track of visible headings if (entry.isIntersecting) { visibleHeadings.add(entry.target); } else { @@ -44,11 +40,10 @@ function initHighlightHeadline() { // Sort visible (intersecting) headings by inverted order of appearance, then grab the first item (i.e. last visible heading) const lastVisible = Array.from(visibleHeadings.values()).sort((a, b) => headings.indexOf(b) - headings.indexOf(a))[0]; if (!lastVisible) { - return; // If nothing is visible, weird — TOC are opt-in — but let's skip this logic + return; } headings.forEach((heading) => { - // If it's the last visible item, mark it to make it stand out, else, revert to the default style // Find the link in the TOC list matching the heading in this list of heading elements const tocLink = getTocLinkFromHeading(heading); @@ -64,9 +59,7 @@ function initHighlightHeadline() { }); }, { - //? docHeight: Extend the detection above the heading so it's always considered as intersecting if above the scrollport - //? -33%: The element won't be considered as intersecting until it has gone _above_ the bottom third of the scrollport - rootMargin: `${docHeight}px 0px -80% 0px`, + rootMargin: `${docHeight}px 0px -90% 0px`, threshold: 1, // Only considered intersecting if all the pixels are inside the intersection area } ); @@ -76,11 +69,6 @@ function initHighlightHeadline() { return observer; } - // On page load... - // Let us don't do this - /* - markTocItemActive(getTocLinkFromHeading(headings[0])); // Mark the first item as active (even if the heading appears a bit further down) - */ currentObserver = beginObservation(height); // Start the intersection observer // On resize, replace the observer with a new one matching the updated body height, if different diff --git a/layouts/country/single.html b/layouts/country/single.html index 9525a835..7255cfe5 100644 --- a/layouts/country/single.html +++ b/layouts/country/single.html @@ -4,7 +4,7 @@
{{ partial "sidemenu" . }}
-
+
{{ partial "flag" (dict "country" .File.ContentBaseName "pagefind" true) }} diff --git a/layouts/news/single.html b/layouts/news/single.html index ce214927..b07228b2 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -31,7 +31,7 @@ }}
-
+

{{ .Title }}

{{ partial "updateDate.html" . }} diff --git a/layouts/operator/single.html b/layouts/operator/single.html index 59f8819e..210fb330 100644 --- a/layouts/operator/single.html +++ b/layouts/operator/single.html @@ -2,7 +2,7 @@
{{ partial "sidemenu" . }}
-
+
{{ partial "operator-logo" (dict "operator" .File.ContentBaseName "pagefind" true)}}