This commit is contained in:
George Michael Brower 2011-11-07 19:31:28 -08:00
parent d3b01eef71
commit e3fa6b31c2
10 changed files with 240 additions and 117 deletions

File diff suppressed because one or more lines are too long

73
build/dat.gui.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

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

View File

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

View File

@ -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,18 +438,18 @@ 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;
common.defer(function() {
root.width -= 1;
});
}
var root = _this.getRoot();
root.width += 1;
common.defer(function() {
root.width -= 1;
});
}
if (!params.parent) {
resetWidth();
}
if (!params.parent) {
resetWidth();
}
};
@ -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) {
h += dom.getHeight(node);
if (! (root.autoPlace && node === root.__save_row))
h += dom.getHeight(node);
});
if (window.innerHeight < h) {
if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < 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';
}
}

View File

@ -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;
}
&:not(.ac) .main {
/** Exclude mains in ac so that we don't hide close button */
overflow: hidden;
}
&.main {
@include transition(opacity, 0.1s, linear);
/*overflow-y: hidden;*/
&.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,10 +87,15 @@ $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;
top: 0;
@ -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,13 +213,14 @@ $row-height: 27px;
position: absolute;
margin-left: -9px;
margin-top: 23px;
z-index: 10;
}
.c:hover .selector,
.selector.drag {
display: block;
}
}
li.save-row {
@ -183,6 +242,7 @@ $row-height: 27px;
line-height: 15px;
}
}
/* TODO Separate style and structure */

File diff suppressed because one or more lines are too long

View File

@ -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 {

View File

@ -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>