fix dark reader plugin not working on map results

map.go

@@ -54,12 +54,13 @@ func handleMapSearch(w http.ResponseWriter, settings UserSettings, query string)
 
 	// Use a template to serve the map page
 	data := map[string]interface{}{
-		"Query":     query,
+		"Query":       query,
-		"Latitude":  latitude,
+		"Latitude":    latitude,
-		"Longitude": longitude,
+		"Longitude":   longitude,
-		"Found":     found,
+		"Found":       found,
-		"Theme":     settings.Theme,
+		"Theme":       settings.Theme,
-		"Safe":      settings.SafeSearch,
+		"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,16 +73,10 @@
             <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 
+                    <div class="resolution">{{ .Width }} × {{ .Height }}</div>
-                            class="open-image-viewer"
+                    <div class="details">
-                            src="{{ .ThumbProxy }}"
-                            alt="{{ .Title }}"
-                            data-media="{{ .Media }}"
-                        />
-                        <div class="resolution">{{ .Width }} × {{ .Height }}</div>
-                        <div class="details">
                         <span class="img_title clickable">{{ .Title }}</span>
                         <a href="{{ .Source }}" target="_blank" class="img_source">Source</a>
                     </div>
@@ -121,145 +115,102 @@
     <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() {
+document.addEventListener('DOMContentLoaded', function() {
-            let viewerOpen = false;
+    let viewerOpen = false;
 
-            const viewerOverlay = document.getElementById('image-viewer-overlay');
+    const viewerOverlay = document.getElementById('image-viewer-overlay');
-            viewerOverlay.innerHTML = `
+    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>
+                    <div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
-                    <div id="viewer-info">
+                </button>
-                        <div id="viewer-title"></div>
+                <button class="btn-nostyle">
-                        <a id="viewer-source-button" href="" target="_blank">Visit Page</a>
+                    <div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
-                    </div>
+                </button>
+            </div>
+            <a class="image-viewer-link clickable" href="">
+                <div class="view-image" id="viewer-image-container">
+                    <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>
+    `;
 
-            function openImageViewer(element) {
+    const imageView = document.getElementById('image-viewer');
-                const parentImageDiv = element.closest('.image');
-                if (!parentImageDiv) return;
 
-                const imgElement = parentImageDiv.querySelector('img.clickable');
+    function openImageViewer(element) {
-                const mediaUrl = imgElement.dataset.media;
+        const parentImageDiv = element.closest('.image');
-                const title = imgElement.alt;
+        if (!parentImageDiv) return;
-                const sourceUrl = parentImageDiv.querySelector('.img_source').href;
 
-                if (!mediaUrl || viewerOpen) {
+        const imgElement = parentImageDiv.querySelector('img.clickable');
-                    return;  // Don't open if data is missing or viewer is already open
+        const mediaUrl = imgElement.dataset.media;
-                }
+        const title = imgElement.alt;
-                viewerOpen = true;
+        const sourceUrl = parentImageDiv.querySelector('.img_source').href;
 
-                const viewerImage = document.getElementById('viewer-image');
+        if (!mediaUrl || viewerOpen) {
-                const viewerTitle = document.getElementById('viewer-title');
+            return;  // Don't open if data is missing or viewer is already open
-                const viewerSourceButton = document.getElementById('viewer-source-button');
+        }
+        viewerOpen = true;
 
-                viewerImage.src = mediaUrl;
+        const viewerImage = document.getElementById('viewer-image');
-                viewerTitle.textContent = title;
+        const viewerTitle = document.getElementById('viewer-title');
-                viewerSourceButton.href = sourceUrl;
+        const viewerSourceButton = document.getElementById('viewer-source-button');
-                viewerOverlay.style.display = 'flex';
+
+        viewerImage.src = mediaUrl;
+        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
+    document.body.addEventListener('click', function(e) {
+        let target = e.target;
+        let clickableElement = target.closest('img.clickable, .img_title.clickable');
+
+        if (clickableElement) {
+            e.preventDefault();
+            openImageViewer(clickableElement);
+        }
+    });
+
+    function closeImageViewer() {
+        imageView.classList.remove('image_show');
+        imageView.classList.add('image_hide');
+        viewerOverlay.style.display = 'none';
+        viewerOpen = false;
+    }
+
+    // Close viewer on overlay or button click
+    document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
+    viewerOverlay.addEventListener('click', function(e) {
+        if (e.target === viewerOverlay) {
+            closeImageViewer();
+        }
+    });
+
+    // Handle keyboard events for closing and navigation
+    document.addEventListener('keydown', function(e) {
+        if (viewerOverlay.style.display === 'flex') {
+            if (e.key === 'Escape') {
+                closeImageViewer();
             }
-        
+        }
-            // Attach event listener to the document body
+    });
-            document.body.addEventListener('click', function(e) {
+});
-                let target = e.target;
-                let clickableElement = target.closest('img.clickable, .img_title.clickable');
-        
-                if (clickableElement) {
-                    e.preventDefault();
-                    openImageViewer(clickableElement);
-                }
-            });
-        
-            function closeImageViewer() {
-                viewerOverlay.style.display = 'none';
-                viewerOpen = false;
-            }
-        
-            // Close viewer on overlay or button click
-            document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
-            viewerOverlay.addEventListener('click', function(e) {
-                if (e.target === viewerOverlay) {
-                    closeImageViewer();
-                }
-            });
-        
-            // Handle keyboard events for closing and navigation
-            document.addEventListener('keydown', function(e) {
-                if (viewerOverlay.style.display === 'flex') {
-                    if (e.key === 'Escape') {
-                        closeImageViewer();
-                    }
-                }
-            });
-        });
-        </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');