diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2015-11-19 15:39:29 +0100 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2015-11-19 15:39:29 +0100 |
| commit | 0e763c7171d2ade5c2057293b2c8eca75bd3ee8c (patch) | |
| tree | 4c9632256ad456cbfbdc58584ef75d531dcd8195 /js | |
| parent | c8319b9b1a19b23a0899e1aade4f3e4fca0a1f20 (diff) | |
| download | perl-software-in-gnu-guix-0e763c7171d2ade5c2057293b2c8eca75bd3ee8c.tar perl-software-in-gnu-guix-0e763c7171d2ade5c2057293b2c8eca75bd3ee8c.tar.gz | |
2x playback controls for retina displays
Diffstat (limited to 'js')
| -rw-r--r-- | js/reveal.js | 18 |
1 files changed, 10 insertions, 8 deletions
diff --git a/js/reveal.js b/js/reveal.js index 6e7acfa..47c953d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -4366,8 +4366,8 @@ function Playback( container, progressCheck ) { // Cosmetics - this.diameter = 50; - this.thickness = 3; + this.diameter = 100; + this.thickness = 6; // Flags if we are currently playing this.playing = false; @@ -4385,6 +4385,8 @@ this.canvas.className = 'playback'; this.canvas.width = this.diameter; this.canvas.height = this.diameter; + this.canvas.style.width = this.diameter/2 + 'px'; + this.canvas.style.height = this.diameter/2 + 'px'; this.context = this.canvas.getContext( '2d' ); this.container.appendChild( this.canvas ); @@ -4438,7 +4440,7 @@ radius = ( this.diameter / 2 ) - this.thickness, x = this.diameter / 2, y = this.diameter / 2, - iconSize = 14; + iconSize = 28; // Ease towards 1 this.progressOffset += ( 1 - this.progressOffset ) * 0.1; @@ -4451,7 +4453,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(); @@ -4476,14 +4478,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(); |