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

improved images alignment

Browse source
This commit is contained in:
partisan 2024-12-03 14:37:25 +01:00
parent a17deb4af1
commit 3a2db4a03c
2 changed files with 17 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

24
static/js/imagetitletrim.js
View file

@ -9,39 +9,37 @@ document.addEventListener('DOMContentLoaded', function() {
function trimTitles() {
const images = document.querySelectorAll('.images .image');
images.forEach((element) => {
// Skip if the image has already been processed
if (element.classList.contains('checked')) return;
const imgElement = element.querySelector('img.clickable');
const titleElement = element.querySelector('.img_title.clickable');
const detailsElement = element.querySelector('.details');
// Only process if the image is fully loaded
if (imgElement.complete && imgElement.naturalWidth) {
const imageWidth = imgElement.clientWidth;
// Set the width of the details div and title to match the image width
detailsElement.style.width = imageWidth + 'px';
titleElement.style.maxWidth = imageWidth + 'px';
}
// // Add load event listener in case images load dynamically
// imgElement.addEventListener('load', function() {
// const imageWidth = imgElement.clientWidth;
// detailsElement.style.width = imageWidth + 'px';
// titleElement.style.maxWidth = imageWidth + 'px';
// });
// Mark this image as processed and add it to the "checked" blacklist
element.classList.add('checked');
}
});
}
// Call trimTitles periodically to account for dynamic loading, not happy about this one
setInterval(() => {
trimTitles();
}, 10);
// Run trimTitles periodically every 500ms
setInterval(trimTitles, 500);
// Observe for dynamically added images
function observeNewImages() {
observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && node.classList.contains('image')) {
trimTitles();
if (node.nodeType === 1 && node.classList.contains('image') && !node.classList.contains('checked')) {
trimTitles(); // Call trimTitles for newly added image
}
});
});