https://aast.edu/template/en/main/js/mklb.js

1/**
2 * MK Lightbox
3 */
4
5const svgIcons = {
6    close: '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306C514.019,27.23,514.019,14.135,505.943,6.058z"/></g></g><g><g><path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z"/></g></g></svg>',
7    next: '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"> <g><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"/></g></svg>',
8    prev: '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/></g></svg>',
9	pause: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>',
10	play: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>'
11}
12
13let mklbItems = document.getElementsByClassName('mklbItem');
14let lightboxContainer;
15let auto = 0;
16let interval;
17
18
19for (let i=0; i< mklbItems.length; i++) {
20    let mklbItem = mklbItems[i];
21    mklbItem.addEventListener('click', () => _mklbOpen(mklbItem));
22}
23
24function _mklbOpen(mklbItem) {
25    lightboxContainer = document.createElement('div');
26    lightboxContainer.id = "mkLightboxContainer";
27
28    let overlay = document.createElement('div');
29    overlay.id = 'overlay';
30    lightboxContainer.appendChild(overlay);
31
32    if('gallery' in mklbItem.dataset) {
33        _mklbAddGallery(mklbItem);
34    } else if('videoSrc' in mklbItem.dataset) {
35        lightboxContainer.appendChild(_mklbAddVideo(mklbItem));
36    } else if('youtubeId' in mklbItem.dataset) {
37        lightboxContainer.appendChild(_mklbAddYoutubeVideo(mklbItem));
38    } else if('vimeoId' in mklbItem.dataset) {
39        lightboxContainer.appendChild(_mklbAddVimeoVideo(mklbItem));
40    } else {
41        lightboxContainer.appendChild(_mklbAddImage(mklbItem));
42    }
43
44    let closeIconContainer = document.createElement('div');
45    closeIconContainer.id = "closeIconContainer";
46    closeIconContainer.innerHTML = svgIcons.close;
47    lightboxContainer.appendChild(closeIconContainer);
48    closeIconContainer.addEventListener('click', _closeLightbox)
49
50    document.body.appendChild(lightboxContainer);
51    overlay.addEventListener('click', _closeLightbox)
52}
53
54function _mklbAddImage(item) {
55    let image = document.createElement('img');
56    image.id = 'mklbImage';
57    image.src = ('src' in item.dataset) ? item.dataset.src : item.src;
58    return image;
59}
60
61function _mklbAddVideo(item) {
62    let video = document.createElement('video');
63    video.setAttribute('autoplay', true);
64    video.setAttribute('controls', true);
65    let source = document.createElement('source');
66    source.src = item.dataset.videoSrc;
67    source.type = 'video/mp4';
68    video.appendChild(source);
69    return video;
70}
71
72function _mklbAddYoutubeVideo(item) {
73    let iframe = document.createElement('iframe');
74    iframe.id = "yt-video";
75    iframe.setAttribute('frameborder', "0");
76    iframe.setAttribute('allow', "autoplay; encrypted-media");
77    iframe.setAttribute('allowfullscreen', "");
78    iframe.src = "https://www.youtube-nocookie.com/embed/" + item.dataset.youtubeId;
79    return iframe;
80}
81
82function _mklbAddVimeoVideo(item) {
83    let iframe = document.createElement('iframe');
84    iframe.id = "yt-video";
85    iframe.setAttribute('frameborder', "0");
86    iframe.setAttribute('allowfullscreen', "");
87    iframe.setAttribute('allow', "autoplay; fullscreen");
88    iframe.src = "https://player.vimeo.com/video/" + item.dataset.vimeoId + "?dnt=1";
89    return iframe;
90}
91
92function _mklbAddGallery(currentItem) {
93    let gallery = [];
94    let index = 0;
95
96
97    let mklbInner = document.createElement('div');
98    mklbInner.id = 'mklbInner';
99
100    for (let i=0; i < mklbItems.length; i++) {
101        if('gallery' in mklbItems[i].dataset 
102		  && mklbItems[i].dataset.gallery === currentItem.dataset.gallery) {
103            gallery.push(mklbItems[i]);
104			
105			if('auto' in mklbItems[i].dataset) {
106				auto = mklbItems[i].dataset.auto;
107			}
108			
109            if(mklbItems[i] === currentItem) {
110                index = gallery.length;
111            }
112            let imageContainer = document.createElement('section');
113            imageContainer.className = 'imageContainer';
114            imageContainer.appendChild(_mklbAddImage(mklbItems[i]));
115            mklbInner.appendChild(imageContainer);
116        };
117    }
118
119    mklbInner.style.marginLeft = (index-1) * (-100) + 'vw';
120    lightboxContainer.appendChild(mklbInner);
121
122    let prev = document.createElement('div');
123    prev.id = 'prev';
124    prev.innerHTML = svgIcons.prev;
125    let prevContainer = document.createElement('div');
126    prevContainer.id = "prevContainer";
127    prevContainer.appendChild(prev);
128    lightboxContainer.appendChild(prevContainer);
129    prevContainer.addEventListener('click', () => _mklbSlide(true));
130
131    let next = document.createElement('div');
132    next.id = 'next';
133    next.setAttribute('data-next', (index <= gallery.length) ? index+1 : 1);
134    next.innerHTML = svgIcons.next;
135    let nextContainer = document.createElement('div');
136    nextContainer.id = "nextContainer";
137    nextContainer.appendChild(next);
138    lightboxContainer.appendChild(nextContainer);
139	nextContainer.addEventListener('click', function() {
140		_mklbSlide(false);
141		_mklbStopAutoGallery();
142	});
143	
144	if(auto > 0) {
145		_mklbSetAutoGallery();
146	}
147}
148
149function _closeLightbox() {
150    document.getElementById('mkLightboxContainer').remove();
151	clearInterval(interval);
152}
153
154function _mklbSetAutoGallery() {
155	let stop = document.createElement('div');
156    stop.id = 'stopGallery';
157    stop.innerHTML = svgIcons.pause;
158	stop.addEventListener('click', () => _mklbStopAutoGallery());
159	
160	let play = document.createElement('div');
161    play.id = 'playGallery';
162    play.innerHTML = svgIcons.play;
163	play.addEventListener('click', function() {
164		_mklbPlayAutoGallery();
165		document.getElementById('controlContainer').classList.remove("stop");
166	});
167	
168	let controlContainer = document.createElement('div');
169	controlContainer.id = "controlContainer";
170	controlContainer.appendChild(stop);
171	controlContainer. appendChild(play);
172	
173	lightboxContainer.appendChild(controlContainer);
174	
175	_mklbPlayAutoGallery();
176}
177
178function _mklbPlayAutoGallery() {
179	interval = setInterval(function() {
180		_mklbSlide(false)
181	}, auto);
182			
183}
184
185function _mklbStopAutoGallery() {
186	clearInterval(interval);
187	document.getElementById('controlContainer').classList.add("stop");
188}
189
190function _mklbSlide(slideToPrev) {
191    let inner = document.getElementById('mklbInner');
192    let elements = document.getElementsByClassName('imageContainer').length;
193    let marginLeft = inner.style.marginLeft;
194    marginLeft = parseInt(marginLeft.slice(0, marginLeft.length-2));
195
196    if (slideToPrev && marginLeft === 0) {
197        inner.style.marginLeft = (elements - 1) * -100+'vw';
198    } else if (slideToPrev) {
199        inner.style.marginLeft = (marginLeft + 100)+'vw';
200    } else if(marginLeft === (elements-1) * -100) {
201        inner.style.marginLeft = '0vw';
202    } else {
203        inner.style.marginLeft = (marginLeft-100)+'vw';
204    }
205}