CAMP/camp
1
0
Fork 0
Code Issues 3 Pull requests 1 Releases Wiki Activity

link to image in gallery

Browse source
This commit is contained in:
j 2025-03-25 22:46:08 +00:00
parent 68cba1f8a4
commit b0d3281149
1 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
camp/static/js/gallery.js
View file

@ -1,4 +1,17 @@
function parseGalleryHash() {
let parts = document.location.hash.slice(1).split('/')
if (parts[0] == 'g') {
return {
"gallery": parseInt(parts[1], 10),
"image": parseInt(parts[2], 10),
}
}
return {}
}
function loadGalleries() { function loadGalleries() {
let current = parseGalleryHash()
let galleryIdx = 1
document.querySelectorAll('.gallery').forEach(gallery => { document.querySelectorAll('.gallery').forEach(gallery => {
var photos = [], dialog var photos = [], dialog
gallery.querySelectorAll(".photo").forEach(img => { gallery.querySelectorAll(".photo").forEach(img => {
@ -15,12 +28,16 @@ function loadGalleries() {
dialog.open(src) dialog.open(src)
}) })
}) })
dialog = loadGallery(photos) dialog = loadGallery(photos, galleryIdx)
gallery.appendChild(dialog.element) gallery.appendChild(dialog.element)
if (current.gallery == galleryIdx) {
dialog.open(undefined, current.image)
}
galleryIdx += 1
}) })
} }
function loadGallery(images) { function loadGallery(images, idx) {
var gallery = document.createElement("dialog") var gallery = document.createElement("dialog")
gallery.classList.add("gallery-dialog") gallery.classList.add("gallery-dialog")
gallery.innerHTML = ` gallery.innerHTML = `
@ -41,6 +58,7 @@ function loadGallery(images) {
gallery.addEventListener("click", event => { gallery.addEventListener("click", event => {
if (event.target.className == "close") { if (event.target.className == "close") {
document.location.hash = ''
gallery.close(); gallery.close();
return return
} }
@ -48,6 +66,7 @@ function loadGallery(images) {
var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height && var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX && event.clientX <= rect.left + rect.width); rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
if (!isInDialog) { if (!isInDialog) {
document.location.hash = ''
gallery.close(); gallery.close();
} }
}) })
@ -60,7 +79,7 @@ function loadGallery(images) {
const thumbnailsContainer = gallery.querySelector(".thumbnails"); const thumbnailsContainer = gallery.querySelector(".thumbnails");
const download = gallery.querySelector(".download"); const download = gallery.querySelector(".download");
function updateSlideshow(index) { function updateGallery(index) {
mainImage.src = images[index].src.replace('_display', '_thumbnail'); mainImage.src = images[index].src.replace('_display', '_thumbnail');
setTimeout(() => { setTimeout(() => {
mainImage.src = images[index].src; mainImage.src = images[index].src;
@ -78,6 +97,7 @@ function loadGallery(images) {
} }
prevBtn.disabled = index === 0; prevBtn.disabled = index === 0;
nextBtn.disabled = index === images.length - 1; nextBtn.disabled = index === images.length - 1;
document.location.hash = `#g/${idx}/${index}`
} }
function createThumbnails() { function createThumbnails() {
@ -87,13 +107,13 @@ function loadGallery(images) {
thumb.classList.add("thumbnail"); thumb.classList.add("thumbnail");
thumb.onclick = () => { thumb.onclick = () => {
currentIndex = index; currentIndex = index;
updateSlideshow(index); updateGallery(index);
}; };
thumbnailsContainer.appendChild(thumb); thumbnailsContainer.appendChild(thumb);
}); });
} }
function showSlideshow() { function showGallery() {
window.dialog = gallery window.dialog = gallery
gallery.showModal() gallery.showModal()
} }
@ -101,27 +121,31 @@ function loadGallery(images) {
prevBtn.onclick = () => { prevBtn.onclick = () => {
if (currentIndex > 0) { if (currentIndex > 0) {
currentIndex--; currentIndex--;
updateSlideshow(currentIndex); updateGallery(currentIndex);
} }
}; };
nextBtn.onclick = () => { nextBtn.onclick = () => {
if (currentIndex < images.length - 1) { if (currentIndex < images.length - 1) {
currentIndex++; currentIndex++;
updateSlideshow(currentIndex); updateGallery(currentIndex);
} }
}; };
createThumbnails(); createThumbnails();
updateSlideshow(currentIndex); updateGallery(currentIndex);
const imagesIndex = images.map(img => img.src); const imagesIndex = images.map(img => img.src);
return { return {
element: gallery, element: gallery,
open: function(src) { open: function(src, idx=-1) {
if (idx != -1) {
currentIndex = idx
} else {
currentIndex = imagesIndex.indexOf(src) currentIndex = imagesIndex.indexOf(src)
updateSlideshow(currentIndex) }
showSlideshow() updateGallery(currentIndex)
showGallery()
} }
} }
} }