585 lines
15 KiB
HTML
585 lines
15 KiB
HTML
<!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: }}} -->
|