@fy-/fws-vue 2.3.20 → 2.3.22

package/components/ui/DefaultGallery.vue

@@ -46,8 +46,6 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 const { height: topControlsHeight } = useElementSize(topControlsRef)
 const { height: infoPanelHeight } = useElementSize(infoPanelRef)
 
-// 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)
 
@@ -131,33 +129,27 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// 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`)
-}
-
-function updateControlsHeight() {
-  if (!topControlsRef.value) return
-
-  const height = topControlsRef.value.offsetHeight || 0
-  document.documentElement.style.setProperty('--controls-height', `${height}px`)
-}
-
-// CSS variable-based image sizing
+// Simple but effective image sizing function
 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)
+  // Only target main image for sizing
+  const mainImage = document.querySelector('.image-display img') as HTMLImageElement
+  if (!mainImage) return
+
+  // Simple, direct calculation of available space
+  const topHeight = topControlsRef.value?.offsetHeight || 0
+  const infoHeight = infoPanel.value && infoPanelRef.value ? infoPanelRef.value.offsetHeight : 0
+  const availableHeight = windowHeight.value - topHeight - infoHeight - 32
+
+  // Apply size directly to fill available space
+  mainImage.style.maxHeight = `${availableHeight}px`
+  mainImage.style.width = 'auto'
+
+  // Handle width constraints
+  const sidebarWidth = sidePanel.value ? 256 : 0
+  mainImage.style.maxWidth = windowWidth.value <= 768
+    ? '85vw'
+    : `${windowWidth.value - sidebarWidth - 48}px`
+}, 50)
 
 // Modal controls
 function setModal(value: boolean) {
@@ -225,6 +217,11 @@ function goNextImage() {
     modelValue.value = 0
   }
   resetControlsTimer()
+
+  // Force image sizing update after navigation
+  nextTick(() => {
+    updateImageSizes()
+  })
 }
 
 function goPrevImage() {
@@ -237,6 +234,11 @@ function goPrevImage() {
     modelValue.value = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
   resetControlsTimer()
+
+  // Force image sizing update after navigation
+  nextTick(() => {
+    updateImageSizes()
+  })
 }
 
 // UI control functions
@@ -440,9 +442,6 @@ onMounted(() => {
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
 
-  // Initialize CSS variables
-  updateImageSizes()
-
   // Set up observers for dynamic resizing
   if (topControlsRef.value) {
     useResizeObserver(topControlsRef.value, updateImageSizes)
@@ -567,7 +566,8 @@ onUnmounted(() => {
         >
           <!-- Main Image Area - Fills available space -->
           <div
-            class="relative flex-1 h-full flex items-center justify-center pt-[var(--controls-height)]"
+            class="relative flex-1 h-full flex items-center justify-center"
+            :style="{ paddingTop: `${topControlsHeight}px` }"
             :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
             style="max-width: 100%;"
           >
@@ -617,30 +617,31 @@ onUnmounted(() => {
                       <component
                         :is="videoComponent"
                         :src="isVideo(images[modelValue])"
-                        class="shadow max-w-full video-component gallery-image"
+                        class="shadow max-w-full h-auto object-contain video-component"
+                        @load="updateImageSizes"
                       />
                     </ClientOnly>
                   </template>
                   <template v-else>
                     <img
-                      v-if="modelValueSrc"
-                      class="shadow max-w-full gallery-image"
+                      v-if="modelValueSrc && imageComponent === 'img'"
+                      class="shadow max-w-full h-auto object-contain"
                       :src="modelValueSrc"
                       :alt="`Gallery image ${modelValue + 1}`"
                       @load="updateImageSizes"
                     >
-                    <!-- <component
+                    <component
                       :is="imageComponent"
                       v-else-if="modelValueSrc && imageComponent"
                       :image="modelValueSrc.image"
                       :variant="modelValueSrc.variant"
                       :alt="modelValueSrc.alt"
-                      class="shadow max-w-full gallery-image"
+                      class="shadow max-w-full h-auto object-contain"
                       :likes="modelValueSrc.likes"
                       :show-likes="modelValueSrc.showLikes"
                       :is-author="modelValueSrc.isAuthor"
                       :user-uuid="modelValueSrc.userUUID"
-                    /> -->
+                    />
                   </template>
                 </div>
               </transition>
@@ -683,7 +684,6 @@ 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>
@@ -702,7 +702,8 @@ onUnmounted(() => {
             <div
               v-if="sidePanel"
               ref="sidePanelRef"
-              class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 backdrop-blur-md overflow-y-auto z-40 cool-scroll pt-[calc(var(--controls-height)+8px)]"
+              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="{ paddingTop: `${topControlsHeight + 8}px` }"
             >
               <!-- Paging Controls if needed -->
               <div v-if="paging" class="flex items-center justify-center pt-2">
@@ -904,13 +905,6 @@ 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;
@@ -941,26 +935,6 @@ onUnmounted(() => {
   border-top-right-radius: 0.5rem;
 }
 
-/* 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 */
 .slide-next-enter-active,
 .slide-next-leave-active {

package/package.json

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