← All changes | modules/shortcodes/js/slideshow-shortcode.js +45 -41 13.7.2 → 16.3-a.1 View file →

		@@ -1,5 +1,5 @@
1		-/* global jetpackSlideshowSettings, escape */
	1	+/* global jetpackSlideshowSettings */
2	2
3	3	function JetpackSlideshow( element, transition, autostart ) {
4	4	this.element = element;
5	5	this.images = [];
		@@ -33,9 +33,8 @@
33	33	var img = document.createElement( 'img' );
34	34	img.src = imageInfo.src;
35	35	img.title = typeof imageInfo.title !== 'undefined' ? imageInfo.title : '';
36	36	img.alt = typeof imageInfo.alt !== 'undefined' ? imageInfo.alt : '';
37		- img.align = 'middle';
38	37	img.setAttribute( 'itemprop', 'image' );
39	38	img.nopin = 'nopin';
40	39	var caption = document.createElement( 'div' );
41	40	caption.className = 'jetpack-slideshow-slide-caption';
		@@ -54,9 +53,9 @@
54	53	setTimeout( function () {
55	54	self.finishInit_();
56	55	}, 1 );
57	56	} else {
58		- jQuery( img ).load( function () {
	57	+ img.addEventListener( 'load', function () {
59	58	self.finishInit_();
60	59	} );
61	60	}
62	61	}
		@@ -85,14 +84,15 @@
85	84	};
86	85
87	86	JetpackSlideshow.prototype.finishInit_ = function () {
88	87	this.showLoadingImage( false );
89		- this.renderControls_();
90	88
91	89	var self = this;
92	90	if ( this.images.length > 1 ) {
	91	+ this.renderControls_();
	92	+
93	93	// Initialize Cycle instance.
94		- this.element.cycle( {
	94	+ jQuery( this.element ).cycle( {
95	95	fx: this.transition,
96	96	prev: this.controls.prev,
97	97	next: this.controls.next,
98	98	timeout: jetpackSlideshowSettings.speed,
		@@ -104,29 +104,33 @@
104	104
105	105	var slideshow = this.element;
106	106
107	107	if ( ! this.autostart ) {
108		- slideshow.cycle( 'pause' );
109		- jQuery( this.controls.stop ).removeClass( 'running' );
110		- jQuery( this.controls.stop ).addClass( 'paused' );
	108	+ jQuery( slideshow ).cycle( 'pause' );
	109	+ this.controls.stop.classList.remove( 'running' );
	110	+ this.controls.stop.classList.add( 'paused' );
111	111	}
112	112
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 );
	113	+ this.controls.stop.addEventListener( 'click', function ( event ) {
	114	+ var button = event.currentTarget;
	115	+
	116	+ if ( button === event.target ) {
	117	+ event.preventDefault();
	118	+
	119	+ if ( ! button.classList.contains( 'paused' ) ) {
	120	+ jQuery( slideshow ).cycle( 'pause' );
	121	+ button.classList.remove( 'running' );
	122	+ button.classList.add( 'paused' );
	123	+ } else {
	124	+ button.classList.add( 'running' );
	125	+ button.classList.remove( 'paused' );
	126	+ jQuery( slideshow ).cycle( 'resume', true );
	127	+ }
123	128	}
124		- return false;
125	129	} );
126		- } else {
127		- this.element.children( ':first' ).show();
128		- this.element.css( 'position', 'relative' );
	130	+ } else if ( this.element.children.length ) {
	131	+ this.element.children[ 0 ].style.display = 'block';
	132	+ this.element.style.position = 'relative';
129	133	}
130	134	this.initialized_ = true;
131	135	};
132	136
		@@ -166,9 +170,9 @@
166	170	var stats = new Image();
167	171	stats.src =
168	172	document.location.protocol +
169	173	'//pixel.wp.com/g.gif?host=' +
170		- escape( document.location.host ) +
	174	+ encodeURIComponent( document.location.host ) +
171	175	'&rand=' +
172	176	Math.random() +
173	177	'&blog=' +
174	178	jetpackSlideshowSettings.blog_id +
		@@ -178,33 +182,33 @@
178	182	jetpackSlideshowSettings.user_id +
179	183	'&post=' +
180	184	postid +
181	185	'&ref=' +
182		- escape( document.location );
	186	+ encodeURIComponent( document.location );
183	187	};
184	188
185		-( function ( $ ) {
	189	+( function () {
186	190	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' ) ) {
	191	+ document.querySelectorAll( '.jetpack-slideshow-noscript' ).forEach( function ( element ) {
	192	+ element.remove();
	193	+ } );
	194	+ document.querySelectorAll( '.jetpack-slideshow' ).forEach( function ( container ) {
	195	+ if ( container.dataset.processed === 'true' ) {
193	196	return;
194	197	}
195	198
196		- var slideshow = new JetpackSlideshow(
197		- container,
198		- container.data( 'trans' ),
199		- container.data( 'autostart' )
200		- );
201		- slideshow.images = container.data( 'gallery' );
	199	+ // Extract data attributes manually
	200	+ var transition = container.dataset.trans;
	201	+ var autostart = container.dataset.autostart === 'true';
	202	+ var gallery = JSON.parse( container.dataset.gallery || '[]' );
	203	+
	204	+ var slideshow = new JetpackSlideshow( container, transition, autostart );
	205	+ slideshow.images = gallery;
202	206	slideshow.init();
203	207
204		- container.data( 'processed', true );
	208	+ container.dataset.processed = 'true';
205	209	} );
206	210	}
207	211
208		- $( document ).ready( jetpack_slideshow_init );
209		- $( 'body' ).on( 'post-load', jetpack_slideshow_init );
210		-} )( jQuery );
	212	+ document.addEventListener( 'DOMContentLoaded', jetpack_slideshow_init );
	213	+ document.body.addEventListener( 'post-load', jetpack_slideshow_init );
	214	+} )();