diff --git a/css/reveal.css b/css/reveal.css
index e7c6b1c1..143755d1 100644
--- 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; }
diff --git a/css/reveal.scss b/css/reveal.scss
index ab11f32e..7b91d7fd 100644
--- 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;
diff --git a/js/reveal.js b/js/reveal.js
index f651bdbc..efea302c 100644
--- 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',
- '' +
- '' +
+ '' +
+ '' +
'' +
'' );
@@ -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,16 +3635,26 @@
else {
dom.controlsDownArrow.classList.remove( 'highlight' );
- if( !hasNavigatedRight && routes.right && indexv === 0 ) {
- dom.controlsRightArrow.classList.add( 'highlight' );
- }
- else {
- dom.controlsRightArrow.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' );
+ }
+ else {
+ 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() {
- hasNavigatedRight = true;
+ if (!config.rtl) {
+ hasNavigatedRight = true;
+ } else {
+ hasNavigatedLeft = true;
+ }
+
hasNavigatedDown = true;
// Prioritize revealing fragments