@fy-/fws-vue 2.3.15 → 2.3.17

package/components/ui/DefaultGallery.vue

@@ -1,3 +1,4 @@
+# This file has been completely rewritten and optimized
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { APIPaging } from '../../composables/rest'
@@ -59,8 +60,8 @@ const availableHeight = computed(() => {
     height -= infoPanelHeight.value
   }
 
-  // Convert to rem for consistent sizing
-  return `${height / 16}rem`
+  // Use direct pixel values
+  return `${height}px`
 })
 
 // Use VueUse's useFullscreen for better fullscreen handling
@@ -146,40 +147,82 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// Image size and positioning
+// Helper function to adjust image size based on natural dimensions
+function adjustImageSize(img: HTMLImageElement, availableHeightPx: number) {
+  if (img.naturalHeight > 0) {
+    const maxHeight = Math.min(img.naturalHeight, availableHeightPx)
+    img.style.maxHeight = `${maxHeight}px`
+  }
+}
+
+// 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
 
-    imageElements.forEach((img) => {
-      // Reset to ensure proper recalculation
-      img.style.maxHeight = ''
-      // Force browser to recalculate styles
-      void img.offsetHeight
+  // Apply sizing to all images
+  imageElements.forEach((img) => {
+    // Reset immediately to ensure proper recalculation
+    img.style.maxHeight = '0'
+    img.style.maxWidth = '0'
+
+    // 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
+    // Increase padding for reliable containment - prevent overflow
+    const availableHeightPx = windowHeight.value - topHeight - infoHeight - 48
+
+    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
 
-      // Set proper height and width
-      img.style.maxHeight = availableHeight.value
+      img.style.maxHeight = `${availableHeightPx}px`
+      img.style.maxWidth = `${availableWidthPx}px`
+    }
 
-      // Adjust image size based on screen size
-      if (windowWidth.value <= 768) {
-        img.style.maxWidth = '95vw'
-        img.style.maxHeight = `calc(${windowHeight.value * 0.7 / 16}rem)`
+    // For images, add special handling for natural dimensions
+    if (img instanceof HTMLImageElement) {
+      if (img.complete) {
+        adjustImageSize(img, availableHeightPx)
       }
       else {
-        img.style.maxWidth = sidePanel.value ? 'calc(100vw - 17rem)' : '94vw'
+        img.onload = () => adjustImageSize(img, availableHeightPx)
       }
-    })
+    }
   })
-}, 50)
+}, 10) // Reduced debounce time for faster response
 
-// Update all layout measurements
+// Update all layout measurements when any relevant state changes
+// More aggressive calculation to prevent layout issues
 const updateLayout = useDebounceFn(() => {
+  // Calculate immediately
   calculateImageSize()
-}, 50)
+
+  // 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)
+}, 10) // Reduced debounce time for faster response
 
 // Modal controls
 function setModal(value: boolean) {
@@ -236,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++
   }
@@ -246,10 +294,24 @@ function goNextImage() {
     modelValue.value = 0
   }
   resetControlsTimer()
+
+  // Force immediate layout update when image changes
+  calculateImageSize()
+
+  // Another calculation after DOM is updated to ensure correct sizing
+  nextTick(() => {
+    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--
   }
@@ -257,6 +319,16 @@ function goPrevImage() {
     modelValue.value = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
   resetControlsTimer()
+
+  // Force immediate layout update when image changes
+  calculateImageSize()
+
+  // Another calculation after DOM is updated to ensure correct sizing
+  nextTick(() => {
+    calculateImageSize()
+    // Second calculation after a small delay to catch any late DOM changes
+    setTimeout(() => calculateImageSize(), 50)
+  })
 }
 
 // UI control functions
@@ -447,6 +519,7 @@ watch(
     galleryHeight,
     topControlsHeight,
     infoPanelHeight,
+    modelValue, // Watch for model value changes to update layout
   ],
   () => {
     updateLayout()
@@ -631,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])">
@@ -650,6 +724,7 @@ onUnmounted(() => {
                       :style="{ maxHeight: availableHeight }"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
+                      @load="() => { calculateImageSize(); nextTick(() => calculateImageSize()) }"
                     >
                     <component
                       :is="imageComponent"
@@ -725,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">
@@ -791,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}`"
@@ -1124,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.15",
+  "version": "2.3.17",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",