brightcove.js
6 years ago
jmpress.js
6 years ago
jquery.cycle.min.js
9 years ago
main.js
6 years ago
quiz.js
5 years ago
recipes-printthis.js
4 years ago
recipes.js
6 years ago
slideshow-shortcode.js
4 years ago
slideshow-shortcode.js
211 lines
| 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 = '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.align = 'middle'; |
| 38 | img.setAttribute( 'itemprop', 'image' ); |
| 39 | img.nopin = 'nopin'; |
| 40 | var caption = document.createElement( 'div' ); |
| 41 | caption.className = 'jetpack-slideshow-slide-caption'; |
| 42 | caption.setAttribute( 'itemprop', 'caption description' ); |
| 43 | caption.innerHTML = imageInfo.caption; |
| 44 | var container = document.createElement( 'div' ); |
| 45 | container.className = 'jetpack-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 = 'jetpack-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: '.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 | 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 = 'jetpack-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 label_name = 'label_' + controlName; |
| 145 | var a = document.createElement( 'a' ); |
| 146 | |
| 147 | a.href = '#'; |
| 148 | a.className = 'button-' + controlName; |
| 149 | a.setAttribute( 'aria-label', jetpackSlideshowSettings[ label_name ] ); |
| 150 | a.setAttribute( 'role', 'button' ); |
| 151 | |
| 152 | controlsDiv.appendChild( a ); |
| 153 | this.controls[ controlName ] = a; |
| 154 | } |
| 155 | this.element.append( controlsDiv ); |
| 156 | this.controlsDiv_ = controlsDiv; |
| 157 | }; |
| 158 | |
| 159 | JetpackSlideshow.prototype.onCyclePrevNextClick_ = function ( isNext, i /*, slideElement*/ ) { |
| 160 | // If blog_id not present don't track page views |
| 161 | if ( ! jetpackSlideshowSettings.blog_id ) { |
| 162 | return; |
| 163 | } |
| 164 | |
| 165 | var postid = this.images[ i ].id; |
| 166 | var stats = new Image(); |
| 167 | stats.src = |
| 168 | document.location.protocol + |
| 169 | '//pixel.wp.com/g.gif?host=' + |
| 170 | escape( document.location.host ) + |
| 171 | '&rand=' + |
| 172 | Math.random() + |
| 173 | '&blog=' + |
| 174 | jetpackSlideshowSettings.blog_id + |
| 175 | '&subd=' + |
| 176 | jetpackSlideshowSettings.blog_subdomain + |
| 177 | '&user_id=' + |
| 178 | jetpackSlideshowSettings.user_id + |
| 179 | '&post=' + |
| 180 | postid + |
| 181 | '&ref=' + |
| 182 | escape( document.location ); |
| 183 | }; |
| 184 | |
| 185 | ( function ( $ ) { |
| 186 | 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' ) ) { |
| 193 | return; |
| 194 | } |
| 195 | |
| 196 | var slideshow = new JetpackSlideshow( |
| 197 | container, |
| 198 | container.data( 'trans' ), |
| 199 | container.data( 'autostart' ) |
| 200 | ); |
| 201 | slideshow.images = container.data( 'gallery' ); |
| 202 | slideshow.init(); |
| 203 | |
| 204 | container.data( 'processed', true ); |
| 205 | } ); |
| 206 | } |
| 207 | |
| 208 | $( document ).ready( jetpack_slideshow_init ); |
| 209 | $( 'body' ).on( 'post-load', jetpack_slideshow_init ); |
| 210 | } )( jQuery ); |
| 211 |