Skip to content

Commit

Permalink
new shortcuts; alt+arrow key skips fragments, shift+arrow key jumps t…
Browse files Browse the repository at this point in the history 
…o last slide in the given direction #1105
  • Loading branch information
@hakimel
hakimel committed Sep 6, 2021
1 parent a3e8162 commit 90bbe8b
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 47 deletions.
2 changes: 1 addition & 1 deletion dist/reveal.esm.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js
View file

Large diffs are not rendered by default.

52 changes: 28 additions & 24 deletions js/controllers/keyboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ export default class Keyboard {
}
else {
this.shortcuts['N , SPACE'] = 'Next slide';
this.shortcuts['P'] = 'Previous slide';
this.shortcuts['P , Shift SPACE'] = 'Previous slide';
this.shortcuts['← , H'] = 'Navigate left';
this.shortcuts['→ , L'] = 'Navigate right';
this.shortcuts['↑ , K'] = 'Navigate up';
this.shortcuts['↓ , J'] = 'Navigate down';
}

this.shortcuts['Home , Shift ←'] = 'First slide';
this.shortcuts['End , Shift →'] = 'Last slide';
this.shortcuts['Alt + ←/&#8593/→/↓'] = 'Navigate without fragments';
this.shortcuts['Shift + ←/&#8593/→/↓'] = 'Jump to first/last slide';
this.shortcuts['B , .'] = 'Pause';
this.shortcuts['F'] = 'Fullscreen';
this.shortcuts['ESC, O'] = 'Slide overview';
Expand Down Expand Up @@ -182,13 +182,11 @@ export default class Keyboard {
let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);

// Whitelist specific modified + keycode combinations
let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
let firstSlideShortcut = event.shiftKey && keyCode === 37;
let lastSlideShortcut = event.shiftKey && keyCode === 39;
// Whitelist certain modifiers for slide navigation shortcuts
let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;

// Prevent all other events when a modifier is pressed
let unusedModifier = !prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut &&
let unusedModifier = !( isNavigationKey && event.shiftKey || event.altKey ) &&
( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );

// Disregard the event if there's a focused element or a
Expand Down Expand Up @@ -277,52 +275,58 @@ export default class Keyboard {

// P, PAGE UP
if( keyCode === 80 || keyCode === 33 ) {
this.Reveal.prev();
this.Reveal.prev({skipFragments: event.altKey});
}
// N, PAGE DOWN
else if( keyCode === 78 || keyCode === 34 ) {
this.Reveal.next();
this.Reveal.next({skipFragments: event.altKey});
}
// H, LEFT
else if( keyCode === 72 || keyCode === 37 ) {
if( firstSlideShortcut ) {
if( event.shiftKey ) {
this.Reveal.slide( 0 );
}
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.prev();
this.Reveal.prev({skipFragments: event.altKey});
}
else {
this.Reveal.left();
this.Reveal.left({skipFragments: event.altKey});
}
}
// L, RIGHT
else if( keyCode === 76 || keyCode === 39 ) {
if( lastSlideShortcut ) {
if( event.shiftKey ) {
this.Reveal.slide( Number.MAX_VALUE );
}
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.next();
this.Reveal.next({skipFragments: event.altKey});
}
else {
this.Reveal.right();
this.Reveal.right({skipFragments: event.altKey});
}
}
// K, UP
else if( keyCode === 75 || keyCode === 38 ) {
if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.prev();
if( event.shiftKey ) {
this.Reveal.slide( undefined, 0 );
}
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.prev({skipFragments: event.altKey});
}
else {
this.Reveal.up();
this.Reveal.up({skipFragments: event.altKey});
}
}
// J, DOWN
else if( keyCode === 74 || keyCode === 40 ) {
if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.next();
if( event.shiftKey ) {
this.Reveal.slide( undefined, Number.MAX_VALUE );
}
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
this.Reveal.next({skipFragments: event.altKey});
}
else {
this.Reveal.down();
this.Reveal.down({skipFragments: event.altKey});
}
}
// HOME
Expand All @@ -339,10 +343,10 @@ export default class Keyboard {
this.Reveal.overview.deactivate();
}
if( event.shiftKey ) {
this.Reveal.prev();
this.Reveal.prev({skipFragments: event.altKey});
}
else {
this.Reveal.next();
this.Reveal.next({skipFragments: event.altKey});
}
}
// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
Expand Down
36 changes: 18 additions & 18 deletions js/reveal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2197,55 +2197,55 @@ export default function( revealElement, options ) {

}

