Merge branch 'master' of https://github.com/jonobr1/gui-dat

demo/demo.css

@@ -55,6 +55,7 @@ h2.section {
   border-top: 1px dotted #ccc;
   -webkit-transition: color 0.15s linear;
 }
+
 h2.section:hover {
   color: #00aeff;
 }
@@ -67,23 +68,32 @@ div.collapsed h2, div.expanded h2 {
   cursor: pointer;
 }
 
-.last { margin-bottom: 0px !important; }
+.last {
-.first { margin-top: 0px; }
+  margin-bottom: 0px !important;
+}
+
+.first {
+  margin-top: 0px;
+}
 
 div.trans {
   border-top: 1px dotted #ccc;
   margin: 0px 0px 20px 0px;
 }
+
 ol#secrets {
   padding: 0px;
   margin: 0px;
 }
+
 div.expanded h2:before {
   content: '-';
 }
+
 div.collapsed h2:before {
   content: '+';
 }
+
 div.expanded h2:before, div.collapsed h2:before {
   font-weight: normal;
   line-height: 2px;
@@ -97,6 +107,7 @@ div.expanded h2:before, div.collapsed h2:before {
 div.collapsable>div {
   padding-bottom: 10px;
 }
+
 div.collapsable {
   overflow: hidden;
   clear: both;
@@ -117,7 +128,9 @@ div.collapsed .collapsable {
   height: 0;
 }
 
-div.expanded { cursor: pointer; }
+div.expanded {
+  cursor: pointer;
+}
 
 #helvetica-demo {
   position: absolute;
@@ -131,7 +144,7 @@ div.expanded { cursor: pointer; }
 #notifier {
   position: fixed;
   right: 0;
-    top: 0;
+  top: 300px;
   width: 271px;
   height: 142px;
   background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
@@ -207,15 +220,46 @@ code strong {
   color: #e61d5f;
 }
 
-/* SPAN elements with the classes below are added by prettyprint. */
+.str {
-.str { color: #0fa954; }
+  color: #0fa954;
-.kwd { color: #e61d5f; }
+}
-.com { color: #555; }
+
-.typ { color: #ccc; }
+.kwd {
-.lit { color: #00aeff; }
+  color: #e61d5f;
-.pun, .opn, .clo { color: #777; }
+}
-.pln { color: #ccc; }
+
-.tag { color: #555; }
+.com {
-.atn { color: #555; }
+  color: #555;
-.atv { color: #777; }
+}
-.dec { color: #606; }
+
+.typ {
+  color: #ccc;
+}
+
+.lit {
+  color: #00aeff;
+}
+
+.pun, .opn, .clo {
+  color: #777;
+}
+
+.pln {
+  color: #ccc;
+}
+
+.tag {
+  color: #555;
+}
+
+.atn {
+  color: #555;
+}
+
+.atv {
+  color: #777;
+}
+
+.dec {
+  color: #606;
+}

demo/demo.js

@@ -10,7 +10,7 @@ function FizzyText(message) {
   this.maxSize = 3.2;           // how big can they get?
   this.noiseStrength = 10;      // how turbulent is the flow?
   this.speed = 0.4;             // how fast do particles move?
-  this.displayOutline = true;  // should we draw the message as a stroke?
+  this.displayOutline = false;  // should we draw the message as a stroke?
   this.framesRendered = 0;
 
   // __defineGetter__ and __defineSetter__ makes JavaScript believe that

index.html

@@ -6,15 +6,18 @@
   <link rel="icon" type="image/png" href="demo/assets/favicon.png"/>
   <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css"/>
 
-  <link href="src/dat/gui.css" media="screen" rel="stylesheet" type="text/css"
+  <link href="src/DAT/GUI/gui.css" media="screen" rel="stylesheet"
-      />
+        type="text/css"/>
-  <script type="text/javascript" src="src/dat/GUI.js"></script>
+
-  <script type="text/javascript" src="src/dat/Slider.js"></script>
+  <script type="text/javascript" src="src/DAT/GUI/GUI.js"></script>
-  <script type="text/javascript" src="src/dat/Controller.js"></script>
+  <script type="text/javascript" src="src/DAT/GUI/Slider.js"></script>
-  <script type="text/javascript" src="src/dat/ControllerBoolean.js"></script>
+  <script type="text/javascript" src="src/DAT/GUI/Controller.js"></script>
-  <script type="text/javascript" src="src/dat/ControllerFunction.js"></script>
+  <script type="text/javascript"
-  <script type="text/javascript" src="src/dat/ControllerNumber.js"></script>
+          src="src/DAT/GUI/ControllerBoolean.js"></script>
-  <script type="text/javascript" src="src/dat/ControllerString.js"></script>
+  <script type="text/javascript"
+          src="src/DAT/GUI/ControllerFunction.js"></script>
+  <script type="text/javascript" src="src/DAT/GUI/ControllerNumber.js"></script>
+  <script type="text/javascript" src="src/DAT/GUI/ControllerString.js"></script>
 
   <script type="text/javascript" src="demo/improvedNoise.js"></script>
   <script type="text/javascript" src="demo/prettify.js"></script>
@@ -78,7 +81,8 @@
           var element;
           for (var i = 0; (element = allElements[i]) != null; i++) {
             var elementClass = element.className;
-            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
+            if (elementClass && elementClass.indexOf(className) != -1 &&
+                hasClassName.test(elementClass))
               results.push(element);
           }
 

src/DAT/GUI/Controller.js

@@ -76,6 +76,9 @@ DAT.GUI.Controller.prototype.options = function() {
       var opt = document.createElement('option');
       opt.innerHTML = i;
       opt.setAttribute('value', arr[i]);
+      if (arguments[i] == this.getValue()) {
+        opt.selected = true;
+      }
       select.appendChild(opt);
     }
   } else {
@@ -83,6 +86,9 @@ DAT.GUI.Controller.prototype.options = function() {
       var opt = document.createElement('option');
       opt.innerHTML = arguments[i];
       opt.setAttribute('value', arguments[i]);
+      if (arguments[i] == this.getValue()) {
+        opt.selected = true;
+      }
       select.appendChild(opt);
     }
   }

src/DAT/GUI/ControllerNumber.js

@@ -20,13 +20,9 @@ DAT.GUI.ControllerNumber = function() {
   var max = arguments[4];
   var step = arguments[5];
 
-  if (!step) {
+  var defaultStep = function() {
-    if (min != undefined && max != undefined) {
       step = (max - min) * 0.01;
-    } else {
+  };
-      step = 1;
-    }
-  }
 
   this.min = function() {
     var needsSlider = false;
@@ -40,6 +36,9 @@ DAT.GUI.ControllerNumber = function() {
     }
     if (needsSlider) {
       addSlider();
+      if (step == undefined) {
+        defaultStep();
+      }
     }
     return _this;
   };
@@ -56,6 +55,9 @@ DAT.GUI.ControllerNumber = function() {
     }
     if (needsSlider) {
       addSlider();
+      if (step == undefined) { 
+        defaultStep();
+      }
     }
     return _this;
   };
@@ -69,6 +71,18 @@ DAT.GUI.ControllerNumber = function() {
     return _this;
   };
 
+  this.getMin = function() {
+    return min;
+  };
+
+  this.getMax = function() {
+    return max;
+  };
+  
+  this.getStep = function() {
+    return step || 1;
+  }
+
   var numberField = document.createElement('input');
   numberField.setAttribute('id', this.propertyName);
   numberField.setAttribute('type', 'text');

src/DAT/GUI/ControllerString.js

@@ -26,11 +26,16 @@ DAT.GUI.ControllerString = function() {
   }, false);
 
   input.addEventListener('blur', function() {
+    DAT.GUI.supressHotKeys = false;
     if (_this.finishChangeFunction != null) {
       _this.finishChangeFunction.call(this, _this.getValue());
     }
   }, false);
 
+  input.addEventListener('focus', function() {
+    DAT.GUI.supressHotKeys = true;
+  }, false);
+
   this.updateDisplay = function() {
     input.value = _this.getValue();
   };

src/DAT/GUI/GUI.js

@@ -6,6 +6,10 @@ DAT.GUI = function(parameters) {
     parameters = {};
   }
 
+  if (parameters.height == undefined) {
+    parameters.height = 300;
+  }
+
   var MIN_WIDTH = 240;
   var MAX_WIDTH = 500;
 
@@ -19,11 +23,9 @@ DAT.GUI = function(parameters) {
   // Sum total of heights of controllers in this gui
   var controllerHeight;
 
-  var curControllerContainerHeight = 0;
-
   var _this = this;
 
-  var open = false;
+  var open = true;
   var width = 280;
 
   // Prevents checkForOverflow bug in which loaded gui appearance
@@ -45,9 +47,10 @@ DAT.GUI = function(parameters) {
   this.domElement.setAttribute('class', 'guidat');
   this.domElement.style.width = width + 'px';
 
+  var curControllerContainerHeight = parameters.height;
   var controllerContainer = document.createElement('div');
   controllerContainer.setAttribute('class', 'guidat-controllers');
-  controllerContainer.style.height = '0px';
+  controllerContainer.style.height = curControllerContainerHeight + 'px';
 
   // Firefox hack to prevent horizontal scrolling
   controllerContainer.addEventListener('DOMMouseScroll', function(e) {
@@ -71,11 +74,10 @@ DAT.GUI = function(parameters) {
   }, false);
 
 
-
   var toggleButton = document.createElement('a');
   toggleButton.setAttribute('class', 'guidat-toggle');
   toggleButton.setAttribute('href', '#');
-  toggleButton.innerHTML = openString;
+  toggleButton.innerHTML = open ? closeString : openString;
 
   var toggleDragged = false;
   var dragDisplacementY = 0;
@@ -357,13 +359,10 @@ DAT.GUI = function(parameters) {
     'function': DAT.GUI.ControllerFunction
   };
 
-
   this.reset = function() {
     // TODO ... Set all values back to their initials.
   }
 
-  // DAT.GUI ... DAT.GUI
-
   this.toggle = function() {
     open ? this.close() : this.open();
   };
@@ -373,6 +372,7 @@ DAT.GUI = function(parameters) {
     resizeTo = openHeight;
     clearTimeout(resizeTimeout);
     beginResize();
+      adaptToScrollbar();
     open = true;
   }
 
@@ -381,6 +381,7 @@ DAT.GUI = function(parameters) {
     resizeTo = 0;
     clearTimeout(resizeTimeout);
     beginResize();
+      adaptToScrollbar();
     open = false;
   }
 
@@ -396,13 +397,12 @@ DAT.GUI = function(parameters) {
 
   var beginResize = function() {
 
+    curControllerContainerHeight = controllerContainer.offsetHeight;
     curControllerContainerHeight += (resizeTo - curControllerContainerHeight)
         * 0.6;
 
     if (Math.abs(curControllerContainerHeight - resizeTo) < 1) {
       curControllerContainerHeight = resizeTo;
-      adaptToScrollbar();
-
     } else {
       resizeTimeout = setTimeout(beginResize, 1000 / 30);
     }
@@ -413,15 +413,14 @@ DAT.GUI = function(parameters) {
   }
 
   var adaptToScrollbar = function() {
-    // Clears lingering slider column
+    // Clears lingering scrollbar column
-    _this.domElement.style.width = (width + 1) + 'px';
+    _this.domElement.style.width = (width - 1) + 'px';
     setTimeout(function() {
       _this.domElement.style.width = width + 'px';
     }, 1);
   };
 
 
-
   // Load saved appearance:
 
   if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) {
@@ -453,13 +452,23 @@ DAT.GUI = function(parameters) {
   DAT.GUI.allGuis.push(this);
 
   // Add hide listener if this is the first DAT.GUI.
+
   if (DAT.GUI.allGuis.length == 1) {
+
     window.addEventListener('keyup', function(e) {
       // Hide on 'H'
-      if (e.keyCode == 72) {
+      if (!DAT.GUI.supressHotKeys && e.keyCode == 72) {
         DAT.GUI.toggleHide();
       }
     }, false);
+
+    if (DAT.GUI.inlineCSS) {
+      var styleSheet = document.createElement('style');
+      styleSheet.setAttribute('type', 'text/css');
+      styleSheet.innerHTML = DAT.GUI.inlineCSS;
+      document.head.appendChild(styleSheet);
+    }
+
   }
 
 };
@@ -474,6 +483,7 @@ DAT.GUI.autoPlaceContainer = null;
 DAT.GUI.allControllers = [];
 DAT.GUI.allGuis = [];
 
+DAT.GUI.supressHotKeys = false;
 
 DAT.GUI.toggleHide = function() {
   if (DAT.GUI.hidden) {
@@ -524,8 +534,7 @@ DAT.GUI.savedAppearanceVars = [];
 
 DAT.GUI.getSaveString = function() {
 
-  var vals = [],
+  var vals = [], i;
-      i;
 
   vals.push(DAT.GUI.allGuis.length);
   vals.push(document.body.scrollTop);

src/DAT/GUI/Slider.js

@@ -17,8 +17,9 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
     if (!clicked) return;
     var pos = findPos(_this.domElement);
     var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
-        .offsetWidth, min, max);
+        .offsetWidth, numberController.getMin(), numberController.getMax());
-    val = Math.round(val / step) * step;
+    val = Math.round(val / numberController.getStep()) * numberController
+        .getStep();
     numberController.setValue(val);
   };
 
@@ -34,7 +35,8 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
     DAT.GUI.removeClass(numberController.domElement, 'active');
     clicked = false;
     if (numberController.finishChangeFunction != null) {
-      numberController.finishChangeFunction.call(this, numberController.getValue());
+      numberController.finishChangeFunction.call(this,
+          numberController.getValue());
     }
     document.removeEventListener('mouseup', mouseup, false);
   };
@@ -51,8 +53,8 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
   };
 
   this.__defineSetter__('value', function(e) {
-    var pct = DAT.GUI.map(e, min, max, 0, 100);
+    this.fg.style.width = DAT.GUI.map(e, numberController.getMin(),
-    this.fg.style.width = pct + "%";
+        numberController.getMax(), 0, 100) + "%";
   });
 
   document.addEventListener('mousemove', onDrag, false);