155 lines
3.8 KiB
HTML
155 lines
3.8 KiB
HTML
<!doctype html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<style type="text/css">
|
||
body {
|
||
font-family: helvetica, arial;
|
||
}
|
||
.center {
|
||
text-align: center;
|
||
margin: 20px;
|
||
}
|
||
#container {
|
||
position: absolute;
|
||
top: 200px;
|
||
bottom: 0;
|
||
left: 100px;
|
||
right: 100px;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
#container span {
|
||
display: inline-block;
|
||
background-color: #ccc;
|
||
width: 75px;
|
||
height: 75px;
|
||
margin: 5px;
|
||
line-height: 75px;
|
||
text-align: center;
|
||
color: #999;
|
||
/*border: 1px solid black;*/
|
||
}
|
||
#container span.in {
|
||
background-color: #fcc;
|
||
}
|
||
#container span.partial-above {
|
||
background-color: #ccf;
|
||
}
|
||
#container span.partial-below {
|
||
background-color: #ffc;
|
||
}
|
||
|
||
#counter {
|
||
position: fixed;
|
||
font-size: 30px;
|
||
top: 50%;
|
||
left: 50%;
|
||
color: black;
|
||
opacity: 0.8;
|
||
text-align: center;
|
||
}
|
||
#counter > div {
|
||
position: relative;
|
||
background-color: white;
|
||
padding: 30px;
|
||
border-radius: 30px;
|
||
left: -50%;
|
||
top: -80px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1 class="center">scrollMonitor stress test</h1>
|
||
<div class="center">
|
||
Showing <span class="fill-with-count"></span> elements.
|
||
</div>
|
||
<div class="center">
|
||
<a href="?100">100</a> -
|
||
<a href="?1000">1,000</a> -
|
||
<a href="?10000">10,000</a> -
|
||
<a href="?20000">20,000</a> -
|
||
<a href="?30000">30,000</a> -
|
||
<a href="?50000">50,000</a> -
|
||
<a href="?100000">100,000</a> -
|
||
<a href="?200000">200,000</a> -
|
||
<a href="?300000">300,000</a> -
|
||
<a href="?500000">500,000</a> -
|
||
<a href="?1000000">1,000,000</a>
|
||
</div>
|
||
<div id="container">
|
||
</div>
|
||
<div id="counter"><div><div id="status">Rendering elements...</div><div id="progress_numbers"></div><progress></progress></div></div>
|
||
<a href="https://github.com/stutrek/scrollMonitor"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
|
||
<script type="text/javascript">
|
||
requirejs(['../dist/umd/index.js'], function () {
|
||
|
||
var count = parseInt(window.location.search.substr(1), 10) || 10000;
|
||
$('.fill-with-count').html(count);
|
||
|
||
var containerEl = document.getElementById('container');
|
||
var counter = $('#progress_numbers')[0]
|
||
var progress = $('#counter progress')[0]
|
||
|
||
var frag = document.createDocumentFragment();
|
||
var i = 0;
|
||
|
||
var container = scrollMonitor.createContainer(containerEl);
|
||
var elements = [];
|
||
|
||
function draw() {
|
||
var el;
|
||
while (i < count) {
|
||
el = document.createElement('span');
|
||
el.innerHTML = i += 1;
|
||
frag.appendChild(el);
|
||
elements.push(el);
|
||
|
||
if ((i % 12345) === 0) {
|
||
containerEl.appendChild(frag);
|
||
counter.innerHTML = (i) + ' of ' + count;
|
||
progress.value = i;
|
||
break;
|
||
}
|
||
}
|
||
if (i === count) {
|
||
containerEl.appendChild(frag);
|
||
$(counter).remove();
|
||
$('#status').html('Calculating locations...');
|
||
progress.removeAttribute('value');
|
||
setTimeout(function () {
|
||
for (var i = 0; i < count; i++) {
|
||
var watcher = container.create(elements[i]);
|
||
watcher.on('stateChange', addClass);
|
||
addClass.call(watcher);
|
||
}
|
||
container.recalculateLocations();
|
||
$('#counter').remove();
|
||
}, 0);
|
||
} else {
|
||
setTimeout(draw, 0);
|
||
}
|
||
}
|
||
|
||
progress.max = count;
|
||
draw();
|
||
|
||
function addClass() {
|
||
if (!this.isInViewport) {
|
||
return;
|
||
} else if (this.isFullyInViewport) {
|
||
this.watchItem.style.backgroundColor = '#fcc';
|
||
} else if (this.isAboveViewport) {
|
||
this.watchItem.style.backgroundColor = '#ccf';
|
||
} else if (this.isBelowViewport) {
|
||
this.watchItem.style.backgroundColor = '#ffc';
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
|
||
</body>
|