cmd/present: show navigational help text on page load

Change-Id: I35e7cbec56a0617540316f0205c5a92e7532c491
Reviewed-on: https://go-review.googlesource.com/4910
Reviewed-by: Minux Ma <minux@golang.org>

cmd/present/static/print.css

@@ -49,3 +49,8 @@ a:link:after, a:visited:after {
 body {
   background: rgb(255,255,255) !important;
 }
+
+#help {
+  display: none;
+  visibility: hidden;
+}

cmd/present/static/slides.js

@@ -134,6 +134,10 @@ if (objCtr.defineProperty) {
 
 /* Slide movement */
 
+function hideHelpText() {
+  $('#help').hide();
+};
+
 function getSlideEl(no) {
   if ((no < 0) || (no >= slideEls.length)) {
     return null;
@@ -201,6 +205,7 @@ function updateSlides() {
 };
 
 function prevSlide() {
+  hideHelpText();
   if (curSlide > 0) {
     curSlide--;
 
@@ -209,6 +214,7 @@ function prevSlide() {
 };
 
 function nextSlide() {
+  hideHelpText();
   if (curSlide < slideEls.length - 1) {
     curSlide++;
 
@@ -392,6 +398,10 @@ function handleBodyKeyDown(event) {
   var inCode = event.target.classList.contains("code");
 
   switch (event.keyCode) {
+    case 72: // 'H' hides the help text
+      if (!inCode) hideHelpText();
+      break;
+
     case 39: // right arrow
     case 13: // Enter
     case 32: // space
@@ -466,6 +476,9 @@ function addPrintStyle() {
   document.body.appendChild(el);
 };
 
+function showHelpText() {
+};
+
 function handleDomLoaded() {
   slideEls = document.querySelectorAll('section.slides > article');
 

cmd/present/static/styles.css

@@ -459,3 +459,21 @@ figcaption {
   text-align: center;
   font-size: 0.75em;
 }
+
+#help {
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-align: center;
+  color: white;
+  background: #000;
+  opacity: 0.5;
+  position: fixed;
+  bottom: 25px;
+  left: 50px;
+  right: 50px;
+  padding: 20px;
+
+  border-radius: 10px;
+  -o-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}

cmd/present/templates/slides.tmpl

@@ -48,6 +48,12 @@
 
     </section>
 
+    <div id="help">
+      Use the left and right arrow keys or click the left and right
+      edges of the page to navigate between slides.<br>
+      (Press 'H' or navigate to hide this message.)
+    </div>
+
   </body>
   {{if .PlayEnabled}}
   <script src='/play.js'></script>