@fy-/fws-vue 2.3.16 → 2.3.17

package/components/ui/DefaultGallery.vue

@@ -155,67 +155,74 @@ function adjustImageSize(img: HTMLImageElement, availableHeightPx: number) {
   }
 }
 
-// Image size and positioning
+// Image size and positioning - improved to prevent overflow
 const calculateImageSize = useDebounceFn(() => {
   if (!imageContainerRef.value) return
 
-  nextTick(() => {
-    const imageElements = imageContainerRef.value?.querySelectorAll('.image-display img, .image-display .video-component') as NodeListOf<HTMLElement>
+  // Execute immediately without waiting for nextTick to prevent delayed resizing
+  const imageElements = imageContainerRef.value?.querySelectorAll('.image-display img, .image-display .video-component') as NodeListOf<HTMLElement>
 
-    if (!imageElements || imageElements.length === 0) return
+  if (!imageElements || imageElements.length === 0) return
 
-    // Get current panel heights for accurate calculations
-    const topControlsCurrentHeight = topControlsRef.value?.offsetHeight || 0
-    const infoPanelCurrentHeight = infoPanel.value && infoPanelRef.value ? infoPanelRef.value.offsetHeight : 0
+  // Get current panel heights for accurate calculations
+  const topControlsCurrentHeight = topControlsRef.value?.offsetHeight || 0
+  const infoPanelCurrentHeight = infoPanel.value && infoPanelRef.value ? infoPanelRef.value.offsetHeight : 0
 
-    // Prepare for image sizing calculation
+  // Apply sizing to all images
+  imageElements.forEach((img) => {
+    // Reset immediately to ensure proper recalculation
+    img.style.maxHeight = '0'
+    img.style.maxWidth = '0'
 
-    imageElements.forEach((img) => {
-      // Reset to ensure proper recalculation
-      img.style.maxHeight = ''
-      img.style.maxWidth = ''
-      // Force browser to recalculate styles
-      void img.offsetHeight
+    // Force browser to recalculate styles
+    void img.offsetHeight
 
-      // Apply exact pixel measurements based on actual UI elements
-      const topHeight = topControlsCurrentHeight || 0
-      const infoHeight = infoPanelCurrentHeight || 0
-      const availableHeightPx = windowHeight.value - topHeight - infoHeight - 32 // 32px for padding
+    // Apply exact pixel measurements based on actual UI elements
+    const topHeight = topControlsCurrentHeight || 0
+    const infoHeight = infoPanelCurrentHeight || 0
+    // Increase padding for reliable containment - prevent overflow
+    const availableHeightPx = windowHeight.value - topHeight - infoHeight - 48
 
-      if (windowWidth.value <= 768) {
-        // Mobile specific sizing - use pixel values directly
-        img.style.maxHeight = `${availableHeightPx}px`
-        img.style.maxWidth = '90vw'
-      }
-      else {
-        // Desktop sizing - account for sidebar if present
-        const sidebarWidth = sidePanel.value ? sidePanelRef.value?.offsetWidth || 256 : 0
-        const availableWidthPx = windowWidth.value - sidebarWidth - 48 // 48px for padding
+    if (windowWidth.value <= 768) {
+      // Mobile specific sizing - more conservative to guarantee fit
+      img.style.maxHeight = `${availableHeightPx}px`
+      img.style.maxWidth = '85vw' // Reduce from 90vw to ensure it fits
+    }
+    else {
+      // Desktop sizing - account for sidebar if present
+      const sidebarWidth = sidePanel.value ? sidePanelRef.value?.offsetWidth || 256 : 0
+      // More conservative width calculation to prevent overflow
+      const availableWidthPx = windowWidth.value - sidebarWidth - 64
 
-        img.style.maxHeight = `${availableHeightPx}px`
-        img.style.maxWidth = `${availableWidthPx}px`
-      }
+      img.style.maxHeight = `${availableHeightPx}px`
+      img.style.maxWidth = `${availableWidthPx}px`
+    }
 
-      // For images, add special handling for natural dimensions
-      if (img instanceof HTMLImageElement) {
-        if (img.complete) {
-          adjustImageSize(img, availableHeightPx)
-        }
-        else {
-          img.onload = () => adjustImageSize(img, availableHeightPx)
-        }
+    // For images, add special handling for natural dimensions
+    if (img instanceof HTMLImageElement) {
+      if (img.complete) {
+        adjustImageSize(img, availableHeightPx)
       }
-    })
+      else {
+        img.onload = () => adjustImageSize(img, availableHeightPx)
+      }
+    }
   })
-}, 50)
+}, 10) // Reduced debounce time for faster response
 
 // Update all layout measurements when any relevant state changes
+// More aggressive calculation to prevent layout issues
 const updateLayout = useDebounceFn(() => {
-  // Recalculate image size with a small delay to ensure all DOM updates are processed
+  // Calculate immediately
+  calculateImageSize()
+
+  // Then again after a small delay to catch any delayed DOM updates
   setTimeout(() => {
     calculateImageSize()
+    // And one more time for extra safety after all transitions
+    setTimeout(() => calculateImageSize(), 100)
   }, 10)
-}, 50)
+}, 10) // Reduced debounce time for faster response
 
 // Modal controls
 function setModal(value: boolean) {
@@ -272,9 +279,14 @@ const openGalleryImage = useDebounceFn((index: number | undefined) => {
   })
 }, 50)
 
