Add help menu

help-menu.html

@@ -0,0 +1,12 @@
+<input type="checkbox" id="help-menu-checkbox" />
+<label for="help-menu-checkbox" id="help-menu-toggle">?</label>
+<div id="help-menu-wrapper">
+  <h2>How to use this presentation</h2>
+  <ul>
+    <li>Next slide: <kbd>↓</kbd> or <kbd>→</kbd></li>
+    <li>Previous slide: <kbd>↑</kbd> or <kbd>←</kbd></li>
+    <li>Open slide overview: Hit <kbd>Ctrl</kbd> twice.</li>
+    <li>Close slide overview: <kbd>Esc</kbd></li>
+    <li>Open the help menu: <kbd>H</kbd></li>
+  </ul>
+</div>

helper.py

@@ -41,3 +41,11 @@ def add_lazyload(source, lazyload_images):
         return re.sub(r'<img(.*)src=', r'<img\1data-src=', source)
     else:
         return source
+
+# Replace all occurrences of "@help" by the content specified
+# in "help-menu.html". The "@help" annotation should be used only once
+# per presentation.
+def add_help_menu(source, root):
+    help_menu_code = open(os.path.join(
+        root, 'onpoint/help-menu.html'), "r").read()
+    return re.sub('@help', help_menu_code, source)

main.py

@@ -19,6 +19,7 @@ def compile(root, language='en', force_recompile=False, lazyload_images=False):
     wrapper = helper.insert_metadata(wrapper, root, language)
     wrapper = fragments.defragmentize(wrapper)
     wrapper = helper.add_lazyload(wrapper, lazyload_images)
+    wrapper = helper.add_help_menu(wrapper, root)
     with open(os.path.join(root, 'slides.' + language + '.html'), 'w+') as output:
         output.write(wrapper)
     print('done')

onpoint.js

@@ -92,6 +92,10 @@ function onKeyPressed(event) {
 			break;
 		case 27: // esc
 			hideTopicList();
+			hideHelpMenu();
+			break;
+		case 72: // H 
+			toggleHelpMenu();
 			break;
 	}
 }
@@ -236,7 +240,7 @@ class Node {
 }
 
 function getTopicListContent() {
-	let results = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+	let results = [...document.querySelectorAll('section h1, section h2, section h3, section h4, section h5, section h6')];
 	let resultHTML = `<input type="text" class="${topicListSearchClass}"/>`;
 	let currentLevel = 1;
 
@@ -352,6 +356,7 @@ function toggleTopicList() {
 			if (topicList.style.visibility === 'visible') {
 				hideTopicList();
 			} else {
+				hideHelpMenu();
 				topicListSearch.value = '';
 				onTopicListSearchInput();
 				topicList.style.visibility = 'visible';
@@ -372,3 +377,12 @@ function hideTopicList() {
 function reactToResizing() {
 	goToSlide(currentSlide);
 }
+
+function toggleHelpMenu() {
+	hideTopicList();
+	document.getElementById('help-menu-toggle').click();
+}
+
+function hideHelpMenu() {
+	document.getElementById('help-menu-checkbox').checked = false;
+}