vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-13 13:03:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: search minimum length offset and merge oversight (#47)

Browse source 
Fixed merge derp from #46 and minimum search query length offset

Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/47
This commit is contained in:
Victor Westerlund 2025-08-02 14:58:36 +02:00
parent 03492df615
commit fafa8c5852
2 changed files with 2 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
public/assets/js/shell.js
View file

@ -1,68 +1,13 @@
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
@ -98,4 +43,3 @@ document.querySelector("header input[type='search']").addEventListener("input",
new VV(document.querySelector("search-results")).navigate(`/search?q=${event.target.value}`);
}, DEBOUNCE_TIMEOUT_MS);
});
>>>>>>> chore/v3.2

4
public/search.php
View file

@ -17,7 +17,7 @@
public function __construct() {
$this->query = $_GET[GET_KEY_QUERY] ?? "";
$this->results = strlen($this->query) > MIN_QUERY_LENGTH ? parent::query($this->query, limit: LIMIT_RESULTS) : [];
$this->results = strlen($this->query) >= MIN_QUERY_LENGTH ? parent::query($this->query, limit: LIMIT_RESULTS) : [];
}
}
@ -88,7 +88,7 @@
</section>
<?php break; ?>
<?php case 1: ?>
<?php case (MIN_QUERY_LENGTH - 1): ?>
<section class="center">
<?= VV::embed("public/assets/media/icons/search.svg") ?>
<p>Almost there, type at least two letters to search</p>