diff --git a/demo/demo.css b/demo/demo.css
index 4344df3..e157a21 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -1,221 +1,265 @@
* {
- padding: 0px;
- margin: 0px;
+ padding: 0px;
+ margin: 0px;
}
-body {
- font: 9.5px/13px Lucida Grande, sans-serif;
- padding: 0 20px 20px 20px;
+body {
+ font: 9.5px/13px Lucida Grande, sans-serif;
+ padding: 0 20px 20px 20px;
}
-#container {
-max-width: 530px;
+#container {
+ max-width: 530px;
}
h1, h2, h3, h4, h5, h6 {
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
- color: #222;
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
+ color: #222;
}
-hr {
-border: 0;
-height: 0;
-border-top: 1px dotted #ccc;
+hr {
+ border: 0;
+ height: 0;
+ border-top: 1px dotted #ccc;
}
-h1 {
- font-size: 80px;
- font-weight: 800;
- text-transform: lowercase;
- line-height: 80px;
- margin: 39px 0 20px 0;
+h1 {
+ font-size: 80px;
+ font-weight: 800;
+ text-transform: lowercase;
+ line-height: 80px;
+ margin: 39px 0 20px 0;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
- text-decoration: none;
- margin-right: 7px;
+ text-decoration: none;
+ margin-right: 7px;
}
-h1 img {
- width: 45px;
- height: 45px;
- margin-bottom: 8px;
+h1 img {
+ width: 45px;
+ height: 45px;
+ margin-bottom: 8px;
}
-h2 {
- margin-top: 30px;
- font-size: 18px;
- margin-bottom: 24px;
+h2 {
+ margin-top: 30px;
+ font-size: 18px;
+ margin-bottom: 24px;
}
-h2.section {
- margin: 0;
- padding: 20px 0px 20px 0px;
- cursor: pointer;
- border-top: 1px dotted #ccc;
- -webkit-transition: color 0.15s linear;
-}
-h2.section:hover {
- color: #00aeff;
+h2.section {
+ margin: 0;
+ padding: 20px 0px 20px 0px;
+ cursor: pointer;
+ border-top: 1px dotted #ccc;
+ -webkit-transition: color 0.15s linear;
}
-div.collapsed h2, div.expanded h2 {
-
- float: left;
- clear: both;
- width: 100%;
- cursor: pointer;
+h2.section:hover {
+ color: #00aeff;
}
-.last { margin-bottom: 0px !important; }
-.first { margin-top: 0px; }
+div.collapsed h2, div.expanded h2 {
+
+ float: left;
+ clear: both;
+ width: 100%;
+ cursor: pointer;
+}
+
+.last {
+ margin-bottom: 0px !important;
+}
+
+.first {
+ margin-top: 0px;
+}
div.trans {
- border-top: 1px dotted #ccc;
- margin: 0px 0px 20px 0px;
+ border-top: 1px dotted #ccc;
+ margin: 0px 0px 20px 0px;
}
+
ol#secrets {
- padding: 0px;
- margin: 0px;
+ padding: 0px;
+ margin: 0px;
}
+
div.expanded h2:before {
- content: '-';
+ content: '-';
}
-div.collapsed h2:before {
- content: '+';
+
+div.collapsed h2:before {
+ content: '+';
}
+
div.expanded h2:before, div.collapsed h2:before {
- font-weight: normal;
- line-height: 2px;
- float: left;
- margin-top: 6px;
- margin-right: 6px;
- font-size: 9px;
- font-family: Monaco, monospace;
+ font-weight: normal;
+ line-height: 2px;
+ float: left;
+ margin-top: 6px;
+ margin-right: 6px;
+ font-size: 9px;
+ font-family: Monaco, monospace;
}
div.collapsable>div {
- padding-bottom: 10px;
+ padding-bottom: 10px;
}
+
div.collapsable {
- overflow: hidden;
- clear: both;
- -moz-transition: height .2s ease-out;
- -webkit-transition: height .2s ease-out;
- transition: height .2s ease-out;
+ overflow: hidden;
+ clear: both;
+ -moz-transition: height .2s ease-out;
+ -webkit-transition: height .2s ease-out;
+ transition: height .2s ease-out;
}
div.collapsable div {
- padding-bottom: 20px;
- margin-bottom: -20px;
- height: auto;
+ padding-bottom: 20px;
+ margin-bottom: -20px;
+ height: auto;
}
div.collapsed .collapsable {
- overflow: hidden;
- clear: both;
- height: 0;
+ overflow: hidden;
+ clear: both;
+ height: 0;
}
-div.expanded { cursor: pointer; }
+div.expanded {
+ cursor: pointer;
+}
#helvetica-demo {
- position: absolute;
- left: 0;
- top: 0;
- width: 800;
- height: 300;
- z-index: -1;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 800;
+ height: 300;
+ z-index: -1;
}
#notifier {
- position: fixed;
- right: 0;
- top: 0;
- width: 271px;
- height: 142px;
- background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
- z-index: -2;
- margin: 30px 22px 0 0;
+ position: fixed;
+ right: 0;
+ top: 300px;
+ width: 271px;
+ height: 142px;
+ background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
+ z-index: -2;
+ margin: 30px 22px 0 0;
}
-pre {
- margin: 20px 0 20px 0;
- padding: 15px;
- background-color: #222;
- max-width: 500px;
- font: 10px Monaco, monospace;
- clear: both;
+pre {
+ margin: 20px 0 20px 0;
+ padding: 15px;
+ background-color: #222;
+ max-width: 500px;
+ font: 10px Monaco, monospace;
+ clear: both;
}
-p, ul, ol {
- font-size: 125%;
- clear: both;
- line-height: 18px;
- margin-bottom: 24px;
+p, ul, ol {
+ font-size: 125%;
+ clear: both;
+ line-height: 18px;
+ margin-bottom: 24px;
}
-li {
- margin-left: 22px;
+li {
+ margin-left: 22px;
}
-ul#desc {
- list-style: circle;
- font-size: 100%;
- max-width: 380px;
+ul#desc {
+ list-style: circle;
+ font-size: 100%;
+ max-width: 380px;
}
a:link {
- color: #00aeff;
+ color: #00aeff;
}
a:visited {
- color: #0fa954;
+ color: #0fa954;
}
a:hover {
- color: #e61d5f;
+ color: #e61d5f;
}
a:active {
- color: #54396e;
+ color: #54396e;
}
-footer {
-margin-top: 20px;
- background-color: #eee;
- width: 510px;
- padding: 10px;
- clear: both;
- color: #444;
-
+footer {
+ margin-top: 20px;
+ background-color: #eee;
+ width: 510px;
+ padding: 10px;
+ clear: both;
+ color: #444;
+
}
-pre a:link,
+pre a:link,
pre a:visited,
pre a:active,
-pre a:hover {
- color: #ccc;
+pre a:hover {
+ color: #ccc;
}
code {
- font: 10px Monaco, monospace;
+ font: 10px Monaco, monospace;
}
code strong {
- font-weight: normal;
- color: #e61d5f;
+ font-weight: normal;
+ color: #e61d5f;
}
-/* SPAN elements with the classes below are added by prettyprint. */
-.str { color: #0fa954; }
-.kwd { color: #e61d5f; }
-.com { color: #555; }
-.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; }
\ No newline at end of file
+.str {
+ color: #0fa954;
+}
+
+.kwd {
+ color: #e61d5f;
+}
+
+.com {
+ color: #555;
+}
+
+.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;
+}
\ No newline at end of file
diff --git a/demo/demo.js b/demo/demo.js
index de2585e..08a59fa 100644
--- a/demo/demo.js
+++ b/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
diff --git a/index.html b/index.html
index be33ef0..773bf6a 100644
--- a/index.html
+++ b/index.html
@@ -6,15 +6,18 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
@@ -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);
}
diff --git a/src/DAT/GUI/Controller.js b/src/DAT/GUI/Controller.js
index 89f1e2f..f802b4f 100644
--- a/src/DAT/GUI/Controller.js
+++ b/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);
}
}
diff --git a/src/DAT/GUI/ControllerNumber.js b/src/DAT/GUI/ControllerNumber.js
index 0fb28b6..191a86c 100644
--- a/src/DAT/GUI/ControllerNumber.js
+++ b/src/DAT/GUI/ControllerNumber.js
@@ -20,13 +20,9 @@ DAT.GUI.ControllerNumber = function() {
var max = arguments[4];
var step = arguments[5];
- if (!step) {
- if (min != undefined && max != undefined) {
+ var defaultStep = function() {
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');
diff --git a/src/DAT/GUI/ControllerString.js b/src/DAT/GUI/ControllerString.js
index bfbb10d..93135c1 100644
--- a/src/DAT/GUI/ControllerString.js
+++ b/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();
};
diff --git a/src/DAT/GUI/GUI.js b/src/DAT/GUI/GUI.js
index 45a4199..dd0a4dd 100644
--- a/src/DAT/GUI/GUI.js
+++ b/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) {
@@ -63,7 +66,7 @@ DAT.GUI = function(parameters) {
if (e.preventDefault) {
e.preventDefault();
}
-
+
e.returnValue = false;
controllerContainer.scrollTop = scrollAmount;
@@ -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
- _this.domElement.style.width = (width + 1) + 'px';
+ // Clears lingering scrollbar column
+ _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) {
@@ -452,14 +451,24 @@ DAT.GUI = function(parameters) {
DAT.GUI.allGuis.push(this);
- // Add hide listener if this is the first DAT.GUI.
+ // 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 = [],
- i;
+ var vals = [], i;
vals.push(DAT.GUI.allGuis.length);
vals.push(document.body.scrollTop);
@@ -685,4 +694,4 @@ if (DAT.GUI.getVarFromURL('saveString') != null) {
DAT.GUI.load(DAT.GUI.getVarFromURL('saveString'));
}
-window["DAT.GUI"] = DAT.GUI;
\ No newline at end of file
+window["DAT.GUI"] = DAT.GUI;
diff --git a/src/DAT/GUI/Slider.js b/src/DAT/GUI/Slider.js
index 4c3ccba..e8df2ae 100644
--- a/src/DAT/GUI/Slider.js
+++ b/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);
- val = Math.round(val / step) * step;
+ .offsetWidth, numberController.getMin(), numberController.getMax());
+ 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 = pct + "%";
+ this.fg.style.width = DAT.GUI.map(e, numberController.getMin(),
+ numberController.getMax(), 0, 100) + "%";
});
document.addEventListener('mousemove', onDrag, false);