119 lines
4.1 KiB
JavaScript
119 lines
4.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', ready, false);
|
|
|
|
const THEME_PREF_STORAGE_KEY = "theme-preference";
|
|
const THEME_TO_ICON_CLASS = {
|
|
'dark': 'feather-moon',
|
|
'light':'feather-sun'
|
|
};
|
|
const THEME_TO_ICON_TEXT_CLASS = {
|
|
'dark': 'Dark mode',
|
|
'light':'Light mode'
|
|
};
|
|
let toggleIcon = '';
|
|
let darkThemeCss = '';
|
|
|
|
const HEADING_TO_TOC_CLASS = {
|
|
'H1': 'level-1',
|
|
'H2': 'level-2',
|
|
'H3': 'level-3',
|
|
'H4': 'level-4'
|
|
}
|
|
|
|
function ready() {
|
|
feather.replace({ 'stroke-width': 1, width: 20, height: 20 });
|
|
setThemeByUserPref();
|
|
|
|
if (document.querySelector('main#content > .container') !== null &&
|
|
document.querySelector('main#content > .container').classList.contains('post')) {
|
|
if (document.getElementById('TableOfContents') !== null) {
|
|
fixTocItemsIndent();
|
|
createScrollSpy();
|
|
} else {
|
|
document.querySelector('main#content > .container.post').style.display = "block";
|
|
}
|
|
}
|
|
|
|
// Elements to inject
|
|
const svgsToInject = document.querySelectorAll('img.svg-inject');
|
|
// Do the injection
|
|
SVGInjector(svgsToInject);
|
|
|
|
document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
|
|
const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
|
|
if (hamburgerMenu.classList.contains('visibility-hidden')) {
|
|
hamburgerMenu.classList.remove('visibility-hidden');
|
|
} else {
|
|
hamburgerMenu.classList.add('visibility-hidden');
|
|
}
|
|
})
|
|
}
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.innerWidth <= 820) {
|
|
// For smaller screen, show shadow earlier
|
|
toggleHeaderShadow(50);
|
|
} else {
|
|
toggleHeaderShadow(100);
|
|
}
|
|
});
|
|
|
|
function fixTocItemsIndent() {
|
|
document.querySelectorAll('#TableOfContents a').forEach($tocItem => {
|
|
const itemId = $tocItem.getAttribute("href").substring(1)
|
|
$tocItem.classList.add(HEADING_TO_TOC_CLASS[document.getElementById(itemId).tagName]);
|
|
});
|
|
}
|
|
|
|
function createScrollSpy() {
|
|
var elements = document.querySelectorAll('#toc a');
|
|
document.addEventListener('scroll', function () {
|
|
elements.forEach(function (element) {
|
|
const boundingRect = document.getElementById(element.getAttribute('href').substring(1)).getBoundingClientRect();
|
|
if (boundingRect.top <= 55 && boundingRect.bottom >= 0) {
|
|
elements.forEach(function (elem) {
|
|
elem.classList.remove('active');
|
|
});
|
|
element.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleHeaderShadow(scrollY) {
|
|
if (window.scrollY > scrollY) {
|
|
document.querySelectorAll('.header').forEach(function(item) {
|
|
item.classList.add('header-shadow')
|
|
})
|
|
} else {
|
|
document.querySelectorAll('.header').forEach(function(item) {
|
|
item.classList.remove('header-shadow')
|
|
})
|
|
}
|
|
}
|
|
|
|
function setThemeByUserPref() {
|
|
darkThemeCss = document.getElementById("dark-theme");
|
|
const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
|
|
const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
|
|
setTheme(savedTheme, darkThemeToggles);
|
|
darkThemeToggles.forEach(el => el.addEventListener('click', toggleTheme, {capture: true}))
|
|
}
|
|
|
|
function toggleTheme(event) {
|
|
toggleIcon = event.currentTarget.querySelector("a svg.feather");
|
|
if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
|
|
setTheme('light', [event.currentTarget]);
|
|
} else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
|
|
setTheme('dark', [event.currentTarget]);
|
|
}
|
|
}
|
|
|
|
function setTheme(themeToSet, targets) {
|
|
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
|
|
darkThemeCss.disabled = themeToSet === 'light';
|
|
targets.forEach((target) => {
|
|
target.querySelector('a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg();
|
|
target.querySelector("#dark-theme-toggle-screen-reader-target").textContent = [THEME_TO_ICON_TEXT_CLASS[themeToSet]];
|
|
});
|
|
}
|