This commit is contained in:
Doug Fritz 2011-04-18 17:27:36 -07:00
commit d730f43f65
8 changed files with 261 additions and 177 deletions

View File

@ -1,193 +1,206 @@
* {
padding: 0px;
margin: 0px;
padding: 0px;
margin: 0px;
}
body {
font: 9.5px/13px Lucida Grande, sans-serif;
padding: 0 20px 20px 20px;
font: 9.5px/13px Lucida Grande, sans-serif;
padding: 0 20px 20px 20px;
}
#container {
max-width: 530px;
max-width: 530px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
color: #222;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
color: #222;
}
hr {
border: 0;
height: 0;
border-top: 1px dotted #ccc;
border: 0;
height: 0;
border-top: 1px dotted #ccc;
}
h1 {
font-size: 80px;
font-weight: 800;
text-transform: lowercase;
line-height: 80px;
margin: 39px 0 20px 0;
font-size: 80px;
font-weight: 800;
text-transform: lowercase;
line-height: 80px;
margin: 39px 0 20px 0;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
text-decoration: none;
margin-right: 7px;
text-decoration: none;
margin-right: 7px;
}
h1 img {
width: 45px;
height: 45px;
margin-bottom: 8px;
width: 45px;
height: 45px;
margin-bottom: 8px;
}
h2 {
margin-top: 30px;
font-size: 18px;
margin-bottom: 24px;
margin-top: 30px;
font-size: 18px;
margin-bottom: 24px;
}
h2.section {
margin: 0;
padding: 20px 0px 20px 0px;
cursor: pointer;
border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear;
margin: 0;
padding: 20px 0px 20px 0px;
cursor: pointer;
border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear;
}
h2.section:hover {
color: #00aeff;
color: #00aeff;
}
div.collapsed h2, div.expanded h2 {
float: left;
clear: both;
width: 100%;
cursor: pointer;
float: left;
clear: both;
width: 100%;
cursor: pointer;
}
.last { margin-bottom: 0px !important; }
.first { margin-top: 0px; }
.last {
margin-bottom: 0px !important;
}
.first {
margin-top: 0px;
}
div.trans {
border-top: 1px dotted #ccc;
margin: 0px 0px 20px 0px;
border-top: 1px dotted #ccc;
margin: 0px 0px 20px 0px;
}
ol#secrets {
padding: 0px;
margin: 0px;
padding: 0px;
margin: 0px;
}
div.expanded h2:before {
content: '-';
content: '-';
}
div.collapsed h2:before {
content: '+';
content: '+';
}
div.expanded h2:before, div.collapsed h2:before {
font-weight: normal;
line-height: 2px;
float: left;
margin-top: 6px;
margin-right: 6px;
font-size: 9px;
font-family: Monaco, monospace;
font-weight: normal;
line-height: 2px;
float: left;
margin-top: 6px;
margin-right: 6px;
font-size: 9px;
font-family: Monaco, monospace;
}
div.collapsable>div {
padding-bottom: 10px;
padding-bottom: 10px;
}
div.collapsable {
overflow: hidden;
clear: both;
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
overflow: hidden;
clear: both;
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
}
div.collapsable div {
padding-bottom: 20px;
margin-bottom: -20px;
height: auto;
padding-bottom: 20px;
margin-bottom: -20px;
height: auto;
}
div.collapsed .collapsable {
overflow: hidden;
clear: both;
height: 0;
overflow: hidden;
clear: both;
height: 0;
}
div.expanded { cursor: pointer; }
div.expanded {
cursor: pointer;
}
#helvetica-demo {
position: absolute;
left: 0;
top: 0;
width: 800;
height: 300;
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 800;
height: 300;
z-index: -1;
}
#notifier {
position: fixed;
right: 0;
top: 0;
width: 271px;
height: 142px;
background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
z-index: -2;
margin: 30px 22px 0 0;
position: fixed;
right: 0;
top: 300px;
width: 271px;
height: 142px;
background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
z-index: -2;
margin: 30px 22px 0 0;
}
pre {
margin: 20px 0 20px 0;
padding: 15px;
background-color: #222;
max-width: 500px;
font: 10px Monaco, monospace;
clear: both;
margin: 20px 0 20px 0;
padding: 15px;
background-color: #222;
max-width: 500px;
font: 10px Monaco, monospace;
clear: both;
}
p, ul, ol {
font-size: 125%;
clear: both;
line-height: 18px;
margin-bottom: 24px;
font-size: 125%;
clear: both;
line-height: 18px;
margin-bottom: 24px;
}
li {
margin-left: 22px;
margin-left: 22px;
}
ul#desc {
list-style: circle;
font-size: 100%;
max-width: 380px;
list-style: circle;
font-size: 100%;
max-width: 380px;
}
a:link {
color: #00aeff;
color: #00aeff;
}
a:visited {
color: #0fa954;
color: #0fa954;
}
a:hover {
color: #e61d5f;
color: #e61d5f;
}
a:active {
color: #54396e;
color: #54396e;
}
footer {
margin-top: 20px;
background-color: #eee;
width: 510px;
padding: 10px;
clear: both;
color: #444;
margin-top: 20px;
background-color: #eee;
width: 510px;
padding: 10px;
clear: both;
color: #444;
}
@ -195,27 +208,58 @@ pre a:link,
pre a:visited,
pre a:active,
pre a:hover {
color: #ccc;
color: #ccc;
}
code {
font: 10px Monaco, monospace;
font: 10px Monaco, monospace;
}
code strong {
font-weight: normal;
color: #e61d5f;
font-weight: normal;
color: #e61d5f;
}
/* SPAN elements with the classes below are added by prettyprint. */
.str { color: #0fa954; }
.kwd { color: #e61d5f; }
.com { color: #555; }
.typ { color: #ccc; }
.lit { color: #00aeff; }
.pun, .opn, .clo { color: #777; }
.pln { color: #ccc; }
.tag { color: #555; }
.atn { color: #555; }
.atv { color: #777; }
.dec { color: #606; }
.str {
color: #0fa954;
}
.kwd {
color: #e61d5f;
}
.com {
color: #555;
}
.typ {
color: #ccc;
}
.lit {
color: #00aeff;
}
.pun, .opn, .clo {
color: #777;
}
.pln {
color: #ccc;
}
.tag {
color: #555;
}
.atn {
color: #555;
}
.atv {
color: #777;
}
.dec {
color: #606;
}

View File

@ -10,7 +10,7 @@ function FizzyText(message) {
this.maxSize = 3.2; // how big can they get?
this.noiseStrength = 10; // how turbulent is the flow?
this.speed = 0.4; // how fast do particles move?
this.displayOutline = true; // should we draw the message as a stroke?
this.displayOutline = false; // should we draw the message as a stroke?
this.framesRendered = 0;
// __defineGetter__ and __defineSetter__ makes JavaScript believe that

View File

@ -6,15 +6,18 @@
<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="src/dat/gui.css" media="screen" rel="stylesheet" type="text/css"
/>
<script type="text/javascript" src="src/dat/GUI.js"></script>
<script type="text/javascript" src="src/dat/Slider.js"></script>
<script type="text/javascript" src="src/dat/Controller.js"></script>
<script type="text/javascript" src="src/dat/ControllerBoolean.js"></script>
<script type="text/javascript" src="src/dat/ControllerFunction.js"></script>
<script type="text/javascript" src="src/dat/ControllerNumber.js"></script>
<script type="text/javascript" src="src/dat/ControllerString.js"></script>
<link href="src/DAT/GUI/gui.css" media="screen" rel="stylesheet"
type="text/css"/>
<script type="text/javascript" src="src/DAT/GUI/GUI.js"></script>
<script type="text/javascript" src="src/DAT/GUI/Slider.js"></script>
<script type="text/javascript" src="src/DAT/GUI/Controller.js"></script>
<script type="text/javascript"
src="src/DAT/GUI/ControllerBoolean.js"></script>
<script type="text/javascript"
src="src/DAT/GUI/ControllerFunction.js"></script>
<script type="text/javascript" src="src/DAT/GUI/ControllerNumber.js"></script>
<script type="text/javascript" src="src/DAT/GUI/ControllerString.js"></script>
<script type="text/javascript" src="demo/improvedNoise.js"></script>
<script type="text/javascript" src="demo/prettify.js"></script>
@ -78,7 +81,8 @@
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
if (elementClass && elementClass.indexOf(className) != -1 &&
hasClassName.test(elementClass))
results.push(element);
}

View File

@ -76,6 +76,9 @@ DAT.GUI.Controller.prototype.options = function() {
var opt = document.createElement('option');
opt.innerHTML = i;
opt.setAttribute('value', arr[i]);
if (arguments[i] == this.getValue()) {
opt.selected = true;
}
select.appendChild(opt);
}
} else {
@ -83,6 +86,9 @@ DAT.GUI.Controller.prototype.options = function() {
var opt = document.createElement('option');
opt.innerHTML = arguments[i];
opt.setAttribute('value', arguments[i]);
if (arguments[i] == this.getValue()) {
opt.selected = true;
}
select.appendChild(opt);
}
}

View File

@ -20,13 +20,9 @@ DAT.GUI.ControllerNumber = function() {
var max = arguments[4];
var step = arguments[5];
if (!step) {
if (min != undefined && max != undefined) {
var defaultStep = function() {
step = (max - min) * 0.01;
} else {
step = 1;
}
}
};
this.min = function() {
var needsSlider = false;
@ -40,6 +36,9 @@ DAT.GUI.ControllerNumber = function() {
}
if (needsSlider) {
addSlider();
if (step == undefined) {
defaultStep();
}
}
return _this;
};
@ -56,6 +55,9 @@ DAT.GUI.ControllerNumber = function() {
}
if (needsSlider) {
addSlider();
if (step == undefined) {
defaultStep();
}
}
return _this;
};
@ -69,6 +71,18 @@ DAT.GUI.ControllerNumber = function() {
return _this;
};
this.getMin = function() {
return min;
};
this.getMax = function() {
return max;
};
this.getStep = function() {
return step || 1;
}
var numberField = document.createElement('input');
numberField.setAttribute('id', this.propertyName);
numberField.setAttribute('type', 'text');

View File

@ -26,11 +26,16 @@ DAT.GUI.ControllerString = function() {
}, false);
input.addEventListener('blur', function() {
DAT.GUI.supressHotKeys = false;
if (_this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue());
}
}, false);
input.addEventListener('focus', function() {
DAT.GUI.supressHotKeys = true;
}, false);
this.updateDisplay = function() {
input.value = _this.getValue();
};

View File

@ -6,6 +6,10 @@ DAT.GUI = function(parameters) {
parameters = {};
}
if (parameters.height == undefined) {
parameters.height = 300;
}
var MIN_WIDTH = 240;
var MAX_WIDTH = 500;
@ -19,11 +23,9 @@ DAT.GUI = function(parameters) {
// Sum total of heights of controllers in this gui
var controllerHeight;
var curControllerContainerHeight = 0;
var _this = this;
var open = false;
var open = true;
var width = 280;
// Prevents checkForOverflow bug in which loaded gui appearance
@ -45,9 +47,10 @@ DAT.GUI = function(parameters) {
this.domElement.setAttribute('class', 'guidat');
this.domElement.style.width = width + 'px';
var curControllerContainerHeight = parameters.height;
var controllerContainer = document.createElement('div');
controllerContainer.setAttribute('class', 'guidat-controllers');
controllerContainer.style.height = '0px';
controllerContainer.style.height = curControllerContainerHeight + 'px';
// Firefox hack to prevent horizontal scrolling
controllerContainer.addEventListener('DOMMouseScroll', function(e) {
@ -71,11 +74,10 @@ DAT.GUI = function(parameters) {
}, false);
var toggleButton = document.createElement('a');
toggleButton.setAttribute('class', 'guidat-toggle');
toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = openString;
toggleButton.innerHTML = open ? closeString : openString;
var toggleDragged = false;
var dragDisplacementY = 0;
@ -357,13 +359,10 @@ DAT.GUI = function(parameters) {
'function': DAT.GUI.ControllerFunction
};
this.reset = function() {
// TODO ... Set all values back to their initials.
}
// DAT.GUI ... DAT.GUI
this.toggle = function() {
open ? this.close() : this.open();
};
@ -373,6 +372,7 @@ DAT.GUI = function(parameters) {
resizeTo = openHeight;
clearTimeout(resizeTimeout);
beginResize();
adaptToScrollbar();
open = true;
}
@ -381,6 +381,7 @@ DAT.GUI = function(parameters) {
resizeTo = 0;
clearTimeout(resizeTimeout);
beginResize();
adaptToScrollbar();
open = false;
}
@ -396,13 +397,12 @@ DAT.GUI = function(parameters) {
var beginResize = function() {
curControllerContainerHeight = controllerContainer.offsetHeight;
curControllerContainerHeight += (resizeTo - curControllerContainerHeight)
* 0.6;
if (Math.abs(curControllerContainerHeight - resizeTo) < 1) {
curControllerContainerHeight = resizeTo;
adaptToScrollbar();
} else {
resizeTimeout = setTimeout(beginResize, 1000 / 30);
}
@ -413,15 +413,14 @@ DAT.GUI = function(parameters) {
}
var adaptToScrollbar = function() {
// Clears lingering slider column
_this.domElement.style.width = (width + 1) + 'px';
// Clears lingering scrollbar column
_this.domElement.style.width = (width - 1) + 'px';
setTimeout(function() {
_this.domElement.style.width = width + 'px';
}, 1);
};
// Load saved appearance:
if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) {
@ -453,13 +452,23 @@ DAT.GUI = function(parameters) {
DAT.GUI.allGuis.push(this);
// Add hide listener if this is the first DAT.GUI.
if (DAT.GUI.allGuis.length == 1) {
window.addEventListener('keyup', function(e) {
// Hide on 'H'
if (e.keyCode == 72) {
if (!DAT.GUI.supressHotKeys && e.keyCode == 72) {
DAT.GUI.toggleHide();
}
}, false);
if (DAT.GUI.inlineCSS) {
var styleSheet = document.createElement('style');
styleSheet.setAttribute('type', 'text/css');
styleSheet.innerHTML = DAT.GUI.inlineCSS;
document.head.appendChild(styleSheet);
}
}
};
@ -474,6 +483,7 @@ DAT.GUI.autoPlaceContainer = null;
DAT.GUI.allControllers = [];
DAT.GUI.allGuis = [];
DAT.GUI.supressHotKeys = false;
DAT.GUI.toggleHide = function() {
if (DAT.GUI.hidden) {
@ -524,8 +534,7 @@ DAT.GUI.savedAppearanceVars = [];
DAT.GUI.getSaveString = function() {
var vals = [],
i;
var vals = [], i;
vals.push(DAT.GUI.allGuis.length);
vals.push(document.body.scrollTop);

View File

@ -17,8 +17,9 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
if (!clicked) return;
var pos = findPos(_this.domElement);
var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
.offsetWidth, min, max);
val = Math.round(val / step) * step;
.offsetWidth, numberController.getMin(), numberController.getMax());
val = Math.round(val / numberController.getStep()) * numberController
.getStep();
numberController.setValue(val);
};
@ -34,7 +35,8 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
DAT.GUI.removeClass(numberController.domElement, 'active');
clicked = false;
if (numberController.finishChangeFunction != null) {
numberController.finishChangeFunction.call(this, numberController.getValue());
numberController.finishChangeFunction.call(this,
numberController.getValue());
}
document.removeEventListener('mouseup', mouseup, false);
};
@ -51,8 +53,8 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
};
this.__defineSetter__('value', function(e) {
var pct = DAT.GUI.map(e, min, max, 0, 100);
this.fg.style.width = pct + "%";
this.fg.style.width = DAT.GUI.map(e, numberController.getMin(),
numberController.getMax(), 0, 100) + "%";
});
document.addEventListener('mousemove', onDrag, false);