e4a76e96af
* CSS corrections * HTML corrections * JS corrections * JAVA corrections * remove tab * CSS corrections 2 * JS corrections 2 * back to the roots * max-linie 127 * add slash hr|br * return bootstrap-icons.css * return bootstrap-icons.min.css * return bootstrap.min.css * Update bootstrap-icons.css * Update bootstrap-icons.min.css * Update bootstrap-icons.min.css * Update bootstrap.min.css * CSS corrections * HTML corrections * JS corrections * JAVA corrections * remove tab * CSS corrections 2 * JS corrections 2 * back to the roots * max-linie 127 * add slash hr|br * return bootstrap-icons.css * Update bootstrap-icons.css * Bootstrap CSS * Update prism.css
76 lines
2.6 KiB
JavaScript
76 lines
2.6 KiB
JavaScript
// Toggle search bar when the search icon is clicked
|
|
document.querySelector("#search-icon").addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
var searchBar = document.querySelector("#navbarSearch");
|
|
searchBar.classList.toggle("show");
|
|
});
|
|
window.onload = function () {
|
|
var items = document.querySelectorAll(".dropdown-item, .nav-link");
|
|
var dummyContainer = document.createElement("div");
|
|
dummyContainer.style.position = "absolute";
|
|
dummyContainer.style.visibility = "hidden";
|
|
dummyContainer.style.whiteSpace = "nowrap"; // Ensure we measure full width
|
|
document.body.appendChild(dummyContainer);
|
|
|
|
var maxWidth = 0;
|
|
|
|
items.forEach(function (item) {
|
|
var clone = item.cloneNode(true);
|
|
dummyContainer.appendChild(clone);
|
|
var width = clone.offsetWidth;
|
|
if (width > maxWidth) {
|
|
maxWidth = width;
|
|
}
|
|
dummyContainer.removeChild(clone);
|
|
});
|
|
|
|
document.body.removeChild(dummyContainer);
|
|
|
|
// Store max width for later use
|
|
window.navItemMaxWidth = maxWidth;
|
|
};
|
|
|
|
// Show search results as user types in search box
|
|
document.querySelector("#navbarSearchInput").addEventListener("input", function (e) {
|
|
var searchText = e.target.value.toLowerCase();
|
|
var items = document.querySelectorAll(".dropdown-item, .nav-link");
|
|
var resultsBox = document.querySelector("#searchResults");
|
|
|
|
// Clear any previous results
|
|
resultsBox.innerHTML = "";
|
|
|
|
items.forEach(function (item) {
|
|
var titleElement = item.querySelector(".icon-text");
|
|
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 !== "#") {
|
|
var title = titleElement.innerText;
|
|
if (
|
|
(title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) &&
|
|
!resultsBox.querySelector(`a[href="${item.getAttribute("href")}"]`)
|
|
) {
|
|
var result = document.createElement("a");
|
|
result.href = itemHref;
|
|
result.classList.add("dropdown-item");
|
|
|
|
var resultIcon = document.createElement("img");
|
|
resultIcon.src = iconElement.src;
|
|
resultIcon.alt = "icon";
|
|
resultIcon.classList.add("icon");
|
|
result.appendChild(resultIcon);
|
|
|
|
var resultText = document.createElement("span");
|
|
resultText.textContent = title;
|
|
resultText.classList.add("icon-text");
|
|
result.appendChild(resultText);
|
|
|
|
resultsBox.appendChild(result);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Set the width of the search results box to the maximum width
|
|
resultsBox.style.width = window.navItemMaxWidth + "px";
|
|
});
|