dat.gui/index.html

80 lines
1.9 KiB
HTML
Raw Normal View History

2014-08-14 21:50:51 +00:00
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="components/platform/platform.js"></script>
2014-08-15 02:21:38 +00:00
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link rel="import" href="elements/number-controller.html">
<link rel="import" href="elements/gui-panel.html">
<link rel="import" href="elements/gui-row.html">
2014-08-14 21:50:51 +00:00
</head>
2014-08-15 02:21:38 +00:00
<body touch-action="auto">
2014-08-14 21:50:51 +00:00
<!-- Added via DOM -->
2014-08-15 02:21:38 +00:00
<gui-panel>
<gui-row name="Number">
<gui-number></gui-number>
</gui-row>
<gui-row name="Number Controller">
<gui-number value="5000" min="0" max="10000"></gui-number>
</gui-row>
<gui-row name="Straddle Zero">
<gui-number min="-1" max="1" value="0"></gui-number>
</gui-row>
<gui-row name="Weird Range">
<gui-number min="-1" max="2" value="0"></gui-number>
</gui-row>
<gui-row name="Negative">
<gui-number min="-1" max="0" value="0"></gui-number>
</gui-row>
</gui-panel>
2014-08-14 21:50:51 +00:00
<script>
2014-08-15 02:21:38 +00:00
var object = { "x": 0 };
2014-08-14 21:50:51 +00:00
2014-08-15 02:21:38 +00:00
document.addEventListener("polymer-ready",function() {
2014-08-14 21:50:51 +00:00
// Added via JavaScript
var test1 = new NumberController();
test1.min = 0;
test1.max = 60;
test1.value = 50;
2014-08-15 02:21:38 +00:00
// document.body.appendChild( test1 );
var test2 = new NumberController();
test2.object = object
test2.property = "x";
2014-08-14 21:50:51 +00:00
Object.observe( object, function(changes) {
changes.forEach( function( c ) {
2014-08-15 02:21:38 +00:00
if ( c.name == "x" ) {
console.log( "object.x was changed to " + c.object.x, typeof c.object.x );
2014-08-14 21:50:51 +00:00
}
} );
} );
2014-08-15 02:21:38 +00:00
// document.body.appendChild( test2 );
// window.test2 = test2;
2014-08-14 21:50:51 +00:00
});
</script>
</body>
</html>