diff options
Diffstat (limited to 'plugins/jetpack/modules/shortcodes/js/main.js')
| -rw-r--r-- | plugins/jetpack/modules/shortcodes/js/main.js | 258 |
1 files changed, 258 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/shortcodes/js/main.js b/plugins/jetpack/modules/shortcodes/js/main.js new file mode 100644 index 00000000..aecfdf60 --- /dev/null +++ b/plugins/jetpack/modules/shortcodes/js/main.js @@ -0,0 +1,258 @@ +( function( $ ) { + var jmpressOpts = { + fullscreen: false, + hash: { use: false }, + mouse: { clickSelects: false }, + keyboard: { use: true }, + animation: { transitionDuration: '1s' }, + presentationMode: false, + stepSelector: '.step', + duration: { + defaultValue: 0, + }, + }; + + /** + * Presentation constructor + */ + function Presentation( wrapper ) { + var _self, duration, new_css, ie_regex, matches; + + _self = this; + + _self.wrapper = $( wrapper ); // The wrapper for toggling fullscreen + _self.slideshow = $( '.presentation', wrapper ); // Holds the slides for jmpress + _self.navLeft = $( '.nav-arrow-left', wrapper ); + _self.navRight = $( '.nav-arrow-right', wrapper ); + _self.expandButton = $( '.nav-fullscreen-button', wrapper ); + _self.overlay = $( '.autoplay-overlay', wrapper ); + _self.fullscreen = false; + _self.autoPlaying = false; + _self.autoplayTime = parseFloat( _self.slideshow.attr( 'data-autoplay' ), 10 ) || 0; + + // The wrapper is scaled to the contents' size so that its border wraps tightly + _self.wrapper.css( { + width: _self.slideshow.width(), + height: _self.slideshow.height(), + } ); + + duration = _self.slideshow.attr( 'duration' ) || '1s'; + jmpressOpts.animation.transitionDuration = duration; + + // Compensate for transition times + if ( _self.autoplayTime ) { + _self.autoplayTime += parseFloat( duration, 10 ) * 1000; + } + + // Set the opacity transition duration + // as it is delegated by css and not jmpress + duration = 'opacity ' + duration; + new_css = { + width: _self.slideshow.width(), + height: _self.slideshow.height(), + '-webkit-transition': duration, + '-moz-transition': duration, + '-ms-transition': duration, + '-o-transition': duration, + transition: duration, + }; + + $( '.step', _self.slideshow ).each( function( i, step ) { + $( step ).css( new_css ); + } ); + + // Apply attribute to allow fading individual bullets here, + // otherwise wp_kses will strip the attribute out + $( '.step.fadebullets li', _self.slideshow ).each( function( i, step ) { + $( step ).attr( 'data-jmpress', 'fade' ); + } ); + + // Register resizing to window when fullscreen + $( window ).resize( function() { + if ( _self.fullscreen ) { + _self.resizePresentation(); + } + } ); + + // Register the nav bars to move the slides + _self.navLeft.on( 'click', function() { + _self.slideshow.jmpress( 'prev' ); + _self.overlay.css( 'opacity', 0 ); + return false; + } ); + + _self.navRight.on( 'click', function() { + _self.slideshow.jmpress( 'next' ); + _self.overlay.css( 'opacity', 0 ); + return false; + } ); + + _self.slideshow.on( 'click', function() { + _self.setAutoplay( true ); + return false; + } ); + + _self.slideshow.on( 'focusout', function() { + _self.setAutoplay( false ); + } ); + + // Register toggling fullscreen except for IE 9 or lower + ie_regex = /MSIE\s(\d+)\.\d+/; + matches = ie_regex.exec( navigator.userAgent ); + + if ( matches && parseInt( matches[ 1 ], 10 ) < 10 ) { + _self.expandButton.remove(); + _self.expandButton = null; + } else { + _self.expandButton.on( 'click', function() { + _self.setFullscreen( ! _self.fullscreen ); + return false; + } ); + } + + // Register ESC key to exit fullscreen + $( window ).on( 'keydown', function( event ) { + if ( event.which === 27 ) { + _self.setFullscreen( false ); + } + } ); + + // Start the presentation + _self.slideshow.jmpress( jmpressOpts ); + + // Make content visible and remove error message on jmpress success + if ( _self.slideshow.jmpress( 'initialized' ) ) { + _self.slideshow.css( 'display', '' ); + _self.overlay.css( 'display', '' ); + $( '.not-supported-msg', _self.wrapper ).remove(); + } + + // A bug in Firefox causes issues with the nav arrows appearing + // on hover in presentation mode. Explicitly disabling fullscreen + // on init seems to fix the issue + _self.setFullscreen( false ); + } + + $.extend( Presentation.prototype, { + resizePresentation: function() { + var scale, duration, settings, new_css, widthScale, heightScale; + + // Set the animation duration to 0 during resizing + // so that there isn't an animation delay when scaling + // up the slide contents + settings = this.slideshow.jmpress( 'settings' ); + duration = settings.animation.transitionDuration; + + settings.animation.transitionDuration = '0s'; + this.slideshow.jmpress( 'reselect' ); + + scale = 1; + new_css = { + top: 0, + left: 0, + zoom: 1, + }; + + // Expand the presentation to fill the lesser of the max width or height + // This avoids content moving past the window for certain window sizes + if ( this.fullscreen ) { + widthScale = $( window ).width() / this.slideshow.width(); + heightScale = $( window ).height() / this.slideshow.height(); + + scale = Math.min( widthScale, heightScale ); + + new_css.top = ( $( window ).height() - scale * this.slideshow.height() ) / 2; + new_css.left = ( $( window ).width() - scale * this.slideshow.width() ) / 2; + } + + // Firefox does not support the zoom property; IE does, but it does not work + // well like in webkit, so we manually transform and position the slideshow + if ( this.slideshow.css( '-moz-transform' ) || this.slideshow.css( '-ms-transform' ) ) { + // Firefox keeps the center of the element in place and expands outward + // so we must shift everything to compensate + new_css.top += ( ( scale - 1 ) * this.slideshow.height() ) / 2; + new_css.left += ( ( scale - 1 ) * this.slideshow.width() ) / 2; + + scale = 'scale(' + scale + ')'; + + $.extend( new_css, { + '-moz-transform': scale, + '-ms-transform': scale, + transform: scale, + } ); + } else { + // webkit scales everything with zoom so we need to offset the right amount + // so that the content is vertically centered after scaling effects + new_css.top /= scale; + new_css.left /= scale; + new_css.zoom = scale; + } + + this.slideshow.css( new_css ); + + settings.animation.transitionDuration = duration; + this.slideshow.jmpress( 'reselect' ); + }, + + setFullscreen: function( on ) { + this.fullscreen = on; + this.setAutoplay( false ); + + // Save the scroll positions before going into fullscreen mode + if ( on ) { + this.scrollVert = $( window ).scrollTop(); + this.scrollHoriz = $( window ).scrollLeft(); + + // Chrome Bug: Force scroll to be at top + // otherwise the presentation can end up offscreen + $( window ).scrollTop( 0 ); + $( window ).scrollLeft( 0 ); + } + + $( 'html' ).toggleClass( 'presentation-global-fullscreen', on ); + $( 'body' ).toggleClass( 'presentation-global-fullscreen', on ); + + this.wrapper.toggleClass( 'presentation-wrapper-fullscreen', on ); + + this.wrapper.parents().each( function( i, e ) { + $( e ).toggleClass( 'presentation-wrapper-fullscreen-parent', on ); + } ); + + this.resizePresentation(); + + // Reset the scroll positions after exiting fullscreen mode + if ( ! on ) { + $( window ).scrollTop( this.scrollVert ); + $( window ).scrollLeft( this.scrollHoriz ); + } + }, + + setAutoplay: function( on ) { + var _self = this, + newAutoplayTime; + + if ( _self.autoPlaying === on ) { + return; + } + + newAutoplayTime = on && _self.autoplayTime > 0 ? _self.autoplayTime : 0; + _self.slideshow.jmpress( 'settings' ).duration.defaultValue = newAutoplayTime; + + // Move to the next slide when activating autoplay + if ( newAutoplayTime ) { + _self.slideshow.jmpress( 'next' ); + _self.overlay.css( 'opacity', 0 ); + } else { + _self.slideshow.jmpress( 'reselect' ); + } + + _self.autoPlaying = on; + }, + } ); + + $( document ).ready( function() { + $( '.presentation-wrapper' ).map( function() { + new Presentation( this ); + } ); + } ); +} )( jQuery ); |