← All changes | modules/shortcodes/js/slideshow-shortcode.js +77 -42 12.5.2 → 16.3 View file →

		@@ -1,6 +1,37 @@
1		-/* global jetpackSlideshowSettings, escape */
	1	+/* global jetpackSlideshowSettings */
2	2
	3	+/**
	4	+ * Turn a gallery caption into the plain text it is meant to be.
	5	+ *
	6	+ * A caption is meant to read as text, but wptexturize() leaves HTML entities behind, so it needs
	7	+ * decoding before it can be set as one.
	8	+ *
	9	+ * @param {*} caption - Caption value from the gallery data.
	10	+ * @return {string} The decoded caption, as text.
	11	+ */
	12	+function jetpackSlideshowCaptionText( caption ) {
	13	+ if ( typeof caption !== 'string' || '' === caption ) {
	14	+ return '';
	15	+ }
	16	+
	17	+ var parsed = new DOMParser().parseFromString( caption, 'text/html' );
	18	+
	19	+ // These land in the body when they appear mid-caption, and their source is not caption text.
	20	+ parsed.body
	21	+ .querySelectorAll( 'script, style, noscript, template' )
	22	+ .forEach( function ( element ) {
	23	+ element.remove();
	24	+ } );
	25	+
	26	+ // Without a space in its place, a caption broken over two lines reads as "Ada LovelaceLondon".
	27	+ parsed.body.querySelectorAll( 'br' ).forEach( function ( element ) {
	28	+ element.replaceWith( ' ' );
	29	+ } );
	30	+
	31	+ return parsed.body.textContent;
	32	+}
	33	+
3	34	function JetpackSlideshow( element, transition, autostart ) {
4	35	this.element = element;
5	36	this.images = [];
6	37	this.controls = {};
		@@ -33,15 +64,14 @@
33	64	var img = document.createElement( 'img' );
34	65	img.src = imageInfo.src;
35	66	img.title = typeof imageInfo.title !== 'undefined' ? imageInfo.title : '';
36	67	img.alt = typeof imageInfo.alt !== 'undefined' ? imageInfo.alt : '';
37		- img.align = 'middle';
38	68	img.setAttribute( 'itemprop', 'image' );
39	69	img.nopin = 'nopin';
40	70	var caption = document.createElement( 'div' );
41	71	caption.className = 'jetpack-slideshow-slide-caption';
42	72	caption.setAttribute( 'itemprop', 'caption description' );
43		- caption.innerHTML = imageInfo.caption;
	73	+ caption.textContent = jetpackSlideshowCaptionText( imageInfo.caption );
44	74	var container = document.createElement( 'div' );
45	75	container.className = 'jetpack-slideshow-slide';
46	76	container.setAttribute( 'itemprop', 'associatedMedia' );
47	77	container.setAttribute( 'itemscope', '' );
		@@ -54,9 +84,9 @@
54	84	setTimeout( function () {
55	85	self.finishInit_();
56	86	}, 1 );
57	87	} else {
58		- jQuery( img ).load( function () {
	88	+ img.addEventListener( 'load', function () {
59	89	self.finishInit_();
60	90	} );
61	91	}
62	92	}
		@@ -85,14 +115,15 @@
85	115	};
86	116
87	117	JetpackSlideshow.prototype.finishInit_ = function () {
88	118	this.showLoadingImage( false );
89		- this.renderControls_();
90	119
91	120	var self = this;
92	121	if ( this.images.length > 1 ) {
	122	+ this.renderControls_();
	123	+
93	124	// Initialize Cycle instance.
94		- this.element.cycle( {
	125	+ jQuery( this.element ).cycle( {
95	126	fx: this.transition,
96	127	prev: this.controls.prev,
97	128	next: this.controls.next,
98	129	timeout: jetpackSlideshowSettings.speed,
		@@ -104,29 +135,33 @@
104	135
105	136	var slideshow = this.element;
106	137
107	138	if ( ! this.autostart ) {
108		- slideshow.cycle( 'pause' );
109		- jQuery( this.controls.stop ).removeClass( 'running' );
110		- jQuery( this.controls.stop ).addClass( 'paused' );
	139	+ jQuery( slideshow ).cycle( 'pause' );
	140	+ this.controls.stop.classList.remove( 'running' );
	141	+ this.controls.stop.classList.add( 'paused' );
111	142	}
112	143
113		- jQuery( this.controls.stop ).click( function () {
114		- var button = jQuery( this );
115		- if ( ! button.hasClass( 'paused' ) ) {
116		- slideshow.cycle( 'pause' );
117		- button.removeClass( 'running' );
118		- button.addClass( 'paused' );
119		- } else {
120		- button.addClass( 'running' );
121		- button.removeClass( 'paused' );
122		- slideshow.cycle( 'resume', true );
	144	+ this.controls.stop.addEventListener( 'click', function ( event ) {
	145	+ var button = event.currentTarget;
	146	+
	147	+ if ( button === event.target ) {
	148	+ event.preventDefault();
	149	+
	150	+ if ( ! button.classList.contains( 'paused' ) ) {
	151	+ jQuery( slideshow ).cycle( 'pause' );
	152	+ button.classList.remove( 'running' );
	153	+ button.classList.add( 'paused' );
	154	+ } else {
	155	+ button.classList.add( 'running' );
	156	+ button.classList.remove( 'paused' );
	157	+ jQuery( slideshow ).cycle( 'resume', true );
	158	+ }
123	159	}
124		- return false;
125	160	} );
126		- } else {
127		- this.element.children( ':first' ).show();
128		- this.element.css( 'position', 'relative' );
	161	+ } else if ( this.element.children.length ) {
	162	+ this.element.children[ 0 ].style.display = 'block';
	163	+ this.element.style.position = 'relative';
129	164	}
130	165	this.initialized_ = true;
131	166	};
132	167
		@@ -166,9 +201,9 @@
166	201	var stats = new Image();
167	202	stats.src =
168	203	document.location.protocol +
169	204	'//pixel.wp.com/g.gif?host=' +
170		- escape( document.location.host ) +
	205	+ encodeURIComponent( document.location.host ) +
171	206	'&rand=' +
172	207	Math.random() +
173	208	'&blog=' +
174	209	jetpackSlideshowSettings.blog_id +
		@@ -178,33 +213,33 @@
178	213	jetpackSlideshowSettings.user_id +
179	214	'&post=' +
180	215	postid +
181	216	'&ref=' +
182		- escape( document.location );
	217	+ encodeURIComponent( document.location );
183	218	};
184	219
185		-( function ( $ ) {
	220	+( function () {
186	221	function jetpack_slideshow_init() {
187		- $( '.jetpack-slideshow-noscript' ).remove();
188		-
189		- $( '.jetpack-slideshow' ).each( function () {
190		- var container = $( this );
191		-
192		- if ( container.data( 'processed' ) ) {
	222	+ document.querySelectorAll( '.jetpack-slideshow-noscript' ).forEach( function ( element ) {
	223	+ element.remove();
	224	+ } );
	225	+ document.querySelectorAll( '.jetpack-slideshow' ).forEach( function ( container ) {
	226	+ if ( container.dataset.processed === 'true' ) {
193	227	return;
194	228	}
195	229
196		- var slideshow = new JetpackSlideshow(
197		- container,
198		- container.data( 'trans' ),
199		- container.data( 'autostart' )
200		- );
201		- slideshow.images = container.data( 'gallery' );
	230	+ // Extract data attributes manually
	231	+ var transition = container.dataset.trans;
	232	+ var autostart = container.dataset.autostart === 'true';
	233	+ var gallery = JSON.parse( container.dataset.gallery || '[]' );
	234	+
	235	+ var slideshow = new JetpackSlideshow( container, transition, autostart );
	236	+ slideshow.images = gallery;
202	237	slideshow.init();
203	238
204		- container.data( 'processed', true );
	239	+ container.dataset.processed = 'true';
205	240	} );
206	241	}
207	242
208		- $( document ).ready( jetpack_slideshow_init );
209		- $( 'body' ).on( 'post-load', jetpack_slideshow_init );
210		-} )( jQuery );
	243	+ document.addEventListener( 'DOMContentLoaded', jetpack_slideshow_init );
	244	+ document.body.addEventListener( 'post-load', jetpack_slideshow_init );
	245	+} )();