closing

example.html

@@ -7,7 +7,7 @@
   <script type="text/javascript">
     var obj = { x: 5 };
     var gui = new dat.GUI();
-    gui.add(obj, 'x', 0, 10);
+	gui.add(obj, 'x');	
   </script>
 </body>
 </html>

readme.wiki

@@ -82,8 +82,8 @@ _To export minified source using Closure Compiler, open {{{utils/build_gui.js}}}
 ----
 
 ==Thanks==
-The following libraries and open-source projects were used in the development of dat.GUI.
+The following libraries / open-source projects were used in the development of dat.GUI:
  * [http://requirejs.org/ require.js]
  * [http://sass-lang.com/ Sass]
  * [http://nodejs.org/ node.js]
- * [https://github.com/jquery/qunit QUnit] / [http://jquery.com jquery]
+ * [https://github.com/jquery/qunit QUnit] / [http://jquery.com/ jquery]

src/dat/controllers/FunctionController.js

@@ -35,8 +35,10 @@ define([
 
     this.__button = document.createElement('div');
     this.__button.innerHTML = text === undefined ? 'Fire' : text;
-    dom.bind(this.__button, 'click', function() {
+    dom.bind(this.__button, 'click', function(e) {
+      e.preventDefault();
       _this.fire();
+      return false;
     });
 
     dom.addClass(this.__button, 'button');

src/dat/gui/GUI.js

@@ -43,6 +43,9 @@ define([
 
   var HIDE_KEY_CODE = 72;
 
+  /** The only value shared between the JS and SCSS. Use caution. */
+  var CLOSE_BUTTON_HEIGHT = 20;
+
   var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
 
   var SUPPORTS_LOCAL_STORAGE = (function() {
@@ -197,7 +200,6 @@ define([
             }
           },
 
-
           /**
            * Handles <code>GUI</code>'s element placement for you
            * @type Boolean
@@ -285,7 +287,10 @@ define([
               // Lets just check our height against the window height right off
               // the bat.
               this.onResize();
-//              resetWidth();
+
+              if (_this.__closeButton) {
+                _this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED;
+              }
             }
           },
 
@@ -329,6 +334,7 @@ define([
     if (common.isUndefined(params.parent)) {
 
       params.closed = false;
+
       dom.addClass(this.domElement, GUI.CLASS_MAIN);
       dom.makeSelectable(this.domElement, false);
 
@@ -349,6 +355,19 @@ define([
 
       }
 
+      this.__closeButton = document.createElement('div');
+      this.__closeButton.innerHTML = GUI.TEXT_CLOSED;
+      dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
+      this.domElement.appendChild(this.__closeButton);
+
+      dom.bind(this.__closeButton, 'click', function() {
+
+        _this.closed = !_this.closed;
+
+
+      });
+
+
       // Oh, you're a nested GUI!
     } else {
 
@@ -363,7 +382,6 @@ define([
 
       var on_click_title = function(e) {
         e.preventDefault();
-        e.stopPropagation()
         _this.closed = !_this.closed;
         return false;
       };
@@ -420,7 +438,7 @@ define([
       localStorage.setItem(getLocalStorageHash(_this, 'gui'), JSON.stringify(_this.getSaveObject()));
     }
 
-    // Small hack to fix CSS positioning bug in Chrome
+    var root = _this.getRoot();
     function resetWidth() {
 	      var root = _this.getRoot();
 	      root.width += 1;
@@ -450,8 +468,12 @@ define([
   GUI.CLASS_CONTROLLER_ROW = 'cr';
   GUI.CLASS_TOO_TALL = 'taller-than-window';
   GUI.CLASS_CLOSED = 'closed';
+  GUI.CLASS_CLOSE_BUTTON = 'close-button';
+  GUI.CLASS_DRAG = 'drag';
 
   GUI.DEFAULT_WIDTH = 245;
+  GUI.TEXT_CLOSED = 'Close Controls';
+  GUI.TEXT_OPEN = 'Open Controls';
 
   dom.bind(window, 'keydown', function(e) {
 
@@ -573,44 +595,40 @@ define([
 
           var li = addRow(this, gui.domElement);
           dom.addClass(li, 'folder');
-
-          gui.open = function() {
-            this.closed = false;
-          };
-
-          gui.close = function() {
-            this.closed = true;
-          };
-
           return gui;
 
         },
 
-        onResize: function() {
+        open: function() {
+          this.closed = false;
+        },
 
+        close: function() {
+          this.closed = true;
+        },
+
+        onResize: function() {
 
           var root = this.getRoot();
 
-
           if (root.scrollable) {
 
-            var top = dom.getOffset(root.domElement).top;
+            var top = dom.getOffset(root.__ul).top;
-
             var h = 0;
+
             common.each(root.__ul.childNodes, function(node) {
+              if (! (root.autoPlace && node === root.__save_row))
                 h += dom.getHeight(node);
             });
 
-
+            if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) {
-            if (window.innerHeight < h) {
               dom.addClass(root.domElement, GUI.CLASS_TOO_TALL);
-              root.__ul.style.height = window.innerHeight - top + 'px';
+              root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px';
             } else {
               dom.removeClass(root.domElement, GUI.CLASS_TOO_TALL);
               root.__ul.style.height = 'auto';
             }
 
-
           }
 
           if (root.__resize_handle) {
@@ -619,6 +637,10 @@ define([
             });
           }
 
+          if (root.__closeButton) {
+            root.__closeButton.style.width = root.width + 'px';
+          }
+
         },
 
         /**
@@ -1201,6 +1223,7 @@ define([
     var pmouseX;
 
     dom.bind(gui.__resize_handle, 'mousedown', dragStart);
+    dom.bind(gui.__closeButton, 'mousedown', dragStart);
 
     gui.domElement.insertBefore(gui.__resize_handle, gui.domElement.firstElementChild);
 
@@ -1210,6 +1233,7 @@ define([
 
       pmouseX = e.clientX;
 
+      dom.addClass(gui.__closeButton, GUI.CLASS_DRAG);
       dom.bind(window, 'mousemove', drag);
       dom.bind(window, 'mouseup', dragStop);
 
@@ -1222,6 +1246,7 @@ define([
       e.preventDefault();
 
       gui.width += pmouseX - e.clientX;
+      gui.onResize();
       pmouseX = e.clientX;
 
       return false;
@@ -1230,6 +1255,7 @@ define([
 
     function dragStop() {
 
+      dom.removeClass(gui.__closeButton, GUI.CLASS_DRAG);
       dom.unbind(window, 'mousemove', drag);
       dom.unbind(window, 'mouseup', dragStop);
 
@@ -1243,6 +1269,8 @@ define([
     // set the width manually if we want it to bleed to the edge
     if (gui.__save_row && gui.autoPlace) {
       gui.__save_row.style.width = w + 'px';
+    }if (gui.__closeButton) {
+      gui.__closeButton.style.width = w + 'px';
     }
   }
 

src/dat/gui/_structure.scss

@@ -1,6 +1,8 @@
 $nest-margin: 4px;
 $row-height: 27px;
 
+$button-height: 20px;
+
 .dg {
 
   /** Clear list styles */
@@ -22,12 +24,60 @@ $row-height: 27px;
    z-index: 0;
   }
 
-  &.main {
+  &:not(.ac) .main {
-    @include transition(opacity, 0.1s, linear);
+    /** Exclude mains in ac so that we don't hide close button */
-    /*overflow-y: hidden;*/
+    overflow: hidden;
-    &.taller-than-window {
-      overflow-y: auto;
   }
+
+  &.main {
+
+    @include transition(opacity, 0.1s, linear);
+
+    &.taller-than-window {
+
+      overflow-y: auto;
+
+      .close-button {
+
+        opacity: 1;
+
+        /* TODO, these are style notes */
+        margin-top: -1px;
+        border-top: 1px solid $border-color;
+
+      }
+
+    }
+
+    ul.closed .close-button {
+      opacity: 1 !important;
+    }
+
+
+    &:hover .close-button,
+    .close-button.drag {
+      opacity: 1;
+    }
+
+    .close-button {
+      /*opacity: 0;*/
+      @include transition(opacity, 0.1s, linear);
+      border: 0;
+      position: absolute;
+
+      line-height: $button-height - 1;
+      height: $button-height;
+
+        /* TODO, these are style notes */
+      cursor: pointer;
+      text-align: center;
+      background-color: #000;
+      &:hover {
+        background-color: #111;
+      }
+
+    }
+
   }
 
   /* Auto-placed GUI's */
@@ -37,9 +87,14 @@ $row-height: 27px;
     margin-right: 15px;
     overflow-x: hidden;
 
-    &.has-save {
+    &.has-save ul {
       margin-top: $row-height;
+      &.closed {
+        margin-top: 0;
       }
+    }
+
+
 
     .save-row {
       position: fixed;
@@ -49,6 +104,10 @@ $row-height: 27px;
 
   }
 
+  li {   
+    @include transition(height, 0.1s, ease-out);
+  }
+
   /* Line items that don't contain folders. */
   li:not(.folder) {
     cursor: auto;
@@ -56,7 +115,6 @@ $row-height: 27px;
     line-height: $row-height;
     overflow: hidden;
     padding: 0 4px 0 5px;
-    @include transition(height, 0.1s, ease-out);
   }
 
   li.folder {   
@@ -155,6 +213,7 @@ $row-height: 27px;
     position: absolute;
     margin-left: -9px;
     margin-top: 23px;
+    z-index: 10;
   }
 
 
@@ -183,6 +242,7 @@ $row-height: 27px;
     line-height: 15px;
   }
 
+
 }
 
 /* TODO Separate style and structure */

src/dat/gui/style.scss

@@ -10,7 +10,7 @@ $string-color: #1ed36f;
 $function-color: #e61d5f;
 $save-row-color: #dad5cb;
 $button-color: darken($save-row-color, 10%);
-
+$border-color: lighten($background-color, $border-lighten);
 $input-color: lighten($background-color, 8.5%);
 
 @mixin transition($prop, $time, $curve) {
@@ -79,7 +79,7 @@ $input-color: lighten($background-color, 8.5%);
 
     &:not(.folder) {
       background: $background-color;
-      border-bottom: 1px solid lighten($background-color, $border-lighten);
+      border-bottom: 1px solid $border-color;
     }
 
     &.save-row {

tests/index.html

@@ -1034,7 +1034,8 @@
 
       var gui = new GUI();
 
-      while (dom.getHeight(gui.domElement) < window.innerHeight) {
+      // Add a lot of controllers. This will fail if you have some freakishly tall monitor.
+      for (var i = 0; i < 50; i++) {
         gui.add({ x: 0 }, 'x');
       }
 
@@ -1395,6 +1396,7 @@
 
     }
  
+  
 });
 </script>