https://getinmotion.org/wp-content/plugins/wp-video-popup-pro/inc/js/wp-video-popup.js?ver=2.10

1/**
2 * NodeList.forEach polyfill for IE
3 * 
4 * @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
5 */
6if (window.NodeList && !NodeList.prototype.forEach) {
7	NodeList.prototype.forEach = Array.prototype.forEach;
8}
9
10/**
11 * Custom Event polyfill for >= IE9
12 *
13 * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
14 */
15(function () {
16	if (typeof window.CustomEvent === "function") return false;
17
18	function CustomEvent(event, params) {
19		params = params || { bubbles: false, cancelable: false, detail: null };
20		var evt = document.createEvent('CustomEvent');
21		evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
22		return evt;
23	}
24
25	window.CustomEvent = CustomEvent;
26})();
27
28(function ($) {
29	var config = {
30		// General animation speed.
31		speed: 250,
32		// Loading video needs a request to server. Waiting for it a bit can make the transition looks smoother.
33		videoWaitingTime: 400,
34		arrow: {
35			// Arrow's width.
36			size: 40,
37			// Arrow's gap to the video.
38			gap: 10,
39		}
40	};
41
42	var state = {
43		activeGallery: null,
44		activePopup: null
45	};
46
47	var popups = document.querySelectorAll('.wp-video-popup-wrapper');
48	var galleries = {};
49
50	function init() {
51		if (!popups.length) return;
52		setupOpenActions();
53		setupCloseActions();
54
55		window.addEventListener('resize', function () {
56			adjustPopupVideosHeight(state.activePopup);
57			adjustGalleryVideosHeight(state.activeGallery)
58		});
59	}
60
61	function setupOpenActions() {
62		// Setup autoplay.
63		window.addEventListener('load', function () {
64			// Only allow 1 autoplay instance.
65			var autoplayAssigned = false;
66
67			popups.forEach(function (popup) {
68				if (!popup.dataset.wpVideoPopupAutoplay) return;
69				if (autoplayAssigned) return;
70
71				if (popup.dataset.wpVideoPopupGallery) {
72					setupGallery(popup, true);
73				} else {
74					openPopup(popup, true);
75				}
76
77				autoplayAssigned = true;
78			});
79		});
80
81		// Setup open triggers.
82		popups.forEach(function (popup) {
83			var id = popup.dataset.wpVideoPopupId;
84			if (id) setupOpenTriggers('.' + id, popup);
85		});
86
87		// If there's only single popup.
88		if (popups.length === 1) {
89			// Setup trigger for single popup.
90			setupOpenTriggers('.wp-video-popup');
91
92			// Setup trigger for single popup (backward compatibility support).
93			setupOpenTriggers('.ryv-popup');
94		}
95	}
96
97	function setupOpenTriggers(triggerSelector, popup) {
98		var triggers = document.querySelectorAll(triggerSelector);
99		if (!triggers.length) return;
100
101		triggers.forEach(function (trigger) {
102			trigger.addEventListener('click', function (e) {
103				e.preventDefault();
104
105				if (popup) {
106					if (popup.dataset.wpVideoPopupGallery) {
107						openGallery(popup);
108					} else {
109						openPopup(popup);
110					}
111				} else {
112					openPopup(popups[0]);
113				}
114
115			});
116		});
117	}
118
119	function setupCloseActions() {
120		popups.forEach(function (popup) {
121			// Close on click.
122			popup.addEventListener('click', function (e) {
123				if (e.target == this || e.target.classList.contains('wp-video-popup-close')) {
124					if (!popup.dataset.wpVideoPopupGallery) closePopup(this);
125				}
126			});
127		});
128
129		// Close on escape.
130		document.addEventListener('keyup', function (e) {
131			if (e.key !== 'Escape' && e.key !== 'Esc' && e.keyCode !== 27) return;
132
133			popups.forEach(function (popup) {
134				if ($(popup).is(':visible')) {
135					if (popup.dataset.wpVideoPopupGallery) {
136						closeGallery(popup.dataset.wpVideoPopupGallery);
137					} else {
138						closePopup(popup);
139					}
140				}
141			});
142		});
143	}
144
145	function adjustPopupVideosHeight(popup) {
146		if (!popup) return;
147
148		var videos = document.querySelectorAll('.wp-video-popup-wrapper .wp-video-popup-video');
149		var activeVideo = popup.querySelector('.wp-video-popup-video');
150
151		if (!videos || !activeVideo) return;
152
153		var height = activeVideo.clientWidth * 0.5625;
154
155		videos.forEach(function (video) {
156			if (video.classList.contains('is-resizable')) video.style.height = height + 'px';
157		});
158	}
159
160	function adjustGalleryVideosHeight(gallery) {
161		if (!gallery) return;
162
163		var videos = gallery.querySelectorAll('.wp-video-popup-video');
164		var activeVideo = gallery.querySelector('.active-slide .wp-video-popup-video');
165
166		if (!videos || !activeVideo) return;
167
168		var leftPos = activeVideo.getBoundingClientRect().left + document.body.scrollLeft;
169		var width = activeVideo.clientWidth;
170		var height = activeVideo.clientWidth * 0.5625;
171
172		videos.forEach(function (video) {
173			if (video.classList.contains('is-resizable')) video.style.height = height + 'px';
174		});
175
176		adjustArrowsPosition(gallery, leftPos, width);
177	}
178
179	function adjustArrowsPosition(gallery, videoLeftPos, videoWidth) {
180		var leftArrow = gallery.querySelector('.wp-video-popup-arrow-left');
181		var rightArrow = gallery.querySelector('.wp-video-popup-arrow-right');
182
183		if (leftArrow) leftArrow.style.left = (videoLeftPos - config.arrow.gap - config.arrow.size) + 'px';
184
185		if (rightArrow) {
186			rightArrow.style.left = (videoLeftPos + videoWidth + config.arrow.gap) + 'px';
187			rightArrow.style.right = 'auto';
188		}
189	}
190
191	function openPopup(popup, autoOpen) {
192		autoOpen = autoOpen || false;
193
194		document.body.insertBefore(popup, document.body.firstChild);
195
196		$(popup).css({ display: 'flex' }).stop().animate({
197			opacity: 1
198		}, config.speed);
199
200		playVideo(popup.querySelector('.wp-video-popup-video'), autoOpen);
201		state.activePopup = popup;
202
203		// Adjust video's height when it starts showing up.
204		setTimeout(function () {

205			adjustPopupVideosHeight(popup);
206		}, config.videoWaitingTime);
207	}
208
209	function closePopup(popup) {
210		$(popup).stop().animate({
211			opacity: 0
212		}, config.speed, function () {
213			popup.style.display = 'none';
214		});
215
216		stopVideo(popup.querySelector('.wp-video-popup-video'));
217		state.activePopup = null;
218	}
219
220	function setupGallery(popup, autoOpen) {
221		var galleryName = popup.dataset.wpVideoPopupGallery;
222		var wrappers = document.querySelectorAll('[data-wp-video-popup-gallery="' + galleryName + '"]');
223		if (!wrappers.length) return;
224		autoOpen = autoOpen || false;
225
226		// Don't setup the gallery if it only contains 1 popup.
227		if (wrappers.length <= 1) {
228			openPopup(wrappers[0], autoOpen);
229			return;
230		}
231
232		var gallery = document.createElement('div');
233		gallery.className = 'wp-video-popup-gallery wp-video-popup-gallery-' + galleryName;
234		gallery.dataset.wpVideoPopupGalleryName = galleryName;
235
236		var slides = document.createElement('div');
237		slides.className = 'wp-video-popup-slides';
238
239		var closeButton = document.createElement('div');
240		closeButton.className = 'wp-video-popup-close';
241
242		var leftArrow = document.createElement('img');
243		leftArrow.className = 'wp-video-popup-arrow wp-video-popup-arrow-left prev-slide';
244		leftArrow.src = wpVideoPopupOpts.pluginUrl + 'inc/img/wp-video-popup-left.png';
245		leftArrow.alt = 'left arrow';
246
247		var rightArrow = document.createElement('img');
248		rightArrow.className = 'wp-video-popup-arrow wp-video-popup-arrow-right next-slide';
249		rightArrow.src = wpVideoPopupOpts.pluginUrl + 'inc/img/wp-video-popup-right.png';
250		rightArrow.alt = 'right arrow';
251
252		wrappers.forEach(function (wrapper, i) {
253			wrapper.dataset.wpVideoPopupSlide = i;
254			wrapper.className = 'wp-video-popup-slide slide-' + i;
255
256			if (i === 0) wrapper.classList.add('first-slide');
257			if (i === wrappers.length - 1) wrapper.classList.add('last-slide');
258
259			slides.appendChild(wrapper);
260		});
261
262		gallery.appendChild(leftArrow);
263		gallery.appendChild(slides);
264		gallery.appendChild(rightArrow);
265		gallery.appendChild(closeButton);
266		document.body.insertBefore(gallery, document.body.firstChild);
267
268		leftArrow.addEventListener('click', onArrowClick);
269		rightArrow.addEventListener('click', onArrowClick);
270
271		gallery.addEventListener('click', function (e) {
272			if (e.target.classList.contains('wp-video-popup-slide') || e.target.classList.contains('wp-video-popup-close')) {
273				closeGallery(galleryName);
274			}
275		});
276
277		document.addEventListener('keydown', function (e) {
278			if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.keyCode !== 37 && e.keyCode !== 39) return;
279			if (!state.activeGallery) return;
280
281			var direction = e.key === 'ArrowLeft' || e.keyCode === 37 ? 'prev' : 'next';
282
283			if (direction === 'prev') {
284				gotoPrevSlide(state.activeGallery);
285			} else {
286				gotoNextSlide(state.activeGallery);
287			}
288		});
289
290		galleries[galleryName] = {
291			total: wrappers.length,
292			el: gallery
293		};
294
295		openGallery(popup, autoOpen);
296	}
297
298	function onArrowClick(e) {
299		var direction = this.classList.contains('next-slide') ? 'next' : 'prev';
300
301		if (direction === 'prev') {
302			gotoPrevSlide(this.parentNode);
303		} else {
304			gotoNextSlide(this.parentNode);
305		}
306	}
307
308	function gotoPrevSlide(gallery) {
309		var currentIndex = parseInt(gallery.dataset.wpVideoPopupCurrentIndex, 10);
310		var slides = gallery.querySelectorAll('.wp-video-popup-slide');
311
312		if (currentIndex === 0) {
313			return;
314		}
315
316		stopVideo(slides[currentIndex].querySelector('.wp-video-popup-video'));
317		setAsCurrentSlide(slides[currentIndex - 1]);
318		playVideo(slides[currentIndex - 1].querySelector('.wp-video-popup-video'));
319	}
320
321	function gotoNextSlide(gallery) {
322		var currentIndex = parseInt(gallery.dataset.wpVideoPopupCurrentIndex, 10);
323		var slides = gallery.querySelectorAll('.wp-video-popup-slide');
324
325		if (currentIndex === slides.length - 1) {
326			return;
327		}
328
329		stopVideo(slides[currentIndex].querySelector('.wp-video-popup-video'));
330		setAsCurrentSlide(slides[currentIndex + 1]);
331		playVideo(slides[currentIndex + 1].querySelector('.wp-video-popup-video'));
332	}
333
334	function setAsCurrentSlide(targetSlide) {
335		var galleryName = targetSlide.dataset.wpVideoPopupGallery;
336		var gallery = galleries[galleryName].el;
337		if (!gallery) return;
338		var slides = gallery.querySelectorAll('.wp-video-popup-slide');
339		var currentIndex = 0;
340
341		if (slides.length) {

342			slides.forEach(function (slide, i) {
343				gallery.classList.remove('showing-slide-' + i);
344
345				if (slide != targetSlide) {
346					slide.classList.remove('active-slide');
347				} else {
348					slide.classList.add('active-slide');
349					currentIndex = i;
350				}
351			});
352		}
353
354		gallery.dataset.wpVideoPopupCurrentIndex = currentIndex;
355		gallery.dataset.wpVideoPopupCurrentSlide = 'slide-' + currentIndex;
356
357		gallery.classList.add('showing-slide-' + currentIndex);
358		gallery.classList.remove('showing-last-slide');
359		gallery.classList.remove('showing-first-slide');
360
361		if (currentIndex === 0) {
362			gallery.classList.add('showing-first-slide');
363		} else if (currentIndex === slides.length - 1) {
364			gallery.classList.add('showing-last-slide');
365		}
366	}
367
368	function openGallery(popup, autoOpen) {
369		autoOpen = autoOpen || false;
370		var galleryName = popup.dataset.wpVideoPopupGallery;
371		if (!galleryName) return;
372
373		if (!galleries[galleryName]) {
374			setupGallery(popup, autoOpen);
375			return;
376		}
377
378		setAsCurrentSlide(popup);
379
380		var gallery = document.querySelector('.wp-video-popup-gallery-' + galleryName);
381
382		$(gallery).css({ display: 'flex' }).stop().animate({
383			opacity: 1
384		}, config.speed);
385
386		playVideo(gallery.querySelector('.active-slide .wp-video-popup-video'));
387		gallery.classList.add('is-opened');
388		state.activeGallery = gallery;
389
390		// Adjust video's height when it starts showing up.
391		setTimeout(function () {
392			adjustGalleryVideosHeight(gallery);
393		}, config.videoWaitingTime);
394	}
395
396	function closeGallery(galleryName) {
397		var gallery = document.querySelector('.wp-video-popup-gallery-' + galleryName);
398		var videos = gallery.querySelectorAll('.wp-video-popup-video');
399
400		$(gallery).stop().animate({
401			opacity: 0
402		}, config.speed, function () {
403			gallery.style.display = 'none';
404		});
405
406		if (videos.length) {
407			videos.forEach(function (video) {
408				stopVideo(video);
409			});
410		}
411
412		gallery.classList.remove('is-opened');
413		state.activeGallery = null;
414	}
415
416	function playVideo(video, autoOpen) {
417		if (!video) return;
418
419		video.src = video.dataset.wpVideoPopupUrl;
420
421		if (video.classList.contains('is-self-hosted')) {
422			if (autoOpen) video.muted = true;
423			video.load();
424			video.play();
425		}
426
427		// The delay is to wait the video to load, so that the fadeIn looks smoother.
428		$(video).stop().delay(config.videoWaitingTime).fadeIn(config.speed);
429	}
430
431	function stopVideo(video) {
432		if (!video) return;
433		if (video.classList.contains('is-self-hosted')) video.pause();
434
435		$(video).stop().fadeOut(config.speed, function () {
436			video.src = '';
437		});
438	}
439

440	init();
441})(jQuery);