From 2c974b2c6d549b9d2b641092b148fef81a3dd524 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Kim=20Nguy=E1=BB=85n?= <kn@lri.fr>
Date: Thu, 13 Jun 2013 11:22:14 +0200
Subject: [PATCH] Implement a new control panel.

---
 doc/demo.xhtml      |  22 +++---
 simpleWebSlides.css | 110 ++++++++++++++++++++++++-----
 simpleWebSlides.js  | 168 +++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 260 insertions(+), 40 deletions(-)
diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index 472982b..c028779 100644
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -2,9 +2,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 >
-<html xmlns="http://www.w3.org/1999/xhtml"
-      class="sws-aspect-16-9"
->
+<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
     <title>SimpleWebSlides</title>
 
@@ -15,16 +13,18 @@
 
     <!-- Load jQuery -->
     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+    <!-- Load the library -->
+    <script src="../simpleWebSlides.js" type="text/javascript" ></script>
 
-    <!-- Initialize the library -->
-    <script src="../simpleWebSlides.js" type="text/javascript" >
-    </script>
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
           media="all" />
-    <!-- Load a custom Theme -->
-    <link rel="stylesheet"  title="Web 2.0"
-          href="../themes/webTwoPointO.css"
-          type="text/css" />
+    <!-- Load a custom Theme, the class-element marks this style-sheet
+      a "theme" that can be swtiched dynamicaly -->
+    <link class="sws-theme" rel="stylesheet"  title="Web 2.0"
+          href="../themes/webTwoPointO.css" type="text/css" />
+    <link class="sws-theme" rel="alternate stylesheet"  title="Default style"
+          href="../themes/default.css" type="text/css" />
+
     <!-- Customize some templates and initialize -->
 
     <script type="text/x-mathjax-config">
@@ -42,8 +42,6 @@
       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-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index d77a3a6..3821e30 100644
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -1,11 +1,24 @@
+/* default is 4:3 */
+.sws-canvas {
+    width:133.3vh;
+    height:100vh;
+}
+
 :root.sws-aspect-4-3 .sws-canvas {
     width:133.3vh;
     height:100vh;
+
 }
 :root.sws-aspect-16-9 .sws-canvas {
         width:177.7vh;
         height:100vh;
 }
+
+:root.sws-aspect-16-10 .sws-canvas {
+        width:160vh;
+        height:100vh;
+}
+
 .sws-canvas {
     position: relative;
     margin-left: auto;
@@ -44,7 +57,7 @@
     vertical-align:middle;
 }
 .sws-inner-canvas {
-    white-space: nowrap;
+   /* white-space: nowrap;*/
 }
 .sws-content {
     margin: 0vh;
@@ -72,38 +85,99 @@ body > h1, body > h2, body > h3 {
     display: none;
 }
 
+@font-face {
+  font-family: 'entypo';
+  font-style: 'normal';
+  font-weight: 'normal';
+  src: url('entypo.woff') format('woff');
+}
 
+/* entypo */
+.sws-symbol {
+    font-family: 'entypo';
+}
+
+#sws-control-panel-canvas {
+    position: fixed;
+    z-index: 100;
+    left: 0pt;
+    bottom: 0pt;
+    width: 100%;
+    height: 100%;
+    overflow:hidden;
+    text-align: center;
+    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;
+    font-size:6vh;
+    width: 100vh;
+    bottom: 0vh;
+    display:inline-block;
+    border-radius: 1vh;
+    background-color: white;
+    opacity: 0.9;
     color: black;
     z-index: 100;
+    margin-left: auto;
+    margin-right:auto;
     vertical-align:middle;
-    height: 60pt;
-/*    width:100%;*/
 }
-#sws-control-panel:before  {
-    content : "";
-    display: inline-block;
+
+
+#sws-control-panel-canvas:after{
+    content:"";
+    display:inline-block;
+    width: 0vh;
     height: 100%;
-    width: 0pt;
-    vertical-align: middle;
+    background:pink;
+    vertical-align:bottom;
 }
+
+#sws-control-panel-title-bar {
+    width: 100%;
+    font-size: 3vh;
+    text-align:right;
+}
+
+#sws-control-panel select
+ {
+     display: inline-block;
+     vertical-align: middle;
+     font-size: 3vh;
+ }
+
+#sws-control-panel-navigation {
+    text-align: center;
+}
+
 #sws-control-panel a {
