bungee
Version:
Bungee is a declarative language engine to run inside a browser. The node module contains the offline compiler.
203 lines (164 loc) • 5.82 kB
HTML
<html>
<head>
<title> Bungee </title>
<script type="text/javascript" src="../../bungee.js"></script>
<script type="text/javascript">
// global config
var config = {};
config.normalBackgroundColor = "#3C7DC1";
config.hightlightBackgroundColor = "#36A7DF";
config.downBackgroundColor = "#006B9F";
config.normalTextColor = "white";
config.highlightTextColor = "white";
</script>
<script type="text/jump">
List @ Item {
width: this.childrenWidth
height: this.childrenHeight
spacing: 10
borderColor: "gray"
borderStyle: "solid"
borderWidth: 10
layoutDirection: "horizontal"
function _layout(): {
var kids = this.children();
var sibling = undefined;
for (var i in kids) {
if (kids.hasOwnProperty(i)) {
if (this.layoutDirection === "vertical") {
kids[i].top = sibling ? (this.spacing + sibling.top + sibling.height) : 0;
kids[i].left = 0;
} else {
kids[i].top = 0;
kids[i].left = sibling ? (this.spacing + sibling.left + sibling.width) : 0;
}
sibling = kids[i];
}
}
}
function _setupListeners(): {
var kids = this.children();
var that = this;
this._layout();
for (var i in kids) {
if (kids.hasOwnProperty(i)) {
kids[i].addChanged('width', function () { that._layout() });
kids[i].addChanged('height', function () { that._layout() });
}
}
}
onlayoutDirection: this._layout();
onload: this._setupListeners();
}
Button @ InputItem {
label: "Click me"
hoverEnabled: true
backgroundColor: {
if (this.mousePressed) {
return config.downBackgroundColor
} else if (this.containsMouse) {
return config.hightlightBackgroundColor
} else {
return config.normalBackgroundColor
}
}
width: this.textLabel.textWidth + 100
height: this.textLabel.textHeight + 10
cursor: "default"
Item {
width: this.parent.width
height: this.parent.height
backgroundColor: "white"
opacity: 0.3
}
Text {
id: textLabel
fontSize: "24px"
text: this.parent.label
left: this.parent.width / 2 - this.width / 2
top: this.parent.height / 2 - this.height / 2
color: config.normalTextColor
}
}
IconButton @ InputItem {
icon: ""
hoverEnabled: true
backgroundColor: {
if (this.containsMouse) {
return config.hightlightBackgroundColor
} else {
return config.normalBackgroundColor
}
}
width: 100
height: 50
Animation {
id: animation
target: this.parent
duration: 1000
loops: 3
Step {
percentage: 0
width: this.parent.parent.width
}
Step {
percentage: 50
width: 0
}
Step {
percentage: 70
width: this.parent.parent.width * 1.5
}
Step {
percentage: 100
width: this.parent.parent.width
}
}
Image {
src: "mail.png"
backgroundSize: "contain"
width: this.parent.height
height: this.width
left: this.parent.width / 2 - this.width / 2
top: this.parent.height / 2 - this.height / 2
}
onactivated: {
this.animation.restart();
}
}
</script>
<script type="text/jump">
Window {
List {
IconButton {
}
Button {
label: "Silent Setters"
onactivated: {
// setSilent() sets the value but does not emit the change nor breaks the binding
this.setSilent("height", this.height === 50 ? 100 : 50);
// set() sets the value breaks the binding and adds a new binding
this.set("width", this.width === 200 ? 300 : 200);
}
}
IconButton {
}
IconButton {
}
IconButton {
}
IconButton {
}
IconButton {
}
Button {
label: this.parent.layoutDirection
onactivated: this.parent.layoutDirection = this.parent.layoutDirection === 'horizontal' ? 'vertical' : 'horizontal'
}
}
}
</script>
</head>
<body onload="Bungee.jump();" style="margin: 0">
</body>
</html>