@fy-/fws-vue 2.4.3 → 2.4.4

package/components/ui/DefaultGallery.vue

@@ -18,13 +18,20 @@ import {
   useWindowSize,
 } from '@vueuse/core'
 import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
+import { useServerRouter } from '../../stores/serverRouter'
 import { ClientOnly } from '../ssr/ClientOnly'
 import DefaultPaging from './DefaultPaging.vue'
 
 // Core state
 const isGalleryOpen = ref<boolean>(false)
 const eventBus = useEventBus()
+const route = useRoute()
+const history = useServerRouter()
+// Cross-page navigation: set while a prev/next page change is in flight
+const pendingPageFlip = ref<'next' | 'prev' | null>(null)
+let pendingPageFlipTimeout: number | null = null
 const sidePanel = ref<boolean>(true)
 const showControls = ref<boolean>(true)
 const isFullscreen = ref<boolean>(false)
@@ -322,6 +329,13 @@ function setModal(value: boolean) {
       clearTimeout(controlsTimeout)
       controlsTimeout = null
     }
+
+    // Abort any in-flight cross-page navigation
+    pendingPageFlip.value = null
+    if (pendingPageFlipTimeout) {
+      clearTimeout(pendingPageFlipTimeout)
+      pendingPageFlipTimeout = null
+    }
   }
   isGalleryOpen.value = value
   showControls.value = true
@@ -343,12 +357,60 @@ const openGalleryImage = useDebounceFn((index: number | undefined) => {
   })
 }, 50)
 
+// Cross-page navigation: push the new page into the route query, exactly like
+// DefaultPaging does. The consumer's paging watchers react to the route change
+// and refetch, replacing `images` — the watcher below then lands the index.
+function goToGalleryPage(page: number) {
+  const newQuery = { ...route.query }
+  newQuery.page = page.toString()
+  history.push({
+    path: history.currentRoute.path,
+    query: newQuery,
+  })
+}
+
+function startPageFlip(dir: 'next' | 'prev', page: number) {
+  pendingPageFlip.value = dir
+  // Safety: if the refetch never lands (network error), unlock navigation
+  if (pendingPageFlipTimeout) clearTimeout(pendingPageFlipTimeout)
+  pendingPageFlipTimeout = window.setTimeout(() => {
+    pendingPageFlip.value = null
+  }, 5000)
+  goToGalleryPage(page)
+}
+
+// When the images array is replaced while a page flip is pending, land on the
+// first image (next) or last image (prev) of the new page. Default pre-flush
+// watcher: runs before render, so the old index never flashes.
+watch(
+  () => props.images,
+  (newImages) => {
+    if (!pendingPageFlip.value) return
+    if (newImages && newImages.length > 0) {
+      modelValue.value = pendingPageFlip.value === 'next' ? 0 : newImages.length - 1
+    }
+    pendingPageFlip.value = null
+    if (pendingPageFlipTimeout) {
+      clearTimeout(pendingPageFlipTimeout)
+      pendingPageFlipTimeout = null
+    }
+    nextTick(() => {
+      updateImageSizes()
+    })
+  },
+)
+
 // Navigation functions
 function goNextImage() {
   direction.value = 'next'
+  if (pendingPageFlip.value) return // page change in flight — ignore extra input
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++
   }
+  else if (props.paging && props.paging.page_no < props.paging.page_max) {
+    // Last image of the page → go to the first image of the next page
+    startPageFlip('next', props.paging.page_no + 1)
+  }
   else {
     modelValue.value = 0
   }
@@ -361,9 +423,14 @@ function goNextImage() {
 
 function goPrevImage() {
   direction.value = 'prev'
+  if (pendingPageFlip.value) return // page change in flight — ignore extra input
   if (modelValue.value > 0) {
     modelValue.value--
   }
+  else if (props.paging && props.paging.page_no > 1) {
+    // First image of the page → go to the last image of the previous page
+    startPageFlip('prev', props.paging.page_no - 1)
+  }
   else {
     modelValue.value = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
@@ -599,6 +666,10 @@ onUnmounted(() => {
     clearTimeout(fullscreenResizeTimeout)
   }
 
+  if (pendingPageFlipTimeout) {
+    clearTimeout(pendingPageFlipTimeout)
+  }
+
   // Ensure we exit fullscreen mode on unmount
   if (isFullscreen.value) {
     exitFullscreen().catch(() => {})
@@ -698,7 +769,7 @@ onUnmounted(() => {
               leave-to-class="opacity-0"
             >
               <div
-                v-if="showControls && images.length > 1"
+                v-if="showControls && (images.length > 1 || (paging && paging.page_max > 1))"
                 class="absolute left-0 z-40 h-full flex items-center px-2 md:px-4"
               >
                 <button
@@ -772,7 +843,7 @@ onUnmounted(() => {
               leave-to-class="opacity-0"
             >
               <div
-                v-if="showControls && images.length > 1"
+                v-if="showControls && (images.length > 1 || (paging && paging.page_max > 1))"
                 class="absolute right-0 z-40 h-full flex items-center px-2 md:px-4"
                 :class="{ 'lg:mr-64': sidePanel }"
               >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",