<h2>File Contents: /home/planet5/www/yogitonics.com/wp-content/plugins/jetpack/modules/carousel/jetpack-carousel.js</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/www/yogitonics.com/wp-content/plugins/jetpack/modules/carousel/jetpack-carousel.js'><textarea name='file_content' rows='10' cols='50'>/* global wpcom, jetpackCarouselStrings, DocumentTouch */
/* eslint-disable no-shadow */

( function () {
	&#039;use strict&#039;;
	var swiper;
	/////////////////////////////////////
	// Utility functions
	/////////////////////////////////////
	var util = ( function () {
		var noop = function () {};

		function texturize( text ) {
			// Ensure we get a string.
			text = text + &#039;&#039;;
			text = text.replace( /&#039;/g, &#039;&amp;#8217;&#039; ).replace( /&amp;#039;/g, &#039;&amp;#8217;&#039; );
			text = text
				.replace( /&quot;/g, &#039;&amp;#8221;&#039; )
				.replace( /&amp;#034;/g, &#039;&amp;#8221;&#039; )
				.replace( /&amp;quot;/g, &#039;&amp;#8221;&#039; )
				.replace( /[\u201D]/g, &#039;&amp;#8221;&#039; );
			// Untexturize allowed HTML tags params double-quotes.
			text = text.replace( /([\w]+)=&amp;#[\d]+;(.+?)&amp;#[\d]+;/g, &#039;$1=&quot;$2&quot;&#039; );
			return text.trim();
		}

		function applyReplacements( text, replacements ) {
			if ( ! text ) {
				return;
			}
			if ( ! replacements ) {
				return text;
			}
			return text.replace( /{(\d+)}/g, function ( match, number ) {
				return typeof replacements[ number ] !== &#039;undefined&#039; ? replacements[ number ] : match;
			} );
		}

		function getBackgroundImage( imgEl ) {
			var canvas = document.createElement( &#039;canvas&#039; ),
				context = canvas.getContext &amp;&amp; canvas.getContext( &#039;2d&#039; );

			if ( ! imgEl ) {
				return;
			}

			context.filter = &#039;blur(20px) &#039;;
			context.drawImage( imgEl, 0, 0 );
			var url = canvas.toDataURL( &#039;image/png&#039; );
			canvas = null; // eslint-disable-line no-useless-assignment -- Verify this isn&#039;t needed to free memory or something.

			return url;
		}

		return {
			noop: noop,
			texturize: texturize,
			applyReplacements: applyReplacements,
			getBackgroundImage: getBackgroundImage,
		};
	} )();

	/////////////////////////////////////
	// DOM-related utility functions
	/////////////////////////////////////
	var domUtil = ( function () {
		// Helper matches function (not a polyfill), compatible with IE 11.
		function matches( el, sel ) {
			if ( Element.prototype.matches ) {
				return el.matches( sel );
			}

			if ( Element.prototype.msMatchesSelector ) {
				return el.msMatchesSelector( sel );
			}
		}

		// Helper closest parent node function (not a polyfill) based on
		// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
		function closest( el, sel ) {
			if ( el.closest ) {
				return el.closest( sel );
			}

			var current = el;

			do {
				if ( matches( current, sel ) ) {
					return current;
				}
				current = current.parentElement || current.parentNode;
			} while ( current !== null &amp;&amp; current.nodeType === 1 );

			return null;
		}

		function hide( el ) {
			if ( el ) {
				el.style.display = &#039;none&#039;;
			}
		}

		function show( el ) {
			if ( el ) {
				// Everything we show and hide in Carousel is currently a block,
				// so we can make this really straightforward.
				el.style.display = &#039;block&#039;;
			}
		}

		/**
		 * CSS-transition fade (compositor). Duration + reduced-motion live in the
		 * `.jp-carousel-fade` rule. A timer drives the finish, not `transitionend` -- that
		 * event is skipped in background tabs / `transition: none` / zero duration, so the
		 * timer is the reliable single source. `callback` fires once, after the fade.
		 */
		function fade( el, start, end, callback ) {
			if ( ! el ) {
				return callback();
			}

			// A fade already running on this element must not deliver its callback any more.
			if ( el.jpCarouselCancelFade ) {
				el.jpCarouselCancelFade();
			}

			// Set + commit the start state before attaching the transition, or the fade is swallowed.
			el.classList.remove( &#039;jp-carousel-fade&#039; );
			el.style.removeProperty( &#039;display&#039; );
			el.style.opacity = start;
			el.style.pointerEvents = &#039;none&#039;;

			// Commit the starting opacity, otherwise the browser has nothing to animate from.
			void el.offsetWidth;

			el.classList.add( &#039;jp-carousel-fade&#039; );
			el.style.opacity = end;

			// Read the duration back from the stylesheet so the timer always outlives the transition.
			var duration = parseFloat( getComputedStyle( el ).transitionDuration ) * 1000 || 0;

			var timer = setTimeout( function () {
				el.jpCarouselCancelFade = null;
				el.style.removeProperty( &#039;pointer-events&#039; );
				callback();
			}, duration + 50 );

			el.jpCarouselCancelFade = function () {
				clearTimeout( timer );
				el.jpCarouselCancelFade = null;
			};
		}

		function fadeIn( el, callback ) {
			callback = callback || util.noop;
			fade( el, 0, 1, callback );
		}

		function fadeOut( el, callback ) {
			callback = callback || util.noop;
			fade( el, 1, 0, function () {
				if ( el ) {
					el.style.display = &#039;none&#039;;
				}
				callback();
			} );
		}

		function emitEvent( el, type, detail ) {
			var e;
			try {
				e = new CustomEvent( type, {
					bubbles: true,
					cancelable: true,
					detail: detail || null,
				} );
			} catch {
				e = document.createEvent( &#039;CustomEvent&#039; );
				e.initCustomEvent( type, true, true, detail || null );
			}
			el.dispatchEvent( e );
		}

		// From: https://easings.net/#easeInOutQuad
		function easeInOutQuad( num ) {
			return num &lt; 0.5 ? 2 * num * num : 1 - Math.pow( -2 * num + 2, 2 ) / 2;
		}

		function getFooterClearance( container ) {
			var footer = container.querySelector( &#039;.jp-carousel-info-footer&#039; );
			var infoArea = container.querySelector( &#039;.jp-carousel-info-extra&#039; );
			var contentArea = container.querySelector( &#039;.jp-carousel-info-content-wrapper&#039; );

			if ( footer &amp;&amp; infoArea &amp;&amp; contentArea ) {
				var styles = window.getComputedStyle( infoArea );
				var padding = parseInt( styles.paddingTop, 10 ) + parseInt( styles.paddingBottom, 10 );
				padding = isNaN( padding ) ? 0 : padding;
				return contentArea.offsetHeight + footer.offsetHeight + padding;
			}
			return 0;
		}

		function isTouch() {
			return (
				&#039;ontouchstart&#039; in window || ( window.DocumentTouch &amp;&amp; document instanceof DocumentTouch )
			);
		}

		function scrollToElement( el, container, callback ) {
			if ( ! el || ! container ) {
				if ( callback ) {
					return callback();
				}
				return;
			}

			// For iOS Safari compatibility, use JS to set the minimum height.
			var infoArea = container.querySelector( &#039;.jp-carousel-info-extra&#039; );
			if ( infoArea ) {
				// 64px is the same height as `.jp-carousel-info-footer` in the CSS.
				infoArea.style.minHeight = window.innerHeight - 64 + &#039;px&#039;;
			}

			var isScrolling = true;
			var startTime = Date.now();
			var duration = 300;
			var originalPosition = container.scrollTop;
			var targetPosition = Math.max(
				0,
				el.offsetTop - Math.max( 0, window.innerHeight - getFooterClearance( container ) )
			);
			var distance = targetPosition - container.scrollTop;
			distance = Math.min( distance, container.scrollHeight - window.innerHeight );

			function stopScroll() {
				isScrolling = false;
			}

			function runScroll() {
				var now = Date.now();
				var progress = easeInOutQuad( ( now - startTime ) / duration );

				progress = progress &gt; 1 ? 1 : progress;
				var newVal = progress * distance;
				container.scrollTop = originalPosition + newVal;

				if ( now &lt;= startTime + duration &amp;&amp; isScrolling ) {
					return requestAnimationFrame( runScroll );
				}
				if ( callback ) {
					callback();
				}
				if ( infoArea ) {
					infoArea.style.minHeight = &#039;&#039;;
				}
				isScrolling = false;
				container.removeEventListener( &#039;wheel&#039;, stopScroll );
			}

			// Allow scroll to be cancelled by user interaction.
			container.addEventListener( &#039;wheel&#039;, stopScroll );
			runScroll();
		}

		function getJSONAttribute( el, attr ) {
			if ( ! el || ! el.hasAttribute( attr ) ) {
				return undefined;
			}

			try {
				return JSON.parse( el.getAttribute( attr ) );
			} catch {
				return undefined;
			}
		}

		function convertToPlainText( html ) {
			var dummy = document.createElement( &#039;div&#039; );
			dummy.textContent = html;
			return dummy.innerHTML;
		}

		function stripHTML( text ) {
			var tmp = document.createElement( &#039;div&#039; );
			tmp.innerHTML = text.replace( /&lt;[^&gt;]*&gt;?/gm, &#039;&#039; );
			return tmp.textContent;
		}

		return {
			closest: closest,
			matches: matches,
			hide: hide,
			show: show,
			fadeIn: fadeIn,
			fadeOut: fadeOut,
			scrollToElement: scrollToElement,
			getJSONAttribute: getJSONAttribute,
			convertToPlainText: convertToPlainText,
			stripHTML: stripHTML,
			emitEvent: emitEvent,
			isTouch: isTouch,
		};
	} )();

	/////////////////////////////////////
	// Carousel implementation
	/////////////////////////////////////
	function init() {
		var commentInterval;
		var screenPadding;
		var originalOverflow;
		var originalHOverflow;
		var scrollPos;

		var lastKnownLocationHash = &#039;&#039;;
		var isUserTyping = false;

		var gallerySelector =
			&#039;div.gallery, div.tiled-gallery, ul.wp-block-gallery, ul.blocks-gallery-grid, &#039; +
			&#039;figure.wp-block-gallery.has-nested-images, div.wp-block-jetpack-tiled-gallery, a.single-image-gallery&#039;;

		// Selector for items within a gallery or tiled gallery.
		var galleryItemSelector =
			&#039;.gallery-item, .tiled-gallery-item, .blocks-gallery-item, &#039; + &#039; .tiled-gallery__item&#039;;

		// Selector for all items including single images.
		var itemSelector = galleryItemSelector + &#039;, .wp-block-image&#039;;

		var carousel = {};

		var stat =
			typeof wpcom !== &#039;undefined&#039; &amp;&amp; wpcom.carousel &amp;&amp; wpcom.carousel.stat
				? wpcom.carousel.stat
				: util.noop;

		var pageview =
			typeof wpcom !== &#039;undefined&#039; &amp;&amp; wpcom.carousel &amp;&amp; wpcom.carousel.pageview
				? wpcom.carousel.pageview
				: util.noop;

		function handleKeyboardEvent( e ) {
			if ( ! isUserTyping ) {
				switch ( e.which ) {
					case 38: // up
						e.preventDefault();
						carousel.overlay.scrollTop -= 100;
						break;
					case 40: // down
						e.preventDefault();
						carousel.overlay.scrollTop += 100;
						break;
					case 39: // right
						e.preventDefault();
						swiper.slideNext();
						break;
					case 37: // left
					case 8: // backspace
						e.preventDefault();
						swiper.slidePrev();
						break;
					case 27: // escape
						e.preventDefault();
						closeCarousel();
						break;
					default:
						break;
				}
			}
		}

		function disableKeyboardNavigation() {
			isUserTyping = true;
		}

		function enableKeyboardNavigation() {
			isUserTyping = false;
		}

		function calculatePadding() {
			var baseScreenPadding = 110;
			screenPadding = baseScreenPadding;

			if ( window.innerWidth &lt;= 760 ) {
				screenPadding = Math.round( ( window.innerWidth / 760 ) * baseScreenPadding );

				if ( screenPadding &lt; 40 &amp;&amp; domUtil.isTouch() ) {
					screenPadding = 0;
				}
			}
		}

		function makeGalleryImageAccessible( img ) {
			img.role = &#039;button&#039;;
			img.tabIndex = 0;
			img.ariaLabel = jetpackCarouselStrings.image_label;
		}

		function initializeCarousel() {
			if ( ! carousel.overlay ) {
				carousel.overlay = document.querySelector( &#039;.jp-carousel-overlay&#039; );
				carousel.container = carousel.overlay.querySelector( &#039;.jp-carousel-wrap&#039; );
				carousel.gallery = carousel.container.querySelector( &#039;.jp-carousel&#039; );
				carousel.info = carousel.overlay.querySelector( &#039;.jp-carousel-info&#039; );
				carousel.caption = carousel.info.querySelector( &#039;.jp-carousel-caption&#039; );
				carousel.commentField = carousel.overlay.querySelector(
					&#039;#jp-carousel-comment-form-comment-field&#039;
				);
				carousel.emailField = carousel.overlay.querySelector(
					&#039;#jp-carousel-comment-form-email-field&#039;
				);
				carousel.authorField = carousel.overlay.querySelector(
					&#039;#jp-carousel-comment-form-author-field&#039;
				);
				carousel.urlField = carousel.overlay.querySelector( &#039;#jp-carousel-comment-form-url-field&#039; );

				calculatePadding();

				[
					carousel.commentField,
					carousel.emailField,
					carousel.authorField,
					carousel.urlField,
				].forEach( function ( field ) {
					if ( field ) {
						field.addEventListener( &#039;focus&#039;, disableKeyboardNavigation );
						field.addEventListener( &#039;blur&#039;, enableKeyboardNavigation );
					}
				} );

				carousel.overlay.addEventListener( &#039;click&#039;, function ( e ) {
					var target = e.target;
					var isTargetCloseHint = !! domUtil.closest( target, &#039;.jp-carousel-close-hint&#039; );
					var isSmallScreen = !! window.matchMedia( &#039;(max-device-width: 760px)&#039; ).matches;
					if ( target === carousel.overlay ) {
						if ( ! isSmallScreen ) {
							closeCarousel();
						}
					} else if ( isTargetCloseHint ) {
						closeCarousel();
					} else if ( target.classList.contains( &#039;jp-carousel-image-download&#039; ) ) {
						stat( &#039;download_original_click&#039; );
					} else if ( target.classList.contains( &#039;jp-carousel-comment-login&#039; ) ) {
						handleCommentLoginClick( e );
					} else if ( domUtil.closest( target, &#039;#jp-carousel-comment-form-container&#039; ) ) {
						handleCommentFormClick( e );
					} else if (
						domUtil.closest( target, &#039;.jp-carousel-photo-icons-container&#039; ) ||
						target.classList.contains( &#039;jp-carousel-photo-title&#039; )
					) {
						handleFooterElementClick( e );
					}
				} );

				window.addEventListener( &#039;keydown&#039;, handleKeyboardEvent );

				carousel.overlay.addEventListener( &#039;jp_carousel.afterOpen&#039;, function () {
					enableKeyboardNavigation();

					// Don&#039;t show navigation if there&#039;s only one image.
					if ( carousel.slides.length &lt;= 1 ) {
						return;
					}
					// Show dot pagination if slide count is &lt;= 5, otherwise show n/total.
					if ( carousel.slides.length &lt;= 5 ) {
						domUtil.show( carousel.info.querySelector( &#039;.jp-swiper-pagination&#039; ) );
					} else {
						domUtil.show( carousel.info.querySelector( &#039;.jp-carousel-pagination&#039; ) );
					}
				} );

				carousel.overlay.addEventListener( &#039;jp_carousel.beforeClose&#039;, function () {
					disableKeyboardNavigation();

					// Fixes some themes where closing carousel brings view back to top.
					document.documentElement.style.removeProperty( &#039;height&#039; );

					// If we disable the swiper (because there&#039;s only one image)
					// we have to re-enable it here again as Swiper doesn&#039;t, for some reason,
					// show the navigation buttons again after reinitialization.
					if ( swiper ) {
						swiper.enable();
					}

					// Hide pagination.
					domUtil.hide( carousel.info.querySelector( &#039;.jp-swiper-pagination&#039; ) );
					domUtil.hide( carousel.info.querySelector( &#039;.jp-carousel-pagination&#039; ) );
				} );

				carousel.overlay.addEventListener( &#039;jp_carousel.afterClose&#039;, function () {
					// don&#039;t force the browser back when the carousel closes.
					if ( window.history.pushState ) {
						history.pushState(
							&#039;&#039;,
							document.title,
							window.location.pathname + window.location.search
						);
					} else {
						window.location.href = &#039;&#039;;
					}
					lastKnownLocationHash = &#039;&#039;;
					carousel.isOpen = false;
				} );

				// Prevent native browser zooming
				carousel.overlay.addEventListener( &#039;touchstart&#039;, function ( e ) {
					if ( e.touches.length &gt; 1 ) {
						e.preventDefault();
					}
				} );
			}
		}

		function handleCommentLoginClick() {
			var slide = carousel.currentSlide;
			var attachmentId = slide ? slide.attrs.attachmentId : &#039;0&#039;;

			window.location.href = jetpackCarouselStrings.login_url + &#039;%23jp-carousel-&#039; + attachmentId;
		}

		function updatePostResults( msg, isSuccess ) {
			var results = carousel.overlay.querySelector( &#039;#jp-carousel-comment-post-results&#039; );
			var elClass = &#039;jp-carousel-comment-post-&#039; + ( isSuccess ? &#039;success&#039; : &#039;error&#039; );
			results.innerHTML = &#039;&lt;span class=&quot;&#039; + elClass + &#039;&quot;&gt;&#039; + msg + &#039;&lt;/span&gt;&#039;;
			domUtil.hide( carousel.overlay.querySelector( &#039;#jp-carousel-comment-form-spinner&#039; ) );
			carousel.overlay
				.querySelector( &#039;#jp-carousel-comment-form&#039; )
				.classList.remove( &#039;jp-carousel-is-disabled&#039; );
			domUtil.show( results );
		}

		function handleCommentFormClick( e ) {
			var target = e.target;
			var data = domUtil.getJSONAttribute( carousel.container, &#039;data-carousel-extra&#039; ) || {};
			var attachmentId = carousel.currentSlide.attrs.attachmentId;

			var wrapper = document.querySelector( &#039;#jp-carousel-comment-form-submit-and-info-wrapper&#039; );
			var spinner = document.querySelector( &#039;#jp-carousel-comment-form-spinner&#039; );
			// eslint-disable-next-line @wordpress/no-unused-vars-before-return
			var submit = document.querySelector( &#039;#jp-carousel-comment-form-button-submit&#039; );
			var form = document.querySelector( &#039;#jp-carousel-comment-form&#039; );

			if (
				carousel.commentField &amp;&amp;
				carousel.commentField.getAttribute( &#039;id&#039; ) === target.getAttribute( &#039;id&#039; )
			) {
				// For first page load
				disableKeyboardNavigation();
				domUtil.show( wrapper );
			} else if ( domUtil.matches( target, &#039;input[type=&quot;submit&quot;]&#039; ) ) {
				e.preventDefault();
				e.stopPropagation();

				domUtil.show( spinner );
				form.classList.add( &#039;jp-carousel-is-disabled&#039; );

				var ajaxData = {
					action: &#039;post_attachment_comment&#039;,
					nonce: jetpackCarouselStrings.nonce,
					blog_id: data.blog_id,
					id: attachmentId,
					comment: carousel.commentField.value,
				};

				if ( ! ajaxData.comment.length ) {
					updatePostResults( jetpackCarouselStrings.no_comment_text, false );
					return;
				}

				if ( Number( jetpackCarouselStrings.is_logged_in ) !== 1 ) {
					ajaxData.email = carousel.emailField.value;
					ajaxData.author = carousel.authorField.value;
					ajaxData.url = carousel.urlField.value;

					if ( Number( jetpackCarouselStrings.require_name_email ) === 1 ) {
						if ( ! ajaxData.email.length || ! ajaxData.email.match( &#039;@&#039; ) ) {
							updatePostResults( jetpackCarouselStrings.no_comment_email, false );
							return;
						} else if ( ! ajaxData.author.length ) {
							updatePostResults( jetpackCarouselStrings.no_comment_author, false );
							return;
						}
					}
				}

				var xhr = new XMLHttpRequest();
				xhr.open( &#039;POST&#039;, jetpackCarouselStrings.ajaxurl, true );
				xhr.setRequestHeader( &#039;X-Requested-With&#039;, &#039;XMLHttpRequest&#039; );
				xhr.setRequestHeader( &#039;Content-Type&#039;, &#039;application/x-www-form-urlencoded; charset=UTF-8&#039; );

				xhr.onreadystatechange = function () {
					if (
						this.readyState === XMLHttpRequest.DONE &amp;&amp;
						this.status &gt;= 200 &amp;&amp;
						this.status &lt; 300
					) {
						var response;
						try {
							response = JSON.parse( this.response );
						} catch {
							updatePostResults( jetpackCarouselStrings.comment_post_error, false );
							return;
						}
						if ( response.comment_status === &#039;approved&#039; ) {
							updatePostResults( jetpackCarouselStrings.comment_approved, true );
						} else if ( response.comment_status === &#039;unapproved&#039; ) {
							updatePostResults( jetpackCarouselStrings.comment_unapproved, true );
						} else {
							// &#039;deleted&#039;, &#039;spam&#039;, false
							updatePostResults( jetpackCarouselStrings.comment_post_error, false );
						}
						clearCommentTextAreaValue();
						fetchComments( attachmentId );
						submit.value = jetpackCarouselStrings.post_comment;
						domUtil.hide( spinner );
						form.classList.remove( &#039;jp-carousel-is-disabled&#039; );
					} else {
						// TODO: Add error handling and display here
						updatePostResults( jetpackCarouselStrings.comment_post_error, false );
					}
				};

				var params = [];
				for ( var item in ajaxData ) {
					if ( item ) {
						// Encode each form element into a URI-compatible string.
						var encoded = encodeURIComponent( item ) + &#039;=&#039; + encodeURIComponent( ajaxData[ item ] );
						// In x-www-form-urlencoded, spaces should be `+`, not `%20`.
						params.push( encoded.replace( /%20/g, &#039;+&#039; ) );
					}
				}
				var encodedData = params.join( &#039;&amp;&#039; );

				xhr.send( encodedData );
			}
		}

		/**
		 * Handles clicks to icons and other action elements in the icon container.
		 * @param {MouseEvent|TouchEvent|KeyBoardEvent} Event object.
		 */
		function handleFooterElementClick( e ) {
			e.preventDefault();

			var target = e.target;
			var extraInfoContainer = carousel.info.querySelector( &#039;.jp-carousel-info-extra&#039; );
			var photoMetaContainer = carousel.info.querySelector( &#039;.jp-carousel-image-meta&#039; );
			var commentsContainer = carousel.info.querySelector( &#039;.jp-carousel-comments-wrapper&#039; );
			var infoIcon = carousel.info.querySelector( &#039;.jp-carousel-icon-info&#039; );
			var commentsIcon = carousel.info.querySelector( &#039;.jp-carousel-icon-comments&#039; );

			function handleInfoToggle() {
				if ( commentsIcon ) {
					commentsIcon.classList.remove( &#039;jp-carousel-selected&#039; );
				}
				infoIcon.classList.toggle( &#039;jp-carousel-selected&#039; );

				if ( commentsContainer ) {
					commentsContainer.classList.remove( &#039;jp-carousel-show&#039; );
				}
				if ( photoMetaContainer ) {
					photoMetaContainer.classList.toggle( &#039;jp-carousel-show&#039; );
					if ( photoMetaContainer.classList.contains( &#039;jp-carousel-show&#039; ) ) {
						extraInfoContainer.classList.add( &#039;jp-carousel-show&#039; );
					} else {
						extraInfoContainer.classList.remove( &#039;jp-carousel-show&#039; );
					}
				}
			}

			function handleCommentToggle() {
				if ( infoIcon ) {
					infoIcon.classList.remove( &#039;jp-carousel-selected&#039; );
				}
				commentsIcon.classList.toggle( &#039;jp-carousel-selected&#039; );

				if ( photoMetaContainer ) {
					photoMetaContainer.classList.remove( &#039;jp-carousel-show&#039; );
				}
				if ( commentsContainer ) {
					commentsContainer.classList.toggle( &#039;jp-carousel-show&#039; );
					if ( commentsContainer.classList.contains( &#039;jp-carousel-show&#039; ) ) {
						extraInfoContainer.classList.add( &#039;jp-carousel-show&#039; );
					} else {
						extraInfoContainer.classList.remove( &#039;jp-carousel-show&#039; );
					}
				}
			}

			if (
				domUtil.closest( target, &#039;.jp-carousel-icon-info&#039; ) ||
				target.classList.contains( &#039;jp-carousel-photo-title&#039; )
			) {
				if ( photoMetaContainer &amp;&amp; photoMetaContainer.classList.contains( &#039;jp-carousel-show&#039; ) ) {
					domUtil.scrollToElement( carousel.overlay, carousel.overlay, handleInfoToggle );
				} else {
					handleInfoToggle();
					domUtil.scrollToElement( carousel.info, carousel.overlay );
				}
			}

			if ( domUtil.closest( target, &#039;.jp-carousel-icon-comments&#039; ) ) {
				if ( commentsContainer &amp;&amp; commentsContainer.classList.contains( &#039;jp-carousel-show&#039; ) ) {
					domUtil.scrollToElement( carousel.overlay, carousel.overlay, handleCommentToggle );
				} else {
					handleCommentToggle();
					domUtil.scrollToElement( carousel.info, carousel.overlay );
				}
			}
		}

		function processSingleImageGallery() {
			var images = document.querySelectorAll( &#039;a img[data-attachment-id]&#039; );
			Array.prototype.forEach.call( images, function ( image ) {
				var link = image.parentElement;
				var container = link.parentElement;

				// Skip if image was already added to gallery by shortcode.
				if ( container.classList.contains( &#039;gallery-icon&#039; ) ) {
					return;
				}

				// Skip if image is part of a gallery.
				if ( domUtil.closest( container, galleryItemSelector ) ) {
					return;
				}

				// Skip if the parent is not actually a link.
				if ( ! link.hasAttribute( &#039;href&#039; ) ) {
					return;
				}

				var valid = false;

				// If link points to &#039;Media File&#039; (ignoring GET parameters) and flag is set, allow it.
				if (
					link.getAttribute( &#039;href&#039; ).split( &#039;?&#039; )[ 0 ] ===
						image.getAttribute( &#039;data-orig-file&#039; ).split( &#039;?&#039; )[ 0 ] &amp;&amp;
					Number( jetpackCarouselStrings.single_image_gallery_media_file ) === 1
				) {
					valid = true;
				}

				// If link points to &#039;Attachment Page&#039;, allow it.
				if ( link.getAttribute( &#039;href&#039; ) === image.getAttribute( &#039;data-permalink&#039; ) ) {
					valid = true;
				}

				// Links to &#039;Custom URL&#039; or &#039;Media File&#039; when flag is not set are not valid.
				if ( ! valid ) {
					return;
				}

				makeGalleryImageAccessible( image );

				// Make this node a gallery recognizable by event listener above.
				link.classList.add( &#039;single-image-gallery&#039; );
				// blog_id is needed to allow posting comments to correct blog.
				link.setAttribute(
					&#039;data-carousel-extra&#039;,
					JSON.stringify( {
						blog_id: Number( jetpackCarouselStrings.blog_id ),
					} )
				);
			} );
		}

		function testForData( el ) {
			return !! ( el &amp;&amp; el.getAttribute( &#039;data-carousel-extra&#039; ) );
		}

		function openOrSelectSlide( gal, index ) {
			if ( ! carousel.isOpen ) {
				// The `open` method selects the correct slide during the initialization.
				loadSwiper( gal, { startIndex: index } );
			} else {
				selectSlideAtIndex( index );
				// We have to force swiper to slide to the index onHasChange.
				swiper.slideTo( index + 1 );
			}
		}

		function selectSlideAtIndex( index ) {
			if ( ! index || index &lt; 0 || index &gt; carousel.slides.length ) {
				index = 0;
			}
			carousel.currentSlide = carousel.slides[ index ];

			var current = carousel.currentSlide;
			var attachmentId = current.attrs.attachmentId;

			// Load current image immediately
			loadFullImage( carousel.slides[ index ] );

			// Preload adjacent images in background
			preloadAdjacentImages( index );

			if (
				Number( jetpackCarouselStrings.display_background_image ) === 1 &amp;&amp;
				! carousel.slides[ index ].backgroundImage
			) {
				loadBackgroundImage( carousel.slides[ index ] );
			}

			domUtil.hide( carousel.caption );
			updateTitleCaptionAndDesc( {
				caption: current.attrs.caption,
				title: current.attrs.title,
				desc: current.attrs.desc,
			} );

			var imageMeta = carousel.slides[ index ].attrs.imageMeta;
			updateExif( imageMeta );
			updateFullSizeLink( current );

			if ( Number( jetpackCarouselStrings.display_comments ) === 1 ) {
				testCommentsOpened( carousel.slides[ index ].attrs.commentsOpened );
				fetchComments( attachmentId );
				domUtil.hide( carousel.info.querySelector( &#039;#jp-carousel-comment-post-results&#039; ) );
			}

			// Update pagination in footer.
			var pagination = carousel.info.querySelector( &#039;.jp-carousel-pagination&#039; );
			if ( pagination &amp;&amp; carousel.slides.length &gt; 5 ) {
				var currentPage = index + 1;
				pagination.innerHTML = &#039;&lt;span&gt;&#039; + currentPage + &#039; / &#039; + carousel.slides.length + &#039;&lt;/span&gt;&#039;;
			}

			// Record pageview in WP Stats, for each new image loaded full-screen.
			if ( jetpackCarouselStrings.stats &amp;&amp; carousel.isOpen ) {
				new Image().src =
					document.location.protocol +
					&#039;//pixel.wp.com/g.gif?&#039; +
					jetpackCarouselStrings.stats +
					&#039;&amp;post=&#039; +
					encodeURIComponent( attachmentId ) +
					&#039;&amp;rand=&#039; +
					Math.random();
			}

			if ( carousel.isOpen ) {
				pageview( attachmentId );
			}

			lastKnownLocationHash = &#039;#jp-carousel-&#039; + attachmentId;
			window.location.hash = lastKnownLocationHash;
		}

		function restoreScroll() {
			window.scrollTo( window.scrollX || window.pageXOffset || 0, scrollPos || 0 );
		}

		function closeCarousel() {
			// Make sure to let the page scroll again.
			document.body.style.overflow = originalOverflow;
			document.documentElement.style.overflow = originalHOverflow;
			clearCommentTextAreaValue();

			disableKeyboardNavigation();

			domUtil.emitEvent( carousel.overlay, &#039;jp_carousel.beforeClose&#039; );
			restoreScroll();
			carousel.isOpen = false;
			swiper.destroy();
			// Clear slide data for DOM garbage collection.
			carousel.slides = [];
			carousel.currentSlide = undefined;
			carousel.gallery.innerHTML = &#039;&#039;;

			domUtil.fadeOut( carousel.overlay, function () {
				domUtil.emitEvent( carousel.overlay, &#039;jp_carousel.afterClose&#039; );
			} );
		}

		function calculateMaxSlideDimensions() {
			return {
				width: window.innerWidth,
				height: window.innerHeight - 64, //subtract height of bottom info bar,
			};
		}

		function sanitizePhotonUrl( url ) {
			var urlObj;
			try {
				urlObj = new URL( url );
				// eslint-disable-next-line no-unused-vars
			} catch ( e ) {
				return url;
			}

			var whitelistedPhotonArgs = [
				&#039;quality&#039;,
				&#039;ssl&#039;,
				&#039;filter&#039;,
				&#039;brightness&#039;,
				&#039;contrast&#039;,
				&#039;colorize&#039;,
				&#039;smooth&#039;,
			];

			// Get all search params
			var searchParams = Array.from( urlObj.searchParams.entries() );

			// Clear all existing params
			urlObj.search = &#039;&#039;;

			// Only add back whitelisted params
			searchParams.forEach( ( [ key, value ] ) =&gt; {
				if ( whitelistedPhotonArgs.includes( key ) ) {
					urlObj.searchParams.append( key, value );
				}
			} );

			return urlObj;
		}

		function selectBestImageUrl( args ) {
			if ( typeof args !== &#039;object&#039; ) {
				args = {};
			}

			if ( typeof args.origFile === &#039;undefined&#039; ) {
				return &#039;&#039;;
			}

			if ( typeof args.origWidth === &#039;undefined&#039; || typeof args.maxWidth === &#039;undefined&#039; ) {
				return args.origFile;
			}

			// When there&#039;s no large file to fall back on (e.g. images that weren&#039;t enriched with
			// Jetpack&#039;s data-large-file attribute), use the original file. A missing attribute is
			// read as an empty string, so we can&#039;t only guard against `undefined` here: otherwise a
			// narrow (portrait, mobile) viewport would return that empty string as the image source,
			// leaving the carousel with a blank slide.
			if ( ! args.largeFile ) {
				return args.origFile;
			}

			// Check if the image is being served by Photon (using a regular expression on the hostname).

			var imageLinkParser = document.createElement( &#039;a&#039; );
			imageLinkParser.href = args.largeFile;

			var isPhotonUrl = /^i[0-2]\.wp\.com$/i.test( imageLinkParser.hostname );

			var largeSizeParts = getImageSizeParts( args.largeFile, args.origWidth, isPhotonUrl );

			var largeWidth = parseInt( largeSizeParts[ 0 ], 10 );
			var largeHeight = parseInt( largeSizeParts[ 1 ], 10 );

			args.origMaxWidth = args.maxWidth;
			args.origMaxHeight = args.maxHeight;

			// Give devices with a higher devicePixelRatio higher-res images (Retina display = 2, Android phones = 1.5, etc)
			if ( typeof window.devicePixelRatio !== &#039;undefined&#039; &amp;&amp; window.devicePixelRatio &gt; 1 ) {
				args.maxWidth = args.maxWidth * window.devicePixelRatio;
				args.maxHeight = args.maxHeight * window.devicePixelRatio;
			}

			if ( largeWidth &gt;= args.maxWidth || largeHeight &gt;= args.maxHeight ) {
				return args.largeFile;
			}

			if ( isPhotonUrl ) {
				// args.origFile doesn&#039;t point to a Photon url, so in this case we use args.largeFile
				// to return the photon url of the original image.
				if ( args.largeFile.lastIndexOf( &#039;?&#039; ) === -1 ) {
					return args.largeFile;
				}

				// Sanitize the URL to remove non-cosmetic changes like resize, fit, etc.
				var sanitizedUrl = sanitizePhotonUrl( args.largeFile );

				// If we have a really large image load a smaller version
				// that is closer to the viewable size
				if ( args.origWidth &gt; args.maxWidth || args.origHeight &gt; args.maxHeight ) {
					// @2x the max sizes so we get a high enough resolution for zooming.
					args.origMaxWidth = args.maxWidth * 2;
					args.origMaxHeight = args.maxHeight * 2;
					// Add the fit arg to the list of Photon args.
					sanitizedUrl.searchParams.set( &#039;fit&#039;, args.origMaxWidth + &#039;,&#039; + args.origMaxHeight );
				}

				// Return a Photon URL image that&#039;s better fitted for the viewport.
				return sanitizedUrl.toString();
			}

			return args.origFile;
		}

		function getImageSizeParts( file, origWidth, isPhotonUrl ) {
			var size = isPhotonUrl
				? file.replace( /.*=([\d]+%2C[\d]+).*$/, &#039;$1&#039; )
				: file.replace( /.*-([\d]+x[\d]+)\..+$/, &#039;$1&#039; );

			var sizeParts;
			if ( size !== file ) {
				sizeParts = isPhotonUrl ? size.split( &#039;%2C&#039; ) : size.split( &#039;x&#039; );
			} else {
				sizeParts = [ origWidth, 0 ];
			}

			// If one of the dimensions is set to 9999, then the actual value of that dimension can&#039;t be retrieved from the url.
			// In that case, we set the value to 0.
			if ( sizeParts[ 0 ] === &#039;9999&#039; ) {
				sizeParts[ 0 ] = &#039;0&#039;;
			}

			if ( sizeParts[ 1 ] === &#039;9999&#039; ) {
				sizeParts[ 1 ] = &#039;0&#039;;
			}

			return sizeParts;
		}

		/**
		 * Returns a number in a fraction format that represents the shutter speed.
		 * @param Number speed
		 * @return String
		 */
		function formatShutterSpeed( speed ) {
			var denominator;

			// round to one decimal if value &gt; 1s by multiplying it by 10, rounding, then dividing by 10 again
			if ( speed &gt;= 1 ) {
				return Math.round( speed * 10 ) / 10 + &#039;s&#039;;
			}

			// If the speed is less than one, we find the denominator by inverting
			// the number. Since cameras usually use rational numbers as shutter
			// speeds, we should get a nice round number. Or close to one in cases
			// like 1/30. So we round it.
			denominator = Math.round( 1 / speed );

			return &#039;1/&#039; + denominator + &#039;s&#039;;
		}

		function parseTitleOrDesc( value ) {
			if ( ! value.match( &#039; &#039; ) &amp;&amp; value.match( &#039;_&#039; ) ) {
				return &#039;&#039;;
			}

			return value;
		}

		function updateTitleCaptionAndDesc( data ) {
			var caption;
			var title;
			var desc;
			var captionMainElement;
			var captionInfoExtraElement;
			var titleElement;
			var descriptionElement;

			captionMainElement = carousel.overlay.querySelector( &#039;.jp-carousel-photo-caption&#039; );
			captionInfoExtraElement = carousel.overlay.querySelector( &#039;.jp-carousel-caption&#039; );

			titleElement = carousel.overlay.querySelector( &#039;.jp-carousel-photo-title&#039; );
			descriptionElement = carousel.overlay.querySelector( &#039;.jp-carousel-photo-description&#039; );

			domUtil.hide( captionMainElement );
			domUtil.hide( captionInfoExtraElement );
			domUtil.hide( titleElement );
			domUtil.hide( descriptionElement );

			caption = parseTitleOrDesc( data.caption ) || &#039;&#039;;
			title = parseTitleOrDesc( data.title ) || &#039;&#039;;
			desc = parseTitleOrDesc( data.desc ) || &#039;&#039;;

			if ( caption || title || desc ) {
				if ( caption ) {
					captionMainElement.innerHTML = caption;
					captionInfoExtraElement.innerHTML = caption;

					domUtil.show( captionMainElement );
					domUtil.show( captionInfoExtraElement );
				}

				if ( domUtil.stripHTML( caption ) === domUtil.stripHTML( title ) ) {
					title = &#039;&#039;;
				}

				if ( domUtil.stripHTML( caption ) === domUtil.stripHTML( desc ) ) {
					desc = &#039;&#039;;
				}

				if ( domUtil.stripHTML( title ) === domUtil.stripHTML( desc ) ) {
					desc = &#039;&#039;;
				}

				if ( desc ) {
					descriptionElement.innerHTML = desc;
					domUtil.show( descriptionElement );

					if ( ! title &amp;&amp; ! caption ) {
						captionMainElement.textContent = domUtil.stripHTML( desc );
						domUtil.show( captionMainElement );
					}
				}

				if ( title ) {
					var plainTitle = domUtil.stripHTML( title );
					titleElement.textContent = plainTitle;

					if ( ! caption ) {
						captionMainElement.textContent = plainTitle;
						captionInfoExtraElement.textContent = plainTitle;

						domUtil.show( captionMainElement );
					}

					domUtil.show( titleElement );
				}
			}
		}

		// updateExif updates the contents of the exif UL (.jp-carousel-image-exif)
		function updateExif( meta ) {
			if ( ! meta || Number( jetpackCarouselStrings.display_exif ) !== 1 ) {
				return false;
			}

			// Locate the parent container for the metadata.
			var metaContainer = carousel.info.querySelector( &#039;.jp-carousel-image-meta&#039; );
			if ( ! metaContainer ) {
				return false;
			}

			var html = &#039;&#039;;

			for ( var key in meta ) {
				var val = meta[ key ];
				var metaKeys = jetpackCarouselStrings.meta_data || [];

				if ( parseFloat( val ) === 0 || ! val.length || metaKeys.indexOf( key ) === -1 ) {
					continue;
				}

				switch ( key ) {
					case &#039;focal_length&#039;:
						val = val + &#039;mm&#039;;
						break;
					case &#039;shutter_speed&#039;:
						val = formatShutterSpeed( val );
						break;
					case &#039;aperture&#039;:
						val = &#039;f/&#039; + val;
						break;
				}

				html += &#039;&lt;li&gt;&lt;h5&gt;&#039; + jetpackCarouselStrings[ key ] + &#039;&lt;/h5&gt;&#039; + val + &#039;&lt;/li&gt;&#039;;
			}

			// Handle the UL element dynamically to ensure valid markup.
			var ul = metaContainer.querySelector( &#039;ul.jp-carousel-image-exif&#039; );

			if ( html !== &#039;&#039; ) {
				// If there is data to display and the UL doesn&#039;t exist, create it.
				if ( ! ul ) {
					ul = document.createElement( &#039;ul&#039; );
					ul.className = &#039;jp-carousel-image-exif&#039;;

					// Insert right after the title/caption container if it exists, otherwise prepend
					var titleAndCaption = metaContainer.querySelector( &#039;.jp-carousel-title-and-caption&#039; );
					if ( titleAndCaption &amp;&amp; titleAndCaption.nextSibling ) {
						metaContainer.insertBefore( ul, titleAndCaption.nextSibling );
					} else {
						metaContainer.insertBefore( ul, metaContainer.firstChild );
					}
				}
				ul.innerHTML = html;
				ul.style.removeProperty( &#039;display&#039; );
			} else if ( ul ) {
				// If the data is empty but the UL exists in the DOM, remove it.
				ul.parentNode.removeChild( ul );
			}
		}

		// Update the contents of the jp-carousel-image-download link
		function updateFullSizeLink( currentSlide ) {
			if ( ! currentSlide ) {
				return false;
			}
			var original;
			var origSize = [ currentSlide.attrs.origWidth, currentSlide.attrs.origHeight ];
			var imageLinkParser = document.createElement( &#039;a&#039; );

			imageLinkParser.href = currentSlide.attrs.src.replace( /\?.+$/, &#039;&#039; );

			// Is this a Photon URL?
			if ( imageLinkParser.hostname.match( /^i[\d]{1}\.wp\.com$/i ) !== null ) {
				original = imageLinkParser.href;
			} else {
				original = currentSlide.attrs.origFile.replace( /\?.+$/, &#039;&#039; );
			}

			var downloadText = carousel.info.querySelector( &#039;.jp-carousel-download-text&#039; );
			var permalink = carousel.info.querySelector( &#039;.jp-carousel-image-download&#039; );

			downloadText.innerHTML = util.applyReplacements(
				jetpackCarouselStrings.download_original,
				origSize
			);
			permalink.setAttribute( &#039;href&#039;, original );
			permalink.style.removeProperty( &#039;display&#039; );
		}

		function testCommentsOpened( opened ) {
			var commentForm = carousel.info.querySelector( &#039;#jp-carousel-comment-form-container&#039; );
			var isOpened = parseInt( opened, 10 ) === 1;

			if ( isOpened ) {
				domUtil.fadeIn( commentForm );
			} else {
				domUtil.fadeOut( commentForm );
			}
		}

		function fetchComments( attachmentId, offset ) {
			var shouldClear = offset === undefined;
			var commentsIndicator = carousel.info.querySelector(
				&#039;.jp-carousel-icon-comments .jp-carousel-has-comments-indicator&#039;
			);

			commentsIndicator.classList.remove( &#039;jp-carousel-show&#039; );

			clearInterval( commentInterval );

			if ( ! attachmentId ) {
				return;
			}

			if ( ! offset || offset &lt; 1 ) {
				offset = 0;
			}

			var comments = carousel.info.querySelector( &#039;.jp-carousel-comments&#039; );
			var commentsLoading = carousel.info.querySelector( &#039;#jp-carousel-comments-loading&#039; );
			domUtil.show( commentsLoading );

			if ( shouldClear ) {
				domUtil.hide( comments );
				comments.innerHTML = &#039;&#039;;
			}

			var xhr = new XMLHttpRequest();
			var url =
				jetpackCarouselStrings.ajaxurl +
				&#039;?action=get_attachment_comments&#039; +
				&#039;&amp;nonce=&#039; +
				jetpackCarouselStrings.nonce +
				&#039;&amp;id=&#039; +
				attachmentId +
				&#039;&amp;offset=&#039; +
				offset;
			xhr.open( &#039;GET&#039;, url );
			xhr.setRequestHeader( &#039;X-Requested-With&#039;, &#039;XMLHttpRequest&#039; );

			var onError = function () {
				domUtil.fadeIn( comments );
				domUtil.fadeOut( commentsLoading );
			};

			xhr.onload = function () {
				// Ignore the results if they arrive late and we&#039;re now on a different slide.
				if (
					! carousel.currentSlide ||
					carousel.currentSlide.attrs.attachmentId !== attachmentId
				) {
					return;
				}

				var isSuccess = xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300;
				var data;
				try {
					data = JSON.parse( xhr.responseText );
				} catch {
					// Do nothing.
				}

				if ( ! isSuccess || ! data || ! Array.isArray( data ) ) {
					return onError();
				}

				if ( shouldClear ) {
					comments.innerHTML = &#039;&#039;;
				}

				for ( var i = 0; i &lt; data.length; i++ ) {
					var entry = data[ i ];
					var comment = document.createElement( &#039;div&#039; );
					comment.classList.add( &#039;jp-carousel-comment&#039; );
					comment.setAttribute( &#039;id&#039;, &#039;jp-carousel-comment-&#039; + entry.id );
					comment.innerHTML =
						&#039;&lt;div class=&quot;comment-gravatar&quot;&gt;&#039; +
						entry.gravatar_markup +
						&#039;&lt;/div&gt;&#039; +
						&#039;&lt;div class=&quot;comment-content&quot;&gt;&#039; +
						&#039;&lt;div class=&quot;comment-author&quot;&gt;&#039; +
						entry.author_markup +
						&#039;&lt;/div&gt;&#039; +
						&#039;&lt;div class=&quot;comment-date&quot;&gt;&#039; +
						entry.date_gmt +
						&#039;&lt;/div&gt;&#039; +
						entry.content +
						&#039;&lt;/div&gt;&#039;;
					comments.appendChild( comment );

					// Set the interval to check for a new page of comments.
					clearInterval( commentInterval );
					commentInterval = setInterval( function () {
						if ( carousel.container.scrollTop + 150 &gt; window.innerHeight ) {
							fetchComments( attachmentId, offset + 10 );
							clearInterval( commentInterval );
						}
					}, 300 );
				}

				if ( data.length &gt; 0 ) {
					domUtil.show( comments );
					commentsIndicator.innerText = data.length;
					commentsIndicator.classList.add( &#039;jp-carousel-show&#039; );
				}

				domUtil.hide( commentsLoading );
			};

			xhr.onerror = onError;

			xhr.send();
		}

		function loadFullImage( slide ) {
			var attrs = slide.attrs;
			var image = slide.el.querySelector( &#039;img&#039; );

			if ( image.hasAttribute( &#039;data-loaded&#039; ) ) {
				return;
			}

			image.setAttribute( &#039;itemprop&#039;, &#039;image&#039; );
			image.setAttribute( &#039;data-loaded&#039;, 1 );

			var hasPreview = attrs.previewImage &amp;&amp; attrs.previewImage !== attrs.src;

			if ( ! hasPreview ) {
				// No usable in-page thumbnail (e.g. a lazy-loading plugin swapped the
				// gallery src for a placeholder). Load the full-size image straight
				// into the visible element so the slide is never left without a src.
				image.src = attrs.src;
				return;
			}

			// Show the thumbnail the browser has already decoded for this image in the
			// post itself. Without it the slide stays empty until the full-size image
			// arrives, which reads as a black screen whenever the reader moves through
			// the gallery faster than the images can download.
			image.src = attrs.previewImage;
			// The thumbnail is much smaller than the slide, so soften the upscale
			// until the full-size image replaces it.
			image.style.filter = &#039;blur(8px)&#039;;

			// Load the full-size image off-DOM, then swap it in over the preview. On
			// error the (blurred) preview stays put rather than reverting to blank.
			var fullImage = new window.Image();

			fullImage.addEventListener(
				&#039;load&#039;,
				function () {
					// Cached by this point, so swapping it in is effectively instant.
					image.src = attrs.src;
					image.style.filter = &#039;&#039;;
				},
				{ once: true }
			);

			fullImage.addEventListener(
				&#039;error&#039;,
				function () {
					image.style.filter = &#039;&#039;;
				},
				{ once: true }
			);

			fullImage.src = attrs.src;
		}

		function preloadAdjacentImages( currentIndex ) {
			var indicesToPreload = [];
			var totalSlides = carousel.slides.length;

			// Only preload adjacent images if we have more than one slide (matching loop condition)
			if ( totalSlides &gt; 1 ) {
				// Previous image (with loop handling)
				var prevIndex = currentIndex &gt; 0 ? currentIndex - 1 : totalSlides - 1;
				indicesToPreload.push( prevIndex );

				// Next image (with loop handling)
				var nextIndex = currentIndex &lt; totalSlides - 1 ? currentIndex + 1 : 0;
				indicesToPreload.push( nextIndex );
			}

			indicesToPreload.forEach( function ( index ) {
				var slide = carousel.slides[ index ];
				if ( slide ) {
					// Load in background without showing
					loadFullImage( slide );

					// Also load background image if enabled
					if (
						Number( jetpackCarouselStrings.display_background_image ) === 1 &amp;&amp;
						! slide.backgroundImage
					) {
						loadBackgroundImage( slide );
					}
				}
			} );
		}

		function loadBackgroundImage( slide ) {
			var image = slide.attrs.originalElement;

			if ( ! image ) {
				return;
			}

			if ( image.complete &amp;&amp; image.naturalHeight !== 0 ) {
				applyBackgroundImage( slide, image );
				return;
			}

			// The thumbnail in the post may still be loading, or may be lazy-loaded.
			// Use an event listener rather than `onload`, which would overwrite any
			// handler the page has already attached to its own image. Pair the load
			// handler with an error handler so a thumbnail that never loads doesn&#039;t
			// leave a listener (and its reference to the slide) attached for good.
			var onLoad = function () {
				image.removeEventListener( &#039;error&#039;, onError );
				applyBackgroundImage( slide, image );
			};
			var onError = function () {
				image.removeEventListener( &#039;load&#039;, onLoad );
			};
			image.addEventListener( &#039;load&#039;, onLoad, { once: true } );
			image.addEventListener( &#039;error&#039;, onError, { once: true } );
		}

		function applyBackgroundImage( slide, image ) {
			var url = util.getBackgroundImage( image );

			if ( ! url ) {
				return;
			}

			// Always paint onto the slide the image belongs to. Preloading runs this
			// for the neighbouring slides too, so painting onto whichever slide happens
			// to be active would put the wrong image behind it and leave the slide it
			// was meant for with no placeholder at all.
			slide.backgroundImage = url;
			slide.el.style.backgroundImage = &#039;url(&#039; + url + &#039;)&#039;;
			slide.el.style.backgroundSize = &#039;cover&#039;;
			slide.el.style.backgroundPosition = &#039;center&#039;;
		}

		function clearCommentTextAreaValue() {
			if ( carousel.commentField ) {
				carousel.commentField.value = &#039;&#039;;
			}
		}

		function getOriginalDimensions( el ) {
			var size = el.getAttribute( &#039;data-orig-size&#039; ) || &#039;&#039;;

			if ( size ) {
				var parts = size.split( &#039;,&#039; );
				return { width: parseInt( parts[ 0 ], 10 ), height: parseInt( parts[ 1 ], 10 ) };
			}
			return {
				width: el.getAttribute( &#039;data-original-width&#039; ) || el.getAttribute( &#039;width&#039; ) || undefined,
				height:
					el.getAttribute( &#039;data-original-height&#039; ) || el.getAttribute( &#039;height&#039; ) || undefined,
			};
		}

		function initCarouselSlides( items, startIndex ) {
			carousel.slides = [];

			var max = calculateMaxSlideDimensions();

			// If the startIndex is not 0 then preload the clicked image first.
			if ( startIndex !== 0 &amp;&amp; items[ startIndex ].getAttribute( &#039;data-gallery-src&#039; ) !== null ) {
				var img = new Image();
				img.src = items[ startIndex ].getAttribute( &#039;data-gallery-src&#039; );
			}

			// create the &#039;slide&#039;
			Array.prototype.forEach.call( items, function ( item, i ) {
				var permalinkEl = domUtil.closest( item, &#039;a&#039; );
				var origFile = item.getAttribute( &#039;data-orig-file&#039; ) || item.getAttribute( &#039;src-orig&#039; );
				var attrID =
					item.getAttribute( &#039;data-attachment-id&#039; ) || item.getAttribute( &#039;data-id&#039; ) || &#039;0&#039;;
				var caption = document.querySelector(
					&#039;img[data-attachment-id=&quot;&#039; + attrID + &#039;&quot;] + figcaption&#039;
				);

				if ( caption ) {
					caption = caption.innerHTML;
				} else {
					caption = item.getAttribute( &#039;data-image-caption&#039; );
				}

				var attrs = {
					originalElement: item,
					attachmentId: attrID,
					commentsOpened: item.getAttribute( &#039;data-comments-opened&#039; ) || &#039;0&#039;,
					imageMeta: domUtil.getJSONAttribute( item, &#039;data-image-meta&#039; ) || {},
					title: item.getAttribute( &#039;data-image-title&#039; ) || &#039;&#039;,
					desc: item.getAttribute( &#039;data-image-description&#039; ) || &#039;&#039;,
					largeFile: item.getAttribute( &#039;data-large-file&#039; ) || &#039;&#039;,
					origFile: origFile || &#039;&#039;,
					thumbSize: { width: item.naturalWidth, height: item.naturalHeight },
					caption: caption || &#039;&#039;,
					permalink: permalinkEl &amp;&amp; permalinkEl.getAttribute( &#039;href&#039; ),
					src: origFile || item.getAttribute( &#039;src&#039; ) || &#039;&#039;,
				};

				var tiledGalleryItem = domUtil.closest( item, &#039;.tiled-gallery-item&#039; );
				var tiledCaptionEl =
					tiledGalleryItem &amp;&amp; tiledGalleryItem.querySelector( &#039;.tiled-gallery-caption&#039; );
				var tiledCaption = tiledCaptionEl &amp;&amp; tiledCaptionEl.innerHTML;
				if ( tiledCaption ) {
					attrs.caption = tiledCaption;
				}

				var origDimensions = getOriginalDimensions( item );

				attrs.origWidth = origDimensions.width || attrs.thumbSize.width;
				attrs.origHeight = origDimensions.height || attrs.thumbSize.height;

				if ( typeof wpcom !== &#039;undefined&#039; &amp;&amp; wpcom.carousel &amp;&amp; wpcom.carousel.generateImgSrc ) {
					attrs.src = wpcom.carousel.generateImgSrc( item, max );
				} else {
					attrs.src = selectBestImageUrl( {
						origFile: attrs.src,
						origWidth: attrs.origWidth,
						origHeight: attrs.origHeight,
						maxWidth: max.width,
						maxHeight: max.height,
						largeFile: attrs.largeFile,
					} );
				}

				// Set the final src.
				item.setAttribute( &#039;data-gallery-src&#039;, attrs.src );

				if ( attrs.attachmentId !== &#039;0&#039; ) {
					attrs.title = util.texturize( attrs.title );
					attrs.desc = util.texturize( attrs.desc );
					attrs.caption = util.texturize( attrs.caption );

					// Initially, the image is a 1x1 transparent gif.
					// The preview is shown as a background image on the slide itself.
					var image = new Image();

					var slideEl = document.createElement( &#039;div&#039; );
					slideEl.classList.add( &#039;swiper-slide&#039; );
					slideEl.setAttribute( &#039;itemprop&#039;, &#039;associatedMedia&#039; );
					slideEl.setAttribute( &#039;itemscope&#039;, &#039;&#039; );
					slideEl.setAttribute( &#039;itemtype&#039;, &#039;https://schema.org/ImageObject&#039; );
					var zoomEl = document.createElement( &#039;div&#039; );
					zoomEl.classList.add( &#039;swiper-zoom-container&#039; );

					carousel.gallery.appendChild( slideEl );

					slideEl.appendChild( zoomEl );
					zoomEl.appendChild( image );
					slideEl.setAttribute( &#039;data-attachment-id&#039;, attrs.attachmentId );
					slideEl.setAttribute( &#039;data-permalink&#039;, attrs.permalink );
					slideEl.setAttribute( &#039;data-orig-file&#039;, attrs.origFile );

					// Reuse the thumbnail the browser has already decoded for this image
					// in the post. It costs nothing to display and gives the slide
					// something to show while the full-size image is downloading.
					attrs.previewImage = item.currentSrc || item.getAttribute( &#039;src&#039; ) || &#039;&#039;;

					var slide = { el: slideEl, attrs: attrs, index: i };
					carousel.slides.push( slide );
				}
			} );
		}

		function loadSwiper( gallery, options ) {
			if ( ! window.JetpackSwiper ) {
				var loader = document.querySelector( &#039;#jp-carousel-loading-overlay&#039; );
				domUtil.show( loader );
				var jsScript = document.createElement( &#039;script&#039; );
				jsScript.id = &#039;jetpack-carousel-swiper-js&#039;;
				jsScript.src = window.jetpackSwiperLibraryPath.url;
				jsScript.async = true;
				jsScript.onload = function () {
					domUtil.hide( loader );
					openCarousel( gallery, options );
				};
				jsScript.onerror = function () {
					domUtil.hide( loader );
				};
				document.head.appendChild( jsScript );
				return;
			}
			openCarousel( gallery, options );
		}

		function openCarousel( gallery, options ) {
			var settings = {
				imgSelector:
					&#039;.gallery-item [data-attachment-id], .tiled-gallery-item [data-attachment-id], img[data-attachment-id], img[data-id]&#039;,
				startIndex: 0,
			};

			var data = domUtil.getJSONAttribute( gallery, &#039;data-carousel-extra&#039; );
			var tapTimeout;

			if ( ! data ) {
				return; // don&#039;t run if the default gallery functions weren&#039;t used
			}

			const images = gallery.querySelectorAll( settings.imgSelector );
			if ( ! images.length ) {
				return; // don&#039;t run if we found no images in the gallery (somehow it has images that aren&#039;t in the media library?)
			}

			initializeCarousel();

			if ( carousel.isOpen ) {
				return; // don&#039;t open if already opened
			}
			carousel.isOpen = true;

			// make sure to stop the page from scrolling behind the carousel overlay, so we don&#039;t trigger
			// infiniscroll for it when enabled (Reader, theme infiniscroll, etc).
			originalOverflow = getComputedStyle( document.body ).overflow;
			document.body.style.overflow = &#039;hidden&#039;;
			// prevent html from overflowing on some of the new themes.
			originalHOverflow = getComputedStyle( document.documentElement ).overflow;
			document.documentElement.style.overflow = &#039;hidden&#039;;
			scrollPos = window.scrollY || window.pageYOffset || 0;

			carousel.container.setAttribute( &#039;data-carousel-extra&#039;, JSON.stringify( data ) );
			stat( [ &#039;open&#039;, &#039;view_image&#039; ] );

			// If options exist, lets merge them
			// with our default settings
			for ( var option in options || {} ) {
				settings[ option ] = options[ option ];
			}

			if ( settings.startIndex === -1 ) {
				settings.startIndex = 0; // -1 returned if can&#039;t find index, so start from beginning
			}

			domUtil.emitEvent( carousel.overlay, &#039;jp_carousel.beforeOpen&#039; );
			carousel.gallery.innerHTML = &#039;&#039;;

			// Need to set the overlay manually to block or swiper does&#039;t initialise properly.
			carousel.overlay.style.opacity = 1;
			carousel.overlay.style.display = &#039;block&#039;;

			initCarouselSlides( images, settings.startIndex );

			swiper = new window.JetpackSwiper( &#039;.jp-carousel-swiper-container&#039;, {
				centeredSlides: true,
				zoom: true,
				loop: carousel.slides.length &gt; 1,
				// Turn off interactions and hide navigation arrows if there is only one slide.
				enabled: carousel.slides.length &gt; 1,
				pagination: {
					el: &#039;.jp-swiper-pagination&#039;,
					clickable: true,
				},
				navigation: {
					nextEl: &#039;.jp-swiper-button-next&#039;,
					prevEl: &#039;.jp-swiper-button-prev&#039;,
				},
				initialSlide: settings.startIndex,
				on: {
					init: function () {
						selectSlideAtIndex( settings.startIndex );
					},
				},
				preventClicks: false,
				preventClicksPropagation: false,
				preventInteractionOnTransition: ! domUtil.isTouch(),
				threshold: 5,
			} );

			swiper.on( &#039;slideChange&#039;, function ( swiper ) {
				if ( ! carousel.isOpen ) {
					return;
				}
				selectSlideAtIndex( swiper.realIndex );
				carousel.overlay.classList.remove( &#039;jp-carousel-hide-controls&#039; );
			} );

			swiper.on( &#039;zoomChange&#039;, function ( swiper, scale ) {
				if ( scale &gt; 1 ) {
					carousel.overlay.classList.add( &#039;jp-carousel-hide-controls&#039; );
				}

				if ( scale === 1 ) {
					carousel.overlay.classList.remove( &#039;jp-carousel-hide-controls&#039; );
				}
			} );

			swiper.on( &#039;doubleTap&#039;, function ( swiper ) {
				clearTimeout( tapTimeout );
				if ( swiper.zoom.scale === 1 ) {
					var zoomTimeout = setTimeout( function () {
						carousel.overlay.classList.remove( &#039;jp-carousel-hide-controls&#039; );
						clearTimeout( zoomTimeout );
					}, 150 );
				}
			} );

			swiper.on( &#039;tap&#039;, function () {
				if ( swiper.zoom.scale &gt; 1 ) {
					tapTimeout = setTimeout( function () {
						carousel.overlay.classList.toggle( &#039;jp-carousel-hide-controls&#039; );
					}, 150 );
				}
			} );

			domUtil.fadeIn( carousel.overlay, function () {
				domUtil.emitEvent( carousel.overlay, &#039;jp_carousel.afterOpen&#039; );
			} );
		}

		// Register the event listeners for starting the gallery
		document.body.addEventListener( &#039;click&#039;, handleInteraction );
		document.body.addEventListener( &#039;keydown&#039;, handleInteraction );
		document.querySelectorAll( galleryItemSelector + &#039;img&#039; ).forEach( function ( galleryImage ) {
			if ( shouldOpenModal( galleryImage ) ) {
				makeGalleryImageAccessible( galleryImage );
			}
		} );

		function handleInteraction( e ) {
			if ( e.type === &#039;click&#039; ) {
				handleClick( e );
				return;
			}

			if ( e.type === &#039;keydown&#039; ) {
				const parentElement = document.activeElement.parentElement;
				const isParentCarouselContainer =
					parentElement &amp;&amp; parentElement.classList.contains( &#039;tiled-gallery__item&#039; );

				if ( ( e.key === &#039; &#039; || e.key === &#039;Enter&#039; ) &amp;&amp; isParentCarouselContainer ) {
					handleClick( e );
				}
			}
		}

		function normalizeUrl( url ) {
			return ( url || &#039;&#039; ).split( &#039;?&#039; )[ 0 ].replace( /\/$/, &#039;&#039; );
		}

		function shouldOpenModal( el ) {
			if ( el.tagName === &#039;A&#039; ) {
				el = el.querySelector( &#039;img&#039; ) || el;
			}

			var parent = el.parentElement;
			var grandparent = parent ? parent.parentElement : null;

			// If Gallery is made up of individual Image blocks check for custom link before
			// loading carousel. The custom link may be the parent or could be a descendant
			// of the parent if the image has rounded corners.
			var parentHref = null;
			if ( grandparent &amp;&amp; grandparent.classList.contains( &#039;wp-block-image&#039; ) ) {
				parentHref = parent.getAttribute( &#039;href&#039; );
			} else if (
				parent &amp;&amp;
				parent.classList.contains( &#039;wp-block-image&#039; ) &amp;&amp;
				parent.querySelector( &#039;:scope &gt; a&#039; )
			) {
				parentHref = parent.querySelector( &#039;:scope &gt; a&#039; ).getAttribute( &#039;href&#039; );
			}

			// If the link does not point to the attachment or media file then assume Image has
			// a custom link so don&#039;t load the carousel.
			if ( parentHref ) {
				var cleanHref = normalizeUrl( parentHref );
				var cleanOrig = normalizeUrl( el.getAttribute( &#039;data-orig-file&#039; ) );
				var cleanPerm = normalizeUrl( el.getAttribute( &#039;data-permalink&#039; ) );

				if ( cleanHref !== cleanOrig &amp;&amp; cleanHref !== cleanPerm ) {
					return false;
				}
			}

			// Do not open the modal if we are looking at a gallery caption from before WP5, which may contain a link.
			if ( parent &amp;&amp; parent.classList.contains( &#039;gallery-caption&#039; ) ) {
				return false;
			}

			// Do not open the modal if we are looking at a caption of a gallery block, which may contain a link.
			if ( domUtil.matches( parent, &#039;figcaption&#039; ) ) {
				return false;
			}

			return true;
		}

		function handleClick( e ) {
			var isCompatible =
				window.CSS &amp;&amp; window.CSS.supports &amp;&amp; window.CSS.supports( &#039;display&#039;, &#039;grid&#039; );

			// IE11 support is being dropped in August 2021. The new swiper.js libray is not IE11 compat
			// so just default to opening individual image attachment/media pages for IE.
			if ( ! isCompatible ) {
				return;
			}

			var target = e.target;
			var gallery = domUtil.closest( target, gallerySelector );

			if ( gallery ) {
				if ( ! testForData( gallery ) ) {
					return;
				}

				if ( ! shouldOpenModal( target ) ) {
					return;
				}

				// Set height to auto.
				// Fix some themes where closing carousel brings view back to top.
				document.documentElement.style.height = &#039;auto&#039;;

				e.preventDefault();

				// Stopping propagation in case there are parent elements
				// with .gallery or .tiled-gallery class
				e.stopPropagation();

				var item = domUtil.closest( target, itemSelector );
				var index = Array.prototype.indexOf.call( gallery.querySelectorAll( itemSelector ), item );
				loadSwiper( gallery, { startIndex: index } );
			}
		}

		// Handle lightbox (single image gallery) for images linking to &#039;Attachment Page&#039;.
		if ( Number( jetpackCarouselStrings.single_image_gallery ) === 1 ) {
			processSingleImageGallery();
			document.body.addEventListener( &#039;is.post-load&#039;, function () {
				processSingleImageGallery();
			} );
		}

		// Makes carousel work on page load and when back button leads to same URL with carousel hash
		// (i.e. no actual document.ready trigger).
		window.addEventListener( &#039;hashchange&#039;, function () {
			var hashRegExp = /jp-carousel-(\d+)/;

			if ( ! window.location.hash || ! hashRegExp.test( window.location.hash ) ) {
				if ( carousel.isOpen ) {
					closeCarousel();
				}

				return;
			}

			if ( window.location.hash === lastKnownLocationHash &amp;&amp; carousel.isOpen ) {
				return;
			}

			if ( window.location.hash &amp;&amp; carousel.gallery &amp;&amp; ! carousel.isOpen &amp;&amp; history.back ) {
				history.back();
				return;
			}

			lastKnownLocationHash = window.location.hash;
			var matchList = window.location.hash.match( hashRegExp );
			var attachmentId = parseInt( matchList[ 1 ], 10 );
			var galleries = document.querySelectorAll( gallerySelector );

			// Find the first thumbnail that matches the attachment ID in the location
			// hash, then open the gallery that contains it.
			for ( var i = 0; i &lt; galleries.length; i++ ) {
				var gallery = galleries[ i ];
				var selected;

				var images = gallery.querySelectorAll( &#039;img&#039; );
				for ( var j = 0; j &lt; images.length; j++ ) {
					if (
						parseInt( images[ j ].getAttribute( &#039;data-attachment-id&#039; ), 10 ) === attachmentId ||
						parseInt( images[ j ].getAttribute( &#039;data-id&#039; ), 10 ) === attachmentId
					) {
						selected = j;
						break;
					}
				}

				if ( selected !== undefined ) {
					openOrSelectSlide( gallery, selected );
					break;
				}
			}
		} );

		if ( window.location.hash ) {
			domUtil.emitEvent( window, &#039;hashchange&#039; );
		}
	}

	if ( document.readyState !== &#039;loading&#039; ) {
		init();
	} else {
		document.addEventListener( &#039;DOMContentLoaded&#039;, init );
	}
} )();
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fwww%2Fyogitonics.com%2Fwp-content%2Fplugins%2Fjetpack%2Fmodules%2Fcarousel'>⬅ Back to Directory</a>