diff options
Diffstat (limited to 'js/reveal.js')
| -rw-r--r-- | js/reveal.js | 51 |
1 files changed, 45 insertions, 6 deletions
diff --git a/js/reveal.js b/js/reveal.js index 42c3822..d39e288 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -52,11 +52,15 @@ // Display controls in the bottom right corner controls: true, + // Hint at where the user can navigate, for example by animating + // the down arrow when we first encounter a vertical slide + controlsHints: true, + // Determines where controls appear, "edges" or "bottom-right" controlsLayout: 'bottom-right', - // Specifies the display rules for backwards navigation arrows; - // "faded", "hidden" or "visible" + // Visibility rule for backwards navigation arrows; "faded", "hidden" + // or "visible" controlsBackArrows: 'faded', // Display a presentation progress bar @@ -214,6 +218,10 @@ previousBackground, + // Remember which directions that the user has navigated towards + hasNavigatedRight = false, + hasNavigatedDown = false, + // Slides may hold a data-state attribute which we pick up and apply // as a class to the body. This list contains the combined state of // all current slides. @@ -524,10 +532,10 @@ // Arrow controls dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls', - '<button class="navigate-left" aria-label="previous slide"></button>' + - '<button class="navigate-right" aria-label="next slide"></button>' + - '<button class="navigate-up" aria-label="above slide"></button>' + - '<button class="navigate-down" aria-label="below slide"></button>' ); + '<button class="navigate-left" aria-label="previous slide"><div class="pagination-arrow"></div></button>' + + '<button class="navigate-right" aria-label="next slide"><div class="pagination-arrow"></div></button>' + + '<button class="navigate-up" aria-label="above slide"><div class="pagination-arrow"></div></button>' + + '<button class="navigate-down" aria-label="below slide"><div class="pagination-arrow"></div></button>' ); // Slide number dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); @@ -550,6 +558,10 @@ 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 + dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' ); + dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' ); + dom.statusDiv = createStatusDiv(); } @@ -2905,6 +2917,26 @@ } + if( config.controlsHints ) { + + // Highlight control arrows with an animation to ensure + // that the viewer knows how to navigate + if( !hasNavigatedDown && routes.down ) { + dom.controlsDownArrow.classList.add( 'highlight' ); + } + else { + dom.controlsDownArrow.classList.remove( 'highlight' ); + + if( !hasNavigatedRight && routes.right && indexh === 0 ) { + dom.controlsRightArrow.classList.add( 'highlight' ); + } + else { + dom.controlsRightArrow.classList.remove( 'highlight' ); + } + } + + } + } /** @@ -4157,6 +4189,8 @@ function navigateRight() { + hasNavigatedRight = true; + // Reverse for RTL if( config.rtl ) { if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) { @@ -4181,6 +4215,8 @@ function navigateDown() { + hasNavigatedDown = true; + // Prioritize revealing fragments if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) { slide( indexh, indexv + 1 ); @@ -4227,6 +4263,9 @@ */ function navigateNext() { + hasNavigatedRight = true; + hasNavigatedDown = true; + // Prioritize revealing fragments if( nextFragment() === false ) { if( availableRoutes().down ) { |