diff --git a/controller.js b/controller.js
index 812fb3b..92d60f3 100644
--- a/controller.js
+++ b/controller.js
@@ -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;
\ No newline at end of file
+NumberController.prototype.constructor = NumberController;
+
+
+
+var StringController = function() {
+ this.type = "string";
+ Controller.apply(this, arguments);
+
+};
+StringController.prototype = new Controller();
+StringController.prototype.constructor = StringController;
diff --git a/demo.css b/demo.css
new file mode 100644
index 0000000..e47cedd
--- /dev/null
+++ b/demo.css
@@ -0,0 +1,4 @@
+
+pre {
+display: none;
+}
\ No newline at end of file
diff --git a/demo.html b/demo.html
index 2cb5afb..682b793 100644
--- a/demo.html
+++ b/demo.html
@@ -1,44 +1,48 @@
+
-
-
+
+
+
\ No newline at end of file
diff --git a/gui.css b/gui.css
index 7da8a75..37fcdd3 100644
--- a/gui.css
+++ b/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;
}
\ No newline at end of file
diff --git a/gui.js b/gui.js
index 88c745c..a361fa5 100644
--- a/gui.js
+++ b/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() {
@@ -87,6 +86,14 @@ var GUI = new function() {
console.error("[GUI ERROR] " + str);
}
};
+
+ var construct = function(constructor, args) {
+ function F() {
+ return constructor.apply(this, args);
+ }
+ F.prototype = constructor.prototype;
+ return new F();
+ };
@@ -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;
+ }
};