mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Merge branch 'master' of https://github.com/jonobr1/gui-dat
This commit is contained in:
Doug Fritz
commit
d730f43f65
314
demo/demo.css
314
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; }
|
||||
.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;
|
||||
}
|
||||
@ -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
|
||||
|
||||
24
index.html
24
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"
|
||||
/>
|
||||
<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/Controller.js"></script>
|
||||
<script type="text/javascript" src="src/dat/ControllerBoolean.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/ControllerString.js"></script>
|
||||
<link href="src/DAT/GUI/gui.css" media="screen" rel="stylesheet"
|
||||
type="text/css"/>
|
||||
|
||||
<script type="text/javascript" src="src/DAT/GUI/GUI.js"></script>
|
||||
<script type="text/javascript" src="src/DAT/GUI/Slider.js"></script>
|
||||
<script type="text/javascript" src="src/DAT/GUI/Controller.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="src/DAT/GUI/ControllerBoolean.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);
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
@ -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;
|
||||
window["DAT.GUI"] = DAT.GUI;
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user