@fy-/fws-vue 2.3.17 → 2.3.18

package/components/ui/DefaultGallery.vue

@@ -46,23 +46,7 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 const { height: topControlsHeight } = useElementSize(topControlsRef)
 const { height: infoPanelHeight } = useElementSize(infoPanelRef)
 
-// Derived measurements
-const availableHeight = computed(() => {
-  let height = isFullscreen.value
-    ? windowHeight.value * 0.95 // 95% of viewport in fullscreen
-    : windowHeight.value * 0.85 // 85% of viewport in normal mode
-
-  // Subtract top controls
-  height -= topControlsHeight.value
-
-  // Subtract info panel if visible
-  if (infoPanel.value && infoPanelHeight.value > 0) {
-    height -= infoPanelHeight.value
-  }
-
-  // Use direct pixel values
-  return `${height}px`
-})
+// We no longer need derived measurements as we use CSS variables instead
 
 // Use VueUse's useFullscreen for better fullscreen handling
 const { isFullscreen: isElementFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(galleryRef)
@@ -147,82 +131,33 @@ 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 - improved to prevent overflow
-const calculateImageSize = useDebounceFn(() => {
-  if (!imageContainerRef.value) return
-
-  // 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
+// Update CSS variables for layout consistency
+function updateInfoHeight() {
+  if (!infoPanelRef.value) return
 
-  // Get current panel heights for accurate calculations
-  const topControlsCurrentHeight = topControlsRef.value?.offsetHeight || 0
-  const infoPanelCurrentHeight = infoPanel.value && infoPanelRef.value ? infoPanelRef.value.offsetHeight : 0
-
-  // Apply sizing to all images
-  imageElements.forEach((img) => {
-    // Reset immediately to ensure proper recalculation
-    img.style.maxHeight = '0'
-    img.style.maxWidth = '0'
+  const height = infoPanelRef.value.offsetHeight || 0
+  document.documentElement.style.setProperty('--info-height', `${height}px`)
+}
 
-    // Force browser to recalculate styles
-    void img.offsetHeight
+function updateControlsHeight() {
+  if (!topControlsRef.value) return
 
-    // 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
+  const height = topControlsRef.value.offsetHeight || 0
+  document.documentElement.style.setProperty('--controls-height', `${height}px`)
+}
 
-    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
+// CSS variable-based image sizing
+const updateImageSizes = useDebounceFn(() => {
+  // Update CSS variables first
+  updateInfoHeight()
+  updateControlsHeight()
 
-      img.style.maxHeight = `${availableHeightPx}px`
-      img.style.maxWidth = `${availableWidthPx}px`
-    }
+  // Set sidebar width variable
+  const sidebarWidthValue = sidePanel.value ? '16rem' : '0px'
+  document.documentElement.style.setProperty('--sidebar-width', sidebarWidthValue)
 
-    // For images, add special handling for natural dimensions
-    if (img instanceof HTMLImageElement) {
-      if (img.complete) {
-        adjustImageSize(img, availableHeightPx)
-      }
-      else {
-        img.onload = () => adjustImageSize(img, availableHeightPx)
-      }
-    }
-  })
-}, 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(() => {
-  // 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)
-}, 10) // Reduced debounce time for faster response
+  // No need to manipulate image elements directly - CSS variables will handle it
+}, 10)
 
 // Modal controls
 function setModal(value: boolean) {
@@ -275,18 +210,14 @@ const openGalleryImage = useDebounceFn((index: number | undefined) => {
 
   // Update layout after opening
   nextTick(() => {
-    updateLayout()
+    updateImageSizes()
   })
 }, 50)
 
-// Navigation functions - improved for immediate sizing
+// Navigation functions
 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++
   }
@@ -294,24 +225,11 @@ 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--
   }
@@ -319,16 +237,6 @@ 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
@@ -360,7 +268,7 @@ function toggleInfoPanel() {
 
   // Update layout after panel toggle
   nextTick(() => {
-    updateLayout()
+    updateImageSizes()
   })
 }
 
@@ -370,7 +278,7 @@ function toggleSidePanel() {
 
   // Update layout after panel toggle
   nextTick(() => {
-    updateLayout()
+    updateImageSizes()
   })
 }
 
@@ -383,7 +291,7 @@ function toggleFullscreen() {
           // Give browser time to adjust fullscreen before updating sizing
           if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
           fullscreenResizeTimeout = window.setTimeout(() => {
-            updateLayout()
+            updateImageSizes()
           }, 50)
         })
         .catch(() => {})
@@ -395,7 +303,7 @@ function toggleFullscreen() {
         isFullscreen.value = false
         if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
         fullscreenResizeTimeout = window.setTimeout(() => {
-          updateLayout()
+          updateImageSizes()
         }, 50)
       })
       .catch(() => {})
@@ -522,7 +430,7 @@ watch(
     modelValue, // Watch for model value changes to update layout
   ],
   () => {
-    updateLayout()
+    updateImageSizes()
   },
 )
 
