Merge branch 'master' of github.com:jonobr1/GUI-DAT

This commit is contained in:
jonobr1 2011-01-24 13:22:34 -08:00
commit a9b391e971
4 changed files with 42 additions and 19 deletions

View File

@ -16,7 +16,8 @@ var BooleanController = function() {
input.checked = !input.checked; // counteracts default.
}, false);
this.domElement.style.cursor = 'pointer';
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
this.domElement.appendChild(input);
};

View File

@ -2,13 +2,11 @@ var FunctionController = function() {
this.type = "function";
var _this = this;
Controller.apply(this, arguments);
var input = document.createElement('input');
input.setAttribute('type', 'submit');
this.domElement.addEventListener('click', function() {
_this.object[_this.propertyName].call(_this.object);
}, false);
this.domElement.style.cursor = "pointer";
this.domElement.appendChild(input);
this.propertyNameElement.style.cursor = "pointer";
};
FunctionController.prototype = new Controller();
FunctionController.prototype.constructor = FunctionController;

View File

@ -17,6 +17,7 @@ var controllableObject =
textProperty: "a string",
anotherTextProperty: "another string",
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
@ -40,6 +41,8 @@ window.onload = function() {
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a checkbox
GUI.add(controllableObject, "anotherBooleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");

43
gui.css
View File

@ -20,6 +20,7 @@
#guidat-controllers {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: #eee;
}
@ -41,31 +42,50 @@
padding: 5px;
height: 23px;
clear: left;
border-bottom: 1px solid #444;
border-bottom: 1px solid #222;
background-color: #111;
}
.guidat-controller.boolean:hover,
.guidat-controller.function:hover{
background-color: #000;
}
.guidat-controller input {
float: right;
outline: none;
clear: both;
border: 0;
padding: 2px;
}
.guidat-controller.number input[type=number] {
width: 55px;
.guidat-controller.number {
border-left: 5px solid #00aeff ;
}
.guidat-controller.string {
border-left-color: #0af;
border-left: 5px solid #1ed36f;
}
.guidat-controller.string input {
border: 0;
text-align: right;
color: #1ed36f;
background-color: rgba(0,0,0,0);
}
.guidat-controller.boolean {
border-left: 5px solid #54396e;
}
.guidat-controller.function {
border-left: 5px solid #e61d5f;
}
.guidat-controller.number input[type=number] {
width: 45px;
}
.guidat-controller:nth-child(even) {
background-color: #1a1a1a;
.guidat-controller.boolean input {
margin-top: 6px;
}
.guidat-controller:last-child {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@ -75,5 +95,6 @@ padding: 2px;
.guidat-propertyname {
padding: 5px;
cursor: default;
display: inline-block;
}