From 9aabff0a1264056d0f6e9a1065ab56e53015ff89 Mon Sep 17 00:00:00 2001 From: partisan Date: Wed, 28 Aug 2024 23:10:18 +0200 Subject: [PATCH] fixed and cleaned autocomplete.js --- static/js/autocomplete.js | 215 ++++++++------------------------------ 1 file changed, 44 insertions(+), 171 deletions(-) diff --git a/static/js/autocomplete.js b/static/js/autocomplete.js index c9049c5..3e1cb58 100644 --- a/static/js/autocomplete.js +++ b/static/js/autocomplete.js @@ -37,7 +37,7 @@ if (resultsSave != null) { const searchInput = document.getElementById('search-input'); const searchWrapper = document.querySelectorAll('.wrapper, .wrapper-results')[0]; const resultsWrapper = document.querySelector('.autocomplete'); -const clearSearch = document.querySelector("#clearSearch"); +// const clearSearch = document.querySelector("#clearSearch"); async function getSuggestions(query) { try { @@ -70,15 +70,15 @@ searchInput.addEventListener("focus", async () => { renderResults(results); }) -clearSearch.style.visibility = "visible"; // Only show the clear search button for JS users. -clearSearch.addEventListener("click", () => { - searchInput.value = ""; - searchInput.focus(); -}) +// clearSearch.style.visibility = "visible"; // Only show the clear search button for JS users. +// clearSearch.addEventListener("click", () => { +// searchInput.value = ""; +// searchInput.focus(); +// }) searchInput.addEventListener('keydown', (event) => { - if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { - event.preventDefault(); // Prevent the cursor from moving in the search input + if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Tab') { + event.preventDefault(); // Prevent the default behavior, such as moving the cursor // Find the currently selected suggestion element const selectedSuggestion = resultsWrapper.querySelector('.selected'); @@ -86,7 +86,7 @@ searchInput.addEventListener('keydown', (event) => { selectedSuggestion.classList.remove('selected'); // Deselect the currently selected suggestion } - // Increment or decrement the current index based on the arrow key pressed + // Increment current index when ArrowUp is pressed otherwise hen Tab OR ArrowDown decrement if (event.key === 'ArrowUp') { currentIndex--; } else { @@ -107,9 +107,14 @@ searchInput.addEventListener('keydown', (event) => { } }); +// Default to the currently selected type or fallback to 'text' +let selectedType = document.querySelector('.search-active')?.value || 'text'; + +// Function to render results function renderResults(results) { if (!results || !results.length || !searchInput.value) { - return searchWrapper.classList.remove('show'); + searchWrapper.classList.remove('show'); + return; } let content = ''; @@ -117,26 +122,38 @@ function renderResults(results) { content += `
  • ${item}
    • `; }); - // Only show the autocomplete suggestions if the search input has a non-empty value if (searchInput.value) { searchWrapper.classList.add('show'); } resultsWrapper.innerHTML = ``; } -resultsWrapper.addEventListener('click', (event) => { - if (event.target.tagName === 'LI') { - // Set the value of the search input to the clicked suggestion - searchInput.value = event.target.textContent; - // Reset the current index - currentIndex = -1; - // Submit the form - searchWrapper.querySelector('input[type="submit"]').click(); - // Remove the show class from the search wrapper - searchWrapper.classList.remove('show'); +// Function to handle search input +searchInput.addEventListener('input', async () => { + let input = searchInput.value; + if (input.length) { + const results = await getSuggestions(input); + renderResults(results); } }); +// Handle click events on the type buttons +const typeButtons = document.querySelectorAll('[name="t"]'); +typeButtons.forEach(button => { + button.addEventListener('click', function() { + selectedType = this.value; + typeButtons.forEach(btn => btn.classList.remove('search-active')); + this.classList.add('search-active'); + }); +}); + +// Handle clicks on search results +resultsWrapper.addEventListener('click', (event) => { + if (event.target.tagName === 'LI') { + const query = event.target.textContent; + window.location.href = `/search?q=${encodeURIComponent(query)}&t=${encodeURIComponent(selectedType)}`; + } +}); document.addEventListener("keypress", (event) => { if (document.activeElement == searchInput) { @@ -161,155 +178,11 @@ document.addEventListener('click', (event) => { } }); -// Load material icons. If the file cannot be loaded, -// skip them and put a warning in the console. -const font = new FontFace('Material Icons Round', 'url("/fonts/material-icons-round-v108-latin-regular.woff2") format("woff2")'); -font.load().then(() => { - const icons = document.getElementsByClassName('material-icons-round'); - - // Display all icons. - for (let icon of icons) { - icon.style.visibility = 'visible'; +// Update visual feedback for selected type on page load +document.addEventListener("DOMContentLoaded", () => { + const activeButton = document.querySelector(`[name="t"][value="${selectedType}"]`); + if (activeButton) { + typeButtons.forEach(btn => btn.classList.remove('search-active')); + activeButton.classList.add('search-active'); } - - // Ensure icons for the different types of searches are sized correctly. - document.querySelectorAll('#sub-search-wrapper-ico').forEach((el) => { - el.style.fontSize = '17px'; - }); -}).catch(() => { - console.warn('Failed to load Material Icons Round. Hiding any icons using said pack.'); }); - -// load image after server side processing -window.addEventListener('DOMContentLoaded', function () { - var knoTitleElement = document.getElementById('kno_title'); - var kno_title = knoTitleElement.dataset.knoTitle; - fetch(kno_title) - .then(response => response.json()) - .then(data => { - const pageId = Object.keys(data.query.pages)[0]; - const thumbnailSource = data.query.pages[pageId].thumbnail.source; - const url = "/img_proxy?url=" + thumbnailSource; - - // update the img tag with url and add kno_wiki_show - var imgElement = document.querySelector('.kno_wiki'); - imgElement.src = url; - imgElement.classList.add('kno_wiki_show'); - - console.log(url); - }) - .catch(error => { - console.log('Error fetching data:', error); - }); -}); - -const urlParams = new URLSearchParams(window.location.search); - -if (document.querySelectorAll(".search-active")[1].getAttribute("value") === "image") { - - // image viewer for image search - const closeButton = document.querySelector('.image-close'); - const imageView = document.querySelector('.image_view'); - const images = document.querySelector('.images'); - const viewImageImg = document.querySelector('.view-image-img'); - const imageSource = document.querySelector('.image-source'); - const imageFull = document.querySelector(".full-size"); - const imageProxy = document.querySelector('.proxy-size'); - const imageViewerLink = document.querySelector('.image-viewer-link'); - const imageSize = document.querySelector('.image-size'); - const fullImageSize = document.querySelector(".full-image-size"); - const imageAlt = document.querySelector('.image-alt'); - const openImageViewer = document.querySelectorAll('.open-image-viewer'); - const imageBefore = document.querySelector('.image-before'); - const imageNext = document.querySelector('.image-next'); - let currentImageIndex = 0; - - closeButton.addEventListener('click', function () { - imageView.classList.remove('image_show'); - imageView.classList.add('image_hide'); - for (const image of document.querySelectorAll(".image_selected")) { - image.classList = ['image']; - } - images.classList.add('images_viewer_hidden'); - }); - - openImageViewer.forEach((image, index) => { - image.addEventListener('click', function (event) { - event.preventDefault(); - currentImageIndex = index; - showImage(); - }); - }); - - document.addEventListener('keydown', function (event) { - if (searchInput == document.activeElement) - return; - if (event.key === 'ArrowLeft') { - currentImageIndex = (currentImageIndex - 1 + openImageViewer.length) % openImageViewer.length; - showImage(); - } - else if (event.key === 'ArrowRight') { - currentImageIndex = (currentImageIndex + 1) % openImageViewer.length; - showImage(); - } - }); - - imageBefore.addEventListener('click', function () { - currentImageIndex = (currentImageIndex - 1 + openImageViewer.length) % openImageViewer.length; - showImage(); - }); - - imageNext.addEventListener('click', function () { - currentImageIndex = (currentImageIndex + 1) % openImageViewer.length; - showImage(); - }); - - function showImage() { - for (const image of document.querySelectorAll(".image_selected")) { - image.classList = ['image']; - } - const current_image = document.querySelectorAll(".image")[currentImageIndex]; - current_image.classList.add("image_selected"); - var rect = current_image.getBoundingClientRect(); - if (!(rect.top >= 0 && rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth))) { - current_image.scrollIntoView(false); - } - - const src = openImageViewer[currentImageIndex].getAttribute('src'); - const alt = openImageViewer[currentImageIndex].getAttribute('alt'); - const data = openImageViewer[currentImageIndex].getAttribute('data'); - const clickableLink = openImageViewer[currentImageIndex].closest('.clickable'); - const href = clickableLink.getAttribute('href'); - viewImageImg.src = src; - imageProxy.href = src; - imageFull.href = data; - imageSource.href = href; - imageSource.textContent = href; - imageViewerLink.href = href; - images.classList.remove('images_viewer_hidden'); - imageView.classList.remove('image_hide'); - imageView.classList.add('image_show'); - imageAlt.textContent = alt; - fullImageSize.textContent = document.querySelector(".image_selected .resolution").textContent; - - getImageSize(src).then(size => { - imageSize.textContent = size; - }); - } - - function getImageSize(url) { - return new Promise((resolve, reject) => { - const img = new Image(); - img.onload = function () { - const size = `${this.width} x ${this.height}`; - resolve(size); - }; - img.onerror = function () { - reject('Error loading image'); - }; - img.src = url; - }); - } -} \ No newline at end of file