Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-01-23 00:06:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

searchbar cleanups

Browse Source
This commit is contained in:
Anthony Stirling 2023-07-19 23:15:16 +01:00
parent 4129c75475
commit 0eb019fc3c
2 changed files with 122 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,72 +1,72 @@
// Toggle search bar when the search icon is clicked // Toggle search bar when the search icon is clicked
document.querySelector('#search-icon').addEventListener('click', function(e) { document.querySelector('#search-icon').addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
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');
dummyContainer.style.position = 'absolute'; dummyContainer.style.position = 'absolute';
dummyContainer.style.visibility = 'hidden'; dummyContainer.style.visibility = 'hidden';
dummyContainer.style.whiteSpace = 'nowrap'; // Ensure we measure full width dummyContainer.style.whiteSpace = 'nowrap'; // Ensure we measure full width
document.body.appendChild(dummyContainer); document.body.appendChild(dummyContainer);
var maxWidth = 0; var maxWidth = 0;
items.forEach(function(item) { items.forEach(function(item) {
var clone = item.cloneNode(true); var clone = item.cloneNode(true);
dummyContainer.appendChild(clone); dummyContainer.appendChild(clone);
var width = clone.offsetWidth; var width = clone.offsetWidth;
if (width > maxWidth) { if (width > maxWidth) {
maxWidth = width; maxWidth = width;
} }
dummyContainer.removeChild(clone); dummyContainer.removeChild(clone);
}); });
document.body.removeChild(dummyContainer); document.body.removeChild(dummyContainer);
// Store max width for later use // Store max width for later use
window.navItemMaxWidth = maxWidth; window.navItemMaxWidth = maxWidth;
}; };
// 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.toLowerCase();
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) { items.forEach(function(item) {
var titleElement = item.querySelector('.icon-text'); var titleElement = item.querySelector('.icon-text');
var iconElement = item.querySelector('.icon'); var iconElement = item.querySelector('.icon');
var itemHref = item.getAttribute('href'); var itemHref = item.getAttribute('href');
if (titleElement && iconElement && itemHref !== '#') { if (titleElement && iconElement && itemHref !== '#') {
var title = titleElement.innerText.toLowerCase(); var title = titleElement.innerText;
if (title.indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) { if (title.toLowerCase().indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
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';
}); });

53
src/main/resources/templates/fragments/navbar.html
View File

@ -219,14 +219,61 @@
</a> </a>
<!-- Search Bar --> <!-- Search Bar -->
<div class="collapse position-absolute" id="navbarSearch"> <div class="collapse position-absolute" id="navbarSearch">
<form class="d-flex p-2 bg-white border" id="searchForm"> <form class="d-flex p-2 bg-white border search-form" id="searchForm">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput"> <input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
</form> </form>
<!-- Search Results --> <!-- Search Results -->
<div id="searchResults" class="border p-2 bg-white"></div> <div id="searchResults" class="border p-2 bg-white search-results"></div>
</div> </div>
</li> </li>
<style>
#search-icon i {
font-size: 24px; /* Adjust this to your desired size */
transition: color 0.3s;
}
#search-icon:hover i {
color: #666; /* Adjust this to your hover color */
}
#navbarSearch {
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#navbarSearch.show {
max-height: 300px; /* Adjust this to your desired max height */
}
.search-input {
transition: border 0.3s, box-shadow 0.3s;
}
.search-input:focus {
border-color: #666; /* Adjust this to your focus color */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */
}
#searchResults {
max-width: 300px; /* Adjust to your preferred width */
transition: height 0.3s ease; /* Smooth height transition */
}
/* Set a fixed height and styling for each search result item */
.search-results a {
display: flex;
align-items: center;
gap: 10px; /* space between icon and text */
height: 40px; /* Adjust based on your design */
overflow: hidden; /* Prevent content from overflowing */
white-space: nowrap; /* Prevent text from wrapping to next line */
text-overflow: ellipsis; /* Truncate text if it's too long */
}
</style>
</ul> </ul>