diff --git a/projects/plugins/jetpack/changelog/fix-slideshow-shortcode-jquery-remove b/projects/plugins/jetpack/changelog/fix-slideshow-shortcode-jquery-remove new file mode 100644 index 0000000000000..ad7c1caaf791c --- /dev/null +++ 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 index 753f587490075..c21c9751b8887 100644 --- 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 index be2a9f94b5152..05cf298b1eccb 100644 --- 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 index f9e32b49b5724..e89841313592a 100644 --- 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",