quick
Version:
QuickJS is a declarative language engine to run inside a browser. The node module contains the offline compiler.
151 lines (117 loc) • 4.39 kB
HTML
<html>
<head>
<title> QuickJS </title>
<script type="text/javascript" src="../../quick.js"></script>
<script>
var count = 20;
function init() {
Quick.run();
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 path3 = [
{ percent: 0, left: 0, top: -50, zIndex: 0, _color: 80 },
{ percent: 0.4, left: 0, top: 50, zIndex: 10, _color: 150 },
{ percent: 1, left: 0, top: 700, zIndex: 100, _color: 255 },
];
var path = path3;
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 = Math.floor(interpolate(percent, path, 'left'));
kids[i].top = Math.floor(interpolate(percent, path, 'top'));
kids[i].zIndex = Math.floor(interpolate(percent, path, 'zIndex'));
kids[i]._color = Math.floor(interpolate(percent, path, '_color'));
index++;
}
}
}
window.setInterval(function () {
active--;
if (active >= count)
active = 0;
layout();
}, 500);
</script>
<script type="text/jml">
MyDelegate @ Item {
width: 400
height: 700
_color: 0
backgroundColor: "rgb("+ this._color +", "+ this._color +", "+ this._color +")"
borderColor: "black"
borderWidth: 1
borderStyle: "solid"
zIndex: 100
Behavior {
left: 250;
top: 250;
}
Text {
text: this.parent.modelData;
}
}
InputItem {
id: view
width: window.innerWidth
height: 700
overflow: "hidden"
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>