← All changes | modules/shortcodes/js/main.js +258 -0 16.2-beta → 16.3 View file →

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