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 ); @@ -1019,6 +1035,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 = '
Keyboard Shortcuts

'; + html += ''; + for( var key in keyboard_shortcuts ) { + html += '' + } + html += '
KEY ACTION
' + key + ' ' + keyboard_shortcuts[key] + '
'; + + dom.preview.innerHTML = [ + '
', + '', + '
', + '
', + '
'+html+'
', + '
' + ].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. @@ -2642,6 +2696,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. */