Adjusted baseline for animated graphic on demo page

controllers/color.js

@@ -0,0 +1,19 @@
+
+
+var rgb = function(r, g, b, a) {
+	var a = a || 255;
+	return ~~ a << 32 ^ ~~ r << 16 ^ ~~ g << 8 ^ ~~ b;
+}
+var hsv = function(h, s, v) {
+
+}
+var red = function(color) {
+
+}
+var 
+var hex = function(color) {
+	return '#'+color.toString(16);
+}
+
+
+console.log(hex(rgb(0, 0, 255, 255)));

controllers/controller.boolean.js

@@ -33,7 +33,7 @@ GUI.BooleanController = function() {
             } catch (e) {}
         }
         return GUI.Controller.prototype.setValue.call(this, val);
-    }
+    };
 
 };
 GUI.extendController(GUI.BooleanController);

controllers/controller.function.js

@@ -25,6 +25,5 @@ GUI.FunctionController = function() {
         }
         _this.object[_this.propertyName].call(_this.object);
     };
-	
 };
 GUI.extendController(GUI.FunctionController);

controllers/controller.js

@@ -34,12 +34,12 @@ GUI.Controller.prototype.reset = function() {
 GUI.Controller.prototype.listen = function() {
     this.parent.listenTo(this);
     return this;
-}
+};
 
 GUI.Controller.prototype.unlisten = function() {
     this.parent.unlistenTo(this); // <--- hasn't been tested yet
     return this;
-}
+};
 
 GUI.Controller.prototype.setValue = function(n) {
     this.object[this.propertyName] = n;
@@ -48,22 +48,23 @@ GUI.Controller.prototype.setValue = function(n) {
     }
     this.updateDisplay();
     return this;
-}
+};
 
 GUI.Controller.prototype.getValue = function() {
     return this.object[this.propertyName];
-}
+};
 
-GUI.Controller.prototype.updateDisplay = function() {}
+GUI.Controller.prototype.updateDisplay = function() {};
 
 GUI.Controller.prototype.onChange = function(fnc) {
     this.changeFunction = fnc;
     return this;
-}
+};
+
 GUI.Controller.prototype.onFinishChange = function(fnc) {
     this.finishChangeFunction = fnc;
     return this;
-}
+};
 
 GUI.Controller.prototype.options = function() {
     var _this = this;
@@ -90,7 +91,7 @@ GUI.Controller.prototype.options = function() {
         if (_this.finishChangeFunction != null) {
             _this.finishChangeFunction.call(this, _this.getValue());
         }
-	});
+    }, false);
     _this.domElement.appendChild(select);
     return this;
-}
+};

controllers/controller.number.js

