clean up
This commit is contained in:
partisan
parent
81a1add837
commit
5a4be6dad6
5 changed files with 133 additions and 177 deletions
|
|
@ -217,118 +217,15 @@
|
|||
<script defer src="/static/js/dynamicscrolling.js"></script>
|
||||
<script defer src="/static/js/autocomplete.js"></script>
|
||||
<script defer src="/static/js/imagetitletrim.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let viewerOpen = false;
|
||||
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
<a class="image-viewer-link">
|
||||
<div class="view-image" id="viewer-image-container">
|
||||
<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>
|
||||
`;
|
||||
|
||||
const imageView = document.getElementById('image-viewer');
|
||||
|
||||
function openImageViewer(element) {
|
||||
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
|
||||
|
||||
if (!fullImageUrl || viewerOpen) {
|
||||
return; // Don't open if data is missing or viewer is already open
|
||||
}
|
||||
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');
|
||||
}
|
||||
|
||||
// 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 defer src="/static/js/imageviewer.js"></script>
|
||||
<!-- JavaScript to Load Images -->
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const templateData = document.getElementById('template-data');
|
||||
const hardCacheEnabled = templateData.getAttribute('data-hard-cache-enabled') === 'true';
|
||||
|
||||
|
||||
if (hardCacheEnabled) {
|
||||
// Hard cache is disabled, so skip polling and load images directly
|
||||
// Immediate loading of images
|
||||
const images = document.querySelectorAll("img[data-id]");
|
||||
images.forEach((img) => {
|
||||
// Use the ProxyFull URL directly
|
||||
|
|
@ -342,12 +239,11 @@
|
|||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let imageMap = {}; // Map of image IDs to img elements
|
||||
let loadedImageIDs = new Set(); // Keep track of loaded image IDs
|
||||
let pollingInterval = 2000; // Initial polling interval in milliseconds
|
||||
let polling = false;
|
||||
|
||||
let pollingInterval = 2000; // Polling interval in milliseconds
|
||||
|
||||
function initializeImages() {
|
||||
const images = document.querySelectorAll("img[data-id]");
|
||||
images.forEach((img) => {
|
||||
|
|
@ -357,10 +253,10 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Initialize with images present at page load
|
||||
initializeImages();
|
||||
|
||||
|
||||
// Set up MutationObserver to detect new images added to the DOM
|
||||
const observer = new MutationObserver((mutationsList) => {
|
||||
for (let mutation of mutationsList) {
|
||||
|
|
@ -373,9 +269,6 @@
|
|||
if (!imageMap[id]) {
|
||||
imageMap[id] = img;
|
||||
console.log('New image added:', id);
|
||||
if (!polling) {
|
||||
checkImageStatus(); // Start polling if not already started
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Check for nested images within added nodes
|
||||
|
|
@ -386,9 +279,6 @@
|
|||
if (!imageMap[id]) {
|
||||
imageMap[id] = img;
|
||||
console.log('New nested image added:', id);
|
||||
if (!polling) {
|
||||
checkImageStatus(); // Start polling if not already started
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -403,10 +293,8 @@
|
|||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
function checkImageStatus() {
|
||||
polling = true;
|
||||
const imageIDs = Object.keys(imageMap).filter(id => !loadedImageIDs.has(id));
|
||||
if (imageIDs.length === 0) {
|
||||
polling = false;
|
||||
console.log('All images loaded.');
|
||||
return;
|
||||
}
|
||||
|
|
@ -454,8 +342,11 @@
|
|||
setTimeout(checkImageStatus, pollingInterval * 2);
|
||||
});
|
||||
}
|
||||
|
||||
// Start polling
|
||||
|
||||
// Start polling every pollingInterval milliseconds
|
||||
const pollingIntervalId = setInterval(checkImageStatus, pollingInterval);
|
||||
|
||||
// Optionally, call checkImageStatus immediately
|
||||
checkImageStatus();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue