https://www.themes.redradar.net/adirondack/wp-content/plugins/jetp…/shortcodes/js/slideshow-shortcode.js

1/* jshint onevar:false, loopfunc:true */
2/* global jetpackSlideshowSettings, escape */
3
4function JetpackSlideshow( element, transition, autostart ) {
5	this.element = element;
6	this.images = [];
7	this.controls = {};
8	this.transition = transition || 'fade';
9	this.autostart = autostart;
10}
11
12JetpackSlideshow.prototype.showLoadingImage = function( toggle ) {
13	if ( toggle ) {
14		this.loadingImage_ = document.createElement( 'div' );
15		this.loadingImage_.className = 'slideshow-loading';
16		var img = document.createElement( 'img' );
17		img.src = jetpackSlideshowSettings.spinner;
18		this.loadingImage_.appendChild( img );
19		this.loadingImage_.appendChild( this.makeZeroWidthSpan() );
20		this.element.append( this.loadingImage_ );
21	} else if ( this.loadingImage_ ) {
22		this.loadingImage_.parentNode.removeChild( this.loadingImage_ );
23		this.loadingImage_ = null;
24	}
25};
26
27JetpackSlideshow.prototype.init = function() {
28	this.showLoadingImage(true);
29
30	var self = this;
31	// Set up DOM.
32	for ( var i = 0; i < this.images.length; i++ ) {
33		var imageInfo = this.images[i];
34		var img = document.createElement( 'img' );
35		img.src = imageInfo.src;
36		img.title = typeof( imageInfo.title ) !== 'undefined' ? imageInfo.title : '';
37		img.alt = typeof( imageInfo.alt ) !== 'undefined' ? imageInfo.alt : '';
38		img.align = 'middle';
39		img.nopin = 'nopin';
40		var caption = document.createElement( 'div' );
41		caption.className = 'slideshow-slide-caption';
42		caption.innerHTML = imageInfo.caption;
43		var container = document.createElement('div');
44		container.className = 'slideshow-slide';
45
46		// Hide loading image once first image has loaded.
47		if ( i === 0 ) {
48			if ( img.complete ) {
49				// IE, image in cache
50				setTimeout( function() {
51					self.finishInit_();
52				}, 1);
53			} else {
54				jQuery( img ).load(function() {
55					self.finishInit_();
56				});
57			}
58		}
59		container.appendChild( img );
60		// I'm not sure where these were coming from, but IE adds
61		// bad values for width/height for portrait-mode images
62		img.removeAttribute('width');
63		img.removeAttribute('height');
64		container.appendChild( this.makeZeroWidthSpan() );
65		container.appendChild( caption );
66		this.element.append( container );
67	}
68};
69
70JetpackSlideshow.prototype.makeZeroWidthSpan = function() {
71	var emptySpan = document.createElement( 'span' );
72	emptySpan.className = 'slideshow-line-height-hack';
73	// Having a NBSP makes IE act weird during transitions, but other
74	// browsers ignore a text node with a space in it as whitespace.
75	if (jQuery.browser.msie) {
76		emptySpan.appendChild( document.createTextNode(' ') );
77	} else {
78		emptySpan.innerHTML = '&nbsp;';
79	}
80	return emptySpan;
81};
82
83JetpackSlideshow.prototype.finishInit_ = function() {
84	this.showLoadingImage( false );
85	this.renderControls_();
86
87	var self = this;
88	if ( this.images.length > 1 ) {
89		// Initialize Cycle instance.
90		this.element.cycle( {
91			fx: this.transition,
92			prev: this.controls.prev,
93			next: this.controls.next,
94			slideExpr: '.slideshow-slide',
95			onPrevNextEvent: function() {
96				return self.onCyclePrevNextClick_.apply( self, arguments );
97			}
98		} );
99
100		var slideshow = this.element;
101
102		if ( ! this.autostart ) {
103			slideshow.cycle( 'pause' );
104			jQuery(this.controls.stop).removeClass( 'running' );
105			jQuery(this.controls.stop).addClass( 'paused' );
106		}
107
108		jQuery( this.controls.stop ).click( function() {
109			var button = jQuery(this);
110			if ( ! button.hasClass( 'paused' ) ) {
111				slideshow.cycle( 'pause' );
112				button.removeClass( 'running' );
113				button.addClass( 'paused' );
114			} else {
115				button.addClass( 'running' );
116				button.removeClass( 'paused' );
117				slideshow.cycle( 'resume', true );
118			}
119			return false;
120		} );
121	} else {
122		this.element.children( ':first' ).show();
123		this.element.css( 'position', 'relative' );
124	}
125	this.initialized_ = true;
126};
127
128JetpackSlideshow.prototype.renderControls_ = function() {
129	if ( this.controlsDiv_ ) {
130		return;
131	}
132
133	var controlsDiv = document.createElement( 'div' );
134	controlsDiv.className = 'slideshow-controls';
135
136	var controls = [ 'prev', 'stop', 'next' ];
137	for ( var i = 0; i < controls.length; i++ ) {
138		var controlName = controls[i];
139		var a = document.createElement( 'a' );
140		a.href = '#';
141		controlsDiv.appendChild( a );
142		this.controls[controlName] = a;
143	}
144	this.element.append( controlsDiv );
145	this.controlsDiv_ = controlsDiv;
146};
147
148JetpackSlideshow.prototype.onCyclePrevNextClick_ = function( isNext, i/*, slideElement*/ ) {
149	// If blog_id not present don't track page views
150	if ( ! jetpackSlideshowSettings.blog_id ) {
151		return;
152	}
153
154	var postid = this.images[i].id;
155	var stats = new Image();
156	stats.src = document.location.protocol +
157		'https://pixel.wp.com/g.gif?host=' +
158		escape( document.location.host ) +
159		'&rand=' + Math.random() +
160		'&blog=' + jetpackSlideshowSettings.blog_id +
161		'&subd=' + jetpackSlideshowSettings.blog_subdomain +
162		'&user_id=' + jetpackSlideshowSettings.user_id +
163		'&post=' + postid +
164		'&ref=' + escape( document.location );
165};
166
167( function ( $ ) {

168	function jetpack_slideshow_init() {
169		$( '.jetpack-slideshow-noscript' ).remove();
170
171		$( '.jetpack-slideshow' ).each( function () {
172			var container = $( this );
173
174			if ( container.data( 'processed' ) ) {
175				return;
176			}
177
178			var slideshow = new JetpackSlideshow( container, container.data( 'trans' ), container.data( 'autostart' ) );
179			slideshow.images = container.data( 'gallery' );
180			slideshow.init();
181
182			container.data( 'processed', true );
183		} );
184	}
185
186	$( document ).ready( jetpack_slideshow_init );
187	$( 'body' ).on( 'post-load', jetpack_slideshow_init );
188} )( jQuery );