git.iko.soy/typeable/pandoc
on 1.9.0.3 help sign in
typeable/pandoc/dzslides/template.html
514 lines 13 kB history raw
1<!DOCTYPE html>
3<meta charset="utf-8">
4<title>The Title Of Your Presentation</title>
6<!-- Your Slides -->
7<!-- One section is one slide -->
9<section>
10 <!-- This is the first slide -->
11 <h1>My Presentation</h1>
12 <footer>by John Doe</footer>
13</section>
15<section>
16 <h2>Part one</h2>
17</section>
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>
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>
35<section>
36 <h2>Part two</h2>
37</section>
39<section>
40 <h3>An image</h3>
41 <img src="http://placekitten.com/g/800/600">
42</section>
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>
49<section>
50 <h2>End!</h2>
51</section>
53<!-- Your Style -->
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'>
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 }
77 ul {
78 margin: 50px 200px;
79 }
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 }
91 img, video {
92 width: 800px;
93 height: 600px;
94 position: absolute;
95 top: 0;
96 background-color: black;
97 z-index: -1;
98 }
100 footer {
101 position: absolute;
102 bottom: 10px;
103 right: 20px;
104 }
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 }
118 /* Before */
119 section { left: -150%; }
120 /* Now */
121 section[aria-selected] { left: 0; }
122 /* After */
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; }
136</style>
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!
150-->
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>
175<script>
176 var Dz = {
177 remoteWindows: [],
178 idx: -1,
179 step: 0,
180 slides: null,
181 params: {
182 autoplay: "1"
183 }
184 };
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 }
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 }
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 }
239 /* Touch Events */
241 Dz.setupTouchEvents = function() {
242 var orgX, newX;
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();
251 tracking = true;
252 orgX = aEvent.changedTouches[0].pageX;
253 }
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 }
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;
283 }
286 Dz.getDetails = function(aIdx) {
287 var s = $("section:nth-of-type(" + aIdx + ")");
288 var d = s.$("details");
289 return d ? d.innerHTML : "";
290 }
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 }
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 }
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 }
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 }
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 }
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 }
390 Dz.goStart = function() {
391 this.setCursor(1, 0);
392 }
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 }
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 }
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 }
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 }
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>
472<script> // Helpers
473 if (!Function.prototype.bind) {
474 Function.prototype.bind = function (oThis) {
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 );
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 };
491 fNOP.prototype = this.prototype;
492 fBound.prototype = new fNOP();
494 return fBound;
495 };
496 }
498 var $ = (HTMLElement.prototype.$ = function(aQuery) {
499 return this.querySelector(aQuery);
500 }).bind(document);
502 var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
503 return this.querySelectorAll(aQuery);
504 }).bind(document);
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 }
513</script>
514<!-- vim: set fdm=marker: }}} -->