blob: 4730c1e25cdfa3617668c9f590f54db2db668773 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
// -----------------------------------------------------------------------------
// Dark Theme handling based on https://css-tricks.com/a-complete-guide-to-dark-theme-on-the-web/
// -----------------------------------------------------------------------------
const btn = document.querySelector('.btn-toggle-theme');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const currentTheme = localStorage.getItem("theme");
// Set to dark if stored in local storage or no current theme and user prefers darkness
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
} else if (currentTheme != "light" || currentTheme == null) {
if(prefersDarkScheme.matches) {
document.body.classList.toggle("dark-theme");
}
}
// Theme toggle button handler
btn.addEventListener("click", function() {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme") ? "dark" : "light";
localStorage.setItem("theme", theme);
});
// -----------------------------------------------------------------------------
// ScrollSpy https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/
// -----------------------------------------------------------------------------
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
if(document.querySelector(`nav ul li a[href="#${id}"]`) != null) {
document.querySelector(`nav ul li a[href="#${id}"]`).parentElement.classList.add('active');
}
} else {
if(document.querySelector(`nav ul li a[href="#${id}"]`) != null) {
document.querySelector(`nav ul li a[href="#${id}"]`).parentElement.classList.remove('active');
}
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('section[id]').forEach((section) => {
observer.observe(section);
});
});
// -----------------------------------------------------------------------------
// Misc
// -----------------------------------------------------------------------------
|
