dzslides: Updated template.html and styles in default template.

Closes #454.

1 files changed, 107 insertions, 36 deletions

diff --git a/dzslides/template.html b/dzslides/template.html
index 591664f30..f2fb64b38 100644
--- a/dzslides/template.html
+++ b/dzslides/template.html
@@ -13,7 +13,8 @@
 </section>
 
 <section>
-    <h2>Part one</h2>
+    <p>Some random text: But I've never been to the moon! You can see how I lived before I met you. Also Zoidberg.
+    I could if you hadn't turned on the light and shut off my stereo.</p>
 </section>
 
 <section>
@@ -23,12 +24,12 @@
       <li>Item 2
       <li>Item 3
     </ul>
+    <details>Some notes. They are only visible using onstage shell.</details>
 </section>
 
 <section>
   <q>
-    Soothe us with sweet lies. Is that a cooking show? No! I want to
-    live! There are still too many things I don't own!
+    Who's brave enough to fly into something we all keep calling a death sphere?
   </q>
 </section>
 
@@ -37,13 +38,18 @@
 </section>
 
 <section>
-    <h3>An image</h3>
-    <img src="http://placekitten.com/g/800/600">
+    <figure> <!-- Figures are used to display images and videos fullpage -->
+      <img src="http://placekitten.com/g/800/600">
+      <figcaption>An image</figcaption>
+    </figure>
+    <details>Kittens are so cute!</details>
 </section>
 
 <section>
-    <h3>A video</h3>
-    <video src="http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm" poster="http://www.mozilla.org/images/about/poster.jpg"></video>
+    <figure> <!-- Videos are automatically played -->
+      <video src="http://videos-cdn.mozilla.net/brand/Mozilla_Firefox_Manifesto_v0.2_640.webm" poster="http://www.mozilla.org/images/about/poster.jpg"></video>
+      <figcaption>A video</figcaption>
+    </figure>
 </section>
 
 <section>
@@ -58,12 +64,12 @@
 
 <style>
   html { background-color: black; }
-  body { background-color: white; }
+  body { background-color: white; border-radius: 12px}
   /* A section is a slide. It's size is 800x600, and this will never change */
   section {
       /* The font from Google */
       font-family: 'Oswald', arial, serif;
-      font-size: 40px;
+      font-size: 30px;
   }
   h1, h2 {
     margin-top: 200px;
@@ -78,29 +84,39 @@
       margin: 50px 200px;
   }
 
+  p {
+    margin: 75px;
+    font-size: 50px;
+  }
+
   q {
-    display: inline-block;
-    width: 700px;
-    height: 600px;
+    display: block;
+    width: 100%;
+    height: 100%;
     background-color: black;
     color: white;
     font-size: 60px;
     padding: 50px;
   }
 
