diff options
| -rw-r--r-- | css/reveal.css | 33 | ||||
| -rw-r--r-- | js/reveal.js | 65 |
2 files changed, 98 insertions, 0 deletions
diff --git a/css/reveal.css b/css/reveal.css index 842f67c..c66f94e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1729,6 +1729,39 @@ body { } + .reveal .preview-link-overlay .viewport .shortcuts { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + font-size: 20px; + height: 100%; + margin-left: 35%; + margin-top: 20px; + text-align: center; + } + + .reveal .preview-link-overlay .viewport .shortcuts table { + border: 1px solid #fff; + border-collapse: collapse; + font-size: 14px; + } + + .reveal .preview-link-overlay .viewport .shortcuts table th{ + border: 1px solid #fff; + height: 30px; + width: 200px; + padding: 10px; + vertical-align: middle; + } + + .reveal .preview-link-overlay .viewport .shortcuts table tr td{ + border: 1px solid #fff; + height: 30px; + vertical-align: middle; + padding: 5px; + } + + /********************************************* * PLAYBACK COMPONENT diff --git a/js/reveal.js b/js/reveal.js index 5cbb3ff..27fcb49 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -177,6 +177,20 @@ var Reveal = (function(){ startCount: 0, captured: false, threshold: 40 + }, + + // Holds information about the keyboard shortcuts + keyboard_shortcuts = { + 'p': "Previous slide", + 'n': "Next slide", + 'h': "Navigate left", + 'l': "Navigate right", + 'k': "Navigate up", + 'j': "Navigate down", + 'Home': "First slide", + 'End': "Last slide", + 'b': "Pause", + 'f': "Fullscreen" }; /** @@ -646,6 +660,7 @@ var Reveal = (function(){ if( config.keyboard ) { document.addEventListener( 'keydown', onDocumentKeyDown, false ); + document.addEventListener( 'keypress', onDocumentKeyPress, false ); } if( config.progress && dom.progress ) { @@ -689,6 +704,7 @@ var Reveal = (function(){ eventsAreBound = false; document.removeEventListener( 'keydown', onDocumentKeyDown, false ); + document.removeEventListener( 'keypress', onDocumentKeyPress, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false ); window.removeEventListener( 'resize', onWindowResize, false ); @@ -1020,6 +1036,44 @@ var Reveal = (function(){ } /** + * Opens a overlay window for the keyboard shortcuts. + */ + function openShortcutsOverlay() { + + closePreview(); + + dom.preview = document.createElement( 'div' ); + dom.preview.classList.add( 'preview-link-overlay' ); + dom.wrapper.appendChild( dom.preview ); + + var html = '<h5>Keyboard Shortcuts</h5><br/>'; + html += '<table> <th>KEY</th> <th>ACTION</th>'; + for( var key in keyboard_shortcuts ) { + html += '<tr> <td>' + key + '</td> <td>' + keyboard_shortcuts[key] + '</td> </tr>' + } + html += '</table>'; + + dom.preview.innerHTML = [ + '<header>', + '<a class="close" href="#"><span class="icon"></span></a>', + '</header>', + '<div class="viewport">', + '<div class="shortcuts">'+html+'</div>', + '</div>' + ].join(''); + + dom.preview.querySelector( '.close' ).addEventListener( 'click', function( event ) { + closePreview(); + event.preventDefault(); + }, false ); + + setTimeout( function() { + dom.preview.classList.add( 'visible' ); + }, 1 ); + + } + + /** * Applies JavaScript-controlled layout rules to the * presentation. */ @@ -2643,6 +2697,17 @@ var Reveal = (function(){ } /** + * Handler for the document level 'keypress' event. + */ + + function onDocumentKeyPress( event ) { + // Check if the pressed key is question mark + if( event.shiftKey && event.charCode == 63 ) { + openShortcutsOverlay(); + } + } + + /** * Handler for the document level 'keydown' event. */ function onDocumentKeyDown( event ) { |