Merge pull request #266 from github/curriculum-help-feature

Add "?" help toggle, modal help dialog

Author: Jordan McCullough

_javascript/curriculum.js

@@ -8,7 +8,6 @@ $(function(){
 		$(".slide").toggleClass("hidden");
 	});
 
-
 	// Parse username from querystring
 	var urlSearch = window.location.search,
 			teacherQuery = urlSearch.match(/teacher=[a-z,A-Z,0-9]*/),
@@ -100,14 +99,21 @@ $(function(){
 	}
 
 	// Bind checkbox toggle for TOC
-	var toc = {};
-	toc.toggle = function(event){
-		if(event.shiftKey && event.keyCode === 84){
+	var shortcuts = {};
+	shortcuts.toggle = function(event){
+		console.log(event.keyCode);
+
+		// Help "?" toggle
+		if(event.shiftKey && event.keyCode === 191){
+			$('#help').modal('toggle');
+		}
+		// TOC "T" toggle
+		else if(event.shiftKey && event.keyCode === 84){
 			$(".col-content").toggleClass("shift-left");
 			$(".col-toc").toggleClass("shift-left");
 		}
 	}
-	document.addEventListener("keydown", toc.toggle, false);
+	document.addEventListener("keydown", shortcuts.toggle, false);
 
 	// Render the TOC
 	buildToc();

_layouts/curriculum.html

@@ -3,6 +3,50 @@
 leadingpath: ../
 ---
 
+<!-- Modal -->
+<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
+      </div>
+      <div class="modal-body">
+        <table>
+          <tr>
+            <th>Command</th>
+            <th>Feature</th>
+          </tr>
+
+          <tr>
+            <td><code>?</code></td>
+            <td>Hide/show help</td>
+          </tr>
+
+          <tr>
+            <td><code>shift</code>+<code>t</code></td>
+            <td>Hide/show table of contents</td>
+          </tr>
+
+          <tr>
+            <td><code>?teacher=[github-user]</code></td>
+            <td>Auto-generated teacher slide</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+<div id="help" class="help">
+  <div class="content">
+
+  </div>
+</div>
 
 <div class="timer-wrapper fade-out">
   <div class="timer">