@fy-/fws-vue 2.3.14 → 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,22 +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
-      img.style.maxHeight = availableHeight.value
-      img.style.maxWidth = sidePanel.value ? 'calc(100vw - 16rem)' : '100vw'
+      // 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
+
+      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
+
+        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
@@ -238,6 +282,11 @@ function goNextImage() {
     modelValue.value = 0
   }
   resetControlsTimer()
+
+  // Force layout update when image changes
+  nextTick(() => {
+    updateLayout()
+  })
 }
 
 function goPrevImage() {
@@ -249,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
@@ -439,6 +493,7 @@ watch(
     galleryHeight,
     topControlsHeight,
     infoPanelHeight,
+    modelValue, // Watch for model value changes to update layout
   ],
   () => {
     updateLayout()
@@ -582,7 +637,8 @@ onUnmounted(() => {
           <!-- Main Image Area - Fills available space -->
           <div
             class="relative flex-1 h-full flex items-center justify-center"
-            :class="{ 'lg:pr-64': sidePanel }"
+            :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
+            style="max-width: 100%;"
           >
             <!-- Image Navigation Controls - Left -->
             <transition
@@ -641,6 +697,7 @@ onUnmounted(() => {
                       :style="{ maxHeight: availableHeight }"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
+                      @load="updateLayout"
                     >
                     <component
                       :is="imageComponent"
@@ -672,6 +729,7 @@ onUnmounted(() => {
               <div
                 v-if="showControls && images.length > 1"
                 class="absolute right-0 z-40 h-full flex items-center px-2 md:px-4"
+                :class="{ 'lg:mr-64': sidePanel }"
               >
                 <button
                   class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
@@ -714,7 +772,7 @@ onUnmounted(() => {
             <div
               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"
+              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` }"
             >
               <!-- Paging Controls if needed -->

package/package.json

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