diff --git a/controllers/controller.boolean.js b/controllers/controller.boolean.js index 8c52605..66808ca 100644 --- a/controllers/controller.boolean.js +++ b/controllers/controller.boolean.js @@ -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); \ No newline at end of file diff --git a/controllers/controller.function.js b/controllers/controller.function.js index c95c5ec..bf17507 100644 --- a/controllers/controller.function.js +++ b/controllers/controller.function.js @@ -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); diff --git a/controllers/controller.js b/controllers/controller.js index c785d53..aedbc46 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -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; } diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 3f8e3fb..a20ca8b 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -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); diff --git a/controllers/controller.string.js b/controllers/controller.string.js index 57cb832..d29804d 100644 --- a/controllers/controller.string.js +++ b/controllers/controller.string.js @@ -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); \ No newline at end of file diff --git a/controllers/slider.js b/controllers/slider.js index ee2902e..9c7c28e 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -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; diff --git a/demo/demo.css b/demo/demo.css index 0d52950..90a7af4 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -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; } diff --git a/gui-bare.css b/gui-bare.css deleted file mode 100644 index a61a1f2..0000000 --- a/gui-bare.css +++ /dev/null @@ -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; -} diff --git a/gui.css b/gui.css index f05ca69..63f79be 100644 --- a/gui.css +++ b/gui.css @@ -100,7 +100,7 @@ a.guidat-toggle:hover { border: 0; color: #1ed36f; margin-right: 2px; -width: 148px; + width: 148px; } .guidat-controller.boolean { diff --git a/gui.js b/gui.js index 326ed84..5de51bf 100644 --- a/gui.js +++ b/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; @@ -82,18 +81,16 @@ var GUI = function() { mx = e.pageX; 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')); \ No newline at end of file diff --git a/index.html b/index.html index ddf2c2b..7437a66 100644 --- a/index.html +++ b/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(); @@ -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);

Alternatively, you can forego calling listen() on individual controllers, and instead choose to monitor changes in all values controlled by your gui.

@@ -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); @@ -300,7 +300,11 @@ document.getElementById("my-gui-container").appendChild( gui.domElement ); +<<<<<<< HEAD