mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2026-04-13 01:39:40 +02:00
Victor Westerlund
55a8234800
In this PR we move all of the CSS and JavaScript assets from the public assets directory to a new directory in the project root. The main reason for this is that I would like to believe this makes them easier to find. Since all CSS and JS is bundled with each page anyways there is no need to access these directly from a public directory. The main argument against this I think would be "transparency". We already run this site with `display_php_source=true` in Vegvisir (so page source code can be inspected by appending `.php` to the end of a url. But there is of course no reason to trust that it's the actual source code. Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/72
45 lines
2.1 KiB
JavaScript
45 lines
2.1 KiB
JavaScript
const DEBOUNCE_TIMEOUT_MS = 100;
|
|
const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive";
|
|
|
|
// Navigate to the start page if the logo in the header is clicked
|
|
document.querySelector("header .logo").addEventListener("click", () => new VV().navigate("/"));
|
|
|
|
// 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
|
|
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);
|
|
});
|