From b6b4844886623d18fc8a90ca83244f881fda60a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Sun, 3 Jul 2022 17:04:59 -0300
Subject: [PATCH] Add thumbnail navigator to image modal

---
 src/components/Gallery/GalleryImage.vue       | 32 ++++-------
 src/components/Gallery/GalleryThumbnail.vue   |  4 +-
 .../Gallery/GalleryThumbnailList.vue          | 33 ++++++++++++
 src/components/Gallery/ImageViewer.vue        | 53 +++++++++++++------
 4 files changed, 83 insertions(+), 39 deletions(-)
 create mode 100644 src/components/Gallery/GalleryThumbnailList.vue

diff --git a/src/components/Gallery/GalleryImage.vue b/src/components/Gallery/GalleryImage.vue
index 3b8a84e..9ae0543 100644
--- a/src/components/Gallery/GalleryImage.vue
+++ b/src/components/Gallery/GalleryImage.vue
@@ -8,7 +8,7 @@
         print:hidden
         bg-white  
         dark:bg-slate-800 
-        dark:border-slate-800"
+        dark:border-slate-600"
     >
       <div class="h-80 max-h-80 flex items-center justify-center">
         <img
@@ -18,33 +18,20 @@
         >
       </div>
     </div>
-    <div class="flex flex-row overflow-x-auto print:flex-wrap">
-      <div 
-        v-for="(image, index) in images"
-        :key="image.id"
-        class="
-          pr-1
-          pt-1
-          pb-1
-          last:pr-0"
-      >
-        <GalleryThumbnail
-          :image="image"
-          :title="image.depictions.map(d => d.label).join(';')"
-          @click="
-            galleryIndex = index;
-            isImageViewerOpen = true
-          "
-        />
-      </div>
-    </div>
+    <GalleryThumbnailList
+      class="pt-2 pb-2"
+      :images="images"
+      @select-index="galleryIndex = $event; isImageViewerOpen = true"
+    />
   </div>
 
   <ImageViewer 
     v-if="isImageViewerOpen"
-    :image="currentImage"
+    :index="galleryIndex"
+    :images="images"
     :next="galleryIndex < (props.images.length - 1)"
     :previous="galleryIndex > 0"
+    @select-index="galleryIndex = $event"
     @next="nextImage()"
     @previous="previousImage()"
     @close="isImageViewerOpen = false"
@@ -53,6 +40,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
+import GalleryThumbnailList from './GalleryThumbnailList.vue';
 
 const props = defineProps({
   images: {
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index 71080d5..91640ba 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,10 +1,10 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 dark:border-gray-600 rounded-md shadow box-border"
     :title="title"
   >
     <img 
-      class="h-24 w-24 max-h-24 max-w-24 object-cover"
+      class="max-h-24 max-w-24 h-24 w-24 object-cover rounded-md"
       :src="image.thumb"
     >
   </div>
diff --git a/src/components/Gallery/GalleryThumbnailList.vue b/src/components/Gallery/GalleryThumbnailList.vue
new file mode 100644
index 0000000..d1bf2ac
--- /dev/null
+++ b/src/components/Gallery/GalleryThumbnailList.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="flex flex-row overflow-x-auto print:flex-wrap">
+    <div 
+      v-for="(image, index) in images"
+      :key="image.id"
+      class="
+        pr-2
+        last:pr-0"
+    >
+      <GalleryThumbnail
+        :image="image"
+        :class="{ 'border-2 border-primary-500 dark:border-primary-500': current === index }"
+        :title="image.depictions.map(d => d.label).join(';')"
+        @click="emit('selectIndex', index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  images: {
+    type: Array,
+    default: () => []
+  },
+  current: {
+    type: Number,
+    default: undefined
+  }
+})
+
+const emit = defineEmits(['selectIndex'])
+</script>
\ No newline at end of file
diff --git a/src/components/Gallery/ImageViewer.vue b/src/components/Gallery/ImageViewer.vue
index e830975..2ecb28e 100644
--- a/src/components/Gallery/ImageViewer.vue
+++ b/src/components/Gallery/ImageViewer.vue
@@ -1,23 +1,38 @@
 <template>
   <div 
-    class="fixed image__viewer bg-opacity-50 bg-black overflow-y-hidden overflow-x-hidden w-full h-full top-0 left-0 flex items-center justify-center"
+    class="fixed z-[10000] bg-opacity-60 bg-black overflow-y-hidden overflow-x-hidden w-full h-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md"
     @click="emit('close')"
   >
     <div 
-      class="container bg-white dark:bg-slate-900 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
+      class="min-w-96 dark:bg-slate-900 relative rounded-lg shadow-sm mb-24"
       @click.stop
     >
       <VSpinner v-if="isLoading" />
-      <div class="relative p-4 rounded-t-lg">
+      <div class="relative rounded-t-lg w-auto bg-white">
         <img
           ref="imageElement"
-          class="mx-auto cursor-zoom-out max-w-7 w-auto max-w-full max-h-[80vh]"
+          class="mx-auto cursor-zoom-out max-w-7 w-auto max-w-full max-h-[70vh]"
           :src="image.original"
           @click="emit('close')"
         >
       </div>
 
-      <div class="bg-white dark:bg-slate-900 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
+      <div 
+        class="
+        bg-white
+        dark:bg-slate-900
+        dark:text-white
+        attributions
+        bottom-0
+        h-24
+        p-4
+        rounded-b-lg
+        align-middle
+        flex
+        justify-between
+        flex-col
+        text-center"
+      >
         <ImageDepictions
           class="my-auto"
           :depictions="image.depictions" 
@@ -39,22 +54,34 @@
         @click="emit('previous')"
       />
     </div>
+    <GalleryThumbnailList
+      class="bottom-0 fixed overflow-x-auto max-w-full pb-2"
+      :current="index"
+      :images="images"
+      @select-index="emit('selectIndex', $event)"
+      @click.stop
+    />
   </div>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
 import ImageAttribution from './ImageAttribution.vue';
 import ImageDepictions from './ImageDepictions.vue';
 import ControlNextImage from './ControlImageNext.vue'
 import ControlPreviousImage from './ControlImagePrevious.vue'
 
 const props = defineProps({
-  image: {
+  index: {
     type: Object,
     required: true
   },
 
+  images: {
+    type: Array,
+    default: () => []
+  },
+
   next: {
     type: Boolean,
     default: false
@@ -69,7 +96,8 @@ const props = defineProps({
 const emit = defineEmits([
   'close',
   'previous',
-  'next'
+  'next',
+  'selectIndex'
 ])
 
 const handleKeyboard = ({ key }) => {
@@ -92,6 +120,7 @@ const handleKeyboard = ({ key }) => {
 
 const imageElement = ref(null)
 const isLoading = ref(false)
+const image = computed(() => props.images[props.index])
 
 document.addEventListener('keyup', handleKeyboard)
 
@@ -99,13 +128,7 @@ onMounted(() => imageElement.value.addEventListener('load', () => isLoading.valu
 onUnmounted(() => document.removeEventListener('keyup', handleKeyboard))
 
 watch(
-  () => props.image, 
+  () => props.index, 
   () => isLoading.value = true
 )
 </script>
-
-<style>
-.image__viewer {
-  z-index: 10000;
-}
-</style>
\ No newline at end of file