Browse Source

more flexible back arrow controls option

Hakim El Hattab 8 years ago
parent
commit
2155415767
3 changed files with 25 additions and 12 deletions
  1. 8 4
      css/reveal.css
  2. 13 5
      css/reveal.scss
  3. 4 3
      js/reveal.js

+ 8 - 4
css/reveal.css

@@ -267,12 +267,16 @@ body {
     left: 50%;
     -webkit-transform: translateX(-50%) rotate(-90deg);
             transform: translateX(-50%) rotate(-90deg); }
-  .reveal .controls.deemphasize-back-arrows .navigate-left.enabled,
-  .reveal .controls.deemphasize-back-arrows .navigate-up.enabled {
+  .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
+  .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
     opacity: 0.3; }
-    .reveal .controls.deemphasize-back-arrows .navigate-left.enabled:hover,
-    .reveal .controls.deemphasize-back-arrows .navigate-up.enabled:hover {
+    .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover,
+    .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover {
       opacity: 1; }
+  .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,
+  .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+    opacity: 0;
+    visibility: hidden; }
   .reveal .controls .enabled {
     visibility: visible;
     opacity: 0.7;

+ 13 - 5
css/reveal.scss

@@ -333,11 +333,11 @@ body {
 		transform: translateX(-50%) rotate( -90deg );
 	}
 
-	// The deemphasize back arrows option strongly deemphasizes
-	// backwards navigation in favor of drawing attention to
-	// forwards navigation
-	&.deemphasize-back-arrows .navigate-left.enabled,
-	&.deemphasize-back-arrows .navigate-up.enabled {
+	// Back arrow style: "deemphasized":
+	// Strongly deemphasizes backwards navigation in favor of drawing
+	// attention to forwards navigation
+	&[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
+	&[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -345,6 +345,14 @@ body {
 		}
 	}
 
+	// Back arrow style: "hidden":
+	// Never shows any arrows for backwards navigation
+	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
+	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
+		opacity: 0;
+		visibility: hidden;
+	}
+
 	// Any control button that can be clicked is "enabled"
 	.enabled {
 		visibility: visible;

+ 4 - 3
js/reveal.js

@@ -55,8 +55,9 @@
 			// Determines where controls appear, "edges" or "bottom-right"
 			controlsPlacement: 'bottom-right',
 
-			// De-emphasizes backwards navigation controls
-			controlsDeemphasizeBackArrows: true,
+			// Specifies the display rules for backwards navigation arrows;
+			// "deemphasized", "hidden" or "visible"
+			controlsBackArrows: 'deemphasized',
 
 			// Display a presentation progress bar
 			progress: true,
@@ -1005,7 +1006,7 @@
 		dom.progress.style.display = config.progress ? 'block' : 'none';
 
 		dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement );
-		dom.controls.classList.toggle( 'deemphasize-back-arrows', config.controlsDeemphasizeBackArrows );
+		dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
 
 		if( config.shuffle ) {
 			shuffle();