https://www.ironmaster.com/mm5/themes/00000001/shadows/extensions/…/gd-filmstrip-gallery.js?T=191a7c59

1/*
2
3	Glendale Designs Custom Programming
4	Ticket: 372401117
5
6	Adds a video thumbnail for master product into the photo gallery thumbnails
7  
8	Copyright Glendale Designs - Our optimizations are not freeware.
9	Do not use, copy or distribute without written permission. 
10	Ask us, we're nice! [email protected]
11
12	v3.5.6+
13	GDCP
14	
15	NOTE:
16	v3.5.7 fixes the issue where adding videos makes the image thumbnail gallery features break.
17
18*/
19
20console.log('GD Filmstrip Gallery Scripts v3.5.7');
21
22thumbVideosObj.thumbnailsObj = document.getElementById('filmstrip-thumbnails');
23thumbVideosObj.prodVideosDataObj = document.getElementById('js-product-videos-data');
24
25/* Get video JSON data from product template */
26if (thumbVideosObj.prodVideosDataObj) {
27	const videosObjData = JSON.parse(thumbVideosObj.prodVideosDataObj.innerHTML);
28
29	thumbVideosObj.masterProdVideoArr = videosObjData.data;
30} else {
31	thumbVideosObj.masterProdVideoArr = [];
32}
33
34
35/* Gets called when the thumbnail images are done being generated by Image Machine */
36function addVideoThumbnails(position) {
37	if (thumbVideosObj.masterProdVideoArr.length === 0) {
38		return;
39	}
40
41	const noYouTubeTnBackupImage = 'data:image/gif;base64,R0lGODlhZABkAIAAAAAAAP///yH5BAAAAAAALAAAAABkAGQAAAJzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CGlYAAA7';
42	let appendVideoThumbnailsHTML = '';
43	let embedLinkAsIs = '';
44	let embedLinkWithOptions = '';
45
46	thumbVideosObj.masterProdVideoArr.forEach(({youtube_embed_link, youtube_view_link, youtube_tn}, loopIterator) => {
47		if (loopIterator < thumbVideosObj.maximum_videos_to_show) {
48			embedLinkAsIs = youtube_embed_link.split('?');
49			embedLinkWithOptions = `${embedLinkAsIs[0]}?rel=${thumbVideosObj.rel}`;
50			if (thumbVideosObj.autoplay_video_when_tn_clicked) {
51				embedLinkWithOptions += "&autoplay=1"
52			}
53			appendVideoThumbnailsHTML += `<li class="x-filmstrip__list-item">
54				<a 
55					href="javascript://Play" 
56					onclick="playGalleryVideo(this); 
57					showActiveThumbnail(false);" 
58					data-video_url="${youtube_view_link}" 
59					data-video_embed="${embedLinkWithOptions}" 
60					class="x-filmstrip__link" 
61					aria-label="Play Video #${loopIterator} in Gallery" 
62					role="button"
63				><picture class="x-filmstrip__picture x-filmstrip__picture-video">
64					<img 
65						class="x-filmstrip__image" 
66						alt="Thumbnail of Product Video #${loopIterator}" 
67						decoding="async" 
68						loading="lazy" 
69						width="80" height="80" 
70						src="${youtube_tn}"
71						onerror="this.onerror=null; this.src='${noYouTubeTnBackupImage}';"
72					>
73				</picture></a>
74			</li>`;
75		}
76	});
77
78	/* Now add the videos to the gallery. NOTE: Do not use innerHTML as it destroys the DOM. */
79    if (position === 'end') {
80        thumbVideosObj.thumbnailsObj.insertAdjacentHTML('beforeend', appendVideoThumbnailsHTML);
81    } else {
82        thumbVideosObj.thumbnailsObj.insertAdjacentHTML('afterbegin', appendVideoThumbnailsHTML);
83    }
84}
85
86
87function showActiveThumbnail(obj) {
88	const allThumbnails = document.querySelectorAll('.x-filmstrip__image');
89
90	allThumbnails.forEach(({classList}) => {
91		classList.remove('is-active');
92	});
93	if (obj) {
94		obj.classList.add('is-active');
95	}
96}
97
98
99function hideVideoShowGallery() {
100	const videoObjContainer = document.querySelector('#filmstrip-video-iframe-container');
101	const zoomImageLink = document.querySelector('[data-photograph]');
102
103	videoObjContainer.innerHTML = '';
104	videoObjContainer.classList.add('u-hidden');
105	zoomImageLink.classList.remove('u-invisible');
106}
107
108
109function playGalleryVideo(obj) {
110	const videoURL = obj.getAttribute('data-video_url');
111	const videoEmbed = obj.getAttribute('data-video_embed');
112	const videoObjContainer = document.querySelector('#filmstrip-video-iframe-container');
113	const zoomImageLink = document.querySelector('[data-photograph]');
114
115	zoomImageLink.classList.add('u-invisible');
116	videoObjContainer.classList.remove('u-hidden');
117	videoObjContainer.innerHTML = `
118		<div class="filmstrip-video-close-area">
119			<button class="c-button u-bg-white u-color-red filmstrip-video-close-area-button" onclick="hideVideoShowGallery();"><span><span class="u-icon-cross u-font-small" aria-hidden="true"></span> Close Video</span></button>
120		</div>
121		<iframe 
122			src="${videoEmbed}" 
123			width="100%" 
124			aria-label="Video for this item"
125			class="filmstrip-video"
126			allow="autoplay; encrypted-media" 
127			allowfullscreen=""
128		>
129			<a href="${videoURL}" target="_blank" aria-label="Opens YouTube video in a new window">Click here to view this video</a>
130		</iframe>
131	`;
132}
133
134

135document.addEventListener('ImageMachine_Thumbnails_Initialized', event => {
136	console.log('Thumbnails are done being regenerated')
137});