diff --git a/javascript/gallery.js b/javascript/gallery.js index 72180bf15..76e9a6046 100644 --- a/javascript/gallery.js +++ b/javascript/gallery.js @@ -34,6 +34,7 @@ function refreshGallerySelection({ emit = false } = {}) { const current = window.currentImage; const index = files.findIndex((file) => file.src === current); gallerySelection = { files, index }; + updateGallerySelectionClasses(); if (emit) { document.dispatchEvent(new CustomEvent('gallery-selection-changed', { detail: { index, files } })); } @@ -46,6 +47,7 @@ function applyGallerySelection(index, { send = true, emit = true } = {}) { const clamped = Math.max(0, Math.min(index, files.length - 1)); gallerySelection.index = clamped; window.currentImage = files[clamped].src; + updateGallerySelectionClasses(); if (send && el.btnSend) el.btnSend.click(); if (emit) { document.dispatchEvent(new CustomEvent('gallery-selection-changed', { detail: { index: clamped, files } })); @@ -65,12 +67,20 @@ function setGallerySelectionByElement(element, options) { function resetGallerySelection() { gallerySelection = { files: [], index: -1 }; window.currentImage = null; + updateGallerySelectionClasses(); } function buildGalleryFileUrl(path) { return new URL(`/file=${encodeURI(path)}`, window.location.origin).toString(); } +function updateGallerySelectionClasses() { + const { files, index } = gallerySelection; + files.forEach((file, i) => { + file.classList.toggle('gallery-file-selected', i === index); + }); +} + window.getGallerySelection = () => ({ index: gallerySelection.index, files: gallerySelection.files }); window.setGallerySelection = (index, options) => applyGallerySelection(index, options); window.getGallerySelectedUrl = () => (window.currentImage ? buildGalleryFileUrl(window.currentImage) : null); @@ -154,6 +164,9 @@ function updateGalleryStyles() { .gallery-file:hover { filter: grayscale(100%); } + :host(.gallery-file-selected) .gallery-file { + box-shadow: 0 0 0 2px var(--sd-button-selected-color); + } `); }