diff --git a/src/plugins/help/README.md b/src/plugins/help/README.md new file mode 100644 index 0000000..bcdb96a --- /dev/null +++ b/src/plugins/help/README.md @@ -0,0 +1,37 @@ +Help screen plugin +=================== + +Shows a help popup when a presentation is loaded, as well as when 'H' is pressed. + +To enable the help popup, add following div to your presentation: + +
+ +Example CSS: + + .impress-enabled #impress-help { + background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); + color: #EEEEEE; + font-size: 80%; + position: fixed; + left: 2em; + bottom: 2em; + width: 24em; + border-radius: 1em; + padding: 1em; + text-align: center; + z-index: 100; + font-family: Verdana, Arial, Sans; + } + .impress-enabled #impress-help td { + padding-left: 1em; + padding-right: 1em; + } + + + +Author +------ + +Copyright Henrik Ingo (@henrikingo), 2016 +MIT License diff --git a/src/plugins/help/help.js b/src/plugins/help/help.js new file mode 100644 index 0000000..4df9492 --- /dev/null +++ b/src/plugins/help/help.js @@ -0,0 +1,122 @@ +/** + * Help popup plugin + * + * Example: + * + * + *
+ * + * For developers: + * + * Typical use for this plugin, is for plugins that support some keypress, to add a line + * to the help popup produced by this plugin. For example "P: Presenter console". + * + * Copyright 2016 Henrik Ingo (@henrikingo) + * Released under the MIT license. + */ +/* global window, document */ + +( function( document, window ) { + "use strict"; + var rows = []; + var timeoutHandle; + + var triggerEvent = function( el, eventName, detail ) { + var event = document.createEvent( "CustomEvent" ); + event.initCustomEvent( eventName, true, true, detail ); + el.dispatchEvent( event ); + }; + + var renderHelpDiv = function() { + var helpDiv = document.getElementById( "impress-help" ); + if ( helpDiv ) { + var html = []; + for ( var row in rows ) { + for ( var arrayItem in row ) { + html.push( rows[ row ][ arrayItem ] ); + } + } + if ( html ) { + helpDiv.innerHTML = "\n" + html.join( "\n" ) + "
\n"; + } + } + }; + + var toggleHelp = function() { + var helpDiv = document.getElementById( "impress-help" ); + if ( !helpDiv ) { + return; + } + + if ( helpDiv.style.display === "block" ) { + helpDiv.style.display = "none"; + } else { + helpDiv.style.display = "block"; + window.clearTimeout( timeoutHandle ); + } + }; + + document.addEventListener( "keyup", function( event ) { + + // Check that event target is html or body element. + if ( event.target.nodeName === "BODY" || event.target.nodeName === "HTML" ) { + if ( event.keyCode === 72 ) { // "h" + event.preventDefault(); + toggleHelp(); + } + } + }, false ); + + // API + // Other plugins can add help texts, typically if they support an action on a keypress. + /** + * Add a help text to the help popup. + * + * :param: e.detail.command Example: "H" + * :param: e.detail.text Example: "Show this help." + * :param: e.detail.row Row index from 0 to 9 where to place this help text. Example: 0 + */ + document.addEventListener( "impress:help:add", function( e ) { + + // The idea is for the sender of the event to supply a unique row index, used for sorting. + // But just in case two plugins would ever use the same row index, we wrap each row into + // its own array. If there are more than one entry for the same index, they are shown in + // first come, first serve ordering. + var rowIndex = e.detail.row; + if ( typeof rows[ rowIndex ] !== "object" || !rows[ rowIndex ].isArray ) { + rows[ rowIndex ] = []; + } + rows[ e.detail.row ].push( "" + e.detail.command + "" + + e.detail.text + "" ); + renderHelpDiv(); + } ); + + document.addEventListener( "impress:init", function( e ) { + renderHelpDiv(); + + // At start, show the help for 7 seconds. + var helpDiv = document.getElementById( "impress-help" ); + if ( helpDiv ) { + helpDiv.style.display = "block"; + timeoutHandle = window.setTimeout( function() { + var helpDiv = document.getElementById( "impress-help" ); + helpDiv.style.display = "none"; + }, 7000 ); + + // Regster callback to empty the help div on teardown + var api = e.detail.api; + api.lib.gc.addCallback( function() { + window.clearTimeout( timeoutHandle ); + helpDiv.style.display = ""; + helpDiv.innerHTML = ""; + rows = []; + } ); + } + + // Use our own API to register the help text for "h" + triggerEvent( document, "impress:help:add", + { command: "H", text: "Show this help", row: 0 } ); + } ); + +} )( document, window ); +