Created Controller class and started NumberController object

This commit is contained in:
jonobr1 2011-01-23 16:02:15 -08:00
parent ba1ff6f492
commit 2e942df08b
3 changed files with 79 additions and 10 deletions

52
controller.js Normal file
View File

@ -0,0 +1,52 @@
var Controller = function() {
this.domElement;
this.object = arguments[0];
this.propertyName = arguments[1];
};
var NumberController = function() {
Controller.apply(this, arguments);
this.isClicked = false;
this.py = this.y = 0;
// TODO pass argument to inc
this.inc = 0;
this.button;
this.button = document.createElement('input');
this.button.setAttribute('id', this.propertyName);
this.button.setAttribute('type', 'number');
this.button.setAttribute('value', this.y);
// return this.button;
this.addListeners = function() {
this.onmousedown = function(e) {
this.isClicked = true;
};
document.onmouseup = function(e) {
this.isClicked = false;
};
document.onmousemove = function(e) {
if(this.isClicked) {
this.py = this.y;
var dy = this.y - this.py;
if(dy > 0)
this.button.setAttribute('value', this.inc++);
else
this.button.setAttribute('value', this.inc--);
this.y = e.offsetY;
}
};
};
this.__defineGetter__("button", function(){
return this.button;
});
};
NumberController.prototype = new Controller();
NumberController.prototype.constructor = NumberController;

6
gui.js
View File

@ -57,7 +57,11 @@ var GUI = new function() {
var addHandlers = {
"number": function() {
//
var n = new NumberController(arguments);
n.addListeners();
return n.button;
// return n.button;
},
"string": function() {

View File

@ -1,16 +1,29 @@
<!doctype html>
<head>
<title>Draggable Button Prototype</title>
<script type = "text/javascript" src = "../controller.js"></script>
<script type = "text/javascript" src = "../gui.js"></script>
<script type = "text/javascript">
// 1. create a container div
// 2. stuff buttons in there via the constructor outlined by george
// a. No Arguments Draggable Input
// • Made up of html input button type of number
// b. Arguments Draggable Input
// • Made up of html input button type of number
// 3.
var controllableObject = {
numberProperty: 20,
anotherNumberProperty: 0,
textProperty: "a string",
booleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
window.onload = function() {
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
}
</script>
</head>
<body>