Graphite/website/static/js/navbar.js

const NAV_BUTTON_INITIAL_FONT_SIZE = 28; // Keep up to date with the initial `--nav-font-size` in base.scss
const RIPPLE_ANIMATION_MILLISECONDS = 100;
const RIPPLE_WIDTH = 100;
const HANDLE_STRETCH = 0.4;

let /** @type {NodeList | undefined} **/ navButtons;
let /** @type {Element | undefined} **/ rippleSvg;
let /** @type {Element | undefined} **/ ripplePath;
let /** @type {number | undefined} **/ fullRippleHeight;
let /** @type {{ element: HTMLElement, goingUp: boolean, animationStartTime: number, animationEndTime: number }[]} **/ ripples;
let /** @type {number} **/ activeRippleIndex;

window.addEventListener("DOMContentLoaded", initializeRipples);

function initializeRipples() {
	window.addEventListener("resize", () => animate(true));

	navButtons = document.querySelectorAll("header nav a") || undefined;
	rippleSvg = document.querySelector("header .ripple") || undefined;
	ripplePath = rippleSvg?.querySelector("path") || undefined;
	fullRippleHeight = rippleSvg ? Number.parseInt(window.getComputedStyle(rippleSvg).height, 10) || undefined : undefined;

	ripples = Array.from(navButtons)
		.filter((x) => x instanceof HTMLElement)
		.map((button) => ({
			element: button,
			goingUp: false,
			animationStartTime: 0,
			animationEndTime: 0,
		}));

	activeRippleIndex = ripples.findIndex((ripple) => {
		let link = ripple.element.getAttribute("href");
		if (!link) return false;
		if (!link.endsWith("/")) link += "/";
		let location = window.location.pathname;
		if (!location.endsWith("/")) location += "/";

		// Special case for the root, which will otherwise match as the starting prefix of all pages
		if (link === "/" && location === "/") return true;
		if (link === "/") return false;

		return location.startsWith(link);
	});

	ripples.forEach((ripple) => {
		const updateTimings = (/** @type {boolean} **/ goingUp) => {
			const start = ripple.animationStartTime;
			const now = Date.now();
			const stop = ripple.animationStartTime + RIPPLE_ANIMATION_MILLISECONDS;

			const elapsed = now - start;
			const remaining = stop - now;

			ripple.goingUp = goingUp;
			// Encode the potential reversing of direction via the animation start and end times
			ripple.animationStartTime = now < stop ? now - remaining : now;
			ripple.animationEndTime = now < stop ? now + elapsed : now + RIPPLE_ANIMATION_MILLISECONDS;

			animate();
		};

		ripple.element.addEventListener("pointerenter", () => updateTimings(true));
		ripple.element.addEventListener("pointerleave", () => updateTimings(false));
	});

	if (activeRippleIndex >= 0) {
		ripples[activeRippleIndex] = {
			...ripples[activeRippleIndex],
			goingUp: true,
			// Set to non-zero, but very old times (1ms after epoch), so the math works out as if the animation has already completed
			animationStartTime: 1,
			animationEndTime: 1 + RIPPLE_ANIMATION_MILLISECONDS,
		};
	}

	setRipples();
}

function animate(forceRefresh = false) {
	const FUZZ_MILLISECONDS = 100;
	const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime > 0 && ripple.animationEndTime > 0 && Date.now() <= ripple.animationEndTime + FUZZ_MILLISECONDS);

	if (animateThisFrame || forceRefresh) {
		setRipples();
		window.requestAnimationFrame(() => animate());
	}
}

function setRipples() {
	const lerp = (/** @type {number} **/ a, /** @type {number} **/ b, /** @type {number} **/ t) => a + (b - a) * t;
	const ease = (/** @type {number} **/ x) => 1 - (1 - x) * (1 - x);
	const clamp01 = (/** @type {number} **/ x) => Math.min(Math.max(x, 0), 1);

	if (!rippleSvg || !ripplePath || !navButtons || !fullRippleHeight || !(navButtons[0] instanceof HTMLElement)) return;

	const rippleSvgRect = rippleSvg.getBoundingClientRect();

	const rippleStrokeWidth = Number.parseInt(window.getComputedStyle(ripplePath).getPropertyValue("--border-thickness"), 10);
	const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize, 10) || NAV_BUTTON_INITIAL_FONT_SIZE;
	const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;

	// Position of bottom centerline to top centerline
	const rippleBaselineCenterline = fullRippleHeight - rippleStrokeWidth / 2;
	const rippleToplineCenterline = rippleStrokeWidth / 2;

	let path = `M -16,${rippleBaselineCenterline - 16} L 0,${rippleBaselineCenterline} `;

	ripples.forEach((ripple) => {
		if (ripple.animationStartTime === 0 || ripple.animationEndTime === 0) return;

		const elapsed = Date.now() - ripple.animationStartTime;
		const duration = ripple.animationEndTime - ripple.animationStartTime;
		const t = ease(clamp01(elapsed / duration));

		const bumpCrestRaiseFactor = (ripple.goingUp ? t : 1 - t) * mediaQueryScaleFactor;
		const bumpCrest = lerp(rippleToplineCenterline, rippleBaselineCenterline, bumpCrestRaiseFactor);
		const bumpCrestDelta = bumpCrest - rippleStrokeWidth / 2;

		const buttonRect = ripple.element.getBoundingClientRect();
		const buttonCenter = buttonRect.width / 2;
		const rippleCenter = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
		const rippleOffset = rippleCenter - buttonCenter;
		const rippleStartX = buttonRect.left - rippleSvgRect.left - rippleOffset;
		const handleRadius = rippleCenter * HANDLE_STRETCH;

		path += `L ${rippleStartX},${rippleBaselineCenterline} `;
		path += `c ${handleRadius},0 ${rippleCenter - handleRadius},${-bumpCrestDelta} ${rippleCenter},${-bumpCrestDelta} `;
		path += `s ${rippleCenter - handleRadius},${bumpCrestDelta} ${rippleCenter},${bumpCrestDelta} `;
	});

	path += `L ${rippleSvgRect.width + 16},${rippleBaselineCenterline} L${rippleSvgRect.width + 16},${rippleBaselineCenterline - 16}`;

	ripplePath.setAttribute("d", path);
}