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

Merge branch 'master' of github.com:jonobr1/GUI-DAT

Browse Source
This commit is contained in:
jonobr1 2011-01-24 14:30:13 -08:00
commit c1a36b0030
6 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
controller.js
View File

@ -19,6 +19,13 @@ var Controller = function() {
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);

7
controller.number.js
View File

@ -58,13 +58,18 @@ var NumberController = function() {
}, false);
document.addEventListener('mouseup', function(e) {
isClicked = false;
_this.makeSelectable(GUI.domElement);
_this.makeSelectable(button);
isDragged = false;
}, false);
document.addEventListener('mousemove', function(e) {
if(isClicked) {
e.preventDefault();
_this.makeUnselectable(GUI.domElement);
_this.makeUnselectable(button);
py = y;
y = e.offsetY;
y = e.offsetY;
var dy = y - py;
if(dy < 0) {

8
controller.string.js
View File

@ -11,6 +11,7 @@ var StringController = function() {
var initialValue = this.getValue();
input.setAttribute('value', initialValue);
input.setAttribute('spellcheck', 'false');
this.domElement.addEventListener('mouseup', function() {
input.focus();
input.select();
@ -20,13 +21,6 @@ var StringController = function() {
_this.setValue(input.value);
}, false);
input.addEventListener('blur', function(e) {
if(_this.getValue() == '') {
_this.setValue(initialValue);
this.value = initialValue;
}
}, false);
this.domElement.appendChild(input);
};
StringController.prototype = new Controller();

5
demo.html
View File

@ -3,12 +3,13 @@
<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="controller.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.boolean.js"></script>
<script type="text/javascript" src="controller.function.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script id="demo" type="text/javascript">
var controllableObject =
{
@ -41,8 +42,6 @@ window.onload = function() {
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a checkbox
GUI.add(controllableObject, "anotherBooleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");

13
gui.css
View File

@ -2,12 +2,12 @@
font: 9px Monaco, monospace;
color: #fff;
position: fixed;
width: 250px;
width: 320px;
z-index: 200;
opacity: 0.95;
top: 0;
left: 100%;
margin-left: -270px;
margin-left: -340px;
background-color: #fff;
-moz-transition: margin-top .2s ease-out;
-webkit-transition: margin-top .2s ease-out;
@ -53,7 +53,6 @@
.guidat-controller input {
float: right;
outline: none;
clear: both;
border: 0;
padding: 2px;
}
@ -78,7 +77,11 @@
}
.guidat-controller.number input[type=number] {
width: 45px;
cursor: ns-resize;
margin-left: 10px;
}
.guidat-controller.number input[type=slider] {
width: 45px;
}
.guidat-controller.boolean input {
@ -88,7 +91,7 @@ margin-top: 6px;
.guidat-controller:last-child {
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

22
gui.js
View File

@ -17,8 +17,8 @@ var GUI = new function() {
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added.");
return;
// error("Controller for \"" + propertyName+"\" already added.");
// return;
}
var value = object[propertyName];
@ -102,7 +102,7 @@ var GUI = new function() {
// GUI ... GUI
var domElement;
this.domElement = null;
var controllerContainer;
var started = false;
var open = false;
@ -112,8 +112,8 @@ var GUI = new function() {
this.start = function() {
domElement = document.createElement('div');
domElement.setAttribute('id', 'guidat');
this.domElement = document.createElement('div');
this.domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
@ -127,12 +127,12 @@ var GUI = new function() {
e.preventDefault();
}, false);
domElement.appendChild(controllerContainer);
domElement.appendChild(toggleButton);
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
domElement.style.marginTop = -domElementMarginTop+"px";
this.domElement.style.marginTop = -domElementMarginTop+"px";
document.body.appendChild(domElement);
document.body.appendChild(this.domElement);
started = true;
@ -149,13 +149,13 @@ var GUI = new function() {
};
this.show = function() {
domElement.style.marginTop = 0+"px";
this.domElement.style.marginTop = 0+"px";
toggleButton.innerHTML = "Hide Controls";
open = true;
}
this.hide = function() {
domElement.style.marginTop = -domElementMarginTop+"px";
this.domElement.style.marginTop = -domElementMarginTop+"px";
toggleButton.innerHTML = "Show Controls";
open = false;
}