xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add controlsHint option, animates vertical arrow first time we encounter a vertical slide

Browse Source
This commit is contained in:
Hakim El Hattab
2017-05-16 15:04:32 +02:00
parent 58dc6b7c36
commit 617c17be3c
3 changed files with 185 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
js/reveal.js
View File

@ -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 ) {