This repository has been archived on 2022-08-01. You can view files and clone it, but cannot push or open issues or pull requests.
Oldphaloskepsis/plugins/jetpack/modules/shortcodes/js/main.js

259 lines
7.5 KiB
JavaScript
Raw Normal View History

2017-01-12 23:10:07 +00:00
(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);