fix dark reader plugin not working on map results

map.go

@@ -60,6 +60,7 @@ func handleMapSearch(w http.ResponseWriter, settings UserSettings, query string)
 		"Found":       found,
 		"Theme":       settings.Theme,
 		"Safe":        settings.SafeSearch,
+		"IsThemeDark": settings.IsThemeDark,
 	}
 
 	tmpl, err := template.ParseFiles("templates/map.html")

static/css/style.css

@@ -2017,7 +2017,7 @@ body, h1, p, a, input, button {
             position: relative;
             max-width: 80%;
             max-height: 80%;
-            background: #fff;
+            background: var(--search-bg);
             padding: 20px;
             box-sizing: border-box;
             overflow: hidden;
@@ -2035,12 +2035,12 @@ body, h1, p, a, input, button {
 
         #viewer-title {
             font-size: 18px;
-            color: #000;
+            color: var(--text-color);
             margin-bottom: 10px;
         }
 
         #viewer-source-button {
-            color: #1a0dab;
+            color: var(--link);
             text-decoration: none;
             font-size: 16px;
         }

static/js/imagetitletrim.js

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let imagesContainer = document.querySelector('.images');
+    let observer;
+
+    // Function to trim image titles based on the image width
+    function trimTitles() {
+        const images = document.querySelectorAll('.images .image');
+        images.forEach((element) => {
+            const imgElement = element.querySelector('img.clickable');
+            const titleElement = element.querySelector('.img_title.clickable');
+            const detailsElement = element.querySelector('.details');
+
+            if (imgElement.complete && imgElement.naturalWidth) {
+                const imageWidth = imgElement.clientWidth;
+
+                // Set the width of the details div and title to match the image width
+                detailsElement.style.width = imageWidth + 'px';
+                titleElement.style.maxWidth = imageWidth + 'px';
+            }
+
+            // // Add load event listener in case images load dynamically
+            // imgElement.addEventListener('load', function() {
+            //     const imageWidth = imgElement.clientWidth;
+            //     detailsElement.style.width = imageWidth + 'px';
+            //     titleElement.style.maxWidth = imageWidth + 'px';
+            // });
+        });
+    }
+
+    // Call trimTitles periodically to account for dynamic loading, not happy about this one
+    setInterval(() => {
+        trimTitles();
+    }, 10);
+
+    // Observe for dynamically added images
+    function observeNewImages() {
+        observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                mutation.addedNodes.forEach(function(node) {
+                    if (node.nodeType === 1 && node.classList.contains('image')) {
+                        trimTitles();
+                    }
+                });
+            });
+        });
+
+        // Observe the images container for changes
+        observer.observe(imagesContainer, { childList: true, subtree: true });
+    }
+
+    // Run initial title trimming after page load
+    trimTitles();
+
+    // Start observing for dynamic image loading
+    observeNewImages();
+});

templates/images.html

@@ -73,14 +73,8 @@
             <div class="images images_viewer_hidden">
                 <!-- Images Grid -->
                 {{ range $index, $result := .Results }}
-                <div class="image" width="{{ .ThumbHeight }}">
+                <div class="image">
-                    <a class="clickable" href="{{ .Source }}" target="_blank">
+                    <img src="{{ .ThumbProxy }}" alt="{{ .Title }}" data-media="{{ .Media }}" class="clickable">
-                        <img 
-                            class="open-image-viewer"
-                            src="{{ .ThumbProxy }}"
-                            alt="{{ .Title }}"
-                            data-media="{{ .Media }}"
-                        />
                     <div class="resolution">{{ .Width }} × {{ .Height }}</div>
                     <div class="details">
                         <span class="img_title clickable">{{ .Title }}</span>
@@ -121,26 +115,40 @@
     <div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image"></div>
     <script defer src="/static/js/dynamicscrolling.js"></script>
     <script defer src="/static/js/autocomplete.js"></script>
