Slideshow shortcode: Clean up jQuery usage and remove deprecated JS (#…

…39050)
Automattic · Aug 28, 2024 · de2fc0e · de2fc0e
1 parent 62a9b13
commit de2fc0e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 38 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-slideshow-shortcode-jquery-remove b/projects/plugins/jetpack/changelog/fix-slideshow-shortcode-jquery-remove
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Slideshow shortcode: Remove deprecated JS functionality and remove majority of jQuery.
diff --git a/projects/plugins/jetpack/modules/shortcodes/css/slideshow-shortcode.css b/projects/plugins/jetpack/modules/shortcodes/css/slideshow-shortcode.css
@@ -62,6 +62,7 @@ body div.jetpack-slideshow-window * img {
 
 .jetpack-slideshow-slide img {
 	vertical-align: middle;
+	margin: 0 auto;
 }
 
 .jetpack-slideshow-line-height-hack {

diff --git a/projects/plugins/jetpack/modules/shortcodes/js/slideshow-shortcode.js b/projects/plugins/jetpack/modules/shortcodes/js/slideshow-shortcode.js
@@ -1,4 +1,4 @@
-/* global jetpackSlideshowSettings, escape */
+/* global jetpackSlideshowSettings */
 
 function JetpackSlideshow( element, transition, autostart ) {
 	this.element = element;
@@ -34,7 +34,6 @@ JetpackSlideshow.prototype.init = function () {
 		img.src = imageInfo.src;
 		img.title = typeof imageInfo.title !== 'undefined' ? imageInfo.title : '';
 		img.alt = typeof imageInfo.alt !== 'undefined' ? imageInfo.alt : '';
-		img.align = 'middle';
 		img.setAttribute( 'itemprop', 'image' );
 		img.nopin = 'nopin';
 		var caption = document.createElement( 'div' );
@@ -55,7 +54,7 @@ JetpackSlideshow.prototype.init = function () {
 					self.finishInit_();
 				}, 1 );
 			} else {
-				jQuery( img ).load( function () {
+				img.addEventListener( 'load', function () {
 					self.finishInit_();
 				} );
 			}
@@ -91,7 +90,7 @@ JetpackSlideshow.prototype.finishInit_ = function () {
 	var self = this;
 	if ( this.images.length > 1 ) {
 		// Initialize Cycle instance.
-		this.element.cycle( {
+		jQuery( this.element ).cycle( {
 			fx: this.transition,
 			prev: this.controls.prev,
 			next: this.controls.next,
@@ -105,23 +104,27 @@ JetpackSlideshow.prototype.finishInit_ = function () {
 		var slideshow = this.element;
 
 		if ( ! this.autostart ) {
-			slideshow.cycle( 'pause' );
-			jQuery( this.controls.stop ).removeClass( 'running' );
-			jQuery( this.controls.stop ).addClass( 'paused' );
+			jQuery( slideshow ).cycle( 'pause' );
+			this.controls.stop.classList.remove( 'running' );
+			this.controls.stop.classList.add( 'paused' );
 		}
 
-		jQuery( this.controls.stop ).click( function () {
-			var button = jQuery( this );
-			if ( ! button.hasClass( 'paused' ) ) {
-				slideshow.cycle( 'pause' );
-				button.removeClass( 'running' );
-				button.addClass( 'paused' );
-			} else {
-				button.addClass( 'running' );
-				button.removeClass( 'paused' );
-				slideshow.cycle( 'resume', true );
+		this.controls.stop.addEventListener( 'click', function ( event ) {
+			var button = event.currentTarget;
+
+			if ( button === event.target ) {
+				event.preventDefault();
+
+				if ( ! button.classList.contains( 'paused' ) ) {
+					jQuery( slideshow ).cycle( 'pause' );
+					button.classList.remove( 'running' );
+					button.classList.add( 'paused' );
+				} else {
+					button.classList.add( 'running' );
+					button.classList.remove( 'paused' );
+					jQuery( slideshow ).cycle( 'resume', true );
+				}
 			}
-			return false;
 		} );
 	} else {
 		this.element.children( ':first' ).show();
@@ -167,7 +170,7 @@ JetpackSlideshow.prototype.onCyclePrevNextClick_ = function ( isNext, i /*, slid
 	stats.src =
 		document.location.protocol +
 		'//pixel.wp.com/g.gif?host=' +
-		escape( document.location.host ) +
+		encodeURIComponent( document.location.host ) +
 		'&rand=' +
 		Math.random() +
 		'&blog=' +
@@ -179,32 +182,32 @@ JetpackSlideshow.prototype.onCyclePrevNextClick_ = function ( isNext, i /*, slid
 		'&post=' +
 		postid +
 		'&ref=' +
-		escape( document.location );
+		encodeURIComponent( document.location );
 };
 
-( function ( $ ) {
+( function () {
 	function jetpack_slideshow_init() {
-		$( '.jetpack-slideshow-noscript' ).remove();
-
-		$( '.jetpack-slideshow' ).each( function () {
-			var container = $( this );
-
-			if ( container.data( 'processed' ) ) {
+		document.querySelectorAll( '.jetpack-slideshow-noscript' ).forEach( function ( element ) {
+			element.remove();
+		} );
+		document.querySelectorAll( '.jetpack-slideshow' ).forEach( function ( container ) {
+			if ( container.dataset.processed === 'true' ) {
 				return;
 			}
 
-			var slideshow = new JetpackSlideshow(
-				container,
-				container.data( 'trans' ),
-				container.data( 'autostart' )
-			);
-			slideshow.images = container.data( 'gallery' );
+			// Extract data attributes manually
+			var transition = container.dataset.trans;
+			var autostart = container.dataset.autostart === 'true';
+			var gallery = JSON.parse( container.dataset.gallery || '[]' );
+
+			var slideshow = new JetpackSlideshow( container, transition, autostart );
+			slideshow.images = gallery;
 			slideshow.init();
 
-			container.data( 'processed', true );
+			container.dataset.processed = 'true';
 		} );
 	}
 
-	$( document ).ready( jetpack_slideshow_init );
-	$( 'body' ).on( 'post-load', jetpack_slideshow_init );
-} )( jQuery );
+	document.addEventListener( 'DOMContentLoaded', jetpack_slideshow_init );
+	document.body.addEventListener( 'post-load', jetpack_slideshow_init );
+} )();
diff --git a/tools/eslint-excludelist.json b/tools/eslint-excludelist.json
@@ -67,7 +67,6 @@
 	"projects/plugins/jetpack/modules/infinite-scroll/infinity.js",
 	"projects/plugins/jetpack/modules/plugin-search/plugin-search.js",
 	"projects/plugins/jetpack/modules/scan/admin-bar-notice.js",
-	"projects/plugins/jetpack/modules/shortcodes/js/slideshow-shortcode.js",
 	"projects/plugins/jetpack/modules/videopress/js/gutenberg-video-upload.js",
 	"projects/plugins/jetpack/modules/videopress/js/videopress-plupload.js",
 	"projects/plugins/jetpack/modules/widgets/customizer-utils.js",