Skip to content

Instantly share code, notes, and snippets.

@zorgoz

zorgoz/index.html

Created November 13, 2018 13:33
Show Gist options
  • Save zorgoz/b1a8c9346e5c09abc74c337d0f3636b0 to your computer and use it in GitHub Desktop.
Save zorgoz/b1a8c9346e5c09abc74c337d0f3636b0 to your computer and use it in GitHub Desktop.
Download ZIP
RiotJs virtual scroll compo nent demo RiotJs virtual scroll compo nent demo // source https://jsbin.com/mamafep
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RiotJs virtual scroll compo nent demo</title>
<meta name="description" content="RiotJs virtual scroll compo nent demo">
<meta name="author" content="zorgoz">
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.1/riot.js"></script>
<script src="https://cdn.jsdelivr.net/gh/zorgoz/riotjs-virtualscroll@d06672806326ac4d9197d89b434c4be383724b09/dist/virtual-scroll.js"></script>
<style>
virtual-scroll {
height: 500px;
border: 1px solid red;
padding: 10px;
}
virtual-scroll > div {
border: 1px solid blue;
padding: 10px;
margin: 10px;
}
@media (max-width: 959px) { /*>=M*/
virtual-scroll > div {
padding: 20px;
border: 1px solid green;
}
}
</style>
</head>
<body>
<virtual-scroll id="first" item="row" key="i" itemClass="myitem">
Item #{index}: with key={i}, value={row.value}
</virtual-scroll>
<div>
<button onclick="re(500);">Get 500 items</button>
<button onclick="re(10);">Get 10 items</button>
<button onclick="re(10000);">Get 10000 items</button>
</div>
<div>
<button onclick="loc();">Jump to #</button><input type="number" min="0">
</div>
<script id="jsbin-javascript">
var vs = null;
build = (keys) => keys.reduce((a,c) => { a[`x_${c}`]={idx:c, value:c*100}; return a; }, {});
function re(n){
let items = build([...Array(n).keys()]);
vs.update({items:items});
}
function max(){
let l = Object.keys(vs.items).length;
document.querySelector('input').max = l-1;
document.querySelector('input').value = Math.floor(Math.random()*l);
}
function loc(){
let l = document.querySelector('input').value;
vs.locate(l, {block: 'center', behavior: 'smooth'})
.then(element => {
let original_color = element.style.backgroundColor;
element.style.backgroundColor = 'orange';
window.setTimeout(() => element.style.backgroundColor = original_color, 1000)
})
.catch(e => alert('Out of range!'));
}
(() => {
vs = riot.mount('#first', {items:build([...Array(5).keys()])})[0];
max();
vs.on('updated', max);
})();
</script>
<script id="jsbin-source-javascript" type="text/javascript">var vs = null;
build = (keys) => keys.reduce((a,c) => { a[`x_${c}`]={idx:c, value:c*100}; return a; }, {});
function re(n){
let items = build([...Array(n).keys()]);
vs.update({items:items});
}
function max(){
let l = Object.keys(vs.items).length;
document.querySelector('input').max = l-1;
document.querySelector('input').value = Math.floor(Math.random()*l);
}
function loc(){
let l = document.querySelector('input').value;
vs.locate(l, {block: 'center', behavior: 'smooth'})
.then(element => {
let original_color = element.style.backgroundColor;
element.style.backgroundColor = 'orange';
window.setTimeout(() => element.style.backgroundColor = original_color, 1000)
})
.catch(e => alert('Out of range!'));
}
(() => {
vs = riot.mount('#first', {items:build([...Array(5).keys()])})[0];
max();
vs.on('updated', max);
})();
</script></body>
</html>
Raw
jsbin.mamafep.js
var vs = null;
build = (keys) => keys.reduce((a,c) => { a[`x_${c}`]={idx:c, value:c*100}; return a; }, {});
function re(n){
let items = build([...Array(n).keys()]);
vs.update({items:items});
}
function max(){
let l = Object.keys(vs.items).length;
document.querySelector('input').max = l-1;
document.querySelector('input').value = Math.floor(Math.random()*l);
}
function loc(){
let l = document.querySelector('input').value;
vs.locate(l, {block: 'center', behavior: 'smooth'})
.then(element => {
let original_color = element.style.backgroundColor;
element.style.backgroundColor = 'orange';
window.setTimeout(() => element.style.backgroundColor = original_color, 1000)
})
.catch(e => alert('Out of range!'));
}
(() => {
vs = riot.mount('#first', {items:build([...Array(5).keys()])})[0];
max();
vs.on('updated', max);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment