library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

min, max and step as methods for ControllerNumber

Browse Source
This commit is contained in:
George Michael Brower 2011-04-18 15:40:26 -07:00
parent 9959a24161
commit 6c21734b0f
3 changed files with 302 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

394
index.html
View File

@ -2,9 +2,9 @@
<head> <head>
<title>dat.gui</title> <title>dat.gui</title>
<link rel="icon" type="image/png" href="demo/assets/favicon.png" /> <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="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.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/GUI.js"></script>
@ -14,119 +14,125 @@
<script type="text/javascript" src="src/dat/ControllerFunction.js"></script> <script type="text/javascript" src="src/dat/ControllerFunction.js"></script>
<script type="text/javascript" src="src/dat/ControllerNumber.js"></script> <script type="text/javascript" src="src/dat/ControllerNumber.js"></script>
<script type="text/javascript" src="src/dat/ControllerString.js"></script> <script type="text/javascript" src="src/dat/ControllerString.js"></script>
<script type="text/javascript" src="demo/improvedNoise.js"></script> <script type="text/javascript" src="demo/improvedNoise.js"></script>
<script type="text/javascript" src="demo/prettify.js"></script> <script type="text/javascript" src="demo/prettify.js"></script>
<script type="text/javascript" src="demo/demo.js"></script> <script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
window.onload = function() { window.onload = function() {
prettyPrint(); prettyPrint();
var fizzyText = new FizzyText("dat.gui"); var fizzyText = new FizzyText("dat.gui");
var gui = new DAT.GUI(); var gui = new DAT.GUI();
// Text field // Text field
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
// Sliders with min + max // Sliders with min + max
gui.add(fizzyText, "maxSize", 0.5, 7); gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed", 0.01, 1); gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2); gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
// Sliders with min, max and increment. // Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5); gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox // Boolean checkbox
gui.add(fizzyText, "displayOutline"); gui.add(fizzyText, "displayOutline");
// Fires a function called "explode" // Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name. gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
// Javascript for documentation // Javascript for documentation
getCollapsables(); getCollapsables();
handleListening(); handleListening();
}; };
function toggle(e) { function toggle(e) {
var collapsable = this.childNodes[3],
wrapper = collapsable.childNodes[1];
if (this.className === 'collapsed') {
this.className = 'expanded';
collapsable.style.height = wrapper.clientHeight + 'px';
} else {
this.className = 'collapsed';
collapsable.style.height = '0px';
}
}
function getCollapsables() {
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element; var collapsable = this.childNodes[3],
for (var i = 0; (element = allElements[i]) != null; i++) { wrapper = collapsable.childNodes[1];
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results; if (this.className === 'collapsed') {
}; this.className = 'expanded';
} collapsable.style.height = wrapper.clientHeight + 'px';
} else {
collapsed = document.getElementsByClassName('collapsed'); this.className = 'collapsed';
expanded = document.getElementsByClassName('expanded'); collapsable.style.height = '0px';
} }
}
function handleListening() {
for(var i = 0; i < collapsed.length; i++) {
collapsed[i].addEventListener('click', toggle, false);
}
for(var j = 0; j < expanded.length; j++) {
expanded[i].addEventListener('click', toggle, false);
}
}
//]]> function getCollapsables() {
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className) {
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
};
}
collapsed = document.getElementsByClassName('collapsed');
expanded = document.getElementsByClassName('expanded');
}
function handleListening() {
for (var i = 0; i < collapsed.length; i++) {
collapsed[i].addEventListener('click', toggle, false);
}
for (var j = 0; j < expanded.length; j++) {
expanded[i].addEventListener('click', toggle, false);
}
}
//]]>
</script> </script>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<!-- DAT.GUIDAT logo -->
<div id="helvetica-demo"></div>
<!-- It gives you this! --> <!-- GUIDAT logo -->
<div id="notifier"></div> <div id="helvetica-demo"></div>
<h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="dat.gui flag" /></a></h1> <!-- It gives you this! -->
<div id="notifier"></div>
<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> <h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png"
border="0" alt="dat.gui flag"/></a>
</h1>
<ul> <p><strong>dat.gui</strong> is a lightweight controller library for JavaScript.
<li><a href="https://github.com/jonobr1/dat.gui/raw/versions/gui.min It allows you to easily manipulate variables and fire functions on the fly.
.js"><strong>Download the minified source</strong></a> <small </p>
id="buildsize">[11kb]</small></li>
<li><a href="http://github.com/jonobr1/dat.gui">Contribute on GitHub!</a></li> <ul>
</ul> <li><a href="https://github.com/jonobr1/dat.gui/raw/versions/gui.min
.js"><strong>Download the minified source</strong></a>
<small
id="buildsize">[11kb]
</small>
</li>
<h2>Basic Usage</h2> <li><a href="http://github.com/jonobr1/dat.gui">Contribute on GitHub!</a></li>
</ul>
<h2>Basic Usage</h2>
<pre id="demo-pre" class="prettyprint"> <pre id="demo-pre" class="prettyprint">
&lt;script type="text/javascript" src="gui.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="gui.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt; &lt;script type="text/javascript"&gt;
@ -141,11 +147,10 @@ window.onload = function() {
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
// Sliders with min + max // Sliders with min + max
gui.add(fizzyText, "maxSize", 0.5, 7); gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed", 0.01, 1); gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2); gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5); gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox // Boolean checkbox
@ -159,37 +164,48 @@ window.onload = function() {
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
<ul id="desc"> <ul id="desc">
<li><strong>dat.gui</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
(based on its initial value) and create the corresponding control.</li> 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> <li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop
</ul> = value</code>.
</li>
<!-- </ul>
<!--
<h2 class="collapsed">Fire a function when someone uses a control</h2> <h2 class="collapsed">Fire a function when someone uses a control</h2>
<pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) { <pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) {
alert("You changed me to " + n); alert("You changed me to " + n);
});</pre>--> });</pre>-->
<div class="collapsed"> <div class="collapsed">
<h2 class="section">Saving your parameters</h2> <h2 class="section">Saving your parameters</h2>
<div class="collapsable">
<div> <div class="collapsable">
<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> <div>
<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"> <pre class="prettyprint last">
// Make a button for the url function // Make a button for the url function
gui.add(DAT.GUI, "saveURL");</pre> gui.add(DAT.GUI, "saveURL");</pre>
</div>
</div>
</div> </div>
<div class="collapsed"> </div>
<h2 class="section">Advanced saving</h2> </div>
<div class="collapsable"> <div class="collapsed">
<div> <h2 class="section">Advanced saving</h2>
<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>DAT.GUI.showSaveString()</code> to a gui object:</p> <div class="collapsable">
<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>DAT.GUI.showSaveString()</code> to a gui
object:</p>
<pre class="prettyprint">var gui = new DAT.GUI(); <pre class="prettyprint">var gui = new DAT.GUI();
// Add some stuff (and pretend I change their values); // Add some stuff (and pretend I change their values);
@ -199,7 +215,9 @@ gui.add(someObject, "someOtherProperty");
// Make a save button. // Make a save button.
gui.add(DAT.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>DAT.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"> <pre class="prettyprint">
// Replace COPIED STRING with the value you got from showSaveString() // Replace COPIED STRING with the value you got from showSaveString()
DAT.GUI.load("COPIED STRING"); DAT.GUI.load("COPIED STRING");
@ -210,58 +228,78 @@ var gui = new DAT.GUI();
gui.add(someObject, "someProperty"); gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty");</pre> gui.add(someObject, "someOtherProperty");</pre>
<p class = "last"><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p> <p class="last"><strong>Save strings won't work if you change the order in
</div> which you've added properties to your gui objects, or the order of the
</div> gui objects themselves.</strong>. If you want to add more parameters to
your gui and use an old save string, make sure they're added after the
properties whose values you've saved.</p>
</div> </div>
</div>
</div>
<div class="collapsed"> <div class="collapsed">
<h2 class="section">Choosing from a list of values</h2> <h2 class="section">Choosing from a list of values</h2>
<div class="collapsable">
<div> <div class="collapsable">
<div>
<pre class="prettyprint first last">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8); <pre class="prettyprint first last">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
// Alternatively, you can specify custom labels using object syntax // Alternatively, you can specify custom labels using object syntax
gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3}); gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
</pre> </pre>
</div>
</div>
</div> </div>
</div>
</div>
<div class="collapsed"> <div class="collapsed">
<h2 class="section">Listen for variable changes inside the GUI</h2> <h2 class="section">Listen for variable changes inside the GUI</h2>
<div class="collapsable">
<div> <div class="collapsable">
<p>To fire a function whenever a user changes a variable via the GUI, use the following syntax:</p> <div>
<p>To fire a function whenever a user changes a variable via the GUI, use
the following syntax:</p>
<pre class="prettyprint">gui.add(obj, "propertyName").onChange(function(newValue) { <pre class="prettyprint">gui.add(obj, "propertyName").onChange(function(newValue) {
alert("You changed me to " + newValue); alert("You changed me to " + newValue);
});</pre> <p>This can be slightly annoying for types like number or string. You may not want to fire a function while the user is sliding, or while they're typing. To fire a function when the user has <em>finished</em> making changes, use the following:</p> });</pre>
<p>This can be slightly annoying for types like number or string. You may
not want to fire a function while the user is sliding, or while they're
typing. To fire a function when the user has <em>finished</em> making
changes, use the following:</p>
<pre class="prettyprint">gui.add(obj, "propertyName").onFinishChange(function(newValue) { <pre class="prettyprint">gui.add(obj, "propertyName").onFinishChange(function(newValue) {
alert("You just finished changing me to " + newValue); alert("You just finished changing me to " + newValue);
});</pre> });</pre>
<p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p> <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() { <pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
alert("You called a function with dat.gui"); alert("You called a function with dat.gui");
});</pre> });</pre>
</div>
</div>
</div> </div>
<div class="collapsed"> </div>
<h2 class="section">Listen for variable changes outside of the GUI</h2> </div>
<div class="collapsable"> <div class="collapsed">
<div> <h2 class="section">Listen for variable changes outside of the GUI</h2>
<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 class="collapsable">
</div> <div>
</div> <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>
</div>
<div class="collapsed"> </div>
<h2 class="section">Advanced listening</h2>
<div class="collapsable"> <div class="collapsed">
<div> <h2 class="section">Advanced listening</h2>
<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>
<div class="collapsable">
<div>
<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"> <pre class="prettyprint">
gui.autoListen = false; // disables internal interval gui.autoListen = false; // disables internal interval
gui.add(obj, "changingProperty").listen(); gui.add(obj, "changingProperty").listen();
@ -271,7 +309,9 @@ setInterval(function() {
gui.listen(); // updates values you've marked with listen() gui.listen(); // updates values you've marked with listen()
}, 1000 / 60);</pre> }, 1000 / 60);</pre>
<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p> <p>Alternatively, you can forego calling <code>listen()</code> on
individual controllers, and instead choose to monitor changes in
<em>all</em> values controlled by your gui.</p>
<pre class="prettyprint last"> <pre class="prettyprint last">
gui.autoListen = false; // disables internal interval gui.autoListen = false; // disables internal interval
gui.add(obj, "add"); gui.add(obj, "add");
@ -282,15 +322,17 @@ gui.add(obj, "properties");
setInterval(function() { setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);</pre> }, 1000 / 60);</pre>
</div>
</div>
</div> </div>
</div>
<div class="collapsed"> </div>
<h2 class="section">Multiple panels and custom placement</h2>
<div class="collapsable"> <div class="collapsed">
<div> <h2 class="section">Multiple panels and custom placement</h2>
<p>You can instantiate multiple <code>DAT.GUI</code> objects and name them however you'd like.</p>
<div class="collapsable">
<div>
<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(); <pre class="prettyprint">var gui1 = new DAT.GUI();
var gui2 = new DAT.GUI(); var gui2 = new DAT.GUI();
@ -298,7 +340,10 @@ var gui2 = new DAT.GUI();
gui1.name("Utilities"); gui1.name("Utilities");
gui2.name("Camera Placement");</pre> gui2.name("Camera Placement");</pre>
<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> <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"> <pre class="prettyprint last">
// Notice this belongs to the DAT.GUI class (uppercase) // Notice this belongs to the DAT.GUI class (uppercase)
// and not an instance thereof. // and not an instance thereof.
@ -312,26 +357,31 @@ gui.domElement.style.top = "20px";
gui.domElement.style.left = "20px"; gui.domElement.style.left = "20px";
document.getElementById("my-gui-container").appendChild( gui.domElement );</pre> document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
</div>
</div>
</div> </div>
</div>
</div>
<div class="collapsed"> <div class="collapsed">
<h2 class="section">Pro tips.</h2> <h2 class="section">Pro tips.</h2>
<div class="collapsable">
<div>
<ol id="secrets">
<li><strong>dat.gui</strong> panels are resizeable. Drag the show/hide button.</li>
<li>Press 'H' to show/hide GUI&apos;s.</li> <div class="collapsable">
</ol> <div>
</div> <ol id="secrets">
</div> <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>
</div> </div>
</div>
<div class = "trans">&nbsp;</div> </div>
<footer class = "trans">Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab. <div class="trans">&nbsp;</div>
</footer>
<footer class="trans">Initiated by <a href="http://georgemichaelbrower.com/">George
Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the
Data Arts Team, Google Creative Lab.
</footer>
</body> </body>
</html> </html>

