mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Changes to gui.css
This commit is contained in:
George Michael Brower
commit
ab86edc849
@ -1,32 +1,44 @@
|
||||
var Controller = function(object, propertyName) {
|
||||
|
||||
this.setName = function(n) {
|
||||
this.propertyNameElement.innerHTML = n;
|
||||
}
|
||||
this.domElement = document.createElement('div');
|
||||
this.domElement.setAttribute('class', 'guidat-controller');
|
||||
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
|
||||
|
||||
this.object = arguments[0];
|
||||
this.propertyName = arguments[1];
|
||||
|
||||
this.propertyNameElement = document.createElement('span');
|
||||
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
|
||||
this.propertyNameElement.innerHTML = arguments[1];
|
||||
this.setName(this.propertyName);
|
||||
this.domElement.appendChild(this.propertyNameElement);
|
||||
|
||||
|
||||
};
|
||||
|
||||
// Only works on the last one
|
||||
var NumberController = function() {
|
||||
|
||||
this.type = "number";
|
||||
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.isClicked = false;
|
||||
this.py = this.y = 0;
|
||||
// TODO pass argument to inc
|
||||
this.inc = 0;
|
||||
this.button;
|
||||
this.inc = 0; // TODO pass argument to inc
|
||||
|
||||
// Get min and max
|
||||
(arguments[2] != null) ? this.min = arguments[2] : this.min = null;
|
||||
(arguments[3] != null) ? this.max = arguments[3] : this.max = null;
|
||||
|
||||
this.button = document.createElement('input');
|
||||
this.button.setAttribute('id', this.propertyName);
|
||||
this.button.setAttribute('type', 'number');
|
||||
this.button.setAttribute('value', this.y);
|
||||
this.button.setAttribute('value', this.inc);
|
||||
this.domElement.appendChild(this.button);
|
||||
|
||||
this.button.onmousedown = function(e) {
|
||||
@ -43,13 +55,38 @@ var NumberController = function() {
|
||||
_this.y = e.offsetY;
|
||||
var dy = _this.y - _this.py;
|
||||
|
||||
if(dy > 0)
|
||||
_this.button.setAttribute('value', _this.inc++);
|
||||
else
|
||||
_this.button.setAttribute('value', _this.inc--);
|
||||
if(dy > 0) {
|
||||
if(_this.max != null)
|
||||
(_this.inc >= _this.max) ? _this.inc = _this.max : _this.inc++;
|
||||
else
|
||||
_this.inc++;
|
||||
} else if(dy < 0) {
|
||||
|
||||
if(_this.min != null)
|
||||
(_this.inc <= _this.min) ? _this.inc = _this.min : _this.inc--;
|
||||
else
|
||||
_this.inc--;
|
||||
}
|
||||
|
||||
_this.button.setAttribute('value', _this.inc);
|
||||
}
|
||||
};
|
||||
|
||||
this.__defineSetter__("position", function(val) {
|
||||
_this.inc = val;
|
||||
_this.button.setAttribute('value', _this.inc);
|
||||
});
|
||||
};
|
||||
|
||||
NumberController.prototype = new Controller();
|
||||
NumberController.prototype.constructor = NumberController;
|
||||
|
||||
|
||||
|
||||
var StringController = function() {
|
||||
this.type = "string";
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
};
|
||||
StringController.prototype = new Controller();
|
||||
StringController.prototype.constructor = StringController;
|
||||
|
||||
52
demo.html
52
demo.html
@ -1,44 +1,48 @@
|
||||
<html>
|
||||
<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="controller.js"></script>
|
||||
<script type="text/javascript" src="gui.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var controllableObject =
|
||||
{
|
||||
numberProperty: 20,
|
||||
anotherNumberProperty: 0,
|
||||
textProperty: "a string",
|
||||
booleanProperty: false,
|
||||
functionProperty: function() {
|
||||
alert("I am a function!");
|
||||
}
|
||||
};
|
||||
<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() {
|
||||
|
||||
GUI.start();
|
||||
GUI.start();
|
||||
GUI.show(); // collapsed by default
|
||||
|
||||
// Creates a number box
|
||||
GUI.add(controllableObject, "numberProperty");
|
||||
// Creates a number box
|
||||
GUI.add(controllableObject, "numberProperty");
|
||||
|
||||
// Creates a slider (min, max)
|
||||
GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
|
||||
// Creates a slider (min, max)
|
||||
GUI.add(controllableObject, "constrainedNum", -100, 100).setName("customName");
|
||||
|
||||
// Creates a text field
|
||||
GUI.add(controllableObject, "textProperty");
|
||||
// Creates a text field
|
||||
GUI.add(controllableObject, "textProperty");
|
||||
|
||||
// Creates a checkbox
|
||||
GUI.add(controllableObject, "booleanProperty");
|
||||
// Creates a checkbox
|
||||
GUI.add(controllableObject, "booleanProperty");
|
||||
|
||||
// Creates a button
|
||||
GUI.add(controllableObject, "functionProperty");
|
||||
// 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>
|
||||
27
gui.css
27
gui.css
@ -1,5 +1,6 @@
|
||||
#guidat {
|
||||
font: 12px Helvetica, Arial, 'sans-serif';
|
||||
font: 9px Monaco, monospace;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
z-index: 200;
|
||||
@ -25,7 +26,6 @@
|
||||
#guidat-toggle {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
text-align: center;
|
||||
@ -39,17 +39,31 @@
|
||||
|
||||
.guidat-controller {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
clear: both;
|
||||
border-left: 4px solid #333;
|
||||
text-align: right;
|
||||
background-color: #fff;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.guidat-controller.number {
|
||||
border-left-color: #f03;
|
||||
}
|
||||
|
||||
.guidat-controller.number input[type=number] {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
|
||||
.guidat-controller.string {
|
||||
border-left-color: #0af;
|
||||
}
|
||||
|
||||
.guidat-controller:nth-child(even) {
|
||||
background-color: #E1F9FF;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.guidat-controller:last-child {
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
@ -58,5 +72,4 @@
|
||||
.guidat-propertyname {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
36
gui.js
36
gui.js
@ -52,19 +52,18 @@ var GUI = new function() {
|
||||
controllerContainer.appendChild(controllerObject.domElement);
|
||||
registeredProperties.push([object, propertyName, controllerObject]);
|
||||
|
||||
return controllerObject;
|
||||
|
||||
}
|
||||
|
||||
var addHandlers = {
|
||||
|
||||
"number": function() {
|
||||
|
||||
return new NumberController(arguments);
|
||||
|
||||
// return n.button;
|
||||
return construct(NumberController, arguments);
|
||||
},
|
||||
|
||||
"string": function() {
|
||||
//
|
||||
return construct(StringController, arguments);
|
||||
},
|
||||
|
||||
"boolean": function() {
|
||||
@ -88,6 +87,14 @@ var GUI = new function() {
|
||||
}
|
||||
};
|
||||
|
||||
var construct = function(constructor, args) {
|
||||
function F() {
|
||||
return constructor.apply(this, args);
|
||||
}
|
||||
F.prototype = constructor.prototype;
|
||||
return new F();
|
||||
};
|
||||
|
||||
|
||||
|
||||
// GUI ... GUI
|
||||
@ -132,18 +139,25 @@ var GUI = new function() {
|
||||
|
||||
if (open) {
|
||||
|
||||
domElement.style.marginTop = -domElementMarginTop+"px";
|
||||
toggleButton.innerHTML = "Show Controls";
|
||||
open = false;
|
||||
this.hide();
|
||||
|
||||
} else {
|
||||
|
||||
domElement.style.marginTop = 0+"px";
|
||||
toggleButton.innerHTML = "Hide Controls";
|
||||
open = true;
|
||||
this.show();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.show = function() {
|
||||
domElement.style.marginTop = 0+"px";
|
||||
toggleButton.innerHTML = "Hide Controls";
|
||||
open = true;
|
||||
}
|
||||
|
||||
this.hide = function() {
|
||||
domElement.style.marginTop = -domElementMarginTop+"px";
|
||||
toggleButton.innerHTML = "Show Controls";
|
||||
open = false;
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user