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() {
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;

9
controller.js
View File

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

15
controller.string.js
View File

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

10
demo.html
View File

@ -1,8 +1,8 @@
<html>
<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" />
<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.string.js"></script>
<script type="text/javascript" src="controller.number.js"></script>
@ -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");

22
gui.js
View File

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