From 55314b9fd15539eada8d44d1dcd01aa8aa1cc09e Mon Sep 17 00:00:00 2001 From: j Date: Fri, 28 Mar 2025 10:48:55 +0000 Subject: [PATCH] add inline gallery, use for gallery details page --- camp/static/css/site.scss | 29 +++- camp/static/js/gallery.js | 142 ++++++++++++------ content/templates/base.html | 2 - .../templates/photologue/gallery_detail.html | 35 ++--- 4 files changed, 139 insertions(+), 69 deletions(-) diff --git a/camp/static/css/site.scss b/camp/static/css/site.scss index 6453d83..fde4500 100644 --- a/camp/static/css/site.scss +++ b/camp/static/css/site.scss @@ -1,4 +1,4 @@ -.gallery-dialog { +.gallery-dialog, .gallery-main-stage { &:open { background: #282828; width: 100%; @@ -52,9 +52,6 @@ cursor: pointer; border: 2px solid transparent; } - .thumbnail.active { - border-color: blue; - } .nav-btn { cursor: pointer; font-size: 20px; @@ -122,3 +119,27 @@ } } +.gallery-main-stage { + .photo-container .image { + height: auto; + } + .download { + right: 4px + + } + @media screen and (max-width: 39.9375em) { + .download { + } + } +} + +.gallery-dialog, .inline-gallery { + .thumbnail { + cursor: pointer; + border: 2px solid transparent; + } + .thumbnail.active { + cursor: initial; + border-color: #1779ba; + } +} diff --git a/camp/static/js/gallery.js b/camp/static/js/gallery.js index a55171c..d4ae2db 100644 --- a/camp/static/js/gallery.js +++ b/camp/static/js/gallery.js @@ -1,9 +1,18 @@ +function isNumber(x) { + return parseFloat(x) == x +}; + function parseGalleryHash() { let parts = document.location.hash.slice(1).split('/') - if (parts[0] == 'g') { + if (parts.lengh == 1 && isNumber(parts[0])) { return { - "gallery": parseInt(parts[1], 10), - "image": parseInt(parts[2], 10), + 'gallery': 'inline', + "image": parseInt(parts[0], 10) - 1, + } + } else if (parts.length == 2 && isNumber(parts[0]) && isNumber(parts[1])) { + return { + "gallery": parseInt(parts[0], 10) - 1, + "image": parseInt(parts[1], 10) - 1, } } return {} @@ -11,7 +20,7 @@ function parseGalleryHash() { function loadGalleries() { let current = parseGalleryHash() - let galleryIdx = 1 + let galleryIdx = 0 document.querySelectorAll('.gallery').forEach(gallery => { var photos = [], dialog gallery.querySelectorAll(".photo").forEach(img => { @@ -35,49 +44,77 @@ function loadGalleries() { } galleryIdx += 1 }) + document.querySelectorAll('.inline-gallery').forEach(gallery => { + var photos = [], stage + gallery.querySelectorAll(".photo").forEach(img => { + const src = img.src.replace('_thumbnail', '_display') + let photo = { + src: src, + caption: img.dataset.caption, + orig: img.dataset.orig + } + photos.push(photo) + img.parentElement.addEventListener("click", event => { + event.preventDefault() + event.stopPropagation() + stage.open(src) + }) + }) + const main = document.querySelector('.gallery-main-stage') + stage = loadGallery(photos, 'inline', main, gallery) + }) } -function loadGallery(images, idx) { - var gallery = document.createElement("dialog") - gallery.classList.add("gallery-dialog") - gallery.innerHTML = ` -
-
- -
- - -
- - - - -
-
- ` +function loadGallery(images, idx, main, thumbnails) { + let gallery; - gallery.addEventListener("click", event => { - if (event.target.className == "close") { - document.location.hash = '' - gallery.close(); - return - } - var rect = gallery.getBoundingClientRect(); - var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && - rect.left <= event.clientX && event.clientX <= rect.left + rect.width); - if (!isInDialog) { - document.location.hash = '' - gallery.close(); - } - }) + if (idx == 'inline') { + gallery = main + } else { + gallery = document.createElement("dialog") + gallery.classList.add("gallery-dialog") + gallery.innerHTML = ` +
+
+ +
+ + +
+ + + + +
+
+ ` + + gallery.addEventListener("click", event => { + if (event.target.className == "close") { + document.location.hash = '' + gallery.close(); + return + } + var rect = gallery.getBoundingClientRect(); + var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && + rect.left <= event.clientX && event.clientX <= rect.left + rect.width); + if (!isInDialog) { + document.location.hash = '' + gallery.close(); + } + }) + } let currentIndex = 0; const mainImage = gallery.querySelector(".main-image"); const caption = gallery.querySelector(".caption"); const prevBtn = gallery.querySelector(".prev.nav-btn"); const nextBtn = gallery.querySelector(".next.nav-btn"); - const thumbnailsContainer = gallery.querySelector(".thumbnails"); const download = gallery.querySelector(".download"); + let thumbnailsContainer + if (idx != 'inline') { + thumbnailsContainer = gallery.querySelector(".thumbnails"); + } gallery.addEventListener("keydown", event => { if (event.keyCode == 39) { @@ -97,9 +134,15 @@ function loadGallery(images, idx) { mainImage.src = images[index].src; }, 0) caption.innerHTML = images[index].caption; - gallery.querySelectorAll(".thumbnail").forEach((thumb, i) => { - thumb.classList.toggle("active", i === index); - }); + if (idx == 'inline') { + thumbnails.querySelectorAll(".thumbnail").forEach((thumb, i) => { + thumb.classList.toggle("active", i === index); + }); + } else { + gallery.querySelectorAll(".thumbnail").forEach((thumb, i) => { + thumb.classList.toggle("active", i === index); + }); + } if (images[index].orig) { download.href = images[index].orig download.classList.remove('disabled') @@ -109,7 +152,11 @@ function loadGallery(images, idx) { } prevBtn.disabled = index === 0; nextBtn.disabled = index === images.length - 1; - document.location.hash = `#g/${idx}/${index}` + if (idx == 'inline') { + document.location.hash = `#${index + 1}` + } else { + document.location.hash = `#${idx + 1}/${index + 1}` + } } function createThumbnails() { @@ -144,20 +191,23 @@ function loadGallery(images, idx) { } }; - createThumbnails(); + idx != 'inline' && createThumbnails(); updateGallery(currentIndex); const imagesIndex = images.map(img => img.src); return { element: gallery, - open: function(src, idx=-1) { - if (idx != -1) { - currentIndex = idx + open: function(src, newIdx=-1) { + if (newIdx != -1) { + currentIndex = newIdx } else { currentIndex = imagesIndex.indexOf(src) } updateGallery(currentIndex) - showGallery() + console.log("!WTF", idx) + if (idx != 'inline') { + showGallery() + } } } } diff --git a/content/templates/base.html b/content/templates/base.html index e3e3a48..f1f0eea 100644 --- a/content/templates/base.html +++ b/content/templates/base.html @@ -47,8 +47,6 @@ {% block content %} {% endblock %} - - {} {% compress js file base %} diff --git a/content/templates/photologue/gallery_detail.html b/content/templates/photologue/gallery_detail.html index dfaad96..dfa3c80 100644 --- a/content/templates/photologue/gallery_detail.html +++ b/content/templates/photologue/gallery_detail.html @@ -10,33 +10,34 @@
Back to {{ gallery.content.all.0.title }}
{% endif %}
{{ gallery.title }}
- + {% with gallery.public.0 as photo %} +
+
+
+ {{ photo.title }} +
+ + + + + +
+
{{ photo.caption_html }}
+
+ {% endwith %}

{% trans "Other photos" %}:

-
+
{% for photo in gallery.public %}
- - {{ photo.title }} + + {{ photo.title }}
{% endfor %}
- {% endblock %}