Number controllers not perfect, but dragging is infinitely more intuitive.

index.html

@@ -119,7 +119,9 @@
     <p><strong>dat.gui</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.</p>
 
     <ul>
-      <li><a href="https://github.com/jonobr1/dat.gui/raw/versions/gui.min.js"><strong>Download the minified source</strong></a> <small>[11kb]</small></li>
+      <li><a href="https://github.com/jonobr1/dat.gui/raw/versions/gui.min
+      .js"><strong>Download the minified source</strong></a> <small
+          id="buildsize">[11kb]</small></li>
 
       <li><a href="http://github.com/jonobr1/dat.gui">Contribute on GitHub!</a></li>
     </ul>

src/DAT/ControllerNumber.js

@@ -12,6 +12,9 @@ DAT.GUI.ControllerNumber = function() {
 
   var clickedNumberField = false;
 
+  var draggingHorizontal = false;
+  var draggingVertical = false;
+
   var y = 0, py = 0;
 
   var min = arguments[3];
@@ -45,8 +48,7 @@ DAT.GUI.ControllerNumber = function() {
   numberField.addEventListener('blur', function() {
     var val = parseFloat(this.value);
     if (slider) {
-      DAT.GUI.removeClass(slider.domElement, 'active');
-      console.log(slider.domElement.className);
+      DAT.GUI.removeClass(_this.domElement, 'active');
     }
     if (!isNaN(val)) {
       _this.setValue(val);
@@ -64,7 +66,8 @@ DAT.GUI.ControllerNumber = function() {
     py = y = e.pageY;
     clickedNumberField = true;
     if (slider) {
-      DAT.GUI.addClass(slider.domElement, 'active');
+      DAT.GUI.addClass(_this.domElement, 'active');
+      console.log(_this.domElement.className);
     }
     document.addEventListener('mousemove', dragNumberField, false);
     document.addEventListener('mouseup', mouseup, false);
@@ -91,7 +94,8 @@ DAT.GUI.ControllerNumber = function() {
 
   var mouseup = function(e) {
     document.removeEventListener('mousemove', dragNumberField, false);
-    DAT.GUI.makeSelectable(_this.parent.domElement);
+    
+    DAT.GUI.makeSelectable(numberField);
     if (clickedNumberField && !draggedNumberField) {
       numberField.focus();
       numberField.select();
@@ -101,23 +105,37 @@ DAT.GUI.ControllerNumber = function() {
     if (_this.finishChangeFunction != null) {
       _this.finishChangeFunction.call(this, _this.getValue());
     }
+    draggingHorizontal = false;
+    draggingVertical = false;
     document.removeEventListener('mouseup', mouseup, false);
   };
 
   var dragNumberField = function(e) {
 
-    draggedNumberField = true;
-    e.preventDefault();
-
-    // We don't want to be highlighting this field as we scroll.
-    // Or any other fields in this gui for that matter ...
-    // TODO: Make makeUselectable go through each element and child element.
-
-    DAT.GUI.makeUnselectable(_this.parent.domElement);
-
     py = y;
     y = e.pageY;
     var dy = py - y;
+
+
+    if (!draggingHorizontal && !draggingVertical) {
+      if (dy == 0) {
+        draggingHorizontal = true;
+      } else {
+        draggingVertical = true;
+      }
+    }
+
+    if (draggingHorizontal) {
+      return true;
+    }
+
+    DAT.GUI.makeUnselectable(_this.parent.domElement);
+    DAT.GUI.makeUnselectable(numberField);
+
+    draggedNumberField = true;
+    e.preventDefault();
+
+
     var newVal = _this.getValue() + dy * step;
     _this.setValue(newVal);
     return false;

src/DAT/Slider.js

@@ -25,17 +25,13 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
   this.domElement.addEventListener('mousedown', function(e) {
     clicked = true;
     x = px = e.pageX;
-    _this.domElement.className += ' active';
-    _this.fg.className += ' active';
-    numberController.domElement.className += ' active';
+    DAT.GUI.addClass(numberController.domElement, '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', '');
+    DAT.GUI.removeClass(numberController.domElement, 'active');
     clicked = false;
     if (numberController.finishChangeFunction != null) {
       numberController.finishChangeFunction.call(this, numberController.getValue());

src/dat/gui.css

@@ -80,13 +80,14 @@ a.guidat-toggle:hover {
   float: right;
 }
 
-.guidat-controller input:hover
-.guidat-controller.number.active {
+.guidat-controller input:hover {
   background-color: #444;
 }
 
-.guidat-controller input:focus {
+.guidat-controller input:focus,
+.guidat-controller.active input {
   background-color: #555;
+  color: #fff;
 }
 
 .guidat-controller.number {
@@ -139,13 +140,13 @@ a.guidat-toggle:hover {
   display: inline-block;
 }
 
-.guidat-slider-bg:hover,
-.guidat-slider-bg.active {
+.guidat-controller .guidat-slider-bg:hover,
+.guidat-controller.active .guidat-slider-bg {
   background-color: #444;
 }
 
-.guidat-slider-bg:hover .guidat-slider-fg,
-.guidat-slider-bg.active .guidat-slider-fg {
+.guidat-controller .guidat-slider-bg .guidat-slider-fg:hover,
+.guidat-controller.active .guidat-slider-bg .guidat-slider-fg {
   background-color: #52c8ff;
 }
 
@@ -161,5 +162,5 @@ a.guidat-toggle:hover {
 .guidat-slider-fg {
   cursor: ew-resize;
   background-color: #00aeff;
-  height: 20px;
+  height: 21px;
 }

src/dat/gui.js

@@ -605,20 +605,34 @@ DAT.GUI.showSaveString = function() {
 // Util functions
 
 DAT.GUI.makeUnselectable = function(elem) {
+  if (elem == undefined || elem.style == undefined) return;
   elem.onselectstart = function() {
     return false;
   };
   elem.style.MozUserSelect = 'none';
   elem.style.KhtmlUserSelect = 'none';
   elem.unselectable = 'on';
+
+  var kids = elem.childNodes;
+  for (var i = 0; i < kids.length; i++) {
+    DAT.GUI.makeUnselectable(kids[i]);
+  }
+
 };
 
 DAT.GUI.makeSelectable = function(elem) {
+  if (elem == undefined || elem.style == undefined) return;
   elem.onselectstart = function() {
   };
   elem.style.MozUserSelect = 'auto';
   elem.style.KhtmlUserSelect = 'auto';
   elem.unselectable = 'off';
+
+  var kids = elem.childNodes;
+  for (var i = 0; i < kids.length; i++) {
+    DAT.GUI.makeSelectable(kids[i]);
+  }
+
 };
 
 DAT.GUI.map = function(v, i1, i2, o1, o2) {