From a4e788fddef09f64a44dadcdaaa827d94d912e19 Mon Sep 17 00:00:00 2001
From: Abishek R Srikaanth <abishek@technicaliti.me>
Date: Sun, 4 Aug 2024 23:04:06 +0530
Subject: [PATCH 1/5] Lightbox implementation for Post Images

---
 resources/js/app.js                           |  3 ++
 resources/js/light-box.js                     | 18 ++++++++++++
 .../views/components/image-lightbox.blade.php |  6 ++++
 resources/views/components/modal.blade.php    | 28 ++++++++++++-------
 resources/views/layouts/app.blade.php         |  1 +
 .../views/livewire/questions/show.blade.php   |  2 +-
 6 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 resources/js/light-box.js
 create mode 100644 resources/views/components/image-lightbox.blade.php

diff --git a/resources/js/app.js b/resources/js/app.js
index 6c4153509..0fa5b0d37 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -56,4 +56,7 @@ import { autocomplete, usesAutocomplete } from "./autocomplete.js";
 Alpine.data('dynamicAutocomplete', autocomplete);
 Alpine.data('usesDynamicAutocomplete', usesAutocomplete);
 
+import {lightBox} from './light-box.js';
+Alpine.data('lightBox',lightBox);
+
 Livewire.start()
diff --git a/resources/js/light-box.js b/resources/js/light-box.js
new file mode 100644
index 000000000..6f37cf778
--- /dev/null
+++ b/resources/js/light-box.js
@@ -0,0 +1,18 @@
+const lightBox = () => ({
+    open: false,
+    imgSrc: '',
+    init() {
+        let images = document.querySelectorAll('.has-lightbox-images img');
+        let self = this;
+        images.forEach(img => {
+            img.classList.add('cursor-pointer');
+            img.dataset.navigateIgnore = true;
+            img.addEventListener('click', function (e) {
+                self.imgSrc = img.src;
+                self.$dispatch('open-modal', 'image-lightbox');
+            });
+        });
+    }
+});
+
+export {lightBox}
diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
new file mode 100644
index 000000000..fda50586d
--- /dev/null
+++ b/resources/views/components/image-lightbox.blade.php
@@ -0,0 +1,6 @@
+<!-- Lightbox Modal -->
+<x-modal name="image-lightbox" :should-center="true" :close-button-outside-content="true" :should-center-modal-content="true">
+    <div x-data="lightBox">
+        <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
+    </div>
+</x-modal>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
index 42577d5b3..079bfa46a 100644
--- a/resources/views/components/modal.blade.php
+++ b/resources/views/components/modal.blade.php
@@ -3,6 +3,8 @@
     'show' => false,
     'maxWidth' => '2xl',
     'showCloseButton' => true,
+    'closeButtonOutsideContent' => false,
+    'shouldCenterModalContent' => false
 ])
 
 @php
@@ -13,6 +15,10 @@
         'xl' => 'sm:max-w-xl',
         '2xl' => 'sm:max-w-2xl',
     ][$maxWidth];
+
+    $closeButtonPosition = $closeButtonOutsideContent ? 'right-0 -top-10 text-white' : 'right-2 top-2 text-slate-500';
+    $contentOverflowStyle = $closeButtonOutsideContent ? '' : 'overflow-hidden';
+    $modalContentPosition = $shouldCenterModalContent ? 'flex justify-center items-center' : '';
 @endphp
 
 <div
@@ -50,7 +56,7 @@
     x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
     x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
     x-show="show"
-    class="fixed inset-0 z-50 overflow-y-auto bg-clip-padding px-4 py-6 backdrop-blur-sm backdrop-filter sm:px-0"
+    class="fixed inset-0 z-50 overflow-y-auto {{$modalContentPosition}} bg-clip-padding px-4 py-6 backdrop-blur-sm backdrop-filter sm:px-0"
     style="display: {{ $show ? 'block' : 'none' }}"
 >
     <div
@@ -68,7 +74,7 @@ class="fixed inset-0 transform transition-all"
     </div>
     <div
         x-show="show"
-        class="{{ $maxWidth }} mb-6 transform overflow-hidden rounded-lg bg-slate-950 shadow-xl transition-all sm:mx-auto sm:w-full"
+        class="{{ $maxWidth }} {{$contentOverflowStyle}} mb-6 transform rounded-lg bg-slate-950 shadow-xl transition-all sm:mx-auto sm:w-full"
         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"
