full

template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js

@@ -1,5 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
-    document.querySelectorAll('.gallery-block').forEach(function(block) {
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.gallery-block').forEach(function (block) {
         const blockId = block.getAttribute('data-gallery-id');
         initGalleryBlock(blockId);
     });
@@ -10,99 +10,126 @@ function initGalleryBlock(blockId) {
     if (!container) return;
 
     const swipers = {};
+    const thumbnailSwipers = {};
+    const initializedTabs = new Set();
     let lightbox;
 
-    function initAllSwipers() {
-        const tabs = container.querySelectorAll('.tab-button');
+    function initTabSwiper(tabId) {
+        if (initializedTabs.has(tabId)) return;
 
-        tabs.forEach(button => {
-            const tabId = button.getAttribute('data-tab');
-            const tabContent = container.querySelector(`#tab-${tabId}`);
+        const tabContent = container.querySelector(`#tab-${tabId}`);
+        if (!tabContent?.querySelector('.gallery-swiper')) return;
 
-            if (tabContent && tabContent.querySelector('.swiper')) {
-                const wasHidden = tabContent.classList.contains('hidden');
-                if (wasHidden) {
-                    tabContent.style.visibility = 'hidden';
-                    tabContent.style.position = 'absolute';
-                    tabContent.classList.remove('hidden');
-                    tabContent.classList.add('block');
-                }
+        thumbnailSwipers[tabId] = new Swiper(`#${blockId} #thumbnail-swiper-${tabId}`, {
+            slidesPerView: 'auto',
+            spaceBetween: 24,
+            freeMode: true,
+            grabCursor: true,
+            watchSlidesProgress: true,
+        });
 
-                if (swipers[tabId]) {
-                    swipers[tabId].destroy(true, true);
-                }
-
-                swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
-                    slidesPerView: 1.5,
-                    spaceBetween: 20,
-                    loop: true,
-                    centeredSlides: true,
-                    grabCursor: true,
-                    observer: true,
-                    observeParents: true,
-                    watchSlidesProgress: true,
-                    navigation: {
-                        nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
-                        prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
-                    },
-                    on: {
-                        slideChange: function() {
-                            updateThumbnails(tabId, this.realIndex);
-                        }
-                    }
-                });
-
-                if (wasHidden) {
-                    tabContent.style.visibility = '';
-                    tabContent.style.position = '';
-                    tabContent.classList.add('hidden');
-                    tabContent.classList.remove('block');
+        swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+            slidesPerView: 'auto',
+            spaceBetween: 24,
+            centeredSlides: true,
+            initialSlide: 1,
+            scrollbar: {
+                el: `#swiper-scrollbar-${tabId}`,
+                draggable: true,
+            },
+            grabCursor: true,
+            watchSlidesProgress: true,
+            lazy: {
+                loadPrevNext: true,
+                loadOnTransitionStart: true,
+            },
+            on: {
+                slideChange: function () {
+                    updateThumbnails(tabId, this.realIndex);
+                    centerThumbnail(tabId, this.realIndex);
                 }
             }
         });
+
+        initializedTabs.add(tabId);
     }
 
     function initLightbox(tabId) {
-        if (lightbox) {
-            lightbox.destroy();
-        }
+        const currentSelector = `#${blockId} #tab-${tabId} .glightbox`;
 
-        lightbox = GLightbox({
-            selector: `#${blockId} #tab-${tabId} .glightbox`
-        });
+        if (lightbox?.settings?.selector !== currentSelector) {
+            if (lightbox) {
+                lightbox.destroy();
+            }
+
+            lightbox = GLightbox({
+                selector: currentSelector,
+                preload: false,
+                touchNavigation: true,
+                loop: true
+            });
+        }
     }
 
     function updateThumbnails(tabId, activeIndex) {
         const thumbnails = container.querySelectorAll(`#tab-${tabId} .thumbnail`);
         thumbnails.forEach((thumb, index) => {
             if (index === activeIndex) {
-                thumb.classList.add('active', '!border-blue-500');
-                thumb.classList.remove('border-transparent');
+                thumb.classList.remove('opacity-50', 'hover:opacity-80');
+                thumb.classList.add('opacity-100', 'active');
             } else {
-                thumb.classList.remove('active', '!border-blue-500');
-                thumb.classList.add('border-transparent');
+                thumb.classList.remove('opacity-100', 'active');
+                thumb.classList.add('opacity-50', 'hover:opacity-80');
             }
         });
     }
 
-    initAllSwipers();
+    function centerThumbnail(tabId, activeIndex) {
+        if (thumbnailSwipers[tabId]) {
+            thumbnailSwipers[tabId].slideTo(activeIndex);
+        }
+    }
+
+    function preloadHeroImage() {
+        const activeTab = container.querySelector('.tab-button.active');
+        if (!activeTab) return;
+
+        const tabId = activeTab.getAttribute('data-tab');
+        const firstImage = container.querySelector(`#tab-${tabId} .swiper-slide:first-child img`);
+
+        if (firstImage && firstImage.src) {
+            const link = document.createElement('link');
+            link.rel = 'preload';
+            link.as = 'image';
+            link.href = firstImage.src;
+            document.head.appendChild(link);
+        }
+    }
+
+    function debounce(func, wait) {
+        let timeout;
+        return (...args) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func.apply(this, args), wait);
+        };
+    }
+
+    preloadHeroImage();
 
     const activeTab = container.querySelector('.tab-button.active');
     if (activeTab) {
         const tabId = activeTab.getAttribute('data-tab');
+        initTabSwiper(tabId);
         initLightbox(tabId);
     }
 
     container.querySelectorAll('.tab-button').forEach(button => {
-        button.addEventListener('click', () => {
+        button.addEventListener('click', debounce(() => {
             const tabId = button.getAttribute('data-tab');
 
-            container.querySelectorAll('.tab-button').forEach(btn => {
-                btn.classList.remove('active', 'underline');
-                btn.classList.add('bg-gray-100');
-            });
-            button.classList.add('active', 'underline');
-            button.classList.remove('bg-gray-100');
+            container.querySelectorAll('.tab-button').forEach(btn =>
+                btn.classList.remove('active'));
+            button.classList.add('active');
 
             container.querySelectorAll('.tab-content').forEach(content => {
                 content.classList.remove('block');
@@ -113,28 +140,41 @@ function initGalleryBlock(blockId) {
             targetTab.classList.remove('hidden');
             targetTab.classList.add('block');
 
-            if (swipers[tabId]) {
-                requestAnimationFrame(() => {
+            initTabSwiper(tabId);
+
+            requestAnimationFrame(() => {
+                if (swipers[tabId]) {
                     swipers[tabId].update();
-                });
-            }
+                }
+                if (thumbnailSwipers[tabId]) {
+                    thumbnailSwipers[tabId].update();
+                }
+            });
 
             initLightbox(tabId);
-        });
+
+        }, 100));
     });
 
     container.addEventListener('click', (e) => {
-        if (e.target.closest('.thumbnail')) {
-            const thumbnail = e.target.closest('.thumbnail');
-            const index = parseInt(thumbnail.getAttribute('data-index'));
-            const activeTab = container.querySelector('.tab-content.block');
-            const tabId = activeTab.id.replace('tab-', '');
+        const thumbnail = e.target.closest('.thumbnail');
+        if (!thumbnail) return;
 
-            if (swipers[tabId]) {
-                swipers[tabId].slideToLoop(index);
-            }
+        const index = parseInt(thumbnail.getAttribute('data-index'));
+        const activeTabContent = container.querySelector('.tab-content.block');
+        const tabId = activeTabContent.id.replace('tab-', '');
 
-            updateThumbnails(tabId, index);
+        if (swipers[tabId]) {
+            swipers[tabId].slideTo(index);
         }
+
+        updateThumbnails(tabId, index);
+        centerThumbnail(tabId, index);
+    });
+
+    window.addEventListener('beforeunload', () => {
+        Object.values(swipers).forEach(swiper => swiper?.destroy());
+        Object.values(thumbnailSwipers).forEach(swiper => swiper?.destroy());
+        if (lightbox) lightbox.destroy();
     });
 }