From 9c2c24aeebaeb9881c57f9b709d91528ec0c9581 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Wed, 9 Feb 2011 11:39:18 -0800 Subject: [PATCH] Added onFinishChange() for string and number controllers, onFire() for function controllers and noSlider() for number controllers. --- controllers/controller.function.js | 23 +++++++++++-- controllers/controller.js | 7 ++-- controllers/controller.number.js | 19 +++++++---- controllers/controller.string.js | 11 ++++++- controllers/slider.js | 12 +++++-- index.html | 52 ++++++++++++++++++++---------- 6 files changed, 93 insertions(+), 31 deletions(-) diff --git a/controllers/controller.function.js b/controllers/controller.function.js index bf17507..ee0b831 100644 --- a/controllers/controller.function.js +++ b/controllers/controller.function.js @@ -1,11 +1,30 @@ GUI.FunctionController = function() { + this.type = "function"; - var that = this; + + var _this = this; + GUI.Controller.apply(this, arguments); + this.domElement.addEventListener('click', function() { - that.object[that.propertyName].call(that.object); + _this.fire(); }, false); + this.domElement.style.cursor = "pointer"; this.propertyNameElement.style.cursor = "pointer"; + + var fireFunction = null; + this.onFire = function(fnc) { + fireFunction = fnc; + return this; + } + + this.fire = function() { + if (fireFunction != null) { + fireFunction.call(this); + } + _this.object[_this.propertyName].call(_this.object); + }; + }; GUI.extendController(GUI.FunctionController); diff --git a/controllers/controller.js b/controllers/controller.js index aedbc46..8d11f62 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -19,6 +19,7 @@ GUI.Controller = function() { }; GUI.Controller.prototype.changeFunction = null; +GUI.Controller.prototype.finishChangeFunction = null; GUI.Controller.prototype.name = function(n) { this.propertyNameElement.innerHTML = n; @@ -45,8 +46,6 @@ GUI.Controller.prototype.setValue = function(n) { if (this.changeFunction != null) { this.changeFunction.call(this, n); } - // Whenever you call setValue, the display will be updated automatically. - // This reduces some clutter in subclasses. We can also use this method for listen(). this.updateDisplay(); return this; } @@ -61,3 +60,7 @@ GUI.Controller.prototype.onChange = function(fnc) { this.changeFunction = fnc; return this; } +GUI.Controller.prototype.onFinishChange = function(fnc) { + this.finishChangeFunction = fnc; + return this; +} diff --git a/controllers/controller.number.js b/controllers/controller.number.js index a20ca8b..e455843 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -44,10 +44,9 @@ GUI.NumberController = function() { numberField.addEventListener('blur', function(e) { var val = parseFloat(this.value); + console.log(val); if (!isNaN(val)) { - _this.updateDisplay(); - } else { - this.value = _this.getValue(); + _this.setValue(val); } }, false); @@ -61,6 +60,7 @@ GUI.NumberController = function() { py = y = e.pageY; clickedNumberField = true; document.addEventListener('mousemove', dragNumberField, false); + document.addEventListener('mouseup', mouseup, false); }, false); // Handle up arrow and down arrow @@ -77,7 +77,7 @@ GUI.NumberController = function() { } }, false); - document.addEventListener('mouseup', function(e) { + var mouseup = function(e) { document.removeEventListener('mousemove', dragNumberField, false); GUI.makeSelectable(_this.parent.domElement); GUI.makeSelectable(numberField); @@ -87,7 +87,12 @@ GUI.NumberController = function() { } draggedNumberField = false; clickedNumberField = false; - }, false); + if (_this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + document.removeEventListener('mouseup', mouseup, false); + } + var dragNumberField = function(e) { @@ -109,7 +114,9 @@ GUI.NumberController = function() { return false; } - + this.noSlider = function() { + _this.domElement.removeChild(slider.domElement); + }; this.setValue = function(val) { diff --git a/controllers/controller.string.js b/controllers/controller.string.js index d29804d..f96b6d7 100644 --- a/controllers/controller.string.js +++ b/controllers/controller.string.js @@ -18,10 +18,19 @@ GUI.StringController = function() { }, false); // TODO: getting messed up on ctrl a - input.addEventListener('keyup', function() { + input.addEventListener('keyup', function(e) { + if (e.keyCode == 13 && _this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } _this.setValue(input.value); }, false); + input.addEventListener('blur', function() { + if (_this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + }, false); + this.updateDisplay = function() { input.value = _this.getValue(); } diff --git a/controllers/slider.js b/controllers/slider.js index 9c7c28e..b3ad28a 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -47,14 +47,20 @@ GUI.Slider = function(numberController, min, max, step, initValue) { _this.domElement.setAttribute('class', 'guidat-slider-bg active'); _this.fg.setAttribute('class', 'guidat-slider-fg active'); onDrag(e); + document.addEventListener('mouseup', mouseup, false); }, false); - document.addEventListener('mouseup', function(e) { + var mouseup = function(e) { _this.domElement.setAttribute('class', 'guidat-slider-bg'); _this.fg.setAttribute('class', 'guidat-slider-fg'); - clicked = false; - }, false); + clicked = false; + if (numberController.finishChangeFunction != null) { + numberController.finishChangeFunction.call(this, numberController.getValue()); + } + document.removeEventListener('mouseup', mouseup, false); + }; + document.addEventListener('mousemove', onDrag, false); diff --git a/index.html b/index.html index 3877700..f029565 100644 --- a/index.html +++ b/index.html @@ -36,24 +36,24 @@ var fizzyText = new FizzyText("gui-dat"); - var gui = new GUI(); - - // Text field - gui.add(fizzyText, "message"); - // Sliders with min and max - gui.add(fizzyText, "maxSize", 0.5, 7); - gui.add(fizzyText, "growthSpeed", 0.01, 1); - gui.add(fizzyText, "speed", 0.1, 2); + var gui = new GUI(); - // Sliders with min, max and increment. - gui.add(fizzyText, "noiseStrength", 10, 100, 5); + // Text field + gui.add(fizzyText, "message"); - // Boolean checkbox - gui.add(fizzyText, "displayOutline"); - - // Fires a function called "explode" - gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name. - + // Sliders with min + max + gui.add(fizzyText, "maxSize", 0.5, 7); + gui.add(fizzyText, "growthSpeed", 0.01, 1); + gui.add(fizzyText, "speed", 0.1, 2); + + // Sliders with min, max and increment. + gui.add(fizzyText, "noiseStrength", 10, 100, 5); + + // Boolean checkbox + gui.add(fizzyText, "displayOutline"); + + // Fires a function called "explode" + gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name. // Javascript for documentation getCollapsables(); @@ -146,7 +146,7 @@ window.onload = function() { // Text field gui.add(fizzyText, "message"); - // Sliders with min and max + // Sliders with min + max gui.add(fizzyText, "maxSize", 0.5, 7); gui.add(fizzyText, "growthSpeed", 0.01, 1); gui.add(fizzyText, "speed", 0.1, 2); @@ -221,6 +221,24 @@ gui.add(someObject, "someOtherProperty"); +