@@ -76,14 +82,16 @@ class="{{ $maxWidth }} mb-6 transform overflow-hidden rounded-lg bg-slate-950 sh
         x-transition:leave-start="translate-y-0 opacity-100 sm:scale-100"
         x-transition:leave-end="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
     >
-        <button
-            x-show="showCloseButton == true"
-            x-on:click="show = false"
-            class="absolute right-2 top-2 text-xl text-slate-500 focus:outline-none"
-        >
-            <x-heroicon-o-x-mark class="h-6 w-6" />
-        </button>
+        <div>
+            <button
+                x-show="showCloseButton == true"
+                x-on:click="show = false"
+                class="absolute text-xl focus:outline-none {{$closeButtonPosition}}"
+            >
+                <x-heroicon-o-x-mark class="h-6 w-6" />
+            </button>
 
-        {{ $slot }}
+            {{ $slot }}
+        </div>
     </div>
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e3bedf650..6126670f9 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -25,6 +25,7 @@ class="bg-slate-950 bg-center bg-repeat font-sans text-slate-50 antialiased"
                 <main class="mt-16">
                     {{ $slot }}
                 </main>
+                <x-image-lightbox />
             </div>
 
             @persist('footer')
diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index 97116d4ae..e6b1a6831 100644
--- 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>
+                    <p class="has-lightbox-images">
                         {!! $question->answer !!}
                     </p>
                 </div>

From a15338bf461b084838b368433927b637e637066a Mon Sep 17 00:00:00 2001
From: Abishek R Srikaanth <abishek@technicaliti.me>
Date: Sun, 4 Aug 2024 23:17:45 +0530
Subject: [PATCH 2/5] Changing the property name on x-modal to make more sense

---
 resources/views/components/image-lightbox.blade.php | 2 +-
 resources/views/components/modal.blade.php          | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
index fda50586d..67d7c576d 100644
--- a/resources/views/components/image-lightbox.blade.php
+++ b/resources/views/components/image-lightbox.blade.php
@@ -1,5 +1,5 @@
 <!-- Lightbox Modal -->
-<x-modal name="image-lightbox" :should-center="true" :close-button-outside-content="true" :should-center-modal-content="true">
+<x-modal name="image-lightbox" :should-center="true" :close-button-outside-modal="true" :should-center-modal-content="true">
     <div x-data="lightBox">
         <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
     </div>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
index 079bfa46a..4540493f9 100644
--- a/resources/views/components/modal.blade.php
+++ b/resources/views/components/modal.blade.php
@@ -3,7 +3,7 @@
     'show' => false,
     'maxWidth' => '2xl',
     'showCloseButton' => true,
-    'closeButtonOutsideContent' => false,
+    'closeButtonOutsideModal' => false,
     'shouldCenterModalContent' => false
 ])
 
@@ -16,8 +16,8 @@
         '2xl' => 'sm:max-w-2xl',
     ][$maxWidth];
 
-    $closeButtonPosition = $closeButtonOutsideContent ? 'right-0 -top-10 text-white' : 'right-2 top-2 text-slate-500';
-    $contentOverflowStyle = $closeButtonOutsideContent ? '' : 'overflow-hidden';
+    $closeButtonPosition = $closeButtonOutsideModal ? 'right-0 -top-10 text-white' : 'right-2 top-2 text-slate-500';
+    $contentOverflowStyle = $closeButtonOutsideModal ? '' : 'overflow-hidden';
     $modalContentPosition = $shouldCenterModalContent ? 'flex justify-center items-center' : '';
 @endphp
 

From 0593e91b621672ef6fa260a96e30b347f0624567 Mon Sep 17 00:00:00 2001
From: Abishek R Srikaanth <abishek@technicaliti.me>
Date: Mon, 5 Aug 2024 00:29:13 +0530
Subject: [PATCH 3/5] enabling scrolling of images on the lightbox

