@fy-/fws-vue 2.3.16 → 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,75 +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`
-  }
+// Update CSS variables for layout consistency
+function updateInfoHeight() {
+  if (!infoPanelRef.value) return
+
+  const height = infoPanelRef.value.offsetHeight || 0
+  document.documentElement.style.setProperty('--info-height', `${height}px`)
 }
 
-// Image size and positioning
-const calculateImageSize = useDebounceFn(() => {
-  if (!imageContainerRef.value) return
+function updateControlsHeight() {
+  if (!topControlsRef.value) return
 
-  nextTick(() => {
-    const imageElements = imageContainerRef.value?.querySelectorAll('.image-display img, .image-display .video-component') as NodeListOf<HTMLElement>
-
-    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
-
-      // 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)
+  const height = topControlsRef.value.offsetHeight || 0
+  document.documentElement.style.setProperty('--controls-height', `${height}px`)
+}
 
-// Update all layout measurements when any relevant state changes
-const updateLayout = useDebounceFn(() => {
-  // Recalculate image size with a small delay to ensure all DOM updates are processed
-  setTimeout(() => {
-    calculateImageSize()
-  }, 10)
-}, 50)
+// CSS variable-based image sizing
+const updateImageSizes = useDebounceFn(() => {
+  // Update CSS variables first
+  updateInfoHeight()
+  updateControlsHeight()
+
+  // Set sidebar width variable
+  const sidebarWidthValue = sidePanel.value ? '16rem' : '0px'
+  document.documentElement.style.setProperty('--sidebar-width', sidebarWidthValue)
+
+  // No need to manipulate image elements directly - CSS variables will handle it
+}, 10)
 
 // Modal controls
 function setModal(value: boolean) {
@@ -268,13 +210,14 @@ const openGalleryImage = useDebounceFn((index: number | undefined) => {
 
   // Update layout after opening
   nextTick(() => {
-    updateLayout()
+    updateImageSizes()
   })
 }, 50)
 
 // Navigation functions
 function goNextImage() {
   direction.value = 'next'
+
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++
   }
@@ -282,15 +225,11 @@ function goNextImage() {
     modelValue.value = 0
   }
   resetControlsTimer()
-
-  // Force layout update when image changes
-  nextTick(() => {
-    updateLayout()
-  })
 }
 
 function goPrevImage() {
   direction.value = 'prev'
+
   if (modelValue.value > 0) {
     modelValue.value--
   }
@@ -298,11 +237,6 @@ 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
@@ -334,7 +268,7 @@ function toggleInfoPanel() {
 
   // Update layout after panel toggle
   nextTick(() => {
-    updateLayout()
+    updateImageSizes()
   })
 }
 
@@ -344,7 +278,7 @@ function toggleSidePanel() {
 
   // Update layout after panel toggle
   nextTick(() => {
-    updateLayout()
+    updateImageSizes()
   })
 }
 
@@ -357,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(() => {})
@@ -369,7 +303,7 @@ function toggleFullscreen() {
         isFullscreen.value = false
         if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
         fullscreenResizeTimeout = window.setTimeout(() => {
-          updateLayout()
+          updateImageSizes()
         }, 50)
       })
       .catch(() => {})
@@ -496,7 +430,7 @@ watch(
     modelValue, // Watch for model value changes to update layout
   ],
   () => {
-    updateLayout()
+    updateImageSizes()
   },
 )
 
@@ -506,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()
     })
   })
 })
@@ -632,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%;"
           >
@@ -667,13 +598,14 @@ 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}`"
@@ -685,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="updateLayout"
+                      @load="updateImageSizes"
                     >
                     <component
                       :is="imageComponent"
@@ -705,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"
@@ -754,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>
@@ -772,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}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">
@@ -839,10 +768,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 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
             >
-              <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}`"
@@ -972,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;
@@ -1002,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 */
@@ -1172,4 +1124,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.18",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",