/**
* MK Lightbox
*/
const svgIcons = {
close: '',
next: '',
prev: '',
pause: '',
play: ''
}
let mklbItems = document.getElementsByClassName('mklbItem');
let lightboxContainer;
let auto = 0;
let interval;
for (let i=0; i< mklbItems.length; i++) {
let mklbItem = mklbItems[i];
mklbItem.addEventListener('click', () => _mklbOpen(mklbItem));
}
function _mklbOpen(mklbItem) {
lightboxContainer = document.createElement('div');
lightboxContainer.id = "mkLightboxContainer";
let overlay = document.createElement('div');
overlay.id = 'overlay';
lightboxContainer.appendChild(overlay);
if('gallery' in mklbItem.dataset) {
_mklbAddGallery(mklbItem);
} else if('videoSrc' in mklbItem.dataset) {
lightboxContainer.appendChild(_mklbAddVideo(mklbItem));
} else if('youtubeId' in mklbItem.dataset) {
lightboxContainer.appendChild(_mklbAddYoutubeVideo(mklbItem));
} else {
lightboxContainer.appendChild(_mklbAddImage(mklbItem));
}
let closeIconContainer = document.createElement('div');
closeIconContainer.id = "closeIconContainer";
closeIconContainer.innerHTML = svgIcons.close;
lightboxContainer.appendChild(closeIconContainer);
closeIconContainer.addEventListener('click', _closeLightbox)
document.body.appendChild(lightboxContainer);
overlay.addEventListener('click', _closeLightbox)
}
function _mklbAddImage(item) {
let image = document.createElement('img');
image.id = 'mklbImage';
image.src = ('src' in item.dataset) ? item.dataset.src : item.src;
return image;
}
function _mklbAddVideo(item) {
let video = document.createElement('video');
video.setAttribute('autoplay', true);
video.setAttribute('controls', true);
let source = document.createElement('source');
source.src = item.dataset.videoSrc;
source.type = 'video/mp4';
video.appendChild(source);
return video;
}
function _mklbAddYoutubeVideo(item) {
let iframe = document.createElement('iframe');
iframe.id = "yt-video";
iframe.setAttribute('frameborder', "0");
iframe.setAttribute('allow', "autoplay; encrypted-media");
iframe.setAttribute('allowfullscreen', "");
iframe.src = "https://www.youtube-nocookie.com/embed/" + item.dataset.youtubeId;
return iframe;
}
function _mklbAddGallery(currentItem) {
let gallery = [];
let index = 0;
let mklbInner = document.createElement('div');
mklbInner.id = 'mklbInner';
for (let i=0; i < mklbItems.length; i++) {
if('gallery' in mklbItems[i].dataset
&& mklbItems[i].dataset.gallery === currentItem.dataset.gallery) {
gallery.push(mklbItems[i]);
if('auto' in mklbItems[i].dataset) {
auto = mklbItems[i].dataset.auto;
}
if(mklbItems[i] === currentItem) {
index = gallery.length;
}
let imageContainer = document.createElement('section');
imageContainer.className = 'imageContainer';
imageContainer.appendChild(_mklbAddImage(mklbItems[i]));
mklbInner.appendChild(imageContainer);
};
}
mklbInner.style.marginLeft = (index-1) * (-100) + 'vw';
lightboxContainer.appendChild(mklbInner);
let prev = document.createElement('div');
prev.id = 'prev';
prev.innerHTML = svgIcons.prev;
let prevContainer = document.createElement('div');
prevContainer.id = "prevContainer";
prevContainer.appendChild(prev);
lightboxContainer.appendChild(prevContainer);
prevContainer.addEventListener('click', () => _mklbSlide(true));
let next = document.createElement('div');
next.id = 'next';
next.setAttribute('data-next', (index <= gallery.length) ? index+1 : 1);
next.innerHTML = svgIcons.next;
let nextContainer = document.createElement('div');
nextContainer.id = "nextContainer";
nextContainer.appendChild(next);
lightboxContainer.appendChild(nextContainer);
nextContainer.addEventListener('click', function() {
_mklbSlide(false);
_mklbStopAutoGallery();
});
if(auto > 0) {
_mklbSetAutoGallery();
}
}
function _closeLightbox() {
document.getElementById('mkLightboxContainer').remove();
clearInterval(interval);
}
function _mklbSetAutoGallery() {
let stop = document.createElement('div');
stop.id = 'stopGallery';
stop.innerHTML = svgIcons.pause;
stop.addEventListener('click', () => _mklbStopAutoGallery());
let play = document.createElement('div');
play.id = 'playGallery';
play.innerHTML = svgIcons.play;
play.addEventListener('click', function() {
_mklbPlayAutoGallery();
document.getElementById('controlContainer').classList.remove("stop");
});
let controlContainer = document.createElement('div');
controlContainer.id = "controlContainer";
controlContainer.appendChild(stop);
controlContainer. appendChild(play);
lightboxContainer.appendChild(controlContainer);
_mklbPlayAutoGallery();
}
function _mklbPlayAutoGallery() {
interval = setInterval(function() {
_mklbSlide(false)
}, auto);
}
function _mklbStopAutoGallery() {
clearInterval(interval);
document.getElementById('controlContainer').classList.add("stop");
}
function _mklbSlide(slideToPrev) {
let inner = document.getElementById('mklbInner');
let elements = document.getElementsByClassName('imageContainer').length;
let marginLeft = inner.style.marginLeft;
marginLeft = parseInt(marginLeft.slice(0, marginLeft.length-2));
if (slideToPrev && marginLeft === 0) {
inner.style.marginLeft = (elements - 1) * -100+'vw';
} else if (slideToPrev) {
inner.style.marginLeft = (marginLeft + 100)+'vw';
} else if(marginLeft === (elements-1) * -100) {
inner.style.marginLeft = '0vw';
} else {
inner.style.marginLeft = (marginLeft-100)+'vw';
}
}