Add full help screen to help plugin #714
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,6 @@ | ||
| /** | ||
| * Help popup plugin | ||
| * | ||
| * For developers: | ||
| * | ||
| * Typical use for this plugin, is for plugins that support some keypress, to add a line | ||
|
|
@@ -21,46 +16,88 @@ | |
| var rows = []; | ||
| var timeoutHandle; | ||
|
|
||
| var body = document.querySelector( "body" ); | ||
|
|
||
| // This querySelector is used to keep compatibility with templates using div#impress-help | ||
| var helpDiv = document.querySelector( "#impress-help" ) || document.createElement( "div" ); | ||
| body.appendChild( helpDiv ); | ||
|
|
||
| var fullHelpDiv = document.createElement( "div" ); | ||
| var fullHelpStyle = { | ||
| display: "none", | ||
| position: "fixed", | ||
| top: 0, | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| backgroundColor: "#000", | ||
| color: "#FFF", | ||
| opacity: 0.8, | ||
| textAlign: "center", | ||
| padding: "3em" | ||
|
There was a problem hiding this comment. The philosophy of impress.js is that we don't want to force any colors or other styling for the user. So instead of setting the style here, you should set it in css/impress-demo.css. Unfortunately this means you also need to set this in every other css file under presentations. (Related: #681) So what is left for the plugin to do? Maybe nothing? Do you need different CSS for the full help? At most, you could set a class that indicates short help vs full help: Presentation authors can then choose to use this class for styling if they want. |
||
| }; | ||
|
|
||
| body.appendChild( fullHelpDiv ); | ||
|
|
||
| var css = function( elem, style ) { | ||
| for ( var p in style ) { | ||
| elem.style[ p ] = style[ p ]; | ||
| } | ||
| }; | ||
| css( fullHelpDiv, fullHelpStyle ); | ||
|
|
||
| var renderDiv = function( elem, shortOnly ) { | ||
| if ( elem ) { | ||
| var html = []; | ||
| for ( var row in rows ) { | ||
| for ( var arrayItem in row ) { | ||
| var item = rows[ row ][ arrayItem ]; | ||
| if ( item ) { | ||
| if ( ( shortOnly && item.short ) || !shortOnly ) { | ||
| html.push( item.row ); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| if ( html ) { | ||
| elem.innerHTML = "<table style='width: 100%'>\n" + html.join( "\n" ) + "</table>\n"; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| var renderHelpDiv = function() { | ||
| renderDiv( helpDiv, true ); | ||
| renderDiv( fullHelpDiv, false ); | ||
| }; | ||
|
|
||
| var toggle = function( elem ) { | ||
| if ( !elem ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( elem.style.display === "block" ) { | ||
| elem.style.display = "none"; | ||
| } else { | ||
| elem.style.display = "block"; | ||
| if ( elem === helpDiv ) { | ||
| window.clearTimeout( timeoutHandle ); | ||
| } else { | ||
|
|
||
| // Hides helpDiv when fullHelpDiv is shown | ||
| helpDiv.style.display = "none"; | ||
| window.clearTimeout( timeoutHandle ); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener( "keyup", function( event ) { | ||
|
|
||
| if ( event.keyCode === 72 || event.keyCode === 191 ) { // "h" || "?" | ||
| event.preventDefault(); | ||
| toggle( helpDiv ); | ||
| } else if ( event.key === "F1" ) { | ||
| event.preventDefault(); | ||
| toggle( fullHelpDiv ); | ||
| } | ||
| }, false ); | ||
|
|
||
|
|
@@ -72,6 +109,7 @@ | |
| * :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 | ||
| * :param: e.detail.short If this help must appear in the short help. Example: true | ||
| */ | ||
| document.addEventListener( "impress:help:add", function( e ) { | ||
|
|
||
|
|
@@ -80,39 +118,44 @@ | |
| // 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; | ||
| var short = e.detail.short; | ||
| rows[ rowIndex ] = rows[ rowIndex ] || []; | ||
| rows[ e.detail.row ].push( { | ||
| row: "<tr><td><strong>" + e.detail.command + "</strong></td><td>" + | ||
| e.detail.text + "</td></tr>", | ||
| short: !!short | ||
| } ); | ||
| renderHelpDiv(); | ||
| } ); | ||
|
|
||
| document.addEventListener( "impress:init", function( e ) { | ||
| var api = e.detail.api; | ||
| var gc = api.lib.gc; | ||
| var util = api.lib.util; | ||
|
|
||
| renderHelpDiv(); | ||
|
|
||
| // At start, show the help for 7 seconds. | ||
| if ( helpDiv ) { | ||
| helpDiv.style.display = "block"; | ||
| timeoutHandle = window.setTimeout( function() { | ||
| helpDiv.style.display = "none"; | ||
| }, 7000 ); | ||
|
|
||
| // Regster callback to empty the help div on teardown | ||
| gc.pushCallback( function() { | ||
| window.clearTimeout( timeoutHandle ); | ||
| helpDiv.remove(); | ||
| fullHelpDiv.remove(); | ||
| rows = []; | ||
| } ); | ||
| } | ||
|
|
||
| // Use our own API to register the help text for "h" | ||
| util.triggerEvent( document, "impress:help:add", | ||
| { command: "H", text: "Show/hide this help", row: 0, short: true } ); | ||
| util.triggerEvent( document, "impress:help:add", | ||
| { command: "F1", text: "Show/hide full help", row: 999, short: true } ); | ||
| } ); | ||
|
|
||
| } )( document, window ); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to stay. Plugins that display something on the screen are required to be optional. One way to make them optional is that the presentation author must explicitly add an empty div for them to appear.
In the case of the help plugin, note that it is shown automatically when the presentation is loaded. Due to this, the div must stay.