@@ -0,0 +1,514 @@
4+<title>The Title Of Your Presentation</title>
7+<!-- One section is one slide -->
10+ <!-- This is the first slide -->
11+ <h1>My Presentation</h1>
12+ <footer>by John Doe</footer>
20+ <h3>An incremental list</h3>
21+ <ul class="incremental">
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!
41+ <img src="http://placekitten.com/g/800/600">
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>
54+<!-- Define the style of your presentation -->
56+<!-- Maybe a font from http://www.google.com/webfonts ? -->
57+<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
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 */
64+ /* The font from Google */
65+ font-family: 'Oswald', arial, serif;
74+ margin: 100px 0 50px 100px;
82+ display: inline-block;
85+ background-color: black;
96+ background-color: black;
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: */
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;
119+ section { left: -150%; }
121+ section[aria-selected] { left: 0; }
123+ section[aria-selected] ~ section { left: +150%; }
125+ /* Incremental elements */
127+ /* By default, visible */
128+ .incremental > * { opacity: 1; }
130+ /* The current item */
131+ .incremental > *[aria-selected] { color: red; opacity: 1; }
133+ /* The items to-be-selected */
134+ .incremental > *[aria-selected] ~ * { opacity: 0.2; }
138+<!-- {{{{ dzslides core
141+# __ __ __ . __ ___ __
142+# | \ / /__` | | | \ |__ /__`
143+# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
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!
152+<!-- Default Style -->
154+ * { margin: 0; padding: 0; }
155+ details { display: none; }
157+ width: 800px; height: 600px;
158+ margin-left: -400px; margin-top: -300px;
159+ position: absolute; top: 50%; left: 50%;
164+ pointer-events: none;
165+ width: 100%; height: 100%;
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; }
186+ Dz.init = function() {
187+ document.body.className = "loaded";
188+ this.slides = $$("body > section");
190+ this.onhashchange();
191+ this.setupTouchEvents();
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]);
203+ Dz.onkeydown = function(aEvent) {
204+ // Don't intercept keyboard shortcuts
208+ || aEvent.shiftKey) {
211+ if ( aEvent.keyCode == 37 // left arrow
212+ || aEvent.keyCode == 38 // up arrow
213+ || aEvent.keyCode == 33 // page up
215+ aEvent.preventDefault();
218+ if ( aEvent.keyCode == 39 // right arrow
219+ || aEvent.keyCode == 40 // down arrow
220+ || aEvent.keyCode == 34 // page down
222+ aEvent.preventDefault();
225+ if (aEvent.keyCode == 35) { // end
226+ aEvent.preventDefault();
229+ if (aEvent.keyCode == 36) { // home
230+ aEvent.preventDefault();
233+ if (aEvent.keyCode == 32) { // space
234+ aEvent.preventDefault();
235+ this.toggleContent();
241+ Dz.setupTouchEvents = function() {
243+ var tracking = false;
245+ var db = document.body;
246+ db.addEventListener("touchstart", start.bind(this), false);
247+ db.addEventListener("touchmove", move.bind(this), false);
249+ function start(aEvent) {
250+ aEvent.preventDefault();
252+ orgX = aEvent.changedTouches[0].pageX;
255+ function move(aEvent) {
256+ if (!tracking) return;
257+ newX = aEvent.changedTouches[0].pageX;
258+ if (orgX - newX > 100) {
262+ if (orgX - newX < -100) {
270+ /* Adapt the size of the slides to the window */
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)) + ")";
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;
286+ Dz.getDetails = function(aIdx) {
287+ var s = $("section:nth-of-type(" + aIdx + ")");
288+ var d = s.$("details");
289+ return d ? d.innerHTML : "";
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);
302+ if (argv[0] === "BACK" && argc === 1)
304+ if (argv[0] === "FORWARD" && argc === 1)
306+ if (argv[0] === "START" && argc === 1)
308+ if (argv[0] === "END" && argc === 1)
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));
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]");
325+ var video = s.$("video");
327+ if (video.ended || video.paused) {
336+ Dz.setCursor = function(aIdx, aStep) {
337+ // If the user change the slide number in the URL bar, jump
339+ aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
340+ window.location.hash = "#" + aIdx + aStep;
343+ Dz.onhashchange = function() {
344+ var cursor = window.location.hash.split("#"),
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) {
355+ if (newidx != this.idx) {
356+ this.setSlide(newidx);
358+ if (newstep != this.step) {
359+ this.setIncremental(newstep);
361+ for (var i = 0; i < this.remoteWindows.length; i++) {
362+ this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
366+ Dz.back = function() {
367+ if (this.idx == 1 && this.step == 0) {
370+ if (this.step == 0) {
371+ this.setCursor(this.idx - 1,
372+ this.slides[this.idx - 2].$$('.incremental > *').length);
374+ this.setCursor(this.idx, this.step - 1);
378+ Dz.forward = function() {
379+ if (this.idx >= this.slides.length &&
380+ this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
383+ if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
384+ this.setCursor(this.idx + 1, 0);
386+ this.setCursor(this.idx, this.step + 1);
390+ Dz.goStart = function() {
391+ this.setCursor(1, 0);
394+ Dz.goEnd = function() {
395+ var lastIdx = this.slides.length;
396+ var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
397+ this.setCursor(lastIdx, lastStep);
400+ Dz.setSlide = function(aIdx) {
402+ var old = $("section[aria-selected]");
403+ var next = $("section:nth-of-type("+ this.idx +")");
405+ old.removeAttribute("aria-selected");
406+ var video = old.$("video");
412+ next.setAttribute("aria-selected", "true");
413+ var video = next.$("video");
414+ if (video && !!+this.params.autoplay) {
418+ // That should not happen
420+ // console.warn("Slide doesn't exist.");
424+ Dz.setIncremental = function(aStep) {
426+ var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
428+ old.removeAttribute('aria-selected');
430+ var incrementals = this.slides[this.idx - 1].$$('.incremental');
431+ if (this.step <= 0) {
432+ incrementals.forEach(function(aNode) {
433+ aNode.removeAttribute('active');
437+ var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
439+ next.setAttribute('aria-selected', true);
440+ next.parentNode.setAttribute('active', true);
442+ incrementals.forEach(function(aNode) {
443+ if (aNode != next.parentNode)
445+ aNode.removeAttribute('active');
447+ aNode.setAttribute('active', true);
452+ setCursor(this.idx, 0);
457+ Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
459+ for (var i = 2; i < arguments.length; i++)
460+ aMsg.push(encodeURIComponent(arguments[i]));
461+ aWin.postMessage(aMsg.join(" "), "*");
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);
473+ if (!Function.prototype.bind) {
474+ Function.prototype.bind = function (oThis) {
476+ // closest thing possible to the ECMAScript 5 internal IsCallable
478+ if (typeof this !== "function")
479+ throw new TypeError(
480+ "Function.prototype.bind - what is trying to be fBound is not callable"
483+ var aArgs = Array.prototype.slice.call(arguments, 1),
485+ fNOP = function () {},
486+ fBound = function () {
487+ return fToBind.apply( this instanceof fNOP ? this : oThis || window,
488+ aArgs.concat(Array.prototype.slice.call(arguments)));
491+ fNOP.prototype = this.prototype;
492+ fBound.prototype = new fNOP();
498+ var $ = (HTMLElement.prototype.$ = function(aQuery) {
499+ return this.querySelector(aQuery);
502+ var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
503+ return this.querySelectorAll(aQuery);
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]);
514+<!-- vim: set fdm=marker: }}} -->