@@ -532,29 +440,27 @@ onMounted(() => {
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
 
-  // Initialize layout
-  nextTick(() => {
-    updateLayout()
-  })
+  // Initialize CSS variables
+  updateImageSizes()
 
   // Set up observers for dynamic resizing
   if (topControlsRef.value) {
-    useResizeObserver(topControlsRef.value, updateLayout)
+    useResizeObserver(topControlsRef.value, updateImageSizes)
   }
 
   if (infoPanelRef.value) {
-    useResizeObserver(infoPanelRef.value, updateLayout)
+    useResizeObserver(infoPanelRef.value, updateImageSizes)
   }
 
   if (sidePanelRef.value) {
-    useResizeObserver(sidePanelRef.value, updateLayout)
+    useResizeObserver(sidePanelRef.value, updateImageSizes)
   }
 
   // Listen for fullscreen changes
   useEventListener(document, 'fullscreenchange', () => {
     isFullscreen.value = !!document.fullscreenElement
     nextTick(() => {
-      updateLayout()
+      updateImageSizes()
     })
   })
 })
@@ -658,11 +564,10 @@ onUnmounted(() => {
         <div
           ref="galleryContentRef"
           class="w-full h-full flex flex-col lg:flex-row"
-          style="margin-top: var(--controls-height, 0px)"
         >
           <!-- Main Image Area - Fills available space -->
           <div
-            class="relative flex-1 h-full flex items-center justify-center"
+            class="relative flex-1 h-full flex items-center justify-center pt-[var(--controls-height)]"
             :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
             style="max-width: 100%;"
           >
@@ -693,18 +598,18 @@ onUnmounted(() => {
             <div
               ref="imageContainerRef"
               class="image-container flex-grow flex items-center justify-center"
-              :class="{ 'has-info': infoPanel }"
               @touchstart="touchStart"
               @touchend="touchEnd"
             >
               <transition
                 :name="direction === 'next' ? 'slide-next' : 'slide-prev'"
                 mode="out-in"
+                @before-enter="updateImageSizes"
+                @after-leave="updateImageSizes"
               >
                 <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])">
@@ -712,19 +617,17 @@ onUnmounted(() => {
                       <component
                         :is="videoComponent"
                         :src="isVideo(images[modelValue])"
-                        class="shadow max-w-full h-auto object-contain video-component"
-                        :style="{ maxHeight: availableHeight }"
+                        class="shadow max-w-full video-component gallery-image"
                       />
                     </ClientOnly>
                   </template>
                   <template v-else>
                     <img
                       v-if="modelValueSrc && imageComponent === 'img'"
-                      class="shadow max-w-full h-auto object-contain"
-                      :style="{ maxHeight: availableHeight }"
+                      class="shadow max-w-full gallery-image"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
-                      @load="() => { calculateImageSize(); nextTick(() => calculateImageSize()) }"
+                      @load="updateImageSizes"
                     >
                     <component
                       :is="imageComponent"
@@ -732,8 +635,7 @@ onUnmounted(() => {
                       :image="modelValueSrc.image"
                       :variant="modelValueSrc.variant"
                       :alt="modelValueSrc.alt"
-                      class="shadow max-w-full h-auto object-contain"
-                      :style="{ maxHeight: availableHeight }"
+                      class="shadow max-w-full gallery-image"
                       :likes="modelValueSrc.likes"
                       :show-likes="modelValueSrc.showLikes"
                       :is-author="modelValueSrc.isAuthor"
@@ -781,6 +683,7 @@ onUnmounted(() => {
                 v-if="infoPanel && images[modelValue]"
                 ref="infoPanelRef"
                 class="info-panel absolute bottom-0 left-0 right-0 px-4 py-3 backdrop-blur-md bg-fv-neutral-900/70 z-45"
+                @transitionend="updateImageSizes"
               >
                 <slot :value="images[modelValue]" />
               </div>
@@ -799,8 +702,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 cool-scroll"
-              :style="{ 'padding-top': `${topControlsHeight + 8}px` }"
+              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 pt-[calc(var(--controls-height)+8px)]"
             >
               <!-- Paging Controls if needed -->
               <div v-if="paging" class="flex items-center justify-center pt-2">
@@ -866,8 +768,8 @@ onUnmounted(() => {
           >
             <div
               v-if="showControls && images.length > 1 && !sidePanel"
-              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 }"
+              class="absolute bottom-0 left-0 right-0 p-1 lg:hidden bg-gradient-to-t from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-45"
+              :class="{ 'pb-4': infoPanel, 'pb-2': !infoPanel }"
               @touchstart.stop
               @touchmove.stop
               @touchend.stop
@@ -1002,6 +904,13 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+/* CSS variables for dimensions */
+:root {
+  --controls-height: 0px;
+  --info-height: 0px;
+  --sidebar-width: 16rem;
+}
+
 /* Ensure controls stay fixed at top */
 .controls-bar {
   height: auto;
@@ -1032,11 +941,24 @@ onUnmounted(() => {
   border-top-right-radius: 0.5rem;
 }
 
-/* Image sizing in different contexts */
-.image-display img,
-.image-display .video-component {
-  transition: max-height 0.3s ease-out, max-width 0.3s ease-out;
+/* Image sizing in different contexts - simplified approach like old component */
+.gallery-image {
+  height: auto;
   object-fit: contain;
+  max-width: 92vw;
+  max-height: calc(80vh - var(--controls-height) - var(--info-height, 0px));
+  transition: max-height 0.3s ease-out, max-width 0.3s ease-out;
+}
+
+@media (min-width: 1024px) {
+  .gallery-image {
+    max-width: calc(92vw - var(--sidebar-width) - 48px);
+  }
+}
+
+/* Fullscreen mode sizing */
+:is(.gallery-container[style*="fullscreen"]) .gallery-image {
+  max-height: calc(92vh - var(--controls-height) - var(--info-height, 0px));
 }
 
 /* Transition styles for next (right) navigation */

package/package.json

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