house cleaning

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,14 @@ GUI.NumberController = function() {
 
     // Handle up arrow and down arrow
     numberField.addEventListener('keydown', function(e) {
+        var newVal;
         switch(e.keyCode) {
             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 +85,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 +106,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 +141,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

@@ -67,12 +67,16 @@ div.collapsed h2, div.expanded h2 {
 	cursor: pointer;
 }
 
+.last { margin-bottom: 0px !important; }
+.first { margin-top: 0px; }
+
 div.trans {
 	border-top: 1px dotted #ccc;
 	margin: 0px 0px 20px 0px;
 }
 ol#secrets {
-/*	padding: 0px 0px 20px 0px;*/
+	padding: 0px;
+	margin: 0px;
 }
 div.expanded h2:before {
 	content: '-';
@@ -102,6 +106,8 @@ div.collapsable {
 }
 
 div.collapsable div {
+	padding-bottom: 20px;
+	margin-bottom: -20px;
 	height: auto;
 }
 

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) {
-			
-				// Clears lingering slider column
-				_this.domElement.style.width = (width+1)+'px';
-				setTimeout(function() {
-					_this.domElement.style.width = width+'px';
-				}, 1);
-	
+                adaptToScrollbar();
             }
         
             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) {
@@ -468,8 +461,7 @@ GUI.allControllers = [];
 GUI.allGuis = [];
 
 GUI.saveURL = function() {
-	title = window.location;
-	url = GUI.replaceGetVar("saveString", GUI.getSaveString());
+    var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
     window.location = url;
 };
 
@@ -495,20 +487,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 +521,7 @@ GUI.getSaveString = function() {
 
     return vals.join(',');
 
-}
+};
 
 GUI.getVarFromURL = function(v) {
 
@@ -536,7 +529,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 +547,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 +567,7 @@ GUI.guiIndex = 0;
 
 GUI.showSaveString = function() {
     alert(GUI.getSaveString());
-}
+};
 
 // Util functions
 
@@ -583,25 +576,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 v;
-}
+    return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+};
 
 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 +604,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,32 +1,22 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!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" />
-  <script type="text/javascript" src="gui.js">
-</script>
-  <script type="text/javascript" src="controllers/slider.js">
-</script>
-  <script type="text/javascript" src="controllers/controller.js">
-</script>
-  <script type="text/javascript" src="controllers/controller.boolean.js">
-</script>
-  <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="demo/improvedNoise.js">
-</script>
-  <script type="text/javascript" src="demo/prettify.js">
-</script>
-  <script type="text/javascript" src="demo/demo.js">
-</script>
+
+  <script type="text/javascript" src="gui.js"></script>
+  <script type="text/javascript" src="controllers/slider.js"></script>
+  <script type="text/javascript" src="controllers/controller.js"></script>
+  <script type="text/javascript" src="controllers/controller.boolean.js"></script>
+  <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="demo/improvedNoise.js"></script>
+  <script type="text/javascript" src="demo/prettify.js"></script>
+  <script type="text/javascript" src="demo/demo.js"></script>
+
   <script type="text/javascript">
     //<![CDATA[
 
@@ -183,7 +173,7 @@ window.onload = function() {
         <div class="collapsable">
             <div>
                 <p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
-		    	<pre class="prettyprint">
+                <pre class="prettyprint last">
 // Make a button for the url function
 gui.add(GUI, "saveURL");</pre>
             </div>
@@ -216,7 +206,7 @@ var gui = new GUI();
 gui.add(someObject, "someProperty");
 gui.add(someObject, "someOtherProperty");</pre>
 
-		    	<p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
+                <p class = "last"><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
             </div>
         </div>
     </div>
@@ -226,7 +216,7 @@ gui.add(someObject, "someOtherProperty");</pre>
         <h2 class="section">Choosing from a list of values</h2>
         <div class="collapsable">
             <div>
-<pre class="prettyprint">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
+<pre class="prettyprint first last">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
 
 // Alternatively, you can specify custom labels using object syntax
 gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
@@ -247,7 +237,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
    alert("You just finished changing me to " + newValue);
 });</pre>
                 <p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p>
-		    	<pre class="prettyprint">gui.add(obj, "functionName").onFire(function() {
+                <pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
    alert("You called a function with gui-dat");
 });</pre>
             </div>
@@ -258,7 +248,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
         <div class="collapsable">
             <div>
                 <p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
-		    	<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
+                <pre class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
             </div>
         </div>
     </div>
@@ -278,7 +268,7 @@ setInterval(function() {
 }, 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>
-		    	<pre class="prettyprint">
+                <pre class="prettyprint last">
 gui.autoListen = false; // disables internal interval
 gui.add(obj, "add");
 gui.add(obj, "lotsa");
@@ -305,7 +295,7 @@ gui1.name("Utilities");
 gui2.name("Camera Placement");</pre>
 
                 <p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
-		    	<pre class="prettyprint">
+                <pre class="prettyprint last">
 // Notice this belongs to the GUI class (uppercase) 
 // and not an instance thereof.
 GUI.autoPlace = false;