| 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 |
|
