summaryrefslogtreecommitdiffhomepage
path: root/js/reveal.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/reveal.js')
-rw-r--r--js/reveal.js560
1 files changed, 387 insertions, 173 deletions
diff --git a/js/reveal.js b/js/reveal.js
index e772516..e9dba2e 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -43,11 +43,11 @@
height: 700,
// Factor of the display size that should remain empty around the content
- margin: 0.1,
+ margin: 0.04,
// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
- maxScale: 1.5,
+ maxScale: 2.0,
// Display controls in the bottom right corner
controls: true,
@@ -92,7 +92,7 @@
// i.e. contained within a limited portion of the screen
embedded: false,
- // Flags if we should show a help overlay when the questionmark
+ // Flags if we should show a help overlay when the question-mark
// key is pressed
help: true,
@@ -131,7 +131,7 @@
// Dispatches all reveal.js events to the parent window through postMessage
postMessageEvents: false,
- // Focuses body when page changes visiblity to ensure keyboard shortcuts work
+ // Focuses body when page changes visibility to ensure keyboard shortcuts work
focusBodyOnPageVisibilityChange: true,
// Transition style
@@ -153,6 +153,10 @@
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
+ // The maximum number of pages a single slide can expand onto when printing
+ // to PDF, unlimited by default
+ pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
+
// Number of slides away from the current that are visible
viewDistance: 3,
@@ -161,6 +165,9 @@
},
+ // Flags if Reveal.initialize() has been called
+ initialized = false,
+
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
loaded = false,
@@ -253,6 +260,11 @@
*/
function initialize( options ) {
+ // Make sure we only initialize once
+ if( initialized === true ) return;
+
+ initialized = true;
+
checkCapabilities();
if( !features.transforms2d && !features.transforms3d ) {
@@ -442,6 +454,8 @@
loaded = true;
+ dom.wrapper.classList.add( 'ready' );
+
dispatchEvent( 'ready', {
'indexh': indexh,
'indexv': indexv,
@@ -495,13 +509,13 @@
// Element containing notes that are visible to the audience
dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null );
dom.speakerNotes.setAttribute( 'data-prevent-swipe', '' );
+ dom.speakerNotes.setAttribute( 'tabindex', '0' );
// Overlay graphic which is displayed during the paused mode
createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
// Cache references to elements
dom.controls = document.querySelector( '.reveal .controls' );
- dom.theme = document.querySelector( '#theme' );
dom.wrapper.setAttribute( 'role', 'application' );
@@ -520,6 +534,8 @@
* Creates a hidden div with role aria-live to announce the
* current slide content. Hide the div off-screen to make it
* available only to Assistive Technologies.
+ *
+ * @return {HTMLElement}
*/
function createStatusDiv() {
@@ -529,7 +545,7 @@
statusDiv.style.position = 'absolute';
statusDiv.style.height = '1px';
statusDiv.style.width = '1px';
- statusDiv.style.overflow ='hidden';
+ statusDiv.style.overflow = 'hidden';
statusDiv.style.clip = 'rect( 1px, 1px, 1px, 1px )';
statusDiv.setAttribute( 'id', 'aria-status-div' );
statusDiv.setAttribute( 'aria-live', 'polite' );
@@ -541,6 +557,38 @@
}
/**
+ * Converts the given HTML element into a string of text
+ * that can be announced to a screen reader. Hidden
+ * elements are excluded.
+ */
+ function getStatusText( node ) {
+
+ var text = '';
+
+ // Text node
+ if( node.nodeType === 3 ) {
+ text += node.textContent;
+ }
+ // Element node
+ else if( node.nodeType === 1 ) {
+
+ var isAriaHidden = node.getAttribute( 'aria-hidden' );
+ var isDisplayHidden = window.getComputedStyle( node )['display'] === 'none';
+ if( isAriaHidden !== 'true' && !isDisplayHidden ) {
+
+ toArray( node.childNodes ).forEach( function( child ) {
+ text += getStatusText( child );
+ } );
+
+ }
+
+ }
+
+ return text;
+
+ }
+
+ /**
* Configures the presentation for printing to a static
* PDF.
*/
@@ -589,43 +637,61 @@
var left = ( pageWidth - slideWidth ) / 2,
top = ( pageHeight - slideHeight ) / 2;
- var contentHeight = getAbsoluteHeight( slide );
+ var contentHeight = slide.scrollHeight;
var numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
+ // Adhere to configured pages per slide limit
+ numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
+
// Center slides vertically
if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
}
+ // Wrap the slide in a page element and hide its overflow
+ // so that no page ever flows onto another
+ var page = document.createElement( 'div' );
+ page.className = 'pdf-page';
+ page.style.height = ( pageHeight * numberOfPages ) + 'px';
+ slide.parentNode.insertBefore( page, slide );
+ page.appendChild( slide );
+
// Position the slide inside of the page
slide.style.left = left + 'px';
slide.style.top = top + 'px';
slide.style.width = slideWidth + 'px';
- // TODO Backgrounds need to be multiplied when the slide
- // stretches over multiple pages
- var background = slide.querySelector( '.slide-background' );
- if( background ) {
- background.style.width = pageWidth + 'px';
- background.style.height = ( pageHeight * numberOfPages ) + 'px';
- background.style.top = -top + 'px';
- background.style.left = -left + 'px';
+ if( slide.slideBackgroundElement ) {
+ page.insertBefore( slide.slideBackgroundElement, slide );
}
// Inject notes if `showNotes` is enabled
if( config.showNotes ) {
+
+ // Are there notes for this slide?
var notes = getSlideNotes( slide );
if( notes ) {
+
var notesSpacing = 8;
+ var notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
var notesElement = document.createElement( 'div' );
notesElement.classList.add( 'speaker-notes' );
notesElement.classList.add( 'speaker-notes-pdf' );
+ notesElement.setAttribute( 'data-layout', notesLayout );
notesElement.innerHTML = notes;
- notesElement.style.left = ( notesSpacing - left ) + 'px';
- notesElement.style.bottom = ( notesSpacing - top ) + 'px';
- notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
- slide.appendChild( notesElement );
+
+ if( notesLayout === 'separate-page' ) {
+ page.parentNode.insertBefore( notesElement, page.nextSibling );
+ }
+ else {
+ notesElement.style.left = notesSpacing + 'px';
+ notesElement.style.bottom = notesSpacing + 'px';
+ notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
+ page.appendChild( notesElement );
+ }
+
}
+
}
// Inject slide numbers if `slideNumbers` are enabled
@@ -637,7 +703,7 @@
numberElement.classList.add( 'slide-number' );
numberElement.classList.add( 'slide-number-pdf' );
numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV );
- background.appendChild( numberElement );
+ page.appendChild( numberElement );
}
}
@@ -648,6 +714,9 @@
fragment.classList.add( 'visible' );
} );
+ // Notify subscribers that the PDF layout is good to go
+ dispatchEvent( 'pdf-ready' );
+
}
/**
@@ -674,6 +743,13 @@
* Creates an HTML element and returns a reference to it.
* If the element already exists the existing instance will
* be returned.
+ *
+ * @param {HTMLElement} container
+ * @param {string} tagname
+ * @param {string} classname
+ * @param {string} innerHTML
+ *
+ * @return {HTMLElement}
*/
function createSingletonNode( container, tagname, classname, innerHTML ) {
@@ -717,24 +793,12 @@
// Iterate over all horizontal slides
toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( slideh ) {
- var backgroundStack;
-
- if( printMode ) {
- backgroundStack = createBackground( slideh, slideh );
- }
- else {
- backgroundStack = createBackground( slideh, dom.background );
- }
+ var backgroundStack = createBackground( slideh, dom.background );
// Iterate over all vertical slides
toArray( slideh.querySelectorAll( 'section' ) ).forEach( function( slidev ) {
- if( printMode ) {
- createBackground( slidev, slidev );
- }
- else {
- createBackground( slidev, backgroundStack );
- }
+ createBackground( slidev, backgroundStack );
backgroundStack.classList.add( 'stack' );
@@ -772,6 +836,7 @@
* @param {HTMLElement} slide
* @param {HTMLElement} container The element that the background
* should be appended to
+ * @return {HTMLElement} New background div
*/
function createBackground( slide, container ) {
@@ -830,18 +895,20 @@
slide.classList.remove( 'has-dark-background' );
slide.classList.remove( 'has-light-background' );
+ slide.slideBackgroundElement = element;
+
// If this slide has a background color, add a class that
// signals if it is light or dark. If the slide has no background
// color, no class will be set
- var computedBackgroundColor = window.getComputedStyle( element ).backgroundColor;
- if( computedBackgroundColor ) {
- var rgb = colorToRgb( computedBackgroundColor );
+ var computedBackgroundStyle = window.getComputedStyle( element );
+ if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
+ var rgb = colorToRgb( computedBackgroundStyle.backgroundColor );
// Ignore fully transparent backgrounds. Some browsers return
// rgba(0,0,0,0) when reading the computed background color of
// an element with no background
if( rgb && rgb.a !== 0 ) {
- if( colorBrightness( computedBackgroundColor ) < 128 ) {
+ if( colorBrightness( computedBackgroundStyle.backgroundColor ) < 128 ) {
slide.classList.add( 'has-dark-background' );
}
else {
@@ -887,6 +954,8 @@
/**
* Applies the configuration settings from the config
* object. May be called multiple times.
+ *
+ * @param {object} options
*/
function configure( options ) {
@@ -935,6 +1004,7 @@
if( config.showNotes ) {
dom.speakerNotes.classList.add( 'visible' );
+ dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
}
else {
dom.speakerNotes.classList.remove( 'visible' );
@@ -1119,6 +1189,9 @@
/**
* Extend object a with the properties of object b.
* If there's a conflict, object b takes precedence.
+ *
+ * @param {object} a
+ * @param {object} b
*/
function extend( a, b ) {
@@ -1130,6 +1203,9 @@
/**
* Converts the target object to an array.
+ *
+ * @param {object} o
+ * @return {object[]}
*/
function toArray( o ) {
@@ -1139,6 +1215,9 @@
/**
* Utility for deserializing a value.
+ *
+ * @param {*} value
+ * @return {*}
*/
function deserialize( value ) {
@@ -1157,8 +1236,10 @@
* Measures the distance in pixels between point a
* and point b.
*
- * @param {Object} a point with x/y properties
- * @param {Object} b point with x/y properties
+ * @param {object} a point with x/y properties
+ * @param {object} b point with x/y properties
+ *
+ * @return {number}
*/
function distanceBetween( a, b ) {
@@ -1171,6 +1252,9 @@
/**
* Applies a CSS transform to the target element.
+ *
+ * @param {HTMLElement} element
+ * @param {string} transform
*/
function transformElement( element, transform ) {
@@ -1185,6 +1269,8 @@
* Applies CSS transforms to the slides container. The container
* is transformed from two separate sources: layout and the overview
* mode.
+ *
+ * @param {object} transforms
*/
function transformSlides( transforms ) {
@@ -1204,6 +1290,8 @@
/**
* Injects the given CSS styles into the DOM.
+ *
+ * @param {string} value
*/
function injectStyleSheet( value ) {
@@ -1220,13 +1308,55 @@
}
/**
+ * Find the closest parent that matches the given
+ * selector.
+ *
+ * @param {HTMLElement} target The child element
+ * @param {String} selector The CSS selector to match
+ * the parents against
+ *
+ * @return {HTMLElement} The matched parent or null
+ * if no matching parent was found
+ */
+ function closestParent( target, selector ) {
+
+ var parent = target.parentNode;
+
+ while( parent ) {
+
+ // There's some overhead doing this each time, we don't
+ // want to rewrite the element prototype but should still
+ // be enough to feature detect once at startup...
+ var matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;
+
+ // If we find a match, we're all set
+ if( matchesMethod && matchesMethod.call( parent, selector ) ) {
+ return parent;
+ }
+
+ // Keep searching
+ parent = parent.parentNode;
+
+ }
+
+ return null;
+
+ }
+
+ /**
* Converts various color input formats to an {r:0,g:0,b:0} object.
*
- * @param {String} color The string representation of a color,
- * the following formats are supported:
- * - #000
- * - #000000
- * - rgb(0,0,0)
+ * @param {string} color The string representation of a color
+ * @example
+ * colorToRgb('#000');
+ * @example
+ * colorToRgb('#000000');
+ * @example
+ * colorToRgb('rgb(0,0,0)');
+ * @example
+ * colorToRgb('rgba(0,0,0)');
+ *
+ * @return {{r: number, g: number, b: number, [a]: number}|null}
*/
function colorToRgb( color ) {
@@ -1276,7 +1406,8 @@
/**
* Calculates brightness on a scale of 0-255.
*
- * @param color See colorStringToRgb for supported formats.
+ * @param {string} color See colorToRgb for supported formats.
+ * @see {@link colorToRgb}
*/
function colorBrightness( color ) {
@@ -1291,45 +1422,13 @@
}
/**
- * Retrieves the height of the given element by looking
- * at the position and height of its immediate children.
- */
- function getAbsoluteHeight( element ) {
-
- var height = 0;
-
- if( element ) {
- var absoluteChildren = 0;
-
- toArray( element.childNodes ).forEach( function( child ) {
-
- if( typeof child.offsetTop === 'number' && child.style ) {
- // Count # of abs children
- if( window.getComputedStyle( child ).position === 'absolute' ) {
- absoluteChildren += 1;
- }
-
- height = Math.max( height, child.offsetTop + child.offsetHeight );
- }
-
- } );
-
- // If there are no absolute children, use offsetHeight
- if( absoluteChildren === 0 ) {
- height = element.offsetHeight;
- }
-
- }
-
- return height;
-
- }
-
- /**
* Returns the remaining height within the parent of the
* target element.
*
* remaining height = [ configured parent height ] - [ current parent height ]
+ *
+ * @param {HTMLElement} element
+ * @param {number} [height]
*/
function getRemainingHeight( element, height ) {
@@ -1452,6 +1551,8 @@
/**
* Bind preview frame links.
+ *
+ * @param {string} [selector=a] - selector for anchors
*/
function enablePreviewLinks( selector ) {
@@ -1482,6 +1583,8 @@
/**
* Opens a preview window for the target URL.
+ *
+ * @param {string} url - url for preview iframe src
*/
function showPreview( url ) {
@@ -1526,7 +1629,7 @@
}
/**
- * Opens a overlay window with help material.
+ * Opens an overlay window with help material.
*/
function showHelp() {
@@ -1592,10 +1695,8 @@
var size = getComputedSlideSize();
- var slidePadding = 20; // TODO Dig this out of DOM
-
// Layout the contents of the slides
- layoutSlideContents( config.width, config.height, slidePadding );
+ layoutSlideContents( config.width, config.height );
dom.slides.style.width = size.width + 'px';
dom.slides.style.height = size.height + 'px';
@@ -1657,7 +1758,7 @@
slide.style.top = 0;
}
else {
- slide.style.top = Math.max( ( ( size.height - getAbsoluteHeight( slide ) ) / 2 ) - slidePadding, 0 ) + 'px';
+ slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';
}
}
else {
@@ -1676,8 +1777,11 @@
/**
* Applies layout logic to the contents of all slides in
* the presentation.
+ *
+ * @param {string|number} width
+ * @param {string|number} height
*/
- function layoutSlideContents( width, height, padding ) {
+ function layoutSlideContents( width, height ) {
// Handle sizing of elements with the 'stretch' class
toArray( dom.slides.querySelectorAll( 'section > .stretch' ) ).forEach( function( element ) {
@@ -1709,6 +1813,9 @@
* Calculates the computed pixel size of our slides. These
* values are based on the width and height configuration
* options.
+ *
+ * @param {number} [presentationWidth=dom.wrapper.offsetWidth]
+ * @param {number} [presentationHeight=dom.wrapper.offsetHeight]
*/
function getComputedSlideSize( presentationWidth, presentationHeight ) {
@@ -1746,7 +1853,7 @@
* from the stack.
*
* @param {HTMLElement} stack The vertical stack element
- * @param {int} v Index to memorize
+ * @param {string|number} [v=0] Index to memorize
*/
function setPreviousVerticalIndex( stack, v ) {
@@ -1947,7 +2054,7 @@
/**
* Toggles the slide overview mode on and off.
*
- * @param {Boolean} override Optional flag which overrides the
+ * @param {Boolean} [override] Flag which overrides the
* toggle logic and forcibly sets the desired state. True means
* overview is open, false means it's closed.
*/
@@ -1978,8 +2085,9 @@
* Checks if the current or specified slide is vertical
* (nested within another slide).
*
- * @param {HTMLElement} slide [optional] The slide to check
+ * @param {HTMLElement} [slide=currentSlide] The slide to check
* orientation of
+ * @return {Boolean}
*/
function isVerticalSlide( slide ) {
@@ -1998,10 +2106,10 @@
*/
function enterFullscreen() {
- var element = document.body;
+ var element = document.documentElement;
// Check which implementation is available
- var requestMethod = element.requestFullScreen ||
+ var requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
@@ -2064,6 +2172,8 @@
/**
* Checks if we are currently in the paused mode.
+ *
+ * @return {Boolean}
*/
function isPaused() {
@@ -2074,7 +2184,7 @@
/**
* Toggles the auto slide mode on and off.
*
- * @param {Boolean} override Optional flag which sets the desired state.
+ * @param {Boolean} [override] Flag which sets the desired state.
* True means autoplay starts, false means it stops.
*/
@@ -2092,6 +2202,8 @@
/**
* Checks if the auto slide mode is currently on.
+ *
+ * @return {Boolean}
*/
function isAutoSliding() {
@@ -2104,11 +2216,11 @@
* slide which matches the specified horizontal and vertical
* indices.
*
- * @param {int} h Horizontal index of the target slide
- * @param {int} v Vertical index of the target slide
- * @param {int} f Optional index of a fragment within the
+ * @param {number} [h=indexh] Horizontal index of the target slide
+ * @param {number} [v=indexv] Vertical index of the target slide
+ * @param {number} [f] Index of a fragment within the
* target slide to activate
- * @param {int} o Optional origin for use in multimaster environments
+ * @param {number} [o] Origin for use in multimaster environments
*/
function slide( h, v, f, o ) {
@@ -2118,6 +2230,9 @@
// Query all horizontal slides in the deck
var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
+ // Abort if there are no slides
+ if( horizontalSlides.length === 0 ) return;
+
// If no vertical index is specified and the upcoming slide is a
// stack, resume at its previous vertical index
if( v === undefined && !isOverview() ) {
@@ -2234,7 +2349,7 @@
}
// Announce the current slide contents, for screen readers
- dom.statusDiv.textContent = currentSlide.textContent;
+ dom.statusDiv.textContent = getStatusText( currentSlide );
updateControls();
updateProgress();
@@ -2362,12 +2477,12 @@
* Updates one dimension of slides by showing the slide
* with the specified index.
*
- * @param {String} selector A CSS selector that will fetch
+ * @param {string} selector A CSS selector that will fetch
* the group of slides we are working with
- * @param {Number} index The index of the slide that should be
+ * @param {number} index The index of the slide that should be
* shown
*
- * @return {Number} The index of the slide that is now shown,
+ * @return {number} The index of the slide that is now shown,
* might differ from the passed in index if it was out of
* bounds.
*/
@@ -2550,10 +2665,10 @@
}
/**
- * Pick up notes from the current slide and display tham
+ * Pick up notes from the current slide and display them
* to the viewer.
*
- * @see `showNotes` config value
+ * @see {@link config.showNotes}
*/
function updateNotes() {
@@ -2583,10 +2698,10 @@
* Updates the slide number div to reflect the current slide.
*
* The following slide number formats are available:
- * "h.v": horizontal . vertical slide number (default)
- * "h/v": horizontal / vertical slide number
- * "c": flattened slide number
- * "c/t": flattened slide number / total slides
+ * "h.v": horizontal . vertical slide number (default)
+ * "h/v": horizontal / vertical slide number
+ * "c": flattened slide number
+ * "c/t": flattened slide number / total slides
*/
function updateSlideNumber() {
@@ -2625,6 +2740,11 @@
/**
* Applies HTML formatting to a slide number before it's
* written to the DOM.
+ *
+ * @param {number} a Current slide
+ * @param {string} delimiter Character to separate slide numbers
+ * @param {(number|*)} b Total slides
+ * @return {string} HTML string fragment
*/
function formatSlideNumber( a, delimiter, b ) {
@@ -2655,34 +2775,37 @@
.concat( dom.controlsNext ).forEach( function( node ) {
node.classList.remove( 'enabled' );
node.classList.remove( 'fragmented' );
+
+ // Set 'disabled' attribute on all directions
+ node.setAttribute( 'disabled', 'disabled' );
} );
- // Add the 'enabled' class to the available routes
- if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); } );
- if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); } );
- if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); } );
- if( routes.down ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'enabled' ); } );
+ // Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons
+ if( routes.left ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( routes.right ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( routes.up ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( routes.down ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
// Prev/next buttons
- if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); } );
- if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); } );
+ if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
// Highlight fragment directions
if( currentSlide ) {
// Always apply fragment decorator to prev/next buttons
- if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
- if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+ if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
// Apply fragment decorators to directional buttons based on
// what slide axis they are in
if( isVerticalSlide( currentSlide ) ) {
- if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
- if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+ if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
}
else {
- if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
- if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
+ if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
+ if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
}
}
@@ -2693,7 +2816,7 @@
* Updates the background elements to reflect the current
* slide.
*
- * @param {Boolean} includeAll If true, the backgrounds of
+ * @param {boolean} includeAll If true, the backgrounds of
* all vertical slides (not just the present) will be updated.
*/
function updateBackground( includeAll ) {
@@ -2868,7 +2991,7 @@
verticalOffsetMultiplier = ( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 );
}
- verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indexv * 1 : 0;
+ verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indexv : 0;
dom.background.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px';
@@ -2880,6 +3003,8 @@
* Called when the given slide is within the configured view
* distance. Shows the slide element and loads any content
* that is set to load lazily (data-src).
+ *
+ * @param {HTMLElement} slide Slide to show
*/
function showSlide( slide ) {
@@ -2968,6 +3093,8 @@
/**
* Called when the given slide is moved outside of the
* configured view distance.
+ *
+ * @param {HTMLElement} slide
*/
function hideSlide( slide ) {
@@ -2986,7 +3113,7 @@
/**
* Determine what available routes there are for navigation.
*
- * @return {Object} containing four booleans: left/right/up/down
+ * @return {{left: boolean, right: boolean, up: boolean, down: boolean}}
*/
function availableRoutes() {
@@ -3015,7 +3142,7 @@
* Returns an object describing the available fragment
* directions.
*
- * @return {Object} two boolean properties: prev/next
+ * @return {{prev: boolean, next: boolean}}
*/
function availableFragments() {
@@ -3060,32 +3187,46 @@
/**
* Start playback of any embedded content inside of
- * the targeted slide.
+ * the given element.
+ *
+ * @param {HTMLElement} slide
*/
- function startEmbeddedContent( slide ) {
+ function startEmbeddedContent( element ) {
- if( slide && !isSpeakerNotes() ) {
+ if( element && !isSpeakerNotes() ) {
// Restart GIFs
- toArray( slide.querySelectorAll( 'img[src$=".gif"]' ) ).forEach( function( el ) {
+ toArray( element.querySelectorAll( 'img[src$=".gif"]' ) ).forEach( function( el ) {
// Setting the same unchanged source like this was confirmed
// to work in Chrome, FF & Safari
el.setAttribute( 'src', el.getAttribute( 'src' ) );
} );
// HTML5 media elements
- toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
+ toArray( element.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
+ if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+ return;
+ }
+
if( el.hasAttribute( 'data-autoplay' ) && typeof el.play === 'function' ) {
el.play();
}
} );
// Normal iframes
- toArray( slide.querySelectorAll( 'iframe[src]' ) ).forEach( function( el ) {
+ toArray( element.querySelectorAll( 'iframe[src]' ) ).forEach( function( el ) {
+ if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+ return;
+ }
+
startEmbeddedIframe( { target: el } );
} );
// Lazy loading iframes
- toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
+ toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
+ if( closestParent( el, '.fragment' ) && !closestParent( el, '.fragment.visible' ) ) {
+ return;
+ }
+
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
el.removeEventListener( 'load', startEmbeddedIframe ); // remove first to avoid dupes
el.addEventListener( 'load', startEmbeddedIframe );
@@ -3098,23 +3239,29 @@
/**
* "Starts" the content of an embedded iframe using the
- * postmessage API.
+ * postMessage API.
+ *
+ * @param {object} event - postMessage API event
*/
function startEmbeddedIframe( event ) {
var iframe = event.target;
- // YouTube postMessage API
- if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
- iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
- }
- // Vimeo postMessage API
- else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
- iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
- }
- // Generic postMessage API
- else {
- iframe.contentWindow.postMessage( 'slide:start', '*' );
+ if( iframe && iframe.contentWindow ) {
+
+ // YouTube postMessage API
+ if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
+ iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
+ }
+ // Vimeo postMessage API
+ else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
+ iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
+ }
+ // Generic postMessage API
+ else {
+ iframe.contentWindow.postMessage( 'slide:start', '*' );
+ }
+
}
}
@@ -3122,6 +3269,8 @@
/**
* Stop playback of any embedded content inside of
* the targeted slide.
+ *
+ * @param {HTMLElement} slide
*/
function stopEmbeddedContent( slide ) {
@@ -3167,6 +3316,8 @@
/**
* Returns the number of past slides. This can be used as a global
* flattened index for slides.
+ *
+ * @return {number} Past slide count
*/
function getSlidePastCount() {
@@ -3211,6 +3362,8 @@
/**
* Returns a value ranging from 0-1 that represents
* how far into the presentation we have navigated.
+ *
+ * @return {number}
*/
function getProgress() {
@@ -3244,6 +3397,8 @@
/**
* Checks if this presentation is running inside of the
* speaker notes window.
+ *
+ * @return {boolean}
*/
function isSpeakerNotes() {
@@ -3299,7 +3454,7 @@
* Updates the page URL (hash) to reflect the current
* state.
*
- * @param {Number} delay The time in ms to wait before
+ * @param {number} delay The time in ms to wait before
* writing the hash
*/
function writeURL( delay ) {
@@ -3337,16 +3492,15 @@
}
}
-
/**
- * Retrieves the h/v location of the current, or specified,
- * slide.
+ * Retrieves the h/v location and fragment of the current,
+ * or specified, slide.
*
- * @param {HTMLElement} slide If specified, the returned
+ * @param {HTMLElement} [slide] If specified, the returned
* index will be for this slide rather than the currently
* active one
*
- * @return {Object} { h: <int>, v: <int>, f: <int> }
+ * @return {{h: number, v: number, f: number}}
*/
function getIndices( slide ) {
@@ -3394,6 +3548,8 @@
/**
* Retrieves the total number of slides in this presentation.
+ *
+ * @return {number}
*/
function getTotalSlides() {
@@ -3403,6 +3559,8 @@
/**
* Returns the slide element matching the specified index.
+ *
+ * @return {HTMLElement}
*/
function getSlide( x, y ) {
@@ -3422,6 +3580,10 @@
* All slides, even the ones with no background properties
* defined, have a background element so as long as the
* index is valid an element will be returned.
+ *
+ * @param {number} x Horizontal background index
+ * @param {number} y Vertical background index
+ * @return {(HTMLElement[]|*)}
*/
function getSlideBackground( x, y ) {
@@ -3430,10 +3592,7 @@
if( isPrintingPDF() ) {
var slide = getSlide( x, y );
if( slide ) {
- var background = slide.querySelector( '.slide-background' );
- if( background && background.parentNode === slide ) {
- return background;
- }
+ return slide.slideBackgroundElement;
}
return undefined;
@@ -3455,6 +3614,9 @@
* defined in two ways:
* 1. As a data-notes attribute on the slide <section>
* 2. As an <aside class="notes"> inside of the slide
+ *
+ * @param {HTMLElement} [slide=currentSlide]
+ * @return {(string|null)}
*/
function getSlideNotes( slide ) {
@@ -3480,6 +3642,8 @@
* Retrieves the current state of the presentation as
* an object. This state can then be restored at any
* time.
+ *
+ * @return {{indexh: number, indexv: number, indexf: number, paused: boolean, overview: boolean}}
*/
function getState() {
@@ -3498,7 +3662,8 @@
/**
* Restores the presentation to the given state.
*
- * @param {Object} state As generated by getState()
+ * @param {object} state As generated by getState()
+ * @see {@link getState} generates the parameter `state`
*/
function setState( state ) {
@@ -3532,6 +3697,9 @@
* attribute to each node if such an attribute is not already present,
* and sets that attribute to an integer value which is the position of
* the fragment within the fragments list.
+ *
+ * @param {object[]|*} fragments
+ * @return {object[]} sorted Sorted array of fragments
*/
function sortFragments( fragments ) {
@@ -3583,12 +3751,12 @@
/**
* Navigate to the specified slide fragment.
*
- * @param {Number} index The index of the fragment that
+ * @param {?number} index The index of the fragment that
* should be shown, -1 means all are invisible
- * @param {Number} offset Integer offset to apply to the
+ * @param {number} offset Integer offset to apply to the
* fragment index
*
- * @return {Boolean} true if a change was made in any
+ * @return {boolean} true if a change was made in any
* fragments visibility as part of this call
*/
function navigateFragment( index, offset ) {
@@ -3631,10 +3799,11 @@
element.classList.remove( 'current-fragment' );
// Announce the fragments one by one to the Screen Reader
- dom.statusDiv.textContent = element.textContent;
+ dom.statusDiv.textContent = getStatusText( element );
if( i === index ) {
element.classList.add( 'current-fragment' );
+ startEmbeddedContent( element );
}
}
// Hidden fragments
@@ -3644,7 +3813,6 @@
element.classList.remove( 'current-fragment' );
}
-
} );
if( fragmentsHidden.length ) {
@@ -3671,7 +3839,7 @@
/**
* Navigate to the next slide fragment.
*
- * @return {Boolean} true if there was a next fragment,
+ * @return {boolean} true if there was a next fragment,
* false otherwise
*/
function nextFragment() {
@@ -3683,7 +3851,7 @@
/**
* Navigate to the previous slide fragment.
*
- * @return {Boolean} true if there was a previous fragment,
+ * @return {boolean} true if there was a previous fragment,
* false otherwise
*/
function previousFragment() {
@@ -3701,9 +3869,13 @@
if( currentSlide ) {
- var currentFragment = currentSlide.querySelector( '.current-fragment' );
+ var fragment = currentSlide.querySelector( '.current-fragment' );
- var fragmentAutoSlide = currentFragment ? currentFragment.getAttribute( 'data-autoslide' ) : null;
+ // When the slide first appears there is no "current" fragment so
+ // we look for a data-autoslide timing on the first fragment
+ if( !fragment ) fragment = currentSlide.querySelector( '.fragment' );
+
+ var fragmentAutoSlide = fragment ? fragment.getAttribute( 'data-autoslide' ) : null;
var parentAutoSlide = currentSlide.parentNode ? currentSlide.parentNode.getAttribute( 'data-autoslide' ) : null;
var slideAutoSlide = currentSlide.getAttribute( 'data-autoslide' );
@@ -3728,12 +3900,13 @@
// If there are media elements with data-autoplay,
// automatically set the autoSlide duration to the
// length of that media. Not applicable if the slide
- // is divided up into fragments.
+ // is divided up into fragments.
+ // playbackRate is accounted for in the duration.
if( currentSlide.querySelectorAll( '.fragment' ).length === 0 ) {
toArray( currentSlide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
if( el.hasAttribute( 'data-autoplay' ) ) {
- if( autoSlide && el.duration * 1000 > autoSlide ) {
- autoSlide = ( el.duration * 1000 ) + 1000;
+ if( autoSlide && (el.duration * 1000 / el.playbackRate ) > autoSlide ) {
+ autoSlide = ( el.duration * 1000 / el.playbackRate ) + 1000;
}
}
} );
@@ -3920,6 +4093,8 @@
/**
* Called by all event handlers that are based on user
* input.
+ *
+ * @param {object} [event]
*/
function onUserInput( event ) {
@@ -3931,6 +4106,8 @@
/**
* Handler for the document level 'keypress' event.
+ *
+ * @param {object} event
*/
function onDocumentKeyPress( event ) {
@@ -3948,6 +4125,8 @@
/**
* Handler for the document level 'keydown' event.
+ *
+ * @param {object} event
*/
function onDocumentKeyDown( event ) {
@@ -3966,13 +4145,14 @@
// the keyboard
var activeElementIsCE = document.activeElement && document.activeElement.contentEditable !== 'inherit';
var activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
+ var activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
// Disregard the event if there's a focused element or a
// keyboard modifier key is present
- if( activeElementIsCE || activeElementIsInput || (event.shiftKey && event.keyCode !== 32) || event.altKey || event.ctrlKey || event.metaKey ) return;
+ if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || (event.shiftKey && event.keyCode !== 32) || event.altKey || event.ctrlKey || event.metaKey ) return;
- // While paused only allow resume keyboard events; 'b', '.''
- var resumeKeyCodes = [66,190,191];
+ // While paused only allow resume keyboard events; 'b', 'v', '.'
+ var resumeKeyCodes = [66,86,190,191];
var key;
// Custom key bindings for togglePause should be able to resume
@@ -4044,8 +4224,8 @@
case 32: isOverview() ? deactivateOverview() : event.shiftKey ? navigatePrev() : navigateNext(); break;
// return
case 13: isOverview() ? deactivateOverview() : triggered = false; break;
- // two-spot, semicolon, b, period, Logitech presenter tools "black screen" button
- case 58: case 59: case 66: case 190: case 191: togglePause(); break;
+ // two-spot, semicolon, b, v, period, Logitech presenter tools "black screen" button
+ case 58: case 59: case 66: case 86: case 190: case 191: togglePause(); break;
// f
case 70: enterFullscreen(); break;
// a
@@ -4082,6 +4262,8 @@
/**
* Handler for the 'touchstart' event, enables support for
* swipe and pinch gestures.
+ *
+ * @param {object} event
*/
function onTouchStart( event ) {
@@ -4107,6 +4289,8 @@
/**
* Handler for the 'touchmove' event.
+ *
+ * @param {object} event
*/
function onTouchMove( event ) {
@@ -4196,6 +4380,8 @@
/**
* Handler for the 'touchend' event.
+ *
+ * @param {object} event
*/
function onTouchEnd( event ) {
@@ -4205,6 +4391,8 @@
/**
* Convert pointer down to touch start.
+ *
+ * @param {object} event
*/
function onPointerDown( event ) {
@@ -4217,6 +4405,8 @@
/**
* Convert pointer move to touch move.
+ *
+ * @param {object} event
*/
function onPointerMove( event ) {
@@ -4229,6 +4419,8 @@
/**
* Convert pointer up to touch end.
+ *
+ * @param {object} event
*/
function onPointerUp( event ) {
@@ -4242,6 +4434,8 @@
/**
* Handles mouse wheel scrolling, throttled to avoid skipping
* multiple slides.
+ *
+ * @param {object} event
*/
function onDocumentMouseScroll( event ) {
@@ -4253,7 +4447,7 @@
if( delta > 0 ) {
navigateNext();
}
- else {
+ else if( delta < 0 ) {
navigatePrev();
}
@@ -4266,6 +4460,8 @@
* closest approximate horizontal slide using this equation:
*
* ( clickX / presentationWidth ) * numberOfSlides
+ *
+ * @param {object} event
*/
function onProgressClicked( event ) {
@@ -4296,6 +4492,8 @@
/**
* Handler for the window level 'hashchange' event.
+ *
+ * @param {object} [event]
*/
function onWindowHashChange( event ) {
@@ -4305,6 +4503,8 @@
/**
* Handler for the window level 'resize' event.
+ *
+ * @param {object} [event]
*/
function onWindowResize( event ) {
@@ -4314,6 +4514,8 @@
/**
* Handle for the window level 'visibilitychange' event.
+ *
+ * @param {object} [event]
*/
function onPageVisibilityChange( event ) {
@@ -4335,6 +4537,8 @@
/**
* Invoked when a slide is and we're in the overview.
+ *
+ * @param {object} event
*/
function onOverviewSlideClicked( event ) {
@@ -4368,6 +4572,8 @@
/**
* Handles clicks on links that are set to preview in the
* iframe overlay.
+ *
+ * @param {object} event
*/
function onPreviewLinkClicked( event ) {
@@ -4383,6 +4589,8 @@
/**
* Handles click on the auto-sliding controls element.
+ *
+ * @param {object} [event]
*/
function onAutoSlidePlayerClick( event ) {
@@ -4414,7 +4622,7 @@
*
* @param {HTMLElement} container The component will append
* itself to this
- * @param {Function} progressCheck A method which will be
+ * @param {function} progressCheck A method which will be
* called frequently to get the current progress on a range
* of 0-1
*/
@@ -4451,6 +4659,9 @@
}
+ /**
+ * @param value
+ */
Playback.prototype.setPlaying = function( value ) {
var wasPlaying = this.playing;
@@ -4605,6 +4816,9 @@
navigatePrev: navigatePrev,
navigateNext: navigateNext,
+ // Shows a help overlay with keyboard shortcuts
+ showHelp: showHelp,
+
// Forces an update in slide layout
layout: layout,