Jetpack – WP Security, Backup, Speed, & Growth / 16.2

Jetpack – WP Security, Backup, Speed, & Growth v16.2

jetpack / modules / shortcodes / js / slideshow-shortcode.js

slideshow-shortcode.js in Jetpack – WP Security, Backup, Speed, & Growth 16.2, at modules/shortcodes/js/slideshow-shortcode.js

215 lines 6.5 KB

Raw Download Zip

1	/* global jetpackSlideshowSettings */
2
3	function JetpackSlideshow( element, transition, autostart ) {
4	this.element = element;
5	this.images = [];
6	this.controls = {};
7	this.transition = transition \|\| 'fade';
8	this.autostart = autostart;
9	}
10
11	JetpackSlideshow.prototype.showLoadingImage = function ( toggle ) {
12	if ( toggle ) {
13	this.loadingImage_ = document.createElement( 'div' );
14	this.loadingImage_.className = 'jetpack-slideshow-loading';
15	var img = document.createElement( 'img' );
16	img.src = jetpackSlideshowSettings.spinner;
17	this.loadingImage_.appendChild( img );
18	this.loadingImage_.appendChild( this.makeZeroWidthSpan() );
19	this.element.append( this.loadingImage_ );
20	} else if ( this.loadingImage_ ) {
21	this.loadingImage_.parentNode.removeChild( this.loadingImage_ );
22	this.loadingImage_ = null;
23	}
24	};
25
26	JetpackSlideshow.prototype.init = function () {
27	this.showLoadingImage( true );
28
29	var self = this;
30	// Set up DOM.
31	for ( var i = 0; i < this.images.length; i++ ) {
32	var imageInfo = this.images[ i ];
33	var img = document.createElement( 'img' );
34	img.src = imageInfo.src;
35	img.title = typeof imageInfo.title !== 'undefined' ? imageInfo.title : '';
36	img.alt = typeof imageInfo.alt !== 'undefined' ? imageInfo.alt : '';
37	img.setAttribute( 'itemprop', 'image' );
38	img.nopin = 'nopin';
39	var caption = document.createElement( 'div' );
40	caption.className = 'jetpack-slideshow-slide-caption';
41	caption.setAttribute( 'itemprop', 'caption description' );
42	caption.innerHTML = imageInfo.caption;
43	var container = document.createElement( 'div' );
44	container.className = 'jetpack-slideshow-slide';
45	container.setAttribute( 'itemprop', 'associatedMedia' );
46	container.setAttribute( 'itemscope', '' );
47	container.setAttribute( 'itemtype', 'https://schema.org/ImageObject' );
48
49	// Hide loading image once first image has loaded.
50	if ( i === 0 ) {
51	if ( img.complete ) {
52	// IE, image in cache
53	setTimeout( function () {
54	self.finishInit_();
55	}, 1 );
56	} else {
57	img.addEventListener( 'load', function () {
58	self.finishInit_();
59	} );
60	}
61	}
62	container.appendChild( img );
63	// I'm not sure where these were coming from, but IE adds
64	// bad values for width/height for portrait-mode images
65	img.removeAttribute( 'width' );
66	img.removeAttribute( 'height' );
67	container.appendChild( this.makeZeroWidthSpan() );
68	container.appendChild( caption );
69	this.element.append( container );
70	}
71	};
72
73	JetpackSlideshow.prototype.makeZeroWidthSpan = function () {
74	var emptySpan = document.createElement( 'span' );
75	emptySpan.className = 'jetpack-slideshow-line-height-hack';
76	// Having a NBSP makes IE act weird during transitions, but other
77	// browsers ignore a text node with a space in it as whitespace.
78	if ( -1 !== window.navigator.userAgent.indexOf( 'MSIE ' ) ) {
79	emptySpan.appendChild( document.createTextNode( ' ' ) );
80	} else {
81	emptySpan.innerHTML = ' ';
82	}
83	return emptySpan;
84	};
85
86	JetpackSlideshow.prototype.finishInit_ = function () {
87	this.showLoadingImage( false );
88
89	var self = this;
90	if ( this.images.length > 1 ) {
91	this.renderControls_();
92
93	// Initialize Cycle instance.
94	jQuery( this.element ).cycle( {
95	fx: this.transition,
96	prev: this.controls.prev,
97	next: this.controls.next,
98	timeout: jetpackSlideshowSettings.speed,
99	slideExpr: '.jetpack-slideshow-slide',
100	onPrevNextEvent: function () {
101	return self.onCyclePrevNextClick_.apply( self, arguments );
102	},
103	} );
104
105	var slideshow = this.element;
106
107	if ( ! this.autostart ) {
108	jQuery( slideshow ).cycle( 'pause' );
109	this.controls.stop.classList.remove( 'running' );
110	this.controls.stop.classList.add( 'paused' );
111	}
112
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	}
128	}
129	} );
130	} else if ( this.element.children.length ) {
131	this.element.children[ 0 ].style.display = 'block';
132	this.element.style.position = 'relative';
133	}
134	this.initialized_ = true;
135	};
136
137	JetpackSlideshow.prototype.renderControls_ = function () {
138	if ( this.controlsDiv_ ) {
139	return;
140	}
141
142	var controlsDiv = document.createElement( 'div' );
143	controlsDiv.className = 'jetpack-slideshow-controls';
144
145	var controls = [ 'prev', 'stop', 'next' ];
146	for ( var i = 0; i < controls.length; i++ ) {
147	var controlName = controls[ i ];
148	var label_name = 'label_' + controlName;
149	var a = document.createElement( 'a' );
150
151	a.href = '#';
152	a.className = 'button-' + controlName;
153	a.setAttribute( 'aria-label', jetpackSlideshowSettings[ label_name ] );
154	a.setAttribute( 'role', 'button' );
155
156	controlsDiv.appendChild( a );
157	this.controls[ controlName ] = a;
158	}
159	this.element.append( controlsDiv );
160	this.controlsDiv_ = controlsDiv;
161	};
162
163	JetpackSlideshow.prototype.onCyclePrevNextClick_ = function ( isNext, i /, slideElement/ ) {
164	// If blog_id not present don't track page views
165	if ( ! jetpackSlideshowSettings.blog_id ) {
166	return;
167	}
168
169	var postid = this.images[ i ].id;
170	var stats = new Image();
171	stats.src =
172	document.location.protocol +
173	'//pixel.wp.com/g.gif?host=' +
174	encodeURIComponent( document.location.host ) +
175	'&rand=' +
176	Math.random() +
177	'&blog=' +
178	jetpackSlideshowSettings.blog_id +
179	'&subd=' +
180	jetpackSlideshowSettings.blog_subdomain +
181	'&user_id=' +
182	jetpackSlideshowSettings.user_id +
183	'&post=' +
184	postid +
185	'&ref=' +
186	encodeURIComponent( document.location );
187	};
188
189	( function () {
190	function jetpack_slideshow_init() {
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' ) {
196	return;
197	}
198
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;
206	slideshow.init();
207
208	container.dataset.processed = 'true';
209	} );
210	}
211
212	document.addEventListener( 'DOMContentLoaded', jetpack_slideshow_init );
213	document.body.addEventListener( 'post-load', jetpack_slideshow_init );
214	} )();
215