quick
Version:
QuickJS is a declarative language engine to run inside a browser. The node module contains the offline compiler.
92 lines (74 loc) • 2.31 kB
HTML
<html>
<head>
<title> QuickJS </title>
<script type="text/javascript" src="../../quick.js"></script>
<script type="text/jml">
Item {
id: outerTextItem;
backgroundColor: "lightgray";
width: this.textItem.textWidth * 2;
height: this.textItem.textHeight + 20;
Text {
id: textItem;
left: (this.parent.width / 2.0) - (this.textWidth / 2.0)
top: (this.parent.height / 2.0) - (this.textHeight / 2.0)
backgroundColor: "gray";
textColor: "white";
text: "This is a text element";
}
}
</script>
<script type="text/jml">
InputItem {
id: elem
top: 0;
left: 0;
width: window.innerWidth;
height: window.innerHeight;
Image {
id: image1;
top: 10;
left: 10;
width: 128;
height: 128;
}
Image {
top: 100;
left: 200;
width: 128;
height: 128;
src: "url('weather-clouds.png')";
scale: this.parent.mouseAbsX / 700;
}
Image {
top: 100;
left: 400;
width: 128;
height: 128;
src: "weather-few-clouds-night.png";
scale: 2.5 - (this.parent.mouseAbsY / 400);
}
InputItem {
id: child
width: 400;
height: 200;
left: 500;
top: 100;
backgroundColor: this.mousePressed ? "#ff00ff" : "#770077";
Text {
text: "move me"
color: "white"
}
onmousemove: ^{
if (this.mousePressed) {
this.left = this.mouseAbsX - this.mouseRelStartX;
this.top = this.mouseAbsY - this.mouseRelStartY;
}
}^
}
}
</script>
</head>
<body onload="Quick.run();">
</body>
</html>