mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Merged into Jono's new index.html
This commit is contained in:
George Michael Brower
commit
a559aa20e5
@ -1,25 +0,0 @@
|
||||
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; // counteracts default.
|
||||
}, false);
|
||||
|
||||
this.domElement.style.cursor = "pointer";
|
||||
this.propertyNameElement.style.cursor = "pointer";
|
||||
this.domElement.appendChild(input);
|
||||
|
||||
};
|
||||
BooleanController.prototype = new Controller();
|
||||
BooleanController.prototype.constructor = BooleanController;
|
||||
@ -1,12 +0,0 @@
|
||||
var FunctionController = function() {
|
||||
this.type = "function";
|
||||
var _this = this;
|
||||
Controller.apply(this, arguments);
|
||||
this.domElement.addEventListener('click', function() {
|
||||
_this.object[_this.propertyName].call(_this.object);
|
||||
}, false);
|
||||
this.domElement.style.cursor = "pointer";
|
||||
this.propertyNameElement.style.cursor = "pointer";
|
||||
};
|
||||
FunctionController.prototype = new Controller();
|
||||
FunctionController.prototype.constructor = FunctionController;
|
||||
@ -1,42 +0,0 @@
|
||||
var Controller = function() {
|
||||
|
||||
this.setName = function(n) {
|
||||
this.propertyNameElement.innerHTML = n;
|
||||
}
|
||||
|
||||
this.setValue = function(n) {
|
||||
this.object[this.propertyName] = n;
|
||||
}
|
||||
|
||||
this.getValue = function() {
|
||||
return this.object[this.propertyName];
|
||||
}
|
||||
|
||||
this.makeUnselectable = function(elem) {
|
||||
elem.onselectstart = function() { return false; };
|
||||
elem.style.MozUserSelect = "none";
|
||||
elem.style.KhtmlUserSelect = "none";
|
||||
elem.unselectable = "on";
|
||||
}
|
||||
|
||||
this.makeSelectable = function(elem) {
|
||||
elem.onselectstart = function() { };
|
||||
elem.style.MozUserSelect = "auto";
|
||||
elem.style.KhtmlUserSelect = "auto";
|
||||
elem.unselectable = "off";
|
||||
}
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
|
||||
|
||||
this.object = arguments[0];
|
||||
this.propertyName = arguments[1];
|
||||
|
||||
this.propertyNameElement = document.createElement('span');
|
||||
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
|
||||
this.setName(this.propertyName);
|
||||
this.domElement.appendChild(this.propertyNameElement);
|
||||
|
||||
this.makeUnselectable(this.domElement);
|
||||
|
||||
};
|
||||
@ -1,132 +0,0 @@
|
||||
// TODO: How do we intercept the press up/down event on number fields?
|
||||
// TODO: Provide alternate controllers for non-html5 browsers?
|
||||
// TODO: Firefox is retarded?
|
||||
var NumberController = function() {
|
||||
|
||||
this.type = "number";
|
||||
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
var _this = this;
|
||||
|
||||
// If we simply click and release a number field, we want to highlight it.
|
||||
// This variable keeps track of whether or not we've draggedNumberField.
|
||||
var draggedNumberField = false;
|
||||
var clickedNumberField = false;
|
||||
|
||||
var y = py = 0;
|
||||
|
||||
var min = arguments[2];
|
||||
var max = arguments[3];
|
||||
var step = arguments[4];
|
||||
|
||||
if (!step) {
|
||||
if (min && max) {
|
||||
step = (max-min)*0.01;
|
||||
} else {
|
||||
step = 1;
|
||||
}
|
||||
}
|
||||
|
||||
var numberField = document.createElement('input');
|
||||
numberField.setAttribute('id', this.propertyName);
|
||||
|
||||
// Little up and down arrows are pissing me off.
|
||||
numberField.setAttribute('type', 'text');
|
||||
numberField.setAttribute('value', this.getValue());
|
||||
|
||||
if (step) numberField.setAttribute('step', step);
|
||||
|
||||
this.domElement.appendChild(numberField);
|
||||
|
||||
var slider;
|
||||
|
||||
if (min && max &&
|
||||
(navigator.appVersion.indexOf("chrome") != -1 || navigator.appVersion.indexOf("Safari") != -1)) {
|
||||
|
||||
slider = document.createElement('input');
|
||||
slider.setAttribute('type', 'range');
|
||||
slider.setAttribute('value', this.getValue());
|
||||
slider.setAttribute('min', min);
|
||||
slider.setAttribute('max', max);
|
||||
|
||||
slider.setAttribute('step', step);
|
||||
slider.addEventListener('change', function(e) {
|
||||
updateValue(this.value);
|
||||
}, false);
|
||||
this.domElement.appendChild(slider);
|
||||
}
|
||||
|
||||
numberField.addEventListener('blur', function(e) {
|
||||
var val = parseFloat(this.value);
|
||||
if (!isNaN(val)) {
|
||||
updateValue(val);
|
||||
}
|
||||
}, false);
|
||||
|
||||
numberField.addEventListener('mousewheel', function(e) {
|
||||
e.preventDefault();
|
||||
updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
|
||||
return false;
|
||||
}, false);
|
||||
|
||||
numberField.addEventListener('mousedown', function(e) {
|
||||
py = y = e.pageY;
|
||||
clickedNumberField = true;
|
||||
document.addEventListener('mousemove', dragNumberField, false);
|
||||
}, false);
|
||||
|
||||
document.addEventListener('mouseup', function(e) {
|
||||
document.removeEventListener('mousemove', dragNumberField, false);
|
||||
_this.makeSelectable(GUI.domElement);
|
||||
_this.makeSelectable(numberField);
|
||||
if (clickedNumberField && !draggedNumberField) {
|
||||
numberField.focus();
|
||||
numberField.select();
|
||||
}
|
||||
draggedNumberField = false;
|
||||
clickedNumberField = false;
|
||||
}, false);
|
||||
|
||||
if(navigator.appVersion.indexOf('chrome') != -1) {
|
||||
document.addEventListener('mouseout', function(e) {
|
||||
document.removeEventListener('mousemove', dragNumberField, false);
|
||||
}, false);
|
||||
}
|
||||
|
||||
var dragNumberField = function(e) {
|
||||
draggedNumberField = true;
|
||||
e.preventDefault();
|
||||
|
||||
// We don't want to be highlighting this field as we scroll.
|
||||
// Or any other fields in this gui for that matter ...
|
||||
// TODO: Make makeUselectable go through each element and child element.
|
||||
_this.makeUnselectable(GUI.domElement);
|
||||
_this.makeUnselectable(numberField);
|
||||
|
||||
py = y;
|
||||
y = e.pageY;
|
||||
var dy = py - y;
|
||||
var newVal = _this.getValue() + dy*step;
|
||||
updateValue(newVal);
|
||||
return false;
|
||||
}
|
||||
|
||||
var updateValue = function(val) {
|
||||
|
||||
val = parseFloat(val);
|
||||
|
||||
if (min && val <= min) {
|
||||
val = min;
|
||||
} else if (max && val >= max) {
|
||||
val = max;
|
||||
}
|
||||
_this.setValue(val);
|
||||
numberField.value = _this.getValue();
|
||||
if (slider) slider.value = _this.getValue();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
NumberController.prototype = new Controller();
|
||||
NumberController.prototype.constructor = NumberController;
|
||||
@ -1,27 +0,0 @@
|
||||
var StringController = function() {
|
||||
|
||||
this.type = "string";
|
||||
|
||||
var _this = this;
|
||||
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
var input = document.createElement('input');
|
||||
|
||||
var initialValue = this.getValue();
|
||||
|
||||
input.setAttribute('value', initialValue);
|
||||
input.setAttribute('spellcheck', 'false');
|
||||
this.domElement.addEventListener('mouseup', function() {
|
||||
input.focus();
|
||||
input.select();
|
||||
}, false);
|
||||
|
||||
input.addEventListener('keyup', function() {
|
||||
_this.setValue(input.value);
|
||||
}, false);
|
||||
|
||||
this.domElement.appendChild(input);
|
||||
};
|
||||
StringController.prototype = new Controller();
|
||||
StringController.prototype.constructor = StringController;
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
10
index.html
10
index.html
@ -1,11 +1,14 @@
|
||||
<html>
|
||||
<!doctype html>
|
||||
<head>
|
||||
<title>GUI-DAT</title>
|
||||
|
||||
<link rel="icon" type="image/ico" href="favicon.ico">
|
||||
|
||||
<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="gui.js"></script>
|
||||
<script type="text/javascript" src="controllers/slider.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
||||
@ -85,5 +88,8 @@ window.onload = function() {
|
||||
|
||||
};
|
||||
</pre>
|
||||
<footer>
|
||||
By <a href="http://georgemichaelbrower.com">George Michael Brower</a>, <a href="">Jono Brandel</a>, and <a href="https://github.com/jonobr1/GUI-DAT">you</a>.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user