foundation for playback component

This commit is contained in:
Hakim El Hattab 2013-10-13 13:02:50 -04:00
parent e14f5a95da
commit 9fa1382508
4 changed files with 135 additions and 3 deletions

View file

@ -1551,6 +1551,19 @@ body {
}
/*********************************************
* PLAYBACK COMPONENT
*********************************************/
.reveal .playback {
position: fixed;
left: 15px;
bottom: 15px;
z-index: 30;
}
/*********************************************
* ROLLING LINKS
*********************************************/

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View file

@ -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 --------------------------------//
// --------------------------------------------------------------------//

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long