path: root/plugins/jetpack/modules/shortcodes/js/main.js

(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);