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

2
static/css/style-fonts.css
View file

@ -31,5 +31,5 @@
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/material-icons-round-v108-latin-regular.woff2') format('woff2');
src: url('/static/fonts/MaterialIcons-Round.woff2') format('woff2');
}

21
static/css/style-imageviewer.css
View file

@ -33,6 +33,7 @@
#viewer-image {
max-width: 100%;
max-height: 60vh;
border-radius: 5px;
}
/* Viewer Title */
@ -101,13 +102,13 @@
/* View Image Container */
#viewer-image-container {
background-color: var(--view-image-color);
background-color: #0000;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-top: 20px;
}
/* Full Size and Proxy Size Links */
@ -153,14 +154,24 @@
}
/* Responsive Design */
@media only screen and (max-width: 750px) {
@media only screen and (max-width: 880px) {
#image-viewer {
width: 100%;
height: 77%;
margin-top: -33px;
height: 100% !important;
margin-top: 28px;
margin-right: 0%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.material-icons-round {
font-size: 32px;
}
#viewer-image-container {
margin-top: 5px;
}
#viewer-image {

10
static/css/style-music.css
View file

@ -10,7 +10,7 @@
position: relative;
flex: 0 0 160px;
aspect-ratio: 1;
border-radius: 8px;
border-radius: 5px;
overflow: hidden;
background: var(--placeholder-bg);
}
@ -42,12 +42,12 @@
.duration-overlay {
position: absolute;
bottom: 8px;
right: 8px;
bottom: 2px;
right: 2px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(2px);
@ -113,7 +113,5 @@
.duration-overlay {
font-size: 11px;
padding: 3px 6px;
bottom: 6px;
right: 6px;
}
}

23
static/css/style.css
View file

@ -303,6 +303,7 @@ html {
}
.btn-nostyle {
font-family: 'Inter', Arial, Helvetica, sans-serif !important;
background-color: inherit;
border: none;
padding: 0px;
@ -383,10 +384,11 @@ hr {
.results .video_title {
font-size: 16px;
}
.video_title {
font-size: 16px;
}
/*
this is so stupid, separate css into general style and per result page css style to avoid this
.video_title h3 {
margin-top: 0px !important;
} */
.video_title a {
color: var(--link);
@ -406,6 +408,7 @@ hr {
width: 254px;
height: 143px;
object-fit: cover;
border-radius: 5px;
}
.video__img__results {
@ -436,13 +439,19 @@ hr {
.duration {
position: absolute;
color: #fff;
font-size: 11px;
font-size: 12px;
font-weight: 500;
padding: .5em;
background: rgba(0, 0, 0, .5);
right: 0;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
margin-top: -28px !important;
line-height: 1.3;
letter-spacing: -0.4px;
bottom: 2px;
right: 2px;
border-radius: 3px;
backdrop-filter: blur(2px);
}
.pipe {

BIN
static/fonts/MaterialIcons-Round.woff2
View file

Binary file not shown.

BIN
static/fonts/material-icons-round-v108-latin-regular.woff2
View file

Binary file not shown.

180
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;
viewerTitle.textContent = imgElement.alt || 'Untitled';
// Remove previous event listeners to avoid stacking
viewerImage.onload = null;
viewerImage.onerror = null;
viewerImage.onerror = () => viewerImage.src = proxyFullUrl;
viewerImage.onload = () => {};
// 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
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,8 +139,7 @@ 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;
@ -146,56 +147,23 @@ document.addEventListener('DOMContentLoaded', function() {
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) {
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);
});
});