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

formatted source

Browse Source 
I’ve run the source files through js-beautify because my editor (Atom)
kept barfing on things like not having newlines at the ends of files.
This commit is contained in:
mike 2016-06-25 14:25:23 -04:00
parent b9410572ea
commit 581e482823
27 changed files with 1635 additions and 1613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example.html
View File

@ -1,13 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
</head> </head>
<body> <body>
<script type="text/javascript" src="build/dat.gui.min.js"></script> <script type="text/javascript" src="build/dat.gui.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var obj = { x: 5 }; var obj = {
x: 5
};
var gui = new dat.GUI(); var gui = new dat.GUI();
gui.add(obj, 'x'); gui.add(obj, 'x');
</script> </script>
</body> </body>
</html> </html>

7
src/dat/color/Color.js
View File

@ -28,7 +28,6 @@ define([
this.__state.a = this.__state.a || 1; this.__state.a = this.__state.a || 1;
}; };
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a']; Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
@ -169,12 +168,10 @@ define([
var result = math.rgb_to_hsv(color.r, color.g, color.b); var result = math.rgb_to_hsv(color.r, color.g, color.b);
common.extend(color.__state, common.extend(color.__state, {
{
s: result.s, s: result.s,
v: result.v v: result.v
} });
);
if (!common.isNaN(result.h)) { if (!common.isNaN(result.h)) {
color.__state.h = result.h; color.__state.h = result.h;

2
src/dat/color/interpret.js
View File

@ -331,10 +331,8 @@ define([
} }
]; ];
return interpret; return interpret;
}); });

2
src/dat/controllers/BooleanController.js
View File

@ -36,7 +36,6 @@ define([
this.__checkbox = document.createElement('input'); this.__checkbox = document.createElement('input');
this.__checkbox.setAttribute('type', 'checkbox'); this.__checkbox.setAttribute('type', 'checkbox');
dom.bind(this.__checkbox, 'change', onChange, false); dom.bind(this.__checkbox, 'change', onChange, false);
this.domElement.appendChild(this.__checkbox); this.domElement.appendChild(this.__checkbox);
@ -81,7 +80,6 @@ define([
} }
} }
); );

2
src/dat/controllers/ColorController.js
View File

@ -205,7 +205,6 @@ define([
_this.setValue(_this.__color.toOriginal()); _this.setValue(_this.__color.toOriginal());
return false; return false;
} }
@ -318,7 +317,6 @@ define([
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
} }
return ColorController; return ColorController;
}); });

1
src/dat/controllers/Controller.js
View File

@ -140,5 +140,4 @@ define([
return Controller; return Controller;
}); });

4
src/dat/controllers/FunctionController.js
View File

@ -45,7 +45,6 @@ define([
this.domElement.appendChild(this.__button); this.domElement.appendChild(this.__button);
}; };
FunctionController.superclass = Controller; FunctionController.superclass = Controller;
@ -53,8 +52,7 @@ define([
common.extend( common.extend(
FunctionController.prototype, FunctionController.prototype,
Controller.prototype, Controller.prototype, {
{
fire: function () { fire: function () {
if (this.__onChange) { if (this.__onChange) {

1
src/dat/controllers/NumberController.js
View File

@ -57,7 +57,6 @@ define([
this.__precision = numDecimals(this.__impliedStep); this.__precision = numDecimals(this.__impliedStep);
}; };
NumberController.superclass = Controller; NumberController.superclass = Controller;

1
src/dat/controllers/NumberControllerBox.js
View File

@ -134,4 +134,3 @@ define([
return NumberControllerBox; return NumberControllerBox;
}); });

10
src/dat/controllers/NumberControllerSlider.js
View File

@ -40,15 +40,17 @@ function(NumberController, dom, css, common, styleSheet) {
*/ */
var NumberControllerSlider = function (object, property, min, max, step) { var NumberControllerSlider = function (object, property, min, max, step) {
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step }); NumberControllerSlider.superclass.call(this, object, property, {
min: min,
max: max,
step: step
});
var _this = this; var _this = this;
this.__background = document.createElement('div'); this.__background = document.createElement('div');
this.__foreground = document.createElement('div'); this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown); dom.bind(this.__background, 'mousedown', onMouseDown);
dom.addClass(this.__background, 'slider'); dom.addClass(this.__background, 'slider');
@ -116,8 +118,6 @@ function(NumberController, dom, css, common, styleSheet) {
} }
); );
function map(v, i1, i2, o1, o2) { function map(v, i1, i2, o1, o2) {

1
src/dat/controllers/StringController.js
View File

@ -45,7 +45,6 @@ define([
} }
}); });
function onChange() { function onChange() {
_this.setValue(_this.__input.value); _this.setValue(_this.__input.value);
} }

5
src/dat/controllers/factory.js
View File

@ -42,7 +42,10 @@ define([
} else { } else {
return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] }); return new NumberControllerBox(object, property, {
min: arguments[2],
max: arguments[3]
});
} }

3
src/dat/dom/CenteredDiv.js
View File

