vlw.se/public/assets/js/shell.js

const DEBOUNCE_TIMEOUT_MS        = 100;
const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";

<<<<<<< HEAD
// Set global Vegvisir naviation delay for page transition effect
VV.delay = 100;

// Handle search box open/close buttons
{
	// Open search box
	new Elevent("click", document.querySelector(".searchbox-open"), () => {
		document.querySelector("header").classList.add(CLASSNAME_SEARCHBOX_ACTIVE);
		// 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(CLASSNAME_SEARCHBOX_ACTIVE);

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

// Root shell navigation event handlers
{
	// On all top shell navigations
	new Elevent(VV.EVENT.START, VV.shell, () => {
		// Close searchbox on top shell navigations
		document.querySelector("header").classList.remove(CLASSNAME_SEARCHBOX_ACTIVE);
	});
}

// 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(searchResultsElement).navigate(`/search?query=${event.target.value}`);
		}, 100);
	});
}
=======
// Navigate to the start page if the logo in the header is clicked
document.querySelector("header .logo").addEventListener("click", () => new VV().navigate("/"));
>>>>>>> chore/v3.2

// Navigate to the start page if the logo in the header is clicked
document.querySelector("header .logo").addEventListener("click", () => new VV().navigate("/"));

// Scroll page to top on navigation
<<<<<<< HEAD
VV.shell.addEventListener(VV.EVENT.FINISH, () => window.scrollTo({ top: 0 }));
=======
VV.shell.addEventListener(VV.EVENT.FINISH, () => window.scrollTo({ top: 0 }));

// Open search box
document.querySelector(".searchbox-open").addEventListener("click", () => {
	document.querySelector("header").classList.add(CLASSNAME_SEARCHBOX_ACTIVE);
	// Select searchbox inner input element
	document.querySelector("searchbox input").focus();
});

// Close searchbox
document.querySelector(".searchbox-close").addEventListener("click", () => {
	// 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(CLASSNAME_SEARCHBOX_ACTIVE);

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

// Close searchbox on top shell navigations
VV.shell.addEventListener(VV.EVENT.START, () => document.querySelector("header").classList.remove(CLASSNAME_SEARCHBOX_ACTIVE));

// Handle search logic
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(document.querySelector("search-results")).navigate(`/search?q=${event.target.value}`);
	}, DEBOUNCE_TIMEOUT_MS);
});
>>>>>>> chore/v3.2