---
 resources/js/light-box.js                     | 45 ++++++++++++++++---
 .../views/components/image-lightbox.blade.php |  4 +-
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/resources/js/light-box.js b/resources/js/light-box.js
index 6f37cf778..736cdd763 100644
--- a/resources/js/light-box.js
+++ b/resources/js/light-box.js
@@ -1,17 +1,48 @@
 const lightBox = () => ({
     open: false,
     imgSrc: '',
+    currentIndex: 0,
+    images: [],
     init() {
-        let images = document.querySelectorAll('.has-lightbox-images img');
         let self = this;
-        images.forEach(img => {
-            img.classList.add('cursor-pointer');
-            img.dataset.navigateIgnore = true;
-            img.addEventListener('click', function (e) {
-                self.imgSrc = img.src;
-                self.$dispatch('open-modal', 'image-lightbox');
+
+        let hasLightboxImageElements = document.querySelectorAll('.has-lightbox-images');
+
+        hasLightboxImageElements.forEach((lightboxImageElement) => {
+            let images = lightboxImageElement.querySelectorAll('img');
+
+            images.forEach((img, index) => {
+                img.classList.add('cursor-pointer');
+                img.dataset.navigateIgnore = true;
+                img.addEventListener('click', function (e) {
+                    console.log(images);
+                    self.currentIndex = index;
+                    self.images = images;
+                    self.updateImageSrc();
+                    self.$dispatch('open-modal', 'image-lightbox');
+                });
             });
         });
+    },
+    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;
     }
 });
 
diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
index 67d7c576d..d3ee9cb6e 100644
--- a/resources/views/components/image-lightbox.blade.php
+++ b/resources/views/components/image-lightbox.blade.php
@@ -1,6 +1,8 @@
 <!-- Lightbox Modal -->
 <x-modal name="image-lightbox" :should-center="true" :close-button-outside-modal="true" :should-center-modal-content="true">
-    <div x-data="lightBox">
+    <div x-data="lightBox" class="relative md:flex md:items-center">
         <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
+        <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 text-white text-2xl" @click="prevImage">&larr;</button>
+        <button x-show="shouldShowNextButton" class="absolute right-0 md:-mr-8 text-white text-2xl" @click="nextImage">&rarr;</button>
     </div>
 </x-modal>

From 61181b548766008d0aa1de1e47ff8561d68ec7c4 Mon Sep 17 00:00:00 2001
From: Abishek R Srikaanth <abishek@technicaliti.me>
Date: Mon, 5 Aug 2024 00:34:51 +0530
Subject: [PATCH 4/5] using cursor-pointer for the scroll buttons

---
 resources/views/components/image-lightbox.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
index d3ee9cb6e..a78960724 100644
--- a/resources/views/components/image-lightbox.blade.php
+++ b/resources/views/components/image-lightbox.blade.php
@@ -2,7 +2,7 @@
 <x-modal name="image-lightbox" :should-center="true" :close-button-outside-modal="true" :should-center-modal-content="true">
     <div x-data="lightBox" class="relative md:flex md:items-center">
         <img :src="imgSrc" alt="image" class="max-w-full rounded-lg"/>
-        <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 text-white text-2xl" @click="prevImage">&larr;</button>
-        <button x-show="shouldShowNextButton" class="absolute right-0 md:-mr-8 text-white text-2xl" @click="nextImage">&rarr;</button>
+        <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>
 </x-modal>

From 39d2b6e828beda63a9c1a2fa97d46a9ca5929761 Mon Sep 17 00:00:00 2001
From: Abishek R Srikaanth <abishek@technicaliti.me>
Date: Mon, 5 Aug 2024 12:32:24 +0530
Subject: [PATCH 5/5] PR Review fixes

---
 resources/js/light-box.js                     | 27 +++++++++++++++++--
 .../views/components/image-lightbox.blade.php |  2 +-
 resources/views/components/modal.blade.php    | 18 +++++++++----
 .../views/livewire/questions/show.blade.php   |  2 +-
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/resources/js/light-box.js b/resources/js/light-box.js
index 736cdd763..9032a32e3 100644
--- a/resources/js/light-box.js
+++ b/resources/js/light-box.js
@@ -6,7 +6,7 @@ const lightBox = () => ({
     init() {
         let self = this;
 
-        let hasLightboxImageElements = document.querySelectorAll('.has-lightbox-images');
+        let hasLightboxImageElements = document.querySelectorAll('[data-has-lightbox-images]');
 
         hasLightboxImageElements.forEach((lightboxImageElement) => {
             let images = lightboxImageElement.querySelectorAll('img');
@@ -15,14 +15,26 @@ const lightBox = () => ({
                 img.classList.add('cursor-pointer');
                 img.dataset.navigateIgnore = true;
                 img.addEventListener('click', function (e) {
-                    console.log(images);
                     self.currentIndex = index;
                     self.images = images;
                     self.updateImageSrc();
                     self.$dispatch('open-modal', 'image-lightbox');
+                    self.attachKeyboardEvents();
                 });
             });
         });
+
+        window.addEventListener('modal-opened', (e) => {
+            if (e.detail === 'image-lightbox') {
+                this.open = true;
+            }
+        });
+
+        window.addEventListener('modal-closed', (e) => {
+            if (e.detail === 'image-lightbox') {
+                this.open = false;
+            }
+        });
     },
     nextImage() {
         this.currentIndex = (this.currentIndex + 1) % this.images.length;
@@ -43,6 +55,17 @@ const lightBox = () => ({
     },
     canScrollImages() {
         return this.images.length > 1;
+    },
+    attachKeyboardEvents() {
+        document.addEventListener('keydown', (e) => {
+            if (this.open && this.canScrollImages()) {
+                if (e.key === 'ArrowRight' && this.shouldShowNextButton()) {
+                    this.nextImage();
+                } else if (e.key === 'ArrowLeft' && this.shouldShowPrevButton()) {
+                    this.prevImage();
+                }
+            }
+        });
     }
 });
 
diff --git a/resources/views/components/image-lightbox.blade.php b/resources/views/components/image-lightbox.blade.php
index a78960724..1a92cd7fb 100644
--- a/resources/views/components/image-lightbox.blade.php
+++ b/resources/views/components/image-lightbox.blade.php
@@ -1,5 +1,5 @@
 <!-- Lightbox Modal -->
-<x-modal name="image-lightbox" :should-center="true" :close-button-outside-modal="true" :should-center-modal-content="true">
+<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"/>
         <button x-show="shouldShowPrevButton" class="absolute left-0 md:-ml-8 text-white cursor-pointer text-2xl" @click="prevImage">&larr;</button>
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
index 4540493f9..f2d41c406 100644
--- a/resources/views/components/modal.blade.php
+++ b/resources/views/components/modal.blade.php
@@ -16,8 +16,8 @@
         '2xl' => 'sm:max-w-2xl',
     ][$maxWidth];
 
-    $closeButtonPosition = $closeButtonOutsideModal ? 'right-0 -top-10 text-white' : 'right-2 top-2 text-slate-500';
-    $contentOverflowStyle = $closeButtonOutsideModal ? '' : 'overflow-hidden';
+    $closeButtonPosition = $closeButtonOutsideModal ? 'right-0 -top-10' : 'right-2 top-2';
+    $contentOverflowStyle = ($closeButtonOutsideModal && !$shouldCenterModalContent) ? 'mt-10' : '';
     $modalContentPosition = $shouldCenterModalContent ? 'flex justify-center items-center' : '';
 @endphp
 
@@ -38,6 +38,14 @@
         prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
         nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
         prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
+        open(name) {
+            this.show = true;
+            this.$dispatch('modal-opened', name);
+        },
+        close(name) {
+            this.show = false;
+            this.$dispatch('modal-closed', name);
+        }
     }"
     x-init="
         $watch('show', (value) => {
@@ -49,8 +57,8 @@
             }
         })
     "
-    x-on:open-modal.window="$event.detail == '{{ $name }}' ? (show = true) : null"
-    x-on:close-modal.window="$event.detail == '{{ $name }}' ? (show = false) : null"
+    x-on:open-modal.window="$event.detail == '{{ $name }}' ? open('{{ $name }}') : null"
+    x-on:close-modal.window="$event.detail == '{{ $name }}' ? close('{{ $name }}') : null"
     x-on:close.stop="show = false"
     x-on:keydown.escape.window="show = false"
     x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
@@ -86,7 +94,7 @@ class="{{ $maxWidth }} {{$contentOverflowStyle}} mb-6 transform rounded-lg bg-sl
             <button
                 x-show="showCloseButton == true"
                 x-on:click="show = false"
-                class="absolute text-xl focus:outline-none {{$closeButtonPosition}}"
+                class="absolute text-xl focus:outline-none z-50 {{$closeButtonPosition}}"
             >
                 <x-heroicon-o-x-mark class="h-6 w-6" />
             </button>
diff --git a/resources/views/livewire/questions/show.blade.php b/resources/views/livewire/questions/show.blade.php
index e6b1a6831..2b823d312 100644
--- 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 class="has-lightbox-images">
+                    <p data-has-lightbox-images>
                         {!! $question->answer !!}
                     </p>
                 </div>