@ -16,7 +16,6 @@ define([
'dat/utils/common' 'dat/utils/common'
], function (dom, common) { ], function (dom, common) {
var CenteredDiv = function () { var CenteredDiv = function () {
this.backgroundElement = document.createElement('div'); this.backgroundElement = document.createElement('div');
@ -44,7 +43,6 @@ define([
transition: 'transform 0.2s ease-out, opacity 0.2s linear' transition: 'transform 0.2s ease-out, opacity 0.2s linear'
}); });
document.body.appendChild(this.backgroundElement); document.body.appendChild(this.backgroundElement);
document.body.appendChild(this.domElement); document.body.appendChild(this.domElement);
@ -53,7 +51,6 @@ define([
_this.hide(); _this.hide();
}); });
}; };
CenteredDiv.prototype.show = function () { CenteredDiv.prototype.show = function () {

8
src/dat/dom/dom.js
View File

@ -63,8 +63,7 @@ define([
elem.onselectstart = selectable ? function () { elem.onselectstart = selectable ? function () {
return false; return false;
} : function() { } : function () {};
};
elem.style.MozUserSelect = selectable ? 'auto' : 'none'; elem.style.MozUserSelect = selectable ? 'auto' : 'none';
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none'; elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
@ -261,7 +260,10 @@ define([
* @param elem * @param elem
*/ */
getOffset: function (elem) { getOffset: function (elem) {
var offset = {left: 0, top:0}; var offset = {
left: 0,
top: 0
};
if (elem.offsetParent) { if (elem.offsetParent) {
do { do {
offset.left += elem.offsetLeft; offset.left += elem.offsetLeft;

1
src/dat/gui/GUI.css
View File

@ -39,7 +39,6 @@ a.guidat-toggle:active {
text-align: center; text-align: center;
display: block; display: block;
padding: 5px; padding: 5px;
} }
a.guidat-toggle:hover { a.guidat-toggle:hover {

73
src/dat/gui/GUI.js
View File

@ -148,7 +148,6 @@ define([
hideable: params.autoPlace hideable: params.autoPlace
}); });
if (!common.isUndefined(params.load)) { if (!common.isUndefined(params.load)) {
// Explicit preset // Explicit preset
@ -156,7 +155,9 @@ define([
} else { } else {
params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME }; params.load = {
preset: DEFAULT_DEFAULT_PRESET_NAME
};
} }
@ -167,7 +168,6 @@ define([
// Only root level GUI's are resizable. // Only root level GUI's are resizable.
params.resizable = common.isUndefined(params.parent) && params.resizable; params.resizable = common.isUndefined(params.parent) && params.resizable;
if (params.autoPlace && common.isUndefined(params.scrollable)) { if (params.autoPlace && common.isUndefined(params.scrollable)) {
params.scrollable = true; params.scrollable = true;
} }
@ -366,10 +366,8 @@ define([
_this.closed = !_this.closed; _this.closed = !_this.closed;
}); });
// Oh, you're a nested GUI! // Oh, you're a nested GUI!
} else { } else {
@ -419,19 +417,25 @@ define([
} }
// Make it not elastic. // Make it not elastic.
if (!this.parent) setWidth(_this, params.width); if (!this.parent) setWidth(_this, params.width);
} }
dom.bind(window, 'resize', function() { _this.onResize() }); dom.bind(window, 'resize', function () {
dom.bind(this.__ul, 'webkitTransitionEnd', function() { _this.onResize(); }); _this.onResize()
dom.bind(this.__ul, 'transitionend', function() { _this.onResize() }); });
dom.bind(this.__ul, 'oTransitionEnd', function() { _this.onResize() }); dom.bind(this.__ul, 'webkitTransitionEnd', function () {
_this.onResize();
});
dom.bind(this.__ul, 'transitionend', function () {
_this.onResize()
});
dom.bind(this.__ul, 'oTransitionEnd', function () {
_this.onResize()
});
this.onResize(); this.onResize();
if (params.resizable) { if (params.resizable) {
addResizeHandle(this); addResizeHandle(this);
} }
@ -446,6 +450,7 @@ define([
this.saveToLocalStorageIfPossible = saveToLocalStorage; this.saveToLocalStorageIfPossible = saveToLocalStorage;
var root = _this.getRoot(); var root = _this.getRoot();
function resetWidth() { function resetWidth() {
var root = _this.getRoot(); var root = _this.getRoot();
root.width += 1; root.width += 1;
@ -509,8 +514,7 @@ define([
return add( return add(
this, this,
object, object,
property, property, {
{
factoryArgs: Array.prototype.slice.call(arguments, 2) factoryArgs: Array.prototype.slice.call(arguments, 2)
} }
); );
@ -528,8 +532,7 @@ define([
return add( return add(
this, this,
object, object,
property, property, {
{
color: true color: true
} }
); );
@ -576,7 +579,10 @@ define([
' name "' + name + '"'); ' name "' + name + '"');
} }
var new_gui_params = { name: name, parent: this }; var new_gui_params = {
name: name,
parent: this
};
// We need to pass down the autoPlace trait so that we can // We need to pass down the autoPlace trait so that we can
// attach event listeners to open/close folder actions to // attach event listeners to open/close folder actions to
@ -781,7 +787,6 @@ define([
markPresetModified(this.getRoot(), false); markPresetModified(this.getRoot(), false);
} }
}, },
listen: function (controller) { listen: function (controller) {
@ -887,8 +892,7 @@ define([
return add( return add(
gui, gui,
controller.object, controller.object,
controller.property, controller.property, {
{
before: controller.__li.nextElementSibling, before: controller.__li.nextElementSibling,
factoryArgs: [common.toArray(arguments)] factoryArgs: [common.toArray(arguments)]
} }
@ -902,8 +906,7 @@ define([
return add( return add(
gui, gui,
controller.object, controller.object,
controller.property, controller.property, {
{
before: controller.__li.nextElementSibling, before: controller.__li.nextElementSibling,
factoryArgs: [options] factoryArgs: [options]
} }
@ -933,8 +936,11 @@ define([
// All sliders should be accompanied by a box. // All sliders should be accompanied by a box.
if (controller instanceof NumberControllerSlider) { if (controller instanceof NumberControllerSlider) {
var box = new NumberControllerBox(controller.object, controller.property, var box = new NumberControllerBox(controller.object, controller.property, {
{ min: controller.__min, max: controller.__max, step: controller.__step }); min: controller.__min,
max: controller.__max,
step: controller.__step
});
common.each(['updateDisplay', 'onChange', 'onFinishChange'], function (method) { common.each(['updateDisplay', 'onChange', 'onFinishChange'], function (method) {
var pc = controller[method]; var pc = controller[method];
@ -949,8 +955,7 @@ define([
dom.addClass(li, 'has-slider'); dom.addClass(li, 'has-slider');
controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild); controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild);
} } else if (controller instanceof NumberControllerBox) {
else if (controller instanceof NumberControllerBox) {
var r = function (returned) { var r = function (returned) {
@ -962,8 +967,7 @@ define([
return add( return add(
gui, gui,
controller.object, controller.object,
controller.property, controller.property, {
{
before: controller.__li.nextElementSibling, before: controller.__li.nextElementSibling,
factoryArgs: [controller.__min, controller.__max, controller.__step] factoryArgs: [controller.__min, controller.__max, controller.__step]
}); });
@ -977,8 +981,7 @@ define([
controller.min = common.compose(r, controller.min); controller.min = common.compose(r, controller.min);
controller.max = common.compose(r, controller.max); controller.max = common.compose(r, controller.max);
} } else if (controller instanceof BooleanController) {
else if (controller instanceof BooleanController) {
dom.bind(li, 'click', function () { dom.bind(li, 'click', function () {
dom.fakeEvent(controller.__checkbox, 'click'); dom.fakeEvent(controller.__checkbox, 'click');
@ -988,8 +991,7 @@ define([
e.stopPropagation(); // Prevents double-toggle e.stopPropagation(); // Prevents double-toggle
}) })
} } else if (controller instanceof FunctionController) {
else if (controller instanceof FunctionController) {
dom.bind(li, 'click', function () { dom.bind(li, 'click', function () {
dom.fakeEvent(controller.__button, 'click'); dom.fakeEvent(controller.__button, 'click');
@ -1003,8 +1005,7 @@ define([
dom.removeClass(controller.__button, 'hover'); dom.removeClass(controller.__button, 'hover');
}); });
} } else if (controller instanceof ColorController) {
else if (controller instanceof ColorController) {
dom.addClass(li, 'color'); dom.addClass(li, 'color');
controller.updateDisplay = common.compose(function (r) { controller.updateDisplay = common.compose(function (r) {
@ -1077,7 +1078,6 @@ define([
} }
// Did the loaded object remember thcommon.isObject? // Did the loaded object remember thcommon.isObject?
if (preset[matched_index] && if (preset[matched_index] &&
@ -1149,7 +1149,6 @@ define([
dom.bind(select, 'change', function () { dom.bind(select, 'change', function () {
for (var index = 0; index < gui.__preset_select.length; index++) { for (var index = 0; index < gui.__preset_select.length; index++) {
gui.__preset_select[index].innerHTML = gui.__preset_select[index].value; gui.__preset_select[index].innerHTML = gui.__preset_select[index].value;
} }
@ -1287,7 +1286,8 @@ define([
// set the width manually if we want it to bleed to the edge // set the width manually if we want it to bleed to the edge
if (gui.__save_row && gui.autoPlace) { if (gui.__save_row && gui.autoPlace) {
gui.__save_row.style.width = w + 'px'; gui.__save_row.style.width = w + 'px';
}if (gui.__closeButton) { }
if (gui.__closeButton) {
gui.__closeButton.style.width = w + 'px'; gui.__closeButton.style.width = w + 'px';
} }
} }
@ -1349,7 +1349,6 @@ define([
function updateDisplays(controllerArray) { function updateDisplays(controllerArray) {
if (controllerArray.length != 0) { if (controllerArray.length != 0) {
requestAnimationFrame(function () { requestAnimationFrame(function () {

62
src/dat/gui/_structure.scss
View File

@ -1,10 +1,7 @@
$nest-margin: 4px; $nest-margin: 4px;
$row-height: 27px; $row-height: 27px;
$button-height: 20px; $button-height: 20px;
.dg { .dg {
/** Clear list styles */ /** Clear list styles */
ul { ul {
list-style: none; list-style: none;
@ -13,7 +10,6 @@ $button-height: 20px;
width: 100%; width: 100%;
clear: both; clear: both;
} }
/* Auto-place container */ /* Auto-place container */
&.ac { &.ac {
position: fixed; position: fixed;
@ -23,51 +19,35 @@ $button-height: 20px;
height: 0; height: 0;
z-index: 0; z-index: 0;
} }
&:not(.ac) .main { &:not(.ac) .main {
/** Exclude mains in ac so that we don't hide close button */ /** Exclude mains in ac so that we don't hide close button */
overflow: hidden; overflow: hidden;
} }
&.main { &.main {
@include transition(opacity, 0.1s, linear); @include transition(opacity, 0.1s, linear);
&.taller-than-window { &.taller-than-window {
overflow-y: auto; overflow-y: auto;
.close-button { .close-button {
opacity: 1; opacity: 1;
/* TODO, these are style notes */ /* TODO, these are style notes */
margin-top: -1px; margin-top: -1px;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
} }
ul.closed .close-button { ul.closed .close-button {
opacity: 1 !important; opacity: 1 !important;
} }
&:hover .close-button, &:hover .close-button,
.close-button.drag { .close-button.drag {
opacity: 1; opacity: 1;
} }
.close-button { .close-button {
/*opacity: 0;*/ /*opacity: 0;*/
@include transition(opacity, 0.1s, linear); @include transition(opacity, 0.1s, linear);
border: 0; border: 0;
position: absolute; position: absolute;
line-height: $button-height - 1; line-height: $button-height - 1;
height: $button-height; height: $button-height;
/* TODO, these are style notes */ /* TODO, these are style notes */
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@ -75,39 +55,28 @@ $button-height: 20px;
&:hover { &:hover {
background-color: #111; background-color: #111;
} }
} }
} }
/* Auto-placed GUI's */ /* Auto-placed GUI's */
&.a { &.a {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
overflow-x: hidden; overflow-x: hidden;
&.has-save> ul { &.has-save> ul {
margin-top: $row-height; margin-top: $row-height;
&.closed { &.closed {
margin-top: 0; margin-top: 0;
} }
} }
.save-row { .save-row {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 1002; z-index: 1002;
} }
} }
li { li {
@include transition(height, 0.1s, ease-out); @include transition(height, 0.1s, ease-out);
} }
/* Line items that don't contain folders. */ /* Line items that don't contain folders. */
li:not(.folder) { li:not(.folder) {
cursor: auto; cursor: auto;
@ -116,19 +85,15 @@ $button-height: 20px;
overflow: hidden; overflow: hidden;
padding: 0 4px 0 5px; padding: 0 4px 0 5px;
} }
li.folder { li.folder {
padding: 0; padding: 0;
border-left: $nest-margin solid rgba(0, 0, 0, 0); border-left: $nest-margin solid rgba(0, 0, 0, 0);
} }
/** Folder names */ /** Folder names */
li.title { li.title {
cursor: pointer; cursor: pointer;
margin-left: -$nest-margin; margin-left: -$nest-margin;
} }
/** Hides closed items */ /** Hides closed items */
.closed li:not(.title), .closed li:not(.title),
.closed ul li, .closed ul li,
@ -137,14 +102,12 @@ $button-height: 20px;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
} }
/** Controller row */ /** Controller row */
.cr { .cr {
clear: both; clear: both;
padding-left: 3px; padding-left: 3px;
height: $row-height; height: $row-height;
} }
/** Name-half (left) */ /** Name-half (left) */
.property-name { .property-name {
cursor: default; cursor: default;
@ -154,13 +117,11 @@ $button-height: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/** Controller-half (right) */ /** Controller-half (right) */
.c { .c {
float: left; float: left;
width: 60%; width: 60%;
} }
/** Controller placement */ /** Controller placement */
.c input[type=text] { .c input[type=text] {
border: 0; border: 0;
@ -169,14 +130,12 @@ $button-height: 20px;
width: 100%; width: 100%;
float: right; float: right;
} }
/** Shorter number boxes when slider is present. */ /** Shorter number boxes when slider is present. */
.has-slider input[type=text] { .has-slider input[type=text] {
width: 30%; width: 30%;
/*display: none;*/ /*display: none;*/
margin-left: 0; margin-left: 0;
} }
.slider { .slider {
float: left; float: left;
width: 66%; width: 66%;
@ -185,29 +144,24 @@ $button-height: 20px;
height: 19px; height: 19px;
margin-top: 4px; margin-top: 4px;
} }
.slider-fg { .slider-fg {
height: 100%; height: 100%;
} }
.c input[type=checkbox] { .c input[type=checkbox] {
margin-top: 9px; margin-top: 9px;
} }
.c select { .c select {
margin-top: 5px; margin-top: 5px;
} }
/** Ensure the entire boolean and function row shows a hand */ /** Ensure the entire boolean and function row shows a hand */
.cr.function, .cr.function,
.cr.function .property-name, /* Don't know why I need to be this explicit */ .cr.function .property-name,
/* Don't know why I need to be this explicit */
.cr.function *, .cr.function *,
.cr.boolean, .cr.boolean,
.cr.boolean * { .cr.boolean * {
cursor: pointer; cursor: pointer;
} }
.selector { .selector {
display: none; display: none;
position: absolute; position: absolute;
@ -215,25 +169,17 @@ $button-height: 20px;
margin-top: 23px; margin-top: 23px;
z-index: 10; z-index: 10;
} }
.c:hover .selector, .c:hover .selector,
.selector.drag { .selector.drag {
display: block; display: block;
} }
li.save-row { li.save-row {
padding: 0; padding: 0;
.button { .button {
display: inline-block; display: inline-block;
padding: 0px 6px; padding: 0px 6px;
} }
} }
&.dialogue { &.dialogue {
background-color: #222; background-color: #222;
width: 460px; width: 460px;
@ -241,11 +187,11 @@ $button-height: 20px;
font-size: 13px; font-size: 13px;
line-height: 15px; line-height: 15px;
} }
} }
/* TODO Separate style and structure */ /* TODO Separate style and structure */
#dg-new-constructor { #dg-new-constructor {
padding: 10px; padding: 10px;
color: #222; color: #222;

8
src/dat/gui/saveDialogue.html
View File

@ -6,13 +6,9 @@
<div id="dg-save-locally"> <div id="dg-save-locally">
<input id="dg-local-storage" type="checkbox"/> Automatically save <input id="dg-local-storage" type="checkbox" /> Automatically save values to <code>localStorage</code> on exit.
values to <code>localStorage</code> on exit.
<div id="dg-local-explain">The values saved to <code>localStorage</code> will <div id="dg-local-explain">The values saved to <code>localStorage</code> will override those passed to <code>dat.GUI</code>'s constructor. This makes it easier to work incrementally, but <code>localStorage</code> is fragile, and your friends may not see the same values you do.
override those passed to <code>dat.GUI</code>'s constructor. This makes it
easier to work incrementally, but <code>localStorage</code> is fragile,
and your friends may not see the same values you do.
</div> </div>

270
src/dat/gui/style.css
View File

@ -10,40 +10,58 @@
/** Controller-half (right) */ /** Controller-half (right) */
/** Controller placement */ /** Controller placement */
/** Shorter number boxes when slider is present. */ /** Shorter number boxes when slider is present. */
/** Ensure the entire boolean and function row shows a hand */ } /** Ensure the entire boolean and function row shows a hand */
}
.dg ul { .dg ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
clear: both; } clear: both;
}
.dg.ac { .dg.ac {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 0; height: 0;
z-index: 0; } z-index: 0;
}
.dg:not(.ac) .main { .dg:not(.ac) .main {
/** Exclude mains in ac so that we don't hide close button */ /** Exclude mains in ac so that we don't hide close button */
overflow: hidden; } overflow: hidden;
}
.dg.main { .dg.main {
-webkit-transition: opacity 0.1s linear; -webkit-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear;
transition: opacity 0.1s linear; } transition: opacity 0.1s linear;
}
.dg.main.taller-than-window { .dg.main.taller-than-window {
overflow-y: auto; } overflow-y: auto;
}
.dg.main.taller-than-window .close-button { .dg.main.taller-than-window .close-button {
opacity: 1; opacity: 1;
/* TODO, these are style notes */ /* TODO, these are style notes */
margin-top: -1px; margin-top: -1px;
border-top: 1px solid #2c2c2c; } border-top: 1px solid #2c2c2c;
}
.dg.main ul.closed .close-button { .dg.main ul.closed .close-button {
opacity: 1 !important; } opacity: 1 !important;
}
.dg.main:hover .close-button, .dg.main:hover .close-button,
.dg.main .close-button.drag { .dg.main .close-button.drag {
opacity: 1; } opacity: 1;
}
.dg.main .close-button { .dg.main .close-button {
/*opacity: 0;*/ /*opacity: 0;*/
-webkit-transition: opacity 0.1s linear; -webkit-transition: opacity 0.1s linear;
@ -57,109 +75,162 @@
/* TODO, these are style notes */ /* TODO, these are style notes */
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
background-color: #000; } background-color: #000;
}
.dg.main .close-button:hover { .dg.main .close-button:hover {
background-color: #111; } background-color: #111;
}
.dg.a { .dg.a {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
overflow-x: hidden; } overflow-x: hidden;
}
.dg.a.has-save> ul { .dg.a.has-save> ul {
margin-top: 27px; } margin-top: 27px;
}
.dg.a.has-save> ul.closed { .dg.a.has-save> ul.closed {
margin-top: 0; } margin-top: 0;
}
.dg.a .save-row { .dg.a .save-row {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 1002; } z-index: 1002;
}
.dg li { .dg li {
-webkit-transition: height 0.1s ease-out; -webkit-transition: height 0.1s ease-out;
-o-transition: height 0.1s ease-out; -o-transition: height 0.1s ease-out;
-moz-transition: height 0.1s ease-out; -moz-transition: height 0.1s ease-out;
transition: height 0.1s ease-out; } transition: height 0.1s ease-out;
}
.dg li:not(.folder) { .dg li:not(.folder) {
cursor: auto; cursor: auto;
height: 27px; height: 27px;
line-height: 27px; line-height: 27px;
overflow: hidden; overflow: hidden;
padding: 0 4px 0 5px; } padding: 0 4px 0 5px;
}
.dg li.folder { .dg li.folder {
padding: 0; padding: 0;
border-left: 4px solid rgba(0, 0, 0, 0); } border-left: 4px solid rgba(0, 0, 0, 0);
}
.dg li.title { .dg li.title {
cursor: pointer; cursor: pointer;
margin-left: -4px; } margin-left: -4px;
}
.dg .closed li:not(.title), .dg .closed li:not(.title),
.dg .closed ul li, .dg .closed ul li,
.dg .closed ul li> * { .dg .closed ul li> * {
height: 0; height: 0;
overflow: hidden; overflow: hidden;
border: 0; } border: 0;
}
.dg .cr { .dg .cr {
clear: both; clear: both;
padding-left: 3px; padding-left: 3px;
height: 27px; } height: 27px;
}
.dg .property-name { .dg .property-name {
cursor: default; cursor: default;
float: left; float: left;
clear: left; clear: left;
width: 40%; width: 40%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; } text-overflow: ellipsis;
}
.dg .c { .dg .c {
float: left; float: left;
width: 60%; } width: 60%;
}
.dg .c input[type=text] { .dg .c input[type=text] {
border: 0; border: 0;
margin-top: 4px; margin-top: 4px;
padding: 3px; padding: 3px;
width: 100%; width: 100%;
float: right; } float: right;
}
.dg .has-slider input[type=text] { .dg .has-slider input[type=text] {
width: 30%; width: 30%;
/*display: none;*/ /*display: none;*/
margin-left: 0; } margin-left: 0;
}
.dg .slider { .dg .slider {
float: left; float: left;
width: 66%; width: 66%;
margin-left: -5px; margin-left: -5px;
margin-right: 0; margin-right: 0;
height: 19px; height: 19px;
margin-top: 4px; } margin-top: 4px;
}
.dg .slider-fg { .dg .slider-fg {
height: 100%; } height: 100%;
}
.dg .c input[type=checkbox] { .dg .c input[type=checkbox] {
margin-top: 9px; } margin-top: 9px;
}
.dg .c select { .dg .c select {
margin-top: 5px; } margin-top: 5px;
}
.dg .cr.function, .dg .cr.function,
.dg .cr.function .property-name, .dg .cr.function .property-name,
.dg .cr.function *, .dg .cr.function *,
.dg .cr.boolean, .dg .cr.boolean,
.dg .cr.boolean * { .dg .cr.boolean * {
cursor: pointer; } cursor: pointer;
}
.dg .selector { .dg .selector {
display: none; display: none;
position: absolute; position: absolute;
margin-left: -9px; margin-left: -9px;
margin-top: 23px; margin-top: 23px;
z-index: 10; } z-index: 10;
}
.dg .c:hover .selector, .dg .c:hover .selector,
.dg .selector.drag { .dg .selector.drag {
display: block; } display: block;
}
.dg li.save-row { .dg li.save-row {
padding: 0; } padding: 0;
}
.dg li.save-row .button { .dg li.save-row .button {
display: inline-block; display: inline-block;
padding: 0px 6px; } padding: 0px 6px;
}
.dg.dialogue { .dg.dialogue {
background-color: #222; background-color: #222;
width: 460px; width: 460px;
padding: 15px; padding: 15px;
font-size: 13px; font-size: 13px;
line-height: 15px; } line-height: 15px;
}
/* TODO Separate style and structure */ /* TODO Separate style and structure */
#dg-new-constructor { #dg-new-constructor {
padding: 10px; padding: 10px;
color: #222; color: #222;
@ -174,7 +245,8 @@
width: 440px; width: 440px;
overflow-y: scroll; overflow-y: scroll;
height: 100px; height: 100px;
position: relative; } position: relative;
}
#dg-local-explain { #dg-local-explain {
display: none; display: none;
@ -183,42 +255,64 @@
border-radius: 3px; border-radius: 3px;
background-color: #333; background-color: #333;
padding: 8px; padding: 8px;
margin-top: 10px; } margin-top: 10px;
}
#dg-local-explain code { #dg-local-explain code {
font-size: 10px; } font-size: 10px;
}
#dat-gui-save-locally { #dat-gui-save-locally {
display: none; } display: none;
}
/** Main type */ /** Main type */
.dg { .dg {
color: #eee; color: #eee;
font: 11px 'Lucida Grande', sans-serif; font: 11px 'Lucida Grande', sans-serif;
text-shadow: 0 -1px 0 #111; text-shadow: 0 -1px 0 #111;
/** Auto place */ /** Auto place */
/* Controller row, <li> */ /* Controller row, <li> */
/** Controllers */ } /** Controllers */
}
.dg.main { .dg.main {
/** Scrollbar */ } /** Scrollbar */
}
.dg.main::-webkit-scrollbar { .dg.main::-webkit-scrollbar {
width: 5px; width: 5px;
background: #1a1a1a; } background: #1a1a1a;
}
.dg.main::-webkit-scrollbar-corner { .dg.main::-webkit-scrollbar-corner {
height: 0; height: 0;
display: none; } display: none;
}
.dg.main::-webkit-scrollbar-thumb { .dg.main::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
background: #676767; } background: #676767;
}
.dg li:not(.folder) { .dg li:not(.folder) {
background: #1a1a1a; background: #1a1a1a;
border-bottom: 1px solid #2c2c2c; } border-bottom: 1px solid #2c2c2c;
}
.dg li.save-row { .dg li.save-row {
line-height: 25px; line-height: 25px;
background: #dad5cb; background: #dad5cb;
border: 0; } border: 0;
}
.dg li.save-row select { .dg li.save-row select {
margin-left: 5px; margin-left: 5px;
width: 108px; } width: 108px;
}
.dg li.save-row .button { .dg li.save-row .button {
margin-left: 5px; margin-left: 5px;
margin-top: 1px; margin-top: 1px;
@ -230,51 +324,91 @@
color: #fff; color: #fff;
text-shadow: 0 1px 0 #b0a58f; text-shadow: 0 1px 0 #b0a58f;
box-shadow: 0 -1px 0 #b0a58f; box-shadow: 0 -1px 0 #b0a58f;
cursor: pointer; } cursor: pointer;
}
.dg li.save-row .button.gears { .dg li.save-row .button.gears {
background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat; background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
height: 7px; height: 7px;
width: 8px; } width: 8px;
}
.dg li.save-row .button:hover { .dg li.save-row .button:hover {
background-color: #bab19e; background-color: #bab19e;
box-shadow: 0 -1px 0 #b0a58f; } box-shadow: 0 -1px 0 #b0a58f;
}
.dg li.folder { .dg li.folder {
border-bottom: 0; } border-bottom: 0;
}
.dg li.title { .dg li.title {
padding-left: 16px; padding-left: 16px;
background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); } border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg .closed li.title { .dg .closed li.title {
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); } background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==);
}
.dg .cr.boolean { .dg .cr.boolean {
border-left: 3px solid #806787; } border-left: 3px solid #806787;
}
.dg .cr.function { .dg .cr.function {
border-left: 3px solid #e61d5f; } border-left: 3px solid #e61d5f;
}
.dg .cr.number { .dg .cr.number {
border-left: 3px solid #2fa1d6; } border-left: 3px solid #2fa1d6;
}
.dg .cr.number input[type=text] { .dg .cr.number input[type=text] {
color: #2fa1d6; } color: #2fa1d6;
}
.dg .cr.string { .dg .cr.string {
border-left: 3px solid #1ed36f; } border-left: 3px solid #1ed36f;
}
.dg .cr.string input[type=text] { .dg .cr.string input[type=text] {
color: #1ed36f; } color: #1ed36f;
.dg .cr.function:hover, .dg .cr.boolean:hover { }
background: #111; }
.dg .cr.function:hover,
.dg .cr.boolean:hover {
background: #111;
}
.dg .c input[type=text] { .dg .c input[type=text] {
background: #303030; background: #303030;
outline: none; } outline: none;
}
.dg .c input[type=text]:hover { .dg .c input[type=text]:hover {
background: #3c3c3c; } background: #3c3c3c;
}
.dg .c input[type=text]:focus { .dg .c input[type=text]:focus {
background: #494949; background: #494949;
color: #fff; } color: #fff;
}
.dg .c .slider { .dg .c .slider {
background: #303030; background: #303030;
cursor: ew-resize; } cursor: ew-resize;
}
.dg .c .slider-fg { .dg .c .slider-fg {
background: #2fa1d6; } background: #2fa1d6;
}
.dg .c .slider:hover { .dg .c .slider:hover {
background: #3c3c3c; } background: #3c3c3c;
}
.dg .c .slider:hover .slider-fg { .dg .c .slider:hover .slider-fg {
background: #44abda; } background: #44abda;
}

45
src/dat/gui/style.scss
View File

@ -1,9 +1,7 @@
$background-color: #1a1a1a; $background-color: #1a1a1a;
$hover-lighten: 5%; $hover-lighten: 5%;
$border-lighten: 7%; $border-lighten: 7%;
$active-lighten: 10%; $active-lighten: 10%;
$number-color: #2FA1D6; $number-color: #2FA1D6;
$boolean-color: #806787; $boolean-color: #806787;
$string-color: #1ed36f; $string-color: #1ed36f;
@ -12,7 +10,6 @@ $save-row-color: #dad5cb;
$button-color: darken($save-row-color, 10%); $button-color: darken($save-row-color, 10%);
$border-color: lighten($background-color, $border-lighten); $border-color: lighten($background-color, $border-lighten);
$input-color: lighten($background-color, 8.5%); $input-color: lighten($background-color, 8.5%);
@mixin transition($prop, $time, $curve) { @mixin transition($prop, $time, $curve) {
-webkit-transition: $prop $time $curve; -webkit-transition: $prop $time $curve;
-o-transition: $prop $time $curve; -o-transition: $prop $time $curve;
@ -49,16 +46,13 @@ $input-color: lighten($background-color, 8.5%);
@import "structure"; @import "structure";
/** Main type */ /** Main type */
.dg { .dg {
color: #eee; color: #eee;
font: 11px 'Lucida Grande', sans-serif; font: 11px 'Lucida Grande', sans-serif;
text-shadow: 0 -1px 0 #111; text-shadow: 0 -1px 0 #111;
/** Auto place */ /** Auto place */
&.main { &.main {
/** Scrollbar */ /** Scrollbar */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 5px; width: 5px;
@ -72,102 +66,72 @@ $input-color: lighten($background-color, 8.5%);
border-radius: 5px; border-radius: 5px;
background: lighten($background-color, 30%); background: lighten($background-color, 30%);
} }
} }
li { li {
&:not(.folder) { &:not(.folder) {
background: $background-color; background: $background-color;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }
&.save-row { &.save-row {
line-height: 25px; line-height: 25px;
background: $save-row-color; background: $save-row-color;
border: 0; border: 0;
select { select {
margin-left: 5px; margin-left: 5px;
width: 108px; width: 108px;
} }
.button { .button {
&.gears { &.gears {
@include gears; @include gears;
} }
@include button; @include button;
&:hover { &:hover {
background-color: darken($button-color, 5%); background-color: darken($button-color, 5%);
box-shadow: 0 -1px 0 darken($button-color, 10%); box-shadow: 0 -1px 0 darken($button-color, 10%);
} }
} }
} }
&.folder { &.folder {
border-bottom: 0; border-bottom: 0;
} }
&.title { &.title {
padding-left: 16px; padding-left: 16px;
background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2);
} }
} }
.closed li.title { .closed li.title {
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==);
} }
/* Controller row, <li> */ /* Controller row, <li> */
.cr { .cr {
&.boolean { &.boolean {
border-left: 3px solid $boolean-color; border-left: 3px solid $boolean-color;
} }
&.function { &.function {
border-left: 3px solid $function-color; border-left: 3px solid $function-color;
} }
&.number { &.number {
border-left: 3px solid $number-color; border-left: 3px solid $number-color;
input[type=text] { input[type=text] {
color: $number-color; color: $number-color;
} }
} }
&.string { &.string {
border-left: 3px solid $string-color; border-left: 3px solid $string-color;
input[type=text] { input[type=text] {
color: $string-color; color: $string-color;
} }
} }
&.function:hover, &.function:hover,
&.boolean:hover { &.boolean:hover {
background: #111; background: #111;
} }
} }
/** Controllers */ /** Controllers */
.c { .c {
input[type=text] { input[type=text] {
background: $input-color; background: $input-color;
outline: none; outline: none;
&:hover { &:hover {
@ -177,26 +141,19 @@ $input-color: lighten($background-color, 8.5%);
background: lighten($input-color, $active-lighten); background: lighten($input-color, $active-lighten);
color: #fff; color: #fff;
} }
} }
.slider { .slider {
background: $input-color; background: $input-color;
cursor: ew-resize; cursor: ew-resize;
} }
.slider-fg { .slider-fg {
background: $number-color; background: $number-color;
} }
.slider:hover { .slider:hover {
background: lighten($input-color, $hover-lighten); background: lighten($input-color, $hover-lighten);
.slider-fg { .slider-fg {
background: lighten($number-color, $hover-lighten); background: lighten($number-color, $hover-lighten);
} }
} }
} }
} }

3
src/dat/utils/common.js
View File

@ -11,8 +11,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ define([], function () {
], function() {
var ARR_EACH = Array.prototype.forEach; var ARR_EACH = Array.prototype.forEach;
var ARR_SLICE = Array.prototype.slice; var ARR_SLICE = Array.prototype.slice;

3
src/dat/utils/requestAnimationFrame.js
View File

@ -11,8 +11,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ define([], function () {
], function() {
/** /**
* requirejs version of Paul Irish's RequestAnimationFrame * requirejs version of Paul Irish's RequestAnimationFrame