mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Merge branch 'master' of github.com:jonobr1/gui-dat
This commit is contained in:
commit
11325bbf42
@ -1,7 +1,7 @@
|
||||
var BooleanController = function() {
|
||||
GUI.BooleanController = function() {
|
||||
|
||||
this.type = "boolean";
|
||||
Controller.apply(this, arguments);
|
||||
GUI.Controller.apply(this, arguments);
|
||||
|
||||
var _this = this;
|
||||
var input = document.createElement('input');
|
||||
@ -32,9 +32,8 @@ var BooleanController = function() {
|
||||
val = eval(val);
|
||||
} catch (e) {}
|
||||
}
|
||||
return Controller.prototype.setValue.call(this, val);
|
||||
return GUI.Controller.prototype.setValue.call(this, val);
|
||||
}
|
||||
|
||||
};
|
||||
BooleanController.prototype = new Controller();
|
||||
BooleanController.prototype.constructor = BooleanController;
|
||||
GUI.extendController(GUI.BooleanController);
|
@ -1,12 +1,11 @@
|
||||
var FunctionController = function() {
|
||||
GUI.FunctionController = function() {
|
||||
this.type = "function";
|
||||
var that = this;
|
||||
Controller.apply(this, arguments);
|
||||
GUI.Controller.apply(this, arguments);
|
||||
this.domElement.addEventListener('click', function() {
|
||||
that.object[that.propertyName].call(that.object);
|
||||
}, false);
|
||||
this.domElement.style.cursor = "pointer";
|
||||
this.propertyNameElement.style.cursor = "pointer";
|
||||
};
|
||||
FunctionController.prototype = new Controller();
|
||||
FunctionController.prototype.constructor = FunctionController;
|
||||
GUI.extendController(GUI.FunctionController);
|
||||
|
@ -1,4 +1,4 @@
|
||||
var Controller = function() {
|
||||
GUI.Controller = function() {
|
||||
|
||||
this.parent = arguments[0];
|
||||
this.object = arguments[1];
|
||||
@ -18,29 +18,29 @@ var Controller = function() {
|
||||
|
||||
};
|
||||
|
||||
Controller.prototype.changeFunction = null;
|
||||
GUI.Controller.prototype.changeFunction = null;
|
||||
|
||||
Controller.prototype.name = function(n) {
|
||||
GUI.Controller.prototype.name = function(n) {
|
||||
this.propertyNameElement.innerHTML = n;
|
||||
return this;
|
||||
};
|
||||
|
||||
Controller.prototype.reset = function() {
|
||||
GUI.Controller.prototype.reset = function() {
|
||||
this.setValue(this.initialValue);
|
||||
return this;
|
||||
};
|
||||
|
||||
Controller.prototype.listen = function() {
|
||||
GUI.Controller.prototype.listen = function() {
|
||||
this.parent.listenTo(this);
|
||||
return this;
|
||||
}
|
||||
|
||||
Controller.prototype.unlisten = function() {
|
||||
GUI.Controller.prototype.unlisten = function() {
|
||||
this.parent.unlistenTo(this); // <--- hasn't been tested yet
|
||||
return this;
|
||||
}
|
||||
|
||||
Controller.prototype.setValue = function(n) {
|
||||
GUI.Controller.prototype.setValue = function(n) {
|
||||
this.object[this.propertyName] = n;
|
||||
if (this.changeFunction != null) {
|
||||
this.changeFunction.call(this, n);
|
||||
@ -51,13 +51,13 @@ Controller.prototype.setValue = function(n) {
|
||||
return this;
|
||||
}
|
||||
|
||||
Controller.prototype.getValue = function() {
|
||||
GUI.Controller.prototype.getValue = function() {
|
||||
return this.object[this.propertyName];
|
||||
}
|
||||
|
||||
Controller.prototype.updateDisplay = function() {}
|
||||
GUI.Controller.prototype.updateDisplay = function() {}
|
||||
|
||||
Controller.prototype.onChange = function(fnc) {
|
||||
GUI.Controller.prototype.onChange = function(fnc) {
|
||||
this.changeFunction = fnc;
|
||||
return this;
|
||||
}
|
||||
|
@ -1,8 +1,8 @@
|
||||
var NumberController = function() {
|
||||
GUI.NumberController = function() {
|
||||
|
||||
this.type = "number";
|
||||
|
||||
Controller.apply(this, arguments);
|
||||
GUI.Controller.apply(this, arguments);
|
||||
|
||||
var _this = this;
|
||||
|
||||
@ -38,7 +38,7 @@ var NumberController = function() {
|
||||
var slider;
|
||||
|
||||
if (min != undefined && max != undefined) {
|
||||
slider = new Slider(this, min, max, step, this.getValue());
|
||||
slider = new GUI.Slider(this, min, max, step, this.getValue());
|
||||
this.domElement.appendChild(slider.domElement);
|
||||
}
|
||||
|
||||
@ -121,7 +121,7 @@ var NumberController = function() {
|
||||
val = max;
|
||||
}
|
||||
|
||||
return Controller.prototype.setValue.call(this, val);
|
||||
return GUI.Controller.prototype.setValue.call(this, val);
|
||||
|
||||
}
|
||||
|
||||
@ -131,5 +131,4 @@ var NumberController = function() {
|
||||
}
|
||||
};
|
||||
|
||||
NumberController.prototype = new Controller();
|
||||
NumberController.prototype.constructor = NumberController;
|
||||
GUI.extendController(GUI.NumberController);
|
||||
|
@ -1,9 +1,9 @@
|
||||
var StringController = function() {
|
||||
GUI.StringController = function() {
|
||||
|
||||
this.type = "string";
|
||||
|
||||
var _this = this;
|
||||
Controller.apply(this, arguments);
|
||||
GUI.Controller.apply(this, arguments);
|
||||
|
||||
var input = document.createElement('input');
|
||||
|
||||
@ -30,5 +30,4 @@ var StringController = function() {
|
||||
|
||||
};
|
||||
|
||||
StringController.prototype = new Controller();
|
||||
StringController.prototype.constructor = StringController;
|
||||
GUI.extendController(GUI.StringController);
|
@ -1,4 +1,4 @@
|
||||
var Slider = function(numberController, min, max, step, initValue) {
|
||||
GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
|
||||
var min = min;
|
||||
var max = max;
|
||||
|
@ -66,10 +66,6 @@ div.collapsed h2, div.expanded h2 {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
h2.last {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div.expanded h2:before {
|
||||
content: '-';
|
||||
@ -160,10 +156,12 @@ a:active {
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
background-color: #eee;
|
||||
width: 510px;
|
||||
padding: 10px;
|
||||
clear: both;
|
||||
color: #444;
|
||||
|
||||
}
|
||||
|
||||
|
26
gui-bare.css
26
gui-bare.css
@ -1,26 +0,0 @@
|
||||
#guidat {
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
z-index: 200;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-left: -270px;
|
||||
}
|
||||
|
||||
#guidat-controllers {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#guidat-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.guidat-controller {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.guidat-controller input {
|
||||
float: right;
|
||||
clear: both;
|
||||
}
|
39
gui.js
39
gui.js
@ -17,9 +17,6 @@ var GUI = function() {
|
||||
|
||||
var curControllerContainerHeight = 0;
|
||||
|
||||
// How big we get when we open
|
||||
|
||||
|
||||
var _this = this;
|
||||
|
||||
var open = false;
|
||||
@ -28,6 +25,8 @@ var GUI = function() {
|
||||
// Prevents checkForOverflow bug in which loaded gui appearance
|
||||
// settings are not respected by presence of scrollbar.
|
||||
var explicitOpenHeight = false;
|
||||
|
||||
// How big we get when we open
|
||||
var openHeight;
|
||||
|
||||
var name;
|
||||
@ -42,7 +41,7 @@ var GUI = function() {
|
||||
var controllerContainer = document.createElement('div');
|
||||
controllerContainer.setAttribute('class', 'guidat-controllers');
|
||||
|
||||
// Firefox hack for horizontal scrolling
|
||||
// Firefox hack to prevent horizontal scrolling
|
||||
controllerContainer.addEventListener('DOMMouseScroll', function(e) {
|
||||
|
||||
var scrollAmount = this.scrollTop;
|
||||
@ -83,7 +82,6 @@ var GUI = function() {
|
||||
|
||||
var dmy = my - pmy;
|
||||
|
||||
|
||||
if (!open) {
|
||||
if (dmy > 0) {
|
||||
open = true;
|
||||
@ -94,7 +92,6 @@ var GUI = function() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TODO: Flip this if you want to resize to the left.
|
||||
var dmx = pmx - mx;
|
||||
|
||||
@ -260,13 +257,6 @@ var GUI = function() {
|
||||
|
||||
this.autoListen = true;
|
||||
|
||||
var handlerTypes = {
|
||||
"number": NumberController,
|
||||
"string": StringController,
|
||||
"boolean": BooleanController,
|
||||
"function": FunctionController
|
||||
};
|
||||
|
||||
var alreadyControlled = function(object, propertyName) {
|
||||
for (var i in controllers) {
|
||||
if (controllers[i].object == object &&
|
||||
@ -362,14 +352,13 @@ var GUI = function() {
|
||||
} else {
|
||||
controllerContainer.style.overflowY = "hidden";
|
||||
}
|
||||
// console.log(controllerHeight, openHeight);
|
||||
}
|
||||
|
||||
var addHandlers = {
|
||||
"number": NumberController,
|
||||
"string": StringController,
|
||||
"boolean": BooleanController,
|
||||
"function": FunctionController
|
||||
var handlerTypes = {
|
||||
"number": GUI.NumberController,
|
||||
"string": GUI.StringController,
|
||||
"boolean": GUI.BooleanController,
|
||||
"function": GUI.FunctionController
|
||||
};
|
||||
|
||||
var alreadyControlled = function(object, propertyName) {
|
||||
@ -391,7 +380,7 @@ var GUI = function() {
|
||||
};
|
||||
|
||||
this.reset = function() {
|
||||
//
|
||||
// TODO
|
||||
}
|
||||
|
||||
// GUI ... GUI
|
||||
@ -486,10 +475,8 @@ GUI.saveURL = function() {
|
||||
|
||||
GUI.scrollTop = -1;
|
||||
|
||||
// TODO: Not working in FF.
|
||||
GUI.load = function(saveString) {
|
||||
|
||||
|
||||
//GUI.savedAppearanceVars = [];
|
||||
var vals = saveString.split(",");
|
||||
var numGuis = parseInt(vals[0]);
|
||||
@ -500,6 +487,7 @@ GUI.load = function(saveString) {
|
||||
}
|
||||
|
||||
GUI.savedValues = vals.splice(2, vals.length);
|
||||
|
||||
};
|
||||
|
||||
GUI.savedValues = [];
|
||||
@ -617,7 +605,7 @@ GUI.constrain = function (v, o1, o2) {
|
||||
|
||||
GUI.error = function(str) {
|
||||
if (typeof console.error == 'function') {
|
||||
console.GUI.error("[GUI ERROR] " + str);
|
||||
console.error("[GUI ERROR] " + str);
|
||||
}
|
||||
};
|
||||
|
||||
@ -626,4 +614,9 @@ GUI.roundToDecimal = function(n, decimals) {
|
||||
return Math.round(n*t)/t;
|
||||
}
|
||||
|
||||
GUI.extendController = function(clazz) {
|
||||
clazz.prototype = new GUI.Controller();
|
||||
clazz.prototype.constructor = clazz;
|
||||
}
|
||||
|
||||
if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));
|
12
index.html
12
index.html
@ -36,17 +36,12 @@
|
||||
|
||||
prettyPrint();
|
||||
|
||||
|
||||
var fizzyText = new FizzyText("gui-dat");
|
||||
|
||||
var gui = new GUI();
|
||||
var gui2 = new GUI();
|
||||
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, "message");
|
||||
gui2.add(window, "onload");
|
||||
|
||||
// Sliders with min and max
|
||||
gui.add(fizzyText, "maxSize", 0.5, 7);
|
||||
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
||||
@ -61,9 +56,6 @@
|
||||
// Fires a function called "explode"
|
||||
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
|
||||
|
||||
gui.add(GUI, "showSaveString");
|
||||
gui.add(GUI, "saveURL");
|
||||
|
||||
|
||||
// Javascript for documentation
|
||||
getCollapsables();
|
||||
@ -289,8 +281,8 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapsed">
|
||||
<h2 class="section last">Pro tips.</h2>
|
||||
<div class="collapsed last">
|
||||
<h2 class="section">Pro tips.</h2>
|
||||
<div class="collapsable">
|
||||
<ol id="secrets">
|
||||
<li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
|
||||
|
Loading…
Reference in New Issue
Block a user