From e6484453468f82888a306a221f0558f5688e45c9 Mon Sep 17 00:00:00 2001
From: George Michael Brower <georgebrower@google.com>
Date: Mon, 24 Jan 2011 15:08:48 -0700
Subject: [PATCH] Attempt to make text in number boxes unselectable.

---
 controller.js        |  7 +++++++
 controller.number.js |  9 +++++++--
 controller.string.js |  1 +
 demo.html            |  5 ++---
 gui.css              |  3 +--
 gui.js               | 22 +++++++++++-----------
 6 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/controller.js b/controller.js
index d88e86e..719b420 100644
--- a/controller.js
+++ b/controller.js
@@ -19,6 +19,13 @@ var Controller = function() {
 		elem.unselectable = "on";
 	}
     
+	this.makeSelectable = function(elem) {
+		elem.onselectstart = function() { };
+		elem.style.MozUserSelect = "auto";
+		elem.style.KhtmlUserSelect = "auto";
+		elem.unselectable = "off";
+	}
+    
     this.domElement = document.createElement('div');
     this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
 
diff --git a/controller.number.js b/controller.number.js
index dfee720..1426266 100644
--- a/controller.number.js
+++ b/controller.number.js
@@ -43,12 +43,17 @@ var NumberController = function() {
     }, false);
     document.addEventListener('mouseup', function(e) {
         isClicked = false;
+      	_this.makeSelectable(GUI.domElement); 
+		_this.makeSelectable(button);
     }, false);
     document.addEventListener('mousemove', function(e) {
         if(isClicked) {
             e.preventDefault();
+        	_this.makeUnselectable(GUI.domElement);
+        	_this.makeUnselectable(button);
+      
             py = y;
-            y  = e.offsetY;
+            y = e.offsetY;
             var dy = y - py;
             if(dy < 0) {
                 if(max != null)
@@ -64,8 +69,8 @@ var NumberController = function() {
             }
             button.value = inc;
             _this.setValue(inc);
-        }
         return false;
+        }
     }, false);
     
     this.__defineSetter__("position", function(val) {
diff --git a/controller.string.js b/controller.string.js
index 679e59c..c2bcec7 100644
--- a/controller.string.js
+++ b/controller.string.js
@@ -11,6 +11,7 @@ var StringController = function() {
     var initialValue = this.getValue();
     
     input.setAttribute('value', initialValue);
+    input.setAttribute('spellcheck', 'false');
     this.domElement.addEventListener('mouseup', function() {
     	input.focus();
     	input.select();
diff --git a/demo.html b/demo.html
index b80691d..bff85f0 100644
--- a/demo.html
+++ b/demo.html
@@ -3,12 +3,13 @@
 <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
 <link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
 <!--<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
+
+<script type="text/javascript" src="gui.js"></script>
 <script type="text/javascript" src="controller.js"></script>
 <script type="text/javascript" src="controller.string.js"></script>
 <script type="text/javascript" src="controller.number.js"></script>
 <script type="text/javascript" src="controller.boolean.js"></script>
 <script type="text/javascript" src="controller.function.js"></script>
-<script type="text/javascript" src="gui.js"></script>
 <script id="demo" type="text/javascript">
 var controllableObject = 
    {   
@@ -41,8 +42,6 @@ window.onload = function() {
    
    // Creates a checkbox
    GUI.add(controllableObject, "booleanProperty");
-   // Creates a checkbox
-   GUI.add(controllableObject, "anotherBooleanProperty");
    
    // Creates a button
    GUI.add(controllableObject, "functionProperty");
diff --git a/gui.css b/gui.css
index 036d9ed..dbe2126 100644
--- a/gui.css
+++ b/gui.css
@@ -78,7 +78,6 @@
 }
 .guidat-controller.number input[type=number] {
 	width: 45px;
-	cursor: ns-resize;
 }
 
 .guidat-controller.boolean input { 
@@ -88,7 +87,7 @@ margin-top: 6px;
 
 
 .guidat-controller:last-child {
-	
+	border-bottom: none;
 	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
diff --git a/gui.js b/gui.js
index 75ee943..bd6f321 100644
--- a/gui.js
+++ b/gui.js
@@ -17,8 +17,8 @@ var GUI = new function() {
 	
 		// Have we already added this?
 		if (alreadyControlled(object, propertyName)) {
-			error("Controller for \"" + propertyName+"\" already added.");
-			return;
+	//		error("Controller for \"" + propertyName+"\" already added.");
+	//		return;
 		}
 	
 		var value = object[propertyName];
@@ -102,7 +102,7 @@ var GUI = new function() {
 
 	// GUI ... GUI
 	
-	var domElement;
+	this.domElement = null;
 	var controllerContainer;
 	var started = false;
 	var open = false;
@@ -112,8 +112,8 @@ var GUI = new function() {
 	
 	this.start = function() {
 		
-		domElement = document.createElement('div');
-		domElement.setAttribute('id', 'guidat');
+		this.domElement = document.createElement('div');
+		this.domElement.setAttribute('id', 'guidat');
 		
 		controllerContainer = document.createElement('div');
 		controllerContainer.setAttribute('id', 'guidat-controllers');
@@ -127,12 +127,12 @@ var GUI = new function() {
 			e.preventDefault();
 		}, false);
 		
-		domElement.appendChild(controllerContainer);
-		domElement.appendChild(toggleButton);
+		this.domElement.appendChild(controllerContainer);
+		this.domElement.appendChild(toggleButton);
 		
-		domElement.style.marginTop = -domElementMarginTop+"px";
+		this.domElement.style.marginTop = -domElementMarginTop+"px";
 		
-		document.body.appendChild(domElement);
+		document.body.appendChild(this.domElement);
 		
 		started = true;
 		
@@ -149,13 +149,13 @@ var GUI = new function() {
 	};
 	
 	this.show = function() {
-		domElement.style.marginTop = 0+"px";
+		this.domElement.style.marginTop = 0+"px";
 		toggleButton.innerHTML = "Hide Controls";
 		open = true;
 	}
 	
 	this.hide = function() {
-		domElement.style.marginTop = -domElementMarginTop+"px";
+		this.domElement.style.marginTop = -domElementMarginTop+"px";
 		toggleButton.innerHTML = "Show Controls";
 		open = false;
 	}