55
src/DAT/ControllerNumber.js
View File

@ -9,9 +9,8 @@ DAT.GUI.ControllerNumber = function() {
// If we simply click and release a number field, we want to highlight it. // If we simply click and release a number field, we want to highlight it.
// This variable keeps track of whether or not we've dragged // This variable keeps track of whether or not we've dragged
var draggedNumberField = false; var draggedNumberField = false;
var clickedNumberField = false; var clickedNumberField = false;
var draggingHorizontal = false; var draggingHorizontal = false;
var draggingVertical = false; var draggingVertical = false;
@ -29,6 +28,47 @@ DAT.GUI.ControllerNumber = function() {
} }
} }
this.min = function() {
var needsSlider = false;
if (min == undefined && max != undefined) {
needsSlider = true;
}
if (arguments.length == 0) {
return min;
} else {
min = arguments[0];
}
if (needsSlider) {
addSlider();
}
return _this;
};
this.max = function() {
var needsSlider = false;
if (min != undefined && max == undefined) {
needsSlider = true;
}
if (arguments.length == 0) {
return max;
} else {
max = arguments[0];
}
if (needsSlider) {
addSlider();
}
return _this;
};
this.step = function() {
if (arguments.length == 0) {
return step;
} else {
step = arguments[0];
}
return _this;
};
var numberField = document.createElement('input'); var numberField = document.createElement('input');
numberField.setAttribute('id', this.propertyName); numberField.setAttribute('id', this.propertyName);
numberField.setAttribute('type', 'text'); numberField.setAttribute('type', 'text');
@ -40,9 +80,13 @@ DAT.GUI.ControllerNumber = function() {
var slider; var slider;
var addSlider = function() {
slider = new DAT.GUI.Slider(_this, min, max, step, _this.getValue());
_this.domElement.appendChild(slider.domElement);
};
if (min != undefined && max != undefined) { if (min != undefined && max != undefined) {
slider = new DAT.GUI.Slider(this, min, max, step, this.getValue()); addSlider();
this.domElement.appendChild(slider.domElement);
} }
numberField.addEventListener('blur', function() { numberField.addEventListener('blur', function() {
@ -116,7 +160,6 @@ DAT.GUI.ControllerNumber = function() {
y = e.pageY; y = e.pageY;
var dy = py - y; var dy = py - y;
if (!draggingHorizontal && !draggingVertical) { if (!draggingHorizontal && !draggingVertical) {
if (dy == 0) { if (dy == 0) {
draggingHorizontal = true; draggingHorizontal = true;
@ -135,10 +178,10 @@ DAT.GUI.ControllerNumber = function() {
draggedNumberField = true; draggedNumberField = true;
e.preventDefault(); e.preventDefault();
var newVal = _this.getValue() + dy * step; var newVal = _this.getValue() + dy * step;
_this.setValue(newVal); _this.setValue(newVal);
return false; return false;
}; };
this.options = function() { this.options = function() {

56
src/dat/gui.js
View File

@ -33,18 +33,21 @@ DAT.GUI = function(parameters) {
// How big we get when we open // How big we get when we open
var openHeight; var openHeight;
var closeString = 'Close Controls';
var openString = 'Open Controls';
var name; var name;
var resizeTo = 0; var resizeTo = 0;
var resizeTimeout; var resizeTimeout;
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat'); this.domElement.setAttribute('class', 'guidat');
this.domElement.style.width = width + 'px'; this.domElement.style.width = width + 'px';
var controllerContainer = document.createElement('div'); var controllerContainer = document.createElement('div');
controllerContainer.setAttribute('class', 'guidat-controllers'); controllerContainer.setAttribute('class', 'guidat-controllers');
controllerContainer.style.height = '0px';
// Firefox hack to prevent horizontal scrolling // Firefox hack to prevent horizontal scrolling
controllerContainer.addEventListener('DOMMouseScroll', function(e) { controllerContainer.addEventListener('DOMMouseScroll', function(e) {
@ -60,18 +63,19 @@ DAT.GUI = function(parameters) {
if (e.preventDefault) { if (e.preventDefault) {
e.preventDefault(); e.preventDefault();
} }
e.returnValue = false; e.returnValue = false;
controllerContainer.scrollTop = scrollAmount; controllerContainer.scrollTop = scrollAmount;
}, false); }, false);
controllerContainer.style.height = '0px';
var toggleButton = document.createElement('a'); var toggleButton = document.createElement('a');
toggleButton.setAttribute('class', 'guidat-toggle'); toggleButton.setAttribute('class', 'guidat-toggle');
toggleButton.setAttribute('href', '#'); toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = 'Show Controls'; toggleButton.innerHTML = openString;
var toggleDragged = false; var toggleDragged = false;
var dragDisplacementY = 0; var dragDisplacementY = 0;
@ -91,7 +95,7 @@ DAT.GUI = function(parameters) {
if (dmy > 0) { if (dmy > 0) {
open = true; open = true;
curControllerContainerHeight = openHeight = 1; curControllerContainerHeight = openHeight = 1;
toggleButton.innerHTML = name || 'Hide Controls'; toggleButton.innerHTML = name || closeString;
} else { } else {
return; return;
} }
@ -102,7 +106,7 @@ DAT.GUI = function(parameters) {
if (dmy > 0 && if (dmy > 0 &&
curControllerContainerHeight > controllerHeight) { curControllerContainerHeight > controllerHeight) {
var d = DAT.GUI.map(curControllerContainerHeight, controllerHeight, var d = DAT.GUI.map(curControllerContainerHeight, controllerHeight,
controllerHeight + 100, 1, 0); controllerHeight + 100, 1, 0);
dmy *= d; dmy *= d;
} }
@ -159,11 +163,11 @@ DAT.GUI = function(parameters) {
var singleControllerHeight = controllerContainer.children[0]. var singleControllerHeight = controllerContainer.children[0].
offsetHeight; offsetHeight;
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
var target = Math.round(curControllerContainerHeight / var target = Math.round(curControllerContainerHeight /
singleControllerHeight) * singleControllerHeight - 1; singleControllerHeight) * singleControllerHeight - 1;
resizeTo = target; resizeTo = target;
if (resizeTo <= 0) { if (resizeTo <= 0) {
_this.hide(); _this.close();
openHeight = singleControllerHeight * 2; openHeight = singleControllerHeight * 2;
} else { } else {
openHeight = resizeTo; openHeight = resizeTo;
@ -282,7 +286,7 @@ DAT.GUI = function(parameters) {
// Does this value exist? Is it accessible? // Does this value exist? Is it accessible?
if (value == undefined) { if (value == undefined) {
DAT.GUI.error(object + ' either has no property \'' + propertyName + DAT.GUI.error(object + ' either has no property \'' + propertyName +
'\', or the property is inaccessible.'); '\', or the property is inaccessible.');
return; return;
} }
@ -361,19 +365,19 @@ DAT.GUI = function(parameters) {
// DAT.GUI ... DAT.GUI // DAT.GUI ... DAT.GUI
this.toggle = function() { this.toggle = function() {
open ? this.hide() : this.show(); open ? this.close() : this.open();
}; };
this.show = function() { this.open = function() {
toggleButton.innerHTML = name || 'Hide Controls'; toggleButton.innerHTML = name || closeString;
resizeTo = openHeight; resizeTo = openHeight;
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
beginResize(); beginResize();
open = true; open = true;
} }
this.hide = function() { this.close = function() {
toggleButton.innerHTML = name || 'Show Controls'; toggleButton.innerHTML = name || openString;
resizeTo = 0; resizeTo = 0;
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
beginResize(); beginResize();
@ -391,21 +395,21 @@ DAT.GUI = function(parameters) {
} }
var beginResize = function() { var beginResize = function() {
curControllerContainerHeight += (resizeTo - curControllerContainerHeight) curControllerContainerHeight += (resizeTo - curControllerContainerHeight)
* 0.6; * 0.6;
if (Math.abs(curControllerContainerHeight - resizeTo) < 1) { if (Math.abs(curControllerContainerHeight - resizeTo) < 1) {
curControllerContainerHeight = resizeTo; curControllerContainerHeight = resizeTo;
adaptToScrollbar(); adaptToScrollbar();
} else { } else {
resizeTimeout = setTimeout(beginResize, 1000 / 30); resizeTimeout = setTimeout(beginResize, 1000 / 30);
} }
controllerContainer.style.height = Math.round(curControllerContainerHeight) controllerContainer.style.height = Math.round(curControllerContainerHeight)
+ 'px'; + 'px';
checkForOverflow(); checkForOverflow();
} }
var adaptToScrollbar = function() { var adaptToScrollbar = function() {
@ -416,6 +420,8 @@ DAT.GUI = function(parameters) {
}, 1); }, 1);
}; };
// Load saved appearance: // Load saved appearance:
if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) { if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) {
@ -438,7 +444,7 @@ DAT.GUI = function(parameters) {
document.body.scrollTop = DAT.GUI.scrollTop; document.body.scrollTop = DAT.GUI.scrollTop;
} }
resizeTo = openHeight; resizeTo = openHeight;
this.show(); this.open();
} }
DAT.GUI.guiIndex++; DAT.GUI.guiIndex++;
@ -471,20 +477,20 @@ DAT.GUI.allGuis = [];
DAT.GUI.toggleHide = function() { DAT.GUI.toggleHide = function() {
if (DAT.GUI.hidden) { if (DAT.GUI.hidden) {
DAT.GUI.show(); DAT.GUI.open();
} else { } else {
DAT.GUI.hide(); DAT.GUI.close();
} }
} }
DAT.GUI.show = function() { DAT.GUI.open = function() {
DAT.GUI.hidden = false; DAT.GUI.hidden = false;
for (var i in DAT.GUI.allGuis) { for (var i in DAT.GUI.allGuis) {
DAT.GUI.allGuis[i].domElement.style.display = 'block'; DAT.GUI.allGuis[i].domElement.style.display = 'block';
} }
} }
DAT.GUI.hide = function() { DAT.GUI.close = function() {
DAT.GUI.hidden = true; DAT.GUI.hidden = true;
for (var i in DAT.GUI.allGuis) { for (var i in DAT.GUI.allGuis) {
DAT.GUI.allGuis[i].domElement.style.display = 'none'; DAT.GUI.allGuis[i].domElement.style.display = 'none';
@ -671,7 +677,7 @@ DAT.GUI.hasClass = function(domElement, className) {
} }
DAT.GUI.removeClass = function(domElement, className) { DAT.GUI.removeClass = function(domElement, className) {
var reg = new RegExp(' '+className, 'g'); var reg = new RegExp(' ' + className, 'g');
domElement.className = domElement.className.replace(reg, ''); domElement.className = domElement.className.replace(reg, '');
} }