-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbig.quickstart.html
executable file
·126 lines (118 loc) · 3.69 KB
/
big.quickstart.html
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
<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type='text/css'>
body {
font-family:'Helvetica';
letter-spacing:-5px;
background:#000;
background-size:100%;
color:#fff;
margin:0;
padding:0;
font-weight:bold;
}
h1, h2, h3, p {
margin:0;
}
em, a {
font-style:normal;
color:#8dbd0c;
}
a {
background:#34d0e7;
color:#000;
text-decoration:none;
}
img {
width:100%;
}
div {
cursor:pointer;
cursor:hand;
position:absolute;
top:0px;
left:0px;
padding:75px;
line-height:97%;
}
div.center {
text-align:center;
}
div.imageText {
text-shadow:0px 0px 5px rgba(0,0,0,0.2);
}
notes {
display:none;
}
/* normally not good, but ok in context of full screen directional navigation */
:focus {
outline: 0;
}
</style><script type='text/javascript'>
window.onload = function() {
var s = document.getElementsByTagName('div'), ti, i;
for (i = 0; i < s.length; i++) s[i].setAttribute('tabindex', 0);
if (!s.length) return;
var big = window.big = { current: 0, forward: fwd, reverse: rev, go: go, length: s.length };
function resize() {
var w = window.innerWidth, h = window.innerHeight, e = s[big.current];
e.style.fontSize = h + 'px';
function pass(cinch, start) {
for (var i = start; i > 0 && (e.offsetWidth > w || e.offsetHeight > h); i -= cinch) {
e.style.fontSize = i + 'px';
}
return i + cinch;
}
pass(2, pass(5, pass(10, h - 2)));
e.style.marginTop = (h - e.offsetHeight) / 2 + 'px';
}
function go(n) {
big.current = n;
var e = s[n], t = parseInt(e.getAttribute('data-timeToNext') || 0, 10),
notes = e.getElementsByTagName('notes');
document.body.className = e.getAttribute('data-bodyclass') || '';
for (i = 0; i < s.length; i++) s[i].style.display = 'none';
e.style.display = 'inline';
e.focus();
for (i = 0; typeof console === 'object' && i < notes.length; i++) console.log('%c%s: %s', 'padding:5px;font-family:serif;font-size:18px;line-height:150%;', n, notes[i].innerHTML.trim());
if (e.firstChild && e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url("' + e.firstChild.src + '")';
e.firstChild.style.display = 'none';
if ('classList' in e) e.classList.add('imageText');
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
if (ti !== undefined) window.clearInterval(ti);
if (t > 0) ti = window.setTimeout(fwd, t * 1000);
resize();
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
document.onclick = function() { go(++big.current % s.length); };
function fwd() { go(Math.min(s.length - 1, ++big.current)); }
function rev() { go(Math.max(0, --big.current)); }
document.onkeydown = function(e) {
if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
if (e.which === 37 || e.which === 33 || e.which === 38) rev();
};
document.ontouchstart = function(e) {
var x0 = e.changedTouches[0].pageX;
document.ontouchend = function(e2) {
var x1 = e2.changedTouches[0].pageX;
if (x1 - x0 < 0) fwd();
if (x1 - x0 > 0) rev();
};
};
function parse_hash() {
return Math.max(Math.min(s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) big.current = parse_hash() || big.current;
window.onhashchange = function() {
i = parse_hash();
if (i !== big.current) go(i);
};
window.onresize = resize;
go(big.current);
};
</script></head><body>
<div>welcome to <em>Big</em></div>