-
Notifications
You must be signed in to change notification settings - Fork 5
/
test.html
86 lines (75 loc) · 2.16 KB
/
test.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Endless Tester</title>
<style>
html, body { font: normal 100 13px/18px Lato; margin: 0; padding: 0; height: 100%; }
.item {
width: 100%;
font-size: 3em;
line-height: 1em;
box-sizing: border-box;
/* padding: 2em; */
white-space: nowrap;
text-overflow: ellipsis;
background: #33ccaa;
/*margin: 0 0 0 2%;*/
border: 1px solid #fff;
float: left;
text-align: center;
}
.container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; }
p, h1, h2 { clear: both; text-align: center; padding: 5em 0;}
</style>
</head>
<body>
<div class="container">
<h1>There are some items below.</h1>
<div id="app" class="post-ctnr"></div>
<h2>There were some items above</h2>
</div>
<script src="bower_components/react/react.min.js"></script>
<script src="endless.js"></script>
<script>
function getItem(i) { return ['div', {className: 'item', style: {lineHeight: (Math.abs(i)%7+1) + 'em'}, key: i}, i<0?'('+(-i)+')': i]; }
function getItems(start, end) {
var i, r=[];
for(i=start; i<=end; i++) r.push(getItem(i));
return r;
}
function onScroll(key, above, below) {
if(key == 'bottom') key = 100;
else if (key == 'top') key = -100;
else key = parseFloat(key);
var start = Math.floor((key - above - 5)/20)*20,
end = Math.ceil((key + below + 5)/20)*20;
start = Math.max(-100, Math.min(100, start));
end = Math.max(-100, Math.min(100, end));
console.log('Rendering', key, above, below, start, end);
render({
items: getItems(start, end),
onScroll: onScroll,
atTop: (key - above < -100)? true: false,
atBottom: (key + below > 100)? true: false
})
}
function render(props, callback) {
React.render(
React.createElement(Endless, props),
document.getElementById('app'),
callback
);
}
// window.scrollTo(0, 999999);
render({
items: getItems(-100, 50),
onScroll: onScroll,
atTop: true,
atBottom: false
}, function () {
window.scrollTo(0, 0);
});
</script>
</body>
</html>