Merge pull request #2579 from Martinomagnifico/dev

Add RTL support to Controls
2020-02-06 15:09:42 +01:00 · 2020-02-06 15:09:42 +01:00 · 8e3a065596
parent 4802a2b7f4 ccb42c7ca9
commit 8e3a065596
3 changed files with 125 additions and 16 deletions
--- a/css/reveal.css
+++ b/css/reveal.css
@ -198,6 +198,28 @@ body {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px); } }

+@-webkit-keyframes bounce-left {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  20% {
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px); }
+  30% {
+    -webkit-transform: translateX(5px);
+            transform: translateX(5px); } }
+
+@keyframes bounce-left {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  20% {
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px); }
+  30% {
+    -webkit-transform: translateX(5px);
+            transform: translateX(5px); } }
+
@-webkit-keyframes bounce-down {
  0%, 10%, 25%, 40%, 50% {
    -webkit-transform: translateY(0);
@ -291,6 +313,9 @@ body {
    bottom: 3.2em;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px); }
+    .reveal .controls .navigate-left.highlight {
+      -webkit-animation: bounce-left 2s 50 both ease-out;
+              animation: bounce-left 2s 50 both ease-out; }
  .reveal .controls .navigate-right {
    right: 0;
    bottom: 3.2em;
@ -322,13 +347,10 @@ body {
    .reveal .controls .navigate-down.highlight {
      -webkit-animation: bounce-down 2s 50 both ease-out;
              animation: bounce-down 2s 50 both ease-out; }
-  .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
  .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
    opacity: 0.3; }
-    .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
    .reveal .controls[data-controls-back-arrows="faded"] .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; }
@ -344,6 +366,24 @@ body {
  .reveal .controls .enabled.fragmented:hover {
    opacity: 1; }

+.reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled {
+  opacity: 0.3; }
+  .reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover {
+    opacity: 1; }
+
+.reveal:not(.rtl) .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled {
+  opacity: 0;
+  visibility: hidden; }
+
+.reveal.rtl .controls[data-controls-back-arrows="faded"] .navigate-right.enabled {
+  opacity: 0.3; }
+  .reveal.rtl .controls[data-controls-back-arrows="faded"] .navigate-right.enabled:hover {
+    opacity: 1; }
+
+.reveal.rtl .controls[data-controls-back-arrows="hidden"] .navigate-right.enabled {
+  opacity: 0;
+  visibility: hidden; }
+
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
  display: none; }
--- a/css/reveal.scss
+++ b/css/reveal.scss
@ -230,6 +230,12 @@ body {
 	30% {transform: translateX(-5px);}
 }

+@keyframes bounce-left {
+	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
+	20% {transform: translateX(-10px);}
+	30% {transform: translateX(5px);}
+}
+
@keyframes bounce-down {
 	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
 	20% {transform: translateY(10px);}
@ -327,6 +333,10 @@ $controlsArrowAngleActive: 36deg;
 		right: $controlArrowSize + $controlArrowSpacing*2;
 		bottom: $controlArrowSpacing + $controlArrowSize/2;
 		transform: translateX( -10px );
+
+		&.highlight {
+			animation: bounce-left 2s 50 both ease-out;
+		}
 	}

 	.navigate-right {
@ -371,7 +381,6 @@ $controlsArrowAngleActive: 36deg;
 	// Back arrow style: "faded":
 	// Deemphasize backwards navigation arrows in favor of drawing
 	// attention to forwards navigation
-	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
 	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
 		opacity: 0.3;

@ -382,7 +391,6 @@ $controlsArrowAngleActive: 36deg;

 	// Back arrow style: "hidden":
 	// Never show arrows for backwards navigation
-	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
 	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
 		opacity: 0;
 		visibility: hidden;
@ -408,6 +416,44 @@ $controlsArrowAngleActive: 36deg;
 	}
 }

+.reveal:not(.rtl) .controls {
+	// Back arrow style: "faded":
+	// Deemphasize left arrow
+	&[data-controls-back-arrows="faded"] .navigate-left.enabled {
+		opacity: 0.3;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	// Back arrow style: "hidden":
+	// Never show left arrow
+	&[data-controls-back-arrows="hidden"] .navigate-left.enabled {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+.reveal.rtl .controls {
+	// Back arrow style: "faded":
+	// Deemphasize right arrow in RTL mode
+	&[data-controls-back-arrows="faded"] .navigate-right.enabled  {
+		opacity: 0.3;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	// Back arrow style: "hidden":
+	// Never show right arrow in RTL mode
+	&[data-controls-back-arrows="hidden"] .navigate-right.enabled {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
 	display: none;
--- a/js/reveal.js
+++ b/js/reveal.js
@ -344,6 +344,7 @@

 		// Remember which directions that the user has navigated towards
 		hasNavigatedRight = false,
+		hasNavigatedLeft = false,
 		hasNavigatedDown = false,

 		// Slides may hold a data-state attribute which we pick up and apply
@ -767,9 +768,12 @@
 		dom.progressbar = dom.progress.querySelector( 'span' );

 		// Arrow controls
+		var leftArrowLabel = config.rtl ? "next slide" : "previous slide";
+		var rightArrowLabel = config.rtl ? "previous slide" : "next slide";
+
 		dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
-			'<button class="navigate-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' +
-			'<button class="navigate-right" aria-label="next slide"><div class="controls-arrow"></div></button>' +
+			'<button class="navigate-left" aria-label="' + leftArrowLabel + '"><div class="controls-arrow"></div></button>' +
+			'<button class="navigate-right" aria-label="' + rightArrowLabel + '"><div class="controls-arrow"></div></button>' +
 			'<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' +
 			'<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );

@ -794,8 +798,9 @@
 		dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
 		dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );

-		// The right and down arrows in the standard reveal.js controls
+		// The left, right and down arrows in the standard reveal.js controls
 		dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );
+		dom.controlsLeftArrow = dom.controls.querySelector( '.navigate-left' );
 		dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );

 		dom.statusDiv = createStatusDiv();
@ -3619,6 +3624,7 @@

 		}

+
 		if( config.controlsTutorial ) {

 			// Highlight control arrows with an animation to ensure
@ -3629,6 +3635,17 @@
 			else {
 				dom.controlsDownArrow.classList.remove( 'highlight' );

+				if (config.rtl) {
+
+					if( !hasNavigatedLeft && routes.left && indexv === 0 ) {
+						dom.controlsLeftArrow.classList.add( 'highlight' );
+					}
+					else {
+						dom.controlsLeftArrow.classList.remove( 'highlight' );
+					}
+
+				} else {
+
 					if( !hasNavigatedRight && routes.right && indexv === 0 ) {
 						dom.controlsRightArrow.classList.add( 'highlight' );
 					}
@ -3636,9 +3653,8 @@
 						dom.controlsRightArrow.classList.remove( 'highlight' );
 					}
 				}
-
 			}
-
+		}
 	}

 	/**
@ -5328,6 +5344,8 @@

 	function navigateLeft() {

+		hasNavigatedLeft = true;
+
 		// Reverse for RTL
 		if( config.rtl ) {
 			if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) {
@ -5417,7 +5435,12 @@
 	 */
 	function navigateNext() {

+		if (!config.rtl) {
 			hasNavigatedRight = true;
+		} else {
+			hasNavigatedLeft = true;
+		}
+
 		hasNavigatedDown = true;

 		// Prioritize revealing fragments