feat: added navigation buttons

codeiiest-dev · Dec 24, 2022 · cec33c1 · cec33c1
1 parent c4f393a
commit cec33c1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 5 deletions.
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
@@ -1,5 +1,5 @@
 <template>
-    <ImageModal ref="imageModal" :image="selectedImage" />
+    <ImageModal ref="imageModal" :image="selectedImage" :next="gotoNextImage" :prev="gotoPrevImage" />
     <div class="gallery-container">
         <div class="gallery-item" v-for="(image, index) in galleryImages" :key="index">
             <v-lazy-image :src="image" alt="random image" @click="openModal(image)" />
@@ -25,6 +25,7 @@
     display: inline-block;
     margin: 0 0 1em;
     width: 100%;
+    cursor: zoom-in;
 }
 
 .gallery-item>img {
@@ -73,9 +74,22 @@ export default {
             this.selectedImage = image;
             this.$refs.imageModal.toggleModal();
         },
-    },
-    mounted() {
-        console.log(this.images);
+        gotoNextImage() {
+            const index = this.galleryImages.indexOf(this.selectedImage);
+            if (index === this.galleryImages.length - 1) {
+                this.selectedImage = this.galleryImages[0];
+            } else {
+                this.selectedImage = this.galleryImages[index + 1];
+            }
+        },
+        gotoPrevImage() {
+            const index = this.galleryImages.indexOf(this.selectedImage);
+            if (index === 0) {
+                this.selectedImage = this.galleryImages[this.galleryImages.length - 1];
+            } else {
+                this.selectedImage = this.galleryImages[index - 1];
+            }
+        },
     },
 }
 </script>
diff --git a/src/components/ImageModal.vue b/src/components/ImageModal.vue
@@ -1,13 +1,31 @@
 <template>
     <div id="defaultModal" tabindex="-1" aria-hidden="true"
-        class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full backdrop-blur-lg bg-white/30">
+        class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full backdrop-blur-lg bg-white/30 dark:bg-black/70">
         <div class="relative mx-auto top-50 w-full h-full max-w-5xl md:h-auto ">
             <div class="absolute top-0 right-0 z-50 p-4">
                 <button @click="toggleModal">
                     <carbon-close class="text-4xl text-white hover:text-white-500 hover:text-5xl ease-in duration-100"
                         aria-hidden="true" />
                 </button>
             </div>
+            <!-- Left and Right image buttons -->
+            <div class="absolute bottom-0 left-0 z-50 p-4">
+                <button @click="prev">
+                    <carbon-chevron-left
+                        class="text-4xl text-white hover:text-white-500 hover:text-5xl ease-in duration-100"
+                        aria-hidden="true" />
+                </button>
+
+            </div>
+
+            <div class="absolute bottom-0 right-0 z-50 p-4">
+                <button @click="next">
+                    <carbon-chevron-right
+                        class="text-4xl text-white hover:text-white-500 hover:text-5xl ease-in duration-100"
+                        aria-hidden="true" />
+                </button>
+            </div>
+
             <div class="relative w-full h-full">
                 <img :src="image" class="object-cover" />
             </div>
@@ -25,6 +43,14 @@ export default {
             type: String,
             required: true,
         },
+        prev: {
+            type: Function,
+            required: true,
+        },
+        next: {
+            type: Function,
+            required: true,
+        },
     },
     setup(props) {
         // toggle modal
@@ -47,9 +73,20 @@ export default {
             }
         };
 
+        // shift to next image on right arrow key
+        const imageShift = (e) => {
+            if (e.key === 'ArrowRight') {
+                props.next();
+            } else if (e.key === 'ArrowLeft') {
+                props.prev();
+            }
+        };
+
         // add event listeners
         window.addEventListener('keydown', closeModal);
         window.addEventListener('click', closeOnClick);
+        window.addEventListener('keydown', imageShift);
+
 
         // remove event listeners
         onBeforeUnmount(() => {