@@ -12,7 +12,7 @@ GUI.NumberController = function() {
 
     var clickedNumberField = false;
 
-    var y = py = 0;
+    var y = 0, py = 0;
 
     var min = arguments[3];
     var max = arguments[4];
@@ -44,7 +44,6 @@ GUI.NumberController = function() {
 
     numberField.addEventListener('blur', function(e) {
         var val = parseFloat(this.value);
-        console.log(val);
         if (!isNaN(val)) {
             _this.setValue(val);
         }
@@ -65,13 +64,18 @@ GUI.NumberController = function() {
 
     // Handle up arrow and down arrow
     numberField.addEventListener('keydown', function(e) {
+        var newVal;
         switch(e.keyCode) {
+            case 13:    // enter
+                newVal = parseFloat(this.value);
+                _this.setValue(newVal);
+                break;
             case 38:    // up
-				var newVal = _this.getValue() + step;
+                newVal = _this.getValue() + step;
                 _this.setValue(newVal);
                 break;
             case 40:    // down
-				var newVal = _this.getValue() - step;
+                newVal = _this.getValue() - step;
                 _this.setValue(newVal);
                 break;
         }
@@ -85,17 +89,17 @@ GUI.NumberController = function() {
             numberField.focus();
             numberField.select();
         }
+        if(slider) slider.domElement.className = slider.domElement.className.replace(' active', '');
         draggedNumberField = false;
         clickedNumberField = false;
         if (_this.finishChangeFunction != null) {
             _this.finishChangeFunction.call(this, _this.getValue());
         }
         document.removeEventListener('mouseup', mouseup, false);
-	}
+    };
-
-    
 
     var dragNumberField = function(e) {
+
         draggedNumberField = true;
         e.preventDefault();
 
@@ -106,13 +110,15 @@ GUI.NumberController = function() {
         GUI.makeUnselectable(_this.parent.domElement);
         GUI.makeUnselectable(numberField);
         
+        if(slider) slider.domElement.className += ' active';
+        
         py = y;
         y = e.pageY;
         var dy = py - y;
         var newVal = _this.getValue() + dy*step;
         _this.setValue(newVal);
         return false;
-    }
+    };
 
     this.options = function() {
         _this.noSlider();
@@ -139,12 +145,12 @@ GUI.NumberController = function() {
 
         return GUI.Controller.prototype.setValue.call(this, val);
 
-    }
+    };
 
     this.updateDisplay = function() {
         numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
         if (slider) slider.value = _this.getValue();
-	}
+    };
 };
 
 GUI.extendController(GUI.NumberController);

controllers/controller.string.js

@@ -33,7 +33,7 @@ GUI.StringController = function() {
 
     this.updateDisplay = function() {
         input.value = _this.getValue();
-    }
+    };
 
     this.options = function() {
         _this.domElement.removeChild(input);

controllers/slider.js

@@ -1,9 +1,5 @@
 GUI.Slider = function(numberController, min, max, step, initValue) {
 
-	var min = min;
-	var max = max;
-	var step = step;
-	
     var clicked = false;
     var _this = this;
 
@@ -17,16 +13,45 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
 
     this.domElement.appendChild(this.fg);
     
+    var onDrag = function(e) {
+        if (!clicked) return;
+        var pos = findPos(_this.domElement);
+        var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
+        val = Math.round(val/step)*step;
+        numberController.setValue(val);
+    };
+    
+    this.domElement.addEventListener('mousedown', function(e) {
+        clicked = true;
+        x = px = e.pageX;
+        _this.domElement.className += ' active';
+        _this.fg.className += ' active';
+        numberController.domElement.className += ' active';
+        onDrag(e);
+        document.addEventListener('mouseup', mouseup, false);
+    }, false);
+    
+    var mouseup = function(e) { 
+        _this.domElement.className = _this.domElement.className.replace(' active', '');
+        _this.fg.className = _this.fg.className.replace(' active', '');
+        numberController.domElement.className = numberController.domElement.className.replace(' active', '');
+        clicked = false;            
+        if (numberController.finishChangeFunction != null) {
+            numberController.finishChangeFunction.call(this, numberController.getValue());
+        }
+        document.removeEventListener('mouseup', mouseup, false);
+    };
+
     var findPos = function(obj) {
-		var curleft = curtop = 0;
+        var curleft = 0, curtop = 0;
         if (obj.offsetParent) {
             do {
                 curleft += obj.offsetLeft;
                 curtop += obj.offsetTop;
-			} while (obj = obj.offsetParent);
+            } while ((obj = obj.offsetParent));
             return [curleft,curtop];
         }
-	}
+    };
 
     this.__defineSetter__('value', function(e) {
         var pct = GUI.map(e, min, max, 0, 100);
@@ -39,7 +64,7 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
         var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
         val = Math.round(val/step)*step;
         numberController.setValue(val);
-	}
+    };
 
     this.domElement.addEventListener('mousedown', function(e) {
         clicked = true;
@@ -50,7 +75,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
         document.addEventListener('mouseup', mouseup, false);
     }, false);
 
-	
     var mouseup = function(e) {
         _this.domElement.setAttribute('class', 'guidat-slider-bg');
         _this.fg.setAttribute('class', 'guidat-slider-fg');
@@ -61,9 +85,8 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
         document.removeEventListener('mouseup', mouseup, false);
     };
 
-	
     document.addEventListener('mousemove', onDrag, false);
 
     this.value = initValue;
 
-}
+};

demo/demo.css

@@ -94,6 +94,9 @@ div.expanded h2:before, div.collapsed h2:before {
 	font-family: Monaco, monospace;
 }
 
+div.collapsable>div {
+	padding-bottom: 10px;
+}
 div.collapsable {
 	overflow: hidden;
 	clear: both;

demo/demo.js

@@ -44,7 +44,7 @@ function FizzyText(message) {
 
     var width = 550;
     var height = 200;
-	var textAscent = 82;
+    var textAscent = 101;
     var textOffsetLeft = 80;
     var noiseScale = 300;
     var frameTime = 30;
@@ -76,7 +76,7 @@ function FizzyText(message) {
 
     // Set g.font to the same font as the bitmap canvas, incase we
     // want to draw some outlines.
-    s.font = g.font = "800 " + textAscent + "px helvetica, arial, sans-serif";
+    s.font = g.font = "800 82px helvetica, arial, sans-serif";
 
     // Instantiate some particles
     for (var i = 0; i < 1000; i++) {

gui.css

@@ -27,11 +27,6 @@
     overflow-y: auto;
     overflow-x: hidden;
     background-color: rgba(0,0,0,0.1);
-	/*
-	-moz-transition: height .2s ease-out;
-	-webkit-transition: height .2s ease-out;
-	transition: height .2s ease-out;
-	*/
 }
 
 a.guidat-toggle { 
@@ -86,7 +81,8 @@ a.guidat-toggle:hover {
     float: right;
 }
 
-.guidat-controller input:hover { 
+.guidat-controller input:hover.
+.guidat-controller.number.active { 
     background-color: #444;
 }
 

gui.js

@@ -125,36 +125,21 @@ var GUI = function() {
 
     }, false);
 
-	
     toggleButton.addEventListener('click', function(e) {
         e.preventDefault();
         return false;
     }, false);
 
-	
     document.addEventListener('mouseup', function(e) {
         
         if (togglePressed && !toggleDragged) {
-			
             _this.toggle();
-
-			// Clears lingering slider column
-			_this.domElement.style.width = (width+1)+'px';
-			setTimeout(function() {
-				_this.domElement.style.width = width+'px';
-			}, 1);
         }
         
         if (togglePressed && toggleDragged) {
         
             if (dragDisplacementX == 0) {
-			
+                adaptToScrollbar();
-				// Clears lingering slider column
-				_this.domElement.style.width = (width+1)+'px';
-				setTimeout(function() {
-					_this.domElement.style.width = width+'px';
-				}, 1);
-	
             }
         
             if (openHeight > controllerHeight) {
@@ -177,10 +162,7 @@ var GUI = function() {
                     beginResize();
                 }
             }
-			
+        };
-			
-			
-		}
         
         
         document.removeEventListener('mousemove', resize, false);
@@ -211,7 +193,7 @@ var GUI = function() {
         listenInterval = setInterval(function() {
             _this.listen();
         }, this.autoListenIntervalTime);
-	}
+    };
     
     this.__defineSetter__("autoListen", function(v) {
         autoListen = v;
@@ -352,7 +334,7 @@ var GUI = function() {
         } else {
             controllerContainer.style.overflowY = "hidden";
         }   
-	}
+    };
     
     var handlerTypes = {
         "number": GUI.NumberController,
@@ -372,6 +354,7 @@ var GUI = function() {
     };
     
     var construct = function(constructor, args) {
+
         function F() {
             return constructor.apply(this, args);
         }
@@ -420,6 +403,8 @@ var GUI = function() {
         curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
         if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
             curControllerContainerHeight = resizeTo;
+            adaptToScrollbar();
+            
         } else { 
             resizeTimeout = setTimeout(beginResize, 1000/30);
         }
@@ -427,6 +412,14 @@ var GUI = function() {
         checkForOverflow();
     }
     
+    var adaptToScrollbar = function() {
+        // Clears lingering slider column
+        _this.domElement.style.width = (width+1)+'px';
+        setTimeout(function() {
+            _this.domElement.style.width = width+'px';
+        }, 1);
+    };
+    
     // Load saved appearance:
 
     if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
@@ -458,8 +451,22 @@ var GUI = function() {
 
     GUI.allGuis.push(this);
 
+	// Add hide listener if this is the first GUI. 
+	if (GUI.allGuis.length == 1) {
+		window.addEventListener('keyup', function(e) {
+			// Hide on "H"
+			if (e.keyCode == 72) {
+				GUI.toggleHide();
+			}
+		}, false);
+	}
+
 };
 
+// Do not set this directly.
+GUI.hidden = false;
+
+
 // Static members
 
 GUI.autoPlace = true;
@@ -467,9 +474,31 @@ GUI.autoPlaceContainer = null;
 GUI.allControllers = [];
 GUI.allGuis = [];
 
+
+GUI.toggleHide = function() {
+	if (GUI.hidden) {
+		GUI.show();
+	} else { 
+		GUI.hide();
+	}
+}
+
+GUI.show = function() {
+	GUI.hidden = false;
+	for (var i in GUI.allGuis) {
+		GUI.allGuis[i].domElement.style.display = "block";
+	}
+}
+
+GUI.hide = function() {
+	GUI.hidden = true;
+	for (var i in GUI.allGuis) {
+		GUI.allGuis[i].domElement.style.display = "none";
+	}
+}
+
 GUI.saveURL = function() {
-	title = window.location;
+    var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
-	url = GUI.replaceGetVar("saveString", GUI.getSaveString());
     window.location = url;
 };
 
@@ -495,20 +524,21 @@ GUI.savedAppearanceVars = [];
 
 GUI.getSaveString = function() {
 
-	var vals = [];
+    var vals = [],
+        i;
 
     vals.push(GUI.allGuis.length);
     vals.push(document.body.scrollTop);
 
 
-	for (var i in GUI.allGuis) {
+    for (i in GUI.allGuis) {
         var av = GUI.allGuis[i].appearanceVars();
         for (var j = 0; j < av.length; j++) {
             vals.push(av[j]);
         }
     }
 
-	for (var i in GUI.allControllers) {
+    for (i in GUI.allControllers) {
 
         // We don't save values for functions.
         if (GUI.allControllers[i].type == "function") {
@@ -528,7 +558,7 @@ GUI.getSaveString = function() {
 
     return vals.join(',');
 
-}
+};
 
 GUI.getVarFromURL = function(v) {
 
@@ -536,7 +566,7 @@ GUI.getVarFromURL = function(v) {
     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 
     for (var i = 0; i < hashes.length; i++) {
- 		hash = hashes[i].split("=")
+        hash = hashes[i].split("=");
         if (hash == undefined) continue;
         if (hash[0] == v) {
             return hash[1];
@@ -554,7 +584,7 @@ GUI.replaceGetVar = function(varName, val) {
     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 
     for (var i = 0; i < hashes.length; i++) {
- 		hash = hashes[i].split("=")
+        hash = hashes[i].split("=");
         if (hash == undefined) continue;
         if (hash[0] == varName) {
             return loc.replace(hash[1], val);
@@ -574,7 +604,7 @@ GUI.guiIndex = 0;
 
 GUI.showSaveString = function() {
     alert(GUI.getSaveString());
-}
+};
 
 // Util functions
 
@@ -583,25 +613,24 @@ GUI.makeUnselectable = function(elem) {
     elem.style.MozUserSelect = "none";
     elem.style.KhtmlUserSelect = "none";
     elem.unselectable = "on";
-}
+};
 
 GUI.makeSelectable = function(elem) {
     elem.onselectstart = function() { };
     elem.style.MozUserSelect = "auto";
     elem.style.KhtmlUserSelect = "auto";
     elem.unselectable = "off";
-}
+};
 
 GUI.map = function(v, i1, i2, o1, o2) {
-	var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+    return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
-	return v;
+};
-}
 
 GUI.constrain = function (v, o1, o2) {
     if (v < o1) v = o1;
     else if (v > o2) v = o2;
     return v;
-}
+};
 
 GUI.error = function(str) {
     if (typeof console.error == 'function') {
@@ -612,11 +641,11 @@ GUI.error = function(str) {
 GUI.roundToDecimal = function(n, decimals) {
     var t = Math.pow(10, 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

@@ -1,6 +1,7 @@
 <!doctype html>
 <head>
   <title>gui-dat</title>
+
   <link rel="icon" type="image/png" href="demo/assets/favicon.png" />
   <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
   <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
@@ -11,6 +12,7 @@
   <script type="text/javascript" src="controllers/controller.function.js"></script>
   <script type="text/javascript" src="controllers/controller.number.js"></script>
   <script type="text/javascript" src="controllers/controller.string.js"></script>
+  <script type="text/javascript" src="controllers/color.js"></script>
   <script type="text/javascript" src="demo/improvedNoise.js"></script>
   <script type="text/javascript" src="demo/prettify.js"></script>
   <script type="text/javascript" src="demo/demo.js"></script>
@@ -316,7 +318,7 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
                 <ol id="secrets">
                   <li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
 
-		          <li>Pro tip #2 forthcoming.</li>
+                  <li>Press 'H' to show/hide GUI&apos;s.</li>
                 </ol>
             </div>
         </div>