merged css3 transition changes

controllers/controller.boolean.js

@@ -1,7 +1,7 @@
-var BooleanController = function() {
+GUI.BooleanController = function() {
 
 	this.type = "boolean";
-	Controller.apply(this, arguments);
+	GUI.Controller.apply(this, arguments);
 
 	var _this = this;
     var input = document.createElement('input');
@@ -32,9 +32,8 @@ var BooleanController = function() {
 				val = eval(val);
 			} catch (e) {}
 		}
-		return Controller.prototype.setValue.call(this, val);
+		return GUI.Controller.prototype.setValue.call(this, val);
     }
 
 };
-BooleanController.prototype = new Controller();
+GUI.extendController(GUI.BooleanController);
-BooleanController.prototype.constructor = BooleanController;

controllers/controller.function.js

@@ -1,12 +1,11 @@
-var FunctionController = function() {
+GUI.FunctionController = function() {
 	this.type = "function";
 	var that = this;
-	Controller.apply(this, arguments);
+	GUI.Controller.apply(this, arguments);
 	this.domElement.addEventListener('click', function() {
 		that.object[that.propertyName].call(that.object);
 	}, false);
 	this.domElement.style.cursor = "pointer";
 	this.propertyNameElement.style.cursor = "pointer";
 };
-FunctionController.prototype = new Controller();
+GUI.extendController(GUI.FunctionController);
-FunctionController.prototype.constructor = FunctionController;

controllers/controller.js

@@ -1,4 +1,4 @@
-var Controller = function() {
+GUI.Controller = function() {
 
 	this.parent = arguments[0];
     this.object = arguments[1];
@@ -18,29 +18,29 @@ var Controller = function() {
     
 };
 
-Controller.prototype.changeFunction = null;
+GUI.Controller.prototype.changeFunction = null;
 
-Controller.prototype.name = function(n) {
+GUI.Controller.prototype.name = function(n) {
 	this.propertyNameElement.innerHTML = n;
 	return this;
 };
 
-Controller.prototype.reset = function() {
+GUI.Controller.prototype.reset = function() {
 	this.setValue(this.initialValue);
 	return this;
 };
 
-Controller.prototype.listen = function() {
+GUI.Controller.prototype.listen = function() {
 	this.parent.listenTo(this);
 	return this;
 }
 
-Controller.prototype.unlisten = function() {
+GUI.Controller.prototype.unlisten = function() {
 	this.parent.unlistenTo(this); // <--- hasn't been tested yet
 	return this;
 }
     
-Controller.prototype.setValue = function(n) {
+GUI.Controller.prototype.setValue = function(n) {
 	this.object[this.propertyName] = n;
 	if (this.changeFunction != null) {
 		this.changeFunction.call(this, n);
@@ -51,13 +51,13 @@ Controller.prototype.setValue = function(n) {
 	return this;
 }
     
-Controller.prototype.getValue = function() {
+GUI.Controller.prototype.getValue = function() {
 	return this.object[this.propertyName];
 }
 
-Controller.prototype.updateDisplay = function() {}
+GUI.Controller.prototype.updateDisplay = function() {}
     
-Controller.prototype.onChange = function(fnc) {
+GUI.Controller.prototype.onChange = function(fnc) {
 	this.changeFunction = fnc;
 	return this;
 }

controllers/controller.number.js

@@ -1,8 +1,8 @@
-var NumberController = function() {
+GUI.NumberController = function() {
 
 	this.type = "number";
     
-    Controller.apply(this, arguments);
+    GUI.Controller.apply(this, arguments);
     
     var _this = this;
     
@@ -38,7 +38,7 @@ var NumberController = function() {
     var slider;
     
     if (min != undefined && max != undefined) {
-    	slider = new Slider(this, min, max, step, this.getValue());
+    	slider = new GUI.Slider(this, min, max, step, this.getValue());
     	this.domElement.appendChild(slider.domElement);
     }
     
@@ -121,7 +121,7 @@ var NumberController = function() {
     		val = max;
     	}
     	
-    	return Controller.prototype.setValue.call(this, val);
+    	return GUI.Controller.prototype.setValue.call(this, val);
     	
     }
     
@@ -131,5 +131,4 @@ var NumberController = function() {
 	}
 };
 
-NumberController.prototype = new Controller();
+GUI.extendController(GUI.NumberController);
-NumberController.prototype.constructor = NumberController;

controllers/controller.string.js

@@ -1,9 +1,9 @@
-var StringController = function() {
+GUI.StringController = function() {
 
 	this.type = "string";
 	
 	var _this = this;
-    Controller.apply(this, arguments);
+    GUI.Controller.apply(this, arguments);
     
     var input = document.createElement('input');
     
@@ -30,5 +30,4 @@ var StringController = function() {
     
 };
 
-StringController.prototype = new Controller();
+GUI.extendController(GUI.StringController);
-StringController.prototype.constructor = StringController;

controllers/slider.js

@@ -1,4 +1,4 @@
-var Slider = function(numberController, min, max, step, initValue) {
+GUI.Slider = function(numberController, min, max, step, initValue) {
 	
 	var min = min;
 	var max = max;

demo/demo.css

@@ -89,6 +89,7 @@ div.expanded h2:before, div.collapsed h2:before {
 	font-size: 9px;
 	font-family: Monaco, monospace;
 }
+<<<<<<< HEAD
 
 div.collapsable {
 	overflow: hidden;
@@ -108,9 +109,16 @@ div.collapsed .collapsable {
 	height: 0;
 }
 div.expanded .collapsable {
+=======
+/* Can't seem to get this transition to work :( */
+div.collapsable {
+>>>>>>> 11325bbf42fee0d080678ae5a55a8a0eeab70925
 	overflow: hidden;
 	clear: both;
-	height: auto;
+	height: 0px;
+	-moz-transition: height .2s linear;
+	-webkit-transition: height .2s linear;
+	transition: height .2s linear;
 }
 
 div.expanded { cursor: pointer; }
@@ -178,10 +186,12 @@ a:active {
 }
 
 footer { 
+margin-top: 20px;
 	background-color: #eee;
 	width: 510px;
 	padding: 10px;
 	clear: both;
+	color: #444;
 	
 }
 

gui-bare.css

@@ -1,26 +0,0 @@
-#guidat { 
-	position: fixed;
-	width: 250px;
-	z-index: 200;
-	top: 0;
-	left: 100%;
-	margin-left: -270px;
-}
-
-#guidat-controllers { 
-	height: 300px;
-	overflow-y: auto;
-}
-
-#guidat-toggle { 
-	cursor: pointer;
-}
-
-.guidat-controller { 
-	clear: both;
-}
-
-.guidat-controller input { 
-	float: right;
-	clear: both;
-}

gui.css

@@ -100,7 +100,7 @@ a.guidat-toggle:hover {
 	border: 0;
 	color: #1ed36f;
 	margin-right: 2px;
-width: 148px;
+	width: 148px;
 }
 
 .guidat-controller.boolean { 

gui.js

@@ -17,9 +17,6 @@ var GUI = function() {
 	
 	var curControllerContainerHeight = 0;
 	
-	// How big we get when we open
-
-	
 	var _this = this;
 	
 	var open = false;
@@ -28,6 +25,8 @@ var GUI = function() {
 	// Prevents checkForOverflow bug in which loaded gui appearance
 	// settings are not respected by presence of scrollbar.
 	var explicitOpenHeight = false;
+	
+	// How big we get when we open
 	var openHeight;
 	
 	var name;
@@ -42,7 +41,7 @@ var GUI = function() {
 	var controllerContainer = document.createElement('div');
 	controllerContainer.setAttribute('class', 'guidat-controllers');
 	
-	// Firefox hack for horizontal scrolling
+	// Firefox hack to prevent horizontal scrolling
 	controllerContainer.addEventListener('DOMMouseScroll', function(e) {
 		
 		var scrollAmount = this.scrollTop;
@@ -83,17 +82,15 @@ var GUI = function() {
 		
 		var dmy = my - pmy;
 				
-		
+		if (!open) { 
-	if (!open) { 
+			if (dmy > 0) {
-		if (dmy > 0) {
+				open = true;
-			open = true;
+				curControllerContainerHeight = openHeight = 1;
-			curControllerContainerHeight = openHeight = 1;
+				toggleButton.innerHTML = name || "Hide Controls";
-			toggleButton.innerHTML = name || "Hide Controls";
+			} else {
-		} else {
+				return;
-			return;
+			}
 		}
-	}
-
 		
 		// TODO: Flip this if you want to resize to the left.
 		var dmx = pmx - mx;
@@ -260,13 +257,6 @@ var GUI = function() {
 	
 	this.autoListen = true;
 
-	var handlerTypes = {
-		"number": NumberController,
-		"string": StringController,
-		"boolean": BooleanController,
-		"function": FunctionController
-	};
-
 	var alreadyControlled = function(object, propertyName) {
 		for (var i in controllers) {
 			if (controllers[i].object == object &&
@@ -362,14 +352,13 @@ var GUI = function() {
 		} else {
 			controllerContainer.style.overflowY = "hidden";
 		}	
-		// console.log(controllerHeight, openHeight);
 	}
 	
-	var addHandlers = {
+	var handlerTypes = {
-		"number": NumberController,
+		"number": GUI.NumberController,
-		"string": StringController,
+		"string": GUI.StringController,
-		"boolean": BooleanController,
+		"boolean": GUI.BooleanController,
-		"function": FunctionController
+		"function": GUI.FunctionController
 	};
 	
 	var alreadyControlled = function(object, propertyName) {
@@ -391,7 +380,7 @@ var GUI = function() {
     };
 
 	this.reset = function() {
-		//
+		// TODO
 	}
 
 	// GUI ... GUI
@@ -486,10 +475,8 @@ GUI.saveURL = function() {
 
 GUI.scrollTop = -1;
 
-// TODO: Not working in FF.
 GUI.load = function(saveString) {
 
-
 	//GUI.savedAppearanceVars = [];
 	var vals = saveString.split(",");
 	var numGuis = parseInt(vals[0]);
@@ -500,6 +487,7 @@ GUI.load = function(saveString) {
 	}
 	
 	GUI.savedValues = vals.splice(2, vals.length);
+	
 };
 
 GUI.savedValues = [];
@@ -617,7 +605,7 @@ GUI.constrain = function (v, o1, o2) {
 
 GUI.error = function(str) {
 	if (typeof console.error == 'function') {
-		console.GUI.error("[GUI ERROR] " + str);
+		console.error("[GUI ERROR] " + str);
 	}
 };
 
@@ -626,4 +614,9 @@ GUI.roundToDecimal = function(n, decimals) {
 	return Math.round(n*t)/t;
 }
 
+GUI.extendController = function(clazz) {
+	clazz.prototype = new GUI.Controller();
+	clazz.prototype.constructor = clazz;
+}
+
 if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));

index.html

@@ -36,17 +36,12 @@
 
                         prettyPrint();
 
-
                         var fizzyText = new FizzyText("gui-dat");
 
                         var gui = new GUI();
-                        var gui2 = new GUI();
-
 						
                         // Text field
                         gui.add(fizzyText, "message");
-						gui2.add(window, "onload");
-
                         // Sliders with min and max
                         gui.add(fizzyText, "maxSize", 0.5, 7);
                         gui.add(fizzyText, "growthSpeed", 0.01, 1);
@@ -61,9 +56,6 @@
                         // Fires a function called "explode"
                         gui.add(fizzyText, "explode").name("Explode!");    // Specify a custom name.
                         
-                        gui.add(GUI, "showSaveString");
-                        gui.add(GUI, "saveURL");
-                        
 
 						// Javascript for documentation
 						getCollapsables();
@@ -77,10 +69,18 @@
 					
 					if (this.className === 'collapsed') {
 						this.className = 'expanded';
+<<<<<<< HEAD
 						collapsable.style.height = wrapper.clientHeight + 'px';
 					} else {
 						this.className = 'collapsed';
 						collapsable.style.height = '0px';
+=======
+						var children = this.childNodes;
+						this.childNodes[3].style.height = 'auto';
+					} else {
+						this.className = 'collapsed';
+						this.childNodes[3].style.height = '0px';
+>>>>>>> 11325bbf42fee0d080678ae5a55a8a0eeab70925
 					}
 				}
 				
@@ -252,7 +252,7 @@ gui.add(obj, "changingProperty").listen();
 
 // Make your own loop
 setInterval(function() {
-		gui.listen(); // updates values you've marked with listen()
+	gui.listen(); // updates values you've marked with listen()
 }, 1000 / 60);</pre>
 
 		    	<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
@@ -264,7 +264,7 @@ gui.add(obj, "properties");
 
 // Make your own loop
 setInterval(function() {
-		gui.listenAll(); // updates ALL values managed by this gui
+	gui.listenAll(); // updates ALL values managed by this gui
 }, 1000 / 60);</pre>
 			</div>
 		</div>
@@ -300,7 +300,11 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
 		</div>
     </div>
 
+<<<<<<< HEAD
 	<div class="collapsed">
+=======
+	<div class="collapsed last">
+>>>>>>> 11325bbf42fee0d080678ae5a55a8a0eeab70925
 	    <h2 class="section">Pro tips.</h2>
 		<div class="collapsable">
 			<div>