From cdd0c13cdceafca2656d0bc4fb3955e0cfae2876 Mon Sep 17 00:00:00 2001 From: partisan Date: Tue, 22 Oct 2024 10:46:47 +0200 Subject: [PATCH] cleaned up JS --- .gitignore | 4 +- static/js/autocomplete.js | 4 +- static/js/buttonsmove.js | 34 ++++++++++++++++ static/js/dynamicscrolling.js | 7 +++- static/js/imagetitletrim.js | 3 ++ static/js/sidemenu.js | 31 +++++++++++++++ templates/search.html | 74 ++--------------------------------- 7 files changed, 82 insertions(+), 75 deletions(-) create mode 100644 static/js/buttonsmove.js create mode 100644 static/js/sidemenu.js diff --git a/.gitignore b/.gitignore index 93681d1..92816ed 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ config.json opensearch.xml config.ini -image_cache/ \ No newline at end of file +image_cache/ +*.min.js +*.min.css \ No newline at end of file diff --git a/static/js/autocomplete.js b/static/js/autocomplete.js index 939116b..bcafac1 100644 --- a/static/js/autocomplete.js +++ b/static/js/autocomplete.js @@ -1,4 +1,6 @@ -// Wait for the DOM to load +/* + This script is responsible for fetching search suggestions when the user types in the search bar. It also shows and hides the search suggestions wrapper. +*/ document.addEventListener('DOMContentLoaded', () => { const searchInput = document.getElementById('search-input'); const searchWrapper = document.querySelector('.wrapper, .wrapper-results'); diff --git a/static/js/buttonsmove.js b/static/js/buttonsmove.js new file mode 100644 index 0000000..1543621 --- /dev/null +++ b/static/js/buttonsmove.js @@ -0,0 +1,34 @@ +/* + This script is responsible for moving the search buttons down when search suggestions appear. +*/ +document.addEventListener('DOMContentLoaded', () => { + const searchTypeIcons = document.querySelector('.search-type-icons'); + const resultsWrapper = document.querySelector('.wrapper.custom-search-page .autocomplete'); + + // Function to move buttons without affecting the page flow + function adjustSearchIconsPosition() { + const autocompleteHeight = resultsWrapper.offsetHeight; + if (autocompleteHeight > 0) { + // Use transform to move the buttons down + searchTypeIcons.style.transform = `translateY(${autocompleteHeight + 20}px)`; + } else { + // Reset the buttons position when no suggestions + searchTypeIcons.style.transform = 'translateY(0)'; + } + } + + // Observer to detect changes in the autocomplete content and adjust position + const observer = new MutationObserver(() => { + adjustSearchIconsPosition(); + }); + + // Start observing the autocomplete for content changes + observer.observe(resultsWrapper, { childList: true, subtree: true }); + + // Optionally adjust when window resizes (for responsive changes) + window.addEventListener('resize', adjustSearchIconsPosition); + + // Adjust initially on load in case suggestions are already present + adjustSearchIconsPosition(); + } +); \ No newline at end of file diff --git a/static/js/dynamicscrolling.js b/static/js/dynamicscrolling.js index a3975eb..d5373cf 100644 --- a/static/js/dynamicscrolling.js +++ b/static/js/dynamicscrolling.js @@ -1,3 +1,6 @@ +/* + This script is responsible for fetching new results on the same page when the user scrolls to the bottom of the page. +*/ document.addEventListener("DOMContentLoaded", function() { const templateData = document.getElementById('template-data'); let page = parseInt(templateData.getAttribute('data-page')) || 1; @@ -12,10 +15,10 @@ document.addEventListener("DOMContentLoaded", function() { if (loading || !hasMoreResults) return; loading = true; - // Show loading indicator if taking more than 100ms + // Show loading indicator if taking more than 150ms loadingTimeout = setTimeout(() => { loadingIndicator.style.display = 'flex'; - }, 100); + }, 150); fetch(`/search?q=${encodeURIComponent(query)}&t=${encodeURIComponent(searchType)}&p=${newPage}`) .then(response => { diff --git a/static/js/imagetitletrim.js b/static/js/imagetitletrim.js index cf388f0..7579f1f 100644 --- a/static/js/imagetitletrim.js +++ b/static/js/imagetitletrim.js @@ -1,3 +1,6 @@ +/* + This script is responsible for trimming image title/name on the image results page. (Since I haven't figured out how to make this work in CSS.) +*/ document.addEventListener('DOMContentLoaded', function() { let imagesContainer = document.querySelector('.images'); let observer; diff --git a/static/js/sidemenu.js b/static/js/sidemenu.js new file mode 100644 index 0000000..74c13de --- /dev/null +++ b/static/js/sidemenu.js @@ -0,0 +1,31 @@ +/* + This script is responsible for opening and closing the menu from the side. +*/ +function openNav() { + document.getElementById("mySidenav").style.width = "250px"; + document.body.classList.add('menu-open'); +} + +function closeNav() { + document.getElementById("mySidenav").style.width = "0"; + document.body.classList.remove('menu-open'); +} + +function setTheme(theme) { + window.location.href = '/search?theme=' + theme; +} + +function updateLanguage(langCode) { + // Send AJAX request to update language settings + const xhr = new XMLHttpRequest(); + xhr.open('POST', '/updateSettings', true); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.onload = function () { + if (this.status >= 200 && this.status < 300) { + location.reload(); + } else { + console.error('Failed to update language.'); + } + }; + xhr.send(encodeURI('site_lang=' + langCode)); +} \ No newline at end of file diff --git a/templates/search.html b/templates/search.html index 5afd027..fe97cc5 100755 --- a/templates/search.html +++ b/templates/search.html @@ -169,77 +169,9 @@ - - - - - + + + \ No newline at end of file