quick
Version:
QuickJS is a declarative language engine to run inside a browser. The node module contains the offline compiler.
149 lines (124 loc) • 4.41 kB
HTML
<html>
<head>
<title> QuickJS </title>
<script type="text/javascript" src="../../quick.js"></script>
<script type="text/jml">
MyDelegate @ InputItem {
top: 0
left: 10
width: this.parent.width - 30
height: 70
backgroundColor: this.mousePressed ? "purple" : "#3C7DC1"
overflow: "hidden"
visibility: "hidden"
opacity: 0
Behavior {
top: "250ms"
height: "250ms"
opacity: "500ms"
}
Text {
id: delegateText
text: this.parent.modelData
color: "white"
fontSize: 24
left: 10
top: this.parent.height/2 - this.textHeight/2
}
InputItem {
left: this.parent.width - this.label.textWidth - 10
top: 10
width: this.label.textWidth
height: this.label.textHeight
onactivated: ^{
var data = this.parent.modelData + " " + Math.floor(Math.random()*100);
this.parent.parent.insertDelegate(this.parent, data);
}^
Text {
id: label
text: "ADD"
color: "white"
}
}
InputItem {
left: this.parent.width - this.label.textWidth - 10
top: this.parent.height - this.label.textHeight - 10
width: this.label.textWidth
height: this.label.textHeight
onactivated: this.parent.parent.removeDelegate(this.parent);
Text {
id: label
text: "DEL"
color: "white"
}
}
}
InputItem {
id: listView
overflow: "scroll"
width: window.innerWidth
height: window.innerHeight
delegate: MyDelegate;
deleteDelay: 1000;
spacing: 10
model: ['Seifenkiste', 'Eisstock', 'Zwiesel', 'Traktor'];
_delegates: [];
function buildDelegate(data): ^{
var child = this.createdelegate();
child.modelData = data;
this.addChild(child);
child.initializeBindings();
return child;
}^
function addDelegate(data): ^{
var child = this.buildDelegate(data);
this._delegates.push(child);
this.layout();
}^
function insertDelegate(pre, data): ^{
var child = this.buildDelegate(data);
for (var i = 0; i < this._delegates.length; ++i) {
if (this._delegates[i] === pre) {
this._delegates.splice(i+1, 0, child);
break;
}
}
this.layout();
}^
function removeDelegate(data): ^{
for (var i = 0; i < this._delegates.length; ++i) {
if (this._delegates[i] === data) {
var that = this;
data.opacity = 0;
data.height = 0;
this._delegates.splice(i, 1);
window.setTimeout(function () {
that.removeChild(data);
}, this.deleteDelay);
break;
}
}
this.layout();
}^
function layout(): ^{
var that = this;
var top = 0;
for (var i = 0; i < this._delegates.length; ++i) {
var d = this._delegates[i];
d.top = top;
d.opacity = 1;
d.visibility = "visible";
top += d.height + this.spacing;
}
}^
onload: ^{
for (var i = 0; i < this.model.length; ++i){
this.addDelegate(this.model[i]);
}
}^
}
</script>
</head>
<body onload="Quick.run();">
</body>
</html>