@@ -0,0 +1,514 @@
1+<!DOCTYPE html>
2+
3+<meta charset="utf-8">
4+<title>The Title Of Your Presentation</title>
5+
6+<!-- Your Slides -->
7+<!-- One section is one slide -->
8+
9+<section>
10+ <!-- This is the first slide -->
11+ <h1>My Presentation</h1>
12+ <footer>by John Doe</footer>
13+</section>
14+
15+<section>
16+ <h2>Part one</h2>
17+</section>
18+
19+<section>
20+ <h3>An incremental list</h3>
21+ <ul class="incremental">
22+ <li>Item 1
23+ <li>Item 2
24+ <li>Item 3
25+ </ul>
26+</section>
27+
28+<section>
29+ <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+ </q>
33+</section>
34+
35+<section>
36+ <h2>Part two</h2>
37+</section>
38+
39+<section>
40+ <h3>An image</h3>
41+ <img src="http://placekitten.com/g/800/600">
42+</section>
43+
44+<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>
47+</section>
48+
49+<section>
50+ <h2>End!</h2>
51+</section>
52+
53+<!-- Your Style -->
54+<!-- Define the style of your presentation -->
55+
56+<!-- Maybe a font from http://www.google.com/webfonts ? -->
57+<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
58+
59+<style>
60+ html { background-color: black; }
61+ body { background-color: white; }
62+ /* A section is a slide. It's size is 800x600, and this will never change */
63+ section {
64+ /* The font from Google */
65+ font-family: 'Oswald', arial, serif;
66+ font-size: 40px;
67+ }
68+ h1, h2 {
69+ margin-top: 200px;
70+ text-align: center;
71+ font-size: 80px;
72+ }
73+ h3 {
74+ margin: 100px 0 50px 100px;
75+ }
76+
77+ ul {
78+ margin: 50px 200px;
79+ }
80+
81+ q {
82+ display: inline-block;
83+ width: 700px;
84+ height: 600px;
85+ background-color: black;
86+ color: white;
87+ font-size: 60px;
88+ padding: 50px;
89+ }
90+
91+ img, video {
92+ width: 800px;
93+ height: 600px;
94+ position: absolute;
95+ top: 0;
96+ background-color: black;
97+ z-index: -1;
98+ }
99+
100+ footer {
101+ position: absolute;
102+ bottom: 10px;
103+ right: 20px;
104+ }
105+
106+ /* Transition effect */
107+ /* Feel free to change the transition effect for original
108+ animations. See here:
109+ https://developer.mozilla.org/en/CSS/CSS_transitions
110+ How to use CSS3 Transitions: */
111+ section {
112+ -moz-transition: left 400ms linear 0s;
113+ -webkit-transition: left 400ms linear 0s;
114+ -ms-transition: left 400ms linear 0s;
115+ transition: left 400ms linear 0s;
116+ }
117+
118+ /* Before */
119+ section { left: -150%; }
120+ /* Now */
121+ section[aria-selected] { left: 0; }
122+ /* After */
123+ section[aria-selected] ~ section { left: +150%; }
124+
125+ /* Incremental elements */
126+
127+ /* By default, visible */
128+ .incremental > * { opacity: 1; }
129+
130+ /* The current item */
131+ .incremental > *[aria-selected] { color: red; opacity: 1; }
132+
133+ /* The items to-be-selected */
134+ .incremental > *[aria-selected] ~ * { opacity: 0.2; }
135+
136+</style>
137+
138+<!-- {{{{ dzslides core
139+#
140+#
141+# __ __ __ . __ ___ __
142+# | \ / /__` | | | \ |__ /__`
143+# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
144+#
145+#
146+# The following block of code is not supposed to be edited.
147+# But if you want to change the behavior of these slides,
148+# feel free to hack it!
149+#
150+-->
151+
152+<!-- Default Style -->
153+<style>
154+ * { margin: 0; padding: 0; }
155+ details { display: none; }
156+ body {
157+ width: 800px; height: 600px;
158+ margin-left: -400px; margin-top: -300px;
159+ position: absolute; top: 50%; left: 50%;
160+ overflow: hidden;
161+ }
162+ section {
163+ position: absolute;
164+ pointer-events: none;
165+ width: 100%; height: 100%;
166+ }
167+ section[aria-selected] { pointer-events: auto; }
168+ html { overflow: hidden; }
169+ body { display: none; }
170+ body.loaded { display: block; }
171+ .incremental {visibility: hidden; }
172+ .incremental[active] {visibility: visible; }
173+</style>
174+
175+<script>
176+ var Dz = {
177+ remoteWindows: [],
178+ idx: -1,
179+ step: 0,
180+ slides: null,
181+ params: {
182+ autoplay: "1"
183+ }
184+ };
185+
186+ Dz.init = function() {
187+ document.body.className = "loaded";
188+ this.slides = $$("body > section");
189+ this.setupParams();
190+ this.onhashchange();
191+ this.setupTouchEvents();
192+ this.onresize();
193+ }
194+
195+ Dz.setupParams = function() {
196+ var p = window.location.search.substr(1).split('&');
197+ p.forEach(function(e, i, a) {
198+ var keyVal = e.split('=');
199+ Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
200+ });
201+ }
202+
203+ Dz.onkeydown = function(aEvent) {
204+ // Don't intercept keyboard shortcuts
205+ if (aEvent.altKey
206+ || aEvent.ctrlKey
207+ || aEvent.metaKey
208+ || aEvent.shiftKey) {
209+ return;
210+ }
211+ if ( aEvent.keyCode == 37 // left arrow
212+ || aEvent.keyCode == 38 // up arrow
213+ || aEvent.keyCode == 33 // page up
214+ ) {
215+ aEvent.preventDefault();
216+ this.back();
217+ }
218+ if ( aEvent.keyCode == 39 // right arrow
219+ || aEvent.keyCode == 40 // down arrow
220+ || aEvent.keyCode == 34 // page down
221+ ) {
222+ aEvent.preventDefault();
223+ this.forward();
224+ }
225+ if (aEvent.keyCode == 35) { // end
226+ aEvent.preventDefault();
227+ this.goEnd();
228+ }
229+ if (aEvent.keyCode == 36) { // home
230+ aEvent.preventDefault();
231+ this.goStart();
232+ }
233+ if (aEvent.keyCode == 32) { // space
234+ aEvent.preventDefault();
235+ this.toggleContent();
236+ }
237+ }
238+
239+ /* Touch Events */
240+
241+ Dz.setupTouchEvents = function() {
242+ var orgX, newX;
243+ var tracking = false;
244+
245+ var db = document.body;
246+ db.addEventListener("touchstart", start.bind(this), false);
247+ db.addEventListener("touchmove", move.bind(this), false);
248+
249+ function start(aEvent) {
250+ aEvent.preventDefault();
251+ tracking = true;
252+ orgX = aEvent.changedTouches[0].pageX;
253+ }
254+
255+ function move(aEvent) {
256+ if (!tracking) return;
257+ newX = aEvent.changedTouches[0].pageX;
258+ if (orgX - newX > 100) {
259+ tracking = false;
260+ this.forward();
261+ } else {
262+ if (orgX - newX < -100) {
263+ tracking = false;
264+ this.back();
265+ }
266+ }
267+ }
268+ }
269+
270+ /* Adapt the size of the slides to the window */
271+
272+ Dz.onresize = function() {
273+ var db = document.body;
274+ var sx = db.clientWidth / window.innerWidth;
275+ var sy = db.clientHeight / window.innerHeight;
276+ var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
277+
278+ db.style.MozTransform = transform;
279+ db.style.WebkitTransform = transform;
280+ db.style.OTransform = transform;
281+ db.style.msTransform = transform;
282+ db.style.transform = transform;
283+ }
284+
285+
286+ Dz.getDetails = function(aIdx) {
287+ var s = $("section:nth-of-type(" + aIdx + ")");
288+ var d = s.$("details");
289+ return d ? d.innerHTML : "";
290+ }
291+
292+ Dz.onmessage = function(aEvent) {
293+ var argv = aEvent.data.split(" "), argc = argv.length;
294+ argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
295+ var win = aEvent.source;
296+ if (argv[0] === "REGISTER" && argc === 1) {
297+ this.remoteWindows.push(win);
298+ this.postMsg(win, "REGISTERED", document.title, this.slides.length);
299+ this.postMsg(win, "CURSOR", this.idx + "." + this.step);
300+ return;
301+ }
302+ if (argv[0] === "BACK" && argc === 1)
303+ this.back();
304+ if (argv[0] === "FORWARD" && argc === 1)
305+ this.forward();
306+ if (argv[0] === "START" && argc === 1)
307+ this.goStart();
308+ if (argv[0] === "END" && argc === 1)
309+ this.goEnd();
310+ if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
311+ this.toggleContent();
312+ if (argv[0] === "SET_CURSOR" && argc === 2)
313+ window.location.hash = "#" + argv[1];
314+ if (argv[0] === "GET_CURSOR" && argc === 1)
315+ this.postMsg(win, "CURSOR", this.idx + "." + this.step);
316+ if (argv[0] === "GET_NOTES" && argc === 1)
317+ this.postMsg(win, "NOTES", this.getDetails(this.idx));
318+ }
319+
320+ Dz.toggleContent = function() {
321+ // If a Video is present in this new slide, play it.
322+ // If a Video is present in the previous slide, stop it.
323+ var s = $("section[aria-selected]");
324+ if (s) {
325+ var video = s.$("video");
326+ if (video) {
327+ if (video.ended || video.paused) {
328+ video.play();
329+ } else {
330+ video.pause();
331+ }
332+ }
333+ }
334+ }
335+
336+ Dz.setCursor = function(aIdx, aStep) {
337+ // If the user change the slide number in the URL bar, jump
338+ // to this slide.
339+ aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
340+ window.location.hash = "#" + aIdx + aStep;
341+ }
342+
343+ Dz.onhashchange = function() {
344+ var cursor = window.location.hash.split("#"),
345+ newidx = 1,
346+ newstep = 0;
347+ if (cursor.length == 2) {
348+ newidx = ~~cursor[1].split(".")[0];
349+ newstep = ~~cursor[1].split(".")[1];
350+ if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {
351+ newstep = 0;
352+ newidx++;
353+ }
354+ }
355+ if (newidx != this.idx) {
356+ this.setSlide(newidx);
357+ }
358+ if (newstep != this.step) {
359+ this.setIncremental(newstep);
360+ }
361+ for (var i = 0; i < this.remoteWindows.length; i++) {
362+ this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
363+ }
364+ }
365+
366+ Dz.back = function() {
367+ if (this.idx == 1 && this.step == 0) {
368+ return;
369+ }
370+ if (this.step == 0) {
371+ this.setCursor(this.idx - 1,
372+ this.slides[this.idx - 2].$$('.incremental > *').length);
373+ } else {
374+ this.setCursor(this.idx, this.step - 1);
375+ }
376+ }
377+
378+ Dz.forward = function() {
379+ if (this.idx >= this.slides.length &&
380+ this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
381+ return;
382+ }
383+ if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
384+ this.setCursor(this.idx + 1, 0);
385+ } else {
386+ this.setCursor(this.idx, this.step + 1);
387+ }
388+ }
389+
390+ Dz.goStart = function() {
391+ this.setCursor(1, 0);
392+ }
393+
394+ Dz.goEnd = function() {
395+ var lastIdx = this.slides.length;
396+ var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
397+ this.setCursor(lastIdx, lastStep);
398+ }
399+
400+ Dz.setSlide = function(aIdx) {
401+ this.idx = aIdx;
402+ var old = $("section[aria-selected]");
403+ var next = $("section:nth-of-type("+ this.idx +")");
404+ if (old) {
405+ old.removeAttribute("aria-selected");
406+ var video = old.$("video");
407+ if (video) {
408+ video.pause();
409+ }
410+ }
411+ if (next) {
412+ next.setAttribute("aria-selected", "true");
413+ var video = next.$("video");
414+ if (video && !!+this.params.autoplay) {
415+ video.play();
416+ }
417+ } else {
418+ // That should not happen
419+ this.idx = -1;
420+ // console.warn("Slide doesn't exist.");
421+ }
422+ }
423+
424+ Dz.setIncremental = function(aStep) {
425+ this.step = aStep;
426+ var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
427+ if (old) {
428+ old.removeAttribute('aria-selected');
429+ }
430+ var incrementals = this.slides[this.idx - 1].$$('.incremental');
431+ if (this.step <= 0) {
432+ incrementals.forEach(function(aNode) {
433+ aNode.removeAttribute('active');
434+ });
435+ return;
436+ }
437+ var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
438+ if (next) {
439+ next.setAttribute('aria-selected', true);
440+ next.parentNode.setAttribute('active', true);
441+ var found = false;
442+ incrementals.forEach(function(aNode) {
443+ if (aNode != next.parentNode)
444+ if (found)
445+ aNode.removeAttribute('active');
446+ else
447+ aNode.setAttribute('active', true);
448+ else
449+ found = true;
450+ });
451+ } else {
452+ setCursor(this.idx, 0);
453+ }
454+ return next;
455+ }
456+
457+ Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
458+ aMsg = [aMsg];
459+ for (var i = 2; i < arguments.length; i++)
460+ aMsg.push(encodeURIComponent(arguments[i]));
461+ aWin.postMessage(aMsg.join(" "), "*");
462+ }
463+
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);
469+</script>
470+
471+
472+<script> // Helpers
473+ if (!Function.prototype.bind) {
474+ Function.prototype.bind = function (oThis) {
475+
476+ // closest thing possible to the ECMAScript 5 internal IsCallable
477+ // function
478+ if (typeof this !== "function")
479+ throw new TypeError(
480+ "Function.prototype.bind - what is trying to be fBound is not callable"
481+ );
482+
483+ var aArgs = Array.prototype.slice.call(arguments, 1),
484+ fToBind = this,
485+ fNOP = function () {},
486+ fBound = function () {
487+ return fToBind.apply( this instanceof fNOP ? this : oThis || window,
488+ aArgs.concat(Array.prototype.slice.call(arguments)));
489+ };
490+
491+ fNOP.prototype = this.prototype;
492+ fBound.prototype = new fNOP();
493+
494+ return fBound;
495+ };
496+ }
497+
498+ var $ = (HTMLElement.prototype.$ = function(aQuery) {
499+ return this.querySelector(aQuery);
500+ }).bind(document);
501+
502+ var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
503+ return this.querySelectorAll(aQuery);
504+ }).bind(document);
505+
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+ }
511+ }
512+
513+</script>
514+<!-- vim: set fdm=marker: }}} -->