document.addEventListener('DOMContentLoaded', function () {
const carousel = document.querySelector('.msk-ekanga-gallery');
if (!carousel) {
return;
}
const track = carousel.querySelector('.msk-carousel-track');
const cards = carousel.querySelectorAll('.msk-carousel-card');
const nextButton = carousel.querySelector('.msk-carousel-next');
const prevButton = carousel.querySelector('.msk-carousel-prev');
const dots = carousel.querySelectorAll('.msk-carousel-dot');
if (!track || !cards.length) {
return;
}
let currentSlide = 0;
function getCardWidth() {
const card = cards[0];
if (!card) {
return 0;
}
const cardWidth = card.getBoundingClientRect().width;
const styles = window.getComputedStyle(track);
const gap = parseFloat(styles.columnGap || styles.gap || 0);
return cardWidth + gap;
}
function getVisibleCards() {
const windowElement =
carousel.querySelector('.msk-carousel-window');
if (!windowElement) {
return 4;
}
const windowWidth =
windowElement.getBoundingClientRect().width;
const cardWidth =
cards[0].getBoundingClientRect().width;
const gap =
parseFloat(
window.getComputedStyle(track).columnGap ||
window.getComputedStyle(track).gap ||
0
);
return Math.max(
1,
Math.floor(
(windowWidth + gap) /
(cardWidth + gap)
)
);
}
function getMaxSlide() {
const visibleCards =
getVisibleCards();
return Math.max(
0,
cards.length - visibleCards
);
}
function updateCarousel() {
const distance =
getCardWidth() * currentSlide;
track.style.transform =
'translate3d(-' +
distance +
'px, 0, 0)';
dots.forEach(function (dot, index) {
dot.classList.toggle(
'is-active',
index === Math.min(
currentSlide,
dots.length - 1
)
);
});
if (prevButton) {
prevButton.disabled =
currentSlide <= 0;
}
if (nextButton) {
nextButton.disabled =
currentSlide >= getMaxSlide();
}
}
function nextSlide() {
const maxSlide =
getMaxSlide();
if (currentSlide < maxSlide) {
currentSlide++;
updateCarousel();
}
}
function previousSlide() {
if (currentSlide > 0) {
currentSlide--;
updateCarousel();
}
}
if (nextButton) {
nextButton.addEventListener(
'click',
nextSlide
);
}
if (prevButton) {
prevButton.addEventListener(
'click',
previousSlide
);
}
dots.forEach(function (dot) {
dot.addEventListener(
'click',
function () {
const requestedSlide =
parseInt(
dot.dataset.slide,
10
);
const maxSlide =
getMaxSlide();
currentSlide =
Math.min(
requestedSlide,
maxSlide
);
updateCarousel();
}
);
});
window.addEventListener(
'resize',
function () {
currentSlide =
Math.min(
currentSlide,
getMaxSlide()
);
updateCarousel();
}
);
/*
* Clicking an image opens the original image.
* The gallery itself is NOT a WooCommerce product section.
*/
cards.forEach(function (card) {
card.addEventListener(
'click',
function (event) {
event.preventDefault();
const image =
card.querySelector('img');
if (!image) {
return;
}
const overlay =
document.createElement('div');
overlay.className =
'msk-simple-lightbox';
overlay.innerHTML = `
`;
document.body.appendChild(overlay);
document.body.style.overflow =
'hidden';
function closeLightbox() {
overlay.remove();
document.body.style.overflow =
'';
}
overlay.addEventListener(
'click',
function (e) {
if (
e.target === overlay ||
e.target.classList.contains(
'msk-simple-lightbox-close'
)
) {
closeLightbox();
}
}
);
document.addEventListener(
'keydown',
function escapeHandler(e) {
if (e.key === 'Escape') {
closeLightbox();
document.removeEventListener(
'keydown',
escapeHandler
);
}
}
);
}
);
});
updateCarousel();
});
