summaryrefslogtreecommitdiffhomepage
path: root/js/reveal.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/reveal.js')
-rw-r--r--js/reveal.js638
1 files changed, 466 insertions, 172 deletions
diff --git a/js/reveal.js b/js/reveal.js
index 2439a05..ca2a9a0 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -3,7 +3,7 @@
* http://revealjs.com
* MIT licensed
*
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
*/
(function( root, factory ) {
if( typeof define === 'function' && define.amd ) {
@@ -26,7 +26,7 @@
var Reveal;
// The reveal.js version
- var VERSION = '3.6.0';
+ var VERSION = '3.7.0';
var SLIDES_SELECTOR = '.slides section',
HORIZONTAL_SLIDES_SELECTOR = '.slides>section',
@@ -69,6 +69,10 @@
// Display the page number of the current slide
slideNumber: false,
+ // Use 1 based indexing for # links to match slide number (default is zero
+ // based)
+ hashOneBasedIndex: false,
+
// Determine which displays to show the slide number on
showSlideNumber: 'all',
@@ -84,6 +88,10 @@
// Enable the slide overview mode
overview: true,
+ // Disables the default reveal.js slide layout so that you can use
+ // custom CSS layout
+ disableLayout: false,
+
// Vertical centering of slides
center: true,
@@ -154,6 +162,8 @@
hideAddressBar: true,
// Opens links in an iframe preview overlay
+ // Add `data-preview-link` and `data-preview-link="false"` to customise each link
+ // individually
previewLinks: false,
// Exposes the reveal.js API through window.postMessage
@@ -180,6 +190,12 @@
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
+ // Parallax background repeat
+ parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit
+
+ // Parallax background position
+ parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left"
+
// Amount of pixels to move the parallax background per slide step
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
@@ -188,6 +204,9 @@
// to PDF, unlimited by default
pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
+ // Prints each fragment on a separate slide
+ pdfSeparateFragments: true,
+
// Offset used to reduce the height of content within exported PDF pages.
// This exists to account for environment differences based on how you
// print to PDF. CLI printing options, like phantomjs and wkpdf, can end
@@ -299,7 +318,7 @@
'F': 'Fullscreen',
'ESC, O': 'Slide overview'
},
-
+
// Holds custom key code mappings
registeredKeyBindings = {};
@@ -417,41 +436,28 @@
scriptsToPreload = 0;
// Called once synchronous scripts finish loading
- function proceed() {
+ function afterSynchronousScriptsLoaded() {
+ // Load asynchronous scripts
if( scriptsAsync.length ) {
- // Load asynchronous scripts
- head.js.apply( null, scriptsAsync );
+ scriptsAsync.forEach( function( s ) {
+ loadScript( s.src, s.callback );
+ } );
}
start();
}
- function loadScript( s ) {
- head.ready( s.src.match( /([\w\d_\-]*)\.?js(\?[\w\d.=&]*)?$|[^\\\/]*$/i )[0], function() {
- // Extension may contain callback functions
- if( typeof s.callback === 'function' ) {
- s.callback.apply( this );
- }
-
- if( --scriptsToPreload === 0 ) {
- proceed();
- }
- });
- }
-
for( var i = 0, len = config.dependencies.length; i < len; i++ ) {
var s = config.dependencies[i];
// Load if there's no condition or the condition is truthy
if( !s.condition || s.condition() ) {
if( s.async ) {
- scriptsAsync.push( s.src );
+ scriptsAsync.push( s );
}
else {
- scripts.push( s.src );
+ scripts.push( s );
}
-
- loadScript( s );
}
}
@@ -459,12 +465,71 @@
scriptsToPreload = scripts.length;
// Load synchronous scripts
- head.js.apply( null, scripts );
+ scripts.forEach( function( s ) {
+ loadScript( s.src, function() {
+
+ if( typeof s.callback === 'function' ) s.callback();
+
+ if( --scriptsToPreload === 0 ) {
+
+ afterSynchronousScriptsLoaded();
+
+ }
+
+ } );
+ } );
}
else {
- proceed();
+ afterSynchronousScriptsLoaded();
+ }
+
+ }
+
+ /**
+ * Loads a JavaScript file from the given URL and executes it.
+ *
+ * @param {string} url Address of the .js file to load
+ * @param {function} callback Method to invoke when the script
+ * has loaded and executed
+ */
+ function loadScript( url, callback ) {
+
+ var script = document.createElement( 'script' );
+ script.type = 'text/javascript';
+ script.async = false;
+ script.defer = false;
+ script.src = url;
+
+ if( callback ) {
+
+ // Success callback
+ script.onload = script.onreadystatechange = function( event ) {
+ if( event.type === "load" || (/loaded|complete/.test( script.readyState ) ) ) {
+
+ // Kill event listeners
+ script.onload = script.onreadystatechange = script.onerror = null;
+
+ callback();
+
+ }
+ };
+
+ // Error callback
+ script.onerror = function( err ) {
+
+ // Kill event listeners
+ script.onload = script.onreadystatechange = script.onerror = null;
+
+ callback( new Error( 'Failed loading script: ' + script.src + '\n' + err) );
+
+ };
+
}
+ // Append the script at the end of <head>
+ var head = document.querySelector( 'head' );
+ head.insertBefore( script, head.lastChild );
+
}
/**
@@ -574,7 +639,7 @@
dom.speakerNotes.setAttribute( 'tabindex', '0' );
// Overlay graphic which is displayed during the paused mode
- createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
+ dom.pauseOverlay = createSingletonNode( dom.wrapper, 'div', 'pause-overlay', config.controls ? '<button class="resume-button">Resume presentation</button>' : null );
dom.wrapper.setAttribute( 'role', 'application' );
@@ -771,13 +836,58 @@
numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV );
page.appendChild( numberElement );
}
- }
- } );
+ // Copy page and show fragments one after another
+ if( config.pdfSeparateFragments ) {
+
+ // Each fragment 'group' is an array containing one or more
+ // fragments. Multiple fragments that appear at the same time
+ // are part of the same group.
+ var fragmentGroups = sortFragments( page.querySelectorAll( '.fragment' ), true );
+
+ var previousFragmentStep;
+ var previousPage;
+
+ fragmentGroups.forEach( function( fragments ) {
+
+ // Remove 'current-fragment' from the previous group
+ if( previousFragmentStep ) {
+ previousFragmentStep.forEach( function( fragment ) {
+ fragment.classList.remove( 'current-fragment' );
+ } );
+ }
+
+ // Show the fragments for the current index
+ fragments.forEach( function( fragment ) {
+ fragment.classList.add( 'visible', 'current-fragment' );
+ } );
+
+ // Create a separate page for the current fragment state
+ var clonedPage = page.cloneNode( true );
+ page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling );
+
+ previousFragmentStep = fragments;
+ previousPage = clonedPage;
+
+ } );
+
+ // Reset the first/original page so that all fragments are hidden
+ fragmentGroups.forEach( function( fragments ) {
+ fragments.forEach( function( fragment ) {
+ fragment.classList.remove( 'visible', 'current-fragment' );
+ } );
+ } );
+
+ }
+ // Show all fragments
+ else {
+ toArray( page.querySelectorAll( '.fragment:not(.fade-out)' ) ).forEach( function( fragment ) {
+ fragment.classList.add( 'visible' );
+ } );
+ }
+
+ }
- // Show all fragments
- toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ' .fragment' ) ).forEach( function( fragment ) {
- fragment.classList.add( 'visible' );
} );
// Notify subscribers that the PDF layout is good to go
@@ -877,6 +987,8 @@
dom.background.style.backgroundImage = 'url("' + config.parallaxBackgroundImage + '")';
dom.background.style.backgroundSize = config.parallaxBackgroundSize;
+ dom.background.style.backgroundRepeat = config.parallaxBackgroundRepeat;
+ dom.background.style.backgroundPosition = config.parallaxBackgroundPosition;
// Make sure the below properties are set on the element - these properties are
// needed for proper transitions to be set on the element via CSS. To remove
@@ -906,6 +1018,57 @@
*/
function createBackground( slide, container ) {
+
+ // Main slide background element
+ var element = document.createElement( 'div' );
+ element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
+
+ // Inner background element that wraps images/videos/iframes
+ var contentElement = document.createElement( 'div' );
+ contentElement.className = 'slide-background-content';
+
+ element.appendChild( contentElement );
+ container.appendChild( element );
+
+ slide.slideBackgroundElement = element;
+ slide.slideBackgroundContentElement = contentElement;
+
+ // Syncs the background to reflect all current background settings
+ syncBackground( slide );
+
+ return element;
+
+ }
+
+ /**
+ * Renders all of the visual properties of a slide background
+ * based on the various background attributes.
+ *
+ * @param {HTMLElement} slide
+ */
+ function syncBackground( slide ) {
+
+ var element = slide.slideBackgroundElement,
+ contentElement = slide.slideBackgroundContentElement;
+
+ // Reset the prior background state in case this is not the
+ // initial sync
+ slide.classList.remove( 'has-dark-background' );
+ slide.classList.remove( 'has-light-background' );
+
+ element.removeAttribute( 'data-loaded' );
+ element.removeAttribute( 'data-background-hash' );
+ element.removeAttribute( 'data-background-size' );
+ element.removeAttribute( 'data-background-transition' );
+ element.style.backgroundColor = '';
+
+ contentElement.style.backgroundSize = '';
+ contentElement.style.backgroundRepeat = '';
+ contentElement.style.backgroundPosition = '';
+ contentElement.style.backgroundImage = '';
+ contentElement.style.opacity = '';
+ contentElement.innerHTML = '';
+
var data = {
background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ),
@@ -915,14 +1078,10 @@
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ),
- backgroundTransition: slide.getAttribute( 'data-background-transition' )
+ backgroundTransition: slide.getAttribute( 'data-background-transition' ),
+ backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
};
- var element = document.createElement( 'div' );
-
- // Carry over custom classes from the slide to the background
- element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
-
if( data.background ) {
// Auto-wrap image urls in url(...)
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
@@ -945,24 +1104,20 @@
data.backgroundColor +
data.backgroundRepeat +
data.backgroundPosition +
- data.backgroundTransition );
+ data.backgroundTransition +
+ data.backgroundOpacity );
}
// Additional and optional background properties
- if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
- if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
- if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
- container.appendChild( element );
-
- // If backgrounds are being recreated, clear old classes
- slide.classList.remove( 'has-dark-background' );
- slide.classList.remove( 'has-light-background' );
-
- slide.slideBackgroundElement = element;
+ // Background image options are set on the content wrapper
+ if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
+ if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;
+ if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
+ if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
// If this slide has a background color, add a class that
// signals if it is light or dark. If the slide has no background
@@ -984,8 +1139,6 @@
}
}
- return element;
-
}
/**
@@ -1162,13 +1315,8 @@
window.addEventListener( 'resize', onWindowResize, false );
if( config.touch ) {
- dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
- dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
- dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );
-
- // Support pointer-style touch interaction as well
- if( window.navigator.pointerEnabled ) {
- // IE 11 uses un-prefixed version of pointer events
+ if( 'onpointerdown' in window ) {
+ // Use W3C pointer events
dom.wrapper.addEventListener( 'pointerdown', onPointerDown, false );
dom.wrapper.addEventListener( 'pointermove', onPointerMove, false );
dom.wrapper.addEventListener( 'pointerup', onPointerUp, false );
@@ -1179,6 +1327,12 @@
dom.wrapper.addEventListener( 'MSPointerMove', onPointerMove, false );
dom.wrapper.addEventListener( 'MSPointerUp', onPointerUp, false );
}
+ else {
+ // Fall back to touch events
+ dom.wrapper.addEventListener( 'touchstart', onTouchStart, false );
+ dom.wrapper.addEventListener( 'touchmove', onTouchMove, false );
+ dom.wrapper.addEventListener( 'touchend', onTouchEnd, false );
+ }
}
if( config.keyboard ) {
@@ -1190,6 +1344,8 @@
dom.progress.addEventListener( 'click', onProgressClicked, false );
}
+ dom.pauseOverlay.addEventListener( 'click', resume, false );
+
if( config.focusBodyOnPageVisibilityChange ) {
var visibilityChange;
@@ -1241,22 +1397,19 @@
window.removeEventListener( 'hashchange', onWindowHashChange, false );
window.removeEventListener( 'resize', onWindowResize, false );
+ dom.wrapper.removeEventListener( 'pointerdown', onPointerDown, false );
+ dom.wrapper.removeEventListener( 'pointermove', onPointerMove, false );
+ dom.wrapper.removeEventListener( 'pointerup', onPointerUp, false );
+
+ dom.wrapper.removeEventListener( 'MSPointerDown', onPointerDown, false );
+ dom.wrapper.removeEventListener( 'MSPointerMove', onPointerMove, false );
+ dom.wrapper.removeEventListener( 'MSPointerUp', onPointerUp, false );
+
dom.wrapper.removeEventListener( 'touchstart', onTouchStart, false );
dom.wrapper.removeEventListener( 'touchmove', onTouchMove, false );
dom.wrapper.removeEventListener( 'touchend', onTouchEnd, false );
- // IE11
- if( window.navigator.pointerEnabled ) {
- dom.wrapper.removeEventListener( 'pointerdown', onPointerDown, false );
- dom.wrapper.removeEventListener( 'pointermove', onPointerMove, false );
- dom.wrapper.removeEventListener( 'pointerup', onPointerUp, false );
- }
- // IE10
- else if( window.navigator.msPointerEnabled ) {
- dom.wrapper.removeEventListener( 'MSPointerDown', onPointerDown, false );
- dom.wrapper.removeEventListener( 'MSPointerMove', onPointerMove, false );
- dom.wrapper.removeEventListener( 'MSPointerUp', onPointerUp, false );
- }
+ dom.pauseOverlay.removeEventListener( 'click', resume, false );
if ( config.progress && dom.progress ) {
dom.progress.removeEventListener( 'click', onProgressClicked, false );
@@ -1583,6 +1736,15 @@
}
/**
+ * Check if this instance is being used to print a PDF with fragments.
+ */
+ function isPrintingPDFFragments() {
+
+ return ( /print-pdf-fragments/gi ).test( window.location.search );
+
+ }
+
+ /**
* Hides the address bar if we're on a mobile device.
*/
function hideAddressBar() {
@@ -1843,76 +2005,80 @@
if( dom.wrapper && !isPrintingPDF() ) {
- var size = getComputedSlideSize();
+ if( !config.disableLayout ) {
- // Layout the contents of the slides
- layoutSlideContents( config.width, config.height );
+ var size = getComputedSlideSize();
- dom.slides.style.width = size.width + 'px';
- dom.slides.style.height = size.height + 'px';
+ // Layout the contents of the slides
+ layoutSlideContents( config.width, config.height );
- // Determine scale of content to fit within available space
- scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );
+ dom.slides.style.width = size.width + 'px';
+ dom.slides.style.height = size.height + 'px';
- // Respect max/min scale settings
- scale = Math.max( scale, config.minScale );
- scale = Math.min( scale, config.maxScale );
+ // Determine scale of content to fit within available space
+ scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );
- // Don't apply any scaling styles if scale is 1
- if( scale === 1 ) {
- dom.slides.style.zoom = '';
- dom.slides.style.left = '';
- dom.slides.style.top = '';
- dom.slides.style.bottom = '';
- dom.slides.style.right = '';
- transformSlides( { layout: '' } );
- }
- else {
- // Prefer zoom for scaling up so that content remains crisp.
- // Don't use zoom to scale down since that can lead to shifts
- // in text layout/line breaks.
- if( scale > 1 && features.zoom ) {
- dom.slides.style.zoom = scale;
+ // Respect max/min scale settings
+ scale = Math.max( scale, config.minScale );
+ scale = Math.min( scale, config.maxScale );
+
+ // Don't apply any scaling styles if scale is 1
+ if( scale === 1 ) {
+ dom.slides.style.zoom = '';
dom.slides.style.left = '';
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
transformSlides( { layout: '' } );
}
- // Apply scale transform as a fallback
else {
- dom.slides.style.zoom = '';
- dom.slides.style.left = '50%';
- dom.slides.style.top = '50%';
- dom.slides.style.bottom = 'auto';
- dom.slides.style.right = 'auto';
- transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
+ // Prefer zoom for scaling up so that content remains crisp.
+ // Don't use zoom to scale down since that can lead to shifts
+ // in text layout/line breaks.
+ if( scale > 1 && features.zoom ) {
+ dom.slides.style.zoom = scale;
+ dom.slides.style.left = '';
+ dom.slides.style.top = '';
+ dom.slides.style.bottom = '';
+ dom.slides.style.right = '';
+ transformSlides( { layout: '' } );
+ }
+ // Apply scale transform as a fallback
+ else {
+ dom.slides.style.zoom = '';
+ dom.slides.style.left = '50%';
+ dom.slides.style.top = '50%';
+ dom.slides.style.bottom = 'auto';
+ dom.slides.style.right = 'auto';
+ transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
+ }
}
- }
- // Select all slides, vertical and horizontal
- var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
+ // Select all slides, vertical and horizontal
+ var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) );
- for( var i = 0, len = slides.length; i < len; i++ ) {
- var slide = slides[ i ];
+ for( var i = 0, len = slides.length; i < len; i++ ) {
+ var slide = slides[ i ];
- // Don't bother updating invisible slides
- if( slide.style.display === 'none' ) {
- continue;
- }
+ // Don't bother updating invisible slides
+ if( slide.style.display === 'none' ) {
+ continue;
+ }
- if( config.center || slide.classList.contains( 'center' ) ) {
- // Vertical stacks are not centred since their section
- // children will be
- if( slide.classList.contains( 'stack' ) ) {
- slide.style.top = 0;
+ if( config.center || slide.classList.contains( 'center' ) ) {
+ // Vertical stacks are not centred since their section
+ // children will be
+ if( slide.classList.contains( 'stack' ) ) {
+ slide.style.top = 0;
+ }
+ else {
+ slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
+ }
}
else {
- slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
+ slide.style.top = '';
}
- }
- else {
- slide.style.top = '';
+
}
}
@@ -2239,6 +2405,41 @@
}
/**
+ * Return a hash URL that will resolve to the current slide location.
+ */
+ function locationHash() {
+
+ var url = '/';
+
+ // Attempt to create a named link based on the slide's ID
+ var id = currentSlide ? currentSlide.getAttribute( 'id' ) : null;
+ if( id ) {
+ id = encodeURIComponent( id );
+ }
+
+ var indexf;
+ if( config.fragmentInURL ) {
+ indexf = getIndices().f;
+ }
+
+ // If the current slide has an ID, use that as a named link,
+ // but we don't support named links with a fragment index
+ if( typeof id === 'string' && id.length && indexf === undefined ) {
+ url = '/' + id;
+ }
+ // Otherwise use the /h/v index
+ else {
+ var hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
+ if( indexh > 0 || indexv > 0 || indexf !== undefined ) url += indexh + hashIndexBase;
+ if( indexv > 0 || indexf !== undefined ) url += '/' + (indexv + hashIndexBase );
+ if( indexf !== undefined ) url += '/' + indexf;
+ }
+
+ return url;
+
+ }
+
+ /**
* Checks if the current or specified slide is vertical
* (nested within another slide).
*
@@ -2470,7 +2671,7 @@
// Solves an edge case where the previous slide maintains the
// 'present' class when navigating between adjacent vertical
// stacks
- if( previousSlide ) {
+ if( previousSlide && previousSlide !== currentSlide ) {
previousSlide.classList.remove( 'present' );
previousSlide.setAttribute( 'aria-hidden', 'true' );
@@ -2576,6 +2777,41 @@
}
/**
+ * Updates reveal.js to keep in sync with new slide attributes. For
+ * example, if you add a new `data-background-image` you can call
+ * this to have reveal.js render the new background image.
+ *
+ * Similar to #sync() but more efficient when you only need to
+ * refresh a specific slide.
+ *
+ * @param {HTMLElement} slide
+ */
+ function syncSlide( slide ) {
+
+ syncBackground( slide );
+ syncFragments( slide );
+
+ updateBackground();
+ updateNotes();
+
+ loadSlide( slide );
+
+ }
+
+ /**
+ * Formats the fragments on the given slide so that they have
+ * valid indices. Call this if fragments are changed in the DOM
+ * after reveal.js has already initialized.
+ *
+ * @param {HTMLElement} slide
+ */
+ function syncFragments( slide ) {
+
+ sortFragments( slide.querySelectorAll( '.fragment' ) );
+
+ }
+
+ /**
* Resets all vertical slides so that only the first
* is visible.
*/
@@ -2903,6 +3139,7 @@
}
+
/**
* Updates the slide number div to reflect the current slide.
*
@@ -2925,6 +3162,12 @@
format = config.slideNumber;
}
+ // If there are ONLY vertical slides in this deck, always use
+ // a flattened slide number
+ if( !/c/.test( format ) && dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length === 1 ) {
+ format = 'c';
+ }
+
switch( format ) {
case 'c':
value.push( getSlidePastCount() + 1 );
@@ -2957,13 +3200,18 @@
*/
function formatSlideNumber( a, delimiter, b ) {
+ var url = '#' + locationHash();
if( typeof b === 'number' && !isNaN( b ) ) {
- return '<span class="slide-number-a">'+ a +'</span>' +
+ return '<a href="' + url + '">' +
+ '<span class="slide-number-a">'+ a +'</span>' +
'<span class="slide-number-delimiter">'+ delimiter +'</span>' +
- '<span class="slide-number-b">'+ b +'</span>';
+ '<span class="slide-number-b">'+ b +'</span>' +
+ '</a>';
}
else {
- return '<span class="slide-number-a">'+ a +'</span>';
+ return '<a href="' + url + '">' +
+ '<span class="slide-number-a">'+ a +'</span>' +
+ '</a>';
}
}
@@ -3114,13 +3362,18 @@
startEmbeddedContent( currentBackground );
- var backgroundImageURL = currentBackground.style.backgroundImage || '';
+ var currentBackgroundContent = currentBackground.querySelector( '.slide-background-content' );
+ if( currentBackgroundContent ) {
+
+ var backgroundImageURL = currentBackgroundContent.style.backgroundImage || '';
+
+ // Restart GIFs (doesn't work in Firefox)
+ if( /\.gif/i.test( backgroundImageURL ) ) {
+ currentBackgroundContent.style.backgroundImage = '';
+ window.getComputedStyle( currentBackgroundContent ).opacity;
+ currentBackgroundContent.style.backgroundImage = backgroundImageURL;
+ }
- // Restart GIFs (doesn't work in Firefox)
- if( /\.gif/i.test( backgroundImageURL ) ) {
- currentBackground.style.backgroundImage = '';
- window.getComputedStyle( currentBackground ).opacity;
- currentBackground.style.backgroundImage = backgroundImageURL;
}
// Don't transition between identical backgrounds. This
@@ -3252,10 +3505,12 @@
// Show the corresponding background element
- var background = getSlideBackground( slide );
+ var background = slide.slideBackgroundElement;
if( background ) {
background.style.display = 'block';
+ var backgroundContent = slide.slideBackgroundContentElement;
+
// If the background contains media, load it
if( background.hasAttribute( 'data-loaded' ) === false ) {
background.setAttribute( 'data-loaded', 'true' );
@@ -3268,7 +3523,7 @@
// Images
if( backgroundImage ) {
- background.style.backgroundImage = 'url('+ backgroundImage +')';
+ backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';
}
// Videos
else if ( backgroundVideo && !isSpeakerNotes() ) {
@@ -3296,7 +3551,7 @@
video.innerHTML += '<source src="'+ source +'">';
} );
- background.appendChild( video );
+ backgroundContent.appendChild( video );
}
// Iframes
else if( backgroundIframe && options.excludeIframes !== true ) {
@@ -3319,7 +3574,7 @@
iframe.style.maxHeight = '100%';
iframe.style.maxWidth = '100%';
- background.appendChild( iframe );
+ backgroundContent.appendChild( iframe );
}
}
@@ -3488,9 +3743,16 @@
if( autoplay && typeof el.play === 'function' ) {
+ // If the media is ready, start playback
if( el.readyState > 1 ) {
startEmbeddedMedia( { target: el } );
}
+ // Mobile devices never fire a loaded event so instead
+ // of waiting, we initiate playback
+ else if( isMobileDevice ) {
+ el.play();
+ }
+ // If the media isn't loaded, wait before playing
else {
el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes
el.addEventListener( 'loadeddata', startEmbeddedMedia );
@@ -3749,18 +4011,21 @@
var bits = hash.slice( 2 ).split( '/' ),
name = hash.replace( /#|\//gi, '' );
- // If the first bit is invalid and there is a name we can
- // assume that this is a named link
- if( isNaN( parseInt( bits[0], 10 ) ) && name.length ) {
+ // If the first bit is not fully numeric and there is a name we
+ // can assume that this is a named link
+ if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {
var element;
// Ensure the named link is a valid HTML ID attribute
- if( /^[a-zA-Z][\w:.-]*$/.test( name ) ) {
- // Find the slide with the specified ID
- element = document.getElementById( name );
+ try {
+ element = document.getElementById( decodeURIComponent( name ) );
}
+ catch ( error ) { }
+
+ // Ensure that we're not already on a slide with the same name
+ var isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false;
- if( element ) {
+ if( element && !isSameNameAsCurrentSlide ) {
// Find the position of the named slide and navigate to it
var indices = Reveal.getIndices( element );
slide( indices.h, indices.v );
@@ -3771,10 +4036,13 @@
}
}
else {
+ var hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
+
// Read the index components of the hash
- var h = parseInt( bits[0], 10 ) || 0,
- v = parseInt( bits[1], 10 ) || 0,
+ var h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,
+ v = ( parseInt( bits[1], 10 ) - hashIndexBase ) || 0,
f;
+
if( config.fragmentInURL ) {
f = parseInt( bits[2], 10 );
if( isNaN( f ) ) {
@@ -3808,32 +4076,7 @@
writeURLTimeout = setTimeout( writeURL, delay );
}
else if( currentSlide ) {
- var url = '/';
-
- // Attempt to create a named link based on the slide's ID
- var id = currentSlide.getAttribute( 'id' );
- if( id ) {
- id = id.replace( /[^a-zA-Z0-9\-\_\:\.]/g, '' );
- }
-
- var indexf;
- if( config.fragmentInURL ) {
- indexf = getIndices().f;
- }
-
- // If the current slide has an ID, use that as a named link,
- // but we don't support named links with a fragment index
- if( typeof id === 'string' && id.length && indexf === undefined ) {
- url = '/' + id;
- }
- // Otherwise use the /h/v index
- else {
- if( indexh > 0 || indexv > 0 || indexf !== undefined ) url += indexh;
- if( indexv > 0 || indexf !== undefined ) url += '/' + indexv;
- if( indexf !== undefined ) url += '/' + indexf;
- }
-
- window.location.hash = url;
+ window.location.hash = locationHash();
}
}
@@ -3902,6 +4145,25 @@
}
/**
+ * Returns an array of objects where each object represents the
+ * attributes on its respective slide.
+ */
+ function getSlidesAttributes() {
+
+ return getSlides().map( function( slide ) {
+
+ var attributes = {};
+ for( var i = 0; i < slide.attributes.length; i++ ) {
+ var attribute = slide.attributes[ i ];
+ attributes[ attribute.name ] = attribute.value;
+ }
+ return attributes;
+
+ } );
+
+ }
+
+ /**
* Retrieves the total number of slides in this presentation.
*
* @return {number}
@@ -4042,9 +4304,11 @@
* the fragment within the fragments list.
*
* @param {object[]|*} fragments
+ * @param {boolean} grouped If true the returned array will contain
+ * nested arrays for all fragments with the same index
* @return {object[]} sorted Sorted array of fragments
*/
- function sortFragments( fragments ) {
+ function sortFragments( fragments, grouped ) {
fragments = toArray( fragments );
@@ -4087,7 +4351,7 @@
index ++;
} );
- return sorted;
+ return grouped === true ? ordered : sorted;
}
@@ -4410,7 +4674,17 @@
// Prioritize revealing fragments
if( nextFragment() === false ) {
- if( availableRoutes().down ) {
+
+ var routes = availableRoutes();
+
+ // When looping is enabled `routes.down` is always available
+ // so we need a separate check for when we've reached the
+ // end of a stack and should move horizontally
+ if( routes.down && routes.right && config.loop && Reveal.isLastVerticalSlide( currentSlide ) ) {
+ routes.down = false;
+ }
+
+ if( routes.down ) {
navigateDown();
}
else if( config.rtl ) {
@@ -5163,7 +5437,10 @@
initialize: initialize,
configure: configure,
+
sync: sync,
+ syncSlide: syncSlide,
+ syncFragments: syncFragments,
// Navigation methods
slide: slide,
@@ -5242,6 +5519,10 @@
// Returns an Array of all slides
getSlides: getSlides,
+ // Returns an Array of objects representing the attributes on
+ // the slides
+ getSlidesAttributes: getSlidesAttributes,
+
// Returns the total number of slides
getTotalSlides: getTotalSlides,
@@ -5300,7 +5581,7 @@
// Returns true if we're currently on the last slide
isLastSlide: function() {
if( currentSlide ) {
- // Does this slide has next a sibling?
+ // Does this slide have a next sibling?
if( currentSlide.nextElementSibling ) return false;
// If it's vertical, does its parent have a next sibling?
@@ -5312,6 +5593,19 @@
return false;
},
+ // Returns true if we're on the last slide in the current
+ // vertical stack
+ isLastVerticalSlide: function() {
+ if( currentSlide && isVerticalSlide( currentSlide ) ) {
+ // Does this slide have a next sibling?
+ if( currentSlide.nextElementSibling ) return false;
+
+ return true;
+ }
+
+ return false;
+ },
+
// Checks if reveal.js has been loaded and is ready for use
isReady: function() {
return loaded;