Commit 70063366 authored by Thibaut Frain's avatar Thibaut Frain

Added presentation viewer gadget

parent e744799f
...@@ -96,7 +96,9 @@ module.exports = function (grunt) { ...@@ -96,7 +96,9 @@ module.exports = function (grunt) {
"<%= global_config.dest %>/twin_erp5/superindex.css": "<%= global_config.dest %>/twin_erp5/superindex.css":
"<%= global_config.src %>/twin_erp5/superindex.less", "<%= global_config.src %>/twin_erp5/superindex.less",
"<%= global_config.dest %>/presentation_editor/presentation_editor.css": "<%= global_config.dest %>/presentation_editor/presentation_editor.css":
"<%= global_config.src %>/presentation_editor/presentation_editor.css" "<%= global_config.src %>/presentation_editor/presentation_editor.css",
"<%= global_config.dest %>/presentation_viewer/presentation_viewer.css":
"<%= global_config.src %>/presentation_viewer/presentation_viewer.css"
} }
} }
}, },
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="presentation_viewer.css">
<!-- Renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script>
<!-- IO definitions for presentation editor gadget-->
<script src="presentation_viewer.js"></script>
<title>Presentation viewer</title>
</head>
<body></body>
</html>
html { background-color: black; }
a { color: #ff0066; } a:hover {text-decoration: underline;}
footer { position: absolute; bottom: 50px; right: 50px; }
strong {color: #ff0066}
body {
font-family: 'oswald', arial, serif;
background-color: white;
color: white;
font-size: 2em;
background: #1c1c1c;
background-image: -moz-radial-gradient(center 45deg, #333 0%, #1c1c1c 50%);
background-image: -moz-radial-gradient(center 45deg, #333 0%, #1c1c1c 50%);
}
/* transition effect */
section {
-moz-transition: left 400ms linear 0s;
-webkit-transition: left 400ms linear 0s;
-o-transition: left 400ms linear 0s;
-ms-transition: left 400ms linear 0s;
transition: left 400ms linear 0s;
}
section { left: -150%; }
section[aria-selected] { left: 0; }
section[aria-selected] ~ section { left: +150% }
.chapter { background-color: black;}
.chapter h1 {line-height: 600px; vertical-align: middle; margin: 0; text-align: center; display: block}
h1 {
margin: 50px 100px 0 100px;
font-size: 50px;
text-shadow: 0px -1px 0px #000;
text-align: left;
}
h2 {
color: #fae50b;
margin: 70px 0 0 0;
font-size: 40px;
text-align: center;
}
ul {
margin-top: 70px;
font-size: 35px;
text-align: right;
border-right: 4px solid white;
padding-right: 40px;
min-width: 310px;
margin-left: 50px;
display: inline-block;
}
q, p {
margin: 50px auto 0 auto;
width: 500px;
}
q:after {content: ""}
q:before {content: ""}
q {
display: block;
margin-top: 140px;
}
video {
position: absolute;
top: 210px;
width: 260px;
left: 445px;
box-shadow: 0 0 10px black;
}
#arrow {
position: absolute;
top: 165px;
left: 460px;
font-size: 100px;
color: white;
}
li {list-style-type: none}
* { 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;}
body {display: none}
body.loaded {display: block}
section.code pre { margin: 20px 0 0 40px;font-size: 15px; font-weight: bold;}
section.code .Constant { color: #af5fff}
section.code .StorageClass { color: #ff8700}
section.code .Exception { color: #87ff00}
section.code .Identifier { color: #ff8700}
section.code .Title { color: #d75f00}
section.code .String { color: #afaf87}
section.code .Type { color: #5fd7ff}
section.code .Statement { color: #d7005f}
section.code .Function { color: #87ff00}
section.code .Comment { color: #CCC}
/* Cedric extensions */
section img {max-width: 100%; max-height: 80%; display: block; margin-left: auto; margin-right: auto;}
\ No newline at end of file
/*global window, jQuery, rJS, onhashchange, msg, win,
onresize, console*/
(function (window, document, rJS) {
"use strict";
var friendWindows = [],
idx = 1,
slides,
toggleContent,
onhashchange,
back,
forward,
setSlide;
/* main() */
function dZmain() {
slides = document.querySelectorAll("body > section");
onhashchange();
setSlide();
document.body.className = "loaded";
onresize();
}
window.onload = dZmain;
/* 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 === 33 // page up
) {
e.preventDefault();
back();
}
if (e.keyCode === 39 // right arrow
|| e.keyCode === 34 // page down
) {
e.preventDefault();
forward();
}
if (e.keyCode === 32) { // space
e.preventDefault();
toggleContent();
}
};
/* Adapt the size of the slides to the window */
window.onresize = function () {
var sx = document.body.clientWidth / window.innerWidth,
sy = document.body.clientHeight / window.innerHeight,
transform = "scale(" + (1 / Math.max(sx, sy)) + ")";
document.body.style.MozTransform = transform;
document.body.style.WebkitTransform = transform;
document.body.style.OTransform = transform;
document.body.style.msTransform = transform;
document.body.style.transform = transform;
};
function getDetails(idx) {
var s = document.querySelector("section:nth-of-type(" + idx + ")"),
d = s.querySelector("details");
return d ? d.innerHTML : "";
}
window.onmessage = function (e) {
window.msg = e.data;
window.win = e.source;
if (msg === "register") {
friendWindows.push(win);
win.postMessage(JSON.stringify({
method: "registered",
title: document.title,
count: slides.length
}), document.location);
win.postMessage(JSON.stringify({
method: "newslide",
details: getDetails(idx),
idx: idx
}), document.location);
return;
}
if (msg === "back") { back(); }
if (msg === "forward") { forward(); }
if (msg === "toggleContent") { toggleContent(); }
// setSlide(42)
var r = /setSlide\((\d+)\)/.exec(msg);
if (r) {
idx = r[1];
setSlide();
}
};
/* If a Video is present in this new slide, play it.
If a Video is present in the previous slide, stop it. */
/*jslint unparam: true*/
toggleContent = function () {
var s = document.querySelector("section[aria-selected]"),
video;
if (s) {
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. */
onhashchange = function (e) {
/*jslint bitwise: true */
var newidx = window.location.hash.split("#")[1];
if (!newidx) { newidx = 1; }
if (newidx === idx) { return; }
idx = newidx;
setSlide();
};
/* Slide controls */
back = function () {
if (idx === 1) { return; }
idx -= 1;
setSlide();
};
forward = function () {
if (idx >= slides.length) { return; }
idx += 1;
setSlide();
};
setSlide = function () {
var old = document.querySelector("section[aria-selected]"),
next = document.querySelector("section:nth-of-type(" + idx + ")"),
video,
i;
if (old) {
old.removeAttribute("aria-selected");
video = old.querySelector("video");
if (video) { video.pause(); }
}
if (next) {
next.setAttribute("aria-selected", "true");
video = next.querySelector("video");
if (video) { video.play(); }
} else {
console.warn("No such slide: " + idx);
idx = 0;
for (i = 0; i < slides.length; i += 1) {
if (slides[i].hasAttribute("aria-selected")) {
idx = i + 1;
}
}
}
window.location.hash = idx;
for (i = 0; i < friendWindows.length; i += 1) {
friendWindows[i].postMessage(JSON.stringify({
method: "newslide",
details: getDetails(idx),
idx: idx
}), document.location);
}
};
rJS(window)
.declareMethod('setContent', function (content) {
document.body.innerHTML = content;
dZmain();
})
.declareMethod('getContent', function () {
return document.innerHTML;
});
}(window, document, rJS));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment