summaryrefslogtreecommitdiffhomepage
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/reveal.js146
1 files changed, 130 insertions, 16 deletions
diff --git a/js/reveal.js b/js/reveal.js
index d3ba03c..3bde30a 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -49,9 +49,20 @@
minScale: 0.2,
maxScale: 2.0,
- // Display controls in the bottom right corner
+ // Display presentation control arrows
controls: true,
+ // Help the user learn the controls by providing hints, for example by
+ // bouncing the down arrow when they first encounter a vertical slide
+ controlsTutorial: true,
+
+ // Determines where controls appear, "edges" or "bottom-right"
+ controlsLayout: 'bottom-right',
+
+ // Visibility rule for backwards navigation arrows; "faded", "hidden"
+ // or "visible"
+ controlsBackArrows: 'faded',
+
// Display a presentation progress bar
progress: true,
@@ -207,6 +218,10 @@
previousBackground,
+ // Remember which directions that the user has navigated towards
+ hasNavigatedRight = false,
+ hasNavigatedDown = false,
+
// Slides may hold a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of
// all current slides.
@@ -508,6 +523,20 @@
// Prevent transitions while we're loading
dom.slides.classList.add( 'no-transition' );
+ if( isMobileDevice ) {
+ dom.wrapper.classList.add( 'no-hover' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'no-hover' );
+ }
+
+ if( /iphone/gi.test( UA ) ) {
+ dom.wrapper.classList.add( 'ua-iphone' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'ua-iphone' );
+ }
+
// Background element
dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );
@@ -516,11 +545,11 @@
dom.progressbar = dom.progress.querySelector( 'span' );
// Arrow controls
- createSingletonNode( dom.wrapper, 'aside', 'controls',
- '<button class="navigate-left" aria-label="previous slide"></button>' +
- '<button class="navigate-right" aria-label="next slide"></button>' +
- '<button class="navigate-up" aria-label="above slide"></button>' +
- '<button class="navigate-down" aria-label="below slide"></button>' );
+ dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
+ '<button class="navigate-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' +
+ '<button class="navigate-right" aria-label="next slide"><div class="controls-arrow"></div></button>' +
+ '<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' +
+ '<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );
// Slide number
dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
@@ -533,9 +562,6 @@
// 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.wrapper.setAttribute( 'role', 'application' );
// There can be multiple instances of controls throughout the page
@@ -546,6 +572,10 @@
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
+ // The right and down arrows in the standard reveal.js controls
+ dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );
+ dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );
+
dom.statusDiv = createStatusDiv();
}
@@ -789,7 +819,7 @@
// If no node was found, create it now
var node = document.createElement( tagname );
- node.classList.add( classname );
+ node.className = classname;
if( typeof innerHTML === 'string' ) {
node.innerHTML = innerHTML;
}
@@ -1001,6 +1031,9 @@
dom.controls.style.display = config.controls ? 'block' : 'none';
dom.progress.style.display = config.progress ? 'block' : 'none';
+ dom.controls.setAttribute( 'data-controls-layout', config.controlsLayout );
+ dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
+
if( config.shuffle ) {
shuffle();
}
@@ -1025,12 +1058,8 @@
}
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' );
- }
if( config.mouseWheel ) {
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
@@ -2463,6 +2492,7 @@
updateSlideNumber();
updateSlidesVisibility();
updateBackground( true );
+ updateNotesVisibility();
updateNotes();
formatEmbeddedContent();
@@ -2732,6 +2762,22 @@
}
}
+ // Flag if there are ANY vertical slides, anywhere in the deck
+ if( dom.wrapper.querySelectorAll( '.slides>section>section' ).length ) {
+ dom.wrapper.classList.add( 'has-vertical-slides' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'has-vertical-slides' );
+ }
+
+ // Flag if there are ANY horizontal slides, anywhere in the deck
+ if( dom.wrapper.querySelectorAll( '.slides>section' ).length > 1 ) {
+ dom.wrapper.classList.add( 'has-horizontal-slides' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'has-horizontal-slides' );
+ }
+
}
}
@@ -2746,13 +2792,40 @@
if( config.showNotes && dom.speakerNotes && currentSlide && !isPrintingPDF() ) {
- dom.speakerNotes.innerHTML = getSlideNotes() || '';
+ dom.speakerNotes.innerHTML = getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
}
}
/**
+ * Updates the visibility of the speaker notes sidebar that
+ * is used to share annotated slides. The notes sidebar is
+ * only visible if showNotes is true and there are notes on
+ * one or more slides in the deck.
+ */
+ function updateNotesVisibility() {
+
+ if( config.showNotes && hasNotes() ) {
+ dom.wrapper.classList.add( 'show-notes' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'show-notes' );
+ }
+
+ }
+
+ /**
+ * Checks if there are speaker notes for ANY slide in the
+ * presentation.
+ */
+ function hasNotes() {
+
+ return dom.slides.querySelectorAll( '[data-notes], aside.notes' ).length > 0;
+
+ }
+
+ /**
* Updates the progress bar to reflect the current slide.
*/
function updateProgress() {
@@ -2882,6 +2955,26 @@
}
+ if( config.controlsTutorial ) {
+
+ // Highlight control arrows with an animation to ensure
+ // that the viewer knows how to navigate
+ if( !hasNavigatedDown && routes.down ) {
+ dom.controlsDownArrow.classList.add( 'highlight' );
+ }
+ else {
+ dom.controlsDownArrow.classList.remove( 'highlight' );
+
+ if( !hasNavigatedRight && routes.right && indexv === 0 ) {
+ dom.controlsRightArrow.classList.add( 'highlight' );
+ }
+ else {
+ dom.controlsRightArrow.classList.remove( 'highlight' );
+ }
+ }
+
+ }
+
}
/**
@@ -3076,6 +3169,7 @@
// Media elements with data-src attributes
toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src]' ) ).forEach( function( element ) {
element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
+ element.setAttribute( 'data-lazy-loaded', '' );
element.removeAttribute( 'data-src' );
} );
@@ -3086,6 +3180,7 @@
toArray( media.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) {
source.setAttribute( 'src', source.getAttribute( 'data-src' ) );
source.removeAttribute( 'data-src' );
+ source.setAttribute( 'data-lazy-loaded', '' );
sources += 1;
} );
@@ -3192,6 +3287,18 @@
background.style.display = 'none';
}
+ // Reset lazy-loaded media elements with src attributes
+ toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src]' ) ).forEach( function( element ) {
+ element.setAttribute( 'data-src', element.getAttribute( 'src' ) );
+ element.removeAttribute( 'src' );
+ } );
+
+ // Reset lazy-loaded media elements with <source> children
+ toArray( slide.querySelectorAll( 'video[data-lazy-loaded] source[src], audio source[src]' ) ).forEach( function( source ) {
+ source.setAttribute( 'data-src', source.getAttribute( 'src' ) );
+ source.removeAttribute( 'src' );
+ } );
+
}
/**
@@ -4134,6 +4241,8 @@
function navigateRight() {
+ hasNavigatedRight = true;
+
// Reverse for RTL
if( config.rtl ) {
if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) {
@@ -4158,6 +4267,8 @@
function navigateDown() {
+ hasNavigatedDown = true;
+
// Prioritize revealing fragments
if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) {
slide( indexh, indexv + 1 );
@@ -4204,6 +4315,9 @@
*/
function navigateNext() {
+ hasNavigatedRight = true;
+ hasNavigatedDown = true;
+
// Prioritize revealing fragments
if( nextFragment() === false ) {
if( availableRoutes().down ) {
@@ -4872,7 +4986,7 @@
this.context.beginPath();
this.context.arc( x, y, radius, 0, Math.PI * 2, false );
this.context.lineWidth = this.thickness;
- this.context.strokeStyle = '#666';
+ this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )';
this.context.stroke();
if( this.playing ) {