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

improved image viewer and some css
All checks were successful
Run Integration Tests / test (push) Successful in 29s
Details

Browse source
This commit is contained in:
partisan 2025-04-19 21:24:27 +02:00
parent 7cd5e80468
commit 5fdbe231d1
7 changed files with 120 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

198
static/js/imageviewer.js
View file

@ -28,26 +28,41 @@ document.addEventListener('DOMContentLoaded', function() {
<img id="viewer-image" class="view-image-img" src="" alt="">
</div>
<p class="image-alt" id="viewer-title"></p>
<p>
<a class="full-size" id="viewer-full-size-link" href="#" target="_blank">Show source website</a>
<a class="proxy-size" id="viewer-proxy-size-link" href="#" target="_blank">Show in fullscreen</a>
</p>
<br>
<div class="search-type-icons" style="display:flex; justify-content:center; gap:15px; flex-wrap: wrap;">
<div class="icon-button">
<button class="material-icons-round clickable btn-nostyle" id="viewer-copy-link">
<span class="material-icons-round">&#xe37c;</span>
<p>Copy link</p>
</button>
</div>
<div class="icon-button">
<button class="material-icons-round clickable btn-nostyle" id="viewer-open-image">
<span class="material-icons-round">&#xe193;</span>
<p>Open image</p>
</button>
</div>
<div class="icon-button">
<button class="material-icons-round clickable btn-nostyle" id="viewer-open-source">
<span class="material-icons-round">&#xe366;</span>
<p>Go to source</p>
</button>
</div>
<div class="icon-button">
<button class="material-icons-round clickable btn-nostyle" id="viewer-download-image">
<span class="material-icons-round">&#xe2d1;</span>
<p>Download</p>
</button>
</div>
</div>
</div>
`;
const imageView = viewerOverlay.querySelector('#image-viewer');
if (!imageView) {
console.error('imageView is null');
}
const imagesContainer = document.querySelector('.images');
if (!imagesContainer) {
console.error('imagesContainer is null');
}
function openImageViewer(element) {
initializeImageList(); // Update the image list
initializeImageList();
const parentImageDiv = element.closest('.image');
if (!parentImageDiv) return;
@ -61,75 +76,62 @@ document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('viewer-open');
viewerOverlay.style.display = 'block';
imageView.classList.remove('image_hide');
imageView.classList.add('image_show');
imageView.classList.replace('image_hide', 'image_show');
}
let fullImageUrl, sourceUrl, proxyFullUrl;
function displayImage(index) {
if (index < 0 || index >= imageList.length) return;
// Remove the `.image_selected` class from all images
imageList.forEach(img => {
const parentImageDiv = img.closest('.image');
if (parentImageDiv) {
parentImageDiv.classList.remove('image_selected');
}
parentImageDiv?.classList.remove('image_selected');
});
const imgElement = imageList[index];
const parentImageDiv = imgElement.closest('.image');
parentImageDiv?.classList.add('image_selected');
if (!parentImageDiv) {
console.warn('Parent image div not found');
return;
}
fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
sourceUrl = imgElement.getAttribute('data-source');
proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
// Add the `.image_selected` class to the currently displayed image
parentImageDiv.classList.add('image_selected');
// Use the `data-full` attribute for the full image URL
let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
const title = imgElement.alt || 'Untitled';
// Get the source URL from the data-source attribute
const sourceUrl = imgElement.getAttribute('data-source');
// Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
// Elements in the viewer
const viewerImage = document.getElementById('viewer-image');
const viewerTitle = document.getElementById('viewer-title');
const fullSizeLink = document.getElementById('viewer-full-size-link');
const proxySizeLink = document.getElementById('viewer-proxy-size-link');
viewerTitle.textContent = title;
fullSizeLink.href = sourceUrl || proxyFullUrl;
// Remove previous event listeners to avoid stacking
viewerImage.onload = null;
viewerImage.onerror = null;
// Set up the error handler to switch to the proxy image if the full image fails to load
viewerImage.onerror = function() {
// Use the proxy image as a fallback
viewerImage.src = proxyFullUrl;
proxySizeLink.href = proxyFullUrl;
};
// Set up the load handler to ensure the proxySizeLink is set correctly if the image loads
viewerImage.onload = function() {
proxySizeLink.href = fullImageUrl;
};
// Start loading the image
viewerTitle.textContent = imgElement.alt || 'Untitled';
viewerImage.onerror = () => viewerImage.src = proxyFullUrl;
viewerImage.onload = () => {};
viewerImage.src = fullImageUrl;
}
}
document.body.addEventListener('click', function(e) {
let target = e.target;
let clickableElement = target.closest('img.clickable, .img_title.clickable');
document.getElementById('viewer-copy-link').onclick = () => {
navigator.clipboard.writeText(window.location.origin + fullImageUrl).catch(console.error);
};
document.getElementById('viewer-open-image').onclick = () => {
window.open(fullImageUrl, '_blank');
};
document.getElementById('viewer-open-source').onclick = () => {
window.open(sourceUrl || proxyFullUrl, '_blank');
};
document.getElementById('viewer-download-image').onclick = (event) => {
event.stopPropagation();
const a = document.createElement('a');
a.href = fullImageUrl;
a.download = fullImageUrl.split('/').pop();
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
document.body.addEventListener('click', e => {
const clickableElement = e.target.closest('img.clickable, .img_title.clickable');
if (clickableElement) {
e.preventDefault();
openImageViewer(clickableElement);
@ -137,65 +139,31 @@ document.addEventListener('DOMContentLoaded', function() {
});
function closeImageViewer() {
imageView.classList.remove('image_show');
imageView.classList.add('image_hide');
imageView.classList.replace('image_show', 'image_hide');
viewerOpen = false;
currentIndex = -1;
imagesContainer.classList.add('images_viewer_hidden');
document.body.classList.remove('viewer-open');
viewerOverlay.style.display = 'none';
// Remove `.image_selected` from all images
imageList.forEach(img => {
const parentImageDiv = img.closest('.image');
if (parentImageDiv) {
parentImageDiv.classList.remove('image_selected');
}
});
imageList.forEach(img => img.closest('.image')?.classList.remove('image_selected'));
}
// Navigation functions
function showPreviousImage() {
if (currentIndex > 0) {
currentIndex--;
displayImage(currentIndex);
}
}
document.getElementById('viewer-close-button').onclick = closeImageViewer;
document.getElementById('viewer-prev-button').onclick = () => currentIndex > 0 && displayImage(--currentIndex);
document.getElementById('viewer-next-button').onclick = () => currentIndex < imageList.length - 1 && displayImage(++currentIndex);
function showNextImage() {
if (currentIndex < imageList.length - 1) {
currentIndex++;
displayImage(currentIndex);
}
}
// Event listeners for navigation and closing
document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
document.getElementById('viewer-prev-button').addEventListener('click', showPreviousImage);
document.getElementById('viewer-next-button').addEventListener('click', showNextImage);
// Close viewer when clicking outside the image
document.addEventListener('click', function(e) {
if (viewerOpen) {
const target = e.target;
const clickedInsideViewer = viewerOverlay.contains(target) || target.closest('.image');
if (!clickedInsideViewer) {
closeImageViewer();
}
document.addEventListener('click', e => {
if (viewerOpen && !viewerOverlay.contains(e.target) && !e.target.closest('.image')) {
closeImageViewer();
}
});
// Handle keyboard events for closing and navigation
document.addEventListener('keydown', function(e) {
if (viewerOpen) {
if (e.key === 'Escape') {
closeImageViewer();
} else if (e.key === 'ArrowLeft') {
showPreviousImage();
} else if (e.key === 'ArrowRight') {
showNextImage();
}
}
});
});
document.addEventListener('keydown', e => {
if (!viewerOpen) return;
if (e.key === 'Escape') closeImageViewer();
if (e.key === 'ArrowLeft' && currentIndex > 0) displayImage(--currentIndex);
if (e.key === 'ArrowRight' && currentIndex < imageList.length - 1) displayImage(++currentIndex);
});
});