+    color: black;
     text-decoration: none;
     display:inline-block;
-    padding:0pt 10pt 0pt 10pt;
+    padding:0pt 1em; 0pt 1em;
     vertical-align: middle;
 }
+
+#sws-control-panel-title-bar a {
+    padding:0vh 2vh 0vh 0vh;
+    margin: 0 0 0 0;
+}
+
 #sws-control-panel a:hover {
     cursor: pointer;
 }
+#sws-control-panel-slide-input
+{
+    font-size: 3vh;
+    width: 3em;
+    vertical-align:middle;
+}
+#sws-control-panel-total-slides {
+    font-size: 3vh;
+    vertical-align:middle;
+}
 
+#sws-control-panel-navigation-bar {
+    width: 50vh;
+}
diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index c015249..d2859f3 100644
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -52,13 +52,31 @@ 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>\
+    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>\
+<a title='Close panel' id='sws-control-panel-close' onclick='$(\"#sws-control-panel-canvas\").toggle();'>&#x2716;</a>\
+</div>\
+<div id='sws-control-panel-options'>\
+<span title='Change the aspect ratio' class='sws-symbol' >&#x1f4bb;</span><select id='sws-aspect-select' onchange='SWS.Presentation.changeAspect();'>\
+<option value='sws-aspect-4-3'>4:3</option>\
+<option value='sws-aspect-16-9'>16:9</option>\
+<option value='sws-aspect-16-10'>16:10</option>\
+</select>\
+<span title='Change the theme' class='sws-symbol'>&#x1f3a8;</span><select id='sws-theme-select' onchange='SWS.Presentation.changeTheme();'></select>\
+</div>\
+<div id='sws-control-panel-navigation'>\
+<a title='First slide' class='sws-symbol' onclick='SWS.Presentation.goToSlide(SWS.Presentation.firstSlide());' >&#x23ee;</a>\
+<a title='Previous slide' class='sws-symbol' onclick='SWS.Presentation.previousSlide();SWS.Presentation.refresh();'>&#x23ea;</a>\
+<a title='Previous step' class='sws-symbol' style='-webkit-transform: scaleX(-1);' onclick='SWS.Presentation.previous();SWS.Presentation.refresh();'>&#x25b6;</a>\
+<a title='Next step' class='sws-symbol' onclick='SWS.Presentation.next();SWS.Presentation.refresh();'>&#x25b6;</a>\
+<a title='Next slide' class='sws-symbol' onclick='SWS.Presentation.nextSlide();SWS.Presentation.refresh();'>&#x23e9;</a>\
+<a title='Last slide' class='sws-symbol' onclick='SWS.Presentation.goToSlide(SWS.Presentation.lastSlide());'>&#x23ed;</a>\
+<br/>\
+<span class='sws-symbol'>&#xe4ae;</span><input type='text' id='sws-control-panel-slide-input' oninput='SWS.Presentation.goToSlide($(\"#sws-control-panel-slide-input\").val()-1);'></input><span id='sws-control-panel-total-slides'></span>\
+<input type='range' title='Navigate the presentation' id='sws-control-panel-navigation-bar' onchange='SWS.Presentation.navigate();' step='1'></input>\
+</div>\
+</div>\
 </div>";
     self.slideActivate = function (o) {
         if (!(o.hasClass("sws-active-slide"))){
@@ -198,6 +216,43 @@ SWS.Effects = new function () {
 
 };
 
+SWS.Fullscreen = new function () {
+    var self = this;
+
+    if (SWS.Utils.isUndefined(document.fullScreen)) {
+        if (SWS.Utils.isUndefined(document.mozfullScreen)) {
+            self.status = function () { return document.webkitIsFullScreen; };
+            self.enter = function(e) {
+                e.webkitRequestFullScreen();
+            };
+            self.exit = function () {
+                document.webkitCancelFullScreen();
+            };
+
+        } else {
+            self.status = function () { return document.mozfullScreen; };
+            self.enter = function(e) {
+                e.mozRequestFullScreen();
+            };
+            self.exit = function () {
+                document.mozCancelFullScreen();
+            };
+
+        };
+    } else {
+            self.status = function () { return document.fullScreen; };
+            self.enter = function(e) {
+                e.requestFullScreen();
+            };
+            self.exit = function () {
+                document.cancelFullScreen();
+            };
+
+    };
+
+
+};
+
 SWS.Presentation = new function () {
 
 
@@ -406,7 +461,7 @@ SWS.Presentation = new function () {
             self.cycleStyle();
             return;
         case 67: /* c */
-            $("#sws-control-panel").toggle();
+            $("#sws-control-panel-canvas").toggle();
         default:
             return;
         };
@@ -483,8 +538,67 @@ SWS.Presentation = new function () {
 
     };
 
+    /* Forces redrawing the page without reloading */
+    self.redraw = function () {
+        $("body").hide();
+        $("body").show();
+    };
+
+    self.changeAspect = function() {
+        $("html").removeClass("sws-aspect-4-3")
+            .removeClass("sws-aspect-16-9")
+            .removeClass("sws-aspect-16-10")
+            .addClass($("#sws-aspect-select").val());
+        self.redraw();
+    };
+
+
+    self.changeTheme = function () {
+        var theme_name = $("#sws-theme-select").val();
+        $("link.sws-theme").each (function (i) {
+            var e = $(this);
+            var title =  e.attr("title");
+            e[0].disabled = (title != theme_name);
+        });
+        self.redraw();
+    };
+
+
+    var _fullscreen_icon_on = "&#xe746;";
+    var _fullscreen_icon_off = "&#xe744;";
+
+    self.toggleFullScreen = function () {
+        if (SWS.Fullscreen.status()) {
+            SWS.Fullscreen.exit();
+            $("a#sws-control-panel-fullscreen")
+                .html(_fullscreen_icon_off);
+
+
+
+        } else {
+            SWS.Fullscreen.enter($("body")[0]);
+            $("a#sws-control-panel-fullscreen")
+                .html(_fullscreen_icon_on);
+        };
+    };
+    function _update_ui() {
+        var nav = $('#sws-control-panel-navigation-bar');
+        nav.val(SWS.Presentation.getCurrentSlide() + 1);
+        $('#sws-control-panel-slide-input').val(nav.val());
+    }
+    self.navigate = function () {
+        self.goToSlide($("#sws-control-panel-navigation-bar").val()-1);
+        _update_ui();
+    };
+
+
     self.init = function () {
-        console.log("inited");
+
+
+
+        $(window).resize(self.redraw);
+
+
         $(window).bind('storage', function (e) {
             console.log(e);
         });
@@ -492,7 +606,8 @@ SWS.Presentation = new function () {
         _total_slides = $(".sws-slide").length;
 
         $(document).keydown(self.inputHandler);
-        $("body").append($(SWS.Templates.controlPanel));
+
+
         var cur = self.getCurrentSlide();
         $(".sws-slide").each (function (i) {
             var par = $(this).parent();
@@ -538,10 +653,43 @@ SWS.Presentation = new function () {
             init_canvas(canvas,_slide_callbacks[i]);
 
         });
+
+
+
+        // Initialize the control panel
+        $("body").append($(SWS.Templates.controlPanel));
+        // Fill the theme switcher
+        $("link.sws-theme").each (function (i) {
+            var e = $(this);
+            var opt = "<option value='";
+            opt += e.attr("title");
+            opt += "' ";
+            if (e.attr("rel") == "stylesheet") {
+                opt+= "selected='selected'";
+            };
+            opt += ">" + e.attr("title") + "</option>";
+            $("#sws-theme-select").append($(opt));
+        });
+        // Set the fullscreen icon
+        if (SWS.Fullscreen.status()) {
+            $("a#sws-control-panel-fullscreen")
+                .html(_fullscreen_icon_on);
+        } else {
+            $("a#sws-control-panel-fullscreen")
+                .html(_fullscreen_icon_off);
+        };
+        // Put the navigation range at the correct position
+        var nav = $('#sws-control-panel-navigation-bar');
+        nav.attr("min", SWS.Presentation.firstSlide() + 1);
+        nav.attr("max", SWS.Presentation.lastSlide() + 1);
+        $('#sws-control-panel-total-slides').text('/' + SWS.Presentation.getNumSlides());
+        _update_ui();
+
         _slide_callbacks = null; /* avoid a leak */
         self.refresh();
         _initialized = true;
 
+
     };
 
 };
-- 
2.17.1

