Add some new hooks in the API (goToSlide, fix various bugs)

Add the Inconsolata file to the theme.

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index 40322c2..7955f1d 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -24,8 +24,18 @@
     <link rel="stylesheet"  title="Web 2.0"
           href="../themes/webTwoPointO.css"
           type="text/css" />
-
     <!-- Customize some templates and initialize -->
+
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+      tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
+      });
+    </script>
+
+    <script type="text/javascript"
+            src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
+    </script>
+
     <script type="text/javascript">
 /*
       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
@@ -35,9 +45,28 @@
       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
-      SWS.Presentation.init();
+      //Ensures that we load SWS at the very end, after MathJax has
+      //been initialized
+      MathJax.Hub.Queue(function () {
+             SWS.Presentation.init();
+      });
+
+// Some utility functions:
+function set_color(o,c) {
+var style = o.attr("style");
+var a = style.split(";");
+for(var i = 0; i &lt; a.length; i++){
+if (a[i].indexOf("fill:") &gt;= 0){
+a[i] = "fill: " + c;
+break;
+};
+};
+o.attr("style",a.join(";"));
+
+};
 
     </script>
+
     <style type="text/css">
       #css {
       display:inline-block;
@@ -73,7 +102,6 @@
         your <span style='font-size:larger'>❤</span>'s content
         with <em id="css">C S S</em>!</li>
         <li class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
-        <li class="sws-onslide-1_3-5_7">(I'm here every other frame)</li>
       </ul>
         <script type="text/javascript">
           var zoom_title = function (canvas) {
@@ -82,7 +110,8 @@
           h1.animate({"font-size":"80pt" }, 300)
           .animate({"font-size":old_size }, 300);
           };
-          SWS.Presentation.registerCallback(6, zoom_title);
+
+          SWS.Presentation.registerCallback(3, zoom_title);
         </script>
     </div>
 
@@ -98,8 +127,235 @@
           (videos, vector graphics, sounds,…)
         </li>
       </ul>
+      <p  class="sws-pause">But wait! I'm loosing all those nicely
+      rendered mathematical formulæ!</p>
+      <p class="sws-pause"> You mean like this one<sup>*</sup> ?
+        $$
+        F_n = \frac{1}{\sqrt{5}}\cdot\left(\frac{1+\sqrt{5}}{2}\right)^n-\frac{1}{\sqrt{5}}\cdot\left(\frac{1-\sqrt{5}}{2}\right)^n
+        $$
+      </p>
+      <p class="sws-pause">or that one<sup>*</sup> ?
 
+        $$
+        \frac{\Gamma\cup\{x\mapsto t\}\vdash e : s}{\Gamma\vdash \lambda x^{t}.e : t \rightarrow s}
+        $$
+      </p>
+      <p class="sws-pause">*: All this is done
+        using <a href="http://www.mathjax.org">MathJax!</a> and
+        written like this:<br/>
+<pre><code>
+    \frac{
+          \Gamma\cup\{x\mapsto t\}\vdash e : s
+    }{
+          \Gamma\vdash \lambda x^{t}.e : t \rightarrow s
+    }
+</code></pre>
+</p>
+    </div>
+    <div class="sws-slide">
+      <h1>A simple example</h1>
+      <p class="sws-onframe-1_3">
+      A minimal slide, with no animation looks like this:
+<pre><code>
+     &lt;div <em>class="sws-slide"</em>&gt;
+          &lt;h1&gt;Slide title&lt;/h1&gt;
+             Hello world!
+     &lt;/div&gt;
+</code></pre>
+</p>
+<p class="sws-pause">
+  You can also reveal things progressively like this:
+  <pre><code>
+      &lt;p&gt; Text 1&lt;/p&gt;
+      &lt;p <em>class="sws-pause"</em>&gt;
+      Text 2 (appears afterwards)
+      &lt;/p&gt;
+  </code></pre>
+</p>
+<p class="sws-pause">
+  You can also set an element to appear on specific frames:
+  <pre><code>
+      &lt;p&gt; Text 1&lt;/p&gt;
+      &lt;p <em>class="sws-onframe-1-5_9"</em>&gt;
+      Appears on frame 2, 3, 4, 5, 6 and 10 of the current slide
+      (frame numbering starts at 0).
+      &lt;/p&gt;
+  </code></pre>
+</p>
     </div>
+<div class="sws-slide">
+  <h1>Scripting your presentation</h1>
+  <p>
+    Of course, you can script your presentation with Javascript!<br/>
+    You just need to add the <code>script</code> element somewhere in
+    the current <code>div</code>
+    <pre><code>
+&lt;script type="text/javascript"&gt;
+    function zoom_title (canvas) {
+        var h1 = canvas.find("h1");
+        var old_size = h1.css('font-size');
+            h1.animate({"font-size":"80pt" }, 300)
+               .animate({"font-size":old_size }, 300);
+    };
+    //Call the zoom_title function on the 4th and 7th frame
+    <em>SWS.Presentation.registerCallback("3_6", zoom_title);</em>
+&lt;script&gt;
+</code></pre>
+
+  </p>
+
+<script type="text/javascript">
+  SWS.Presentation.registerCallback("4_7", zoom_title);
+</script>
+
+</div>
+<div class="sws-slide">
+  <h1>SWS API</h1>
+  You can manipulate the presentation through
+  the <em><code>SWS.Presentation</code></em> object. For instance:
+  <code><pre>
+      &lt;a onclick="SWS.Presentation.previous();"&gt;◀◀◀◀◀&lt;/a&gt;
+      &lt;a onclick="SWS.Presentation.next();"&gt;▶▶▶▶▶&lt;/a&gt;
+      &lt;a onclick="SWS.Presentation.goToSlide(1,2);"&gt;Go back in time!&lt;/a&gt;
+</pre></code>
+  Let's try it:
+  <a onclick="SWS.Presentation.previous();SWS.Presentation.refresh();">◀◀◀◀◀</a>
+  <a onclick="SWS.Presentation.next();SWS.Presentation.refresh();">▶▶▶▶▶</a>
+  <a onclick="SWS.Presentation.goToSlide(1,2);">Go
+    back in time!</a> (to the second frame of the first slide)
+</div>
+<div class="sws-slide">
+  <h1>Some more fancy stuff</h1>
+Let's put some <em>inline</em> SVG:
+<div style="text-align:center;">
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="68.160713"
+   height="170.35268"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="lights.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="38.9935"
+     inkscape:cy="56.441072"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1627"
+     inkscape:window-height="1026"
+     inkscape:window-x="1077"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2985"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       originx="-82.348214px"
+       originy="-877.32807px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-82.348214,-4.6814313)">
+    <g
+       id="g3014"
+       transform="matrix(1.5714286,0,0,1.5714286,-48.571431,-4.2069617)">
+      <rect
+         ry="10"
+         y="7.3621826"
+         x="85"
+         height="105"
+         width="40"
+         id="rect2989"
+         style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+      <path
+         transform="translate(132.5,-20)"
+         d="m -15,44.862183 c 0,6.903559 -5.596441,12.5 -12.5,12.5 -6.903559,0 -12.5,-5.596441 -12.5,-12.5 0,-6.90356 5.596441,-12.5 12.5,-12.5 6.903559,0 12.5,5.59644 12.5,12.5 z"
+         sodipodi:ry="12.5"
+         sodipodi:rx="12.5"
+         sodipodi:cy="44.862183"
+         sodipodi:cx="-27.5"
+         id="topdisk"
+         style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:type="arc" />
+      <path
+         d="m -15,44.862183 c 0,6.903559 -5.596441,12.5 -12.5,12.5 -6.903559,0 -12.5,-5.596441 -12.5,-12.5 0,-6.90356 5.596441,-12.5 12.5,-12.5 6.903559,0 12.5,5.59644 12.5,12.5 z"
+         sodipodi:ry="12.5"
+         sodipodi:rx="12.5"
+         sodipodi:cy="44.862183"
+         sodipodi:cx="-27.5"
+         id="middledisk"
+         style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:type="arc"
+         transform="translate(132.5,15)" />
+      <path
+         d="m -15,44.862183 c 0,6.903559 -5.596441,12.5 -12.5,12.5 -6.903559,0 -12.5,-5.596441 -12.5,-12.5 0,-6.90356 5.596441,-12.5 12.5,-12.5 6.903559,0 12.5,5.59644 12.5,12.5 z"
+         sodipodi:ry="12.5"
+         sodipodi:rx="12.5"
+         sodipodi:cy="44.862183"
+         sodipodi:cx="-27.5"
+         id="bottomdisk"
+         style="fill:#000a1a;fill-opacity:1;stroke:#1b373d;stroke-width:3.3829999;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:type="arc"
+         transform="translate(132.5,50)" />
+    </g>
+  </g>
+</svg>
+</div>
+Of course we can animate it with some javascript!
+<script type="text/javascript">
+  SWS.Presentation.registerCallback(0, function(o){
+  set_color(o.find("#topdisk"), "#000a1a");
+  });
+  SWS.Presentation.registerCallback(1, function(o){
+  set_color(o.find("#topdisk"), "#ff0000");
+  set_color(o.find("#middledisk"), "#000a1a");
+  });
+  SWS.Presentation.registerCallback(2, function(o){
+  set_color(o.find("#middledisk"), "#ffa500");
+  set_color(o.find("#bottomdisk"), "#000a1a");
+  });
+  SWS.Presentation.registerCallback(3, function(o){
+  set_color(o.find("#bottomdisk"), "#00ff00");
+  });
+</script>
+</div>
 
   </body>
 </html>

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index 90a6eb7..f54bb78 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -38,10 +38,12 @@
         border-width: 0cm;
         border-style: none;
         margin:0pt 0pt 0pt 0pt;
-        page-break-after:auto;
+        page-break-after:always;
         width: 297mm;
         height: 209.8mm; /* not 210 due to rounding errors */
         padding:0pt;
