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
main.js
259 lines
| 1 | ( function ( $ ) { |
| 2 | var jmpressOpts = { |
| 3 | fullscreen: false, |
| 4 | hash: { use: false }, |
| 5 | mouse: { clickSelects: false }, |
| 6 | keyboard: { use: true }, |
| 7 | animation: { transitionDuration: '1s' }, |
| 8 | presentationMode: false, |
| 9 | stepSelector: '.step', |
| 10 | duration: { |
| 11 | defaultValue: 0, |
| 12 | }, |
| 13 | }; |
| 14 | |
| 15 | /** |
| 16 | * Presentation constructor |
| 17 | */ |
| 18 | function Presentation( wrapper ) { |
| 19 | var _self, duration, new_css, ie_regex, matches; |
| 20 | |
| 21 | _self = this; |
| 22 | |
| 23 | _self.wrapper = $( wrapper ); // The wrapper for toggling fullscreen |
| 24 | _self.slideshow = $( '.presentation', wrapper ); // Holds the slides for jmpress |
| 25 | _self.navLeft = $( '.nav-arrow-left', wrapper ); |
| 26 | _self.navRight = $( '.nav-arrow-right', wrapper ); |
| 27 | _self.expandButton = $( '.nav-fullscreen-button', wrapper ); |
| 28 | _self.overlay = $( '.autoplay-overlay', wrapper ); |
| 29 | _self.fullscreen = false; |
| 30 | _self.autoPlaying = false; |
| 31 | _self.autoplayTime = parseFloat( _self.slideshow.attr( 'data-autoplay' ), 10 ) || 0; |
| 32 | |
| 33 | // The wrapper is scaled to the contents' size so that its border wraps tightly |
| 34 | _self.wrapper.css( { |
| 35 | width: _self.slideshow.width(), |
| 36 | height: _self.slideshow.height(), |
| 37 | } ); |
| 38 | |
| 39 | duration = _self.slideshow.attr( 'duration' ) || '1s'; |
| 40 | jmpressOpts.animation.transitionDuration = duration; |
| 41 | |
| 42 | // Compensate for transition times |
| 43 | if ( _self.autoplayTime ) { |
| 44 | _self.autoplayTime += parseFloat( duration, 10 ) * 1000; |
| 45 | } |
| 46 | |
| 47 | // Set the opacity transition duration |
| 48 | // as it is delegated by css and not jmpress |
| 49 | duration = 'opacity ' + duration; |
| 50 | new_css = { |
| 51 | width: _self.slideshow.width(), |
| 52 | height: _self.slideshow.height(), |
| 53 | '-webkit-transition': duration, |
| 54 | '-moz-transition': duration, |
| 55 | '-ms-transition': duration, |
| 56 | '-o-transition': duration, |
| 57 | transition: duration, |
| 58 | }; |
| 59 | |
| 60 | $( '.step', _self.slideshow ).each( function ( i, step ) { |
| 61 | $( step ).css( new_css ); |
| 62 | } ); |
| 63 | |
| 64 | // Apply attribute to allow fading individual bullets here, |
| 65 | // otherwise wp_kses will strip the attribute out |
| 66 | $( '.step.fadebullets li', _self.slideshow ).each( function ( i, step ) { |
| 67 | $( step ).attr( 'data-jmpress', 'fade' ); |
| 68 | } ); |
| 69 | |
| 70 | // Register resizing to window when fullscreen |
| 71 | $( window ).resize( function () { |
| 72 | if ( _self.fullscreen ) { |
| 73 | _self.resizePresentation(); |
| 74 | } |
| 75 | } ); |
| 76 | |
| 77 | // Register the nav bars to move the slides |
| 78 | _self.navLeft.on( 'click', function () { |
| 79 | _self.slideshow.jmpress( 'prev' ); |
| 80 | _self.overlay.css( 'opacity', 0 ); |
| 81 | return false; |
| 82 | } ); |
| 83 | |
| 84 | _self.navRight.on( 'click', function () { |
| 85 | _self.slideshow.jmpress( 'next' ); |
| 86 | _self.overlay.css( 'opacity', 0 ); |
| 87 | return false; |
| 88 | } ); |
| 89 | |
| 90 | _self.slideshow.on( 'click', function () { |
| 91 | _self.setAutoplay( true ); |
| 92 | return false; |
| 93 | } ); |
| 94 | |
| 95 | _self.slideshow.on( 'focusout', function () { |
| 96 | _self.setAutoplay( false ); |
| 97 | } ); |
| 98 | |
| 99 | // Register toggling fullscreen except for IE 9 or lower |
| 100 | ie_regex = /MSIE\s(\d+)\.\d+/; |
| 101 | matches = ie_regex.exec( navigator.userAgent ); |
| 102 | |
| 103 | if ( matches && parseInt( matches[ 1 ], 10 ) < 10 ) { |
| 104 | _self.expandButton.remove(); |
| 105 | _self.expandButton = null; |
| 106 | } else { |
| 107 | _self.expandButton.on( 'click', function () { |
| 108 | _self.setFullscreen( ! _self.fullscreen ); |
| 109 | return false; |
| 110 | } ); |
| 111 | } |
| 112 | |
| 113 | // Register ESC key to exit fullscreen |
| 114 | $( window ).on( 'keydown', function ( event ) { |
| 115 | if ( event.which === 27 ) { |
| 116 | _self.setFullscreen( false ); |
| 117 | } |
| 118 | } ); |
| 119 | |
| 120 | // Start the presentation |
| 121 | _self.slideshow.jmpress( jmpressOpts ); |
| 122 | |
| 123 | // Make content visible and remove error message on jmpress success |
| 124 | if ( _self.slideshow.jmpress( 'initialized' ) ) { |
| 125 | _self.slideshow.css( 'display', '' ); |
| 126 | _self.overlay.css( 'display', '' ); |
| 127 | $( '.not-supported-msg', _self.wrapper ).remove(); |
| 128 | } |
| 129 | |
| 130 | // A bug in Firefox causes issues with the nav arrows appearing |
| 131 | // on hover in presentation mode. Explicitly disabling fullscreen |
| 132 | // on init seems to fix the issue |
| 133 | _self.setFullscreen( false ); |
| 134 | } |
| 135 | |
| 136 | $.extend( Presentation.prototype, { |
| 137 | resizePresentation: function () { |
| 138 | var scale, duration, settings, new_css, widthScale, heightScale; |
| 139 | |
| 140 | // Set the animation duration to 0 during resizing |
| 141 | // so that there isn't an animation delay when scaling |
| 142 | // up the slide contents |
| 143 | settings = this.slideshow.jmpress( 'settings' ); |
| 144 | duration = settings.animation.transitionDuration; |
| 145 | |
| 146 | settings.animation.transitionDuration = '0s'; |
| 147 | this.slideshow.jmpress( 'reselect' ); |
| 148 | |
| 149 | scale = 1; |
| 150 | new_css = { |
| 151 | top: 0, |
| 152 | left: 0, |
| 153 | zoom: 1, |
| 154 | }; |
| 155 | |
| 156 | // Expand the presentation to fill the lesser of the max width or height |
| 157 | // This avoids content moving past the window for certain window sizes |
| 158 | if ( this.fullscreen ) { |
| 159 | widthScale = $( window ).width() / this.slideshow.width(); |
| 160 | heightScale = $( window ).height() / this.slideshow.height(); |
| 161 | |
| 162 | scale = Math.min( widthScale, heightScale ); |
| 163 | |
| 164 | new_css.top = ( $( window ).height() - scale * this.slideshow.height() ) / 2; |
| 165 | new_css.left = ( $( window ).width() - scale * this.slideshow.width() ) / 2; |
| 166 | } |
| 167 | |
| 168 | // Firefox does not support the zoom property; IE does, but it does not work |
| 169 | // well like in webkit, so we manually transform and position the slideshow |
| 170 | if ( this.slideshow.css( '-moz-transform' ) || this.slideshow.css( '-ms-transform' ) ) { |
| 171 | // Firefox keeps the center of the element in place and expands outward |
| 172 | // so we must shift everything to compensate |
| 173 | new_css.top += ( ( scale - 1 ) * this.slideshow.height() ) / 2; |
| 174 | new_css.left += ( ( scale - 1 ) * this.slideshow.width() ) / 2; |
| 175 | |
| 176 | scale = 'scale(' + scale + ')'; |
| 177 | |
| 178 | $.extend( new_css, { |
| 179 | '-moz-transform': scale, |
| 180 | '-ms-transform': scale, |
| 181 | transform: scale, |
| 182 | } ); |
| 183 | } else { |
| 184 | // webkit scales everything with zoom so we need to offset the right amount |
| 185 | // so that the content is vertically centered after scaling effects |
| 186 | new_css.top /= scale; |
| 187 | new_css.left /= scale; |
| 188 | new_css.zoom = scale; |
| 189 | } |
| 190 | |
| 191 | this.slideshow.css( new_css ); |
| 192 | |
| 193 | settings.animation.transitionDuration = duration; |
| 194 | this.slideshow.jmpress( 'reselect' ); |
| 195 | }, |
| 196 | |
| 197 | setFullscreen: function ( on ) { |
| 198 | this.fullscreen = on; |
| 199 | this.setAutoplay( false ); |
| 200 | |
| 201 | // Save the scroll positions before going into fullscreen mode |
| 202 | if ( on ) { |
| 203 | this.scrollVert = $( window ).scrollTop(); |
| 204 | this.scrollHoriz = $( window ).scrollLeft(); |
| 205 | |
| 206 | // Chrome Bug: Force scroll to be at top |
| 207 | // otherwise the presentation can end up offscreen |
| 208 | $( window ).scrollTop( 0 ); |
| 209 | $( window ).scrollLeft( 0 ); |
| 210 | } |
| 211 | |
| 212 | $( 'html' ).toggleClass( 'presentation-global-fullscreen', on ); |
| 213 | $( 'body' ).toggleClass( 'presentation-global-fullscreen', on ); |
| 214 | |
| 215 | this.wrapper.toggleClass( 'presentation-wrapper-fullscreen', on ); |
| 216 | |
| 217 | this.wrapper.parents().each( function ( i, e ) { |
| 218 | $( e ).toggleClass( 'presentation-wrapper-fullscreen-parent', on ); |
| 219 | } ); |
| 220 | |
| 221 | this.resizePresentation(); |
| 222 | |
| 223 | // Reset the scroll positions after exiting fullscreen mode |
| 224 | if ( ! on ) { |
| 225 | $( window ).scrollTop( this.scrollVert ); |
| 226 | $( window ).scrollLeft( this.scrollHoriz ); |
| 227 | } |
| 228 | }, |
| 229 | |
| 230 | setAutoplay: function ( on ) { |
| 231 | var _self = this, |
| 232 | newAutoplayTime; |
| 233 | |
| 234 | if ( _self.autoPlaying === on ) { |
| 235 | return; |
| 236 | } |
| 237 | |
| 238 | newAutoplayTime = on && _self.autoplayTime > 0 ? _self.autoplayTime : 0; |
| 239 | _self.slideshow.jmpress( 'settings' ).duration.defaultValue = newAutoplayTime; |
| 240 | |
| 241 | // Move to the next slide when activating autoplay |
| 242 | if ( newAutoplayTime ) { |
| 243 | _self.slideshow.jmpress( 'next' ); |
| 244 | _self.overlay.css( 'opacity', 0 ); |
| 245 | } else { |
| 246 | _self.slideshow.jmpress( 'reselect' ); |
| 247 | } |
| 248 | |
| 249 | _self.autoPlaying = on; |
| 250 | }, |
| 251 | } ); |
| 252 | |
| 253 | addEventListener( 'DOMContentLoaded', () => { |
| 254 | document.querySelectorAll( '.presentation-wrapper' ).forEach( el => { |
| 255 | new Presentation( el ); |
| 256 | } ); |
| 257 | } ); |
| 258 | } )( jQuery ); |
| 259 |