Replace dzslides stuff by own stuff
This commit is contained in:
parent
682c9b1b0a
commit
e182f47a6d
150
css/dzslides.css
150
css/dzslides.css
@ -1,150 +0,0 @@
|
|||||||
/* * {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
} */
|
|
||||||
|
|
||||||
[role="note"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* html {
|
|
||||||
font-size: 16px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
body {
|
|
||||||
width: 800px;
|
|
||||||
height: 600px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view body {
|
|
||||||
position: static;
|
|
||||||
/* margin: 0;
|
|
||||||
padding: 0; */
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: visible;
|
|
||||||
overflow-x: hidden;
|
|
||||||
/* undo Dz.onresize */
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view head,
|
|
||||||
.view head>title {
|
|
||||||
display: block
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view article {
|
|
||||||
pointer-events: auto;
|
|
||||||
position: static;
|
|
||||||
width: 800px;
|
|
||||||
height: 600px;
|
|
||||||
margin: -150px -200px;
|
|
||||||
float: left;
|
|
||||||
transform: scale(.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view article>* {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
article[aria-selected] {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.view {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.loaded {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.next:not([active]) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#progress-bar {
|
|
||||||
bottom: 0;
|
|
||||||
position: absolute;
|
|
||||||
transition: width 400ms linear 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view #progress-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
text-align: right;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
text-align: right;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view footer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
article {
|
|
||||||
transition: none;
|
|
||||||
transform: none;
|
|
||||||
position: static;
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#progress-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
**************************************
|
|
||||||
Uncomment the following for 16:9 slides
|
|
||||||
**************************************
|
|
||||||
*/
|
|
||||||
/* html {
|
|
||||||
font-size: 12px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view article {
|
|
||||||
height: 450px;
|
|
||||||
margin: -140px -200px;
|
|
||||||
transform: scale(.3);
|
|
||||||
}
|
|
||||||
1416
css/reveal.css
1416
css/reveal.css
File diff suppressed because it is too large
Load Diff
1764
css/reveal.scss
1764
css/reveal.scss
File diff suppressed because it is too large
Load Diff
349
js/dzslides.js
349
js/dzslides.js
@ -1,349 +0,0 @@
|
|||||||
var Dz = {
|
|
||||||
remoteWindows: [],
|
|
||||||
idx: -1,
|
|
||||||
step: 0,
|
|
||||||
html: null,
|
|
||||||
slides: null,
|
|
||||||
progressBar: null,
|
|
||||||
params: {
|
|
||||||
autoplay: "1"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const SLIDE_TAG = "article"
|
|
||||||
|
|
||||||
Dz.init = function () {
|
|
||||||
document.body.className = "loaded";
|
|
||||||
this.slides = Array.prototype.slice.call($$(`body > ${SLIDE_TAG}`));
|
|
||||||
this.progressBar = $("#progress-bar");
|
|
||||||
this.html = document.body.parentNode;
|
|
||||||
this.setupParams();
|
|
||||||
this.onhashchange();
|
|
||||||
this.setupTouchEvents();
|
|
||||||
this.onresize();
|
|
||||||
this.setupView();
|
|
||||||
}
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
if (aEvent.keyCode == 79 //o
|
|
||||||
||
|
|
||||||
aEvent.keyCode == 27 //Esc
|
|
||||||
) {
|
|
||||||
aEvent.preventDefault();
|
|
||||||
this.toggleView();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Dz.setupView = function () {
|
|
||||||
document.body.addEventListener("click", function (e) {
|
|
||||||
if (!Dz.html.classList.contains("view")) return;
|
|
||||||
if (!e.target || e.target.nodeName != SLIDE_IDENTIFIER.toUpperCase) return;
|
|
||||||
Dz.html.classList.remove("view");
|
|
||||||
Dz.setCursor(Dz.slides.indexOf(e.target) + 1);
|
|
||||||
}, false);
|
|
||||||
}
|
|
||||||
/* 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.transform = transform;
|
|
||||||
db.style.marginTop = -db.clientHeight / 2 + "px";
|
|
||||||
db.style.marginLeft = -db.clientWidth / 2 + "px";
|
|
||||||
}
|
|
||||||
Dz.getNotes = function (aIdx) {
|
|
||||||
var s = $(`${SLIDE_TAG}:nth-of-type(${aIdx}$)`);
|
|
||||||
var d = s.$("[role='note']");
|
|
||||||
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.getNotes(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 = $(`${SLIDE_TAG}[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].$$('.next').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) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.setCursor(this.idx - 1,
|
|
||||||
this.slides[this.idx - 2].$$('.next[active]').length);
|
|
||||||
}
|
|
||||||
Dz.forward = function () {
|
|
||||||
if (this.idx >= this.slides.length &&
|
|
||||||
this.step >= this.slides[this.idx - 1].$$('.next').length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.html.classList.contains("view") ||
|
|
||||||
this.step >= this.slides[this.idx - 1].$$('.next').length) {
|
|
||||||
this.setCursor(this.idx + 1,
|
|
||||||
this.slides[this.idx].$$('.next[active]').length);
|
|
||||||
} 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].$$('.next').length;
|
|
||||||
this.setCursor(lastIdx, lastStep);
|
|
||||||
}
|
|
||||||
Dz.toggleView = function () {
|
|
||||||
this.html.classList.toggle("view");
|
|
||||||
if (this.html.classList.contains("view")) {
|
|
||||||
$(`${SLIDE_TAG}[aria-selected]`).scrollIntoView(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Dz.setSlide = function (aIdx) {
|
|
||||||
this.idx = aIdx;
|
|
||||||
var old = $(`${SLIDE_TAG}[aria-selected]`);
|
|
||||||
var next = $(`${SLIDE_TAG}: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");
|
|
||||||
if (this.html.classList.contains("view")) {
|
|
||||||
next.scrollIntoView();
|
|
||||||
} else {
|
|
||||||
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 incrementals = Array.prototype.slice.call(this.slides[this.idx - 1].$$('.next')).sort(function (a, b) {
|
|
||||||
return Number(a.getAttribute('next-order')) - Number(b.getAttribute('next-order'));
|
|
||||||
});
|
|
||||||
var next = incrementals[this.step - 1];
|
|
||||||
if (next) {
|
|
||||||
next.setAttribute('active', true);
|
|
||||||
} else {
|
|
||||||
this.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 = $(`${SLIDE_TAG}:nth-of-type(${aIdx})`);
|
|
||||||
if (!slide)
|
|
||||||
return;
|
|
||||||
var steps = slide.$$('.next').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;
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
5577
js/reveal.js
5577
js/reveal.js
File diff suppressed because it is too large
Load Diff
@ -8,14 +8,12 @@
|
|||||||
|
|
||||||
<!-- TODO: Convert stylesheets -->
|
<!-- TODO: Convert stylesheets -->
|
||||||
<link rel="stylesheet" href="css/theme/latex.css">
|
<link rel="stylesheet" href="css/theme/latex.css">
|
||||||
<link rel="stylesheet" href="css/dzslides.css">
|
|
||||||
<!-- <link rel="stylesheet" href="lib/css/zenburn.css">-->
|
<!-- <link rel="stylesheet" href="lib/css/zenburn.css">-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@slides
|
@slides
|
||||||
<div id="progress-bar"></div>
|
<div id="progress-bar"></div>
|
||||||
<!-- TODO: Convert scripts -->
|
<!-- TODO: Convert scripts -->
|
||||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
<script src="onpoint/slidify.js"></script>
|
||||||
<script src="js/dzslides.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
2
onpoint
2
onpoint
@ -1 +1 @@
|
|||||||
Subproject commit 9609e9f3f3e27a4dbcf623ddd048d5b0d50c508a
|
Subproject commit 1d47d221f6b4dc7fa78cd1adc47f6046f6b7f759
|
||||||
Loading…
x
Reference in New Issue
Block a user