Moved everything to the DAT namespace, and officially renamed the pro…

…ject dat.gui :)
dataarts · Apr 18, 2011 · 561b4a1 · 561b4a1
1 parent 446da7b
commit 561b4a1
Show file tree

Hide file tree

Showing 10 changed files with 632 additions and 627 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-GUIDAT.tmproj
+.idea
diff --git a/demo/demo.js b/demo/demo.js
@@ -26,7 +26,7 @@ function FizzyText(message) {
         createBitmap(message);
     });
 
-    // We can even add functions to the GUI! As long as they have 
+    // We can even add functions to the DAT.GUI! As long as they have
     // 0 arguments, we can call them from the dat-gui panel.
 
     this.explode = function() {
@@ -205,7 +205,7 @@ function FizzyText(message) {
             this.x += Math.cos(angle) * _this.speed + this.vx;
             this.y += -Math.sin(angle) * _this.speed + this.vy;
 
-            this.r = GUI.constrain(this.r, 0, _this.maxSize);
+            this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize);
 
             // If we're tiny, keep moving around until we find a black
             // pixel.

diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <head>
-  <title>gui-dat</title>
+  <title>dat.gui</title>
 
   <link rel="icon" type="image/png" href="demo/assets/favicon.png" />
   <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
@@ -25,9 +25,9 @@
 
                         prettyPrint();
 
-                        var fizzyText = new FizzyText("gui-dat");
+                        var fizzyText = new FizzyText("dat.gui");
 
-                        var gui = new GUI();
+                        var gui = new DAT.GUI();
 
                         // Text field
                         gui.add(fizzyText, "message");
@@ -107,20 +107,20 @@
 <body>
   <div id="container">
 
-    <!-- GUIDAT logo -->
+    <!-- DAT.GUIDAT logo -->
     <div id="helvetica-demo"></div>
 
     <!-- It gives you this! -->
     <div id="notifier"></div>
 
-    <h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="GUI-DAT flag" /></a></h1>
+    <h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="dat.gui flag" /></a></h1>
 
-    <p><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><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/gui-dat/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>[11kb]</small></li>
 
-      <li><a href="http://github.com/jonobr1/gui-dat">Contribute on GitHub!</a></li>
+      <li><a href="http://github.com/jonobr1/dat.gui">Contribute on GitHub!</a></li>
     </ul>
 
     <h2>Basic Usage</h2>
@@ -130,9 +130,9 @@ <h2>Basic Usage</h2>
 
 window.onload = function() {
 
-   var fizzyText = new <a href="demo/demo.js">FizzyText</a>("gui-dat");
+   var fizzyText = new <a href="demo/demo.js">FizzyText</a>("dat.gui");
 
-   var gui = new GUI();
+   var gui = new DAT.GUI();
 
    // Text field
    gui.add(fizzyText, "message");
@@ -157,7 +157,7 @@ <h2>Basic Usage</h2>
 </pre>
 
     <ul id="desc">
-      <li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br />
+      <li><strong>dat.gui</strong> will infer the type of the property you're trying to add<br />
       (based on its initial value) and create the corresponding control.</li>
 
       <li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
@@ -173,10 +173,10 @@ <h2 class="collapsed">Fire a function when someone uses a control</h2>
         <h2 class="section">Saving your parameters</h2>
         <div class="collapsable">
             <div>
-                <p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
+                <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(GUI, "saveURL");</pre>
+gui.add(DAT.GUI, "saveURL");</pre>
             </div>
         </div>
     </div>
@@ -186,22 +186,22 @@ <h2 class="section">Advanced saving</h2>
             <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>GUI.showSaveString()</code> to a gui object:</p>
-                <pre class="prettyprint">var gui = new 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");
 
 // Make a save button.
-gui.add(GUI, "showSaveString");</pre>
+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>GUI.load()</code> before you instantiate any gui objects.</p>
+            <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()
-GUI.load("COPIED STRING");
+DAT.GUI.load("COPIED STRING");
 
-var gui = new GUI();
+var gui = new DAT.GUI();
 
 // Now these properties will be set to the values you just saved.
 gui.add(someObject, "someProperty");
@@ -239,7 +239,7 @@ <h2 class="section">Listen for variable changes inside the GUI</h2>
 });</pre>
                 <p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p>
                 <pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
-   alert("You called a function with gui-dat");
+   alert("You called a function with dat.gui");
 });</pre>
             </div>
         </div>
@@ -248,7 +248,7 @@ <h2 class="section">Listen for variable changes inside the GUI</h2>
         <h2 class="section">Listen for variable changes outside of the GUI</h2>
         <div class="collapsable">
             <div>
-                <p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
+                <p>Let's say you have a variable that changes by itself from time to time. If you'd like the DAT.GUI to reflect those changes, use the <code>listen()</code> method.</p>
                 <pre class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
             </div>
         </div>
@@ -258,7 +258,7 @@ <h2 class="section">Listen for variable changes outside of the GUI</h2>
         <h2 class="section">Advanced listening</h2>
         <div class="collapsable">
             <div>
-                <p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
+                <p>By default, <strong>dat.gui</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
                 <pre class="prettyprint">
 gui.autoListen = false; // disables internal interval
 gui.add(obj, "changingProperty").listen();
@@ -287,21 +287,21 @@ <h2 class="section">Advanced listening</h2>
         <h2 class="section">Multiple panels and custom placement</h2>
         <div class="collapsable">
             <div>
-                <p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
-                <pre class="prettyprint">var gui1 = new GUI();
-var gui2 = new GUI();
+                <p>You can instantiate multiple <code>DAT.GUI</code> objects and name them however you'd like.</p>
+                <pre class="prettyprint">var gui1 = new DAT.GUI();
+var gui2 = new DAT.GUI();
 
 // The name function overwrites the "Show Controls" text.
 gui1.name("Utilities");
 gui2.name("Camera Placement");</pre>
 
-                <p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
+                <p>By default, <strong>dat.gui</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
                 <pre class="prettyprint last">
-// Notice this belongs to the GUI class (uppercase) 
+// Notice this belongs to the DAT.GUI class (uppercase)
 // and not an instance thereof.
-GUI.autoPlace = false; 
+DAT.GUI.autoPlace = false;
 
-var gui = new GUI();
+var gui = new DAT.GUI();
 
 // Do some custom styles ...
 gui.domElement.style.position = "absolute";
@@ -318,7 +318,7 @@ <h2 class="section">Pro tips.</h2>
         <div class="collapsable">
             <div>
                 <ol id="secrets">
-                  <li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
+                  <li><strong>dat.gui</strong> panels are resizeable. Drag the show/hide button.</li>
 
                   <li>Press 'H' to show/hide GUI&apos;s.</li>
                 </ol>

diff --git a/src/controllers/boolean.js b/src/controllers/boolean.js
@@ -1,7 +1,7 @@
-GUI.BooleanController = function() {
+DAT.GUI.BooleanController = function() {
 
     this.type = "boolean";
-    GUI.Controller.apply(this, arguments);
+    DAT.GUI.Controller.apply(this, arguments);
 
     var _this = this;
     var input = document.createElement('input');
@@ -40,8 +40,8 @@ GUI.BooleanController = function() {
                 val = eval(val);
             } catch (e) {}
         }
-        return GUI.Controller.prototype.setValue.call(this, val);
+        return DAT.GUI.Controller.prototype.setValue.call(this, val);
     };
 
 };
