kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-09-21 12:20:13 +02:00
Code

Merge pull request #1199 from jimdouk/fixFrontEndIssue

Browse Source 
Enhance UI Search Functionality in Navbar
This commit is contained in:
Anthony Stirling 2024-05-12 14:36:52 +01:00 committed by GitHub
commit f2b7aeeb1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/resources/static/css/navbar.css
View File

@ -11,7 +11,7 @@
} }
#searchForm { #searchForm {
width: 200px; /* Adjust this value as needed */ width: 300px; /* Adjust this value as needed */
} }
/* Style the search results to match the navbar */ /* Style the search results to match the navbar */
@ -21,6 +21,7 @@
width: 100%; width: 100%;
max-width: 300px; /* Adjust to your preferred width */ max-width: 300px; /* Adjust to your preferred width */
transition: height 0.3s ease; /* Smooth height transition */ transition: height 0.3s ease; /* Smooth height transition */
padding: 0px !important;
} }
#searchResults .dropdown-item { #searchResults .dropdown-item {

58
src/main/resources/static/js/search.js
View File

@ -4,6 +4,7 @@ document.querySelector("#search-icon").addEventListener("click", function (e) {
var searchBar = document.querySelector("#navbarSearch"); var searchBar = document.querySelector("#navbarSearch");
searchBar.classList.toggle("show"); searchBar.classList.toggle("show");
}); });
window.onload = function () { window.onload = function () {
var items = document.querySelectorAll(".dropdown-item, .nav-link"); var items = document.querySelectorAll(".dropdown-item, .nav-link");
var dummyContainer = document.createElement("div"); var dummyContainer = document.createElement("div");
@ -32,44 +33,47 @@ window.onload = function () {
// Show search results as user types in search box // Show search results as user types in search box
document.querySelector("#navbarSearchInput").addEventListener("input", function (e) { document.querySelector("#navbarSearchInput").addEventListener("input", function (e) {
var searchText = e.target.value.toLowerCase(); var searchText = e.target.value.trim().toLowerCase(); // Trim whitespace and convert to lowercase
var items = document.querySelectorAll(".dropdown-item, .nav-link"); var items = document.querySelectorAll(".dropdown-item, .nav-link");
var resultsBox = document.querySelector("#searchResults"); var resultsBox = document.querySelector("#searchResults");
// Clear any previous results // Clear any previous results
resultsBox.innerHTML = ""; resultsBox.innerHTML = "";
items.forEach(function (item) { // Check if search text is not empty
var titleElement = item.querySelector(".icon-text"); if (searchText !== "") {
var iconElement = item.querySelector(".icon"); items.forEach(function (item) {
var itemHref = item.getAttribute("href"); var titleElement = item.querySelector(".icon-text");
var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string var iconElement = item.querySelector(".icon");
var itemHref = item.getAttribute("href");
var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
if (titleElement && iconElement && itemHref !== "#") { if (titleElement && iconElement && itemHref !== "#") {
var title = titleElement.innerText; var title = titleElement.innerText;
if ( if (
(title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) && (title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
!resultsBox.querySelector(`a[href="${item.getAttribute("href")}"]`) !resultsBox.querySelector(`a[href="${itemHref}"]`)
) { ) {
var result = document.createElement("a"); var result = document.createElement("a");
result.href = itemHref; result.href = itemHref;
result.classList.add("dropdown-item"); result.classList.add("dropdown-item");
var resultIcon = document.createElement("img"); var resultIcon = document.createElement("img");
resultIcon.src = iconElement.src; resultIcon.src = iconElement.src;
resultIcon.alt = "icon"; resultIcon.alt = "icon";
resultIcon.classList.add("icon"); resultIcon.classList.add("icon");
result.appendChild(resultIcon); result.appendChild(resultIcon);
var resultText = document.createElement("span"); var resultText = document.createElement("span");
resultText.textContent = title; resultText.textContent = title;
resultText.classList.add("icon-text"); resultText.classList.add("icon-text");
result.appendChild(resultText); result.appendChild(resultText);
resultsBox.appendChild(result); resultsBox.appendChild(result);
}
} }
} });
}); }
// Set the width of the search results box to the maximum width // Set the width of the search results box to the maximum width
resultsBox.style.width = window.navItemMaxWidth + "px"; resultsBox.style.width = window.navItemMaxWidth + "px";