fixes for image viewer
This commit is contained in:
partisan
parent
f95636799d
commit
5822b75d66
2 changed files with 154 additions and 156 deletions
|
|
@ -1542,6 +1542,70 @@ p {
|
||||||
box-shadow: 0 0 10px var(--box-shadow);
|
box-shadow: 0 0 10px var(--box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#image-viewer-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.9);
|
||||||
|
z-index: 999;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-viewer {
|
||||||
|
position: relative;
|
||||||
|
max-width: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
background: var(--search-bg);
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#viewer-image {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 60vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#viewer-title {
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--text-color);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#viewer-source-button {
|
||||||
|
color: var(--link);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-view-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-view-close .btn-nostyle {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#viewer-close-button,
|
||||||
|
#viewer-prev-button,
|
||||||
|
#viewer-next-button {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
body, h1, p, a, input, button {
|
body, h1, p, a, input, button {
|
||||||
color: var(--text-color); /* Applies the text color based on theme */
|
color: var(--text-color); /* Applies the text color based on theme */
|
||||||
background-color: var(--background-color); /* Applies the background color based on theme */
|
background-color: var(--background-color); /* Applies the background color based on theme */
|
||||||
|
|
@ -1998,76 +2062,3 @@ body, h1, p, a, input, button {
|
||||||
--box-shadow: #ffffff20;
|
--box-shadow: #ffffff20;
|
||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
|
|
||||||
/* Image Viewer Overlay */
|
|
||||||
#image-viewer-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0,0,0,0.9);
|
|
||||||
z-index: 999;
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image-viewer {
|
|
||||||
position: relative;
|
|
||||||
max-width: 80%;
|
|
||||||
max-height: 80%;
|
|
||||||
background: var(--search-bg);
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-image {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-info {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-title {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-source-button {
|
|
||||||
color: var(--link);
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-close-button,
|
|
||||||
#viewer-prev-button,
|
|
||||||
#viewer-next-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 36px;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-close-button {
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-prev-button {
|
|
||||||
left: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#viewer-next-button {
|
|
||||||
right: 10px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -117,99 +117,106 @@
|
||||||
<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 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" class="image_view image_hide">
|
<div id="image-viewer" class="image_view image_hide">
|
||||||
<div class="image-view-close">
|
<div class="image-view-close">
|
||||||
<button class="btn-nostyle">
|
<!-- <button class="btn-nostyle">
|
||||||
<div id="viewer-prev-button" class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
|
<div id="viewer-prev-button" class="material-icons-round icon_visibility clickable image-before">navigate_before</div>
|
||||||
</button>
|
</button>
|
||||||
<button class="btn-nostyle">
|
<button class="btn-nostyle">
|
||||||
<div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
|
<div id="viewer-next-button" class="material-icons-round icon_visibility clickable image-next">navigate_next</div>
|
||||||
</button>
|
</button> FIX THIS LATER! --!>
|
||||||
<button class="btn-nostyle">
|
<button class="btn-nostyle">
|
||||||
<div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
|
<div id="viewer-close-button" class="material-icons-round icon_visibility clickable image-close">close</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<a class="image-viewer-link clickable" href="">
|
<a class="image-viewer-link">
|
||||||
<div class="view-image" id="viewer-image-container">
|
<div class="view-image" id="viewer-image-container">
|
||||||
<img id="viewer-image" class="view-image-img" src="" alt="">
|
<img id="viewer-image" class="view-image-img" src="" alt="">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<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>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
`;
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const imageView = document.getElementById('image-viewer');
|
const imageView = document.getElementById('image-viewer');
|
||||||
|
|
||||||
function openImageViewer(element) {
|
function openImageViewer(element) {
|
||||||
const parentImageDiv = element.closest('.image');
|
const parentImageDiv = element.closest('.image');
|
||||||
if (!parentImageDiv) return;
|
if (!parentImageDiv) return;
|
||||||
|
|
||||||
const imgElement = parentImageDiv.querySelector('img.clickable');
|
const imgElement = parentImageDiv.querySelector('img.clickable');
|
||||||
const mediaUrl = imgElement.dataset.media;
|
const mediaUrl = imgElement.dataset.media; // Full-size image URL
|
||||||
const title = imgElement.alt;
|
const proxyMediaUrl = imgElement.dataset.proxyMedia || imgElement.src; // Proxied full-size image URL or thumbnail proxy
|
||||||
const sourceUrl = parentImageDiv.querySelector('.img_source').href;
|
const title = imgElement.alt;
|
||||||
|
const sourceUrl = parentImageDiv.querySelector('.img_source').href; // Source website URL
|
||||||
|
|
||||||
if (!mediaUrl || viewerOpen) {
|
if (!mediaUrl || viewerOpen) {
|
||||||
return; // Don't open if data is missing or viewer is already open
|
return; // Don't open if data is missing or viewer is already open
|
||||||
}
|
}
|
||||||
viewerOpen = true;
|
viewerOpen = true;
|
||||||
|
|
||||||
const viewerImage = document.getElementById('viewer-image');
|
const viewerImage = document.getElementById('viewer-image');
|
||||||
const viewerTitle = document.getElementById('viewer-title');
|
const viewerTitle = document.getElementById('viewer-title');
|
||||||
const viewerSourceButton = document.getElementById('viewer-source-button');
|
const viewerSourceButton = document.getElementById('viewer-source-button');
|
||||||
|
const fullSizeLink = imageView.querySelector('.full-size');
|
||||||
|
const proxySizeLink = imageView.querySelector('.proxy-size');
|
||||||
|
|
||||||
viewerImage.src = mediaUrl;
|
viewerImage.src = mediaUrl;
|
||||||
viewerTitle.textContent = title;
|
viewerTitle.textContent = title;
|
||||||
viewerSourceButton.href = sourceUrl;
|
viewerSourceButton.href = sourceUrl;
|
||||||
viewerOverlay.style.display = 'flex';
|
fullSizeLink.href = sourceUrl; // Link to the source website
|
||||||
imageView.classList.remove('image_hide');
|
proxySizeLink.href = proxyMediaUrl; // Link to the proxied full-size image
|
||||||
imageView.classList.add('image_show');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attach event listener to the document body
|
viewerOverlay.style.display = 'flex';
|
||||||
document.body.addEventListener('click', function(e) {
|
imageView.classList.remove('image_hide');
|
||||||
let target = e.target;
|
imageView.classList.add('image_show');
|
||||||
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() {
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// Check if JavaScript is enabled and modify the DOM accordingly
|
// Check if JavaScript is enabled and modify the DOM accordingly
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue