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

Functional string and boolean controllers.

Browse Source
This commit is contained in:
George Michael Brower 2011-01-24 13:11:19 -07:00
parent c39de64a64
commit 2bdafaf2c9
5 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
controller.boolean.js
View File

@ -1,9 +1,24 @@
var BooleanController = function() { var BooleanController = function() {
this.type = "boolean"; this.type = "boolean";
Controller.apply(this, arguments); Controller.apply(this, arguments);
var _this = this;
var input = document.createElement('input'); var input = document.createElement('input');
input.setAttribute('type', 'checkbox'); 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); this.domElement.appendChild(input);
}; };
BooleanController.prototype = new Controller(); BooleanController.prototype = new Controller();
BooleanController.prototype.constructor = BooleanController; BooleanController.prototype.constructor = BooleanController;

9
controller.js
View File

@ -1,8 +1,13 @@
var Controller = function() { var Controller = function() {
this.name = function(n) { this.setName = function(n) {
this.propertyNameElement.innerHTML = n; this.propertyNameElement.innerHTML = n;
} }
this.setValue = function(n) {
this.object[this.propertyName] = n;
}
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type); this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
@ -11,7 +16,7 @@ var Controller = function() {
this.propertyNameElement = document.createElement('span'); this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname'); this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.name(this.propertyName); this.setName(this.propertyName);
this.domElement.appendChild(this.propertyNameElement); this.domElement.appendChild(this.propertyNameElement);

15
controller.string.js
View File

@ -1,8 +1,23 @@
var StringController = function() { var StringController = function() {
this.type = "string"; this.type = "string";
var _this = this;
Controller.apply(this, arguments); Controller.apply(this, arguments);
var input = document.createElement('input'); var input = document.createElement('input');
input.setAttribute('value', this.object[this.propertyName]); 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); this.domElement.appendChild(input);
}; };
StringController.prototype = new Controller(); StringController.prototype = new Controller();

10
demo.html
View File

@ -1,8 +1,8 @@
<html> <html>
<head> <head>
<link href="gui-bare.css" media="screen" rel="stylesheet" type="text/css" /> <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo.css" media="screen" rel="stylesheet" type="text/css" /> <link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> <!--<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
<script type="text/javascript" src="controller.js"></script> <script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="controller.string.js"></script> <script type="text/javascript" src="controller.string.js"></script>
<script type="text/javascript" src="controller.number.js"></script> <script type="text/javascript" src="controller.number.js"></script>
@ -23,7 +23,7 @@ var controllableObject =
window.onload = function() { window.onload = function() {
prettyPrint(); //prettyPrint();
GUI.start(); GUI.start();
@ -32,7 +32,7 @@ window.onload = function() {
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100) GUI.add(controllableObject, "constrainedNum", -100, 100)
.name("customName"); .setName("customName");
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "textProperty");
@ -68,7 +68,7 @@ window.onload = function() {
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100) GUI.add(controllableObject, "constrainedNum", -100, 100)
.name("customName"); .setName("customName");
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "textProperty");

22
gui.js
View File

@ -2,9 +2,7 @@ var GUI = new function() {
var _this = this; var _this = this;
// Contains list of properties we've add to the GUI in the following format: var controllers = [];
// [object, propertyName, controllerObject]
var registeredProperties = [];
this.add = function() { this.add = function() {
@ -18,7 +16,7 @@ var GUI = new function() {
var propertyName = arguments[1]; var propertyName = arguments[1];
// Have we already added this? // Have we already added this?
if (registeredPropertiesContains(object, propertyName)) { if (alreadyControlled(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added."); error("Controller for \"" + propertyName+"\" already added.");
return; return;
} }
@ -50,7 +48,7 @@ var GUI = new function() {
// Success. // Success.
controllerContainer.appendChild(controllerObject.domElement); controllerContainer.appendChild(controllerObject.domElement);
registeredProperties.push([object, propertyName, controllerObject]); controllers.push(controllerObject);
return controllerObject; return controllerObject;
@ -76,8 +74,13 @@ var GUI = new function() {
}; };
var registeredPropertiesContains = function(object, property) { var alreadyControlled = function(object, propertyName) {
// TODO: for (var i in controllers) {
if (controllers[i].object == object &&
controllers[i].propertyName == propertyName) {
return true;
}
}
return false; return false;
}; };
@ -138,13 +141,9 @@ var GUI = new function() {
this.toggle = function() { this.toggle = function() {
if (open) { if (open) {
this.hide(); this.hide();
} else { } else {
this.show(); this.show();
} }
}; };
@ -160,4 +159,5 @@ var GUI = new function() {
toggleButton.innerHTML = "Show Controls"; toggleButton.innerHTML = "Show Controls";
open = false; open = false;
} }
}; };