Implement generating a printout of the presentation.

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index 0e5c813..77510ae 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -20,10 +20,9 @@
           media="all" />
     <!-- 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" />
+    <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="U-Psud style"  href="../themes/uPsud.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 -->
 

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index 345820e..0a43418 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -1,23 +1,29 @@
 /* default is 4:3 */
+@page { margin: 0pt 0pt 0pt 0pt; }
 
-@media print {
-    body {
-        width: 297mm;
-        height: 210mm;
-    }
-    .sws-canvas {
-        height: 210mm;
-        page-break-after: always;
-    }
-    :root.sws-print-4 .sws-canvas {
-        height: 25vh;
-        width: 33.3vh;
-        page-break-after: auto;
-    }
+:root.sws-print body {
+    width: 297mm;
+    overflow:auto;
+    padding: 0pt 0pt 0pt 0pt;
+    margin: 0pt 0pt 0pt 0pt;
+
+}
+
+:root.sws-print .sws-canvas {
+    position: relative;
+    display:inline-block;
+    height: 210mm;
+    page-break-after: auto;
+    padding: 0pt 0pt 0pt 0pt;
+    margin: 0pt 0pt 0pt 0pt;
+    overflow: hidden;
+}
 
+.sws-canvas :last {
+    page-break-after: avoid;
 }
 
-.sws-canvas {
+:root.sws-display .sws-canvas {
     width:133.3vh;
     height:100vh;
 }
@@ -38,14 +44,11 @@
 }
 
 
-
-
-.sws-canvas {
+:root.sws-display .sws-canvas {
     position: relative;
     margin-left: auto;
     margin-right: auto;
     padding: 0vh;
-    overflow:hidden;
     margin-top: 0vh;
     margin-bottom: 0vh;
 }
@@ -54,28 +57,18 @@
     display: block;
 }
 
-@media print {
-    .sws-inactive-slide {
-        display: block;
-    }
+:root.sws-display .sws-inactive-slide {
+    display: none;
 }
 
-@media screen {
-
-    .sws-inactive-slide {
-        display: none;
-    }
+:root.sws-print .sws-inactive-slide {
+    opacity: 1;
 }
 
 .sws-active-object {
     visibility: visible;
 }
 
-@media print {
-    .sws-inactive-object {
-        visibility: visible;
-    }
-}
 
 @media screen {
     .sws-inactive-object {
@@ -113,11 +106,6 @@
     vertical-align:text-bottom;
 }
 
-body {
-    overflow:hidden;
-    margin: 0vh;
-    padding: 0vh;
-}
 
 body > h1, body > h2, body > h3 {
     display: none;
@@ -219,3 +207,11 @@ body > h1, body > h2, body > h3 {
 #sws-control-panel-navigation-bar {
     width: 50vh;
 }
+#sws-print-container {
+    top: 0;
+    left: 0;
+    width: 29.7cm;
+    overflow: auto;
+    border: 1px;
+    padding: 1px 1px 1px 1px;
+}
\ No newline at end of file

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index d0165f0..6229a74 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -44,7 +44,12 @@ SWS.Utils = new function () {
         return result;
     };
 
-
+    self.getParameterByName = function (name) {
+        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
+        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+        results = regex.exec(location.search);
+        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+    }
 };
 
 
@@ -64,6 +69,7 @@ SWS.Templates = new function () {
 <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>\
+<a onclick='SWS.Presentation.openPrint()' ><span title='Open Print-Out' class='sws-symbol'>&#59158;</span></a>\
 </div>\
 <div id='sws-control-panel-navigation'>\
 <a title='First slide' class='sws-symbol' onclick='SWS.Presentation.goToSlide(SWS.Presentation.firstSlide());' >&#x23ee;</a>\
@@ -147,7 +153,7 @@ SWS.Effects = new function () {
     var self = this;
 
     self.objectDeactivateFadeOut = function (o) {
-        o.animate({'opacity': '0'}, 200,
+        o.animate({'opacity': '0.1'}, 200,
                   function () { SWS.Templates.objectDeactivate(o)});
     };
 
@@ -162,11 +168,11 @@ SWS.Effects = new function () {
     self.slideChangeHorizontalFlip = function (from, to){
         var f = SWS.Presentation.getSlide(from);
         var t = SWS.Presentation.getSlide(to);
-        f.animate({ 'left': '50%', 'width': '0pt', 'opacity':'0' }, 150,
+        f.animate({ 'left': '50%', 'width': '0pt', 'opacity':'0.2' }, 150,
                   function  () {
                       SWS.Templates.slideDeactivate(f);
                       f.css({'left':'0%', 'width': '100%'});
-                      t.css({ 'left': '50%', 'width': '0pt','opacity':'0' });
+                      t.css({ 'left': '50%', 'width': '0pt','opacity':'0.3' });
                       SWS.Templates.slideActivate(t);
                       t.animate({'left':'0%', 'width': '100%','opacity':'1'});
                   });
@@ -174,10 +180,10 @@ SWS.Effects = new function () {
     self.slideChangeFadeOutIn = function (from, to) {
         var f = SWS.Presentation.getSlide(from);
         var t = SWS.Presentation.getSlide(to);
-        f.animate({ 'opacity': '0'}, 150,
+        f.animate({ 'opacity': '0.4'}, 150,
                   function () { SWS.Templates.slideDeactivate(f);
                                 SWS.Templates.slideActivate(t);
-                                t.css('opacity', '0');
+                                t.css('opacity', '0.5');
                                 t.animate({ 'opacity': '1'}, 150);
                               });
     };
@@ -189,14 +195,14 @@ SWS.Effects = new function () {
             t.css('opacity', '1');
             SWS.Templates.slideActivate(t);
             f.animate({ 'left': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f);
-                                                              f.css('opacity', '0');
+                                                              f.css('opacity', '0.6');
                                                               t.animate({ 'left': '0%' }, 250);
                                                             });
         } else {
             t.css('left', '-100%');
             SWS.Templates.slideActivate(t);
             f.animate({ 'left': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f);
-                                                             f.css('opacity', '0');
+                                                             f.css('opacity', '0.7');
                                                            });
             t.css('opacity', '1');
             t.animate({ 'left': '0%' }, 250);
@@ -270,9 +276,10 @@ SWS.Presentation = new function () {
     var _total_slides;
     var _initialized = false;
     var _disable_input_events = false;
-
+    var _print_mode = false;
     var _slide_callbacks = new Array ();
-
+    var _total_steps = -1;
+    var _current_theme = "";
 
     self.getNumSlides = function () { return _total_slides; };
 
@@ -326,6 +333,7 @@ SWS.Presentation = new function () {
         var from_slide = $(canvas[from_slide_num]);
         var slide_change = (from_slide_num != to_slide_num);
 
+
         var info = to_slide.data("sws-frame-info");
         SWS.Config['sws-update-header'](to_slide);
         SWS.Config['sws-update-footer'](to_slide);
@@ -383,6 +391,19 @@ SWS.Presentation = new function () {
         var infos = canvas.data("sws-frame-info");
         return infos;
     };
+
+    self.getTotalSteps = function () {
+        if (_total_steps >= 0) return _total_steps;
+        _total_steps = 0;
+        $(".sws-canvas").each(function(i) {
+            var canvas = $($(".sws-canvas")[i]);
+            var infos = canvas.data("sws-frame-info");
+            console.log(infos);
+            _total_steps += infos.last + 1;
+        });
+        return _total_steps;
+    };
+
     self.getCurrentFrame = function () { return self.getFrameInfo().current; };
     self.setCurrentFrame = function (i) { self.getFrameInfo().current = i; };
     self.firstFrame = function () { return 0; };
@@ -435,8 +456,42 @@ SWS.Presentation = new function () {
         styles[j].disabled = false;
     };
 
+
+    self.printMode = function () {
+        _print_mode = true;
+        var progress = $("<div style='position:fixed;top:0pt;left:0pt;background:white;color:black;width:100%;height:100vh;z-index:200;' id='sws-print-progress'>Rendering presentation: <span id='sws-percent-progress'></span>%</div>");
+        $("body").append(progress);
+
+        $("html").removeClass("sws-display").addClass("sws-print");
+        self.goToSlide(0,0);
+        var steps = self.getTotalSteps();
+        var total_steps = steps;
+        var loop;
+        loop = function () {
+            if (steps >= 0) {
+                $(".sws-canvas").find("*").addBack().promise().done(function() {
+                    var percent = ((total_steps - steps) / total_steps) * 100;
+                    $("#sws-percent-progress").text(Math.round(percent));
+                    console.log ("Step: " + steps);
+                    SWS.Config['sws-slide-change'] = SWS.Templates.slideChange;
+                    self.refresh();
+                    $($(".sws-canvas")[self.getCurrentSlide()]).css( { 'opacity': 1 });
+                    self.next();
+                    steps--;
+                    loop();
+                    })
+            } else {
+                $("#sws-percent-progress").text(100);
+                progress.remove();
+                window.print();
+            }
+        };
+        loop();
+
+    }
+
     self.inputHandler = function (event) {
-        if (_disable_input_events) return;
+        if (_disable_input_events || _print_mode ) return;
         switch (event.which) {
         case 36:/* Home */
             self.setCurrentSlide(self.firstSlide());
@@ -447,20 +502,20 @@ SWS.Presentation = new function () {
             break;
 
         case 32: /* space */
+        case 34: /* PgDown */
         case 39: /* -> */
             if (self.getCurrentSlide() == self.lastSlide()
                 && self.getCurrentFrame() == self.lastFrame()) return;
             self.next();
             break;
-        case 34: /* PgDown */
         case 78: /* n */
             self.nextSlide();
             break;
         case 8: /* backspace */
+        case 33: /* PgUp */
         case 37: /* <-   */
             self.previous();
             break;
-        case 33: /* PgUp */
         case 80: /* p */
             self.previousSlide();
             break;
@@ -539,7 +594,7 @@ SWS.Presentation = new function () {
         });
 
         canvas.data("sws-frame-info", { current: 0,
-                                        last: last_frame,
+                                        last: (last_frame - 0), // force cast to integer
                                         callbacks: callbacks
                                       });
 
@@ -560,17 +615,33 @@ SWS.Presentation = new function () {
     };
 
 
-    self.changeTheme = function () {
-        var theme_name = $("#sws-theme-select").val();
+    self.changeTheme = function (name) {
+        var theme_name;
+        if (typeof name === 'undefined')
+            theme_name = $("#sws-theme-select").val()
+        else
+            theme_name = name;
+        _current_theme = theme_name;
         $("link.sws-theme").each (function (i) {
             var e = $(this);
             var title =  e.attr("title");
-            e[0].disabled = (title != theme_name);
+            if (title == theme_name) {
+                e[0].rel = "stylesheet";
+                e[0].disabled = false;
+                e[0].media="all";
+
+            } else {
+                e[0].rel = "alternate stylesheet";
+                e[0].disabled = true;
+                e[0].media="all";
+            };
         });
         self.redraw();
     };
 
-
+    self.openPrint = function () {
+        window.open("?mode=print&theme=" + _current_theme);
+    }
     var _fullscreen_icon_on = "&#xe746;";
     var _fullscreen_icon_off = "&#xe744;";
 
@@ -602,7 +673,7 @@ SWS.Presentation = new function () {
     self.init = function () {
 
 
-
+        $("html").addClass("sws-display");
         $(window).resize(self.redraw);
 
 
@@ -685,7 +756,19 @@ SWS.Presentation = new function () {
         _update_ui();
 
         _slide_callbacks = null; /* avoid a leak */
-        self.refresh();
+
+        var passed_theme = SWS.Utils.getParameterByName("theme");
+        if (passed_theme == "")
+            self.changeTheme();
+        else
+            self.changeTheme(passed_theme);
+
+        if (SWS.Utils.getParameterByName("mode") == "print") {
+            self.printMode();
+        }
+        else 
+            self.refresh();
+
         _initialized = true;