mirror of
https://github.com/YunoHost/yunohost-fosdem-2017.git
synced 2024-09-03 20:06:35 +02:00
278 lines
6.8 KiB
HTML
278 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<meta charset="utf8">
|
||
|
|
<title>...</title>
|
||
|
|
|
||
|
|
<div id="slides">
|
||
|
|
<iframe allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
<div id="controls">
|
||
|
|
<button title="prev" id="back" onclick="Dz.back()">◀</button>
|
||
|
|
<button title="next" id="forward" onclick="Dz.forward()">▶</button>
|
||
|
|
<div id="rightcontrols">
|
||
|
|
<input onchange="Dz.setCursor(this.value)" size="2" id="slideidx" value="0" />/<span id="slidecount">...</span>
|
||
|
|
<button title="Go fullscreen or open in a new window" id="fullscreen" onclick="Dz.goFullscreen()">⇱</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html { height: 100%;}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background-color: black;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#slides, #controls {
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
#controls {
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
#slides {
|
||
|
|
bottom: 40px;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
iframe {
|
||
|
|
border: none;
|
||
|
|
background-color: white;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#controls {
|
||
|
|
bottom: 0;
|
||
|
|
float: right;
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#controls button[disabled] {color: #333;}
|
||
|
|
button {
|
||
|
|
background-color: transparent;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
color: #bbb;
|
||
|
|
padding: 0;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 100%;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-khtml-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-o-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
button:active {
|
||
|
|
top: 1px;
|
||
|
|
left: 1px;
|
||
|
|
}
|
||
|
|
#slideidx {
|
||
|
|
border: none;
|
||
|
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#rightcontrols * { vertical-align: middle; }
|
||
|
|
#rightcontrols {
|
||
|
|
bottom: 4px;
|
||
|
|
position: absolute;
|
||
|
|
top: 4px;
|
||
|
|
right: 10px;
|
||
|
|
}
|
||
|
|
#fullscreen {-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-o-transform: scaleX(-1);-ms-transform: scaleX(-1);transform: scaleX(-1);}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var Dz = {
|
||
|
|
view: null,
|
||
|
|
url: null,
|
||
|
|
idx: 1,
|
||
|
|
count: null,
|
||
|
|
iframe: null
|
||
|
|
};
|
||
|
|
|
||
|
|
Dz.init = function() {
|
||
|
|
this.loadIframe();
|
||
|
|
}
|
||
|
|
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.onmessage = function(aEvent) {
|
||
|
|
if (aEvent.source === this.view) {
|
||
|
|
var argv = aEvent.data.split(" "), argc = argv.length;
|
||
|
|
argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
|
||
|
|
if (argv[0] === "CURSOR" && argc === 2) {
|
||
|
|
var cursor = argv[1].split(".");
|
||
|
|
this.idx = ~~cursor[0];
|
||
|
|
this.step = ~~cursor[1];
|
||
|
|
$("#slideidx").value = this.idx;
|
||
|
|
$("#back").disabled = this.idx == 1;
|
||
|
|
$("#forward").disabled = this.idx == this.count;
|
||
|
|
}
|
||
|
|
if (argv[0] === "REGISTERED" && argc === 3) {
|
||
|
|
$("#slidecount").innerHTML = this.count = argv[2];
|
||
|
|
document.title = argv[1];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Get url from hash or prompt and store it */
|
||
|
|
|
||
|
|
Dz.getUrl = function() {
|
||
|
|
var u = window.location.hash.split("#")[1];
|
||
|
|
if (!u) {
|
||
|
|
u = window.prompt("What is the URL of the slides?");
|
||
|
|
if (u) {
|
||
|
|
window.location.hash = u.split("#")[0];
|
||
|
|
return u;
|
||
|
|
}
|
||
|
|
u = "<style>body{background-color:white;color:black}</style>";
|
||
|
|
u += "<strong>ERROR:</strong> No URL specified.<br>";
|
||
|
|
u += "Try<em>: " + document.location + "#yourslides.html</em>";
|
||
|
|
u = "data:text/html," + encodeURIComponent(u);
|
||
|
|
}
|
||
|
|
return u;
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.loadIframe = function() {
|
||
|
|
this.iframe = $("iframe");
|
||
|
|
this.iframe.src = this.url = this.getUrl();
|
||
|
|
this.iframe.onload = function() {
|
||
|
|
Dz.view = this.contentWindow;
|
||
|
|
Dz.postMsg(Dz.view, "REGISTER");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.toggleContent = function() {
|
||
|
|
this.postMsg(this.view, "TOGGLE_CONTENT");
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.onhashchange = function() {
|
||
|
|
this.loadIframe();
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.back = function() {
|
||
|
|
this.postMsg(this.view, "BACK");
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.forward = function() {
|
||
|
|
this.postMsg(this.view, "FORWARD");
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.goStart = function() {
|
||
|
|
this.postMsg(this.view, "START");
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.goEnd = function() {
|
||
|
|
this.postMsg(this.view, "END");
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.setCursor = function(aCursor) {
|
||
|
|
this.postMsg(this.view, "SET_CURSOR", aCursor);
|
||
|
|
}
|
||
|
|
|
||
|
|
Dz.goFullscreen = function() {
|
||
|
|
var requestFullscreen = this.iframe.requestFullscreen || this.iframe.requestFullScreen || this.iframe.mozRequestFullScreen || this.iframe.webkitRequestFullScreen;
|
||
|
|
if (requestFullscreen) {
|
||
|
|
requestFullscreen.apply(this.iframe);
|
||
|
|
} else {
|
||
|
|
window.open(this.url + "#" + this.idx, '', 'width=800,height=600,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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.onhashchange = Dz.loadIframe.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);
|
||
|
|
|
||
|
|
</script>
|