103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
"use strict";
|
|
|
|
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const defaultPrefs = {
|
|
language: "english",
|
|
theme: "auto",
|
|
};
|
|
|
|
document.querySelector('script[data-website-id]').addEventListener('load', () => {
|
|
try {
|
|
umami.identify({ deviceTheme: darkModeMediaQuery ? "dark" : "light" });
|
|
} catch {}
|
|
});
|
|
|
|
function applyPreference(key, value, shouldSave) {
|
|
if (umami !== null) {
|
|
umami.identify({
|
|
[`pref-${key}`]: value,
|
|
});
|
|
if (shouldSave) {
|
|
umami.track(`Set ${key} to ${value}`);
|
|
}
|
|
}
|
|
document.body.setAttribute(`data-${key}`, value);
|
|
document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
|
|
if (input.value === value) {
|
|
input.checked = true;
|
|
}
|
|
});
|
|
if (shouldSave) {
|
|
localStorage.setItem(key, value);
|
|
}
|
|
}
|
|
|
|
/** @param {Event} evt */
|
|
function removeEffect({ target }) {
|
|
const effectsLayer = document.querySelector("#effects");
|
|
const effects = Array.from(effectsLayer.children).filter(
|
|
(e) => e.__effectParent === target,
|
|
);
|
|
effects.forEach((e) => {
|
|
e.getAnimations().forEach((anim) => {
|
|
if (anim.currentTime < 100) {
|
|
anim.pause();
|
|
effectsLayer.removeChild(e);
|
|
return;
|
|
}
|
|
anim.pause();
|
|
anim.updatePlaybackRate(-0.25);
|
|
anim.play();
|
|
anim.addEventListener("finish", () => {
|
|
if (effectsLayer.contains(e)) {
|
|
effectsLayer.removeChild(e);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
/** @param {Event} evt */
|
|
function addEffect({ target }) {
|
|
const effectsLayer = document.querySelector("#effects");
|
|
if (
|
|
target == null ||
|
|
!target["matches"] ||
|
|
!target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
|
|
) {
|
|
return;
|
|
}
|
|
const color = window.getComputedStyle(target).getPropertyValue('--glowColor');
|
|
const rects = Array.from(target.getClientRects());
|
|
Array.from(target.children).forEach((child) => {
|
|
rects.push(...Array.from(child.getClientRects()));
|
|
});
|
|
rects.forEach((rect) => {
|
|
const { top, left, width, height } = rect;
|
|
const newEffect = document.createElement("div");
|
|
newEffect.__effectParent = target;
|
|
newEffect.classList.add("effect-instance");
|
|
const padding = "10rem";
|
|
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`;
|
|
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`;
|
|
newEffect.style.width = `calc(${width}px + 2 * ${padding})`;
|
|
newEffect.style.height = `calc(${height}px + 2 * ${padding})`;
|
|
newEffect.style.setProperty('--glowColor', color);
|
|
effectsLayer.appendChild(newEffect);
|
|
});
|
|
}
|
|
|
|
Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
|
|
const currentPref = localStorage.getItem(key) ?? defaultPref;
|
|
applyPreference(key, currentPref, false);
|
|
document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
|
|
input.addEventListener("change", (e) => {
|
|
applyPreference(key, e.currentTarget.value, true);
|
|
});
|
|
});
|
|
});
|
|
document.addEventListener("mouseenter", addEffect, true);
|
|
document.addEventListener("focus", addEffect, true);
|
|
|
|
document.addEventListener("mouseleave", removeEffect, true);
|
|
document.addEventListener("blur", removeEffect, true);
|