diff options
Diffstat (limited to 'dzslides/template.html')
| -rw-r--r-- | dzslides/template.html | 585 |
1 files changed, 0 insertions, 585 deletions
diff --git a/dzslides/template.html b/dzslides/template.html deleted file mode 100644 index f2fb64b38..000000000 --- a/dzslides/template.html +++ /dev/null @@ -1,585 +0,0 @@ -<!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> - <p>Some random text: But I've never been to the moon! You can see how I lived before I met you. Also Zoidberg. - I could if you hadn't turned on the light and shut off my stereo.</p> -</section> - -<section> - <h3>An incremental list</h3> - <ul class="incremental"> - <li>Item 1 - <li>Item 2 - <li>Item 3 - </ul> - <details>Some notes. They are only visible using onstage shell.</details> -</section> - -<section> - <q> - Who's brave enough to fly into something we all keep calling a death sphere? - </q> -</section> - -<section> - <h2>Part two</h2> -</section> - -<section> - <figure> <!-- Figures are used to display images and videos fullpage --> - <img src="http://placekitten.com/g/800/600"> - <figcaption>An image</figcaption> - </figure> - <details>Kittens are so cute!</details> -</section> - -<section> - <figure> <!-- Videos are automatically played --> - <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> - <figcaption>A video</figcaption> - </figure> -</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; border-radius: 12px} - /* 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: 30px; - } - h1, h2 { - margin-top: 200px; - text-align: center; - font-size: 80px; - } - h3 { - margin: 100px 0 50px 100px; - } - - ul { - margin: 50px 200px; - } - - p { - margin: 75px; - font-size: 50px; - } - - q { - display: block; - width: 100%; - height: 100%; - background-color: black; - color: white; - font-size: 60px; - padding: 50px; - } - - /* Figures are displayed full-page, with the caption - on top of the image/video */ - figure { - background-color: black; - } - figcaption { - margin: 70px; - font-size: 50px; - } - - footer { - position: absolute; - bottom: 0; - width: 100%; - padding: 40px; - text-align: right; - background-color: #F3F4F8; - border-top: 1px solid #CCC; - } - - /* 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] { opacity: 1; } - - /* The items to-be-selected */ - .incremental > *[aria-selected] ~ * { opacity: 0; } - - /* The progressbar, at the bottom of the slides, show the global - progress of the presentation. */ - #progress-bar { - height: 2px; - background: #AAA; - } -</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! -# ---> - -<div id="progress-bar"></div> - -<!-- Default Style --> -<style> - * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - 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; } - #progress-bar{ - bottom: 0; - position: absolute; - -moz-transition: width 400ms linear 0s; - -webkit-transition: width 400ms linear 0s; - -ms-transition: width 400ms linear 0s; - transition: width 400ms linear 0s; - } - figure { - width: 100%; - height: 100%; - } - figure > * { - position: absolute; - } - figure > img, figure > video { - width: 100%; height: 100%; - } -</style> - -<script> - var Dz = { - remoteWindows: [], - idx: -1, - step: 0, - slides: null, - progressBar : null, - params: { - autoplay: "1" - } - }; - - Dz.init = function() { - document.body.className = "loaded"; - this.slides = $$("body > section"); - this.progressBar = $("#progress-bar"); - 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]); - }); - // Specific params handling - if (!+this.params.autoplay) - $$.forEach($$("video"), function(v){ v.controls = true }); - } - - 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(); - } - if (aEvent.keyCode == 70) { // f - aEvent.preventDefault(); - this.goFullscreen(); - } - } - - /* 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++; - } - } - this.setProgress(newidx, newstep); - 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 = $$('.incremental'); - if (this.step <= 0) { - $$.forEach(incrementals, 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; - $$.forEach(incrementals, 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.goFullscreen = function() { - var html = $('html'), - requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen; - if (requestFullscreen) { - requestFullscreen.apply(html); - } - } - - Dz.setProgress = function(aIdx, aStep) { - var slide = $("section:nth-of-type("+ aIdx +")"); - if (!slide) - return; - var steps = slide.$$('.incremental > *').length + 1, - slideSize = 100 / (this.slides.length - 1), - stepSize = slideSize / steps; - this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%'; - } - - 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(" "), "*"); - } - - function init() { - Dz.init(); - window.onkeydown = Dz.onkeydown.bind(Dz); - window.onresize = Dz.onresize.bind(Dz); - window.onhashchange = Dz.onhashchange.bind(Dz); - window.onmessage = Dz.onmessage.bind(Dz); - } - - window.onload = init; -</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); - - $$.forEach = function(nodeList, fun) { - Array.prototype.forEach.call(nodeList, fun); - } - -</script> -<!-- vim: set fdm=marker: }}} --> |