mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Just a non-functioning little mock ;)
This commit is contained in:
parent
a32e125876
commit
70c5c0447d
@ -14,6 +14,11 @@ var Controller = function() {
|
|||||||
this.name(this.propertyName);
|
this.name(this.propertyName);
|
||||||
this.domElement.appendChild(this.propertyNameElement);
|
this.domElement.appendChild(this.propertyNameElement);
|
||||||
|
|
||||||
|
this.timeElement = document.createElement('div');
|
||||||
|
this.timeElement.setAttribute('class', 'guidat-time');
|
||||||
|
this.domElement.appendChild(this.timeElement);
|
||||||
|
|
||||||
|
|
||||||
GUI.makeUnselectable(this.domElement);
|
GUI.makeUnselectable(this.domElement);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
28
gui.css
28
gui.css
@ -1,10 +1,10 @@
|
|||||||
#guidat {
|
#guidat {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
bottom: 0;
|
||||||
right: 0;
|
width: 100%;
|
||||||
width: auto;
|
left: 0;
|
||||||
|
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.guidat * {
|
.guidat * {
|
||||||
@ -12,13 +12,21 @@
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.guidat-time {
|
||||||
|
width: 75%;
|
||||||
|
float: right;
|
||||||
|
margin-top: -3px;
|
||||||
|
margin-right: -2px;
|
||||||
|
margin-left: 3px;
|
||||||
|
background-color: #555;
|
||||||
|
border-bottom: 1px solid #666;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
.guidat {
|
.guidat {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0.97;
|
opacity: 0.97;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: right;
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,7 +113,7 @@ a.guidat-toggle:hover {
|
|||||||
border: 0;
|
border: 0;
|
||||||
color: #1ed36f;
|
color: #1ed36f;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
width: 148px;
|
width: 10.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guidat-controller.boolean {
|
.guidat-controller.boolean {
|
||||||
@ -117,7 +125,7 @@ width: 148px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guidat-controller.number input[type=text] {
|
.guidat-controller.number input[type=text] {
|
||||||
width: 35px;
|
width: 3%;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
color: #00aeff;
|
color: #00aeff;
|
||||||
@ -157,7 +165,7 @@ width: 148px;
|
|||||||
.guidat-slider-bg {
|
.guidat-slider-bg {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
width: 40%;
|
width: 7%;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
float: right;
|
float: right;
|
||||||
height: 21px;
|
height: 21px;
|
||||||
|
7
gui.js
7
gui.js
@ -23,7 +23,6 @@ var GUI = function() {
|
|||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
||||||
var open = false;
|
var open = false;
|
||||||
var width = 280;
|
|
||||||
|
|
||||||
// Prevents checkForOverflow bug in which loaded gui appearance
|
// Prevents checkForOverflow bug in which loaded gui appearance
|
||||||
// settings are not respected by presence of scrollbar.
|
// settings are not respected by presence of scrollbar.
|
||||||
@ -37,7 +36,7 @@ var GUI = function() {
|
|||||||
|
|
||||||
this.domElement = document.createElement('div');
|
this.domElement = document.createElement('div');
|
||||||
this.domElement.setAttribute('class', 'guidat');
|
this.domElement.setAttribute('class', 'guidat');
|
||||||
this.domElement.style.width = width+'px';
|
this.domElement.style.width = "100%";//width+'px';
|
||||||
|
|
||||||
var controllerContainer = document.createElement('div');
|
var controllerContainer = document.createElement('div');
|
||||||
controllerContainer.setAttribute('class', 'guidat-controllers');
|
controllerContainer.setAttribute('class', 'guidat-controllers');
|
||||||
@ -112,7 +111,7 @@ var GUI = function() {
|
|||||||
curControllerContainerHeight += dmy;
|
curControllerContainerHeight += dmy;
|
||||||
controllerContainer.style.height = openHeight+'px';
|
controllerContainer.style.height = openHeight+'px';
|
||||||
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
||||||
_this.domElement.style.width = width+'px';
|
//_this.domElement.style.width = width+'px';
|
||||||
checkForOverflow();
|
checkForOverflow();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -444,7 +443,7 @@ var GUI = function() {
|
|||||||
|
|
||||||
|
|
||||||
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
||||||
_this.domElement.style.width = width+"px";
|
//_this.domElement.style.width = width+"px";
|
||||||
|
|
||||||
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
|
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
|
||||||
explicitOpenHeight = true;
|
explicitOpenHeight = true;
|
||||||
|
@ -40,12 +40,10 @@
|
|||||||
var fizzyText = new FizzyText("gui-dat");
|
var fizzyText = new FizzyText("gui-dat");
|
||||||
|
|
||||||
var gui = new GUI();
|
var gui = new GUI();
|
||||||
var gui2 = new GUI();
|
|
||||||
|
|
||||||
|
|
||||||
// Text field
|
// Text field
|
||||||
gui.add(fizzyText, "message");
|
gui.add(fizzyText, "message");
|
||||||
gui2.add(window, "onload");
|
|
||||||
|
|
||||||
// Sliders with min and max
|
// Sliders with min and max
|
||||||
gui.add(fizzyText, "maxSize", 0.5, 7);
|
gui.add(fizzyText, "maxSize", 0.5, 7);
|
||||||
|
Loading…
Reference in New Issue
Block a user