Implement a simple control panel.

Extend the demo to cover more features.

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index 7955f1d..490173b 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -39,9 +39,10 @@
     <script type="text/javascript">
 /*
       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide; */
       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
-*/
-      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+
+
       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
@@ -83,7 +84,7 @@ o.attr("style",a.join(";"));
       <div class="centerbox">
         <h1>SimpleWebSlides</h1>
         <h1>An <em>HTML</em><img style="height:28pt"
-             src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
+             src="HTML5_Badge.svg" alt="5"/>
           Presentation framework</h1>
         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
       </div>
@@ -116,7 +117,7 @@ o.attr("style",a.join(";"));
     </div>
 
     <div class="sws-slide">
-      <h1>What's wrong with Beamer/LateX/Tikz?</h1>
+      <h1>What's wrong with Beamer/L<sub>A</sub>T<sup>E</sup>X/Tikz?</h1>
       <ul>
         <li class="sws-pause">Does not easily support smooth
         animations</li>
@@ -201,7 +202,8 @@ o.attr("style",a.join(";"));
     <em>SWS.Presentation.registerCallback("3_6", zoom_title);</em>
 &lt;script&gt;
 </code></pre>
-
+    (That's not a bug, you should keep pressing next, see how many
+    steps there are on this slide)
   </p>
 
 <script type="text/javascript">
@@ -350,11 +352,22 @@ Of course we can animate it with some javascript!
   SWS.Presentation.registerCallback(2, function(o){
   set_color(o.find("#middledisk"), "#ffa500");
   set_color(o.find("#bottomdisk"), "#000a1a");
+/**/
+  SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
   });
   SWS.Presentation.registerCallback(3, function(o){
   set_color(o.find("#bottomdisk"), "#00ff00");
+  SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+/* */
   });
 </script>
+</div>
+<div class="sws-slide">
+  <h1>Totally customizable</h1>
+  <p>
+    BTW did you see how I changed the transition effect for the
+    previous slide ?
+  </p>
 </div>
 
   </body>

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index f54bb78..66c7e62 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -80,3 +80,43 @@ body {
 body > h1, body > h2, body > h3 {
     display: none;
 }
+
+#sws-control-panel {
+/*    visibility: hidden;*/
+    display:none;
+    position: absolute;
+    bottom: 60pt;
+    left: 60pt;
+    text-align: center;
+    font-size:30pt;
+    border-radius: 5pt;
+    background-color: #ffffff;
+    opacity: 0.8;
+    color: black;
+    z-index: 100;
+    vertical-align:middle;
+    height: 60pt;
+/*    width:100%;*/
+}
+#sws-control-panel:before  {
+    content : "";
+    display: inline-block;
+    height: 100%;
+    width: 0pt;
+    vertical-align: middle;
+}
+#sws-control-panel a {
+    text-decoration: none;
+    display:inline-block;
+    padding:0pt 10pt 0pt 10pt;
+    vertical-align: middle;
+}
+#sws-control-panel a:hover {
+    cursor: pointer;
+}
+
+@media print {
+    sws-control-panel {
+        display: none;
+    };
+}
\ No newline at end of file

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index 42448ea..811386e 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -2,7 +2,7 @@
   Namespace object.
 */
 
-var SWS = {};
+var SWS = SWS || {};
 
 
 
@@ -52,6 +52,14 @@ SWS.Utils = new function () {
 
 SWS.Templates = new function () {
     var self = this;
+    self.controlPanel = "<div id='sws-control-panel'>\
+<a onclick='SWS.Presentation.goToSlide(SWS.Presentation.firstSlide());'>◀◀◀</a>\
+<a onclick='SWS.Presentation.previousSlide();SWS.Presentation.refresh();'>◀◀ </a>\
+<a onclick='SWS.Presentation.previous();SWS.Presentation.refresh();'>◀</a>\
+<a onclick='SWS.Presentation.next();SWS.Presentation.refresh();'>▶</a>\
+<a onclick='SWS.Presentation.nextSlide();SWS.Presentation.refresh();'>▶▶</a>\
+<a rel='Last slide' onclick='SWS.Presentation.goToSlide(SWS.Presentation.lastSlide());'>▶▶▶</a>\
+</div>";
     self.slideActivate = function (o) {
         if (!(o.hasClass("sws-active-slide"))){
             o.removeClass("sws-inactive-slide").addClass("sws-active-slide");
@@ -121,14 +129,14 @@ SWS.Effects = new function () {
     var self = this;
 
     self.objectDeactivateFadeOut = function (o) {
-        o.animate({'opacity': '0'}, 150,
+        o.animate({'opacity': '0'}, 200,
                   function () { SWS.Templates.objectDeactivate(o)});
     };
 
     self.objectActivateFadeIn = function (o) {
 
         if (SWS.Templates.objectActivate(o)){
-            o.animate({'opacity': '1' }, 150);
+            o.animate({'opacity': '1' }, 200);
         };
 
     };
@@ -371,7 +379,7 @@ SWS.Presentation = new function () {
 
         case 32: /* space */
         case 39: /* -> */
-        case 1: /* mouse button 1 */
+
             self.next();
             break;
         case 34: /* PgDown */
@@ -386,6 +394,8 @@ SWS.Presentation = new function () {
         case 80: /* p */
             self.previousSlide();
             break;
+        case 67: /* c */
+            $("#sws-control-panel").toggle();
         default:
             return;
         };
@@ -467,8 +477,7 @@ SWS.Presentation = new function () {
         _total_slides = $(".sws-slide").length;
 
         $(document).keydown(self.inputHandler);
-        $(document).mousedown(self.inputHandler);
-
+        $("body").append($(SWS.Templates.controlPanel));
         var cur = self.getCurrentSlide();
         $(".sws-slide").each (function (i) {
             var par = $(this).parent();