@fy-/fws-vue 2.3.15 → 2.3.16

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,6 +147,14 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
+// 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
 const calculateImageSize = useDebounceFn(() => {
   if (!imageContainerRef.value) return
@@ -155,30 +164,57 @@ const calculateImageSize = useDebounceFn(() => {
 
     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
+
+    // Prepare for image sizing calculation
+
     imageElements.forEach((img) => {
       // Reset to ensure proper recalculation
       img.style.maxHeight = ''
+      img.style.maxWidth = ''
       // Force browser to recalculate styles
       void img.offsetHeight
 
-      // Set proper height and width
-      img.style.maxHeight = availableHeight.value
+      // 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
 
-      // 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)`
+        // Mobile specific sizing - use pixel values directly
+        img.style.maxHeight = `${availableHeightPx}px`
+        img.style.maxWidth = '90vw'
       }
       else {
-        img.style.maxWidth = sidePanel.value ? 'calc(100vw - 17rem)' : '94vw'
+        // 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
+
+        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)
+        }
       }
     })
   })
 }, 50)
 
-// Update all layout measurements
+// Update all layout measurements when any relevant state changes
 const updateLayout = useDebounceFn(() => {
-  calculateImageSize()
+  // Recalculate image size with a small delay to ensure all DOM updates are processed
+  setTimeout(() => {
+    calculateImageSize()
+  }, 10)
 }, 50)
 
 // Modal controls
@@ -246,6 +282,11 @@ function goNextImage() {
     modelValue.value = 0
   }
   resetControlsTimer()
+
+  // Force layout update when image changes
+  nextTick(() => {
+    updateLayout()
+  })
 }
 
 function goPrevImage() {
@@ -257,6 +298,11 @@ function goPrevImage() {
     modelValue.value = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
   resetControlsTimer()
+
+  // Force layout update when image changes
+  nextTick(() => {
+    updateLayout()
+  })
 }
 
 // UI control functions
@@ -447,6 +493,7 @@ watch(
     galleryHeight,
     topControlsHeight,
     infoPanelHeight,
+    modelValue, // Watch for model value changes to update layout
   ],
   () => {
     updateLayout()
@@ -650,6 +697,7 @@ onUnmounted(() => {
                       :style="{ maxHeight: availableHeight }"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
+                      @load="updateLayout"
                     >
                     <component
                       :is="imageComponent"

package/package.json

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