-  img, video {
-    width: 800px;
-    height: 600px;
-    position: absolute;
-    top: 0;
+  /* Figures are displayed full-page, with the caption
+     on top of the image/video */
+  figure {
     background-color: black;
-    z-index: -1;
+  }
+  figcaption {
+    margin: 70px;
+    font-size: 50px;
   }
 
   footer {
     position: absolute;
-    bottom: 10px;
-    right: 20px;
+    bottom: 0;
+    width: 100%;
+    padding: 40px;
+    text-align: right;
+    background-color: #F3F4F8;
+    border-top: 1px solid #CCC;
   }
 
   /* Transition effect */
@@ -128,11 +144,17 @@
   .incremental > * { opacity: 1; }
 
   /* The current item */
-  .incremental > *[aria-selected] { color: red; opacity: 1; }
+  .incremental > *[aria-selected] { opacity: 1; }
 
   /* The items to-be-selected */
-  .incremental > *[aria-selected] ~ * { opacity: 0.2; }
+  .incremental > *[aria-selected] ~ * { opacity: 0; }
 
+  /* The progressbar, at the bottom of the slides, show the global
+     progress of the presentation. */
+  #progress-bar {
+    height: 2px;
+    background: #AAA;
+  }
 </style>
 
 <!-- {{{{ dzslides core
@@ -149,9 +171,11 @@
 #
 -->
 
+<div id="progress-bar"></div>
+
 <!-- Default Style -->
 <style>
-  * { margin: 0; padding: 0; }
+  * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
   details { display: none; }
   body {
     width: 800px; height: 600px;
@@ -170,6 +194,24 @@
   body.loaded { display: block; }
   .incremental {visibility: hidden; }
   .incremental[active] {visibility: visible; }
+  #progress-bar{
+    bottom: 0;
+    position: absolute;
+    -moz-transition: width 400ms linear 0s;
+    -webkit-transition: width 400ms linear 0s;
+    -ms-transition: width 400ms linear 0s;
+    transition: width 400ms linear 0s;
+  }
+  figure {
+    width: 100%;
+    height: 100%;
+  }
+  figure > * {
+    position: absolute;
+  }
+  figure > img, figure > video {
+    width: 100%; height: 100%;
+  }
 </style>
 
 <script>
@@ -178,6 +220,7 @@
     idx: -1,
     step: 0,
     slides: null,
+    progressBar : null,
     params: {
       autoplay: "1"
     }
@@ -186,6 +229,7 @@
   Dz.init = function() {
     document.body.className = "loaded";
     this.slides = $$("body > section");
+    this.progressBar = $("#progress-bar");
     this.setupParams();
     this.onhashchange();
     this.setupTouchEvents();
@@ -198,6 +242,9 @@
       var keyVal = e.split('=');
       Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
     });
+  // Specific params handling
+    if (!+this.params.autoplay)
+      $$.forEach($$("video"), function(v){ v.controls = true });
   }
 
   Dz.onkeydown = function(aEvent) {
@@ -234,6 +281,10 @@
       aEvent.preventDefault();
       this.toggleContent();
     }
+    if (aEvent.keyCode == 70) { // f
+      aEvent.preventDefault();
+      this.goFullscreen();
+    }
   }
 
   /* Touch Events */
@@ -352,6 +403,7 @@
         newidx++;
       }
     }
+    this.setProgress(newidx, newstep);
     if (newidx != this.idx) {
       this.setSlide(newidx);
     }
@@ -427,9 +479,9 @@
     if (old) {
       old.removeAttribute('aria-selected');
     }
-    var incrementals = this.slides[this.idx - 1].$$('.incremental');
+    var incrementals = $$('.incremental');
     if (this.step <= 0) {
-      incrementals.forEach(function(aNode) {
+      $$.forEach(incrementals, function(aNode) {
         aNode.removeAttribute('active');
       });
       return;
@@ -439,7 +491,7 @@
       next.setAttribute('aria-selected', true);
       next.parentNode.setAttribute('active', true);
       var found = false;
-      incrementals.forEach(function(aNode) {
+      $$.forEach(incrementals, function(aNode) {
         if (aNode != next.parentNode)
           if (found)
             aNode.removeAttribute('active');
@@ -453,6 +505,24 @@
     }
     return next;
   }
+
+  Dz.goFullscreen = function() {
+    var html = $('html'),
+        requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
+    if (requestFullscreen) {
+      requestFullscreen.apply(html);
+    }
+  }
+  
+  Dz.setProgress = function(aIdx, aStep) {
+    var slide = $("section:nth-of-type("+ aIdx +")");
+    if (!slide)
+      return;
+    var steps = slide.$$('.incremental > *').length + 1,
+        slideSize = 100 / (this.slides.length - 1),
+        stepSize = slideSize / steps;
+    this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';
+  }
   
   Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
     aMsg = [aMsg];
@@ -460,12 +530,16 @@
       aMsg.push(encodeURIComponent(arguments[i]));
     aWin.postMessage(aMsg.join(" "), "*");
   }
+  
+  function init() {
+    Dz.init();
+    window.onkeydown = Dz.onkeydown.bind(Dz);
+    window.onresize = Dz.onresize.bind(Dz);
+    window.onhashchange = Dz.onhashchange.bind(Dz);
+    window.onmessage = Dz.onmessage.bind(Dz);
+  }
 
-  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);
+  window.onload = init;
 </script>
 
 
@@ -503,11 +577,8 @@
     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]);
-    }
+  $$.forEach = function(nodeList, fun) {
+    Array.prototype.forEach.call(nodeList, fun);
   }
 
 </script>