From d93adcf5630c1e5178397e9b0dd835b7139a522d Mon Sep 17 00:00:00 2001
From: George Michael Brower <georgebrower@google.com>
Date: Mon, 18 Apr 2011 19:47:05 -0700
Subject: [PATCH] I hereby issue a worldwide challenge to find *anything* wrong
 with these Number Controllers. They may the best ever.

---
 index.html                      | 96 +++++++++++++++++----------------
 src/DAT/GUI/Controller.js       |  1 +
 src/DAT/GUI/ControllerNumber.js | 13 ++---
 src/DAT/GUI/ControllerString.js |  5 ++
 src/DAT/GUI/GUI.js              | 17 +++---
 5 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/index.html b/index.html
index b0b5b98..39a9c1f 100644
--- a/index.html
+++ b/index.html
@@ -33,11 +33,12 @@
       var fizzyText = new FizzyText("dat.gui");
       var gui = new DAT.GUI();
 
+
       // Text field
       gui.add(fizzyText, "message");
 
       // Sliders with min + max
-      gui.add(fizzyText, "maxSize");
+      gui.add(fizzyText, "maxSize").min(0.5).max(7);
       gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
       gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
 
@@ -185,61 +186,62 @@ window.onload = function() {
         alert("You changed me to " + n);
 });</pre>-->
 
-<div class="collapsed">
-  <h2 class="section">Saving your parameters</h2>
+<!--<div class="collapsed">-->
+  <!---->
+  <!--<h2 class="section">Saving your parameters</h2>-->
 
-  <div class="collapsable">
-    <div>
-      <p>The simplest way to save your parameters is via
-        <code>DAT.GUI.saveURL()</code>. This method directs your browser to a
-        URL containing the current GUI settings.</p>
-                <pre class="prettyprint last">
-// Make a button for the url function
-gui.add(DAT.GUI, "saveURL");</pre>
-    </div>
-  </div>
-</div>
-<div class="collapsed">
-  <h2 class="section">Advanced saving</h2>
+  <!--<div class="collapsable">-->
+    <!--<div>-->
+      <!--<p>The simplest way to save your parameters is via-->
+        <!--<code>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
+        <!--URL containing the current GUI settings.</p>-->
+                <!--<pre class="prettyprint last">-->
+<!--// Make a button for the url function-->
+<!--gui.add(DAT.GUI, "saveURL");</pre>-->
+    <!--</div>-->
+  <!--</div>-->
+<!--</div>-->
+<!--<div class="collapsed">-->
+  <!--<h2 class="section">Advanced saving</h2>-->
 
-  <div class="collapsable">
-    <div>
-      <p>Let's say you'd like to share your settings with someone. Instead of
-        sending a long link with lots of parameters stored in it, you can make
-        your saved settings the defaults.</p>
+  <!--<div class="collapsable">-->
+    <!--<div>-->
+      <!--<p>Let's say you'd like to share your settings with someone. Instead of-->
+        <!--sending a long link with lots of parameters stored in it, you can make-->
+        <!--your saved settings the defaults.</p>-->
 
-      <p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui
-        object:</p>
-                <pre class="prettyprint">var gui = new DAT.GUI();
+      <!--<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui-->
+        <!--object:</p>-->
+                <!--<pre class="prettyprint">var gui = new DAT.GUI();-->
 
-// Add some stuff (and pretend I change their values);
-gui.add(someObject, "someProperty");
-gui.add(someObject, "someOtherProperty");
+<!--// Add some stuff (and pretend I change their values);-->
+<!--gui.add(someObject, "someProperty");-->
+<!--gui.add(someObject, "someOtherProperty");-->
 
-// Make a save button.
-gui.add(DAT.GUI, "showSaveString");</pre>
+<!--// Make a save button.-->
+<!--gui.add(DAT.GUI, "showSaveString");</pre>-->
 
-      <p>Clicking the "showSaveString" button bring up an alert with a string.
-        Copy and paste that string into the method <code>DAT.GUI.load()</code>
-        before you instantiate any gui objects.</p>
-            <pre class="prettyprint">
-// Replace COPIED STRING with the value you got from showSaveString()
-DAT.GUI.load("COPIED STRING");
+      <!--<p>Clicking the "showSaveString" button bring up an alert with a string.-->
+        <!--Copy and paste that string into the method <code>DAT.GUI.load()</code>-->
+        <!--before you instantiate any gui objects.</p>-->
+            <!--<pre class="prettyprint">-->
+<!--// Replace COPIED STRING with the value you got from showSaveString()-->
+<!--DAT.GUI.load("COPIED STRING");-->
 
-var gui = new DAT.GUI();
+<!--var gui = new DAT.GUI();-->
 
-// Now these properties will be set to the values you just saved.
-gui.add(someObject, "someProperty");
-gui.add(someObject, "someOtherProperty");</pre>
+<!--// Now these properties will be set to the values you just saved.-->
+<!--gui.add(someObject, "someProperty");-->
+<!--gui.add(someObject, "someOtherProperty");</pre>-->
 
