<!DOCTYPE html>
<html>
<head>
<link href="http://www.picnicss.com/nut/picnic_3_2.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.20.8.min.js"></script>
<meta charset="utf-8">
<title>Mag.JS</title>
</head>
<body>
<!-- <h1>Hello Mag.JS!</h1>
<a href="https://github.com/magnumjs/mag.js" target="top">GitHub</a>
<hr/>
<h2>Occlusion culling</h2>
-->
<div id="app">
<div class="list">
<ul>
<li>
</li>
</ul>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/src/mag.addons.js"></script>
<script src="app.js"></script>
</body>
</html>
//model
var app = {}
app.state = {
pageY: 0,
pageHeight: window.innerHeight
}
var items = []
for (var i = 0; i < 5000; i++) {
items.push({
title: 'Foo Bar ' + i
})
}
var instance;
//yes, window.innerHeight is a data source, so it goes in the model
window.addEventListener("scroll", function(e) {
app.state.pageY = Math.max(e.pageY || window.pageYOffset, 0);
app.state.pageHeight = window.innerHeight;
instance.draw(1)
})
//controller
app.controller = function() {
this.items = items
}
//view
app.view = function(ctrl) {
var pageY = app.state.pageY
var begin = pageY / 31 | 0
// Add 2 so that the top and bottom of the page are filled with
// next/prev item, not just whitespace if item not in full view
var end = begin + (app.state.pageHeight / 31 | 0 + 2)
var offset = pageY % 31
ctrl.list = {
_style: 'height:' + ctrl.items.length * 31 + "px; position: relative; top:" + -offset + "px"
}
ctrl.ul = {
_style: 'top:' + app.state.pageY + "px"
}
ctrl.li = ctrl.items.slice(begin, end).map(function(item) {
return item.title
})
}
instance = mag.module("app", app)
.hide {
display: none;
}
a { display: block;}
a:after {content:" \bb";}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
background-color: white;
}
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: 0;
}
ul li {
background-color: #f0f0f0;
margin-bottom: 1px;
padding-top: 7px;
padding-left: 20px;
height: 30px;
}
#Mag.JS
## plunk boilerplate
From : http://jsfiddle.net/7JNUy/1/
And: http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome