| 1 |
/* global jetpackSlideshowSettings, escape */ |
| 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 = '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.align = 'middle'; |
| 38 |
img.setAttribute( 'itemprop', 'image' ); |
| 39 |
img.nopin = 'nopin'; |
| 40 |
var caption = document.createElement( 'div' ); |
| 41 |
caption.className = 'slideshow-slide-caption'; |
| 42 |
caption.setAttribute( 'itemprop', 'caption description' ); |
| 43 |
caption.innerHTML = imageInfo.caption; |
| 44 |
var container = document.createElement( 'div' ); |
| 45 |
container.className = 'slideshow-slide'; |
| 46 |
container.setAttribute( 'itemprop', 'associatedMedia' ); |
| 47 |
container.setAttribute( 'itemscope', '' ); |
| 48 |
container.setAttribute( 'itemtype', 'https://schema.org/ImageObject' ); |
| 49 |
|
| 50 |
// Hide loading image once first image has loaded. |
| 51 |
if ( i === 0 ) { |
| 52 |
if ( img.complete ) { |
| 53 |
// IE, image in cache |
| 54 |
setTimeout( function() { |
| 55 |
self.finishInit_(); |
| 56 |
}, 1 ); |
| 57 |
} else { |
| 58 |
jQuery( img ).load( function() { |
| 59 |
self.finishInit_(); |
| 60 |
} ); |
| 61 |
} |
| 62 |
} |
| 63 |
container.appendChild( img ); |
| 64 |
// I'm not sure where these were coming from, but IE adds |
| 65 |
// bad values for width/height for portrait-mode images |
| 66 |
img.removeAttribute( 'width' ); |
| 67 |
img.removeAttribute( 'height' ); |
| 68 |
container.appendChild( this.makeZeroWidthSpan() ); |
| 69 |
container.appendChild( caption ); |
| 70 |
this.element.append( container ); |
| 71 |
} |
| 72 |
}; |
| 73 |
|
| 74 |
JetpackSlideshow.prototype.makeZeroWidthSpan = function() { |
| 75 |
var emptySpan = document.createElement( 'span' ); |
| 76 |
emptySpan.className = 'slideshow-line-height-hack'; |
| 77 |
// Having a NBSP makes IE act weird during transitions, but other |
| 78 |
// browsers ignore a text node with a space in it as whitespace. |
| 79 |
if ( -1 !== window.navigator.userAgent.indexOf( 'MSIE ' ) ) { |
| 80 |
emptySpan.appendChild( document.createTextNode( ' ' ) ); |
| 81 |
} else { |
| 82 |
emptySpan.innerHTML = ' '; |
| 83 |
} |
| 84 |
return emptySpan; |
| 85 |
}; |
| 86 |
|
| 87 |
JetpackSlideshow.prototype.finishInit_ = function() { |
| 88 |
this.showLoadingImage( false ); |
| 89 |
this.renderControls_(); |
| 90 |
|
| 91 |
var self = this; |
| 92 |
if ( this.images.length > 1 ) { |
| 93 |
// Initialize Cycle instance. |
| 94 |
this.element.cycle( { |
| 95 |
fx: this.transition, |
| 96 |
prev: this.controls.prev, |
| 97 |
next: this.controls.next, |
| 98 |
timeout: jetpackSlideshowSettings.speed, |
| 99 |
slideExpr: '.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 |
slideshow.cycle( 'pause' ); |
| 109 |
jQuery( this.controls.stop ).removeClass( 'running' ); |
| 110 |
jQuery( this.controls.stop ).addClass( 'paused' ); |
| 111 |
} |
| 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 ); |
| 123 |
} |
| 124 |
return false; |
| 125 |
} ); |
| 126 |
} else { |
| 127 |
this.element.children( ':first' ).show(); |
| 128 |
this.element.css( 'position', 'relative' ); |
| 129 |
} |
| 130 |
this.initialized_ = true; |
| 131 |
}; |
| 132 |
|
| 133 |
JetpackSlideshow.prototype.renderControls_ = function() { |
| 134 |
if ( this.controlsDiv_ ) { |
| 135 |
return; |
| 136 |
} |
| 137 |
|
| 138 |
var controlsDiv = document.createElement( 'div' ); |
| 139 |
controlsDiv.className = 'slideshow-controls'; |
| 140 |
|
| 141 |
var controls = [ 'prev', 'stop', 'next' ]; |
| 142 |
for ( var i = 0; i < controls.length; i++ ) { |
| 143 |
var controlName = controls[ i ]; |
| 144 |
var a = document.createElement( 'a' ); |
| 145 |
a.href = '#'; |
| 146 |
controlsDiv.appendChild( a ); |
| 147 |
this.controls[ controlName ] = a; |
| 148 |
} |
| 149 |
this.element.append( controlsDiv ); |
| 150 |
this.controlsDiv_ = controlsDiv; |
| 151 |
}; |
| 152 |
|
| 153 |
JetpackSlideshow.prototype.onCyclePrevNextClick_ = function( isNext, i /*, slideElement*/ ) { |
| 154 |
// If blog_id not present don't track page views |
| 155 |
if ( ! jetpackSlideshowSettings.blog_id ) { |
| 156 |
return; |
| 157 |
} |
| 158 |
|
| 159 |
var postid = this.images[ i ].id; |
| 160 |
var stats = new Image(); |
| 161 |
stats.src = |
| 162 |
document.location.protocol + |
| 163 |
'//pixel.wp.com/g.gif?host=' + |
| 164 |
escape( document.location.host ) + |
| 165 |
'&rand=' + |
| 166 |
Math.random() + |
| 167 |
'&blog=' + |
| 168 |
jetpackSlideshowSettings.blog_id + |
| 169 |
'&subd=' + |
| 170 |
jetpackSlideshowSettings.blog_subdomain + |
| 171 |
'&user_id=' + |
| 172 |
jetpackSlideshowSettings.user_id + |
| 173 |
'&post=' + |
| 174 |
postid + |
| 175 |
'&ref=' + |
| 176 |
escape( document.location ); |
| 177 |
}; |
| 178 |
|
| 179 |
( function( $ ) { |
| 180 |
function jetpack_slideshow_init() { |
| 181 |
$( '.jetpack-slideshow-noscript' ).remove(); |
| 182 |
|
| 183 |
$( '.jetpack-slideshow' ).each( function() { |
| 184 |
var container = $( this ); |
| 185 |
|
| 186 |
if ( container.data( 'processed' ) ) { |
| 187 |
return; |
| 188 |
} |
| 189 |
|
| 190 |
var slideshow = new JetpackSlideshow( |
| 191 |
container, |
| 192 |
container.data( 'trans' ), |
| 193 |
container.data( 'autostart' ) |
| 194 |
); |
| 195 |
slideshow.images = container.data( 'gallery' ); |
| 196 |
slideshow.init(); |
| 197 |
|
| 198 |
container.data( 'processed', true ); |
| 199 |
} ); |
| 200 |
} |
| 201 |
|
| 202 |
$( document ).ready( jetpack_slideshow_init ); |
| 203 |
$( 'body' ).on( 'post-load', jetpack_slideshow_init ); |
| 204 |
} )( jQuery ); |
| 205 |
|
