Merge branch 'master' of github.com:jonobr1/GUI-DAT

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);
 

controller.number.js

@@ -58,11 +58,16 @@ var NumberController = function() {
     }, false);
     document.addEventListener('mouseup', function(e) {
         isClicked = false;
+      	_this.makeSelectable(GUI.domElement); 
+		_this.makeSelectable(button);
         isDragged = false;
     }, false);
     document.addEventListener('mousemove', function(e) {
         if(isClicked) {
             e.preventDefault();
+        	_this.makeUnselectable(GUI.domElement);
+        	_this.makeUnselectable(button);
+      
             py = y;
             y = e.offsetY;
             var dy = y - py;

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();
@@ -20,13 +21,6 @@ var StringController = function() {
         _this.setValue(input.value);
     }, false);
     
-    input.addEventListener('blur', function(e) {
-        if(_this.getValue() == '') {
-            _this.setValue(initialValue);
-            this.value = initialValue;
-        }
-    }, false);
-    
     this.domElement.appendChild(input);
 };
 StringController.prototype = new Controller();

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");

gui.css

@@ -2,12 +2,12 @@
 	font: 9px Monaco, monospace;
 	color: #fff;
 	position: fixed;
-	width: 250px;
+	width: 320px;
 	z-index: 200;
 	opacity: 0.95;
 	top: 0;
 	left: 100%;
-	margin-left: -270px;
+	margin-left: -340px;
 	background-color: #fff;
 	-moz-transition: margin-top .2s ease-out;
 	-webkit-transition: margin-top .2s ease-out;
@@ -53,7 +53,6 @@
 .guidat-controller input { 
 	float: right;
 	outline: none;
-	clear: both;
 	border: 0;
 	padding: 2px;
 }
@@ -78,7 +77,11 @@
 }
 .guidat-controller.number input[type=number] {
 	width: 45px;
-	cursor: ns-resize;
+	margin-left: 10px;
+}
+.guidat-controller.number input[type=slider] {
+	width: 45px;
+
 }
 
 .guidat-controller.boolean input { 
@@ -88,7 +91,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);

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.");
+	//		error("Controller for \"" + propertyName+"\" already added.");
-			return;
+	//		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');
+		this.domElement = document.createElement('div');
-		domElement.setAttribute('id', 'guidat');
+		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);
+		this.domElement.appendChild(controllerContainer);
-		domElement.appendChild(toggleButton);
+		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;
 	}