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

merged css3 transition changes

Browse Source
This commit is contained in:
Jono Brandel 2011-02-03 14:39:27 -08:00
commit 695645ef05
11 changed files with 77 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
controllers/controller.boolean.js
View File

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

7
controllers/controller.function.js
View File

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

20
controllers/controller.js
View File

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

11
controllers/controller.number.js
View File

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

7
controllers/controller.string.js
View File

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

2
controllers/slider.js
View File

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

12
demo/demo.css
View File

@ -89,6 +89,7 @@ div.expanded h2:before, div.collapsed h2:before {
font-size: 9px;
font-family: Monaco, monospace;
}
<<<<<<< HEAD
div.collapsable {
overflow: hidden;
@ -108,9 +109,16 @@ div.collapsed .collapsable {
height: 0;
}
div.expanded .collapsable {
=======
/* Can't seem to get this transition to work :( */
div.collapsable {
>>>>>>> 11325bbf42fee0d080678ae5a55a8a0eeab70925
overflow: hidden;
clear: both;
height: auto;
height: 0px;
-moz-transition: height .2s linear;
-webkit-transition: height .2s linear;
transition: height .2s linear;
}
div.expanded { cursor: pointer; }
@ -178,10 +186,12 @@ a:active {
}
footer {
margin-top: 20px;
background-color: #eee;
width: 510px;
padding: 10px;
clear: both;
color: #444;
}

26
gui-bare.css
View File

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

2
gui.css
View File

@ -100,7 +100,7 @@ a.guidat-toggle:hover {
border: 0;
color: #1ed36f;
margin-right: 2px;
width: 148px;
width: 148px;
}
.guidat-controller.boolean {

55
gui.js
View File

@ -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,17 +82,15 @@ var GUI = function() {
var dmy = my - pmy;
if (!open) {
if (dmy > 0) {
open = true;
curControllerContainerHeight = openHeight = 1;
toggleButton.innerHTML = name || "Hide Controls";
} else {
return;
if (!open) {
if (dmy > 0) {
open = true;
curControllerContainerHeight = openHeight = 1;
toggleButton.innerHTML = name || "Hide Controls";
} else {
return;
}
}
}
// 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'));

24
index.html
View File

@ -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();
@ -77,10 +69,18 @@
if (this.className === 'collapsed') {
this.className = 'expanded';
<<<<<<< HEAD
collapsable.style.height = wrapper.clientHeight + 'px';
} else {
this.className = 'collapsed';
collapsable.style.height = '0px';
=======
var children = this.childNodes;
this.childNodes[3].style.height = 'auto';
} else {
this.className = 'collapsed';
this.childNodes[3].style.height = '0px';
>>>>>>> 11325bbf42fee0d080678ae5a55a8a0eeab70925
}
}
@ -252,7 +252,7 @@ gui.add(obj, "changingProperty").listen();
// Make your own loop
setInterval(function() {
gui.listen(); // updates values you've marked with listen()
gui.listen(); // updates values you've marked with listen()
}, 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>
@ -264,7 +264,7 @@ gui.add(obj, "properties");
// Make your own loop
setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui
gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);</pre>
</div>
</div>
@ -300,7 +300,11 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
</div>
</div>
<<<<<<< HEAD
<div class="collapsed">
=======
<div class="collapsed last">
>>>>>>> 11325bbf42fee0d080678ae5a55a8a0eeab70925
<h2 class="section">Pro tips.</h2>
<div class="collapsable">
<div>