Add RTL support to Controls

Add RTL support to Controls
This commit is contained in:
Martino 2020-02-05 14:16:15 +01:00
parent b6c890b1a7
commit ccb42c7ca9
3 changed files with 125 additions and 16 deletions

View File

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

View File

@ -230,6 +230,12 @@ body {
30% {transform: translateX(-5px);} 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 { @keyframes bounce-down {
0%, 10%, 25%, 40%, 50% {transform: translateY(0);} 0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
20% {transform: translateY(10px);} 20% {transform: translateY(10px);}
@ -327,6 +333,10 @@ $controlsArrowAngleActive: 36deg;
right: $controlArrowSize + $controlArrowSpacing*2; right: $controlArrowSize + $controlArrowSpacing*2;
bottom: $controlArrowSpacing + $controlArrowSize/2; bottom: $controlArrowSpacing + $controlArrowSize/2;
transform: translateX( -10px ); transform: translateX( -10px );
&.highlight {
animation: bounce-left 2s 50 both ease-out;
}
} }
.navigate-right { .navigate-right {
@ -371,7 +381,6 @@ $controlsArrowAngleActive: 36deg;
// Back arrow style: "faded": // Back arrow style: "faded":
// Deemphasize backwards navigation arrows in favor of drawing // Deemphasize backwards navigation arrows in favor of drawing
// attention to forwards navigation // attention to forwards navigation
&[data-controls-back-arrows="faded"] .navigate-left.enabled,
&[data-controls-back-arrows="faded"] .navigate-up.enabled { &[data-controls-back-arrows="faded"] .navigate-up.enabled {
opacity: 0.3; opacity: 0.3;
@ -382,7 +391,6 @@ $controlsArrowAngleActive: 36deg;
// Back arrow style: "hidden": // Back arrow style: "hidden":
// Never show arrows for backwards navigation // Never show arrows for backwards navigation
&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
&[data-controls-back-arrows="hidden"] .navigate-up.enabled { &[data-controls-back-arrows="hidden"] .navigate-up.enabled {
opacity: 0; opacity: 0;
visibility: hidden; 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-up,
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down { .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
display: none; display: none;

View File

@ -336,6 +336,7 @@
// Remember which directions that the user has navigated towards // Remember which directions that the user has navigated towards
hasNavigatedRight = false, hasNavigatedRight = false,
hasNavigatedLeft = false,
hasNavigatedDown = false, hasNavigatedDown = false,
// Slides may hold a data-state attribute which we pick up and apply // Slides may hold a data-state attribute which we pick up and apply
@ -760,9 +761,12 @@
dom.progressbar = dom.progress.querySelector( 'span' ); dom.progressbar = dom.progress.querySelector( 'span' );
// Arrow controls // 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', dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
'<button class="navigate-left" aria-label="previous 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="next slide"><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-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>' ); '<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );
@ -787,8 +791,9 @@
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) ); dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) ); 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.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );
dom.controlsLeftArrow = dom.controls.querySelector( '.navigate-left' );
dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' ); dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );
dom.statusDiv = createStatusDiv(); dom.statusDiv = createStatusDiv();
@ -3606,6 +3611,7 @@
} }
if( config.controlsTutorial ) { if( config.controlsTutorial ) {
// Highlight control arrows with an animation to ensure // Highlight control arrows with an animation to ensure
@ -3616,16 +3622,26 @@
else { else {
dom.controlsDownArrow.classList.remove( 'highlight' ); dom.controlsDownArrow.classList.remove( 'highlight' );
if( !hasNavigatedRight && routes.right && indexv === 0 ) { if (config.rtl) {
dom.controlsRightArrow.classList.add( 'highlight' );
} if( !hasNavigatedLeft && routes.left && indexv === 0 ) {
else { dom.controlsLeftArrow.classList.add( 'highlight' );
dom.controlsRightArrow.classList.remove( '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' );
}
} }
} }
} }
} }
/** /**
@ -5210,6 +5226,8 @@
function navigateLeft() { function navigateLeft() {
hasNavigatedLeft = true;
// Reverse for RTL // Reverse for RTL
if( config.rtl ) { if( config.rtl ) {
if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) { if( ( isOverview() || nextFragment() === false ) && availableRoutes().left ) {
@ -5299,7 +5317,12 @@
*/ */
function navigateNext() { function navigateNext() {
hasNavigatedRight = true; if (!config.rtl) {
hasNavigatedRight = true;
} else {
hasNavigatedLeft = true;
}
hasNavigatedDown = true; hasNavigatedDown = true;
// Prioritize revealing fragments // Prioritize revealing fragments