Gallery support
This commit is contained in:
Alex Rennie-Lis
@@ -1,367 +1,426 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import { onMount } from 'svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
|
||||
// Svelte 5 Runes for Core Reactivity
|
||||
let photos = $state([]);
|
||||
let nextToken = $state(null);
|
||||
let loading = $state(false);
|
||||
let hasMore = $state(true);
|
||||
let activePhoto = $state(null);
|
||||
let observerTarget;
|
||||
// Svelte 5 Runes for Core Reactivity
|
||||
let photos = $state([]);
|
||||
let galleries = $state([]);
|
||||
let currentGallery = $state('');
|
||||
|
||||
let nextToken = $state(null);
|
||||
let loading = $state(false);
|
||||
let hasMore = $state(true);
|
||||
let activePhoto = $state(null);
|
||||
let observerTarget;
|
||||
|
||||
// Lightbox Control Flags
|
||||
let isZoomed = $state(false);
|
||||
let lightboxContainer = $state(null);
|
||||
let imageMatrixWrapper = $state(null); // Explicit ref to bypass reactive state lag
|
||||
let isDragging = false; // Internal mutable flag (not a reactive rune)
|
||||
|
||||
// Coordinate Vector Matrix (using raw numbers to bypass Svelte state loops on fast cycles)
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let ticking = false;
|
||||
// Lightbox Control Flags
|
||||
let isZoomed = $state(false);
|
||||
let lightboxContainer = $state(null);
|
||||
let imageMatrixWrapper = $state(null); // Explicit ref to bypass reactive state lag
|
||||
let isDragging = false; // Internal mutable flag (not a reactive rune)
|
||||
|
||||
// Coordinate Vector Matrix (using raw numbers to bypass Svelte state loops on fast cycles)
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let ticking = false;
|
||||
|
||||
// Touch tracking coordinates for layout pagination swipes
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
// Touch tracking coordinates for layout pagination swipes
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
// Compute active index reactively
|
||||
let activeIndex = $derived(
|
||||
activePhoto ? photos.findIndex(p => p.id === activePhoto.id) : -1
|
||||
);
|
||||
// Compute active index reactively
|
||||
let activeIndex = $derived(
|
||||
activePhoto ? photos.findIndex(p => p.id === activePhoto.id) : -1
|
||||
);
|
||||
|
||||
async function loadPhotos() {
|
||||
if (loading || !hasMore) return;
|
||||
// Dynamic Title Renderer
|
||||
let pageTitle = $derived.by(() => {
|
||||
if (galleries.length <= 1) {
|
||||
return env.PUBLIC_GALLERY_NAME || formatTitle(currentGallery);
|
||||
}
|
||||
return formatTitle(currentGallery);
|
||||
});
|
||||
|
||||
// Clean folder strings into title representations
|
||||
function formatTitle(folderName) {
|
||||
if (!folderName) return '';
|
||||
return folderName
|
||||
.replace(/[_-]/g, ' ')
|
||||
.replace(/\b\w/g, char => char.toUpperCase());
|
||||
}
|
||||
|
||||
async function loadPhotos(reset = false) {
|
||||
if (loading) return;
|
||||
if (!reset && !hasMore) return;
|
||||
|
||||
loading = true;
|
||||
if (reset) {
|
||||
photos = [];
|
||||
nextToken = null;
|
||||
hasMore = true;
|
||||
}
|
||||
|
||||
const url = new URL('/api/photos', window.location.origin);
|
||||
if (nextToken) url.searchParams.set('next', nextToken);
|
||||
const url = new URL('/api/photos', window.location.origin);
|
||||
url.searchParams.set('gallery', currentGallery);
|
||||
if (nextToken) url.searchParams.set('next', nextToken);
|
||||
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
|
||||
if (data && Array.isArray(data.photos)) {
|
||||
photos = [...photos, ...data.photos];
|
||||
nextToken = data.nextContinuationToken;
|
||||
hasMore = !!nextToken;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load photos:', err);
|
||||
} finally {
|
||||
loading = false;
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
|
||||
if (data) {
|
||||
galleries = data.galleries || [];
|
||||
if (!currentGallery) currentGallery = data.currentGallery || '';
|
||||
|
||||
photos = reset ? (data.photos || []) : [...photos, ...(data.photos || [])];
|
||||
nextToken = data.nextContinuationToken;
|
||||
hasMore = !!nextToken;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load photos:', err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleGallerySwitch(e) {
|
||||
currentGallery = e.target.value;
|
||||
resetZoom();
|
||||
loadPhotos(true);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadPhotos();
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && hasMore && !loading) {
|
||||
loadPhotos();
|
||||
}
|
||||
}, { rootMargin: '300px' });
|
||||
|
||||
if (observerTarget) observer.observe(observerTarget);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
function changeActivePhoto(photo) {
|
||||
activePhoto = photo;
|
||||
resetZoom();
|
||||
}
|
||||
|
||||
function resetZoom() {
|
||||
isZoomed = false;
|
||||
isDragging = false;
|
||||
currentX = 0;
|
||||
currentY = 0;
|
||||
if (imageMatrixWrapper) {
|
||||
imageMatrixWrapper.style.transform = `translate3d(0px, 0px, 0px)`;
|
||||
}
|
||||
}
|
||||
|
||||
function nextPhoto() {
|
||||
if (activeIndex !== -1 && activeIndex < photos.length - 1) {
|
||||
changeActivePhoto(photos[activeIndex + 1]);
|
||||
if (activeIndex >= photos.length - 4) loadPhotos();
|
||||
}
|
||||
}
|
||||
|
||||
function prevPhoto() {
|
||||
if (activeIndex > 0) {
|
||||
changeActivePhoto(photos[activeIndex - 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadPhotos();
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && hasMore) {
|
||||
loadPhotos();
|
||||
}
|
||||
}, { rootMargin: '300px' });
|
||||
|
||||
if (observerTarget) observer.observe(observerTarget);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
function changeActivePhoto(photo) {
|
||||
activePhoto = photo;
|
||||
resetZoom();
|
||||
}
|
||||
|
||||
function resetZoom() {
|
||||
isZoomed = false;
|
||||
isDragging = false;
|
||||
currentX = 0;
|
||||
currentY = 0;
|
||||
if (imageMatrixWrapper) {
|
||||
imageMatrixWrapper.style.transform = `translate3d(0px, 0px, 0px)`;
|
||||
}
|
||||
}
|
||||
|
||||
function nextPhoto() {
|
||||
if (activeIndex !== -1 && activeIndex < photos.length - 1) {
|
||||
changeActivePhoto(photos[activeIndex + 1]);
|
||||
if (activeIndex >= photos.length - 4) loadPhotos();
|
||||
}
|
||||
}
|
||||
|
||||
function prevPhoto() {
|
||||
if (activeIndex > 0) {
|
||||
changeActivePhoto(photos[activeIndex - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (!activePhoto) return;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
activePhoto = null;
|
||||
}
|
||||
if (e.key === 'ArrowRight' && !isZoomed) {
|
||||
e.preventDefault();
|
||||
nextPhoto();
|
||||
}
|
||||
if (e.key === 'ArrowLeft' && !isZoomed) {
|
||||
e.preventDefault();
|
||||
prevPhoto();
|
||||
}
|
||||
}
|
||||
function handleKeyDown(e) {
|
||||
if (!activePhoto) return;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
activePhoto = null;
|
||||
}
|
||||
if (e.key === 'ArrowRight' && !isZoomed) {
|
||||
e.preventDefault();
|
||||
nextPhoto();
|
||||
}
|
||||
if (e.key === 'ArrowLeft' && !isZoomed) {
|
||||
e.preventDefault();
|
||||
prevPhoto();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (!lightboxContainer) return;
|
||||
if (!document.fullscreenElement) {
|
||||
lightboxContainer.requestFullscreen().catch(err => console.error(err));
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
if (!lightboxContainer) return;
|
||||
if (!document.fullscreenElement) {
|
||||
lightboxContainer.requestFullscreen().catch(err => console.error(err));
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
// HIGH PERFORMANCE NATIVE INTERFACE PIPELINE (60FPS Engine)
|
||||
function pointerDown(clientX, clientY, target) {
|
||||
if (!isZoomed) return;
|
||||
if (target.tagName === 'BUTTON' || target.closest('button')) return;
|
||||
// HIGH PERFORMANCE NATIVE INTERFACE PIPELINE (60FPS Engine)
|
||||
function pointerDown(clientX, clientY, target) {
|
||||
if (!isZoomed) return;
|
||||
if (target.tagName === 'BUTTON' || target.closest('button')) return;
|
||||
|
||||
isDragging = true;
|
||||
startX = clientX - currentX;
|
||||
startY = clientY - currentY;
|
||||
}
|
||||
isDragging = true;
|
||||
startX = clientX - currentX;
|
||||
startY = clientY - currentY;
|
||||
}
|
||||
|
||||
function pointerMove(clientX, clientY) {
|
||||
if (!isDragging) return;
|
||||
|
||||
currentX = clientX - startX;
|
||||
currentY = clientY - startY;
|
||||
function pointerMove(clientX, clientY) {
|
||||
if (!isDragging) return;
|
||||
|
||||
currentX = clientX - startX;
|
||||
currentY = clientY - startY;
|
||||
|
||||
// requestAnimationFrame schedules updates with the browser screen refresh cycle
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
if (imageMatrixWrapper) {
|
||||
imageMatrixWrapper.style.transform = `translate3d(${currentX}px, ${currentY}px, 0px)`;
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
// requestAnimationFrame schedules updates with the browser screen refresh cycle
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
if (imageMatrixWrapper) {
|
||||
imageMatrixWrapper.style.transform = `translate3d(${currentX}px, ${currentY}px, 0px)`;
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
function pointerUp() {
|
||||
isDragging = false;
|
||||
}
|
||||
function pointerUp() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
// Desktop Mouse Interface Subscriptions
|
||||
function handleMouseDown(e) { pointerDown(e.clientX, e.clientY, e.target); }
|
||||
function handleMouseMove(e) {
|
||||
if(isDragging) e.preventDefault();
|
||||
pointerMove(e.clientX, e.clientY);
|
||||
}
|
||||
// Desktop Mouse Interface Subscriptions
|
||||
function handleMouseDown(e) { pointerDown(e.clientX, e.clientY, e.target); }
|
||||
function handleMouseMove(e) {
|
||||
if(isDragging) e.preventDefault();
|
||||
pointerMove(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
// Mobile Touch Interface Subscriptions
|
||||
function handleTouchStart(e) {
|
||||
if (isZoomed) {
|
||||
const touch = e.touches[0];
|
||||
pointerDown(touch.clientX, touch.clientY, e.target);
|
||||
} else {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
}
|
||||
}
|
||||
// Mobile Touch Interface Subscriptions
|
||||
function handleTouchStart(e) {
|
||||
if (isZoomed) {
|
||||
const touch = e.touches[0];
|
||||
pointerDown(touch.clientX, touch.clientY, e.target);
|
||||
} else {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
if (isZoomed && e.touches.length === 1) {
|
||||
e.preventDefault(); // Kill native momentum bouncing
|
||||
const touch = e.touches[0];
|
||||
pointerMove(touch.clientX, touch.clientY);
|
||||
}
|
||||
}
|
||||
// Handled single-finger layout tracking securely
|
||||
function handleTouchMove(e) {
|
||||
if (isZoomed && e.touches.length === 1) {
|
||||
e.preventDefault(); // Kill native momentum bouncing
|
||||
const touch = e.touches[0];
|
||||
pointerMove(touch.clientX, touch.clientY);
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchEnd(e) {
|
||||
if (isZoomed) {
|
||||
pointerUp();
|
||||
} else {
|
||||
touchEndX = e.changedTouches[0].screenX;
|
||||
const threshold = 50;
|
||||
if (touchStartX - touchEndX > threshold) nextPhoto();
|
||||
else if (touchEndX - touchStartX > threshold) prevPhoto();
|
||||
}
|
||||
}
|
||||
function handleTouchEnd(e) {
|
||||
if (isZoomed) {
|
||||
pointerUp();
|
||||
} else {
|
||||
touchEndX = e.changedTouches[0].screenX;
|
||||
const threshold = 50;
|
||||
if (touchStartX - touchEndX > threshold) nextPhoto();
|
||||
else if (touchEndX - touchStartX > threshold) prevPhoto();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeyDown} />
|
||||
|
||||
<div class="min-h-screen bg-zinc-950 text-zinc-100">
|
||||
<header class="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md px-6 py-4 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold tracking-wide">{env.PUBLIC_GALLERY_NAME}</h1>
|
||||
</header>
|
||||
<header class="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md px-6 py-4 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold tracking-wide">{pageTitle}</h1>
|
||||
|
||||
{#if galleries.length > 1}
|
||||
<select
|
||||
value={currentGallery}
|
||||
onchange={handleGallerySwitch}
|
||||
class="bg-zinc-900 text-zinc-100 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm font-medium focus:border-blue-500 focus:outline-none cursor-pointer hover:bg-zinc-800 transition"
|
||||
>
|
||||
{#each galleries as gallery}
|
||||
<option value={gallery}>{formatTitle(gallery)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<main class="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
|
||||
{#each photos as photo (photo.id)}
|
||||
<button
|
||||
class="group relative aspect-square overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
onclick={() => changeActivePhoto(photo)}
|
||||
>
|
||||
<img
|
||||
src={photo.thumbUrl}
|
||||
alt="Gallery item"
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<main class="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
|
||||
{#if !loading && photos.length === 0}
|
||||
<div class="flex flex-col items-center justify-center py-24 text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-zinc-600 mb-4 animate-pulse">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold text-zinc-300 mb-1">No images found</h3>
|
||||
<p class="text-sm text-zinc-500 max-w-sm">This gallery doesn't contain any photos yet, or storage is still syncing.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
|
||||
{#each photos as photo (photo.id)}
|
||||
<button
|
||||
class="group relative aspect-square overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
onclick={() => changeActivePhoto(photo)}
|
||||
>
|
||||
<img
|
||||
src={photo.thumbUrl}
|
||||
alt="Gallery item"
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div bind:this={observerTarget} class="w-full flex justify-center py-12">
|
||||
{#if loading}
|
||||
<div class="h-6 w-6 animate-spin rounded-full border-2 border-zinc-500 border-t-transparent"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
<div bind:this={observerTarget} class="w-full flex justify-center py-12">
|
||||
{#if loading}
|
||||
<div class="h-6 w-6 animate-spin rounded-full border-2 border-zinc-500 border-t-transparent"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{#if activePhoto}
|
||||
<div
|
||||
bind:this={lightboxContainer}
|
||||
class="fixed inset-0 z-50 flex flex-col items-center justify-between bg-black/95 p-4 select-none touch-none"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) activePhoto = null; }}
|
||||
onkeydown={handleKeyDown}
|
||||
ontouchstart={handleTouchStart}
|
||||
ontouchmove={handleTouchMove}
|
||||
ontouchend={handleTouchEnd}
|
||||
>
|
||||
<div class="w-full flex justify-between items-center z-50 p-2 pointer-events-none">
|
||||
<div class="text-sm font-medium tracking-wider bg-zinc-900/80 px-4 py-2 rounded-full border border-zinc-800/60 text-zinc-300 pointer-events-auto">
|
||||
{activeIndex + 1} <span class="text-zinc-600 px-0.5">/</span> {photos.length}
|
||||
<div
|
||||
bind:this={lightboxContainer}
|
||||
class="fixed inset-0 z-50 flex flex-col items-center justify-between bg-black/95 p-4 select-none touch-none"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) activePhoto = null; }}
|
||||
onkeydown={handleKeyDown}
|
||||
ontouchstart={handleTouchStart}
|
||||
ontouchmove={handleTouchMove}
|
||||
ontouchend={handleTouchEnd}
|
||||
>
|
||||
<div class="w-full flex justify-between items-center z-50 p-2 pointer-events-none">
|
||||
<div class="text-sm font-medium tracking-wider bg-zinc-900/80 px-4 py-2 rounded-full border border-zinc-800/60 text-zinc-300 pointer-events-auto">
|
||||
{activeIndex + 1} <span class="text-zinc-600 px-0.5">/</span> {photos.length}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pointer-events-auto">
|
||||
<button
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title={isZoomed ? "Reset Zoom" : "Zoom to Full Resolution"}
|
||||
onclick={() => { if(isZoomed) { resetZoom(); } else { isZoomed = true; } }}
|
||||
>
|
||||
{#if isZoomed}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M15 9V4.5M15 9h4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15v4.5M15 15h4.5M15 15l5.25 5.25" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75v4.5m0-4.5h-4.5m4.5 0L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title="Toggle Fullscreen"
|
||||
onclick={toggleFullscreen}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="/api/download?id={activePhoto.id}&gallery={currentGallery}"
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title="Download Original"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title="Close"
|
||||
onclick={() => activePhoto = null}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pointer-events-auto">
|
||||
<button
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title={isZoomed ? "Reset Zoom" : "Zoom to Full Resolution"}
|
||||
onclick={() => { if(isZoomed) { resetZoom(); } else { isZoomed = true; } }}
|
||||
>
|
||||
{#if isZoomed}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M15 9V4.5M15 9h4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15v4.5M15 15h4.5M15 15l5.25 5.25" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75v4.5m0-4.5h-4.5m4.5 0L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
<div
|
||||
class="relative w-full flex-1 flex items-center justify-center overflow-hidden my-4 selection:bg-transparent"
|
||||
class:cursor-grab={isZoomed && !isDragging}
|
||||
class:cursor-grabbing={isZoomed && isDragging}
|
||||
onmousedown={handleMouseDown}
|
||||
onmousemove={handleMouseMove}
|
||||
onmouseup={pointerUp}
|
||||
onmouseleave={pointerUp}
|
||||
>
|
||||
{#if !isZoomed}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute left-0 top-0 bottom-0 w-[10%] z-30 cursor-w-resize focus:outline-none flex items-center justify-start pl-4 group"
|
||||
onclick={prevPhoto}
|
||||
aria-label="Previous photo"
|
||||
disabled={activeIndex === 0}
|
||||
>
|
||||
{#if activeIndex > 0}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title="Toggle Fullscreen"
|
||||
onclick={toggleFullscreen}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-0 top-0 bottom-0 w-[10%] z-30 cursor-e-resize focus:outline-none flex items-center justify-end pr-4 group"
|
||||
onclick={nextPhoto}
|
||||
aria-label="Next photo"
|
||||
disabled={activeIndex === photos.length - 1}
|
||||
>
|
||||
{#if activeIndex < photos.length - 1}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<a
|
||||
href="/api/download?id={activePhoto.id}"
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title="Download Original"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button
|
||||
class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
|
||||
title="Close"
|
||||
onclick={() => activePhoto = null}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
bind:this={imageMatrixWrapper}
|
||||
class="max-w-full max-h-full flex items-center justify-center p-2 ease-out will-change-transform"
|
||||
>
|
||||
<img
|
||||
src={activePhoto.fullUrl}
|
||||
alt="Gallery Content Visual"
|
||||
draggable="false"
|
||||
class="max-h-[70vh] max-w-full rounded shadow-2xl select-none pointer-events-none transition-transform duration-200 ease-out will-change-transform"
|
||||
style="transform: scale({isZoomed ? 3.8 : 1});"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative w-full flex-1 flex items-center justify-center overflow-hidden my-4 selection:bg-transparent"
|
||||
class:cursor-grab={isZoomed && !isDragging}
|
||||
class:cursor-grabbing={isZoomed && isDragging}
|
||||
onmousedown={handleMouseDown}
|
||||
onmousemove={handleMouseMove}
|
||||
onmouseup={pointerUp}
|
||||
onmouseleave={pointerUp}
|
||||
>
|
||||
{#if !isZoomed}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute left-0 top-0 bottom-0 w-[10%] z-30 cursor-w-resize focus:outline-none flex items-center justify-start pl-4 group"
|
||||
onclick={prevPhoto}
|
||||
aria-label="Previous photo"
|
||||
disabled={activeIndex === 0}
|
||||
>
|
||||
{#if activeIndex > 0}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-0 top-0 bottom-0 w-[10%] z-30 cursor-e-resize focus:outline-none flex items-center justify-end pr-4 group"
|
||||
onclick={nextPhoto}
|
||||
aria-label="Next photo"
|
||||
disabled={activeIndex === photos.length - 1}
|
||||
>
|
||||
{#if activeIndex < photos.length - 1}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
bind:this={imageMatrixWrapper}
|
||||
class="max-w-full max-h-full flex items-center justify-center p-2 ease-out will-change-transform"
|
||||
>
|
||||
<img
|
||||
src={activePhoto.fullUrl}
|
||||
alt="Gallery Content Visual"
|
||||
draggable="false"
|
||||
class="max-h-[70vh] max-w-full rounded shadow-2xl select-none pointer-events-none transition-transform duration-200 ease-out will-change-transform"
|
||||
style="transform: scale({isZoomed ? 3.8 : 1});"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl mx-auto z-40 bg-zinc-950/90 border border-zinc-900 px-4 py-3 rounded-xl backdrop-blur-md pointer-events-auto">
|
||||
<div class="flex items-center gap-2 overflow-x-auto overflow-y-hidden py-1 px-0.5 scrollbar-thin scrollbar-thumb-zinc-800 scroll-smooth">
|
||||
{#each photos as thumbPhoto, idx}
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex-shrink-0 w-16 h-12 rounded-md overflow-hidden border transition-all duration-200 focus:outline-none
|
||||
{idx === activeIndex ? 'border-blue-500 scale-105 ring-2 ring-blue-500/20 opacity-100' : 'border-zinc-800/80 opacity-40 hover:opacity-80'}"
|
||||
onclick={() => changeActivePhoto(thumbPhoto)}
|
||||
>
|
||||
<img
|
||||
src={thumbPhoto.thumbUrl}
|
||||
alt="Ribbon Navigation Frame"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full max-w-4xl mx-auto z-40 bg-zinc-950/90 border border-zinc-900 px-4 py-3 rounded-xl backdrop-blur-md pointer-events-auto">
|
||||
<div class="flex items-center gap-2 overflow-x-auto overflow-y-hidden py-1 px-0.5 scrollbar-thin scrollbar-thumb-zinc-800 scroll-smooth">
|
||||
{#each photos as thumbPhoto, idx}
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex-shrink-0 w-16 h-12 rounded-md overflow-hidden border transition-all duration-200 focus:outline-none
|
||||
{idx === activeIndex ? 'border-blue-500 scale-105 ring-2 ring-blue-500/20 opacity-100' : 'border-zinc-800/80 opacity-40 hover:opacity-80'}"
|
||||
onclick={() => changeActivePhoto(thumbPhoto)}
|
||||
>
|
||||
<img
|
||||
src={thumbPhoto.thumbUrl}
|
||||
alt="Ribbon Navigation Frame"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user