vlw.se/assets/js/shells/document.js

import { Elevent } from "/assets/js/._Elevent.mjs";

// Handle search box open/close buttons
{
	// Open search box
	new Elevent("click", document.querySelector(".searchbox-open"), () => {
		document.querySelector("header").classList.add("searchboxActive");
		// Select searchbox inner input element
		document.querySelector("searchbox input").focus();
	});

	// Close searchbox
	new Elevent("click", document.querySelector(".searchbox-close"), () => {
		// Disable search button interaction while animation is running
		// This is required to prevent conflicts with the :hover "peak" transformation
		const searchButtonElement = document.querySelector("header button.search");
		const transformDuration = parseInt(window.getComputedStyle(searchButtonElement).getPropertyValue("--transform-duration"));
		searchButtonElement.style.setProperty("pointer-events", "none");

		document.querySelector("header").classList.remove("searchboxActive");

		// Wait for the transform animation to finish
		setTimeout(() => searchButtonElement.style.removeProperty("pointer-events"), transformDuration);
	});
}

// Root shell navigation event handlers
{
	const classNameLoading = "loading";

	// Top navigation started
	new Elevent(vv.Navigation.EVENTS.STARTED, vv.Navigation.rootShellElement, () => {
		vv.Navigation.rootShellElement.classList.add(classNameLoading);

		// Close searchbox on vv-shell page navigation
		document.querySelector("header").classList.remove("searchboxActive");

		// Wait 200ms for the page fade-in animation to finish
		setTimeout(() => vv.Navigation.rootShellElement.classList.remove("loading"), 200);
	});

	// Top navigation finished
	new Elevent(vv.Navigation.EVENTS.FINISHED, vv.Navigation.rootShellElement, () => {
		vv.Navigation.rootShellElement.classList.remove(classNameLoading);
	});
}

// Handle search logic
{
	const searchResultsElement = document.querySelector("search-results");

	document.querySelector("header input[type='search']").addEventListener("input", (event) => {
		// Debounce user input
		clearTimeout(event.target._throttle);
		event.target._throttle = setTimeout(() => {
			// Navigate search-results element on user input
			new vv.Navigation(`/search?q=${event.target.value}`).navigate(searchResultsElement);
		}, 100);
	});
}