From 222a82a9a19c94c4e4653b59aeea74d64ca1cb75 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Mon, 24 Jan 2011 03:36:57 -0700 Subject: [PATCH] Added dummy classes for TODO controllers and updated demo/gui css --- controller.js | 23 ++++++++++++++++++--- demo.css | 39 +++++++++++++++++++++++++++++++++--- demo.html | 55 ++++++++++++++++++++++++++++++++++++++++----------- gui.css | 22 ++++++++++++--------- gui.js | 4 ++-- 5 files changed, 115 insertions(+), 28 deletions(-) diff --git a/controller.js b/controller.js index 92d60f3..b59598f 100644 --- a/controller.js +++ b/controller.js @@ -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; diff --git a/demo.css b/demo.css index e47cedd..d46643a 100644 --- a/demo.css +++ b/demo.css @@ -1,4 +1,37 @@ - pre { -display: none; -} \ No newline at end of file +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 } diff --git a/demo.html b/demo.html index 682b793..4cc49bc 100644 --- a/demo.html +++ b/demo.html @@ -2,9 +2,49 @@ + - + + +
+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");
 
-}
-
-
-
-
-
+};
 

 
 
\ No newline at end of file
diff --git a/gui.css b/gui.css
index 37fcdd3..c496792 100644
--- a/gui.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/gui.js b/gui.js
index a361fa5..dd97d78 100644
--- a/gui.js
+++ b/gui.js
@@ -67,11 +67,11 @@ var GUI = new function() {
 		},
 		
 		"boolean": function() {
-			//
+			return construct(BooleanController, arguments);
 		},
 		
 		"function": function() {
-			//
+			return construct(FunctionController, arguments);
 		},
 		
 	};