aboutsummaryrefslogtreecommitdiffhomepage
path: root/js/reveal.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/reveal.js')
-rw-r--r--js/reveal.js129
1 files changed, 96 insertions, 33 deletions
diff --git a/js/reveal.js b/js/reveal.js
index f6b2c19..e25337e 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -103,6 +103,9 @@
// Stop auto-sliding after user input
autoSlideStoppable: true,
+ // Use this method for navigation when auto-sliding (defaults to navigateNext)
+ autoSlideMethod: null,
+
// Enable slide navigation via mouse wheel
mouseWheel: false,
@@ -542,6 +545,19 @@
document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + 'px';
+ // Add each slide's index as attributes on itself, we need these
+ // indices to generate slide numbers below
+ toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) {
+ hslide.setAttribute( 'data-index-h', h );
+
+ if( hslide.classList.contains( 'stack' ) ) {
+ toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) {
+ vslide.setAttribute( 'data-index-h', h );
+ vslide.setAttribute( 'data-index-v', v );
+ } );
+ }
+ } );
+
// Slide and slide background layout
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
@@ -575,18 +591,33 @@
background.style.left = -left + 'px';
}
- // If we're configured to `showNotes`, inject them into each slide
+ // Inject notes if `showNotes` is enabled
if( config.showNotes ) {
var notes = getSlideNotes( slide );
if( notes ) {
+ var notesSpacing = 8;
var notesElement = document.createElement( 'div' );
notesElement.classList.add( 'speaker-notes' );
notesElement.classList.add( 'speaker-notes-pdf' );
notesElement.innerHTML = notes;
- notesElement.style.bottom = ( 40 - top ) + 'px';
+ notesElement.style.left = ( notesSpacing - left ) + 'px';
+ notesElement.style.bottom = ( notesSpacing - top ) + 'px';
+ notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
slide.appendChild( notesElement );
}
}
+
+ // Inject slide numbers if `slideNumbers` are enabled
+ if( config.slideNumber ) {
+ var slideNumberH = parseInt( slide.getAttribute( 'data-index-h' ), 10 ) + 1,
+ slideNumberV = parseInt( slide.getAttribute( 'data-index-v' ), 10 ) + 1;
+
+ var numberElement = document.createElement( 'div' );
+ numberElement.classList.add( 'slide-number' );
+ numberElement.classList.add( 'slide-number-pdf' );
+ numberElement.innerHTML = formatSlideNumber( slideNumberH, '.', slideNumberV );
+ background.appendChild( numberElement );
+ }
}
} );
@@ -856,6 +887,7 @@
dom.controls.style.display = config.controls ? 'block' : 'none';
dom.progress.style.display = config.progress ? 'block' : 'none';
+ dom.slideNumber.style.display = config.slideNumber && !isPrintingPDF() ? 'block' : 'none';
if( config.rtl ) {
dom.wrapper.classList.add( 'rtl' );
@@ -2512,30 +2544,59 @@
/**
* Updates the slide number div to reflect the current slide.
*
- * Slide number format can be defined as a string using the
- * following variables:
- * h: current slide's horizontal index
- * v: current slide's vertical index
- * c: current slide index (flattened)
- * t: total number of slides (flattened)
+ * 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
*/
function updateSlideNumber() {
// Update slide number if enabled
- if( config.slideNumber && dom.slideNumber) {
+ if( config.slideNumber && dom.slideNumber ) {
- // Default to only showing the current slide number
- var format = 'c';
+ var value = [];
+ var format = 'h.v';
- // Check if a custom slide number format is available
+ // Check if a custom number format is available
if( typeof config.slideNumber === 'string' ) {
format = config.slideNumber;
}
- dom.slideNumber.innerHTML = format.replace( /h/g, indexh )
- .replace( /v/g, indexv )
- .replace( /c/g, getSlidePastCount() + 1 )
- .replace( /t/g, getTotalSlides() );
+ switch( format ) {
+ case 'c':
+ value.push( getSlidePastCount() + 1 );
+ break;
+ case 'c/t':
+ value.push( getSlidePastCount() + 1, '/', getTotalSlides() );
+ break;
+ case 'h/v':
+ value.push( indexh + 1 );
+ if( isVerticalSlide() ) value.push( '/', indexv + 1 );
+ break;
+ default:
+ value.push( indexh + 1 );
+ if( isVerticalSlide() ) value.push( '.', indexv + 1 );
+ }
+
+ dom.slideNumber.innerHTML = formatSlideNumber( value[0], value[1], value[2] );
+ }
+
+ }
+
+ /**
+ * Applies HTML formatting to a slide number before it's
+ * written to the DOM.
+ */
+ function formatSlideNumber( a, delimiter, b ) {
+
+ if( typeof b === 'number' && !isNaN( b ) ) {
+ return '<span class="slide-number-a">'+ a +'</span>' +
+ '<span class="slide-number-delimiter">'+ delimiter +'</span>' +
+ '<span class="slide-number-b">'+ b +'</span>';
+ }
+ else {
+ return '<span class="slide-number-a">'+ a +'</span>';
}
}
@@ -2740,7 +2801,7 @@
horizontalOffsetMultiplier = config.parallaxBackgroundHorizontal;
}
else {
- horizontalOffsetMultiplier = ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 );
+ horizontalOffsetMultiplier = horizontalSlideCount > 1 ? ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) : 0;
}
horizontalOffset = horizontalOffsetMultiplier * indexh * -1;
@@ -3635,7 +3696,10 @@
// - The overview isn't active
// - The presentation isn't over
if( autoSlide && !autoSlidePaused && !isPaused() && !isOverview() && ( !Reveal.isLastSlide() || availableFragments().next || config.loop === true ) ) {
- autoSlideTimeout = setTimeout( navigateNext, autoSlide );
+ autoSlideTimeout = setTimeout( function() {
+ typeof config.autoSlideMethod === 'function' ? config.autoSlideMethod() : navigateNext();
+ cueAutoSlide();
+ }, autoSlide );
autoSlideStartTime = Date.now();
}
@@ -3781,10 +3845,6 @@
}
}
- // If auto-sliding is enabled we need to cue up
- // another timeout
- cueAutoSlide();
-
}
/**
@@ -4311,8 +4371,9 @@
function Playback( container, progressCheck ) {
// Cosmetics
- this.diameter = 50;
- this.thickness = 3;
+ this.diameter = 100;
+ this.diameter2 = this.diameter/2;
+ this.thickness = 6;
// Flags if we are currently playing
this.playing = false;
@@ -4330,6 +4391,8 @@
this.canvas.className = 'playback';
this.canvas.width = this.diameter;
this.canvas.height = this.diameter;
+ this.canvas.style.width = this.diameter2 + 'px';
+ this.canvas.style.height = this.diameter2 + 'px';
this.context = this.canvas.getContext( '2d' );
this.container.appendChild( this.canvas );
@@ -4380,10 +4443,10 @@
Playback.prototype.render = function() {
var progress = this.playing ? this.progress : 0,
- radius = ( this.diameter / 2 ) - this.thickness,
- x = this.diameter / 2,
- y = this.diameter / 2,
- iconSize = 14;
+ radius = ( this.diameter2 ) - this.thickness,
+ x = this.diameter2,
+ y = this.diameter2,
+ iconSize = 28;
// Ease towards 1
this.progressOffset += ( 1 - this.progressOffset ) * 0.1;
@@ -4396,7 +4459,7 @@
// Solid background color
this.context.beginPath();
- this.context.arc( x, y, radius + 2, 0, Math.PI * 2, false );
+ this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false );
this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )';
this.context.fill();
@@ -4421,14 +4484,14 @@
// Draw play/pause icons
if( this.playing ) {
this.context.fillStyle = '#fff';
- this.context.fillRect( 0, 0, iconSize / 2 - 2, iconSize );
- this.context.fillRect( iconSize / 2 + 2, 0, iconSize / 2 - 2, iconSize );
+ this.context.fillRect( 0, 0, iconSize / 2 - 4, iconSize );
+ this.context.fillRect( iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize );
}
else {
this.context.beginPath();
- this.context.translate( 2, 0 );
+ this.context.translate( 4, 0 );
this.context.moveTo( 0, 0 );
- this.context.lineTo( iconSize - 2, iconSize / 2 );
+ this.context.lineTo( iconSize - 4, iconSize / 2 );
this.context.lineTo( 0, iconSize );
this.context.fillStyle = '#fff';
this.context.fill();