-// Navigation functions
+// Navigation functions - improved for immediate sizing
 function goNextImage() {
   direction.value = 'next'
+
+  // Calculate size immediately before changing the image
+  // This ensures we have proper sizing before transition starts
+  calculateImageSize()
+
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++
   }
@@ -283,14 +295,23 @@ function goNextImage() {
   }
   resetControlsTimer()
 
-  // Force layout update when image changes
+  // Force immediate layout update when image changes
+  calculateImageSize()
+
+  // Another calculation after DOM is updated to ensure correct sizing
   nextTick(() => {
-    updateLayout()
+    calculateImageSize()
+    // Second calculation after a small delay to catch any late DOM changes
+    setTimeout(() => calculateImageSize(), 50)
   })
 }
 
 function goPrevImage() {
   direction.value = 'prev'
+
+  // Calculate size immediately before changing the image
+  calculateImageSize()
+
   if (modelValue.value > 0) {
     modelValue.value--
   }
@@ -299,9 +320,14 @@ function goPrevImage() {
   }
   resetControlsTimer()
 
-  // Force layout update when image changes
+  // Force immediate layout update when image changes
+  calculateImageSize()
+
+  // Another calculation after DOM is updated to ensure correct sizing
   nextTick(() => {
-    updateLayout()
+    calculateImageSize()
+    // Second calculation after a small delay to catch any late DOM changes
+    setTimeout(() => calculateImageSize(), 50)
   })
 }
 
@@ -678,6 +704,7 @@ onUnmounted(() => {
                 <div
                   :key="`image-display-${modelValue}`"
                   class="image-display relative w-full h-full flex flex-col items-center justify-center"
+                  @transitionend="calculateImageSize"
                 >
                   <!-- Actual Image/Video Content -->
                   <template v-if="videoComponent && isVideo(images[modelValue])">
@@ -697,7 +724,7 @@ onUnmounted(() => {
                       :style="{ maxHeight: availableHeight }"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
-                      @load="updateLayout"
+                      @load="() => { calculateImageSize(); nextTick(() => calculateImageSize()) }"
                     >
                     <component
                       :is="imageComponent"
@@ -773,7 +800,7 @@ onUnmounted(() => {
               v-if="sidePanel"
               ref="sidePanelRef"
               class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md overflow-y-auto z-40 cool-scroll"
-              :style="{ 'padding-top': `${topControlsHeight}px` }"
+              :style="{ 'padding-top': `${topControlsHeight + 8}px` }"
             >
               <!-- Paging Controls if needed -->
               <div v-if="paging" class="flex items-center justify-center pt-2">
@@ -839,10 +866,13 @@ onUnmounted(() => {
           >
             <div
               v-if="showControls && images.length > 1 && !sidePanel"
-              class="absolute bottom-0 left-0 right-0 p-2 lg:hidden bg-gradient-to-t from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-45"
-              :class="{ 'pb-20': infoPanel }"
+              class="absolute bottom-0 left-0 right-0 p-1 pb-2 lg:hidden bg-gradient-to-t from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-45"
+              :class="{ 'pb-4': infoPanel }"
+              @touchstart.stop
+              @touchmove.stop
+              @touchend.stop
             >
-              <div class="overflow-x-auto flex space-x-2 pb-1 px-1">
+              <div class="overflow-x-auto flex space-x-2 px-1 no-scrollbar">
                 <div
                   v-for="(image, idx) in images"
                   :key="`mobile_thumb_${id}_${idx}`"
@@ -1172,4 +1202,14 @@ onUnmounted(() => {
   font-size: 0.75rem;
   z-index: 10;
 }
+
+/* Special class to hide scrollbars on mobile */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
 </style>

package/package.json

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