diff options
Diffstat (limited to 'dzslides')
| -rw-r--r-- | dzslides/template.html | 514 |
1 files changed, 514 insertions, 0 deletions
diff --git a/dzslides/template.html b/dzslides/template.html new file mode 100644 index 000000000..591664f30 --- /dev/null +++ b/dzslides/template.html @@ -0,0 +1,514 @@ +<!DOCTYPE html> + +<meta charset="utf-8"> +<title>The Title Of Your Presentation</title> + +<!-- Your Slides --> +<!-- One section is one slide --> + +<section> + <!-- This is the first slide --> + <h1>My Presentation</h1> + <footer>by John Doe</footer> +</section> + +<section> + <h2>Part one</h2> +</section> + +<section> + <h3>An incremental list</h3> + <ul class="incremental"> + <li>Item 1 + <li>Item 2 + <li>Item 3 + </ul> +</section> + +<section> + <q> + Soothe us with sweet lies. Is that a cooking show? No! I want to + live! There are still too many things I don't own! + </q> +</section> + +<section> + <h2>Part two</h2> +</section> + +<section> + <h3>An image</h3> + <img src="http://placekitten.com/g/800/600"> +</section> + +<section> + <h3>A video</h3> + <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> +</section> + +<section> + <h2>End!</h2> +</section> + +<!-- Your Style --> +<!-- Define the style of your presentation --> + +<!-- Maybe a font from http://www.google.com/webfonts ? --> +<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'> + +<style> + html { background-color: black; } + body { background-color: white; } + /* A section is a slide. It's size is 800x600, and this will never change */ + section { + /* The font from Google */ + font-family: 'Oswald', arial, serif; + font-size: 40px; + } + h1, h2 { + margin-top: 200px; + text-align: center; + font-size: 80px; + } + h3 { + margin: 100px 0 50px 100px; + } + + ul { + margin: 50px 200px; + } + + q { + display: inline-block; + width: 700px; + height: 600px; + background-color: black; + color: white; + font-size: 60px; + padding: 50px; + } + + img, video { + width: 800px; + height: 600px; + position: absolute; + top: 0; + background-color: black; + z-index: -1; + } + + footer { + position: absolute; + bottom: 10px; + right: 20px; + } + + /* Transition effect */ + /* Feel free to change the transition effect for original + animations. See here: + https://developer.mozilla.org/en/CSS/CSS_transitions + How to use CSS3 Transitions: */ + section { + -moz-transition: left 400ms linear 0s; + -webkit-transition: left 400ms linear 0s; + -ms-transition: left 400ms linear 0s; + transition: left 400ms linear 0s; + } + + /* Before */ + section { left: -150%; } + /* Now */ + section[aria-selected] { left: 0; } + /* After */ + section[aria-selected] ~ section { left: +150%; } + + /* Incremental elements */ + + /* By default, visible */ + .incremental > * { opacity: 1; } + + /* The current item */ + .incremental > *[aria-selected] { color: red; opacity: 1; } + + /* The items to-be-selected */ + .incremental > *[aria-selected] ~ * { opacity: 0.2; } + +</style> + +<!-- {{{{ dzslides core +# +# +# __ __ __ . __ ___ __ +# | \ / /__` | | | \ |__ /__` +# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€ +# +# +# The following block of code is not supposed to be edited. +# But if you want to change the behavior of these slides, +# feel free to hack it! +# +--> + +<!-- Default Style --> +<style> + * { margin: 0; padding: 0; } + details { display: none; } + body { + width: 800px; height: 600px; + margin-left: -400px; margin-top: -300px; + position: absolute; top: 50%; left: 50%; + overflow: hidden; + } + section { + position: absolute; + pointer-events: none; + width: 100%; height: 100%; + } + section[aria-selected] { pointer-events: auto; } + html { overflow: hidden; } + body { display: none; } + body.loaded { display: block; } + .incremental {visibility: hidden; } + .incremental[active] {visibility: visible; } +</style> + +<script> + var Dz = { + remoteWindows: [], + idx: -1, + step: 0, + slides: null, + params: { + autoplay: "1" + } + }; + + Dz.init = function() { + document.body.className = "loaded"; + this.slides = $$("body > section"); + this.setupParams(); + this.onhashchange(); + this.setupTouchEvents(); + this.onresize(); + } + + Dz.setupParams = function() { + var p = window.location.search.substr(1).split('&'); + p.forEach(function(e, i, a) { + var keyVal = e.split('='); + Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]); + }); + } + + Dz.onkeydown = function(aEvent) { + // Don't intercept keyboard shortcuts + if (aEvent.altKey + || aEvent.ctrlKey + || aEvent.metaKey + || aEvent.shiftKey) { + return; + } + if ( aEvent.keyCode == 37 // left arrow + || aEvent.keyCode == 38 // up arrow + || aEvent.keyCode == 33 // page up + ) { + aEvent.preventDefault(); + this.back(); + } + if ( aEvent.keyCode == 39 // right arrow + || aEvent.keyCode == 40 // down arrow + || aEvent.keyCode == 34 // page down + ) { + aEvent.preventDefault(); + this.forward(); + } + if (aEvent.keyCode == 35) { // end + aEvent.preventDefault(); + this.goEnd(); + } + if (aEvent.keyCode == 36) { // home + aEvent.preventDefault(); + this.goStart(); + } + if (aEvent.keyCode == 32) { // space + aEvent.preventDefault(); + this.toggleContent(); + } + } + + /* Touch Events */ + + Dz.setupTouchEvents = function() { + var orgX, newX; + var tracking = false; + + var db = document.body; + db.addEventListener("touchstart", start.bind(this), false); + db.addEventListener("touchmove", move.bind(this), false); + + function start(aEvent) { + aEvent.preventDefault(); + tracking = true; + orgX = aEvent.changedTouches[0].pageX; + } + + function move(aEvent) { + if (!tracking) return; + newX = aEvent.changedTouches[0].pageX; + if (orgX - newX > 100) { + tracking = false; + this.forward(); + } else { + if (orgX - newX < -100) { + tracking = false; + this.back(); + } + } + } + } + + /* Adapt the size of the slides to the window */ + + Dz.onresize = function() { + var db = document.body; + var sx = db.clientWidth / window.innerWidth; + var sy = db.clientHeight / window.innerHeight; + var transform = "scale(" + (1/Math.max(sx, sy)) + ")"; + + db.style.MozTransform = transform; + db.style.WebkitTransform = transform; + db.style.OTransform = transform; + db.style.msTransform = transform; + db.style.transform = transform; + } + + + Dz.getDetails = function(aIdx) { + var s = $("section:nth-of-type(" + aIdx + ")"); + var d = s.$("details"); + return d ? d.innerHTML : ""; + } + + Dz.onmessage = function(aEvent) { + var argv = aEvent.data.split(" "), argc = argv.length; + argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) }); + var win = aEvent.source; + if (argv[0] === "REGISTER" && argc === 1) { + this.remoteWindows.push(win); + this.postMsg(win, "REGISTERED", document.title, this.slides.length); + this.postMsg(win, "CURSOR", this.idx + "." + this.step); + return; + } + if (argv[0] === "BACK" && argc === 1) + this.back(); + if (argv[0] === "FORWARD" && argc === 1) + this.forward(); + if (argv[0] === "START" && argc === 1) + this.goStart(); + if (argv[0] === "END" && argc === 1) + this.goEnd(); + if (argv[0] === "TOGGLE_CONTENT" && argc === 1) + this.toggleContent(); + if (argv[0] === "SET_CURSOR" && argc === 2) + window.location.hash = "#" + argv[1]; + if (argv[0] === "GET_CURSOR" && argc === 1) + this.postMsg(win, "CURSOR", this.idx + "." + this.step); + if (argv[0] === "GET_NOTES" && argc === 1) + this.postMsg(win, "NOTES", this.getDetails(this.idx)); + } + + Dz.toggleContent = function() { + // If a Video is present in this new slide, play it. + // If a Video is present in the previous slide, stop it. + var s = $("section[aria-selected]"); + if (s) { + var video = s.$("video"); + if (video) { + if (video.ended || video.paused) { + video.play(); + } else { + video.pause(); + } + } + } + } + + Dz.setCursor = function(aIdx, aStep) { + // If the user change the slide number in the URL bar, jump + // to this slide. + aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0"; + window.location.hash = "#" + aIdx + aStep; + } + + Dz.onhashchange = function() { + var cursor = window.location.hash.split("#"), + newidx = 1, + newstep = 0; + if (cursor.length == 2) { + newidx = ~~cursor[1].split(".")[0]; + newstep = ~~cursor[1].split(".")[1]; + if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) { + newstep = 0; + newidx++; + } + } + if (newidx != this.idx) { + this.setSlide(newidx); + } + if (newstep != this.step) { + this.setIncremental(newstep); + } + for (var i = 0; i < this.remoteWindows.length; i++) { + this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step); + } + } + + Dz.back = function() { + if (this.idx == 1 && this.step == 0) { + return; + } + if (this.step == 0) { + this.setCursor(this.idx - 1, + this.slides[this.idx - 2].$$('.incremental > *').length); + } else { + this.setCursor(this.idx, this.step - 1); + } + } + + Dz.forward = function() { + if (this.idx >= this.slides.length && + this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) { + return; + } + if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) { + this.setCursor(this.idx + 1, 0); + } else { + this.setCursor(this.idx, this.step + 1); + } + } + + Dz.goStart = function() { + this.setCursor(1, 0); + } + + Dz.goEnd = function() { + var lastIdx = this.slides.length; + var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length; + this.setCursor(lastIdx, lastStep); + } + + Dz.setSlide = function(aIdx) { + this.idx = aIdx; + var old = $("section[aria-selected]"); + var next = $("section:nth-of-type("+ this.idx +")"); + if (old) { + old.removeAttribute("aria-selected"); + var video = old.$("video"); + if (video) { + video.pause(); + } + } + if (next) { + next.setAttribute("aria-selected", "true"); + var video = next.$("video"); + if (video && !!+this.params.autoplay) { + video.play(); + } + } else { + // That should not happen + this.idx = -1; + // console.warn("Slide doesn't exist."); + } + } + + Dz.setIncremental = function(aStep) { + this.step = aStep; + var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]'); + if (old) { + old.removeAttribute('aria-selected'); + } + var incrementals = this.slides[this.idx - 1].$$('.incremental'); + if (this.step <= 0) { + incrementals.forEach(function(aNode) { + aNode.removeAttribute('active'); + }); + return; + } + var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1]; + if (next) { + next.setAttribute('aria-selected', true); + next.parentNode.setAttribute('active', true); + var found = false; + incrementals.forEach(function(aNode) { + if (aNode != next.parentNode) + if (found) + aNode.removeAttribute('active'); + else + aNode.setAttribute('active', true); + else + found = true; + }); + } else { + setCursor(this.idx, 0); + } + return next; + } + + Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]] + aMsg = [aMsg]; + for (var i = 2; i < arguments.length; i++) + aMsg.push(encodeURIComponent(arguments[i])); + aWin.postMessage(aMsg.join(" "), "*"); + } + + window.onload = Dz.init.bind(Dz); + window.onkeydown = Dz.onkeydown.bind(Dz); + window.onresize = Dz.onresize.bind(Dz); + window.onhashchange = Dz.onhashchange.bind(Dz); + window.onmessage = Dz.onmessage.bind(Dz); +</script> + + +<script> // Helpers + if (!Function.prototype.bind) { + Function.prototype.bind = function (oThis) { + + // closest thing possible to the ECMAScript 5 internal IsCallable + // function + if (typeof this !== "function") + throw new TypeError( + "Function.prototype.bind - what is trying to be fBound is not callable" + ); + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function () {}, + fBound = function () { + return fToBind.apply( this instanceof fNOP ? this : oThis || window, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; + } + + var $ = (HTMLElement.prototype.$ = function(aQuery) { + return this.querySelector(aQuery); + }).bind(document); + + var $$ = (HTMLElement.prototype.$$ = function(aQuery) { + return this.querySelectorAll(aQuery); + }).bind(document); + + NodeList.prototype.forEach = function(fun) { + if (typeof fun !== "function") throw new TypeError(); + for (var i = 0; i < this.length; i++) { + fun.call(this, this[i]); + } + } + +</script> +<!-- vim: set fdm=marker: }}} --> |