-GUI.extendController(GUI.BooleanController);
+DAT.GUI.extendController(DAT.GUI.BooleanController);
diff --git a/src/controllers/controller.js b/src/controllers/controller.js
@@ -1,4 +1,4 @@
-GUI.Controller = function() {
+DAT.GUI.Controller = function() {
 
     this.parent = arguments[0];
     this.object = arguments[1];
@@ -14,34 +14,34 @@ GUI.Controller = function() {
     this.name(this.propertyName);
     this.domElement.appendChild(this.propertyNameElement);
 
-    GUI.makeUnselectable(this.domElement);
+    DAT.GUI.makeUnselectable(this.domElement);
 
 };
 
-GUI.Controller.prototype.changeFunction = null;
-GUI.Controller.prototype.finishChangeFunction = null;
+DAT.GUI.Controller.prototype.changeFunction = null;
+DAT.GUI.Controller.prototype.finishChangeFunction = null;
 
-GUI.Controller.prototype.name = function(n) {
+DAT.GUI.Controller.prototype.name = function(n) {
     this.propertyNameElement.innerHTML = n;
     return this;
 };
 
-GUI.Controller.prototype.reset = function() {
+DAT.GUI.Controller.prototype.reset = function() {
     this.setValue(this.initialValue);
     return this;
 };
 
-GUI.Controller.prototype.listen = function() {
+DAT.GUI.Controller.prototype.listen = function() {
     this.parent.listenTo(this);
     return this;
 };
 
-GUI.Controller.prototype.unlisten = function() {
+DAT.GUI.Controller.prototype.unlisten = function() {
     this.parent.unlistenTo(this); // <--- hasn't been tested yet
     return this;
 };
 
-GUI.Controller.prototype.setValue = function(n) {
+DAT.GUI.Controller.prototype.setValue = function(n) {
     this.object[this.propertyName] = n;
     if (this.changeFunction != null) {
         this.changeFunction.call(this, n);
@@ -50,23 +50,23 @@ GUI.Controller.prototype.setValue = function(n) {
     return this;
 };
 
-GUI.Controller.prototype.getValue = function() {
+DAT.GUI.Controller.prototype.getValue = function() {
     return this.object[this.propertyName];
 };
 
-GUI.Controller.prototype.updateDisplay = function() {};
+DAT.GUI.Controller.prototype.updateDisplay = function() {};
 
-GUI.Controller.prototype.onChange = function(fnc) {
+DAT.GUI.Controller.prototype.onChange = function(fnc) {
     this.changeFunction = fnc;
     return this;
 };
 
-GUI.Controller.prototype.onFinishChange = function(fnc) {
+DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
     this.finishChangeFunction = fnc;
     return this;
 };
 
-GUI.Controller.prototype.options = function() {
+DAT.GUI.Controller.prototype.options = function() {
     var _this = this;
     var select = document.createElement('select');
     if (arguments.length == 1) {

diff --git a/src/controllers/function.js b/src/controllers/function.js
@@ -1,10 +1,10 @@
-GUI.FunctionController = function() {
+DAT.GUI.FunctionController = function() {
 
     this.type = "function";
 
     var _this = this;
 
-    GUI.Controller.apply(this, arguments);
+    DAT.GUI.Controller.apply(this, arguments);
 
     this.domElement.addEventListener('click', function() {
         _this.fire();
@@ -26,4 +26,4 @@ GUI.FunctionController = function() {
         _this.object[_this.propertyName].call(_this.object);
     };
 };
-GUI.extendController(GUI.FunctionController);
+DAT.GUI.extendController(DAT.GUI.FunctionController);
diff --git a/src/controllers/number.js b/src/controllers/number.js
@@ -1,8 +1,8 @@
-GUI.NumberController = function() {
+DAT.GUI.NumberController = function() {
 
     this.type = "number";
 
-    GUI.Controller.apply(this, arguments);
+    DAT.GUI.Controller.apply(this, arguments);
 
     var _this = this;
 
@@ -38,7 +38,7 @@ GUI.NumberController = function() {
     var slider;
 
     if (min != undefined && max != undefined) {
-        slider = new GUI.Slider(this, min, max, step, this.getValue());
+        slider = new DAT.GUI.Slider(this, min, max, step, this.getValue());
         this.domElement.appendChild(slider.domElement);
     }
 
@@ -83,8 +83,8 @@ GUI.NumberController = function() {
 
     var mouseup = function(e) {
         document.removeEventListener('mousemove', dragNumberField, false);
-        GUI.makeSelectable(_this.parent.domElement);
-        GUI.makeSelectable(numberField);
+        DAT.GUI.makeSelectable(_this.parent.domElement);
+        DAT.GUI.makeSelectable(numberField);
         if (clickedNumberField && !draggedNumberField) {
             numberField.focus();
             numberField.select();
@@ -107,8 +107,8 @@ GUI.NumberController = function() {
         // Or any other fields in this gui for that matter ...
         // TODO: Make makeUselectable go through each element and child element.
 
-        GUI.makeUnselectable(_this.parent.domElement);
-        GUI.makeUnselectable(numberField);
+        DAT.GUI.makeUnselectable(_this.parent.domElement);
+        DAT.GUI.makeUnselectable(numberField);
 
         if(slider) slider.domElement.className += ' active';
 
@@ -123,7 +123,7 @@ GUI.NumberController = function() {
     this.options = function() {
         _this.noSlider();
         _this.domElement.removeChild(numberField);
-        return GUI.Controller.prototype.options.apply(this, arguments);
+        return DAT.GUI.Controller.prototype.options.apply(this, arguments);
     };
 
     this.noSlider = function() {
@@ -143,14 +143,14 @@ GUI.NumberController = function() {
             val = max;
         }
 
-        return GUI.Controller.prototype.setValue.call(this, val);
+        return DAT.GUI.Controller.prototype.setValue.call(this, val);
 
     };
 
     this.updateDisplay = function() {
-        numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
+        numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
         if (slider) slider.value = _this.getValue();
     };
 };
 
-GUI.extendController(GUI.NumberController);
+DAT.GUI.extendController(DAT.GUI.NumberController);