|
|
@ -163,6 +163,9 @@ var Reveal = (function(){ |
|
|
|
// Flags if the interaction event listeners are bound
|
|
|
|
eventsAreBound = false, |
|
|
|
|
|
|
|
// A visual component used to control auto slide playback
|
|
|
|
autoSlidePlayer, |
|
|
|
|
|
|
|
// Holds information about the currently ongoing touch input
|
|
|
|
touch = { |
|
|
|
startX: 0, |
|
|
@ -570,6 +573,18 @@ var Reveal = (function(){ |
|
|
|
enablePreviewLinks( '[data-preview-link]' ); |
|
|
|
} |
|
|
|
|
|
|
|
if( config.autoSlide && config.autoSlideStoppable ) { |
|
|
|
autoSlidePlayer = new Playback( dom.wrapper, function() { |
|
|
|
return 0.5; |
|
|
|
} ); |
|
|
|
|
|
|
|
autoSlidePlayer.setPlaying( true ); |
|
|
|
} |
|
|
|
else if( autoSlidePlayer ) { |
|
|
|
autoSlidePlayer.destroy(); |
|
|
|
autoSlidePlayer = null; |
|
|
|
} |
|
|
|
|
|
|
|
// Load the theme in the config, if it's not already loaded
|
|
|
|
if( config.theme && dom.theme ) { |
|
|
|
var themeURL = dom.theme.getAttribute( 'href' ); |
|
|
@ -2768,6 +2783,110 @@ var Reveal = (function(){ |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------------------------------------//
|
|
|
|
// ------------------------ PLAYBACK COMPONENT ------------------------//
|
|
|
|
// --------------------------------------------------------------------//
|
|
|
|
|
|
|
|
|
|
|
|
function Playback( container, progressCheck ) { |
|
|
|
|
|
|
|
this.size = 50; |
|
|
|
this.thickness = 3; |
|
|
|
this.playing = false; |
|
|
|
this.progress = 0; |
|
|
|
|
|
|
|
this.container = container; |
|
|
|
this.progressCheck = progressCheck; |
|
|
|
|
|
|
|
this.canvas = document.createElement( 'canvas' ); |
|
|
|
this.canvas.className = 'playback'; |
|
|
|
this.canvas.width = this.size; |
|
|
|
this.canvas.height = this.size; |
|
|
|
this.context = this.canvas.getContext( '2d' ); |
|
|
|
|
|
|
|
this.container.appendChild( this.canvas ); |
|
|
|
|
|
|
|
this.render(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
Playback.prototype.setPlaying = function( value ) { |
|
|
|
|
|
|
|
this.playing = value; |
|
|
|
|
|
|
|
// Render instantly
|
|
|
|
this.render(); |
|
|
|
|
|
|
|
// Start repainting if we're playing
|
|
|
|
if( this.playing ) { |
|
|
|
this.update(); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Playback.prototype.setProgress = function( value ) { |
|
|
|
|
|
|
|
this.progress = value; |
|
|
|
this.render(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Playback.prototype.update = function() { |
|
|
|
|
|
|
|
this.progress = this.progressCheck(); |
|
|
|
this.render(); |
|
|
|
|
|
|
|
if( this.playing ) { |
|
|
|
window.requestAnimationFrame( this.update.bind( this ) ); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Playback.prototype.render = function() { |
|
|
|
|
|
|
|
var radius = ( this.size / 2 ) - this.thickness, |
|
|
|
x = this.size / 2, |
|
|
|
y = this.size / 2; |
|
|
|
|
|
|
|
var startAngle = - Math.PI / 2; |
|
|
|
var endAngle = startAngle + ( this.progress * ( Math.PI * 2 ) ); |
|
|
|
|
|
|
|
this.context.save(); |
|
|
|
this.context.clearRect( 0, 0, this.size, this.size ); |
|
|
|
|
|
|
|
// Solid background color
|
|
|
|
this.context.beginPath(); |
|
|
|
this.context.arc( x, y, radius, 0, Math.PI * 2, false ); |
|
|
|
this.context.fillStyle = 'rgba(0,0,0,0.2)'; |
|
|
|
this.context.fill(); |
|
|
|
|
|
|
|
// Draw progress track
|
|
|
|
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.stroke(); |
|
|
|
|
|
|
|
// Draw progress along arc edge
|
|
|
|
this.context.beginPath(); |
|
|
|
this.context.arc( x, y, radius, startAngle, endAngle, false ); |
|
|
|
this.context.lineWidth = this.thickness; |
|
|
|
this.context.strokeStyle = '#fff'; |
|
|
|
this.context.stroke(); |
|
|
|
|
|
|
|
this.context.restore(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
Playback.prototype.destroy = function() { |
|
|
|
|
|
|
|
if( this.canvas.parentNode ) { |
|
|
|
this.container.removeChild( this.canvas ); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------------------------------------//
|
|
|
|
// ------------------------------- API --------------------------------//
|
|
|
|
// --------------------------------------------------------------------//
|
|
|
|