improve controls on touch devices

3 files changed, 40 insertions, 17 deletions

diff --git a/css/reveal.css b/css/reveal.css
index c8cefe1..bc31453 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -376,6 +376,16 @@ body {
 .reveal.has-light-background .controls {
   color: #000; }
 
+.reveal.no-hover .controls .controls-arrow:hover:before,
+.reveal.no-hover .controls .controls-arrow:active:before {
+  -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
+          transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
+
+.reveal.no-hover .controls .controls-arrow:hover:after,
+.reveal.no-hover .controls .controls-arrow:active:after {
+  -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
+          transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }
+
 @media screen and (min-width: 500px) {
   .reveal .controls[data-controls-layout="edges"] {
     top: 0;
diff --git a/css/reveal.scss b/css/reveal.scss
index 31f235f..b82cebc 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -251,22 +251,22 @@ $controlArrowSize: 3.6em;
 $controlArrowSpacing: 1.4em;
 $controlArrowLength: 2.6em;
 $controlArrowThickness: 0.5em;
+$controlsArrowAngle: 45deg;
+$controlsArrowAngleHover: 40deg;
+$controlsArrowAngleActive: 36deg;
 
-.reveal .controls {
-	$angle: 45deg;
-	$angleHover: 40deg;
-	$angleActive: 36deg;
-	$spacing: 12px;
-
-	@mixin arrowTransform( $angle ) {
-		&:before {
-			transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
-		}
+@mixin controlsArrowTransform( $angle ) {
+	&:before {
+		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
+	}
 
-		&:after {
-			transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
-		}
+	&:after {
+		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
 	}
+}
+
+.reveal .controls {
+	$spacing: 12px;
 
 	display: none;
 	position: absolute;
@@ -323,14 +323,14 @@ $controlArrowThickness: 0.5em;
 		width: $controlArrowSize;
 		height: $controlArrowSize;
 
-		@include arrowTransform( $angle );
+		@include controlsArrowTransform( $controlsArrowAngle );
 
 		&:hover {
-			@include arrowTransform( $angleHover );
+			@include controlsArrowTransform( $controlsArrowAngleHover );
 		}
 
 		&:active {
-			@include arrowTransform( $angleActive );
+			@include controlsArrowTransform( $controlsArrowAngleActive );
 		}
 	}
 
@@ -438,14 +438,20 @@ $controlArrowThickness: 0.5em;
 	bottom: $controlArrowSpacing;
 }
 
+// Invert arrows based on background color
 .reveal.has-dark-background .controls {
 	color: #fff;
 }
-
 .reveal.has-light-background .controls {
 	color: #000;
 }
 
+// Disable active states on touch devices
+.reveal.no-hover .controls .controls-arrow:hover,
+.reveal.no-hover .controls .controls-arrow:active {
+	@include controlsArrowTransform( $controlsArrowAngle );
+}
+
 // Edge aligned controls layout
 @media screen and (min-width: 500px) {
 
diff --git a/js/reveal.js b/js/reveal.js
index bf2f6a0..d0178d4 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -523,6 +523,13 @@
 		// 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' );
+		}
+
 		// Background element
 		dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );