From bdff94660a9fcdced4d14dc16d67b73ea57e6601 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 18 Sep 2023 20:23:39 -0300
Subject: [PATCH] Update GalleryCarousel

---
 .../GalleryCarousel.global.vue                | 128 ++++++++++++++++++
 .../Gallery/GallerySlider/GallerySlider.vue   |  77 -----------
 .../Markdown/MarkdownLayout.global.vue        |   3 +-
 3 files changed, 130 insertions(+), 78 deletions(-)
 create mode 100644 src/components/Gallery/GalleryCarousel/GalleryCarousel.global.vue
 delete mode 100644 src/components/Gallery/GallerySlider/GallerySlider.vue

diff --git a/src/components/Gallery/GalleryCarousel/GalleryCarousel.global.vue b/src/components/Gallery/GalleryCarousel/GalleryCarousel.global.vue
new file mode 100644
index 0000000..0a500c5
--- /dev/null
+++ b/src/components/Gallery/GalleryCarousel/GalleryCarousel.global.vue
@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="overflow-hidden w-full relative"
+    :style="containerStyle"
+  >
+    <Transition name="fade">
+      <img
+        v-if="currentDepiction.image"
+        class="object-cover overflow-hidden h-full w-full absolute top-0 my-0"
+        :key="currentDepiction.image"
+        :src="currentDepiction.image"
+        :alt="currentDepiction.label"
+      />
+    </Transition>
+    <div class="bg-black bg-opacity-25 absolute h-full w-full">
+      <slot />
+    </div>
+    <span
+      v-if="currentDepiction.objectId"
+      class="z-10 text-white text-sm drop-shadow absolute bottom-2 right-4"
+    >
+      <RouterLink
+        v-if="isOtu"
+        class="text-white decoration-transparent"
+        :to="{
+          name: 'otus-id',
+          params: { id: currentDepiction.objectId }
+        }"
+        v-html="label"
+      />
+      <span
+        v-else
+        v-html="label"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed, onBeforeUnmount } from 'vue'
+import { makeAPIRequest } from '@/utils'
+
+const props = defineProps({
+  depictionId: {
+    type: Array,
+    default: () => []
+  },
+
+  interval: {
+    type: Number,
+    default: 10000
+  },
+
+  height: {
+    type: String,
+    default: '550px'
+  }
+})
+
+const depictions = ref([])
+const currentIndex = ref(0)
+
+const containerStyle = computed(() => ({ height: props.height }))
+const currentDepiction = computed(() => depictions.value[currentIndex.value] || {})
+const isOtu = computed(() => currentDepiction.value.objectType === 'Otu')
+
+const label = computed(() =>
+  [
+    currentDepiction.value.objectLabel,
+    currentDepiction.value.attribution
+  ].join(' ')
+)
+let timeout = null
+
+function updateIndex() {
+  currentIndex.value = (currentIndex.value + 1) % depictions.value.length
+}
+
+function makeGalleryImage(depiction) {
+  return {
+    objectId: depiction.depiction_object_id,
+    objectType: depiction.depiction_object_type,
+    objectLabel: depiction.depiction_object.label,
+    label: depiction.label,
+    image: depiction.image.original,
+    attribution: depiction.attribution?.label || ''
+  }
+}
+
+onMounted(() => {
+  if (props.depictionId.length) {
+    makeAPIRequest
+      .get('/depictions/gallery', {
+        params: { depiction_id: props.depictionId }
+      })
+      .then(({ data }) => {
+        depictions.value = data.map(makeGalleryImage)
+
+        if (props.interval) {
+          timeout = setInterval(updateIndex, props.interval)
+        } else {
+          currentIndex.value = Math.floor(Math.random() * data.length)
+        }
+      })
+  }
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timeout)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease-in-out;
+}
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/Gallery/GallerySlider/GallerySlider.vue b/src/components/Gallery/GallerySlider/GallerySlider.vue
deleted file mode 100644
index 7132ba8..0000000
--- a/src/components/Gallery/GallerySlider/GallerySlider.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="overflow-hidden h-[550px] w-full">
-    <img
-      class="object-cover overflow-hidden h-[550px] w-full absolute"
-      :key="currentDepiction.src"
-      :src="currentDepiction.src"
-      alt="Dichroplus maculipennis"
-    />
-    <div class="bg-black bg-opacity-25 absolute h-full w-full top-0"></div>
-    <div class="absolute bottom-2 right-4">
-      <span class="z-10 text-white text-sm drop-shadow">
-        <RouterLink
-          v-if="currentDepiction.otuId"
-          class="text-white"
-          :to="{ name: 'otus-id', params: { id: currentDepiction.otuId } }"
-        >
-          {{ currentDepiction.label }} © {{ currentDepiction.copyright }}
-        </RouterLink>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref, computed, onBeforeUnmount } from 'vue'
-import { makeAPIRequest } from '@/utils'
-
-const props = defineProps({
-  depictionId: {
-    type: Array,
-    default: () => []
-  },
-
-  interval: {
-    type: Number,
-    default: 5000
-  }
-})
-
-const depictions = ref([])
-const currentIndex = ref(0)
-const currentDepiction = computed(() => depictions[currentIndex.value] || {})
-let timeout = null
-
-function updateIndex() {
-  currentIndex.value = Math.round(Math.random() * depictions.length)
-}
-
-onMounted(() => {
-  makeAPIRequest.get(`/url`).then(({ data }) => {
-    depictions.value = data
-
-    timeout = setInterval(updateIndex, props.interval)
-  })
-})
-
-onBeforeUnmount(() => {
-  clearInterval(timeout)
-})
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 1s ease-in-out;
-}
-.fade-enter-from {
-  opacity: 0;
-}
-.fade-enter-to {
-  opacity: 1;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/src/components/Markdown/MarkdownLayout.global.vue b/src/components/Markdown/MarkdownLayout.global.vue
index 72014a4..6962787 100644
--- a/src/components/Markdown/MarkdownLayout.global.vue
+++ b/src/components/Markdown/MarkdownLayout.global.vue
@@ -23,7 +23,8 @@ const props = defineProps({
 })
 
 const LAYOUT_CLASSES = {
-  fullwidth: 'p-4 sm:px-0 prose dark:prose-invert max-w-none'
+  fullwidth: 'p-4 sm:px-0 prose dark:prose-invert max-w-none',
+  blank: 'sm:px-0 prose dark:prose-invert max-w-none'
 }
 
 const DEFAULT_LAYOUT =