Merge branch 'plugin-key-bindings' of https://github.com/denehyg/reveal.js into dev

edit
Hakim El Hattab 2017-11-29 09:38:05 +01:00
commit 6028844452
3 changed files with 104 additions and 19 deletions

View File

@ -525,6 +525,37 @@ Reveal.isPaused();
Reveal.isAutoSliding(); Reveal.isAutoSliding();
``` ```
### Custom Key Bindings
Custom key bindings can be added and removed using the following Javascript API. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the ``keyboard`` config option.
```javascript
Reveal.addKeyBinding( binding, callback );
Reveal.removeKeyBinding( keyCode );
```
For example
```javascript
// The binding parameter provides the following properties
// keyCode: the keycode for binding to the callback
// key: the key label to show in the help overlay
// description: the description of the action to show in the help overlay
Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() {
// start timer
} )
// The binding parameter can also be a direct keycode without providing the help description
Reveal.addKeyBinding( 82, function() {
// reset timer
} )
```
This allows plugins to add key bindings directly to Reveal so they can
* make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and
* be included in the help overlay (optional)
### Slide Changed Event ### Slide Changed Event
A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.

View File

@ -289,7 +289,10 @@
'B , .': 'Pause', 'B , .': 'Pause',
'F': 'Fullscreen', 'F': 'Fullscreen',
'ESC, O': 'Slide overview' 'ESC, O': 'Slide overview'
}; },
// Holds custom key code mappings
registeredKeyBindings = {};
/** /**
* Starts up the presentation if the client is capable. * Starts up the presentation if the client is capable.
@ -1261,6 +1264,33 @@
} }
/**
* Add a custom key binding with optional description to be added to the help screen
*/
function addKeyBinding(binding, callback) {
if (typeof binding === 'object' && binding.keyCode) {
registeredKeyBindings[binding.keyCode] = {
callback: callback,
key: binding.key,
description: binding.description
};
}
else {
registeredKeyBindings[binding] = {
callback: callback,
key: null,
description: null
};
}
}
/**
* Removes the specified custom key binding
*/
function removeKeyBinding(binding) {
delete registeredKeyBindings[binding];
}
/** /**
* Extend object a with the properties of object b. * Extend object a with the properties of object b.
* If there's a conflict, object b takes precedence. * If there's a conflict, object b takes precedence.
@ -1748,6 +1778,13 @@
html += '<tr><td>' + key + '</td><td>' + keyboardShortcuts[ key ] + '</td></tr>'; html += '<tr><td>' + key + '</td><td>' + keyboardShortcuts[ key ] + '</td></tr>';
} }
// add custom key bindings that have associated descriptions
for( var binding in registeredKeyBindings ) {
if (registeredKeyBindings[binding].key && registeredKeyBindings[binding].description) {
html += '<tr><td>' + registeredKeyBindings[binding].key + '</td><td>' + registeredKeyBindings[binding].description + '</td></tr>';
}
}
html += '</table>'; html += '</table>';
dom.overlay.innerHTML = [ dom.overlay.innerHTML = [
@ -4397,7 +4434,7 @@
// If there's a condition specified and it returns false, // If there's a condition specified and it returns false,
// ignore this event // ignore this event
if( typeof config.keyboardCondition === 'function' && config.keyboardCondition() === false ) { if( typeof config.keyboardCondition === 'function' && config.keyboardCondition(event) === false ) {
return true; return true;
} }
@ -4462,7 +4499,31 @@
} }
// 2. System defined key bindings // 2. Registered custom key bindings
if( triggered === false ) {
for( key in registeredKeyBindings ) {
// Check if this binding matches the pressed key
if( parseInt( key, 10 ) === event.keyCode ) {
var action = registeredKeyBindings[ key ].callback;
// Callback function
if( typeof action === 'function' ) {
action.apply( null, [ event ] );
}
// String shortcuts to reveal.js API
else if( typeof action === 'string' && typeof Reveal[ action ] === 'function' ) {
Reveal[ action ].call();
}
triggered = true;
}
}
}
// 3. System defined key bindings
if( triggered === false ) { if( triggered === false ) {
// Assume true and try to prove false // Assume true and try to prove false
@ -5222,6 +5283,12 @@
} }
}, },
// Adds a custom key binding
addKeyBinding: addKeyBinding,
// Removes a custom key binding
removeKeyBinding: removeKeyBinding,
// Programatically triggers a keyboard event // Programatically triggers a keyboard event
triggerKey: function( keyCode ) { triggerKey: function( keyCode ) {
onDocumentKeyDown( { keyCode: keyCode } ); onDocumentKeyDown( { keyCode: keyCode } );

View File

@ -131,22 +131,9 @@ var RevealNotes = (function() {
} }
// Open the notes when the 's' key is hit // Open the notes when the 's' key is hit
document.addEventListener( 'keydown', function( event ) { Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
// Disregard the event if the target is editable or a
// modifier is present
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
// Disregard the event if keyboard is disabled
if ( Reveal.getConfig().keyboard === false ) return;
if( event.keyCode === 83 ) {
event.preventDefault();
openNotes(); openNotes();
} } );
}, false );
// Show our keyboard shortcut in the reveal.js help overlay
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
} }