improvements for images (text overlapping fix, image viewer, page width fix)
This commit is contained in:
partisan
parent
94f4ce3b32
commit
4d64f55922
3 changed files with 236 additions and 12 deletions
|
|
@ -8,6 +8,7 @@
|
|||
{{ end }}
|
||||
<title>{{.Query}} - Ocásek</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="stylesheet" href="/static/css/style-fixedwidth.css">
|
||||
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
|
||||
<link rel="search" type="application/opensearchdescription+xml" title="Ocásek" href="/opensearch.xml">
|
||||
</head>
|
||||
|
|
@ -65,24 +66,24 @@
|
|||
</select>
|
||||
<button class="results-save" name="t" value="image">Apply settings</button>
|
||||
</form>
|
||||
<div class="search-results" id="results">
|
||||
<div class="search-results" id="results">
|
||||
|
||||
<!-- Results go here -->
|
||||
{{ if .Results }}
|
||||
<div class="images images_viewer_hidden">
|
||||
<!-- Images Grid -->
|
||||
{{ range .Results }}
|
||||
<div class="image">
|
||||
<a class="clickable" href="{{ .ThumbProxy }}" target="_blank">
|
||||
<img src="{{ .ThumbProxy }}" alt="{{ .Title }}" data-media="{{ .Media }}">
|
||||
<div class="resolution">{{ .Width }} × {{ .Height }}</div>
|
||||
<div class="details">
|
||||
<div class="img_title">{{ .Title }}</div>
|
||||
<div class="img_source"><a href="{{ .Source }}" target="_blank">Source</a></div>
|
||||
</div>
|
||||
</a>
|
||||
{{ range $index, $result := .Results }}
|
||||
<div class="image">
|
||||
<img src="{{ .ThumbProxy }}" alt="{{ .Title }}" data-media="{{ .Media }}" class="clickable">
|
||||
<div class="resolution">{{ .Width }} × {{ .Height }}</div>
|
||||
<div class="details">
|
||||
<span class="img_title clickable">{{ .Title }}</span>
|
||||
<a href="{{ .Source }}" target="_blank" class="img_source">Source</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<div class="prev-next prev-img">
|
||||
<form action="/search" method="get">
|
||||
|
|
@ -108,9 +109,151 @@
|
|||
<div class="message-bottom-left" id="message-bottom-left">
|
||||
<span>Searching for new results...</span>
|
||||
</div>
|
||||
|
||||
<div id="image-viewer-overlay" style="display: none;"></div>
|
||||
|
||||
<div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image"></div>
|
||||
<script defer src="/static/js/dynamicscrolling.js"></script>
|
||||
<script defer src="/static/js/autocomplete.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let viewerOpen = false;
|
||||
|
||||
const viewerOverlay = document.getElementById('image-viewer-overlay');
|
||||
viewerOverlay.innerHTML = `
|
||||
<div id="image-viewer">
|
||||
<span id="viewer-close-button" class="material-icons">close</span>
|
||||
<span id="viewer-prev-button" class="material-icons">arrow_back</span>
|
||||
<span id="viewer-next-button" class="material-icons">arrow_forward</span>
|
||||
<div id="viewer-image-container">
|
||||
<img id="viewer-image" src="" alt="">
|
||||
</div>
|
||||
<div id="viewer-info">
|
||||
<div id="viewer-title"></div>
|
||||
<a id="viewer-source-button" href="" target="_blank">Visit Page</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function openImageViewer(element) {
|
||||
const parentImageDiv = element.closest('.image');
|
||||
if (!parentImageDiv) return;
|
||||
|
||||
const imgElement = parentImageDiv.querySelector('img.clickable');
|
||||
const mediaUrl = imgElement.dataset.media;
|
||||
const title = imgElement.alt;
|
||||
const sourceUrl = parentImageDiv.querySelector('.img_source').href;
|
||||
|
||||
if (!mediaUrl || 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');
|
||||
|
||||
viewerImage.src = mediaUrl;
|
||||
viewerTitle.textContent = title;
|
||||
viewerSourceButton.href = sourceUrl;
|
||||
viewerOverlay.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 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() {
|
||||
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>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let imagesContainer = document.querySelector('.images');
|
||||
let observer;
|
||||
|
||||
// Function to trim image titles based on the image width
|
||||
function trimTitles() {
|
||||
const images = document.querySelectorAll('.images .image');
|
||||
images.forEach((element) => {
|
||||
const imgElement = element.querySelector('img.clickable');
|
||||
const titleElement = element.querySelector('.img_title.clickable');
|
||||
const detailsElement = element.querySelector('.details');
|
||||
|
||||
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';
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// Call trimTitles periodically to account for dynamic loading, not happy about this one
|
||||
setInterval(() => {
|
||||
trimTitles();
|
||||
}, 10);
|
||||
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Observe the images container for changes
|
||||
observer.observe(imagesContainer, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
// Run initial title trimming after page load
|
||||
trimTitles();
|
||||
|
||||
// Start observing for dynamic image loading
|
||||
observeNewImages();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Check if JavaScript is enabled and modify the DOM accordingly
|
||||
document.getElementById('content').classList.remove('js-enabled');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue