diff options
Diffstat (limited to 'default.dzslides')
| -rw-r--r-- | default.dzslides | 363 |
1 files changed, 363 insertions, 0 deletions
diff --git a/default.dzslides b/default.dzslides new file mode 100644 index 000000000..e09c32b40 --- /dev/null +++ b/default.dzslides @@ -0,0 +1,363 @@ +<!DOCTYPE html> +<head> +<meta charset="utf-8"> +$for(author)$ + <meta name="author" content="$author$" /> +$endfor$ +$if(date)$ + <meta name="date" content="$date$" /> +$endif$ + <title>$if(title-prefix)$$title-prefix$ - $endif$$if(pagetitle)$$pagetitle$$endif$</title> +$if(highlighting-css)$ + <style type="text/css"> +/*<![CDATA[*/ +$highlighting-css$ +/*]]>*/ + </style> +$endif$ +<title>$title$</title> +</head> +<body> +$if(title)$ +<section> + <h1>$title$</h1> +</section> +$endif$ +$for(include-before)$ +$include-before$ +$endfor$ +$body$ +$for(include-after)$ +$include-after$ +$endfor$ +<!-- Your Style --> +<!-- Define the style of you 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. Its size is 800x600, and this will never change */ + section { + /* The font from Google */ + font-family: 'Oswald', arial, serif; + font-size: 2em; + padding-left: 1em; + } + h1, h2, h3 { + margin-top: 50px; + text-align: center; + } + ul { + margin-left: 40px; + } + a { color: #FF0066; } a:hover { text-decoration: underline; } + footer { position: absolute; bottom: 50px; right: 50px; } + + .images { + margin: 20px; + text-align: center; + } + + /* 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%; } + + /* Increment with lists */ + .incremental > * { opacity: 1; } + .incremental > *[aria-selected] { color: red; opacity: 1; } + .incremental > *[aria-selected] ~ * { opacity: 0.2; } + /* Increment with images */ + .incremental > img[aria-selected] { box-shadow: 0 0 10px #000 } + +</style> + + +<!-- {{{{ ***************** DZSlides CORE 2.0b1 *************************** --> +<!-- *********************************************************************** --> +<!-- *********************************************************************** --> +<!-- *********************************************************************** --> +<!-- *********************************************************************** --> + +<!-- 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 ;) --> + +<!-- 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; + } + html { + overflow: hidden; + } + section { + position: absolute; + pointer-events: none; + width: 95%; height: 100%; + } + section[aria-selected] { pointer-events: auto; } + body { display: none; } + body.loaded { display: block; } + .incremental {visibility: hidden} + .incremental[active] {visibility: visible} +</style> + +<script> + var friendWindows = []; + var idx, step; + var slides; + + /* main() */ + + window.onload = function() { + slides = document.querySelectorAll("body > section"); + onhashchange(); + document.body.className = "loaded"; + setupTouchEvents(); + onresize(); + } + + /* Handle keys */ + + window.onkeydown = function(e) { + // Don't intercept keyboard shortcuts + if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { + return; + } + if ( e.keyCode == 37 // left arrow + || e.keyCode == 38 // up arrow + || e.keyCode == 33 // page up + ) { + e.preventDefault(); + back(); + } + if ( e.keyCode == 39 // right arrow + || e.keyCode == 40 // down arrow + || e.keyCode == 34 // page down + ) { + e.preventDefault(); + forward(); + } + if (e.keyCode == 35) { // end + e.preventDefault(); + end(); + } + if (e.keyCode == 36) { // home + e.preventDefault(); + start(); + } + + if ( e.keyCode == 32) { // space + e.preventDefault(); + toggleContent(); + } + } + + /* Touch Events */ + + function setupTouchEvents() { + var orgX, newX; + var tracking = false; + + var db = document.body; + db.addEventListener("touchstart", start, false); + db.addEventListener("touchmove", move, false); + + function start(e) { + e.preventDefault(); + tracking = true; + orgX = e.changedTouches[0].pageX; + } + + function move(e) { + if (!tracking) return; + newX = e.changedTouches[0].pageX; + if (orgX - newX > 100) { + tracking = false; + forward(); + } else { + if (orgX - newX < -100) { + tracking = false; + back(); + } + } + } + } + + /* Adapt the size of the slides to the window */ + + window.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; + } + function getDetails(idx) { + var s = document.querySelector("section:nth-of-type("+ idx +")"); + var d = s.querySelector("details"); + return d?d.innerHTML:""; + } + window.onmessage = function(e) { + var msg = e.data; + var win = e.source; + if (msg === "register") { + friendWindows.push(win); + win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*"); + win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*"); + return; + } + if (msg === "back") back(); + if (msg === "forward") forward(); + if (msg === "toggleContent") toggleContent(); + // setSlide(42) + var r = /setSlide\((\d+)\)/.exec(msg); + if (r) { + setSlide(r[1]); + } + } + + /* If a Video is present in this new slide, play it. + If a Video is present in the previous slide, stop it. */ + + function toggleContent() { + var s = document.querySelector("section[aria-selected]"); + if (s) { + var video = s.querySelector("video"); + if (video) { + if (video.ended || video.paused) { + video.play(); + } else { + video.pause(); + } + } + } + } + + /* If the user change the slide number in the URL bar, jump + to this slide. */ + + function setCursor(aIdx, aStep) { + aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ""; + window.location.hash = "#" + aIdx + aStep; + } + window.onhashchange = function(e) { + 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 (newidx != idx) setSlide(newidx); + setIncremental(newstep); + } + + /* Slide controls */ + + function back() { + if (idx == 1 && step == 0) return; + if (step == 0) + setCursor(idx - 1, slides[idx - 2].querySelectorAll('.incremental > *').length); + else + setCursor(idx, step - 1); + } + function forward() { + if (idx >= slides.length && step >= slides[idx - 1].querySelectorAll('.incremental > *').length) return; + if (step >= slides[idx - 1].querySelectorAll('.incremental > *').length) + setCursor(idx + 1, 0); + else + setCursor(idx, step + 1); + } + function start() { + setCursor(1, 0); + } + function end() { + var lastIdx = slides.length; + var lastStep = slides[lastIdx - 1].querySelectorAll('.incremental > *').length; + setCursor(lastIdx, lastStep); + } + + function setSlide(aIdx) { + idx = aIdx; + var old = document.querySelector("section[aria-selected]"); + var next = document.querySelector("section:nth-of-type("+ idx +")"); + if (old) { + old.removeAttribute("aria-selected"); + var video = old.querySelector("video"); + if (video) { video.pause(); } + } + if (next) { + next.setAttribute("aria-selected", "true"); + var video = next.querySelector("video"); + if (video) { video.play(); } + } else { + idx = 0; + for (var i = 0, l = slides.length; i < l; i++) { + if (slides[i].hasAttribute("aria-selected")) { + idx = i + 1; + } + } + } + for (var i = 0, l = friendWindows.length; i < l; i++) { + friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*"); + } + } + function setIncremental(aStep) { + step = aStep; + var old = slides[idx-1].querySelector('.incremental > *[aria-selected]'); + if (old) + old.removeAttribute('aria-selected'); + var incrementals = slides[idx-1].querySelectorAll('.incremental'); + if (step == 0) { + for (var i = 0; i < incrementals.length; i++) { + incrementals[i].removeAttribute('active'); + } + return; + } + var next = slides[idx-1].querySelectorAll('.incremental > *')[step-1]; + if (next) { + next.setAttribute('aria-selected', true); + next.parentNode.setAttribute('active', true); + var found = false; + for (var i = 0; i < incrementals.length; i++) { + if (incrementals[i] != next.parentNode) + if (found) + incrementals[i].removeAttribute('active'); + else + incrementals[i].setAttribute('active', true); + else + found = true; + } + } else { + setCursor(idx, 0); + } + return next; + } +</script> +<!-- vim: set fdm=marker: }}} --> +</body> +</html> |