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

Began gui.css

Browse Source
This commit is contained in:
George Michael Brower 2011-01-23 16:43:02 -07:00
parent 7c1fcb6cd8
commit d140f6e02d
4 changed files with 76 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README
View File

@ -1,2 +1,2 @@
GUI-DAT is a controller library for JavaScript. GUI-DAT is a controller library for JavaScript.
Refer to [this gist](https://gist.github.com/792496) for basic usage. Refer to https://gist.github.com/792496 for basic usage.

1
demo.html
View File

@ -1,5 +1,6 @@
<html> <html>
<head> <head>
<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"> <script type="text/javascript">

20
gui.css Normal file
View File

@ -0,0 +1,20 @@
#guidat {
position: absolute;
border: 1px solid red;
width: 300px;
z-index: 200;
top: 0;
left: 100%;
margin-left: -320px;
}
#guidat-controllers {
height: 300px;
overflow-y: scroll;
}
#guidat-toggle {
text-align: center;
display: block;
padding: 5px;
}

80
gui.js
View File

@ -1,34 +1,11 @@
var GUI = new function() { var GUI = new function() {
var _this = this;
// Contains list of properties we've add to the GUI in the following format: // Contains list of properties we've add to the GUI in the following format:
// [object, propertyName, controllerObject] // [object, propertyName, controllerObject]
var registeredProperties = []; var registeredProperties = [];
var domElement;
var controllerContainer;
var started = false;
this.start = function() {
domElement = document.createElement('div');
domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
toggleButton = document.createElement('a');
toggleButton.setAttribute('id', 'guidat-toggle');
toggleButton.innerHTML = "Show Controls";
domElement.appendChild(controllerContainer);
document.body.appendChild(domElement);
started = true;
}
this.add = function() { this.add = function() {
// We need to call GUI.start() before .add() // We need to call GUI.start() before .add()
@ -107,5 +84,56 @@ var GUI = new function() {
console.error("[GUI ERROR] " + str); console.error("[GUI ERROR] " + str);
} }
}; };
// GUI ... GUI
var domElement;
var controllerContainer;
var started = false;
var open = false;
this.start = function() {
domElement = document.createElement('div');
domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
toggleButton = document.createElement('a');
toggleButton.setAttribute('id', 'guidat-toggle');
toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = "Show Controls";
toggleButton.addEventListener('click', function(e) {
_this.toggle();
e.preventDefault();
}, false);
domElement.appendChild(controllerContainer);
domElement.appendChild(toggleButton);
document.body.appendChild(domElement);
started = true;
};
this.toggle = function() {
if (open) {
// Close the menu.
open = false;
} else {
// Open the menu.
open = true;
}
};
}; };