bungee
Version:
Bungee is a declarative language engine to run inside a browser. The node module contains the offline compiler.
151 lines (125 loc) • 4.46 kB
HTML
<html>
<head>
<title> Bungee </title>
<link rel="stylesheet" href="normalize.css">
<script type="text/javascript" src="../../bungee.js"></script>
<script type="text/jump">
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="Bungee.jump();">
</body>
</html>