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>

4 files changed, 42 insertions, 0 deletions

diff --git a/cmd/present/static/print.css b/cmd/present/static/print.css
index 6c58257..b24b4df 100644
--- a/cmd/present/static/print.css
+++ b/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;
+}
diff --git a/cmd/present/static/slides.js b/cmd/present/static/slides.js
index ee54c94..3423fbe 100644
--- a/cmd/present/static/slides.js
+++ b/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');
 
diff --git a/cmd/present/static/styles.css b/cmd/present/static/styles.css
index 36fe6ea..ba99053 100644
--- a/cmd/present/static/styles.css
+++ b/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;
+}
diff --git a/cmd/present/templates/slides.tmpl b/cmd/present/templates/slides.tmpl
index fbccfda..11070d2 100644
--- a/cmd/present/templates/slides.tmpl
+++ b/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>