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

code cleanup & fixed compatibility for non-JS users & fixed fullscreen images being in low resolution

Browse source
This commit is contained in:
partisan 2024-11-19 10:36:33 +01:00
parent 0d083f53e7
commit db89f9c781
13 changed files with 474 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

6
static/css/style-search.css
View file

@ -44,8 +44,9 @@ body, html {
color: var(--text-color);
}
body {
visibility: hidden;
button, p {
font-family: 'Inter', Arial, Helvetica, sans-serif;
font-weight: 400;
}
body.menu-open {
@ -259,6 +260,7 @@ body.menu-open {
}
.settings-icon-link-search:hover {
text-decoration: none;
color: var(--blue);
transition: color 0.3s ease;
}

104
static/js/imageviewer.js
View file

@ -1,21 +1,28 @@
document.addEventListener('DOMContentLoaded', function() {
let viewerOpen = false;
let currentIndex = -1;
let imageList = [];
// Initialize imageList with all images on the page
function initializeImageList() {
imageList = Array.from(document.querySelectorAll('.image img.clickable'));
}
const viewerOverlay = document.getElementById('image-viewer-overlay');
viewerOverlay.innerHTML = `
<div id="image-viewer" class="image_view image_hide">
<div class="image-view-close">
<!-- <button class="btn-nostyle">
<div id="viewer-prev-button" class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
<button class="btn-nostyle" id="viewer-prev-button">
<div class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
</button>
<button class="btn-nostyle">
<div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
</button> FIX THIS LATER! --!>
<button class="btn-nostyle">
<div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
<button class="btn-nostyle" id="viewer-next-button">
<div class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
</button>
<button class="btn-nostyle" id="viewer-close-button">
<div class="material-icons-round icon_visibility clickable image-close">close</div>
</button>
</div>
<a class="image-viewer-link">
<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>
@ -23,8 +30,8 @@ document.addEventListener('DOMContentLoaded', function() {
<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>
<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>
</div>
`;
@ -32,38 +39,47 @@ document.addEventListener('DOMContentLoaded', function() {
const imageView = document.getElementById('image-viewer');
function openImageViewer(element) {
initializeImageList(); // Update the image list
const parentImageDiv = element.closest('.image');
if (!parentImageDiv) return;
const imgElement = parentImageDiv.querySelector('img.clickable');
const fullImageUrl = imgElement.dataset.proxyFull; // Use data-proxy-full for ProxyFull
const thumbnailUrl = imgElement.src; // Use ProxyThumb for the thumbnail
const title = imgElement.alt;
const sourceUrl = parentImageDiv.querySelector('.img_source').href; // Source webpage URL
currentIndex = imageList.findIndex(img => img === parentImageDiv.querySelector('img.clickable'));
if (currentIndex === -1) return;
if (!fullImageUrl || viewerOpen) {
return; // Don't open if data is missing or viewer is already open
}
displayImage(currentIndex);
viewerOpen = true;
const viewerImage = document.getElementById('viewer-image');
const viewerTitle = document.getElementById('viewer-title');
const viewerSourceButton = document.getElementById('viewer-source-button');
const fullSizeLink = imageView.querySelector('.full-size');
const proxySizeLink = imageView.querySelector('.proxy-size');
// Set the viewer image to ProxyFull
viewerImage.src = fullImageUrl;
viewerTitle.textContent = title;
viewerSourceButton.href = sourceUrl;
fullSizeLink.href = sourceUrl; // Link to the source website
proxySizeLink.href = fullImageUrl; // Link to the proxied full-size image
viewerOverlay.style.display = 'flex';
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');
const fullImageUrl = imgElement.getAttribute('data-full'); // Use data-full for the full image URL
const title = imgElement.alt || '';
const sourceUrl = parentImageDiv.querySelector('.img_source').href || '#'; // Source webpage URL
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');
// Set the viewer image to the full image URL
viewerImage.src = fullImageUrl;
viewerTitle.textContent = title;
viewerSourceButton.href = sourceUrl;
fullSizeLink.href = sourceUrl; // Link to the source website
proxySizeLink.href = fullImageUrl; // Link to the proxied full-size image
viewerImageLink.href = fullImageUrl; // Make image clickable to open in new tab
}
// Attach event listener to the document body
document.body.addEventListener('click', function(e) {
let target = e.target;
@ -80,10 +96,30 @@ document.addEventListener('DOMContentLoaded', function() {
imageView.classList.add('image_hide');
viewerOverlay.style.display = 'none';
viewerOpen = false;
currentIndex = -1;
}
// Close viewer on overlay or button click
// Navigation functions
function showPreviousImage() {
if (currentIndex > 0) {
currentIndex--;
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
viewerOverlay.addEventListener('click', function(e) {
if (e.target === viewerOverlay) {
closeImageViewer();
@ -95,6 +131,10 @@ document.addEventListener('DOMContentLoaded', function() {
if (viewerOverlay.style.display === 'flex') {
if (e.key === 'Escape') {
closeImageViewer();
} else if (e.key === 'ArrowLeft') {
showPreviousImage();
} else if (e.key === 'ArrowRight') {
showNextImage();
}
}
});