diff --git a/css/reveal.css b/css/reveal.css index 55f6a344..97e760f8 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1742,6 +1742,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 cbfa8590..a4d5f02d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -196,6 +196,20 @@ 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' }; /** @@ -863,6 +877,7 @@ if( config.keyboard ) { document.addEventListener( 'keydown', onDocumentKeyDown, false ); + document.addEventListener( 'keypress', onDocumentKeyPress, false ); } if( config.progress && dom.progress ) { @@ -906,6 +921,7 @@ eventsAreBound = false; document.removeEventListener( 'keydown', onDocumentKeyDown, false ); + document.removeEventListener( 'keypress', onDocumentKeyPress, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false ); window.removeEventListener( 'resize', onWindowResize, false ); @@ -1268,6 +1284,44 @@ } + /** + * 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. @@ -3232,6 +3286,17 @@ } + /** + * 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. */