quick
Version:
QuickJS is a declarative language engine to run inside a browser. The node module contains the offline compiler.
100 lines (79 loc) • 3.41 kB
HTML
<html>
<head>
<title> QuickJS </title>
<script type="text/javascript" src="../../src/quick_dom.js"></script>
<script type="text/javascript" src="../../src/quick.js"></script>
<script type="text/javascript">
var move_right = true;
var step = 5;
var runAnimation = false;
var elem1, elem2;
// animation frame shim
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function advance() {
requestAnimFrame(advance);
if (!runAnimation)
return;
var left = elem1.left;
if (left > 800) {
move_right = false;
}
if (left < 0) {
move_right = true;
}
if (move_right) {
elem1.left = left + step;
elem2.width = elem2.width + step/2;
elem2.scale = (left + step) / 800.;
} else {
elem1.left = left - step;
elem2.width = elem2.width - step/2;
elem2.scale = (left - step) / 800.;
}
}
function init () {
var elem = new Quick.Element('elem');
elem2 = new Quick.Item('elem2', elem);
elem2.addProperty('left', function() { return 800-this.elem1.left/1.5; });
elem2.addProperty('top', function() { return this.elem1.left/2.0; });
elem2.addProperty('opacity', function() { return this.elem1.width/100; });
elem2.addProperty('width', 50);
elem2.addProperty('height', 100);
elem2.addProperty('backgroundColor', '#00ff00');
elem2.addEventHandler('onmouseover', function () { console.log("onmouseover handler: " + this.elem1.left); });
elem1 = new Quick.Element('elem1', elem);
elem1.addProperty('left', function () { return 100; });
elem1.addProperty('width', function () { return this.elem2.width/2.0; });
elem1.addProperty('height', 100);
elem1.addProperty('backgroundColor', '#00ffff');
var elem3 = new Quick.Text('elem3', elem);
elem3.addProperty('width', 100);
elem3.addProperty('height', 30);
elem3.addProperty('left', 20);
elem3.addProperty('top', 20);
elem3.addProperty('text', function () { return this.elem2.width > 150 ? 'foo' : 'bar'; });
var button = new Quick.Button('button', elem);
button.addProperty('width', 100);
button.addProperty('height', 20);
button.addProperty('left', 200);
button.addProperty('top', 20);
button.addProperty('text', "Toggle");
button.addEventHandler('onclick', function () { runAnimation = !runAnimation; });
Quick.Engine.addElement(elem);
elem.initializeBindings();
advance();
}
</script>
</head>
<body onload="init();">
</body>
</html>