Add help menu in sws.

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index 794eed4..98bc160 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -287,4 +287,24 @@ p { width: 100%; }
     overflow: auto;
     border: 1px;
     padding: 1px 1px 1px 1px;
+}
+
+#sws-help-panel-canvas {
+    color:white;
+    background:black;
+    z-index: 101;
+    position:fixed;
+    width:30%;
+    left:35%;
+    top:25%;
+    opacity: 0.9;
+    border-radius: 1vh;
+    display:none;
+}
+#sws-help-panel-canvas * {
+    color: white;
+    font-family: sans;
+}
+#sws-help-panel-canvas h1 {
+    font-size: large;
 }
\ No newline at end of file

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index 90634bc..ebab5ca 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -57,6 +57,19 @@ SWS.Utils = new function () {
 
 SWS.Templates = new function () {
     var self = this;
+    self.helpPanel = "<div id='sws-help-panel-canvas'>\
+<h1>Keyboard shortcuts</h1>\
+<table>\
+<tr><td>c</td><td> toggle the control panel</td></tr>\
+<tr><td>Left, PgUp,swipe left</td><td> previous step</td></tr>\
+<tr><td>Right, PgDown, Space, swipe right</td><td> next step</td></tr>\
+<tr><td>p</td><td> previous slide</td></tr>\
+<tr><td>n</td><td> next slide</td></tr>\
+<tr><td>Home</td><td> first slide</td></tr>\
+<tr><td>End</td><td> last slide</td></tr>\
+<tr><td>h</td><td> toggle help</td></tr>\
+</table>\
+</div>";
     self.controlPanel = "<div id='sws-control-panel-canvas'><div id='sws-control-panel'>\
 <div id='sws-control-panel-title-bar'>\
 <a title='Toggle fullscreen' id='sws-control-panel-fullscreen' class='sws-symbol' onclick='SWS.Presentation.toggleFullScreen();'></a>\
@@ -317,11 +330,18 @@ SWS.Presentation = new function () {
             sessionStorage.setItem("current_slide", i);
         };
 
+       self.showHelpAtStartup = function () {
+           var r = sessionStorage.getItem("show_help");
+           if (r == "hide") return false;
+           sessionStorage.setItem("show_help", "hide");
+           return true;
+       };
+
     } else {
         var _current_slide = 0;
         self.getCurrentSlide = function () { return _current_slide; };
         self.setCurrentSlide = function (i) { _current_slide = i; };
-
+       self.showHelpAtStartup = function () { return false; };
     };
     self.firstSlide = function () { return 0; };
     self.lastSlide = function () { return self.getNumSlides() - 1; };
@@ -567,6 +587,7 @@ SWS.Presentation = new function () {
         default:
             return;
         };
+
         switch (code) {
         case 36:/* Home */
             self.setCurrentSlide(self.firstSlide());
@@ -598,6 +619,9 @@ SWS.Presentation = new function () {
             return;
         case 67: /* c */
             $("#sws-control-panel-canvas").toggle();
+           return;
+        case 72: /* h */
+            $("#sws-help-panel-canvas").toggle();
 
         default:
             return;
@@ -783,12 +807,12 @@ SWS.Presentation = new function () {
             var j;
             var secnum = toc.length + '.';
             for (j = 0; j < i; ++j)
-                this_html += "<li class='done'>" + secnum + (j+1) + ' ' + 
+                this_html += "<li class='done'>" + secnum + (j+1) + ' ' +
                 sections[j].title + "</li>";
             this_html += "<li class='hl'>" + secnum + (i+1) + ' ' +
                 sections[i].title + "</li>";
             for (j = i+1; j < sections.length; j++)
-                this_html += "<li>" + secnum + (j+1) + ' ' 
+                this_html += "<li>" + secnum + (j+1) + ' '
                 +sections[j].title + "</li>";
             this_html += "</ul></li></ul></div>";
             $(this).after(this_html);
@@ -839,6 +863,7 @@ SWS.Presentation = new function () {
 
         // Initialize the control panel
         $("body").append($(SWS.Templates.controlPanel));
+        $("body").append($(SWS.Templates.helpPanel));
         // Fill the theme switcher
         $("link.sws-theme").each (function (i) {
             var e = $(this);
@@ -865,7 +890,6 @@ SWS.Presentation = new function () {
         nav.attr("max", SWS.Presentation.lastSlide() + 1);
         $('#sws-control-panel-total-slides').text('/' + SWS.Presentation.getNumSlides());
         _update_ui();
-
         _slide_callbacks = null; /* avoid a leak */
         var passed_theme = SWS.Utils.getParameterByName("theme");
 
@@ -880,12 +904,14 @@ SWS.Presentation = new function () {
                 if (SWS.Utils.getParameterByName("mode") == "print") {
                     self.printMode();
                 }
-                else
+                else {
+                   if (self.showHelpAtStartup()) $("#sws-help-panel-canvas").show();
                     self.refresh();
+               };
                 $(document).keydown(self.inputHandler);
                 document.body.addEventListener('touchstart',self.inputHandler, false);
                 document.body.addEventListener('touchend',self.inputHandler, false);
-
+               
                 _initialized = true;
             };
         setTimeout(f, 100);