WIP

2024-06-07 16:26:15 +02:00
parent d01c7d3868
commit 154e79aacd
11 changed files with 153 additions and 29 deletions
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,5 +1,6 @@
@import 'filepond/dist/filepond.min.css';
@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
+@import 'photoswipe/dist/photoswipe.css';

@tailwind base;
@tailwind components;
@@ -31,3 +32,14 @@
    @apply text-gray-900 dark:text-white;
 }

+.pswp__bg {
+    @apply backdrop-blur-md bg-white/30 dark:bg-gray-800/30;
+}
+
+.pswp__top-bar {
+    @apply fixed bottom-2 top-auto w-auto left-1/2 -translate-x-1/2 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800;
+}
+
+.pswp__button {
+    width: 60px;
+}
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,4 +1,7 @@
 import './bootstrap';
+
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+
 import * as FilePond from 'filepond';
 import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
@@ -19,4 +22,59 @@ document.addEventListener('alpine:init', () => {
            this.states[state] = value;
        },
    });
-});
+});
+
+const lightbox = new PhotoSwipeLightbox({
+  gallery: '#album',
+  children: 'a',
+  bgOpacity: 1,
+  arrowPrevSVG: '<svg class="w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/></svg>',
+  arrowNextSVG: '<svg class="w-12 h-12 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>',
+  closeSVG: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg></div>',
+  zoomSVG: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.872 9.687 20 6.56 17.44 4 4 17.44 6.56 20 16.873 9.687Zm0 0-2.56-2.56M6 7v2m0 0v2m0-2H4m2 0h2m7 7v2m0 0v2m0-2h-2m2 0h2M8 4h.01v.01H8V4Zm2 2h.01v.01H10V6Zm2-2h.01v.01H12V4Zm8 8h.01v.01H20V12Zm-2 2h.01v.01H18V14Zm2 2h.01v.01H20V16Z"/></svg></div>',
+  pswpModule: () => import('photoswipe')
+});
+
+lightbox.on('uiRegister', function() {
+    lightbox.pswp.ui.registerElement({
+        name: 'download-button',
+        order: 9,
+        isButton: true,
+        tagName: 'button',
+        html: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2m-1-5-4 5-4-5m9 8h.01"/></svg></div>',
+
+        onInit: (el, pswp) => {
+            el.setAttribute('download', '');
+            el.setAttribute('target', '_blank');
+            el.setAttribute('rel', 'noopener');
+
+            pswp.on('change', () => {
+                el.href = pswp.currSlide.data.element.dataset.pswpDownload;
+            });
+        }
+    });
+
+    lightbox.pswp.ui.registerElement({
+        name: 'rotate-button-clk',
+        ariaLabel: 'Rotate clockwise',
+        order: 8,
+        isButton: true,
+        html: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="w-6 h-6 text-gray-800 dark:text-white" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19.407 11.376a7.552 7.552 0 1 1-2.212-5.34"/><path d="M17.555 2.612v4h-4"/></svg></div>',
+        onClick: (event, el) => {
+            // Rotate 
+        }
+    });
+
+    lightbox.pswp.ui.registerElement({
+        name: 'rotate-button-cclk',
+        ariaLabel: 'Rotate counter-clockwise',
+        order: 7,
+        isButton: true,
+        html: '<div class="bg-transparent p-2 inline-flex items-center me-2 hover:bg-gray-100 rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="w-6 h-6 text-gray-800 dark:text-white scale-x-[-1]" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19.407 11.376a7.552 7.552 0 1 1-2.212-5.34"/><path d="M17.555 2.612v4h-4"/></svg></div>',
+        onClick: (event, el) => {
+            // Rotate
+        }
+    });
+});
+
+lightbox.init();
--- a/resources/views/album/show.blade.php
+++ b/resources/views/album/show.blade.php
@@ -28,9 +28,16 @@
    @if($album->mutations->count() > 0)
        <livewire:drawer.album.progress-monitor :mutation="$album->mutations->first()"/>
    @else
-        <div class="m-8 flex flex-wrap flex-row gap-4">
+        <div id="album" class="m-8 flex flex-wrap flex-row gap-4">
            @foreach ($album->images as $image)
-                <figure class="relative group rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
+                <a 
+                    class="relative group rounded-lg cursor-pointer h-80 flex-grow overflow-hidden" 
+                    href="{{ $image->lightbox['location'] }}"
+                    data-pswp-width="{{ $image->lightbox['width'] }}"
+                    data-pswp-download="{{ $image->getDownload() }}"
+                    data-pswp-height="{{ $image->lightbox['height'] }}"
+                    data-cropped="true"
+                >
                    <img class="max-h-full min-w-full align-bottom object-cover"
                     src="{{ $image->getThumbnail() }}" alt="{{ $album->name }} Bild">
                    <div class="opacity-0 group-hover:opacity-40 absolute inset-0 w-full h-full bg-black flex items-center justify-center transition-opacity">
@@ -39,7 +46,7 @@
                          <path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                        </svg>              
                    </div>
-                </figure>
+                </a>
            @endforeach
        </div>
        <x-drawer name="image-add" >