quick
Version:
QuickJS is a declarative language engine to run inside a browser. The node module contains the offline compiler.
222 lines (177 loc) • 6.16 kB
HTML
<html>
<head>
<title> QuickJS </title>
<script type="text/javascript" src="../../quick.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/jml">
List @ Item {
width: this.childrenWidth
height: this.childrenHeight
spacing: 10
layoutDirection: "vertical"
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: "Demo"
src: ""
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"
Animation {
id: animation
target: this.parent
duration: 2000
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
}
}
Animation {
id: hoverAnimation
target: this.parent
duration: 1000
Step {
percentage: 0
background-color: config.hightlightBackgroundColor
}
Step {
percentage: 25
background-color: "pink"
}
Step {
percentage: 50
background-color: "silver"
}
Step {
percentage: 75
background-color: "cyan"
}
Step {
percentage: 100
width: config.hightlightBackgroundColor
}
}
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
}
onmouseover: this.hoverAnimation.restart()
onactivated: ^{
this.animation.restart();
window.document.getElementById("demoArea").src = this.src;
}^
}
</script>
<script type="text/jml">
Window {
top: 0
left: 0
// TODO add quick sort for list!!!
List {
Button {
label: "Types"
src: "types.htm"
}
Button {
label: "Pin Entry"
src: "pin.htm"
}
Button {
label: "Animation"
src: "animation.htm"
}
Button {
label: "Bounding Rect"
src: "boundingrect.htm"
}
Button {
label: "Delegates"
src: "delegate.htm"
}
Button {
label: "Widgets"
src: "widgets.htm"
}
Button {
label: "Finger tracking"
src: "tracking.html"
}
Button {
label: "Path"
src: "path.html"
}
Button {
label: "A bit of everything"
src: "demo.htm"
}
}
}
</script>
</head>
<body onload="Quick.run();" style="padding: 0; margin: 0; width: 100%; height: 100%">
<div style="margin: 0; margin-left: 300px">
<iframe id="demoArea" src="demo.htm" style="background-color: white; border-width: 0; margin: auto; width: 99%; height: 99%"></iframe>
</div>
</body>
</html>