library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added dummy classes for TODO controllers and updated demo/gui css

Browse Source
This commit is contained in:
George Michael Brower 2011-01-24 03:36:57 -07:00
parent ab86edc849
commit 222a82a9a1
5 changed files with 115 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
controller.js
View File

@ -1,4 +1,4 @@
var Controller = function(object, propertyName) { var Controller = function() {
this.setName = function(n) { this.setName = function(n) {
this.propertyNameElement.innerHTML = n; this.propertyNameElement.innerHTML = n;
@ -24,7 +24,6 @@ var NumberController = function() {
Controller.apply(this, arguments); Controller.apply(this, arguments);
var _this = this; var _this = this;
this.isClicked = false; this.isClicked = false;
@ -86,7 +85,25 @@ NumberController.prototype.constructor = NumberController;
var StringController = function() { var StringController = function() {
this.type = "string"; this.type = "string";
Controller.apply(this, arguments); Controller.apply(this, arguments);
// TODO
}; };
StringController.prototype = new Controller(); StringController.prototype = new Controller();
StringController.prototype.constructor = StringController; StringController.prototype.constructor = StringController;
var BooleanController = function() {
this.type = "boolean";
Controller.apply(this, arguments);
// TODO
};
BooleanController.prototype = new Controller();
BooleanController.prototype.constructor = BooleanController;
var FunctionController = function() {
this.type = "function";
Controller.apply(this, arguments);
// TODO
};
FunctionController.prototype = new Controller();
FunctionController.prototype.constructor = FunctionController;

39
demo.css
View File

@ -1,4 +1,37 @@
pre { pre {
display: none; padding: 10px;
} border: 1px solid #ccc;
max-width: 500px;
}
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun, .opn, .clo { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

55
demo.html
View File

@ -2,9 +2,49 @@
<head> <head>
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" /> <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo.css" media="screen" rel="stylesheet" type="text/css" /> <link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="controller.js"></script> <script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="gui.js"></script> <script type="text/javascript" src="gui.js"></script>
<script id="demo" type="text/javascript">var controllableObject = <script id="demo" type="text/javascript">
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
textProperty: "a string",
booleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
window.onload = function() {
//prettyPrint();
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
.setName("customName");
// Creates a text field
GUI.add(controllableObject, "textProperty");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");
};
</script>
</head>
<body>
<pre id="demo-pre" class="prettyprint">
var controllableObject =
{ {
numberProperty: 20, numberProperty: 20,
constrainedNum: 0, constrainedNum: 0,
@ -18,13 +58,13 @@
window.onload = function() { window.onload = function() {
GUI.start(); GUI.start();
GUI.show(); // collapsed by default
// Creates a number box // Creates a number box
GUI.add(controllableObject, "numberProperty"); GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100).setName("customName"); GUI.add(controllableObject, "constrainedNum", -100, 100)
.setName("customName");
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "textProperty");
@ -35,14 +75,7 @@ window.onload = function() {
// Creates a button // Creates a button
GUI.add(controllableObject, "functionProperty"); GUI.add(controllableObject, "functionProperty");
} };
</script>
</head>
<body>
<pre id="demo-pre">
<script type="text/javascript">
document.getElementById("demo-pre").innerHTML = document.getElementById("demo").innerHTML;
</script>
</pre> </pre>
</body> </body>
</html> </html>

22
gui.css
View File

@ -39,18 +39,22 @@
.guidat-controller { .guidat-controller {
padding: 5px; padding: 5px;
clear: both; height: 23px;
border-left: 4px solid #333; clear: left;
text-align: right; border-bottom: 1px solid #444;
background-color: #111; background-color: #111;
} }
.guidat-controller input {
.guidat-controller.number { float: right;
border-left-color: #f03; clear: both;
border: 0;
padding: 2px;
} }
.guidat-controller.number input[type=number] { .guidat-controller.number input[type=number] {
width: 55px; width: 55px;
} }
@ -59,7 +63,7 @@
} }
.guidat-controller:nth-child(even) { .guidat-controller:nth-child(even) {
background-color: #222; background-color: #1a1a1a;
} }
.guidat-controller:last-child { .guidat-controller:last-child {
@ -70,6 +74,6 @@
} }
.guidat-propertyname { .guidat-propertyname {
float: left; padding: 5px;
margin: 5px; display: inline-block;
} }

4
gui.js
View File

@ -67,11 +67,11 @@ var GUI = new function() {
}, },
"boolean": function() { "boolean": function() {
// return construct(BooleanController, arguments);
}, },
"function": function() { "function": function() {
// return construct(FunctionController, arguments);
}, },
}; };