basic carousel for gallery viewer

projects/frontend/src/styles/embed.sass

@@ -1,6 +1,9 @@
 @import './mixins.scss'
 @import './tag.sass'
 
+button
+  cursor: pointer
+
 .modal-outlet
   .embed
     img

projects/frontend/src/views/gallery/gallery-view.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import { marked } from 'marked'
 import type { 
   GalleryEntry,
@@ -42,6 +42,33 @@ const fields = computed(() => {
   }
   return toReturn
 })
+const variants = computed(() => (resolved.value as GalleryEntryWithVariants).variants)
+const variantsCount = computed(() => Object.keys((resolved.value as GalleryEntryWithVariants).variants).length)
+const currentSelection = defineModel('currentSelection', { type: String, default: '' })
+const currentUrl = computed(() => hasVariants ? (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url : url)
+const carousel = ref(null! as HTMLElement)
+
+const onVariantSelected = (event: Event, id: string) => {
+  currentSelection.value = id
+}
+
+const onButtonClicked = (event: Event | null, direction: number, override?: number) => {
+  let val = Number(carousel.value.dataset.index!)
+  if (!!override) {
+    val = override
+  } else {
+    val += direction
+  }
+  if (val >= variantsCount.value) {
+    val = 0
+  } else if (val < 0) {
+    val = variantsCount.value - 1
+  }
+  const offset = (carousel.value.children[0] as HTMLImageElement).offsetWidth
+
+  carousel.value.style.transform = `translateX(-${offset * val}px)`
+  carousel.value.dataset.index = `${val}`
+}
 
 onMounted(async () => {
   let config = await fetchAndParseYaml<ListWithEntries<GalleryEntry>>(routeConfig.config)
@@ -52,6 +79,10 @@ onMounted(async () => {
   window.routeSubConfig = {...routeSubConfig}
   window.routeContentConfig = {...resolved.value}
 
+  if (hasVariants) {
+    currentSelection.value = (resolved.value as GalleryEntryWithVariants).defaultVariant || Object.keys((resolved.value as GalleryEntryWithVariants).variants)[0]
+  }
+
   ready.value = true
   emits('loaded')
 })
@@ -65,10 +96,32 @@ onMounted(async () => {
     )
       .view-outlet
         img(
-          :src='url'
+          :src='currentUrl'
         )
+        .view-carousel(
+          v-if='hasVariants'
+        )
+          button.left(
+            @click='onButtonClicked($event, -1)'
+          )
+            span &lt;
+          .carousel(
+            ref='carousel'
+            data-index=0
+          )
+            img(
+              v-for='(variant, id) in variants'
+              :class='{ active: id === currentSelection }'
+              :src='variant.url'
+              :title='variant.title || id'
+              @click='onVariantSelected($event, id)'
+            )
+          button.right(
+            @click='onButtonClicked($event, 1)'
+          )
+            span &gt;
       .view-content
-        p(
+        p.title(
           v-html='title'
         )
         dl.info
@@ -84,5 +137,19 @@ onMounted(async () => {
 </template>
 
 <style scoped lang="sass">
-
+.view-carousel
+  position: relative
+  button
+    bottom: 0
+    position: absolute
+    top: 0
+    z-index: 1
+    &.left
+      left: 0
+    &.right
+      right: 0
+  .carousel
+    display: flex
+  img
+    cursor: pointer
 </style>