X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=doc%2Fdemo.xhtml;h=7955f1dbd40d1795fb94a92fd189a00ea59c3835;hb=84940d8f7c885110f6ce355ba467dba4f71d7f4d;hp=c0e4c164cc89299bfc5e7fd219733bc87f195fa1;hpb=6926bf5e28f22cd5ab455d61f13149c2db3d86c8;p=hacks%2FsimpleWebSlides.git

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index c0e4c16..7955f1d 100644
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -11,41 +11,62 @@
     <meta name="copyright"
           content="Copyright &#169; 2013 Kim Nguyễn" />
 
+    <!-- Load jQuery -->
+    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+
+    <!-- Initialize the library -->
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
           media="all" />
-    <!-- allows to switch themes in firefox -->
+    <script src="../simpleWebSlides.js" type="text/javascript" >
+    </script>
 
-    <link rel="stylesheet" title="Default" href="../themes/default.css"
-          type="text/css" />
-    <link rel="alternate stylesheet"  title="Web 2.0"
+    <!-- Load a custom Theme -->
+    <link rel="stylesheet"  title="Web 2.0"
           href="../themes/webTwoPointO.css"
           type="text/css" />
-
-    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
-    <script src="../simpleWebSlides.js" type="text/javascript" ></script>
     <!-- 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.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeVerticalSlide);
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeHorizontalSlide);
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeFadeOutIn);
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
 */
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeHorizontalFlip);
-
-      SWS.Presentation.setTemplate('sws-object-deactivate',
-      SWS.Effects.objectDeactivateFadeOut);
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+      SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
+      SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
-      SWS.Presentation.setTemplate('sws-object-activate',
-      SWS.Effects.objectActivateFadeIn);
+      //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(";"));
 
-      SWS.Presentation.init();
+};
 
     </script>
+
     <style type="text/css">
       #css {
       display:inline-block;
@@ -68,7 +89,7 @@
       </div>
     </div>
 
-
+    <!-- H1 below is hidden, used for table of content (TODO) -->
     <h1>Introduction</h1>
 
     <div class="sws-slide" >
@@ -81,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) {
@@ -90,6 +110,7 @@
           h1.animate({"font-size":"80pt" }, 300)
           .animate({"font-size":old_size }, 300);
           };
+
           SWS.Presentation.registerCallback(3, zoom_title);
         </script>
     </div>
@@ -106,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>