bungee
Version:
Bungee is a declarative language engine to run inside a browser. The node module contains the offline compiler.
138 lines (105 loc) • 3.9 kB
HTML
<html>
<head>
<title> Bungee </title>
<link rel="stylesheet" href="normalize.css">
<script type="text/javascript" src="../../bungee.js"></script>
<script>
var count = 50;
function init() {
Bungee.jump();
for (var i = 0; i < count; ++i) {
window.app.buildDelegate(i);
}
layout();
}
var path1 = [
{ percent: 0, left: 0, top: 100, opacity: 0 },
{ percent: 0.5, left: 200, top: 200, opacity: 1 },
{ percent: 0.8, left: 400, top: 50, opacity: 0 },
{ percent: 1, left: 1000, top: 150, opacity: 0.5 }
];
var path2 = [
{ percent: 0, left: 200, top: 0, opacity: 0 },
{ percent: 0.25, left: 0, top: 200, opacity: 1 },
{ percent: 0.5, left: 200, top: 400, opacity: 0 },
{ percent: 0.75, left: 400, top: 200, opacity: 1 },
{ percent: 1, left: 200, top: 0, opacity: 0 }
];
var path = path1;
function interpolate(percent, path, property) {
var a = 0;
var b = path.length-1;
for (var i = 0; i < path.length; ++i) {
if (path[i].percent <= percent) {
a = i;
} else {
b = i;
break;
}
}
var percentInSection = (percent - path[a].percent) / (path[b].percent-path[a].percent);
var ret = 0;
if (percentInSection)
ret = (path[b][property] - path[a][property])*percentInSection;
ret += path[a][property];
return ret;
}
var active = 0;
function layout() {
var kids = app.children();
var index = 0;
for (var i in kids) {
if (kids.hasOwnProperty(i)) {
var percent = (0.5 + (index-active)/count) % 1;
kids[i].left = interpolate(percent, path, 'left')-kids[i].width/2;
kids[i].top = interpolate(percent, path, 'top')-kids[i].height/2;
kids[i].opacity = interpolate(percent, path, 'opacity');
index++;
}
}
}
window.setInterval(function () {
active++;
if (active >= count)
active = 0;
layout();
}, 200);
</script>
<script type="text/jump">
MyDelegate @ InputItem {
width: 30
height: 30
backgroundColor: this.mousePressed ? "purple" : "#3C7DC1"
opacity: 0.5
Behavior {
left: "250ms linear";
top: "250ms linear";
opacity: "250ms linear";
}
}
InputItem {
id: view
width: window.innerWidth
height: window.innerHeight
delegate: MyDelegate;
function buildDelegate(j): {
var child = this.createdelegate();
child.modelData = j;
this.addChild(child);
child.initializeBindings();
}
onload: window.app = this;
onactivated: {
window.active++;
if (window.path === window.path1)
window.path = window.path2;
else
window.path = window.path1;
window.layout();
}
}
</script>
</head>
<body onload="init();">
</body>
</html>