Updated dzslides template to current github version.

author: John MacFarlane <fiddlosopher@gmail.com> 2011-11-07 12:13:36 -0800
committer: John MacFarlane <fiddlosopher@gmail.com> 2011-11-07 12:15:50 -0800
commit: 29e6d07090fbdf8091efeab28c72540095ab4310 (patch)
tree: 87162b82d5bcfbeb72d63312ab0e81a328cc514e /default.dzslides
parent: 1b6b9a6d53d20f104cd3f67628d6cbd024ce5cc2 (diff)
download: pandoc-29e6d07090fbdf8091efeab28c72540095ab4310.tar.gz
1 files changed, 299 insertions, 176 deletions
diff --git a/default.dzslides b/default.dzslides
index 4cc541e0d..e64a61d31 100644
--- a/default.dzslides
+++ b/default.dzslides
@@ -23,36 +23,48 @@ $else$
 <style>
   html { background-color: black; }
   body { background-color: white; }
-  /* A section is a slide. Its size is 800x600, and this will never change */
+  /* A section is a slide. It's size is 800x600, and this will never change */
   section {
       font-family: Arial, serif;
       font-size: 20pt;
       line-height: 24pt;
       padding: 16pt;
     }
-  section > * { margin-bottom: 1em; }
-  section.titleslide h1 { margin-top: 200px; }
   h1, h2, h3 {
-      margin-top: 50px;
-      text-align: center;
-    }
-  h1 { font-size: 180%: }
-  h2 { font-size: 120%; }
-  h3 { font-size: 100%; }
+    text-align: center;
+    margin: 10pt 10pt 20pt 10pt;
+  }
   ul, ol {
-      margin-left: 40px;
+    margin: 10px 10px 10px 50px;
   }
-  a { color: #FF0066; } a:hover { text-decoration: underline; }
-  footer { position: absolute; bottom: 50px; right: 50px; }
+  section.titleslide h1 { margin-top: 200px; }
+  h1 { font-size: 180%; }
+  h2 { font-size: 120%; }
+  h3 { font-size: 100%; }
   blockquote { font-style: italic }
-  pre {
-   font-size: 80%;
-   font-weight: bold;
-   padding: 0.2em 1em 0.2em 1em;
+  q {
+    display: inline-block;
+    width: 700px;
+    height: 600px;
+    background-color: black;
+    color: white;
+    font-size: 60px;
+    padding: 50px;
   }
-  .images {
-    margin: 20px;
-    text-align: center;
+
+  img, video {
+    width: 800px;
+    height: 600px;
+    position: absolute;
+    top: 0;
+    background-color: black;
+    z-index: -1;
+  }
+
+  footer {
+    position: absolute;
+    bottom: 10px;
+    right: 20px;
   }
 
   /* Transition effect */
@@ -74,13 +86,16 @@ $else$
   /* After */
   section[aria-selected] ~ section { left: +150%; }
 
-  /* Increment with lists */
+  /* Incremental elements */
+
+  /* By default, visible */
   .incremental > * { opacity: 1; }
-  .incremental > *[aria-selected] { opacity: 1; }
-  .incremental > *[aria-selected] ~ * { opacity: 0.2; }
-  /* Increment with images */
-  .incremental > img[aria-selected] { box-shadow: 0 0 10px #000 }
 
+  /* The current item */
+  .incremental > *[aria-selected] { color: red; opacity: 1; }
+
+  /* The items to-be-selected */
+  .incremental > *[aria-selected] ~ * { opacity: 0.2; }
 </style>
 $endif$
 $if(math)$
@@ -107,13 +122,19 @@ $body$
 $for(include-after)$
 $include-after$
 $endfor$
-<!-- {{{{ *****************  DZSlides CORE 2.0b1 *************************** -->
-<!-- *********************************************************************** -->
-<!-- *********************************************************************** -->
-<!-- *********************************************************************** -->
-<!-- *********************************************************************** -->
-
-<!-- This block of code is not supposed to be edited, but if you want to change the behavior of the slides, feel free to hack it ;) -->
+<!-- {{{{ dzslides core
+#
+#
+#     __  __  __       .  __   ___  __
+#    |  \  / /__` |    | |  \ |__  /__`
+#    |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
+#
+#
+# The following block of code is not supposed to be edited.
+# But if you want to change the behavior of these slides,
+# feel free to hack it!
+#
+-->
 
 <!-- Default Style -->
 <style>
@@ -125,98 +146,109 @@ $endfor$
     position: absolute; top: 50%; left: 50%;
     overflow: hidden;
   }
-  html {
-    overflow: hidden;
-  }
   section {
     position: absolute;
     pointer-events: none;
-    width: 95%; height: 100%;
+    width: 100%; height: 100%;
   }
   section[aria-selected] { pointer-events: auto; }
+  html { overflow: hidden; }
   body { display: none; }
   body.loaded { display: block; }
-  .incremental {visibility: hidden}
-  .incremental[active] {visibility: visible}
+  .incremental {visibility: hidden; }
+  .incremental[active] {visibility: visible; }
 </style>
 
 <script>
-  var friendWindows = [];
-  var idx, step;
-  var slides;
-
-  /* main() */
+  var Dz = {
+    remoteWindows: [],
+    idx: -1,
+    step: 0,
+    slides: null,
+    params: {
+      autoplay: "1"
+    }
+  };
 
-  window.onload = function() {
-    slides = document.querySelectorAll("body > section");
-    onhashchange();
+  Dz.init = function() {
     document.body.className = "loaded";
-    setupTouchEvents();
-    onresize();
+    this.slides = $$$$("body > section");
+    this.setupParams();
+    this.onhashchange();
+    this.setupTouchEvents();
+    this.onresize();
+  }
+  
+  Dz.setupParams = function() {
+    var p = window.location.search.substr(1).split('&');
+    p.forEach(function(e, i, a) {
+      var keyVal = e.split('=');
+      Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
+    });
   }
 
-  /* Handle keys */
-
-  window.onkeydown = function(e) {
+  Dz.onkeydown = function(aEvent) {
     // Don't intercept keyboard shortcuts
-    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+    if (aEvent.altKey
+      || aEvent.ctrlKey
+      || aEvent.metaKey
+      || aEvent.shiftKey) {
       return;
     }
-    if ( e.keyCode == 37 // left arrow
-      || e.keyCode == 38 // up arrow
-      || e.keyCode == 33 // page up
+    if ( aEvent.keyCode == 37 // left arrow
+      || aEvent.keyCode == 38 // up arrow
+      || aEvent.keyCode == 33 // page up
     ) {
-      e.preventDefault();
-      back();
+      aEvent.preventDefault();
+      this.back();
     }
-    if ( e.keyCode == 39 // right arrow
-      || e.keyCode == 40 // down arrow
-      || e.keyCode == 34 // page down
+    if ( aEvent.keyCode == 39 // right arrow
+      || aEvent.keyCode == 40 // down arrow
+      || aEvent.keyCode == 34 // page down
     ) {
-      e.preventDefault();
-      forward();
+      aEvent.preventDefault();
+      this.forward();
     }
-    if (e.keyCode == 35) { // end
-      e.preventDefault();
-      end();
+    if (aEvent.keyCode == 35) { // end
+      aEvent.preventDefault();
+      this.goEnd();
     }
-    if (e.keyCode == 36) { // home
-      e.preventDefault();
-      start();
+    if (aEvent.keyCode == 36) { // home
+      aEvent.preventDefault();
+      this.goStart();
     }
-
-    if ( e.keyCode == 32) { // space
-        e.preventDefault();
-        toggleContent();
+    if (aEvent.keyCode == 32) { // space
+      aEvent.preventDefault();
+      this.toggleContent();
     }
   }
 
   /* Touch Events */
 
-  function setupTouchEvents() {
+  Dz.setupTouchEvents = function() {
     var orgX, newX;
     var tracking = false;
 
     var db = document.body;
-    db.addEventListener("touchstart", start, false);
-    db.addEventListener("touchmove", move, false);
+    db.addEventListener("touchstart", start.bind(this), false);
+    db.addEventListener("touchmove", move.bind(this), false);
 
-    function start(e) {
-      e.preventDefault();
+    function start(aEvent) {
+      aEvent.preventDefault();
       tracking = true;
-      orgX = e.changedTouches[0].pageX;
+      orgX = aEvent.changedTouches[0].pageX;
     }
 
-    function move(e) {
+    function move(aEvent) {
       if (!tracking) return;
-      newX = e.changedTouches[0].pageX;
+      newX = aEvent.changedTouches[0].pageX;
       if (orgX - newX > 100) {
         tracking = false;
-        forward();
+        this.forward();
       } else {
         if (orgX - newX < -100) {
           tracking = false;
-          back();
+          this.back();
         }
       }
     }
@@ -224,157 +256,248 @@ $endfor$
 
   /* Adapt the size of the slides to the window */
 
-  window.onresize = function() {
+  Dz.onresize = function() {
     var db = document.body;
     var sx = db.clientWidth / window.innerWidth;
     var sy = db.clientHeight / window.innerHeight;
     var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
+
     db.style.MozTransform = transform;
     db.style.WebkitTransform = transform;
     db.style.OTransform = transform;
     db.style.msTransform = transform;
     db.style.transform = transform;
   }
-  function getDetails(idx) {
-    var s = document.querySelector("section:nth-of-type("+ idx +")");
-    var d = s.querySelector("details");
-    return d?d.innerHTML:"";
+
+
+  Dz.getDetails = function(aIdx) {
+    var s = $$("section:nth-of-type(" + aIdx + ")");
+    var d = s.$$("details");
+    return d ? d.innerHTML : "";
   }
-  window.onmessage = function(e) {
-    var msg = e.data;
-    var win = e.source;
-    if (msg === "register") {
-      friendWindows.push(win);
-      win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*");
-      win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
+
+  Dz.onmessage = function(aEvent) {
+    var argv = aEvent.data.split(" "), argc = argv.length;
+    argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
+    var win = aEvent.source;
+    if (argv[0] === "REGISTER" && argc === 1) {
+      this.remoteWindows.push(win);
+      this.postMsg(win, "REGISTERED", document.title, this.slides.length);
+      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
       return;
     }
-    if (msg === "back") back();
-    if (msg === "forward") forward();
-    if (msg === "toggleContent") toggleContent();
-    // setSlide(42)
-    var r = /setSlide\((\d+)\)/.exec(msg);
-    if (r) {
-        setSlide(r[1]);
-    }
+    if (argv[0] === "BACK" && argc === 1)
+      this.back();
+    if (argv[0] === "FORWARD" && argc === 1)
+      this.forward();
+    if (argv[0] === "START" && argc === 1)
+      this.goStart();
+    if (argv[0] === "END" && argc === 1)
+      this.goEnd();
+    if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
+      this.toggleContent();
+    if (argv[0] === "SET_CURSOR" && argc === 2)
+      window.location.hash = "#" + argv[1];
+    if (argv[0] === "GET_CURSOR" && argc === 1)
+      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
+    if (argv[0] === "GET_NOTES" && argc === 1)
+      this.postMsg(win, "NOTES", this.getDetails(this.idx));
   }
 
-  /* If a Video is present in this new slide, play it.
-     If a Video is present in the previous slide, stop it. */
-
-  function toggleContent() {
-    var s = document.querySelector("section[aria-selected]");
+  Dz.toggleContent = function() {
+    // If a Video is present in this new slide, play it.
+    // If a Video is present in the previous slide, stop it.
+    var s = $$("section[aria-selected]");
     if (s) {
-        var video = s.querySelector("video");
-        if (video) {
-            if (video.ended || video.paused) {
-                video.play();
-            } else {
-                video.pause();
-            }
+      var video = s.$$("video");
+      if (video) {
+        if (video.ended || video.paused) {
+          video.play();
+        } else {
+          video.pause();
         }
+      }
     }
   }
 
-  /* If the user change the slide number in the URL bar, jump
-     to this slide. */
-
-  function setCursor(aIdx, aStep) {
-    aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : "";
+  Dz.setCursor = function(aIdx, aStep) {
+    // If the user change the slide number in the URL bar, jump
+    // to this slide.
+    aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
     window.location.hash = "#" + aIdx + aStep;
   }
-  window.onhashchange = function(e) {
-    var cursor = window.location.hash.split("#"), newidx = 1, newstep = 0;
+
+  Dz.onhashchange = function() {
+    var cursor = window.location.hash.split("#"),
+        newidx = 1,
+        newstep = 0;
     if (cursor.length == 2) {
       newidx = ~~cursor[1].split(".")[0];
       newstep = ~~cursor[1].split(".")[1];
+      if (newstep > Dz.slides[newidx - 1].$$$$('.incremental > *').length) {
+        newstep = 0;
+        newidx++;
+      }
+    }
+    if (newidx != this.idx) {
+      this.setSlide(newidx);
+    }
+    if (newstep != this.step) {
+      this.setIncremental(newstep);
+    }
+    for (var i = 0; i < this.remoteWindows.length; i++) {
+      this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
     }
-    if (newidx != idx) setSlide(newidx);
-    setIncremental(newstep);
   }
 
-  /* Slide controls */
-
-  function back() {
-    if (idx == 1 && step == 0) return;
-    if (step == 0)
-      setCursor(idx - 1, slides[idx - 2].querySelectorAll('.incremental > *').length);
-    else 
-      setCursor(idx, step - 1);
+  Dz.back = function() {
+    if (this.idx == 1 && this.step == 0) {
+      return;
+    }
+    if (this.step == 0) {
+      this.setCursor(this.idx - 1,
+                     this.slides[this.idx - 2].$$$$('.incremental > *').length);
+    } else {
+      this.setCursor(this.idx, this.step - 1);
+    }
   }
-  function forward() {
-    if (idx >= slides.length && step >= slides[idx - 1].querySelectorAll('.incremental > *').length) return;
-    if (step >= slides[idx - 1].querySelectorAll('.incremental > *').length)
-      setCursor(idx + 1, 0);
-    else
-      setCursor(idx, step + 1);
+
+  Dz.forward = function() {
+    if (this.idx >= this.slides.length &&
+        this.step >= this.slides[this.idx - 1].$$$$('.incremental > *').length) {
+        return;
+    }
+    if (this.step >= this.slides[this.idx - 1].$$$$('.incremental > *').length) {
+      this.setCursor(this.idx + 1, 0);
+    } else {
+      this.setCursor(this.idx, this.step + 1);
+    }
   }
-  function start() {
-    setCursor(1, 0);
+
+  Dz.goStart = function() {
+    this.setCursor(1, 0);
   }
-  function end() {
-    var lastIdx = slides.length;
-    var lastStep = slides[lastIdx - 1].querySelectorAll('.incremental > *').length;
-    setCursor(lastIdx, lastStep);
+
+  Dz.goEnd = function() {
+    var lastIdx = this.slides.length;
+    var lastStep = this.slides[lastIdx - 1].$$$$('.incremental > *').length;
+    this.setCursor(lastIdx, lastStep);
   }
 
-  function setSlide(aIdx) {
-    idx = aIdx;
-    var old = document.querySelector("section[aria-selected]");
-    var next = document.querySelector("section:nth-of-type("+ idx +")");
+  Dz.setSlide = function(aIdx) {
+    this.idx = aIdx;
+    var old = $$("section[aria-selected]");
+    var next = $$("section:nth-of-type("+ this.idx +")");
     if (old) {
       old.removeAttribute("aria-selected");
-      var video = old.querySelector("video");
-      if (video) { video.pause(); }
+      var video = old.$$("video");
+      if (video) {
+        video.pause();
+      }
     }
     if (next) {
       next.setAttribute("aria-selected", "true");
-      var video = next.querySelector("video");
-      if (video) { video.play(); }
-    } else {
-      idx = 0;
-      for (var i = 0, l = slides.length; i < l; i++) {
-          if (slides[i].hasAttribute("aria-selected")) {
-              idx = i + 1;
-          }
+      var video = next.$$("video");
+      if (video && !!+this.params.autoplay) {
+        video.play();
       }
-    }
-    for (var i = 0, l = friendWindows.length; i < l; i++) {
-        friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
+    } else {
+      // That should not happen
+      this.idx = -1;
+      // console.warn("Slide doesn't exist.");
     }
   }
-  function setIncremental(aStep) {
-    step = aStep;
-    var old = slides[idx-1].querySelector('.incremental > *[aria-selected]');
-    if (old)
+
+  Dz.setIncremental = function(aStep) {
+    this.step = aStep;
+    var old = this.slides[this.idx - 1].$$('.incremental > *[aria-selected]');
+    if (old) {
       old.removeAttribute('aria-selected');
-    var incrementals = slides[idx-1].querySelectorAll('.incremental');
-    if (step == 0) {
-      for (var i = 0; i < incrementals.length; i++) {
-        incrementals[i].removeAttribute('active');
-      }
+    }
+    var incrementals = this.slides[this.idx - 1].$$$$('.incremental');
+    if (this.step <= 0) {
+      incrementals.forEach(function(aNode) {
+        aNode.removeAttribute('active');
+      });
       return;
     }
-    var next = slides[idx-1].querySelectorAll('.incremental > *')[step-1];
+    var next = this.slides[this.idx - 1].$$$$('.incremental > *')[this.step - 1];
     if (next) {
       next.setAttribute('aria-selected', true);
       next.parentNode.setAttribute('active', true);
       var found = false;
-      for (var i = 0; i < incrementals.length; i++) {
-        if (incrementals[i] != next.parentNode)
+      incrementals.forEach(function(aNode) {
+        if (aNode != next.parentNode)
           if (found)
-            incrementals[i].removeAttribute('active');
+            aNode.removeAttribute('active');
           else
-            incrementals[i].setAttribute('active', true);
+            aNode.setAttribute('active', true);
         else
           found = true;
-      }
+      });
     } else {
-      setCursor(idx, 0);
+      setCursor(this.idx, 0);
     }
     return next;
   }
+  
+  Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
+    aMsg = [aMsg];
+    for (var i = 2; i < arguments.length; i++)
+      aMsg.push(encodeURIComponent(arguments[i]));
+    aWin.postMessage(aMsg.join(" "), "*");
+  }
+
+  window.onload = Dz.init.bind(Dz);
+  window.onkeydown = Dz.onkeydown.bind(Dz);
+  window.onresize = Dz.onresize.bind(Dz);
+  window.onhashchange = Dz.onhashchange.bind(Dz);
+  window.onmessage = Dz.onmessage.bind(Dz);
 </script>
-<!-- vim: set fdm=marker: }}} -->
+
+
+<script> // Helpers
+  if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+
+      // closest thing possible to the ECMAScript 5 internal IsCallable
+      // function 
+      if (typeof this !== "function")
+      throw new TypeError(
+        "Function.prototype.bind - what is trying to be fBound is not callable"
+      );
+
+      var aArgs = Array.prototype.slice.call(arguments, 1),
+          fToBind = this,
+          fNOP = function () {},
+          fBound = function () {
+            return fToBind.apply( this instanceof fNOP ? this : oThis || window,
+                   aArgs.concat(Array.prototype.slice.call(arguments)));
+          };
+
+      fNOP.prototype = this.prototype;
+      fBound.prototype = new fNOP();
+
+      return fBound;
+    };
+  }
+
+  var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
+    return this.querySelector(aQuery);
+  }).bind(document);
+
+  var $$$$ = (HTMLElement.prototype.$$$$ = function(aQuery) {
+    return this.querySelectorAll(aQuery);
+  }).bind(document);
+
+  NodeList.prototype.forEach = function(fun) {
+    if (typeof fun !== "function") throw new TypeError();
+    for (var i = 0; i < this.length; i++) {
+      fun.call(this, this[i]);
+    }
+  }
+
+</script>
+
 </body>
 </html>
author	John MacFarlane <fiddlosopher@gmail.com>	2011-11-07 12:13:36 -0800
committer	John MacFarlane <fiddlosopher@gmail.com>	2011-11-07 12:15:50 -0800
commit	29e6d07090fbdf8091efeab28c72540095ab4310 (patch)
tree	87162b82d5bcfbeb72d63312ab0e81a328cc514e /default.dzslides
parent	1b6b9a6d53d20f104cd3f67628d6cbd024ce5cc2 (diff)
download	pandoc-29e6d07090fbdf8091efeab28c72540095ab4310.tar.gz