merged szimeks formatting with current branch

This commit is contained in:
Jono Brandel 2011-02-11 11:12:07 -08:00
commit 5d43707a21
9 changed files with 1077 additions and 1079 deletions

View File

@ -33,7 +33,7 @@ GUI.BooleanController = function() {
} catch (e) {} } catch (e) {}
} }
return GUI.Controller.prototype.setValue.call(this, val); return GUI.Controller.prototype.setValue.call(this, val);
} };
}; };
GUI.extendController(GUI.BooleanController); GUI.extendController(GUI.BooleanController);

View File

@ -20,11 +20,10 @@ GUI.FunctionController = function() {
} }
this.fire = function() { this.fire = function() {
_this.object[_this.propertyName].call(_this.object);
if (fireFunction != null) { if (fireFunction != null) {
fireFunction.call(this); fireFunction.call(this);
} }
_this.object[_this.propertyName].call(_this.object);
}; };
}; };
GUI.extendController(GUI.FunctionController); GUI.extendController(GUI.FunctionController);

View File

@ -34,12 +34,12 @@ GUI.Controller.prototype.reset = function() {
GUI.Controller.prototype.listen = function() { GUI.Controller.prototype.listen = function() {
this.parent.listenTo(this); this.parent.listenTo(this);
return this; return this;
} };
GUI.Controller.prototype.unlisten = function() { GUI.Controller.prototype.unlisten = function() {
this.parent.unlistenTo(this); // <--- hasn't been tested yet this.parent.unlistenTo(this); // <--- hasn't been tested yet
return this; return this;
} };
GUI.Controller.prototype.setValue = function(n) { GUI.Controller.prototype.setValue = function(n) {
this.object[this.propertyName] = n; this.object[this.propertyName] = n;
@ -48,22 +48,23 @@ GUI.Controller.prototype.setValue = function(n) {
} }
this.updateDisplay(); this.updateDisplay();
return this; return this;
} };
GUI.Controller.prototype.getValue = function() { GUI.Controller.prototype.getValue = function() {
return this.object[this.propertyName]; return this.object[this.propertyName];
} };
GUI.Controller.prototype.updateDisplay = function() {} GUI.Controller.prototype.updateDisplay = function() {};
GUI.Controller.prototype.onChange = function(fnc) { GUI.Controller.prototype.onChange = function(fnc) {
this.changeFunction = fnc; this.changeFunction = fnc;
return this; return this;
} };
GUI.Controller.prototype.onFinishChange = function(fnc) { GUI.Controller.prototype.onFinishChange = function(fnc) {
this.finishChangeFunction = fnc; this.finishChangeFunction = fnc;
return this; return this;
} };
GUI.Controller.prototype.options = function() { GUI.Controller.prototype.options = function() {
var _this = this; var _this = this;
@ -90,7 +91,7 @@ GUI.Controller.prototype.options = function() {
if (_this.finishChangeFunction != null) { if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue()); _this.finishChangeFunction.call(this, _this.getValue());
} }
}); }, false);
_this.domElement.appendChild(select); _this.domElement.appendChild(select);
return this; return this;
} };

View File

