mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Added dummy classes for TODO controllers and updated demo/gui css
This commit is contained in:
George Michael Brower
parent
ab86edc849
commit
222a82a9a1
@ -1,4 +1,4 @@
|
||||
var Controller = function(object, propertyName) {
|
||||
var Controller = function() {
|
||||
|
||||
this.setName = function(n) {
|
||||
this.propertyNameElement.innerHTML = n;
|
||||
@ -24,7 +24,6 @@ var NumberController = function() {
|
||||
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.isClicked = false;
|
||||
@ -86,7 +85,25 @@ NumberController.prototype.constructor = NumberController;
|
||||
var StringController = function() {
|
||||
this.type = "string";
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
// TODO
|
||||
};
|
||||
StringController.prototype = new Controller();
|
||||
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
39
demo.css
@ -1,4 +1,37 @@
|
||||
|
||||
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
55
demo.html
@ -2,9 +2,49 @@
|
||||
<head>
|
||||
<link href="gui.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="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,
|
||||
constrainedNum: 0,
|
||||
@ -18,13 +58,13 @@
|
||||
window.onload = function() {
|
||||
|
||||
GUI.start();
|
||||
GUI.show(); // collapsed by default
|
||||
|
||||
// Creates a number box
|
||||
GUI.add(controllableObject, "numberProperty");
|
||||
|
||||
// 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
|
||||
GUI.add(controllableObject, "textProperty");
|
||||
@ -35,14 +75,7 @@ window.onload = function() {
|
||||
// Creates a button
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
22
gui.css
22
gui.css
@ -39,18 +39,22 @@
|
||||
|
||||
.guidat-controller {
|
||||
padding: 5px;
|
||||
clear: both;
|
||||
border-left: 4px solid #333;
|
||||
text-align: right;
|
||||
height: 23px;
|
||||
clear: left;
|
||||
border-bottom: 1px solid #444;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.guidat-controller.number {
|
||||
border-left-color: #f03;
|
||||
.guidat-controller input {
|
||||
float: right;
|
||||
clear: both;
|
||||
border: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
.guidat-controller.number input[type=number] {
|
||||
width: 55px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -59,7 +63,7 @@
|
||||
}
|
||||
|
||||
.guidat-controller:nth-child(even) {
|
||||
background-color: #222;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.guidat-controller:last-child {
|
||||
@ -70,6 +74,6 @@
|
||||
}
|
||||
|
||||
.guidat-propertyname {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user