+    <script defer src="/static/js/imagetitletrim.js"></script>
     <script>
 document.addEventListener('DOMContentLoaded', function() {
     let viewerOpen = false;
 
     const viewerOverlay = document.getElementById('image-viewer-overlay');
     viewerOverlay.innerHTML = `
-                <div id="image-viewer">
+        <div id="image-viewer" class="image_view image_hide">
-                    <span id="viewer-close-button" class="material-icons">close</span>
+            <div class="image-view-close">
-                    <span id="viewer-prev-button" class="material-icons">arrow_back</span>
+                <button class="btn-nostyle">
-                    <span id="viewer-next-button" class="material-icons">arrow_forward</span>
+                    <div id="viewer-prev-button" class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
-                    <div id="viewer-image-container">
+                </button>
-                        <img id="viewer-image" src="" alt="">
+                <button class="btn-nostyle">
+                    <div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
+                </button>
+                <button class="btn-nostyle">
+                    <div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
+                </button>
             </div>
-                    <div id="viewer-info">
+            <a class="image-viewer-link clickable" href="">
-                        <div id="viewer-title"></div>
+                <div class="view-image" id="viewer-image-container">
-                        <a id="viewer-source-button" href="" target="_blank">Visit Page</a>
+                    <img id="viewer-image" class="view-image-img" src="" alt="">
                 </div>
+            </a>
+            <p class="image-alt" id="viewer-title"></p>
+            <p>View source: <a id="viewer-source-button" class="image-source" href="" target="_blank"></a></p>
+            <p>
+                <a class="full-size" href="#">Show source website</a>
+                <a class="proxy-size" href="#">Show in fullscreen</a>
         </div>
     `;
 
+    const imageView = document.getElementById('image-viewer');
+
     function openImageViewer(element) {
         const parentImageDiv = element.closest('.image');
         if (!parentImageDiv) return;
@@ -163,6 +171,8 @@
         viewerTitle.textContent = title;
         viewerSourceButton.href = sourceUrl;
         viewerOverlay.style.display = 'flex';
+        imageView.classList.remove('image_hide');
+        imageView.classList.add('image_show');
     }
 
     // Attach event listener to the document body
@@ -177,6 +187,8 @@
     });
 
     function closeImageViewer() {
+        imageView.classList.remove('image_show');
+        imageView.classList.add('image_hide');
         viewerOverlay.style.display = 'none';
         viewerOpen = false;
     }
@@ -199,67 +211,6 @@
     });
 });
     </script>
-        
-        
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            let imagesContainer = document.querySelector('.images');
-            let observer;
-        
-            // Function to trim image titles based on the image width
-            function trimTitles() {
-                const images = document.querySelectorAll('.images .image');
-                images.forEach((element) => {
-                    const imgElement = element.querySelector('img.clickable');
-                    const titleElement = element.querySelector('.img_title.clickable');
-                    const detailsElement = element.querySelector('.details');
-        
-                    if (imgElement.complete && imgElement.naturalWidth) {
-                        const imageWidth = imgElement.clientWidth;
-        
-                        // Set the width of the details div and title to match the image width
-                        detailsElement.style.width = imageWidth + 'px';
-                        titleElement.style.maxWidth = imageWidth + 'px';
-                    }
-        
-                    // // Add load event listener in case images load dynamically
-                    // imgElement.addEventListener('load', function() {
-                    //     const imageWidth = imgElement.clientWidth;
-                    //     detailsElement.style.width = imageWidth + 'px';
-                    //     titleElement.style.maxWidth = imageWidth + 'px';
-                    // });
-                });
-            }
-        
-            // Call trimTitles periodically to account for dynamic loading, not happy about this one
-            setInterval(() => {
-                trimTitles();
-            }, 10);
-        
-            // Observe for dynamically added images
-            function observeNewImages() {
-                observer = new MutationObserver(function(mutations) {
-                    mutations.forEach(function(mutation) {
-                        mutation.addedNodes.forEach(function(node) {
-                            if (node.nodeType === 1 && node.classList.contains('image')) {
-                                trimTitles();
-                            }
-                        });
-                    });
-                });
-        
-                // Observe the images container for changes
-                observer.observe(imagesContainer, { childList: true, subtree: true });
-            }
-        
-            // Run initial title trimming after page load
-            trimTitles();
-        
-            // Start observing for dynamic image loading
-            observeNewImages();
-        });
-    </script>
-         
     <script>
         // Check if JavaScript is enabled and modify the DOM accordingly
         document.getElementById('content').classList.remove('js-enabled');