cleaned up JS

.gitignore

@@ -2,3 +2,5 @@ config.json
 opensearch.xml
 config.ini
 image_cache/
+*.min.js
+*.min.css

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');

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();
+    }
+);

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 => {

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;

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));
+}

templates/search.html

@@ -169,77 +169,9 @@
         </div>
     </form>
 
-    <!-- JavaScript Functions -->
-    <script>
-document.addEventListener('DOMContentLoaded', () => {
-    const customSearchWrapper = document.querySelector('.wrapper.custom-search-page');
-    const searchTypeIcons = document.querySelector('.search-type-icons');
-    const resultsWrapper = document.querySelector('.wrapper.custom-search-page .autocomplete');
-
-    // Check if we are on the correct page
-    if (customSearchWrapper && resultsWrapper) {
-
-        // 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();
-    }
-});
-
-    </script>
-    <script>
-        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));
-        }
-    </script>
-
-    <!-- Include autocomplete.js -->
+    <!-- Included JavaScript Functions -->
+    <script defer src="/static/js/buttonsmove.js"></script>
+    <script defer src="/static/js/sidemenu.js"></script>
     <script defer src="/static/js/autocomplete.js"></script>
 </body>
 </html>