Add upstream

wp-content/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 );