From 2bdafaf2c9342cae9af7b24029e94361c33e477e Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Mon, 24 Jan 2011 13:11:19 -0700 Subject: [PATCH] Functional string and boolean controllers. --- controller.boolean.js | 15 +++++++++++++++ controller.js | 9 +++++++-- controller.string.js | 15 +++++++++++++++ demo.html | 10 +++++----- gui.js | 22 +++++++++++----------- 5 files changed, 53 insertions(+), 18 deletions(-) diff --git a/controller.boolean.js b/controller.boolean.js index be509c9..dceaebe 100644 --- a/controller.boolean.js +++ b/controller.boolean.js @@ -1,9 +1,24 @@ var BooleanController = function() { this.type = "boolean"; Controller.apply(this, arguments); + + var _this = this; var input = document.createElement('input'); input.setAttribute('type', 'checkbox'); + + this.domElement.addEventListener('click', function(e) { + input.checked = !input.checked; + e.preventDefault(); + _this.setValue(input.checked); + }, false); + + input.addEventListener('mouseup', function(e) { + input.checked = !input.checked; + }, false); + + this.domElement.style.cursor = 'pointer'; this.domElement.appendChild(input); + }; BooleanController.prototype = new Controller(); BooleanController.prototype.constructor = BooleanController; \ No newline at end of file diff --git a/controller.js b/controller.js index d1ffba7..01bf8b8 100644 --- a/controller.js +++ b/controller.js @@ -1,8 +1,13 @@ var Controller = function() { - this.name = function(n) { + this.setName = function(n) { this.propertyNameElement.innerHTML = n; } + + this.setValue = function(n) { + this.object[this.propertyName] = n; + } + this.domElement = document.createElement('div'); this.domElement.setAttribute('class', 'guidat-controller ' + this.type); @@ -11,7 +16,7 @@ var Controller = function() { this.propertyNameElement = document.createElement('span'); this.propertyNameElement.setAttribute('class', 'guidat-propertyname'); - this.name(this.propertyName); + this.setName(this.propertyName); this.domElement.appendChild(this.propertyNameElement); diff --git a/controller.string.js b/controller.string.js index 3eb2d6d..8261ded 100644 --- a/controller.string.js +++ b/controller.string.js @@ -1,8 +1,23 @@ var StringController = function() { + this.type = "string"; + + var _this = this; + Controller.apply(this, arguments); + var input = document.createElement('input'); + input.setAttribute('value', this.object[this.propertyName]); + this.domElement.addEventListener('mouseover', function() { + input.focus(); + }, false); + + input.addEventListener('keyup', function() { + console.log(input.value); + _this.setValue(input.value); + }, false); + this.domElement.appendChild(input); }; StringController.prototype = new Controller(); diff --git a/demo.html b/demo.html index 7d98729..754082c 100644 --- a/demo.html +++ b/demo.html @@ -1,8 +1,8 @@ - + - + @@ -23,7 +23,7 @@ var controllableObject = window.onload = function() { - prettyPrint(); + //prettyPrint(); GUI.start(); @@ -32,7 +32,7 @@ window.onload = function() { // Creates a slider (min, max) GUI.add(controllableObject, "constrainedNum", -100, 100) - .name("customName"); + .setName("customName"); // Creates a text field GUI.add(controllableObject, "textProperty"); @@ -68,7 +68,7 @@ window.onload = function() { // Creates a slider (min, max) GUI.add(controllableObject, "constrainedNum", -100, 100) - .name("customName"); + .setName("customName"); // Creates a text field GUI.add(controllableObject, "textProperty"); diff --git a/gui.js b/gui.js index dd97d78..75ee943 100644 --- a/gui.js +++ b/gui.js @@ -2,9 +2,7 @@ var GUI = new function() { var _this = this; - // Contains list of properties we've add to the GUI in the following format: - // [object, propertyName, controllerObject] - var registeredProperties = []; + var controllers = []; this.add = function() { @@ -18,7 +16,7 @@ var GUI = new function() { var propertyName = arguments[1]; // Have we already added this? - if (registeredPropertiesContains(object, propertyName)) { + if (alreadyControlled(object, propertyName)) { error("Controller for \"" + propertyName+"\" already added."); return; } @@ -50,7 +48,7 @@ var GUI = new function() { // Success. controllerContainer.appendChild(controllerObject.domElement); - registeredProperties.push([object, propertyName, controllerObject]); + controllers.push(controllerObject); return controllerObject; @@ -76,8 +74,13 @@ var GUI = new function() { }; - var registeredPropertiesContains = function(object, property) { - // TODO: + var alreadyControlled = function(object, propertyName) { + for (var i in controllers) { + if (controllers[i].object == object && + controllers[i].propertyName == propertyName) { + return true; + } + } return false; }; @@ -138,13 +141,9 @@ var GUI = new function() { this.toggle = function() { if (open) { - this.hide(); - } else { - this.show(); - } }; @@ -160,4 +159,5 @@ var GUI = new function() { toggleButton.innerHTML = "Show Controls"; open = false; } + };