import Splide from '@splidejs/splide';
export default function feedSlider() {
/**
* get the slides
* make an array of all the images
* loop over the array and if one is clicked
* then it opens up into a modal
* when the modal is closed, then the modal is removed from the DOM
*/
const splideElements = document.querySelectorAll('.splide');
const splideOptions = {
type: 'loop',
arrows: false,
trimSpace: false,
perPage: 2,
perMove: 1,
lazyload: false,
direction: 'ltr',
pagination: false,
fixedHeight: '400px',
mediaQuery: 'min',
snap: true,
breakpoints: {
0: {
perPage: 1,
padding: { left: '0rem', right: '30%' },
fixedHeight: '400px',
},
1200: {
perPage: 1,
fixedHeight: '400px',
},
},
};
if (splideElements) {
for (let i = 0; i < splideElements.length; i++) {
new Splide(splideElements[i], splideOptions).mount();
}
}
const component = [...document.querySelectorAll('.feed-carousel-wrapper')];
function modal(imageClicked) {
const feedImageModal = document.createElement('div');
feedImageModal.dataset.component = 'feeback_modal';
feedImageModal.classList.add('feedback_modal', 'open');
feedImageModal.innerHTML = `
<div class="feedback_modal__image-wrapper">
<div class="feedback_modal__closeBtn" data-feedbackaction="open">
<svg className="svg-icon svg-icon--small svg-icon--close">
<use href="#close" />
</svg>
</div>
<img src="${imageClicked ?? imageClicked}" data-image="main">
</div>
`;
document.body.insertAdjacentElement('afterbegin', feedImageModal);
const closeBtn = document.querySelector('[data-feedbackaction="open"]');
closeBtn.addEventListener('click', () => {
feedImageModal.remove();
});
feedImageModal.addEventListener('click', () => {
feedImageModal.remove();
});
}
function getParent(target, id) {
let parent = target;
while (parent) {
if (parent.localName && parent.classList.contains(id)) {
return parent;
}
parent = parent.parentNode;
}
return false;
}
function componentClick(e) {
const { target } = e;
const parentEl = getParent(target, 'splide__slide');
if (!parentEl) return;
const image = parentEl.querySelector('img');
const imageUrl = image.getAttribute('src');
modal(imageUrl);
}
component.forEach((template) => {
template.addEventListener('click', componentClick);
});
}
window.addEventListener('DOMContentLoaded', feedSlider);