-      <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>
+      <!--<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>-->
 
 
 <div class="collapsed">
diff --git a/src/DAT/GUI/Controller.js b/src/DAT/GUI/Controller.js
index f802b4f..eb06cfc 100644
--- a/src/DAT/GUI/Controller.js
+++ b/src/DAT/GUI/Controller.js
@@ -55,6 +55,7 @@ DAT.GUI.Controller.prototype.getValue = function() {
 };
 
 DAT.GUI.Controller.prototype.updateDisplay = function() {
+  
 };
 
 DAT.GUI.Controller.prototype.onChange = function(fnc) {
diff --git a/src/DAT/GUI/ControllerNumber.js b/src/DAT/GUI/ControllerNumber.js
index dc555eb..61a5c77 100644
--- a/src/DAT/GUI/ControllerNumber.js
+++ b/src/DAT/GUI/ControllerNumber.js
@@ -123,10 +123,7 @@ DAT.GUI.ControllerNumber = function() {
   numberField.addEventListener('mousedown', function(e) {
     py = y = e.pageY;
     clickedNumberField = true;
-    if (slider) {
-      DAT.GUI.addClass(_this.domElement, 'active');
-      console.log(_this.domElement.className);
-    }
+    DAT.GUI.makeSelectable(numberField);
     document.addEventListener('mousemove', dragNumberField, false);
     document.addEventListener('mouseup', mouseup, false);
   }, false);
@@ -155,8 +152,8 @@ DAT.GUI.ControllerNumber = function() {
     
     DAT.GUI.makeSelectable(numberField);
     if (clickedNumberField && !draggedNumberField) {
-      numberField.focus();
-      numberField.select();
+      //numberField.focus();
+      //numberField.select();
     }
     draggedNumberField = false;
     clickedNumberField = false;
@@ -174,6 +171,8 @@ DAT.GUI.ControllerNumber = function() {
     y = e.pageY;
     var dy = py - y;
 
+    
+
     if (!draggingHorizontal && !draggingVertical) {
       if (dy == 0) {
         draggingHorizontal = true;
@@ -186,6 +185,8 @@ DAT.GUI.ControllerNumber = function() {
       return true;
     }
 
+    DAT.GUI.addClass(_this.domElement, 'active');
+
     DAT.GUI.makeUnselectable(_this.parent.domElement);
     DAT.GUI.makeUnselectable(numberField);
 
diff --git a/src/DAT/GUI/ControllerString.js b/src/DAT/GUI/ControllerString.js
index 93135c1..3648307 100644
--- a/src/DAT/GUI/ControllerString.js
+++ b/src/DAT/GUI/ControllerString.js
@@ -21,10 +21,15 @@ DAT.GUI.ControllerString = function() {
   input.addEventListener('keyup', function(e) {
     if (e.keyCode == 13 && _this.finishChangeFunction != null) {
       _this.finishChangeFunction.call(this, _this.getValue());
+      input.blur();
     }
     _this.setValue(input.value);
   }, false);
 
+  input.addEventListener('mousedown', function(e) {
+    DAT.GUI.makeSelectable(input);
+  });
+
   input.addEventListener('blur', function() {
     DAT.GUI.supressHotKeys = false;
     if (_this.finishChangeFunction != null) {
diff --git a/src/DAT/GUI/GUI.js b/src/DAT/GUI/GUI.js
index 944d013..c234529 100644
--- a/src/DAT/GUI/GUI.js
+++ b/src/DAT/GUI/GUI.js
@@ -81,6 +81,7 @@ DAT.GUI = function(parameters) {
 
   var toggleDragged = false;
   var dragDisplacementY = 0;
+  var dragDisplacementX = 0;
   var togglePressed = false;
 
   var my, pmy, mx, pmx;
@@ -114,15 +115,19 @@ DAT.GUI = function(parameters) {
     }
 
     toggleDragged = true;
+
     dragDisplacementY += dmy;
-    dragDisplacementX += dmx;
     openHeight += dmy;
-    width += dmx;
     curControllerContainerHeight += dmy;
     controllerContainer.style.height = openHeight + 'px';
+
+    dragDisplacementX += dmx;
+    width += dmx;
     width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
     _this.domElement.style.width = width + 'px';
+
     checkForOverflow();
+
   };
 
   toggleButton.addEventListener('mousedown', function(e) {
@@ -130,8 +135,8 @@ DAT.GUI = function(parameters) {
     pmx = mx = e.pageX;
     togglePressed = true;
     e.preventDefault();
-    dragDisplacementY = 0;
     dragDisplacementX = 0;
+    dragDisplacementY = 0;
     document.addEventListener('mousemove', resize, false);
     return false;
 
@@ -265,12 +270,12 @@ DAT.GUI = function(parameters) {
   };
 
   var construct = function(constructor, args) {
-    function F() {
+    function C() {
       return constructor.apply(this, args);
     }
 
-    F.prototype = constructor.prototype;
-    return new F();
+    C.prototype = constructor.prototype;
+    return new C();
   };
 
   this.add = function() {