@ -12,7 +12,7 @@ GUI.NumberController = function() {
var clickedNumberField = false; var clickedNumberField = false;
var y = py = 0; var y = 0, py = 0;
var min = arguments[3]; var min = arguments[3];
var max = arguments[4]; var max = arguments[4];
@ -44,7 +44,6 @@ GUI.NumberController = function() {
numberField.addEventListener('blur', function(e) { numberField.addEventListener('blur', function(e) {
var val = parseFloat(this.value); var val = parseFloat(this.value);
console.log(val);
if (!isNaN(val)) { if (!isNaN(val)) {
_this.setValue(val); _this.setValue(val);
} }
@ -65,13 +64,14 @@ GUI.NumberController = function() {
// Handle up arrow and down arrow // Handle up arrow and down arrow
numberField.addEventListener('keydown', function(e) { numberField.addEventListener('keydown', function(e) {
var newVal;
switch(e.keyCode) { switch(e.keyCode) {
case 38: // up case 38: // up
var newVal = _this.getValue() + step; newVal = _this.getValue() + step;
_this.setValue(newVal); _this.setValue(newVal);
break; break;
case 40: // down case 40: // down
var newVal = _this.getValue() - step; newVal = _this.getValue() - step;
_this.setValue(newVal); _this.setValue(newVal);
break; break;
} }
@ -92,11 +92,10 @@ GUI.NumberController = function() {
_this.finishChangeFunction.call(this, _this.getValue()); _this.finishChangeFunction.call(this, _this.getValue());
} }
document.removeEventListener('mouseup', mouseup, false); document.removeEventListener('mouseup', mouseup, false);
} };
var dragNumberField = function(e) { var dragNumberField = function(e) {
draggedNumberField = true; draggedNumberField = true;
e.preventDefault(); e.preventDefault();
@ -115,7 +114,7 @@ GUI.NumberController = function() {
var newVal = _this.getValue() + dy*step; var newVal = _this.getValue() + dy*step;
_this.setValue(newVal); _this.setValue(newVal);
return false; return false;
} };
this.options = function() { this.options = function() {
_this.noSlider(); _this.noSlider();
@ -142,12 +141,12 @@ GUI.NumberController = function() {
return GUI.Controller.prototype.setValue.call(this, val); return GUI.Controller.prototype.setValue.call(this, val);
} };
this.updateDisplay = function() { this.updateDisplay = function() {
numberField.value = GUI.roundToDecimal(_this.getValue(), 4); numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
if (slider) slider.value = _this.getValue(); if (slider) slider.value = _this.getValue();
} };
}; };
GUI.extendController(GUI.NumberController); GUI.extendController(GUI.NumberController);

View File

@ -33,7 +33,7 @@ GUI.StringController = function() {
this.updateDisplay = function() { this.updateDisplay = function() {
input.value = _this.getValue(); input.value = _this.getValue();
} };
this.options = function() { this.options = function() {
_this.domElement.removeChild(input); _this.domElement.removeChild(input);

View File

@ -1,12 +1,37 @@
GUI.Slider = function(numberController, min, max, step, initValue) { GUI.Slider = function(numberController, min, max, step, initValue) {
var min = min;
var max = max;
var step = step;
var clicked = false; var clicked = false;
var _this = this; var _this = this;
var onDrag = function(e) {
if (!clicked) return;
var pos = findPos(_this.domElement);
var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
val = Math.round(val/step)*step;
numberController.setValue(val);
};
this.domElement.addEventListener('mousedown', function(e) {
clicked = true;
x = px = e.pageX;
_this.domElement.className += ' active';
_this.fg.className += ' active';
numberController.domElement.className += ' active';
onDrag(e);
document.addEventListener('mouseup', mouseup, false);
}, false);
var mouseup = function(e) {
_this.domElement.className = _this.domElement.className.replace(' active', '');
_this.fg.className = _this.fg.className.replace(' active', '');
numberController.domElement.className = numberController.domElement.className.replace(' active', '');
clicked = false;
if (numberController.finishChangeFunction != null) {
numberController.finishChangeFunction.call(this, numberController.getValue());
}
document.removeEventListener('mouseup', mouseup, false);
};
var x, px; var x, px;
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
@ -18,15 +43,15 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
this.domElement.appendChild(this.fg); this.domElement.appendChild(this.fg);
var findPos = function(obj) { var findPos = function(obj) {
var curleft = curtop = 0; var curleft = 0, curtop = 0;
if (obj.offsetParent) { if (obj.offsetParent) {
do { do {
curleft += obj.offsetLeft; curleft += obj.offsetLeft;
curtop += obj.offsetTop; curtop += obj.offsetTop;
} while (obj = obj.offsetParent); } while ((obj = obj.offsetParent));
return [curleft,curtop]; return [curleft,curtop];
} }
} };
this.__defineSetter__('value', function(e) { this.__defineSetter__('value', function(e) {
var pct = GUI.map(e, min, max, 0, 100); var pct = GUI.map(e, min, max, 0, 100);
@ -39,23 +64,20 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max); var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
val = Math.round(val/step)*step; val = Math.round(val/step)*step;
numberController.setValue(val); numberController.setValue(val);
} };
this.domElement.addEventListener('mousedown', function(e) { this.domElement.addEventListener('mousedown', function(e) {
clicked = true; clicked = true;
x = px = e.pageX; x = px = e.pageX;
_this.domElement.setAttribute('class', 'guidat-slider-bg active'); _this.domElement.setAttribute('class', 'guidat-slider-bg active');
_this.fg.setAttribute('class', 'guidat-slider-fg active'); _this.fg.setAttribute('class', 'guidat-slider-fg active');
numberController.domElement.className += ' active';
onDrag(e); onDrag(e);
document.addEventListener('mouseup', mouseup, false); document.addEventListener('mouseup', mouseup, false);
}, false); }, false);
var mouseup = function(e) { var mouseup = function(e) {
_this.domElement.setAttribute('class', 'guidat-slider-bg'); _this.domElement.setAttribute('class', 'guidat-slider-bg');
_this.fg.setAttribute('class', 'guidat-slider-fg'); _this.fg.setAttribute('class', 'guidat-slider-fg');
numberController.domElement.className = numberController.domElement.className.replace(' active', '');
clicked = false; clicked = false;
if (numberController.finishChangeFunction != null) { if (numberController.finishChangeFunction != null) {
numberController.finishChangeFunction.call(this, numberController.getValue()); numberController.finishChangeFunction.call(this, numberController.getValue());
@ -63,9 +85,8 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
document.removeEventListener('mouseup', mouseup, false); document.removeEventListener('mouseup', mouseup, false);
}; };
document.addEventListener('mousemove', onDrag, false); document.addEventListener('mousemove', onDrag, false);
this.value = initValue; this.value = initValue;
} };

View File

@ -27,11 +27,6 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
/*
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
*/
} }
a.guidat-toggle { a.guidat-toggle {

52
gui.js
View File

@ -125,28 +125,21 @@ var GUI = function() {
}, false); }, false);
toggleButton.addEventListener('click', function(e) { toggleButton.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
return false; return false;
}, false); }, false);
document.addEventListener('mouseup', function(e) { document.addEventListener('mouseup', function(e) {
if (togglePressed && !toggleDragged) { if (togglePressed && !toggleDragged) {
_this.toggle(); _this.toggle();
} }
if (togglePressed && toggleDragged) { if (togglePressed && toggleDragged) {
if (dragDisplacementX == 0) { if (dragDisplacementX == 0) {
adaptToScrollbar();
adaptToScrollbar()
} }
if (openHeight > controllerHeight) { if (openHeight > controllerHeight) {
@ -169,10 +162,7 @@ var GUI = function() {
beginResize(); beginResize();
} }
} }
};
}
document.removeEventListener('mousemove', resize, false); document.removeEventListener('mousemove', resize, false);
@ -203,7 +193,7 @@ var GUI = function() {
listenInterval = setInterval(function() { listenInterval = setInterval(function() {
_this.listen(); _this.listen();
}, this.autoListenIntervalTime); }, this.autoListenIntervalTime);
} };
this.__defineSetter__("autoListen", function(v) { this.__defineSetter__("autoListen", function(v) {
autoListen = v; autoListen = v;
@ -344,7 +334,7 @@ var GUI = function() {
} else { } else {
controllerContainer.style.overflowY = "hidden"; controllerContainer.style.overflowY = "hidden";
} }
} };
var handlerTypes = { var handlerTypes = {
"number": GUI.NumberController, "number": GUI.NumberController,
@ -364,6 +354,7 @@ var GUI = function() {
}; };
var construct = function(constructor, args) { var construct = function(constructor, args) {
function F() { function F() {
return constructor.apply(this, args); return constructor.apply(this, args);
} }
@ -470,8 +461,7 @@ GUI.allControllers = [];
GUI.allGuis = []; GUI.allGuis = [];
GUI.saveURL = function() { GUI.saveURL = function() {
title = window.location; var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
url = GUI.replaceGetVar("saveString", GUI.getSaveString());
window.location = url; window.location = url;
}; };
@ -497,20 +487,21 @@ GUI.savedAppearanceVars = [];
GUI.getSaveString = function() { GUI.getSaveString = function() {
var vals = []; var vals = [],
i;
vals.push(GUI.allGuis.length); vals.push(GUI.allGuis.length);
vals.push(document.body.scrollTop); vals.push(document.body.scrollTop);
for (var i in GUI.allGuis) { for (i in GUI.allGuis) {
var av = GUI.allGuis[i].appearanceVars(); var av = GUI.allGuis[i].appearanceVars();
for (var j = 0; j < av.length; j++) { for (var j = 0; j < av.length; j++) {
vals.push(av[j]); vals.push(av[j]);
} }
} }
for (var i in GUI.allControllers) { for (i in GUI.allControllers) {
// We don't save values for functions. // We don't save values for functions.
if (GUI.allControllers[i].type == "function") { if (GUI.allControllers[i].type == "function") {
@ -530,7 +521,7 @@ GUI.getSaveString = function() {
return vals.join(','); return vals.join(',');
} };
GUI.getVarFromURL = function(v) { GUI.getVarFromURL = function(v) {
@ -538,7 +529,7 @@ GUI.getVarFromURL = function(v) {
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) { for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split("=") hash = hashes[i].split("=");
if (hash == undefined) continue; if (hash == undefined) continue;
if (hash[0] == v) { if (hash[0] == v) {
return hash[1]; return hash[1];
@ -556,7 +547,7 @@ GUI.replaceGetVar = function(varName, val) {
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) { for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split("=") hash = hashes[i].split("=");
if (hash == undefined) continue; if (hash == undefined) continue;
if (hash[0] == varName) { if (hash[0] == varName) {
return loc.replace(hash[1], val); return loc.replace(hash[1], val);
@ -576,7 +567,7 @@ GUI.guiIndex = 0;
GUI.showSaveString = function() { GUI.showSaveString = function() {
alert(GUI.getSaveString()); alert(GUI.getSaveString());
} };
// Util functions // Util functions
@ -585,25 +576,24 @@ GUI.makeUnselectable = function(elem) {
elem.style.MozUserSelect = "none"; elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none"; elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on"; elem.unselectable = "on";
} };
GUI.makeSelectable = function(elem) { GUI.makeSelectable = function(elem) {
elem.onselectstart = function() { }; elem.onselectstart = function() { };
elem.style.MozUserSelect = "auto"; elem.style.MozUserSelect = "auto";
elem.style.KhtmlUserSelect = "auto"; elem.style.KhtmlUserSelect = "auto";
elem.unselectable = "off"; elem.unselectable = "off";
} };
GUI.map = function(v, i1, i2, o1, o2) { GUI.map = function(v, i1, i2, o1, o2) {
var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
return v; };
}
GUI.constrain = function (v, o1, o2) { GUI.constrain = function (v, o1, o2) {
if (v < o1) v = o1; if (v < o1) v = o1;
else if (v > o2) v = o2; else if (v > o2) v = o2;
return v; return v;
} };
GUI.error = function(str) { GUI.error = function(str) {
if (typeof console.error == 'function') { if (typeof console.error == 'function') {
@ -614,11 +604,11 @@ GUI.error = function(str) {
GUI.roundToDecimal = function(n, decimals) { GUI.roundToDecimal = function(n, decimals) {
var t = Math.pow(10, decimals); var t = Math.pow(10, decimals);
return Math.round(n*t)/t; return Math.round(n*t)/t;
} };
GUI.extendController = function(clazz) { GUI.extendController = function(clazz) {
clazz.prototype = new GUI.Controller(); clazz.prototype = new GUI.Controller();
clazz.prototype.constructor = clazz; clazz.prototype.constructor = clazz;
} };
if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString')); if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));

View File

@ -1,29 +1,22 @@
<!doctype html> <!doctype html>
<head> <head>
<title>gui-dat</title> <title>gui-dat</title>
<link rel="icon" type="image/png" href="demo/assets/favicon.png" /> <link rel="icon" type="image/png" href="demo/assets/favicon.png" />
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" /> <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" /> <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="gui.js">
</script> <script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="controllers/slider.js"> <script type="text/javascript" src="controllers/slider.js"></script>
</script> <script type="text/javascript" src="controllers/controller.js"></script>
<script type="text/javascript" src="controllers/controller.js"> <script type="text/javascript" src="controllers/controller.boolean.js"></script>
</script> <script type="text/javascript" src="controllers/controller.function.js"></script>
<script type="text/javascript" src="controllers/controller.boolean.js"> <script type="text/javascript" src="controllers/controller.number.js"></script>
</script> <script type="text/javascript" src="controllers/controller.string.js"></script>
<script type="text/javascript" src="controllers/controller.function.js"> <script type="text/javascript" src="demo/improvedNoise.js"></script>
</script> <script type="text/javascript" src="demo/prettify.js"></script>
<script type="text/javascript" src="controllers/controller.number.js"> <script type="text/javascript" src="demo/demo.js"></script>
</script>
<script type="text/javascript" src="controllers/controller.string.js">
</script>
<script type="text/javascript" src="demo/improvedNoise.js">
</script>
<script type="text/javascript" src="demo/prettify.js">
</script>
<script type="text/javascript" src="demo/demo.js">
</script>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[