@@ -23,36 +23,48 @@ $else$
2323<style>
2424 html { background-color: black; }
2525 body { background-color: white; }
26− /* A section is a slide. Its size is 800x600, and this will never change */
26+ /* A section is a slide. It's size is 800x600, and this will never change */
2727 section {
2828 font-family: Arial, serif;
2929 font-size: 20pt;
3030 line-height: 24pt;
3131 padding: 16pt;
3232 }
33− section > * { margin-bottom: 1em; }
34− section.titleslide h1 { margin-top: 200px; }
3533 h1, h2, h3 {
36− margin-top: 50px;
37− text-align: center;
38− }
39− h1 { font-size: 180%: }
40− h2 { font-size: 120%; }
41− h3 { font-size: 100%; }
34+ text-align: center;
35+ margin: 10pt 10pt 20pt 10pt;
36+ }
4237 ul, ol {
43− margin-left: 40px;
38+ margin: 10px 10px 10px 50px;
4439 }
45− a { color: #FF0066; } a:hover { text-decoration: underline; }
46− footer { position: absolute; bottom: 50px; right: 50px; }
40+ section.titleslide h1 { margin-top: 200px; }
41+ h1 { font-size: 180%; }
42+ h2 { font-size: 120%; }
43+ h3 { font-size: 100%; }
4744 blockquote { font-style: italic }
48− pre {
49− font-size: 80%;
50− font-weight: bold;
51− padding: 0.2em 1em 0.2em 1em;
45+ q {
46+ display: inline-block;
47+ width: 700px;
48+ height: 600px;
49+ background-color: black;
50+ color: white;
51+ font-size: 60px;
52+ padding: 50px;
5253 }
53− .images {
54− margin: 20px;
55− text-align: center;
54+
55+ img, video {
56+ width: 800px;
57+ height: 600px;
58+ position: absolute;
59+ top: 0;
60+ background-color: black;
61+ z-index: -1;
62+ }
63+
64+ footer {
65+ position: absolute;
66+ bottom: 10px;
67+ right: 20px;
5668 }
5769
5870 /* Transition effect */
@@ -74,13 +86,16 @@ $else$
7486 /* After */
7587 section[aria-selected] ~ section { left: +150%; }
7688
77− /* Increment with lists */
89+ /* Incremental elements */
90+
91+ /* By default, visible */
7892 .incremental > * { opacity: 1; }
79− .incremental > *[aria-selected] { opacity: 1; }
80− .incremental > *[aria-selected] ~ * { opacity: 0.2; }
81− /* Increment with images */
82− .incremental > img[aria-selected] { box-shadow: 0 0 10px #000 }
8393
94+ /* The current item */
95+ .incremental > *[aria-selected] { color: red; opacity: 1; }
96+
97+ /* The items to-be-selected */
98+ .incremental > *[aria-selected] ~ * { opacity: 0.2; }
8499</style>
85100$endif$
86101$if(math)$
@@ -107,13 +122,19 @@ $body$
107122$for(include-after)$
108123$include-after$
109124$endfor$
110−<!-- {{{{ ***************** DZSlides CORE 2.0b1 *************************** -->
111−<!-- *********************************************************************** -->
112−<!-- *********************************************************************** -->
113−<!-- *********************************************************************** -->
114−<!-- *********************************************************************** -->
115−
116−<!-- This block of code is not supposed to be edited, but if you want to change the behavior of the slides, feel free to hack it ;) -->
125+<!-- {{{{ dzslides core
126+#
127+#
128+# __ __ __ . __ ___ __
129+# | \ / /__` | | | \ |__ /__`
130+# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
131+#
132+#
133+# The following block of code is not supposed to be edited.
134+# But if you want to change the behavior of these slides,
135+# feel free to hack it!
136+#
137+-->
117138
118139<!-- Default Style -->
119140<style>
@@ -125,98 +146,109 @@ $endfor$
125146 position: absolute; top: 50%; left: 50%;
126147 overflow: hidden;
127148 }
128− html {
129− overflow: hidden;
130− }
131149 section {
132150 position: absolute;
133151 pointer-events: none;
134− width: 95%; height: 100%;
152+ width: 100%; height: 100%;
135153 }
136154 section[aria-selected] { pointer-events: auto; }
155+ html { overflow: hidden; }
137156 body { display: none; }
138157 body.loaded { display: block; }
139− .incremental {visibility: hidden}
140− .incremental[active] {visibility: visible}
158+ .incremental {visibility: hidden; }
159+ .incremental[active] {visibility: visible; }
141160</style>
142161
143162<script>
144− var friendWindows = [];
145− var idx, step;
146− var slides;
147−
148− /* main() */
163+ var Dz = {
164+ remoteWindows: [],
165+ idx: -1,
166+ step: 0,
167+ slides: null,
168+ params: {
169+ autoplay: "1"
170+ }
171+ };
149172
150− window.onload = function() {
151− slides = document.querySelectorAll("body > section");
152− onhashchange();
173+ Dz.init = function() {
153174 document.body.className = "loaded";
154− setupTouchEvents();
155− onresize();
175+ this.slides = $$$$("body > section");
176+ this.setupParams();
177+ this.onhashchange();
178+ this.setupTouchEvents();
179+ this.onresize();
180+ }
181+
182+ Dz.setupParams = function() {
183+ var p = window.location.search.substr(1).split('&');
184+ p.forEach(function(e, i, a) {
185+ var keyVal = e.split('=');
186+ Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
187+ });
156188 }
157189
158− /* Handle keys */
159−
160− window.onkeydown = function(e) {
190+ Dz.onkeydown = function(aEvent) {
161191 // Don't intercept keyboard shortcuts
162− if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
192+ if (aEvent.altKey
193+ || aEvent.ctrlKey
194+ || aEvent.metaKey
195+ || aEvent.shiftKey) {
163196 return;
164197 }
165− if ( e.keyCode == 37 // left arrow
166− || e.keyCode == 38 // up arrow
167− || e.keyCode == 33 // page up
198+ if ( aEvent.keyCode == 37 // left arrow
199+ || aEvent.keyCode == 38 // up arrow
200+ || aEvent.keyCode == 33 // page up
168201 ) {
169− e.preventDefault();
170− back();
202+ aEvent.preventDefault();
203+ this.back();
171204 }
172− if ( e.keyCode == 39 // right arrow
173− || e.keyCode == 40 // down arrow
174− || e.keyCode == 34 // page down
205+ if ( aEvent.keyCode == 39 // right arrow
206+ || aEvent.keyCode == 40 // down arrow
207+ || aEvent.keyCode == 34 // page down
175208 ) {
176− e.preventDefault();
177− forward();
209+ aEvent.preventDefault();
210+ this.forward();
178211 }
179− if (e.keyCode == 35) { // end
180− e.preventDefault();
181− end();
212+ if (aEvent.keyCode == 35) { // end
213+ aEvent.preventDefault();
214+ this.goEnd();
182215 }
183− if (e.keyCode == 36) { // home
184− e.preventDefault();
185− start();
216+ if (aEvent.keyCode == 36) { // home
217+ aEvent.preventDefault();
218+ this.goStart();
186219 }
187−
188− if ( e.keyCode == 32) { // space
189− e.preventDefault();
190− toggleContent();
220+ if (aEvent.keyCode == 32) { // space
221+ aEvent.preventDefault();
222+ this.toggleContent();
191223 }
192224 }
193225
194226 /* Touch Events */
195227
196− function setupTouchEvents() {
228+ Dz.setupTouchEvents = function() {
197229 var orgX, newX;
198230 var tracking = false;
199231
200232 var db = document.body;
201− db.addEventListener("touchstart", start, false);
202− db.addEventListener("touchmove", move, false);
233+ db.addEventListener("touchstart", start.bind(this), false);
234+ db.addEventListener("touchmove", move.bind(this), false);
203235
204− function start(e) {
205− e.preventDefault();
236+ function start(aEvent) {
237+ aEvent.preventDefault();
206238 tracking = true;
207− orgX = e.changedTouches[0].pageX;
239+ orgX = aEvent.changedTouches[0].pageX;
208240 }
209241
210− function move(e) {
242+ function move(aEvent) {
211243 if (!tracking) return;
212− newX = e.changedTouches[0].pageX;
244+ newX = aEvent.changedTouches[0].pageX;
213245 if (orgX - newX > 100) {
214246 tracking = false;
215− forward();
247+ this.forward();
216248 } else {
217249 if (orgX - newX < -100) {
218250 tracking = false;
219− back();
251+ this.back();
220252 }
221253 }
222254 }
@@ -224,157 +256,248 @@ $endfor$
224256
225257 /* Adapt the size of the slides to the window */
226258
227− window.onresize = function() {
259+ Dz.onresize = function() {
228260 var db = document.body;
229261 var sx = db.clientWidth / window.innerWidth;
230262 var sy = db.clientHeight / window.innerHeight;
231263 var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
264+
232265 db.style.MozTransform = transform;
233266 db.style.WebkitTransform = transform;
234267 db.style.OTransform = transform;
235268 db.style.msTransform = transform;
236269 db.style.transform = transform;
237270 }
238− function getDetails(idx) {
239− var s = document.querySelector("section:nth-of-type("+ idx +")");
240− var d = s.querySelector("details");
241− return d?d.innerHTML:"";
271+
272+
273+ Dz.getDetails = function(aIdx) {
274+ var s = $$("section:nth-of-type(" + aIdx + ")");
275+ var d = s.$$("details");
276+ return d ? d.innerHTML : "";
242277 }
243− window.onmessage = function(e) {
244− var msg = e.data;
245− var win = e.source;
246− if (msg === "register") {
247− friendWindows.push(win);
248− win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*");
249− win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
278+
279+ Dz.onmessage = function(aEvent) {
280+ var argv = aEvent.data.split(" "), argc = argv.length;
281+ argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
282+ var win = aEvent.source;
283+ if (argv[0] === "REGISTER" && argc === 1) {
284+ this.remoteWindows.push(win);
285+ this.postMsg(win, "REGISTERED", document.title, this.slides.length);
286+ this.postMsg(win, "CURSOR", this.idx + "." + this.step);
250287 return;
251288 }
252− if (msg === "back") back();
253− if (msg === "forward") forward();
254− if (msg === "toggleContent") toggleContent();
255− // setSlide(42)
256− var r = /setSlide\((\d+)\)/.exec(msg);
257− if (r) {
258− setSlide(r[1]);
259− }
289+ if (argv[0] === "BACK" && argc === 1)
290+ this.back();
291+ if (argv[0] === "FORWARD" && argc === 1)
292+ this.forward();
293+ if (argv[0] === "START" && argc === 1)
294+ this.goStart();
295+ if (argv[0] === "END" && argc === 1)
296+ this.goEnd();
297+ if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
298+ this.toggleContent();
299+ if (argv[0] === "SET_CURSOR" && argc === 2)
300+ window.location.hash = "#" + argv[1];
301+ if (argv[0] === "GET_CURSOR" && argc === 1)
302+ this.postMsg(win, "CURSOR", this.idx + "." + this.step);
303+ if (argv[0] === "GET_NOTES" && argc === 1)
304+ this.postMsg(win, "NOTES", this.getDetails(this.idx));
260305 }
261306
262− /* If a Video is present in this new slide, play it.
263− If a Video is present in the previous slide, stop it. */
264−
265− function toggleContent() {
266− var s = document.querySelector("section[aria-selected]");
307+ Dz.toggleContent = function() {
308+ // If a Video is present in this new slide, play it.
309+ // If a Video is present in the previous slide, stop it.
310+ var s = $$("section[aria-selected]");
267311 if (s) {
268− var video = s.querySelector("video");
269− if (video) {
270− if (video.ended || video.paused) {
271− video.play();
272− } else {
273− video.pause();
274− }
312+ var video = s.$$("video");
313+ if (video) {
314+ if (video.ended || video.paused) {
315+ video.play();
316+ } else {
317+ video.pause();
275318 }
319+ }
276320 }
277321 }
278322
279− /* If the user change the slide number in the URL bar, jump
280− to this slide. */
281−
282− function setCursor(aIdx, aStep) {
283− aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : "";
323+ Dz.setCursor = function(aIdx, aStep) {
324+ // If the user change the slide number in the URL bar, jump
325+ // to this slide.
326+ aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
284327 window.location.hash = "#" + aIdx + aStep;
285328 }
286− window.onhashchange = function(e) {
287− var cursor = window.location.hash.split("#"), newidx = 1, newstep = 0;
329+
330+ Dz.onhashchange = function() {
331+ var cursor = window.location.hash.split("#"),
332+ newidx = 1,
333+ newstep = 0;
288334 if (cursor.length == 2) {
289335 newidx = ~~cursor[1].split(".")[0];
290336 newstep = ~~cursor[1].split(".")[1];
337+ if (newstep > Dz.slides[newidx - 1].$$$$('.incremental > *').length) {
338+ newstep = 0;
339+ newidx++;
340+ }
341+ }
342+ if (newidx != this.idx) {
343+ this.setSlide(newidx);
344+ }
345+ if (newstep != this.step) {
346+ this.setIncremental(newstep);
347+ }
348+ for (var i = 0; i < this.remoteWindows.length; i++) {
349+ this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
291350 }
292− if (newidx != idx) setSlide(newidx);
293− setIncremental(newstep);
294351 }
295352
296− /* Slide controls */
297−
298− function back() {
299− if (idx == 1 && step == 0) return;
300− if (step == 0)
301− setCursor(idx - 1, slides[idx - 2].querySelectorAll('.incremental > *').length);
302− else
303− setCursor(idx, step - 1);
353+ Dz.back = function() {
354+ if (this.idx == 1 && this.step == 0) {
355+ return;
356+ }
357+ if (this.step == 0) {
358+ this.setCursor(this.idx - 1,
359+ this.slides[this.idx - 2].$$$$('.incremental > *').length);
360+ } else {
361+ this.setCursor(this.idx, this.step - 1);
362+ }
304363 }
305− function forward() {
306− if (idx >= slides.length && step >= slides[idx - 1].querySelectorAll('.incremental > *').length) return;
307− if (step >= slides[idx - 1].querySelectorAll('.incremental > *').length)
308− setCursor(idx + 1, 0);
309− else
310− setCursor(idx, step + 1);
364+
365+ Dz.forward = function() {
366+ if (this.idx >= this.slides.length &&
367+ this.step >= this.slides[this.idx - 1].$$$$('.incremental > *').length) {
368+ return;
369+ }
370+ if (this.step >= this.slides[this.idx - 1].$$$$('.incremental > *').length) {
371+ this.setCursor(this.idx + 1, 0);
372+ } else {
373+ this.setCursor(this.idx, this.step + 1);
374+ }
311375 }
312− function start() {
313− setCursor(1, 0);
376+
377+ Dz.goStart = function() {
378+ this.setCursor(1, 0);
314379 }
315− function end() {
316− var lastIdx = slides.length;
317− var lastStep = slides[lastIdx - 1].querySelectorAll('.incremental > *').length;
318− setCursor(lastIdx, lastStep);
380+
381+ Dz.goEnd = function() {
382+ var lastIdx = this.slides.length;
383+ var lastStep = this.slides[lastIdx - 1].$$$$('.incremental > *').length;
384+ this.setCursor(lastIdx, lastStep);
319385 }
320386
321− function setSlide(aIdx) {
322− idx = aIdx;
323− var old = document.querySelector("section[aria-selected]");
324− var next = document.querySelector("section:nth-of-type("+ idx +")");
387+ Dz.setSlide = function(aIdx) {
388+ this.idx = aIdx;
389+ var old = $$("section[aria-selected]");
390+ var next = $$("section:nth-of-type("+ this.idx +")");
325391 if (old) {
326392 old.removeAttribute("aria-selected");
327− var video = old.querySelector("video");
328− if (video) { video.pause(); }
393+ var video = old.$$("video");
394+ if (video) {
395+ video.pause();
396+ }
329397 }
330398 if (next) {
331399 next.setAttribute("aria-selected", "true");
332− var video = next.querySelector("video");
333− if (video) { video.play(); }
334− } else {
335− idx = 0;
336− for (var i = 0, l = slides.length; i < l; i++) {
337− if (slides[i].hasAttribute("aria-selected")) {
338− idx = i + 1;
339− }
400+ var video = next.$$("video");
401+ if (video && !!+this.params.autoplay) {
402+ video.play();
340403 }
341− }
342− for (var i = 0, l = friendWindows.length; i < l; i++) {
343− friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
404+ } else {
405+ // That should not happen
406+ this.idx = -1;
407+ // console.warn("Slide doesn't exist.");
344408 }
345409 }
346− function setIncremental(aStep) {
347− step = aStep;
348− var old = slides[idx-1].querySelector('.incremental > *[aria-selected]');
349− if (old)
410+
411+ Dz.setIncremental = function(aStep) {
412+ this.step = aStep;
413+ var old = this.slides[this.idx - 1].$$('.incremental > *[aria-selected]');
414+ if (old) {
350415 old.removeAttribute('aria-selected');
351− var incrementals = slides[idx-1].querySelectorAll('.incremental');
352− if (step == 0) {
353− for (var i = 0; i < incrementals.length; i++) {
354− incrementals[i].removeAttribute('active');
355− }
416+ }
417+ var incrementals = this.slides[this.idx - 1].$$$$('.incremental');
418+ if (this.step <= 0) {
419+ incrementals.forEach(function(aNode) {
420+ aNode.removeAttribute('active');
421+ });
356422 return;
357423 }
358− var next = slides[idx-1].querySelectorAll('.incremental > *')[step-1];
424+ var next = this.slides[this.idx - 1].$$$$('.incremental > *')[this.step - 1];
359425 if (next) {
360426 next.setAttribute('aria-selected', true);
361427 next.parentNode.setAttribute('active', true);
362428 var found = false;
363− for (var i = 0; i < incrementals.length; i++) {
364− if (incrementals[i] != next.parentNode)
429+ incrementals.forEach(function(aNode) {
430+ if (aNode != next.parentNode)
365431 if (found)
366− incrementals[i].removeAttribute('active');
432+ aNode.removeAttribute('active');
367433 else
368− incrementals[i].setAttribute('active', true);
434+ aNode.setAttribute('active', true);
369435 else
370436 found = true;
371− }
437+ });
372438 } else {
373− setCursor(idx, 0);
439+ setCursor(this.idx, 0);
374440 }
375441 return next;
376442 }
443+
444+ Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
445+ aMsg = [aMsg];
446+ for (var i = 2; i < arguments.length; i++)
447+ aMsg.push(encodeURIComponent(arguments[i]));
448+ aWin.postMessage(aMsg.join(" "), "*");
449+ }
450+
451+ window.onload = Dz.init.bind(Dz);
452+ window.onkeydown = Dz.onkeydown.bind(Dz);
453+ window.onresize = Dz.onresize.bind(Dz);
454+ window.onhashchange = Dz.onhashchange.bind(Dz);
455+ window.onmessage = Dz.onmessage.bind(Dz);
377456</script>
378−<!-- vim: set fdm=marker: }}} -->
457+
458+
459+<script> // Helpers
460+ if (!Function.prototype.bind) {
461+ Function.prototype.bind = function (oThis) {
462+
463+ // closest thing possible to the ECMAScript 5 internal IsCallable
464+ // function
465+ if (typeof this !== "function")
466+ throw new TypeError(
467+ "Function.prototype.bind - what is trying to be fBound is not callable"
468+ );
469+
470+ var aArgs = Array.prototype.slice.call(arguments, 1),
471+ fToBind = this,
472+ fNOP = function () {},
473+ fBound = function () {
474+ return fToBind.apply( this instanceof fNOP ? this : oThis || window,
475+ aArgs.concat(Array.prototype.slice.call(arguments)));
476+ };
477+
478+ fNOP.prototype = this.prototype;
479+ fBound.prototype = new fNOP();
480+
481+ return fBound;
482+ };
483+ }
484+
485+ var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
486+ return this.querySelector(aQuery);
487+ }).bind(document);
488+
489+ var $$$$ = (HTMLElement.prototype.$$$$ = function(aQuery) {
490+ return this.querySelectorAll(aQuery);
491+ }).bind(document);
492+
493+ NodeList.prototype.forEach = function(fun) {
494+ if (typeof fun !== "function") throw new TypeError();
495+ for (var i = 0; i < this.length; i++) {
496+ fun.call(this, this[i]);
497+ }
498+ }
499+
500+</script>
501+
379502</body>
380503</html>