Merge pull request #499 from pinkary-project/fix/446-lightbox-issues

Fix image lightbox width and post pagination issues
pinkary-project · Aug 14, 2024 · 07f2af6 · 07f2af6
2 parents 276e4e6 + 417aac3
commit 07f2af6
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 30 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -56,7 +56,8 @@ import { autocomplete, usesAutocomplete } from "./autocomplete.js";
 Alpine.data('dynamicAutocomplete', autocomplete);
 Alpine.data('usesDynamicAutocomplete', usesAutocomplete);
 
-import {lightBox} from './light-box.js';
-Alpine.data('lightBox',lightBox);
+import {hasLightBoxImages, lightBox} from './light-box.js';
+Alpine.data('hasLightBoxImages', hasLightBoxImages);
+Alpine.data('lightBox', lightBox);
 
 Livewire.start()
diff --git a/resources/js/light-box.js b/resources/js/light-box.js
@@ -1,61 +1,72 @@
-const lightBox = () => ({
-    open: false,
-    imgSrc: '',
-    currentIndex: 0,
-    images: [],
+const hasLightBoxImages = () => ({
     init() {
-        let self = this;
-
-        let hasLightboxImageElements = document.querySelectorAll('[data-has-lightbox-images]');
-
-        hasLightboxImageElements.forEach((lightboxImageElement) => {
-            let images = lightboxImageElement.querySelectorAll('img');
+        const images = this.$el.querySelectorAll('img');
 
-            images.forEach((img, index) => {
-                img.classList.add('cursor-pointer');
-                img.dataset.navigateIgnore = true;
-                img.addEventListener('click', function (e) {
-                    self.currentIndex = index;
-                    self.images = images;
-                    self.updateImageSrc();
-                    self.$dispatch('open-modal', 'image-lightbox');
-                    self.attachKeyboardEvents();
+        images.forEach((img, index) => {
+            img.classList.add('cursor-pointer');
+            img.dataset.navigateIgnore = true;
+            img.addEventListener('click', (e) => {
+                this.$dispatch('open-lightbox', {
+                    images: images,
+                    currentIndex: index,
                 });
             });
         });
+    }
+});
 
-        window.addEventListener('modal-opened', (e) => {
-            if (e.detail === 'image-lightbox') {
-                this.open = true;
-            }
+const lightBox = () => ({
+    open: false,
+    imgSrc: '',
+    currentIndex: 0,
+    images: [],
+    init() {
+        window.addEventListener('open-lightbox', (e) => {
+            this.open = true;
+            this.currentIndex = e.detail.currentIndex;
+            this.images = e.detail.images;
+            this.updateImageSrc();
+            this.$dispatch('open-modal', 'image-lightbox')
         });
 
         window.addEventListener('modal-closed', (e) => {
             if (e.detail === 'image-lightbox') {
                 this.open = false;
+                this.currentIndex = 0;
+                this.images = [];
+                this.imgSrc = '';
             }
         });
+
+        this.attachKeyboardEvents();
     },
+
     nextImage() {
         this.currentIndex = (this.currentIndex + 1) % this.images.length;
         this.updateImageSrc()
     },
+
     prevImage() {
         this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
         this.updateImageSrc()
     },
+
     updateImageSrc() {
         this.imgSrc = this.images[this.currentIndex].src;
     },
+
     shouldShowNextButton() {
         return this.canScrollImages() && this.images.length - 1 !== this.currentIndex;
     },
+
     shouldShowPrevButton() {
         return this.canScrollImages() && this.currentIndex !== 0;
     },
+
     canScrollImages() {
         return this.images.length > 1;
     },
+
     attachKeyboardEvents() {
         document.addEventListener('keydown', (e) => {
             if (this.open && this.canScrollImages()) {
@@ -69,4 +80,4 @@ const lightBox = () => ({
     }
 });
 
-export {lightBox}
+export {hasLightBoxImages, lightBox}
diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
@@ -1,7 +1,9 @@
 <!-- Lightbox Modal -->
 <x-modal name="image-lightbox" close-button-outside-modal should-center-modal-content>
     <div x-data="lightBox" class="relative md:flex md:items-center">
-        <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
+        <div class="overflow-y-auto max-h-[85vh]">
+            <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
+        </div>
         <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 text-white cursor-pointer text-2xl" @click="prevImage">&larr;</button>
         <button x-show="shouldShowNextButton" class="absolute right-0 md:-mr-8 text-white cursor-pointer text-2xl" @click="nextImage">&rarr;</button>
     </div>

diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -82,7 +82,7 @@ class="fixed inset-0 transform transition-all"
     </div>
     <div
         x-show="show"
-        class="{{ $maxWidth }} {{$contentOverflowStyle}} mb-6 transform rounded-lg bg-slate-950 shadow-xl transition-all sm:mx-auto sm:w-full"
+        class="{{ $maxWidth }} {{$contentOverflowStyle}} transform rounded-lg bg-slate-950 shadow-xl transition-all sm:mx-auto sm:w-auto"
         x-transition:enter="duration-300 ease-out"
         x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100"

diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
@@ -157,7 +157,7 @@ class="mt-3 break-words text-slate-200 overflow-hidden answer"
                     wire:ignore.self
                     x-ref="parentDiv"
                 >
-                    <p data-has-lightbox-images>
+                    <p x-data="hasLightBoxImages">
                         {!! $question->answer !!}
                     </p>
                 </div>