init

2025-06-01 12:38:35 +03:00
commit 54eb8e266f
21 changed files with 2178 additions and 0 deletions
--- a/blocks/reviews-block/reviews-block.js
+++ b/blocks/reviews-block/reviews-block.js
@@ -0,0 +1,104 @@
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.reviews-block').forEach(function(block) {
+        const blockId = block.getAttribute('data-reviews-id');
+        initReviewsBlock(blockId);
+    });
+});
+
+function initReviewsBlock(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: 3,
+            spaceBetween: 20,
+            loop: true,
+            centeredSlides: true,
+        });
+    }
+
+    function initLightbox(tabId) {
+        if (lightbox) {
+            lightbox.destroy();
+        }
+
+        lightbox = GLightbox({
+            selector: `#${blockId} #tab-${tabId} .glightbox`,
+            touchNavigation: true,
+            loop: true,
+            autoplayVideos: false,
+            videosWidth: '90vw',
+            videosHeight: '80vh',
+            plyr: {
+                css: 'https://cdn.plyr.io/3.7.8/plyr.css',
+                js: 'https://cdn.plyr.io/3.7.8/plyr.js',
+                config: {
+                    ratio: '16:9',
+                    fullscreen: { enabled: true, fallback: true, iosNative: true },
+                    controls: [
+                        'play-large',
+                        'play',
+                        'progress',
+                        'current-time',
+                        'duration',
+                        'mute',
+                        'volume',
+                        'fullscreen'
+                    ]
+                }
+            },
+            onOpen: () => {
+                console.log('видео открыли');
+            },
+            onClose: () => {
+                console.log('видео закрыли');
+            }
+        });
+    }
+
+
+    // Табы
+    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);
+        });
+    });
+
+
+
+    const firstTab = container.querySelector('.tab-button.active');
+    if (firstTab) {
+        const tabId = firstTab.getAttribute('data-tab');
+        setTimeout(() => {
+            initSwiper(tabId);
+            initLightbox(tabId);
+        }, 100);
+    }
+}