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

controllers/controller.js

@@ -1,17 +1,26 @@
 var Controller = function() {
 
+	var onChange = null;
+
     this.setName = function(n) {
   	    this.propertyNameElement.innerHTML = n;
     }
     
     this.setValue = function(n) {
     	this.object[this.propertyName] = n;
+      	if (onChange != null) {
+      		onChange.call(this, n);
+      	}
     }
     
     this.getValue = function() {
         return this.object[this.propertyName];
     }
     
+    this.onChange = function(fnc) {
+    	onChange = fnc;
+    }
+    
 	this.makeUnselectable = function(elem) {
 		elem.onselectstart = function() { return false; };
 		elem.style.MozUserSelect = "none";

demo/demo.css

@@ -18,7 +18,7 @@ h1 {
     font-weight: 800; 
     text-transform: lowercase;
     line-height: 80px;
-    margin: 20px 0 20px 0;
+    margin: 20px 0 30px 0;
 }
 
 h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@@ -33,6 +33,10 @@ h1 img {
     border-radius: 9px;
 }
 
+h2 { 
+font-size: 18px;
+}
+
 pre { 
     margin: 20px 0 20px 0;
     padding: 15px;
@@ -41,7 +45,7 @@ pre {
     font: 10px Monaco, monospace;
 }
 
-p { font-size: 125%; max-width: 530px; }
+p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; }
 
 a:link {
     color: #00aeff;
@@ -56,6 +60,12 @@ a:active {
     color: #54396e;
 }
 
+footer { 
+background-color: #eee;
+width: 510px;
+padding: 10px;
+}
+
 #columns {
     position: fixed;
     bottom: 0;
@@ -78,7 +88,7 @@ a:active {
 .lit { color: #00aeff; }
 .pun, .opn, .clo { color: #777; }
 .pln { color: #ccc; }
-.tag { color: #008; }
+.tag { color: #555; }
-.atn { color: #606; }
+.atn { color: #555; }
-.atv { color: #080; }
+.atv { color: #777; }
 .dec { color: #606; }

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

index.html

@@ -45,7 +45,7 @@
                GUI.add(controllableObject, "numberProperty");
 
                // Creates a slider (min, max)
-               GUI.add(controllableObject, "constrainedNum", 0, 16);
+               GUI.add(controllableObject, "constrainedNum", -100, 100);
 
                // Creates a slider with notches
                GUI.add(controllableObject, "notchedNum", 0, 800, 100);
@@ -60,7 +60,6 @@
                GUI.add(controllableObject, "functionProperty")
                   .setName("Fire a Function");
                
-
             };
         </script>
     </head>
@@ -69,53 +68,60 @@
         
         <div id = "helvetica-test"></div>
         <p>
-            is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
+            <strong>gui-dat</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
         </p>
         
+        <p>&bull; <a href="#"><strong>Download the minified source</strong></a> <small>[2.3kb]</small><br/>
+        &bull; <a href="http://github.com/jonobr1/GUI-DAT">Contribute on GitHub!</a></p>
+        
+        <h2>Basic Usage</h2>
+        
         <pre id="demo-pre" class="prettyprint">
+&lt;script type=&quot;text/javascript&quot; src=&quot;gui.min.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
 var controllableObject = 
    {   
-      numberProperty: 20,
+	  numberProperty: 20,
-      constrainedNum: 0,
+	  constrainedNum: 0,
-      notchedNum: 240,
+	  notchedNum: 240,
-      pageTitle: "gui-dat",
+	  textProperty: &quot;a string&quot;,
-      anotherTextProperty: "another string",
+	  anotherTextProperty: &quot;another string&quot;,
-      booleanProperty: false,
+	  booleanProperty: false,
-      anotherBooleanProperty: false,
+	  anotherBooleanProperty: false,
-      functionProperty: function() {
+	  functionProperty: function() {
-         alert("I am a function!");
+		 alert(&quot;I am a function!&quot;);
-      }
+	  }
    };
 
 window.onload = function() {
 
-   prettyPrint();
-
    GUI.start();
   
    // Creates a number box
-   GUI.add(controllableObject, "numberProperty");
+   GUI.add(controllableObject, &quot;numberProperty&quot;);
 
    // Creates a slider (min, max)
-   GUI.add(controllableObject, "constrainedNum", -100, 100)
+   GUI.add(controllableObject, &quot;constrainedNum&quot;, -100, 100)
    
    // Creates a slider with notches
-   GUI.add(controllableObject, "notchedNum", 0, 800, 100)
+   GUI.add(controllableObject, &quot;notchedNum&quot;, 0, 800, 100)
 
    // Creates a text field
-   GUI.add(controllableObject, "pageTitle");
+   GUI.add(controllableObject, &quot;textProperty&quot;);
 
    // Creates a checkbox
-   GUI.add(controllableObject, "booleanProperty");
+   GUI.add(controllableObject, &quot;booleanProperty&quot;);
 
    // Creates a button
-   GUI.add(controllableObject, "functionProperty")
+   GUI.add(controllableObject, &quot;functionProperty&quot;)
-      .setName("Fire a Function");
+      .setName(&quot;Fire a Function&quot;);
+
 };
-        </pre>
+
-        <footer>
+&lt;/script&gt;</pre>
+		<footer> 
             By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
         </footer> 
-        <div id = "columns"></div>
     </body>
 </html>