@@ -13,7 +13,8 @@
1313</section>
1414
1515<section>
16− <h2>Part one</h2>
16+ <p>Some random text: But I've never been to the moon! You can see how I lived before I met you. Also Zoidberg.
17+ I could if you hadn't turned on the light and shut off my stereo.</p>
1718</section>
1819
1920<section>
@@ -23,12 +24,12 @@
2324 <li>Item 2
2425 <li>Item 3
2526 </ul>
27+ <details>Some notes. They are only visible using onstage shell.</details>
2628</section>
2729
2830<section>
2931 <q>
30− Soothe us with sweet lies. Is that a cooking show? No! I want to
31− live! There are still too many things I don't own!
32+ Who's brave enough to fly into something we all keep calling a death sphere?
3233 </q>
3334</section>
3435
@@ -37,13 +38,18 @@
3738</section>
3839
3940<section>
40− <h3>An image</h3>
41− <img src="http://placekitten.com/g/800/600">
41+ <figure> <!-- Figures are used to display images and videos fullpage -->
42+ <img src="http://placekitten.com/g/800/600">
43+ <figcaption>An image</figcaption>
44+ </figure>
45+ <details>Kittens are so cute!</details>
4246</section>
4347
4448<section>
45− <h3>A video</h3>
46− <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>
49+ <figure> <!-- Videos are automatically played -->
50+ <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>
51+ <figcaption>A video</figcaption>
52+ </figure>
4753</section>
4854
4955<section>
@@ -58,12 +64,12 @@
5864
5965<style>
6066 html { background-color: black; }
61− body { background-color: white; }
67+ body { background-color: white; border-radius: 12px}
6268 /* A section is a slide. It's size is 800x600, and this will never change */
6369 section {
6470 /* The font from Google */
6571 font-family: 'Oswald', arial, serif;
66− font-size: 40px;
72+ font-size: 30px;
6773 }
6874 h1, h2 {
6975 margin-top: 200px;
@@ -78,29 +84,39 @@
7884 margin: 50px 200px;
7985 }
8086
87+ p {
88+ margin: 75px;
89+ font-size: 50px;
90+ }
91+
8192 q {
82− display: inline-block;
83− width: 700px;
84− height: 600px;
93+ display: block;
94+ width: 100%;
95+ height: 100%;
8596 background-color: black;
8697 color: white;
8798 font-size: 60px;
8899 padding: 50px;
89100 }
90101
91− img, video {
92− width: 800px;
93− height: 600px;
94− position: absolute;
95− top: 0;
102+ /* Figures are displayed full-page, with the caption
103+ on top of the image/video */
104+ figure {
96105 background-color: black;
97− z-index: -1;
106+ }
107+ figcaption {
108+ margin: 70px;
109+ font-size: 50px;
98110 }
99111
100112 footer {
101113 position: absolute;
102− bottom: 10px;
103− right: 20px;
114+ bottom: 0;
115+ width: 100%;
116+ padding: 40px;
117+ text-align: right;
118+ background-color: #F3F4F8;
119+ border-top: 1px solid #CCC;
104120 }
105121
106122 /* Transition effect */
@@ -128,11 +144,17 @@
128144 .incremental > * { opacity: 1; }
129145
130146 /* The current item */
131− .incremental > *[aria-selected] { color: red; opacity: 1; }
147+ .incremental > *[aria-selected] { opacity: 1; }
132148
133149 /* The items to-be-selected */
134− .incremental > *[aria-selected] ~ * { opacity: 0.2; }
150+ .incremental > *[aria-selected] ~ * { opacity: 0; }
135151
152+ /* The progressbar, at the bottom of the slides, show the global
153+ progress of the presentation. */
154+ #progress-bar {
155+ height: 2px;
156+ background: #AAA;
157+ }
136158</style>
137159
138160<!-- {{{{ dzslides core
@@ -149,9 +171,11 @@
149171#
150172-->
151173
174+<div id="progress-bar"></div>
175+
152176<!-- Default Style -->
153177<style>
154− * { margin: 0; padding: 0; }
178+ * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
155179 details { display: none; }
156180 body {
157181 width: 800px; height: 600px;
@@ -170,6 +194,24 @@
170194 body.loaded { display: block; }
171195 .incremental {visibility: hidden; }
172196 .incremental[active] {visibility: visible; }
197+ #progress-bar{
198+ bottom: 0;
199+ position: absolute;
200+ -moz-transition: width 400ms linear 0s;
201+ -webkit-transition: width 400ms linear 0s;
202+ -ms-transition: width 400ms linear 0s;
203+ transition: width 400ms linear 0s;
204+ }
205+ figure {
206+ width: 100%;
207+ height: 100%;
208+ }
209+ figure > * {
210+ position: absolute;
211+ }
212+ figure > img, figure > video {
213+ width: 100%; height: 100%;
214+ }
173215</style>
174216
175217<script>
@@ -178,6 +220,7 @@
178220 idx: -1,
179221 step: 0,
180222 slides: null,
223+ progressBar : null,
181224 params: {
182225 autoplay: "1"
183226 }
@@ -186,6 +229,7 @@
186229 Dz.init = function() {
187230 document.body.className = "loaded";
188231 this.slides = $$("body > section");
232+ this.progressBar = $("#progress-bar");
189233 this.setupParams();
190234 this.onhashchange();
191235 this.setupTouchEvents();
@@ -198,6 +242,9 @@
198242 var keyVal = e.split('=');
199243 Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
200244 });
245+ // Specific params handling
246+ if (!+this.params.autoplay)
247+ $$.forEach($$("video"), function(v){ v.controls = true });
201248 }
202249
203250 Dz.onkeydown = function(aEvent) {
@@ -234,6 +281,10 @@
234281 aEvent.preventDefault();
235282 this.toggleContent();
236283 }
284+ if (aEvent.keyCode == 70) { // f
285+ aEvent.preventDefault();
286+ this.goFullscreen();
287+ }
237288 }
238289
239290 /* Touch Events */
@@ -352,6 +403,7 @@
352403 newidx++;
353404 }
354405 }
406+ this.setProgress(newidx, newstep);
355407 if (newidx != this.idx) {
356408 this.setSlide(newidx);
357409 }
@@ -427,9 +479,9 @@
427479 if (old) {
428480 old.removeAttribute('aria-selected');
429481 }
430− var incrementals = this.slides[this.idx - 1].$$('.incremental');
482+ var incrementals = $$('.incremental');
431483 if (this.step <= 0) {
432− incrementals.forEach(function(aNode) {
484+ $$.forEach(incrementals, function(aNode) {
433485 aNode.removeAttribute('active');
434486 });
435487 return;
@@ -439,7 +491,7 @@
439491 next.setAttribute('aria-selected', true);
440492 next.parentNode.setAttribute('active', true);
441493 var found = false;
442− incrementals.forEach(function(aNode) {
494+ $$.forEach(incrementals, function(aNode) {
443495 if (aNode != next.parentNode)
444496 if (found)
445497 aNode.removeAttribute('active');
@@ -453,6 +505,24 @@
453505 }
454506 return next;
455507 }
508+
509+ Dz.goFullscreen = function() {
510+ var html = $('html'),
511+ requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
512+ if (requestFullscreen) {
513+ requestFullscreen.apply(html);
514+ }
515+ }
516+
517+ Dz.setProgress = function(aIdx, aStep) {
518+ var slide = $("section:nth-of-type("+ aIdx +")");
519+ if (!slide)
520+ return;
521+ var steps = slide.$$('.incremental > *').length + 1,
522+ slideSize = 100 / (this.slides.length - 1),
523+ stepSize = slideSize / steps;
524+ this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';
525+ }
456526
457527 Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
458528 aMsg = [aMsg];
@@ -460,12 +530,16 @@
460530 aMsg.push(encodeURIComponent(arguments[i]));
461531 aWin.postMessage(aMsg.join(" "), "*");
462532 }
533+
534+ function init() {
535+ Dz.init();
536+ window.onkeydown = Dz.onkeydown.bind(Dz);
537+ window.onresize = Dz.onresize.bind(Dz);
538+ window.onhashchange = Dz.onhashchange.bind(Dz);
539+ window.onmessage = Dz.onmessage.bind(Dz);
540+ }
463541
464− window.onload = Dz.init.bind(Dz);
465− window.onkeydown = Dz.onkeydown.bind(Dz);
466− window.onresize = Dz.onresize.bind(Dz);
467− window.onhashchange = Dz.onhashchange.bind(Dz);
468− window.onmessage = Dz.onmessage.bind(Dz);
542+ window.onload = init;
469543</script>
470544
471545
@@ -503,11 +577,8 @@
503577 return this.querySelectorAll(aQuery);
504578 }).bind(document);
505579
506− NodeList.prototype.forEach = function(fun) {
507− if (typeof fun !== "function") throw new TypeError();
508− for (var i = 0; i < this.length; i++) {
509− fun.call(this, this[i]);
510− }
580+ $$.forEach = function(nodeList, fun) {
581+ Array.prototype.forEach.call(nodeList, fun);
511582 }
512583
513584</script>