You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
4.4 KiB
131 lines
4.4 KiB
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 initAllSwipers() {
|
|
const tabs = container.querySelectorAll('.tab-button');
|
|
|
|
tabs.forEach(button => {
|
|
const tabId = button.getAttribute('data-tab');
|
|
const tabContent = container.querySelector(`#tab-${tabId}`);
|
|
|
|
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');
|
|
}
|
|
|
|
if (swipers[tabId]) {
|
|
swipers[tabId].destroy(true, true);
|
|
}
|
|
|
|
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
centeredSlides: true,
|
|
observer: true,
|
|
observeParents: true,
|
|
watchSlidesProgress: true,
|
|
});
|
|
|
|
if (wasHidden) {
|
|
tabContent.style.visibility = '';
|
|
tabContent.style.position = '';
|
|
tabContent.classList.add('hidden');
|
|
tabContent.classList.remove('block');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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('видео закрыли');
|
|
}
|
|
});
|
|
}
|
|
|
|
initAllSwipers();
|
|
|
|
const activeTab = container.querySelector('.tab-button.active');
|
|
if (activeTab) {
|
|
const tabId = activeTab.getAttribute('data-tab');
|
|
initLightbox(tabId);
|
|
}
|
|
|
|
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');
|
|
});
|
|
|
|
const targetTab = container.querySelector(`#tab-${tabId}`);
|
|
targetTab.classList.remove('hidden');
|
|
targetTab.classList.add('block');
|
|
|
|
if (swipers[tabId]) {
|
|
requestAnimationFrame(() => {
|
|
swipers[tabId].update();
|
|
});
|
|
}
|
|
|
|
initLightbox(tabId);
|
|
});
|
|
});
|
|
} |