Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix dark reader plugin not working on map results

Browse source
This commit is contained in:
partisan 2024-10-06 18:11:58 +02:00
parent 2425392767
commit f95636799d
4 changed files with 164 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
map.go
View file

@ -54,12 +54,13 @@ func handleMapSearch(w http.ResponseWriter, settings UserSettings, query string)
// Use a template to serve the map page // Use a template to serve the map page
data := map[string]interface{}{ 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") tmpl, err := template.ParseFiles("templates/map.html")

8
static/css/style.css
View file

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

56
static/js/imagetitletrim.js Normal file
View file

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

243
templates/images.html
View file

@ -73,16 +73,10 @@
<div class="images images_viewer_hidden"> <div class="images images_viewer_hidden">
<!-- Images Grid --> <!-- Images Grid -->
{{ range $index, $result := .Results }} {{ 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> <span class="img_title clickable">{{ .Title }}</span>
<a href="{{ .Source }}" target="_blank" class="img_source">Source</a> <a href="{{ .Source }}" target="_blank" class="img_source">Source</a>
</div> </div>
@ -121,148 +115,105 @@
<div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image"></div> <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/dynamicscrolling.js"></script>
<script defer src="/static/js/autocomplete.js"></script> <script defer src="/static/js/autocomplete.js"></script>
<script defer src="/static/js/imagetitletrim.js"></script>
<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> </div>
`; </a>
<p class="image-alt" id="viewer-title"></p>
function openImageViewer(element) { <p>View source: <a id="viewer-source-button" class="image-source" href="" target="_blank"></a></p>
const parentImageDiv = element.closest('.image'); <p>
if (!parentImageDiv) return; <a class="full-size" href="#">Show source website</a>
<a class="proxy-size" href="#">Show in fullscreen</a>
const imgElement = parentImageDiv.querySelector('img.clickable'); </div>
const mediaUrl = imgElement.dataset.media; `;
const title = imgElement.alt;
const sourceUrl = parentImageDiv.querySelector('.img_source').href; const imageView = document.getElementById('image-viewer');
if (!mediaUrl || viewerOpen) { function openImageViewer(element) {
return; // Don't open if data is missing or viewer is already open const parentImageDiv = element.closest('.image');
} if (!parentImageDiv) return;
viewerOpen = true;
const imgElement = parentImageDiv.querySelector('img.clickable');
const viewerImage = document.getElementById('viewer-image'); const mediaUrl = imgElement.dataset.media;
const viewerTitle = document.getElementById('viewer-title'); const title = imgElement.alt;
const viewerSourceButton = document.getElementById('viewer-source-button'); const sourceUrl = parentImageDiv.querySelector('.img_source').href;
viewerImage.src = mediaUrl; if (!mediaUrl || viewerOpen) {
viewerTitle.textContent = title; return; // Don't open if data is missing or viewer is already open
viewerSourceButton.href = sourceUrl; }
viewerOverlay.style.display = 'flex'; viewerOpen = true;
const viewerImage = document.getElementById('viewer-image');
const viewerTitle = document.getElementById('viewer-title');
const viewerSourceButton = document.getElementById('viewer-source-button');
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>
<script> <script>
// Check if JavaScript is enabled and modify the DOM accordingly // Check if JavaScript is enabled and modify the DOM accordingly
document.getElementById('content').classList.remove('js-enabled'); document.getElementById('content').classList.remove('js-enabled');
</script> </script>
</body> </body>
</html> </html>