Add 'template-parts/la-components/' from commit '54eb8e266ffe2f57afb812d18c8f78030562f62a'

git-subtree-dir: template-parts/la-components
git-subtree-mainline: 7c5a7f373a
git-subtree-split: 54eb8e266f

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

@@ -0,0 +1,110 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.gallery-block').forEach(function(block) {
+        const blockId = block.getAttribute('data-gallery-id');
+        initGalleryBlock(blockId);
+    });
+});
+
+function initGalleryBlock(blockId) {
+    const container = document.getElementById(blockId);
+    if (!container) return;
+
+    const swipers = {};
+    let lightbox;
+
+    function initSwiper(tabId) {
+        if (swipers[tabId]) {
+            swipers[tabId].destroy(true, true);
+        }
+
+        swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+            slidesPerView: 1.5,
+            spaceBetween: 20,
+            loop: true,
+            centeredSlides: true,
+            navigation: {
+                nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
+                prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
+            },
+            on: {
+                slideChange: function() {
+                    updateThumbnails(tabId, this.realIndex);
+                }
+            }
+        });
+    }
+
+    function initLightbox(tabId) {
+        if (lightbox) {
+            lightbox.destroy();
+        }
+
+        lightbox = GLightbox({
+            selector: `#${blockId} #tab-${tabId} .glightbox`
+        });
+    }
+
+    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');
+            } else {
+                thumb.classList.remove('active', '!border-blue-500');
+                thumb.classList.add('border-transparent');
+            }
+        });
+    }
+
+    // Табы
+    container.querySelectorAll('.tab-button').forEach(button => {
+        button.addEventListener('click', () => {
+            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-content').forEach(content => {
+                content.classList.remove('block');
+                content.classList.add('hidden');
+            });
+            container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
+            container.querySelector(`#tab-${tabId}`).classList.add('block');
+
+            setTimeout(() => {
+                initSwiper(tabId);
+                initLightbox(tabId);
+            }, 100);
+        });
+    });
+
+    // Thumbnails
+    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-', '');
+
+            if (swipers[tabId]) {
+                swipers[tabId].slideToLoop(index);
+            }
+
+            updateThumbnails(tabId, index);
+        }
+    });
+
+    const firstTab = container.querySelector('.tab-button.active');
+    if (firstTab) {
+        const tabId = firstTab.getAttribute('data-tab');
+        setTimeout(() => {
+            initSwiper(tabId);
+            initLightbox(tabId);
+        }, 100);
+    }
+}