+        left:0pt;
+        top:0pt;
     }
     .sws-active-slide, .sws-inactive-slide {
         display: block;

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index 3e0faf6..42448ea 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -245,7 +245,6 @@ SWS.Presentation = new function () {
     };
     self.firstSlide = function () { return 0; };
     self.lastSlide = function () { return self.getNumSlides() - 1; };
-
     self.refresh = function () {
         /* block upcoming input event until all animations are finished */
         _disable_input_events = true;
@@ -348,6 +347,17 @@ SWS.Presentation = new function () {
             self.previousFrame();
     };
 
+    self.goToSlide = function (s, f) {
+        if (SWS.Utils.isUndefined(f))
+            f = 0;
+        if (!(s >= self.firstSlide() && s <= self.lastSlide())) return;
+        self.setCurrentSlide(s);
+        if (!(f >= self.firstFrame() && s <= self.lastFrame())) f = 0;
+        self.setCurrentFrame(f);
+        self.refresh();
+    };
+
+
     self.inputHandler = function (event) {
         if (_disable_input_events) return;
         switch (event.which) {
@@ -413,10 +423,11 @@ SWS.Presentation = new function () {
             }
         };
 
-        var specials = slide.find('*[class*="sws-onslide-"]').find("*").andSelf();
-        specials.each(function(i) {
+        var specials = null;
+
+        slide.find('*[class*="sws-onframe-"]').each(function(_){
             var cls = $(this).attr('class');
-            var idx = cls.indexOf("sws-onslide-");
+            var idx = cls.indexOf("sws-onframe-");
             if (idx >= 0) {
                 var end = cls.indexOf(" ", idx);
                 end = (end == -1) ? cls.length : end;
@@ -424,9 +435,14 @@ SWS.Presentation = new function () {
                 var o = SWS.Utils.parseFrameSpec(spec);
                 for(var f in o)
                     if (f > last_frame) last_frame = f;
-
-                if (!SWS.Utils.isEmpty(o))
-                    $(this).data("sws-frame-set", o);
+                $(this).find("*").andSelf().each(function(_){
+                    if (!SWS.Utils.isEmpty(o))
+                        $(this).data("sws-frame-set", o);
+                    if (specials)
+                        specials.add($(this));
+                    else
+                        specials = $(this);
+                });
             };
         });
 
@@ -446,7 +462,7 @@ SWS.Presentation = new function () {
 
     };
 
-    function init () {
+    self.init = function () {
 
         _total_slides = $(".sws-slide").length;
 
@@ -488,11 +504,4 @@ SWS.Presentation = new function () {
 
     };
 
-    self.init = function () {
-        $(document).ready(init);
-    };
-
-
-
-
 };

diff --git a/themes/webTwoPointO.css b/themes/webTwoPointO.css
index c1c06ec..9f8cecb 100644 (file)
--- a/themes/webTwoPointO.css
+++ b/themes/webTwoPointO.css
@@ -1,10 +1,13 @@
 @import url(https://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext);
-
+@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext);
 /* Default document properties */
 body {
     font-family: 'Armata',sans-serif;
     font-size: 18pt;
 }
+code {
+    font-family: 'Inconsolata', monospace;
+}
 
 /* The slide should be positioned w.r.t. to the canvas.
    The canvas takes up the whole window in screen mode and a
@@ -49,7 +52,11 @@ ul {
         color: #f14a29;
 
     }
-    a,em {
+    em {
+        color: #f14a29;
+        font-style:normal;
+    }
+    a {
         color: #0092bf;
         text-decoration:none;
         font-style:normal;