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

updated imageviewer style

Browse source
This commit is contained in:
partisan 2024-12-02 14:36:08 +01:00
parent d8ebe94657
commit 3457e69748
5 changed files with 233 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

72
static/js/imageviewer.js
View file

@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', function() {
}
const viewerOverlay = document.getElementById('image-viewer-overlay');
// Set the innerHTML of viewerOverlay
viewerOverlay.innerHTML = `
<div id="image-viewer" class="image_view image_hide">
<div class="image-view-close">
@ -22,13 +24,10 @@ document.addEventListener('DOMContentLoaded', function() {
<div class="material-icons-round icon_visibility clickable image-close">close</div>
</button>
</div>
<a class="image-viewer-link" id="viewer-image-link" target="_blank">
<div class="view-image" id="viewer-image-container">
<img id="viewer-image" class="view-image-img" src="" alt="">
</div>
</a>
<div class="view-image" id="viewer-image-container">
<img id="viewer-image" class="view-image-img" src="" alt="">
</div>
<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" 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>
@ -36,7 +35,15 @@ document.addEventListener('DOMContentLoaded', function() {
</div>
`;
const imageView = document.getElementById('image-viewer');
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
@ -50,29 +57,31 @@ document.addEventListener('DOMContentLoaded', function() {
displayImage(currentIndex);
viewerOpen = true;
viewerOverlay.style.display = 'flex';
imagesContainer.classList.remove('images_viewer_hidden');
document.body.classList.add('viewer-open');
viewerOverlay.style.display = 'block';
imageView.classList.remove('image_hide');
imageView.classList.add('image_show');
}
function displayImage(index) {
if (index < 0 || index >= imageList.length) return;
const imgElement = imageList[index];
const parentImageDiv = imgElement.closest('.image');
if (!parentImageDiv) {
console.warn('Parent image div not found');
return;
}
// Use the `data-full` attribute for the full image URL
let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
const title = imgElement.alt || 'Untitled';
// Gracefully handle the source URL or other attributes
const sourceElement = parentImageDiv.querySelector('.img_source');
const sourceUrl = sourceElement ? sourceElement.href : null;
// 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;
@ -85,22 +94,16 @@ document.addEventListener('DOMContentLoaded', function() {
// Elements in the viewer
const viewerImage = document.getElementById('viewer-image');
const viewerTitle = document.getElementById('viewer-title');
const viewerSourceButton = document.getElementById('viewer-source-button');
const fullSizeLink = document.getElementById('viewer-full-size-link');
const proxySizeLink = document.getElementById('viewer-proxy-size-link');
const viewerImageLink = document.getElementById('viewer-image-link');
// Assign values to the viewer elements
viewerImage.src = fullImageUrl; // Full-size image in the viewer
viewerImage.src = fullImageUrl;
viewerTitle.textContent = title;
viewerSourceButton.href = sourceUrl || proxyFullUrl; // Use proxy URL if source is missing
fullSizeLink.href = sourceUrl || proxyFullUrl; // Link to source website or proxy
proxySizeLink.href = fullImageUrl; // Link to the proxied full-size image
viewerImageLink.href = fullImageUrl; // Make image clickable to open in a new tab
fullSizeLink.href = sourceUrl || proxyFullUrl;
proxySizeLink.href = fullImageUrl;
}
// 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');
@ -114,9 +117,12 @@ document.addEventListener('DOMContentLoaded', function() {
function closeImageViewer() {
imageView.classList.remove('image_show');
imageView.classList.add('image_hide');
viewerOverlay.style.display = 'none';
viewerOpen = false;
currentIndex = -1;
imagesContainer.classList.add('images_viewer_hidden');
document.body.classList.remove('viewer-open');
viewerOverlay.style.display = 'none';
}
// Navigation functions
@ -140,15 +146,19 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('viewer-next-button').addEventListener('click', showNextImage);
// Close viewer when clicking outside the image
viewerOverlay.addEventListener('click', function(e) {
if (e.target === viewerOverlay) {
closeImageViewer();
document.addEventListener('click', function(e) {
if (viewerOpen) {
const target = e.target;
const clickedInsideViewer = viewerOverlay.contains(target) || target.closest('.image');
if (!clickedInsideViewer) {
closeImageViewer();
}
}
});
// Handle keyboard events for closing and navigation
document.addEventListener('keydown', function(e) {
if (viewerOverlay.style.display === 'flex') {
if (viewerOpen) {
if (e.key === 'Escape') {
closeImageViewer();
} else if (e.key === 'ArrowLeft') {
@ -157,5 +167,5 @@ document.addEventListener('DOMContentLoaded', function() {
showNextImage();
}
}
});
});
});