function navigateLeft() {
function navigateLeft({skipFragments=false}={}) {

navigationHistory.hasNavigatedHorizontally = true;

// Reverse for RTL
if( config.rtl ) {
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().left ) {
if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
// Normal navigation
else if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().left ) {
else if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().left ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
}

}

function navigateRight() {
function navigateRight({skipFragments=false}={}) {

navigationHistory.hasNavigatedHorizontally = true;

// Reverse for RTL
if( config.rtl ) {
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().right ) {
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
}
}
// Normal navigation
else if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().right ) {
else if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().right ) {
slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
}

}

function navigateUp() {
function navigateUp({skipFragments=false}={}) {

// Prioritize hiding fragments
if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().up ) {
if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
slide( indexh, indexv - 1 );
}

}

function navigateDown() {
function navigateDown({skipFragments=false}={}) {

navigationHistory.hasNavigatedVertically = true;

// Prioritize revealing fragments
if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().down ) {
if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
slide( indexh, indexv + 1 );
}

Expand All @@ -2257,12 +2257,12 @@ export default function( revealElement, options ) {
* 2) Previous vertical slide
* 3) Previous horizontal slide
*/
function navigatePrev() {
function navigatePrev({skipFragments=false}={}) {

// Prioritize revealing fragments
if( fragments.prev() === false ) {
if( skipFragments || fragments.prev() === false ) {
if( availableRoutes().up ) {
navigateUp();
navigateUp({skipFragments});
}
else {
// Fetch the previous horizontal slide, if there is one
Expand All @@ -2288,13 +2288,13 @@ export default function( revealElement, options ) {
/**
* The reverse of #navigatePrev().
*/
function navigateNext() {
function navigateNext({skipFragments=false}={}) {

navigationHistory.hasNavigatedHorizontally = true;
navigationHistory.hasNavigatedVertically = true;

// Prioritize revealing fragments
if( fragments.next() === false ) {
if( skipFragments || fragments.next() === false ) {

let routes = availableRoutes();

Expand All @@ -2306,13 +2306,13 @@ export default function( revealElement, options ) {
}

if( routes.down ) {
navigateDown();
navigateDown({skipFragments});
}
else if( config.rtl ) {
navigateLeft();
navigateLeft({skipFragments});
}
else {
navigateRight();
navigateRight({skipFragments});
}
}

Expand Down
39 changes: 36 additions & 3 deletions test/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ <h1>4</h1>
// 4
Reveal.initialize().then( function() {

// Helper methods
function triggerKeyboardEvent(config) {
document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
}

// ---------------------------------------------------------------
// DOM TESTS

Expand Down Expand Up @@ -407,13 +412,41 @@ <h1>4</h1>
assert.ok( /X\-SHORTCUT\-X/.test( document.body.innerHTML ), 'binding is added to help overlay' );
Reveal.toggleHelp( false );

let event = new KeyboardEvent( 'keydown', { 'keyCode':88 } );
document.dispatchEvent( event );
triggerKeyboardEvent({ keyCode: 88 });

Reveal.removeKeyBinding( 88 );

// should do nothing
document.dispatchEvent( event );
triggerKeyboardEvent({ keyCode: 88 });
});

QUnit.test( 'Navigation bindings', function( assert ) {
Reveal.slide( 0 );

// right arrow
triggerKeyboardEvent({ keyCode: 39 });
assert.strictEqual( Reveal.getIndices().h, 1 );

// down arrow + shift
triggerKeyboardEvent({ keyCode: 40, shiftKey: true });
assert.strictEqual( Reveal.getIndices().v, 2, 'shift + down arrow goes to last vertical slide' );

// up arrow
triggerKeyboardEvent({ keyCode: 38 });
assert.strictEqual( Reveal.getIndices().v, 1 );

// right arrow + shift
triggerKeyboardEvent({ keyCode: 39, shiftKey: true });
assert.ok( Reveal.isLastSlide(), 'shift + right arrow goes to last horizontal slide' );


// right arrow on slide with fragments
Reveal.slide( 2, 0, -1 );
triggerKeyboardEvent({ keyCode: 39 });
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'right arrow shows fragment' );

triggerKeyboardEvent({ keyCode: 39, altKey: true });
assert.strictEqual( Reveal.getIndices().h, 3, 'right arrow skips fragments when alt key is pressed' );
});

// ---------------------------------------------------------------
Expand Down

0 comments on commit 90bbe8b

Please sign in to comment.