| 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, newAutoplayTime; |
| 232 |
|
| 233 |
if ( _self.autoPlaying === on ) { |
| 234 |
return; |
| 235 |
} |
| 236 |
|
| 237 |
newAutoplayTime = (on && _self.autoplayTime > 0) ? _self.autoplayTime : 0; |
| 238 |
_self.slideshow.jmpress('settings').duration.defaultValue = newAutoplayTime; |
| 239 |
|
| 240 |
// Move to the next slide when activating autoplay |
| 241 |
if( newAutoplayTime ) { |
| 242 |
_self.slideshow.jmpress('next'); |
| 243 |
_self.overlay.css('opacity', 0); |
| 244 |
} else { |
| 245 |
_self.slideshow.jmpress('reselect'); |
| 246 |
} |
| 247 |
|
| 248 |
_self.autoPlaying = on; |
| 249 |
} |
| 250 |
}); |
| 251 |
|
| 252 |
$( document ).ready( function(){ |
| 253 |
$('.presentation-wrapper').map(function() { |
| 254 |
new Presentation(this); |
| 255 |
}); |
| 256 |
}); |
| 257 |
|
| 258 |
})(jQuery); |
| 259 |
|
