From 0c891e792c0277506bad93f3deab1f6b03aadea4 Mon Sep 17 00:00:00 2001 From: Henrik Ingo Date: Mon, 23 Oct 2017 23:18:17 +0300 Subject: [PATCH] Add help popup plugin Shows a help popup when user presses H. Add
...to the presentation to enable it. Other plugins send their help text to this plugin as events. The idea and style for this help popup comes from hovercraft, which would generate such html code into each presentation it creates. --- src/plugins/help/README.md | 37 +++++++++++ src/plugins/help/help.js | 122 +++++++++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+) create mode 100644 src/plugins/help/README.md create mode 100644 src/plugins/help/help.js 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 ); +