Merge pull request #2579 from Martinomagnifico/dev
Add RTL support to Controls
This commit is contained in:
45
js/reveal.js
45
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,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
|
||||
|
Reference in New Issue
Block a user