-
Notifications
You must be signed in to change notification settings - Fork 78
/
snap.js
141 lines (140 loc) · 4.91 KB
/
snap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
(function(d) {
const n = 3; // find a container that has at least n "slides"
let p = d.body; // container of slides; assume <body> for now
const s1 = ':scope > hr:not([class])', s2 = ':scope > h2';
function findContainer(s) {
if (p.querySelectorAll(s).length >= n) return true;
// if body doesn't contain headers or <hr>s, look into children
for (let i = 0; i < p.children.length; i++) {
if (p.children[i].querySelectorAll(s).length >= n) {
p = p.children[i]; break;
}
}
return false;
}
function newEl(tag, cls) {
const el = d.createElement(tag);
if (cls) el.className = cls;
return el;
}
if (!findContainer(s1)) {
// if not enough <hr>s found in children; look for <h2> instead
if (p.tagName === 'BODY') {
// not enough h2 found, this page is not appropriate for slides
if (!findContainer(s2) && p.tagName === 'BODY') return;
p.querySelectorAll(s2).forEach(h2 => h2.before(newEl('hr')));
}
}
p.classList.add('slide-container');
// add 'slide' class to the frontmatter div and toc
['.frontmatter', '#TOC'].forEach(s => {
d.body.querySelector(s)?.classList.add('slide');
});
function newSlide() {
return newEl('div', 'slide');
}
function isSep(el) {
return el.tagName === 'HR' && el.attributes.length === 0;
}
let el = p.firstElementChild; if (isSep(el)) el.remove();
el = p.firstElementChild; if (!el) return;
let s = newSlide(); el.before(s);
while (true) {
let el = s.nextSibling;
if (!el) break;
// remove slide separators (<hr>) and create new slide
if (isSep(el)) {
s = newSlide(); el.before(s); el.remove();
} else if (el.classList?.contains('slide')) {
if (s.innerText !== '') s = newSlide();
el.after(s);
} else {
s.append(el);
}
}
function setAttr(el, attr) {
const m = newEl('div');
m.innerHTML = `<div ${attr}></div>`;
const attrs = m.firstElementChild.attributes;
for (let i = 0; i < attrs.length; i++) {
let a = attrs[i];
el.setAttribute(a.name, a.value);
}
m.remove();
}
const slides = d.querySelectorAll('div.slide'), N = slides.length,
tm = d.querySelector('span.timer'), fn = d.querySelector('.footnotes');
slides.forEach((s, i) => {
// append footnotes
if (fn) s.querySelectorAll('a.footnote-ref[href^="#fn"]').forEach(a => {
const li = fn.querySelector('li' + a.getAttribute('href'));
if (!li) return;
let f = s.querySelector('div.footnote');
if (!f) {
f = newEl('div', 'footnote'); s.append(f);
}
f.append(li);
li.outerHTML = li.innerHTML.replace('>', `>${a.innerHTML} `)
.replace(/^<p>([\s\S]*)<\/p>$/, '<div>$1</div>');
});
// add a timer
s.append(tm ? tm.cloneNode() : newEl('span', 'timer'));
// add page numbers
const n = newEl('span', 'page-number');
n.innerText = i + 1 + '/' + N;
n.onclick = e => location.hash = i + 1;
s.append(n);
// apply slide attributes in <!--# -->
for (let k in s.childNodes) {
const node = s.childNodes[k];
if (node.nodeType !== Node.COMMENT_NODE) continue;
let t = node.textContent;
if (!/^#/.test(t)) continue;
t = t.replace(/^#/, '');
const r = /[\s\n]class="([^"]+)"/, m = t.match(r);
if (m) {
t = t.replace(r, '').trim();
s.className += ' ' + m[1];
}
if (t) setAttr(s, t);
break;
}
s.classList.contains('extend') && s.append(newEl('div', 'spacer fade'));
location.hash === ('#' + (i + 1)) && s.scrollIntoView();
s.addEventListener('click', e => {
if (!e.altKey) return;
d.body.classList.toggle('overview');
setTimeout(() => e.target.scrollIntoView(), 100);
});
});
[...d.querySelectorAll('a.footnote-back'), fn, tm].forEach(el => el?.remove());
const tms = d.querySelectorAll('span.timer'), t1 = 1000 * tms[0].dataset.total;
let t0;
function startTimers() {
t0 = new Date();
setInterval(setTimers, 1000);
}
function setTimers() {
let t = (new Date() - t0);
if (t1) t = t1 - t;
const t2 = new Date(Math.abs(t)).toISOString().substr(11, 8).replace(/^00:/, '');
tms.forEach(el => {
el.innerText = t2;
if (t < 0) el.style.display = el.style.display === 'none' ? '' : 'none';
});
}
// press f for fullscreen mode
d.addEventListener('keyup', (e) => {
if (e.target !== d.body) return;
e.key === 'f' && d.documentElement.requestFullscreen();
e.key === 'o' && d.body.classList.toggle('overview');
e.key === 'm' && d.body.classList.toggle('mirrored');
sessionStorage.setItem('body-class', d.body.className);
});
// start timer on fullscreen
d.onfullscreenchange = (e) => d.fullscreenElement && !t0 && startTimers();
tms.forEach(el => el.addEventListener('click', e => startTimers()));
// restore previsouly saved body class
const bc = sessionStorage.getItem('body-class');
if (bc) d.body.className += ' ' + bc;
})(document);