brightcove.js
5 years ago
dependencies.js
7 months ago
main.js
7 months ago
quiz.js
4 years ago
recipes.js
5 years ago
slideshow-shortcode.js
7 months ago
slideshow-shortcode.js
215 lines
| 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 |