Skip to content

Commit 3a3c196

Browse files
lenderomlenderom
authored
Merge pull request #47 from fipguide/fix/cleanup
fix: removed fragments of mobile content navigation menu
2 parents 2d24a9b + 5e44ba5 commit 3a3c196

File tree

6 files changed

+91
-122
lines changed

6 files changed

+91
-122
lines changed

‎assets/js/highlightHeadline.js

+90-82
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,111 @@
1-
function initHighlightHeadline() {
1+
import * as mq from './mediaqueries';
2+
3+
function isAsideActive() {
4+
return window.matchMedia(mq.minLG).matches;
5+
}
26

3-
// 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
4-
const headings = Array.from(document.querySelectorAll('.content_with_heading :is(h1, h2, h3, h4)'));
5-
const asideMobileCurrentHeadline = document.getElementById('aside_mobile_current_headline');
6-
const windowPath = window.location.pathname;
7-
if (headings.length === 0) {
8-
return; // No headings? No business here
9-
}
7+
function initHighlightHeadline() {
108

11-
// A few helper functions (.toc is the top-level ordered list)
12-
const markTocItemActive = (a) => {return a.setAttribute('data-current', '');}
13-
const markTocItemInactive = (a) => {return a.removeAttribute('data-current');};
14-
const getTocLinkFromHeading = (h) => {return document.querySelector(`.toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
9+
// 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
10+
const headings = Array.from(document.querySelectorAll('.content_with_heading :is(h1, h2, h3, h4)'));
11+
const windowPath = window.location.pathname;
12+
if (headings.length === 0) {
13+
return; // No headings? No business here
14+
}
1515

16-
const getDocHeight = () => Math.floor(document.body.clientHeight);
16+
// A few helper functions (.toc is the top-level ordered list)
17+
const markTocItemActive = (a) => {return a.setAttribute('data-current', '');}
18+
const markTocItemInactive = (a) => {return a.removeAttribute('data-current');};
19+
const getTocLinkFromHeading = (h) => {return document.querySelector(`.toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
1720

18-
const visibleHeadings = new Set();
19-
let resizeDebounce;
20-
let currentObserver;
21-
let height = getDocHeight();
21+
const getDocHeight = () => Math.floor(document.body.clientHeight);
2222

23-
function beginObservation(docHeight) {
24-
const observer = new IntersectionObserver(
25-
(entries) => {
26-
entries.forEach((entry) => {
27-
// Keep track of visible headings
28-
if (entry.isIntersecting) {
29-
visibleHeadings.add(entry.target);
30-
} else {
31-
visibleHeadings.delete(entry.target);
32-
}
33-
});
23+
const visibleHeadings = new Set();
24+
let resizeDebounce;
25+
let currentObserver;
26+
let height = getDocHeight();
3427

35-
// Sort visible (intersecting) headings by inverted order of appearance, then grab the first item (i.e. last visible heading)
36-
const lastVisible = Array.from(visibleHeadings.values()).sort((a, b) => headings.indexOf(b) - headings.indexOf(a))[0];
37-
if (!lastVisible) {
38-
return; // If nothing is visible, weird — TOC are opt-in — but let's skip this logic
28+
function beginObservation(docHeight) {
29+
const observer = new IntersectionObserver(
30+
(entries) => {
31+
if (!isAsideActive()) {
32+
return; // Exit if .o-aside is not active
3933
}
4034

41-
headings.forEach((heading) => {
35+
entries.forEach((entry) => {
36+
// Keep track of visible headings
37+
if (entry.isIntersecting) {
38+
visibleHeadings.add(entry.target);
39+
} else {
40+
visibleHeadings.delete(entry.target);
41+
}
42+
});
4243

43-
// If it's the last visible item, mark it to make it stand out, else, revert to the default style
44-
// Find the link in the TOC list matching the heading in this list of hheding elements
45-
const tocLink = getTocLinkFromHeading(heading);
46-
if (heading === lastVisible) {
47-
asideMobileCurrentHeadline.textContent = heading.textContent;
48-
if(tocLink){
49-
markTocItemActive(tocLink);
50-
}
51-
} else {
52-
if(tocLink){
53-
markTocItemInactive(tocLink);
54-
}
55-
}
56-
});
57-
},
58-
{
59-
//? docHeight: Extend the detection above the heading so it's always considered as intersecting if above the scrollport
60-
//? -33%: The element won't be considered as intersecting until it has gone _above_ the bottom third of the scrollport
61-
rootMargin: `${docHeight}px 0px -80% 0px`,
62-
threshold: 1, // Only considered intersecting if all the pixels are inside the intersection area
63-
}
64-
);
44+
// Sort visible (intersecting) headings by inverted order of appearance, then grab the first item (i.e. last visible heading)
45+
const lastVisible = Array.from(visibleHeadings.values()).sort((a, b) => headings.indexOf(b) - headings.indexOf(a))[0];
46+
if (!lastVisible) {
47+
return; // If nothing is visible, weird — TOC are opt-in — but let's skip this logic
48+
}
6549

66-
headings.forEach((heading) => observer.observe(heading));
67-
68-
return observer;
69-
}
50+
headings.forEach((heading) => {
7051

71-
// On page load...
52+
// If it's the last visible item, mark it to make it stand out, else, revert to the default style
53+
// Find the link in the TOC list matching the heading in this list of heading elements
54+
const tocLink = getTocLinkFromHeading(heading);
55+
if (heading === lastVisible) {
56+
if(tocLink){
57+
markTocItemActive(tocLink);
58+
}
59+
} else {
60+
if(tocLink){
61+
markTocItemInactive(tocLink);
62+
}
63+
}
64+
});
65+
},
66+
{
67+
//? docHeight: Extend the detection above the heading so it's always considered as intersecting if above the scrollport
68+
//? -33%: The element won't be considered as intersecting until it has gone _above_ the bottom third of the scrollport
69+
rootMargin: `${docHeight}px 0px -80% 0px`,
70+
threshold: 1, // Only considered intersecting if all the pixels are inside the intersection area
71+
}
72+
);
73+
74+
headings.forEach((heading) => observer.observe(heading));
75+
76+
return observer;
77+
}
78+
79+
// On page load...
7280
// Let us don't do this
7381
/*
7482
markTocItemActive(getTocLinkFromHeading(headings[0])); // Mark the first item as active (even if the heading appears a bit further down)
7583
*/
76-
currentObserver = beginObservation(height); // Start the intersection observer
84+
currentObserver = beginObservation(height); // Start the intersection observer
7785

78-
// On resize, replace the observer with a new one matching the updated body height, if different
79-
window.addEventListener('resize', () => {
80-
clearTimeout(resizeDebounce);
81-
resizeDebounce = setTimeout(() => {
82-
const heightAfterResize = getDocHeight();
83-
if (height !== heightAfterResize) {
84-
if (currentObserver) {
85-
currentObserver.disconnect();
86-
}
87-
currentObserver = beginObservation(heightAfterResize);
88-
}
89-
}, 200);
90-
});
86+
// On resize, replace the observer with a new one matching the updated body height, if different
87+
window.addEventListener('resize', () => {
88+
clearTimeout(resizeDebounce);
89+
resizeDebounce = setTimeout(() => {
90+
const heightAfterResize = getDocHeight();
91+
if (height !== heightAfterResize) {
92+
if (currentObserver) {
93+
currentObserver.disconnect();
94+
}
95+
currentObserver = beginObservation(heightAfterResize);
96+
}
97+
}, 200);
98+
});
9199
}
92100

93101
if (document.readyState === "interactive") {
94-
if (document.getElementById('aside')) {
95-
initHighlightHeadline();
96-
}
102+
if (document.getElementById('aside')) {
103+
initHighlightHeadline();
104+
}
97105
} else {
98-
window.addEventListener("DOMContentLoaded", () => {
99-
if (document.getElementById('aside')) {
100-
initHighlightHeadline();
101-
}
102-
});
106+
window.addEventListener("DOMContentLoaded", () => {
107+
if (document.getElementById('aside')) {
108+
initHighlightHeadline();
109+
}
110+
});
103111
}

‎assets/js/main.js

-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,3 @@ import './resizeObserver.js';
44
import './mediaqueries.js';
55
import './highlightHeadline.js';
66
import './anchorlinks.js';
7-
//import './aside.js';

‎assets/js/mobileMenu.js

-3
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@ function initMobileMenu() {
1313
closeMobileMenu()
1414
});
1515

16-
//TODO: window.onClick in mobileMenu.js und aside.js konsollidieren; momentan funktioniert es nicht gemeinsam.
17-
//const target = initWindowOnClick();
18-
1916
window.onclick = e => {
2017
//console.log(e.target);
2118
if (e.target.classList.contains('o-header__curtain')) {

‎assets/js/windowOnClickHandling.js

-5
This file was deleted.

‎assets/sass/sidemenu.scss

-24
Original file line numberDiff line numberDiff line change
@@ -23,30 +23,6 @@
2323
margin-bottom: 1.6rem;
2424
}
2525

26-
//TODO: Bessere Benamung
27-
.o-aside__mobile-container1 {
28-
display: none;
29-
30-
button {
31-
display: flex;
32-
border: 0;
33-
width: 100%;
34-
border-radius: var(--border-radius-m);
35-
align-items: center;
36-
justify-content: space-between;
37-
}
38-
}
39-
40-
//TODO: Bessere Benamung
41-
.o-aside__mobile-container2 {
42-
display: block;
43-
44-
@include media-breakpoint-down(lg) {
45-
display: none;
46-
justify-content: space-between;
47-
}
48-
}
49-
5026
.o-aside__mobile-container--open {
5127
@include media-breakpoint-down(lg) {
5228
display: block;

‎layouts/partials/sidemenu.html

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<aside id="aside" class="o-aside tableOfContents">
2-
<div class="o-aside__mobile o-aside__mobile-container1 o-single__container o-aside__mobile-container--open">
3-
<button>
4-
<div id="aside_mobile_current_headline">{{ .Title }}</div>
5-
{{ partial "ico" (dict "icon" "list" ) }}
6-
</button>
7-
</div>
8-
<div class="o-aside__mobile-container2 o-single__container">
2+
<div class="o-single__container">
93
{{ if eq .Page.Type "operator" }}
104
<ul>
115
{{ $related := .Site.RegularPages.RelatedIndices . "country" }}

0 commit comments

Comments
 (0)