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>

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

@ -16,9 +16,9 @@ define([
'dat/color/math', 'dat/color/math',
'dat/color/toString', 'dat/color/toString',
'dat/utils/common' 'dat/utils/common'
], function(interpret, math, toString, common) { ], function (interpret, math, toString, common) {
var Color = function() { var Color = function () {
this.__state = interpret.apply(this, arguments); this.__state = interpret.apply(this, arguments);
@ -28,18 +28,17 @@ 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'];
common.extend(Color.prototype, { common.extend(Color.prototype, {
toString: function() { toString: function () {
return toString(this); return toString(this);
}, },
toOriginal: function() { toOriginal: function () {
return this.__state.conversion.write(this); return this.__state.conversion.write(this);
} }
@ -55,11 +54,11 @@ define([
Object.defineProperty(Color.prototype, 'a', { Object.defineProperty(Color.prototype, 'a', {
get: function() { get: function () {
return this.__state.a; return this.__state.a;
}, },
set: function(v) { set: function (v) {
this.__state.a = v; this.__state.a = v;
} }
@ -67,7 +66,7 @@ define([
Object.defineProperty(Color.prototype, 'hex', { Object.defineProperty(Color.prototype, 'hex', {
get: function() { get: function () {
if (!this.__state.space !== 'HEX') { if (!this.__state.space !== 'HEX') {
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b); this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
@ -77,7 +76,7 @@ define([
}, },
set: function(v) { set: function (v) {
this.__state.space = 'HEX'; this.__state.space = 'HEX';
this.__state.hex = v; this.__state.hex = v;
@ -90,7 +89,7 @@ define([
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function() { get: function () {
if (this.__state.space === 'RGB') { if (this.__state.space === 'RGB') {
return this.__state[component]; return this.__state[component];
@ -102,7 +101,7 @@ define([
}, },
set: function(v) { set: function (v) {
if (this.__state.space !== 'RGB') { if (this.__state.space !== 'RGB') {
recalculateRGB(this, component, componentHexIndex); recalculateRGB(this, component, componentHexIndex);
@ -121,7 +120,7 @@ define([
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function() { get: function () {
if (this.__state.space === 'HSV') if (this.__state.space === 'HSV')
return this.__state[component]; return this.__state[component];
@ -132,7 +131,7 @@ define([
}, },
set: function(v) { set: function (v) {
if (this.__state.space !== 'HSV') { if (this.__state.space !== 'HSV') {
recalculateHSV(this); recalculateHSV(this);
@ -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;

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

@ -14,21 +14,21 @@
define([ define([
'dat/color/toString', 'dat/color/toString',
'dat/utils/common' 'dat/utils/common'
], function(toString, common) { ], function (toString, common) {
var result, toReturn; var result, toReturn;
var interpret = function() { var interpret = function () {
toReturn = false; toReturn = false;
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0]; var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
common.each(INTERPRETATIONS, function(family) { common.each(INTERPRETATIONS, function (family) {
if (family.litmus(original)) { if (family.litmus(original)) {
common.each(family.conversions, function(conversion, conversionName) { common.each(family.conversions, function (conversion, conversionName) {
result = conversion.read(original); result = conversion.read(original);
@ -63,7 +63,7 @@ define([
THREE_CHAR_HEX: { THREE_CHAR_HEX: {
read: function(original) { read: function (original) {
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
if (test === null) return false; if (test === null) return false;
@ -85,7 +85,7 @@ define([
SIX_CHAR_HEX: { SIX_CHAR_HEX: {
read: function(original) { read: function (original) {
var test = original.match(/^#([A-F0-9]{6})$/i); var test = original.match(/^#([A-F0-9]{6})$/i);
if (test === null) return false; if (test === null) return false;
@ -103,7 +103,7 @@ define([
CSS_RGB: { CSS_RGB: {
read: function(original) { read: function (original) {
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
if (test === null) return false; if (test === null) return false;
@ -123,7 +123,7 @@ define([
CSS_RGBA: { CSS_RGBA: {
read: function(original) { read: function (original) {
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/); var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
if (test === null) return false; if (test === null) return false;
@ -154,7 +154,7 @@ define([
conversions: { conversions: {
HEX: { HEX: {
read: function(original) { read: function (original) {
return { return {
space: 'HEX', space: 'HEX',
hex: original, hex: original,
@ -162,7 +162,7 @@ define([
} }
}, },
write: function(color) { write: function (color) {
return color.hex; return color.hex;
} }
} }
@ -179,7 +179,7 @@ define([
conversions: { conversions: {
RGB_ARRAY: { RGB_ARRAY: {
read: function(original) { read: function (original) {
if (original.length != 3) return false; if (original.length != 3) return false;
return { return {
space: 'RGB', space: 'RGB',
@ -189,14 +189,14 @@ define([
}; };
}, },
write: function(color) { write: function (color) {
return [color.r, color.g, color.b]; return [color.r, color.g, color.b];
} }
}, },
RGBA_ARRAY: { RGBA_ARRAY: {
read: function(original) { read: function (original) {
if (original.length != 4) return false; if (original.length != 4) return false;
return { return {
space: 'RGB', space: 'RGB',
@ -207,7 +207,7 @@ define([
}; };
}, },
write: function(color) { write: function (color) {
return [color.r, color.g, color.b, color.a]; return [color.r, color.g, color.b, color.a];
} }
@ -225,7 +225,7 @@ define([
conversions: { conversions: {
RGBA_OBJ: { RGBA_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.r) && if (common.isNumber(original.r) &&
common.isNumber(original.g) && common.isNumber(original.g) &&
common.isNumber(original.b) && common.isNumber(original.b) &&
@ -241,7 +241,7 @@ define([
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
r: color.r, r: color.r,
g: color.g, g: color.g,
@ -252,7 +252,7 @@ define([
}, },
RGB_OBJ: { RGB_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.r) && if (common.isNumber(original.r) &&
common.isNumber(original.g) && common.isNumber(original.g) &&
common.isNumber(original.b)) { common.isNumber(original.b)) {
@ -266,7 +266,7 @@ define([
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
r: color.r, r: color.r,
g: color.g, g: color.g,
@ -276,7 +276,7 @@ define([
}, },
HSVA_OBJ: { HSVA_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.h) && if (common.isNumber(original.h) &&
common.isNumber(original.s) && common.isNumber(original.s) &&
common.isNumber(original.v) && common.isNumber(original.v) &&
@ -292,7 +292,7 @@ define([
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
h: color.h, h: color.h,
s: color.s, s: color.s,
@ -303,7 +303,7 @@ define([
}, },
HSV_OBJ: { HSV_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.h) && if (common.isNumber(original.h) &&
common.isNumber(original.s) && common.isNumber(original.s) &&
common.isNumber(original.v)) { common.isNumber(original.v)) {
@ -317,7 +317,7 @@ define([
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
h: color.h, h: color.h,
s: color.s, s: color.s,
@ -331,10 +331,8 @@ define([
} }
]; ];
return interpret; return interpret;
}); });

14
src/dat/color/math.js
View File

@ -13,13 +13,13 @@
define([ define([
], function() { ], function () {
var tmpComponent; var tmpComponent;
return { return {
hsv_to_rgb: function(h, s, v) { hsv_to_rgb: function (h, s, v) {
var hi = Math.floor(h / 60) % 6; var hi = Math.floor(h / 60) % 6;
@ -44,7 +44,7 @@ define([
}, },
rgb_to_hsv: function(r, g, b) { rgb_to_hsv: function (r, g, b) {
var min = Math.min(r, g, b), var min = Math.min(r, g, b),
max = Math.max(r, g, b), max = Math.max(r, g, b),
@ -80,19 +80,19 @@ define([
}; };
}, },
rgb_to_hex: function(r, g, b) { rgb_to_hex: function (r, g, b) {
var hex = this.hex_with_component(0, 2, r); var hex = this.hex_with_component(0, 2, r);
hex = this.hex_with_component(hex, 1, g); hex = this.hex_with_component(hex, 1, g);
hex = this.hex_with_component(hex, 0, b); hex = this.hex_with_component(hex, 0, b);
return hex; return hex;
}, },
component_from_hex: function(hex, componentIndex) { component_from_hex: function (hex, componentIndex) {
return (hex >> (componentIndex * 8)) & 0xFF; return (hex >> (componentIndex * 8)) & 0xFF;
}, },
hex_with_component: function(hex, componentIndex, value) { hex_with_component: function (hex, componentIndex, value) {
return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent)); return value << (tmpComponent = componentIndex * 8) | (hex & ~(0xFF << tmpComponent));
} }
} }

4
src/dat/color/toString.js
View File

@ -13,9 +13,9 @@
define([ define([
'dat/utils/common' 'dat/utils/common'
], function(common) { ], function (common) {
return function(color) { return function (color) {
if (color.a == 1 || common.isUndefined(color.a)) { if (color.a == 1 || common.isUndefined(color.a)) {

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

@ -15,7 +15,7 @@ define([
'dat/controllers/Controller', 'dat/controllers/Controller',
'dat/dom/dom', 'dat/dom/dom',
'dat/utils/common' 'dat/utils/common'
], function(Controller, dom, common) { ], function (Controller, dom, common) {
/** /**
* @class Provides a checkbox input to alter the boolean property of an object. * @class Provides a checkbox input to alter the boolean property of an object.
@ -26,7 +26,7 @@ define([
* *
* @member dat.controllers * @member dat.controllers
*/ */
var BooleanController = function(object, property) { var BooleanController = function (object, property) {
BooleanController.superclass.call(this, object, property); BooleanController.superclass.call(this, object, property);
@ -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);
@ -59,7 +58,7 @@ define([
{ {
setValue: function(v) { setValue: function (v) {
var toReturn = BooleanController.superclass.prototype.setValue.call(this, v); var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
@ -68,7 +67,7 @@ define([
return toReturn; return toReturn;
}, },
updateDisplay: function() { updateDisplay: function () {
if (this.getValue() === true) { if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked'); this.__checkbox.setAttribute('checked', 'checked');
@ -81,7 +80,6 @@ define([
} }
} }
); );

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

@ -17,9 +17,9 @@ define([
'dat/color/Color', 'dat/color/Color',
'dat/color/interpret', 'dat/color/interpret',
'dat/utils/common' 'dat/utils/common'
], function(Controller, dom, Color, interpret, common) { ], function (Controller, dom, Color, interpret, common) {
var ColorController = function(object, property) { var ColorController = function (object, property) {
ColorController.superclass.call(this, object, property); ColorController.superclass.call(this, object, property);
@ -52,7 +52,7 @@ define([
this.__input.type = 'text'; this.__input.type = 'text';
this.__input_textShadow = '0 1px 1px '; this.__input_textShadow = '0 1px 1px ';
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
if (e.keyCode === 13) { // on enter if (e.keyCode === 13) { // on enter
onBlur.call(this); onBlur.call(this);
} }
@ -60,11 +60,11 @@ define([
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__selector, 'mousedown', function(e) { dom.bind(this.__selector, 'mousedown', function (e) {
dom dom
.addClass(this, 'drag') .addClass(this, 'drag')
.bind(window, 'mouseup', function(e) { .bind(window, 'mouseup', function (e) {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
@ -127,10 +127,10 @@ define([
common.extend(this.__input.style, { common.extend(this.__input.style, {
outline: 'none', outline: 'none',
// width: '120px', // width: '120px',
textAlign: 'center', textAlign: 'center',
// padding: '4px', // padding: '4px',
// marginBottom: '6px', // marginBottom: '6px',
color: '#fff', color: '#fff',
border: 0, border: 0,
fontWeight: 'bold', fontWeight: 'bold',
@ -140,7 +140,7 @@ define([
dom.bind(this.__saturation_field, 'mousedown', fieldDown); dom.bind(this.__saturation_field, 'mousedown', fieldDown);
dom.bind(this.__field_knob, 'mousedown', fieldDown); dom.bind(this.__field_knob, 'mousedown', fieldDown);
dom.bind(this.__hue_field, 'mousedown', function(e) { dom.bind(this.__hue_field, 'mousedown', function (e) {
setH(e); setH(e);
dom.bind(window, 'mousemove', setH); dom.bind(window, 'mousemove', setH);
dom.bind(window, 'mouseup', unbindH); dom.bind(window, 'mouseup', unbindH);
@ -205,7 +205,6 @@ define([
_this.setValue(_this.__color.toOriginal()); _this.setValue(_this.__color.toOriginal());
return false; return false;
} }
@ -240,7 +239,7 @@ define([
{ {
updateDisplay: function() { updateDisplay: function () {
var i = interpret(this.getValue()); var i = interpret(this.getValue());
@ -250,7 +249,7 @@ define([
// Check for mismatch on the interpreted value. // Check for mismatch on the interpreted value.
common.each(Color.COMPONENTS, function(component) { common.each(Color.COMPONENTS, function (component) {
if (!common.isUndefined(i[component]) && if (!common.isUndefined(i[component]) &&
!common.isUndefined(this.__color.__state[component]) && !common.isUndefined(this.__color.__state[component]) &&
i[component] !== this.__color.__state[component]) { i[component] !== this.__color.__state[component]) {
@ -278,7 +277,7 @@ define([
marginLeft: 100 * this.__color.s - 7 + 'px', marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px', marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toString(), backgroundColor: this.__temp.toString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')' border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
}); });
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px' this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
@ -290,8 +289,8 @@ define([
common.extend(this.__input.style, { common.extend(this.__input.style, {
backgroundColor: this.__input.value = this.__color.toString(), backgroundColor: this.__input.value = this.__color.toString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip +')', color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)' textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
}); });
} }
@ -300,12 +299,12 @@ define([
); );
var vendors = ['-moz-','-o-','-webkit-','-ms-','']; var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
function linearGradient(elem, x, a, b) { function linearGradient(elem, x, a, b) {
elem.style.background = ''; elem.style.background = '';
common.each(vendors, function(vendor) { common.each(vendors, function (vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); '; elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
}); });
} }
@ -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;
}); });

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

@ -13,7 +13,7 @@
define([ define([
'dat/utils/common' 'dat/utils/common'
], function(common) { ], function (common) {
/** /**
* @class An "abstract" class that represents a given property of an object. * @class An "abstract" class that represents a given property of an object.
@ -23,7 +23,7 @@ define([
* *
* @member dat.controllers * @member dat.controllers
*/ */
var Controller = function(object, property) { var Controller = function (object, property) {
this.initialValue = object[property]; this.initialValue = object[property];
@ -76,7 +76,7 @@ define([
* is modified via this Controller. * is modified via this Controller.
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
onChange: function(fnc) { onChange: function (fnc) {
this.__onChange = fnc; this.__onChange = fnc;
return this; return this;
}, },
@ -90,7 +90,7 @@ define([
* someone "finishes" changing the value via this Controller. * someone "finishes" changing the value via this Controller.
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
onFinishChange: function(fnc) { onFinishChange: function (fnc) {
this.__onFinishChange = fnc; this.__onFinishChange = fnc;
return this; return this;
}, },
@ -100,7 +100,7 @@ define([
* *
* @param {Object} newValue The new value of <code>object[property]</code> * @param {Object} newValue The new value of <code>object[property]</code>
*/ */
setValue: function(newValue) { setValue: function (newValue) {
this.object[this.property] = newValue; this.object[this.property] = newValue;
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this, newValue); this.__onChange.call(this, newValue);
@ -114,7 +114,7 @@ define([
* *
* @returns {Object} The current value of <code>object[property]</code> * @returns {Object} The current value of <code>object[property]</code>
*/ */
getValue: function() { getValue: function () {
return this.object[this.property]; return this.object[this.property];
}, },
@ -123,14 +123,14 @@ define([
* with the object's current value. * with the object's current value.
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
updateDisplay: function() { updateDisplay: function () {
return this; return this;
}, },
/** /**
* @returns {Boolean} true if the value has deviated from initialValue * @returns {Boolean} true if the value has deviated from initialValue
*/ */
isModified: function() { isModified: function () {
return this.initialValue !== this.getValue() return this.initialValue !== this.getValue()
} }
@ -140,5 +140,4 @@ define([
return Controller; return Controller;
}); });

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

@ -15,7 +15,7 @@ define([
'dat/controllers/Controller', 'dat/controllers/Controller',
'dat/dom/dom', 'dat/dom/dom',
'dat/utils/common' 'dat/utils/common'
], function(Controller, dom, common) { ], function (Controller, dom, common) {
/** /**
* @class Provides a GUI interface to fire a specified method, a property of an object. * @class Provides a GUI interface to fire a specified method, a property of an object.
@ -27,7 +27,7 @@ define([
* *
* @member dat.controllers * @member dat.controllers
*/ */
var FunctionController = function(object, property, text) { var FunctionController = function (object, property, text) {
FunctionController.superclass.call(this, object, property); FunctionController.superclass.call(this, object, property);
@ -35,7 +35,7 @@ define([
this.__button = document.createElement('div'); this.__button = document.createElement('div');
this.__button.innerHTML = text === undefined ? 'Fire' : text; this.__button.innerHTML = text === undefined ? 'Fire' : text;
dom.bind(this.__button, 'click', function(e) { dom.bind(this.__button, 'click', function (e) {
e.preventDefault(); e.preventDefault();
_this.fire(); _this.fire();
return false; return false;
@ -45,7 +45,6 @@ define([
this.domElement.appendChild(this.__button); this.domElement.appendChild(this.__button);
}; };
FunctionController.superclass = Controller; FunctionController.superclass = Controller;
@ -53,10 +52,9 @@ define([
common.extend( common.extend(
FunctionController.prototype, FunctionController.prototype,
Controller.prototype, Controller.prototype, {
{
fire: function() { fire: function () {
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this); this.__onChange.call(this);
} }

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

@ -14,7 +14,7 @@
define([ define([
'dat/controllers/Controller', 'dat/controllers/Controller',
'dat/utils/common' 'dat/utils/common'
], function(Controller, common) { ], function (Controller, common) {
/** /**
* @class Represents a given property of an object that is a number. * @class Represents a given property of an object that is a number.
@ -30,7 +30,7 @@ define([
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberController = function(object, property, params) { var NumberController = function (object, property, params) {
NumberController.superclass.call(this, object, property); NumberController.superclass.call(this, object, property);
@ -46,7 +46,7 @@ define([
this.__impliedStep = 1; // What are we, psychics? this.__impliedStep = 1; // What are we, psychics?
} else { } else {
// Hey Doug, check this out. // Hey Doug, check this out.
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue))/Math.LN10))/10; this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
} }
} else { } else {
@ -57,7 +57,6 @@ define([
this.__precision = numDecimals(this.__impliedStep); this.__precision = numDecimals(this.__impliedStep);
}; };
NumberController.superclass = Controller; NumberController.superclass = Controller;
@ -70,7 +69,7 @@ define([
/** @lends dat.controllers.NumberController.prototype */ /** @lends dat.controllers.NumberController.prototype */
{ {
setValue: function(v) { setValue: function (v) {
if (this.__min !== undefined && v < this.__min) { if (this.__min !== undefined && v < this.__min) {
v = this.__min; v = this.__min;
@ -93,7 +92,7 @@ define([
* <code>object[property]</code> * <code>object[property]</code>
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
min: function(v) { min: function (v) {
this.__min = v; this.__min = v;
return this; return this;
}, },
@ -105,7 +104,7 @@ define([
* <code>object[property]</code> * <code>object[property]</code>
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
max: function(v) { max: function (v) {
this.__max = v; this.__max = v;
return this; return this;
}, },
@ -120,7 +119,7 @@ define([
* difference otherwise stepValue is 1 * difference otherwise stepValue is 1
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
step: function(v) { step: function (v) {
this.__step = v; this.__step = v;
this.__impliedStep = v; this.__impliedStep = v;
this.__precision = numDecimals(v); this.__precision = numDecimals(v);

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

@ -15,7 +15,7 @@ define([
'dat/controllers/NumberController', 'dat/controllers/NumberController',
'dat/dom/dom', 'dat/dom/dom',
'dat/utils/common' 'dat/utils/common'
], function(NumberController, dom, common) { ], function (NumberController, dom, common) {
/** /**
* @class Represents a given property of an object that is a number and * @class Represents a given property of an object that is a number and
@ -33,7 +33,7 @@ define([
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberControllerBox = function(object, property, params) { var NumberControllerBox = function (object, property, params) {
this.__truncationSuspended = false; this.__truncationSuspended = false;
@ -55,7 +55,7 @@ define([
dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'change', onChange);
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'mousedown', onMouseDown); dom.bind(this.__input, 'mousedown', onMouseDown);
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
// When pressing entire, you can be as precise as you want. // When pressing entire, you can be as precise as you want.
if (e.keyCode === 13) { if (e.keyCode === 13) {
@ -113,7 +113,7 @@ define([
{ {
updateDisplay: function() { updateDisplay: function () {
// Use the same solution from StringController.js to enable // Use the same solution from StringController.js to enable
// editing <input>s while "listen()"ing // editing <input>s while "listen()"ing
if (!dom.isActive(this.__input)) { if (!dom.isActive(this.__input)) {
@ -134,4 +134,3 @@ define([
return NumberControllerBox; return NumberControllerBox;
}); });

2
src/dat/controllers/NumberControllerSlider.css
View File

@ -12,7 +12,7 @@
*/ */
.slider { .slider {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
height: 1em; height: 1em;
border-radius: 1em; border-radius: 1em;
background-color: #eee; background-color: #eee;

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

@ -17,8 +17,8 @@ define([
'dat/utils/css', 'dat/utils/css',
'dat/utils/common', 'dat/utils/common',
'text!dat/controllers/NumberControllerSlider.css' 'text!dat/controllers/NumberControllerSlider.css'
], ],
function(NumberController, dom, css, common, styleSheet) { function (NumberController, dom, css, common, styleSheet) {
/** /**
* @class Represents a given property of an object that is a number, contains * @class Represents a given property of an object that is a number, contains
@ -38,17 +38,19 @@ function(NumberController, dom, css, common, styleSheet) {
* *
* @member dat.controllers * @member dat.controllers
*/ */
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');
@ -97,7 +99,7 @@ function(NumberController, dom, css, common, styleSheet) {
/** /**
* Injects default stylesheet for slider elements. * Injects default stylesheet for slider elements.
*/ */
NumberControllerSlider.useDefaultStyles = function() { NumberControllerSlider.useDefaultStyles = function () {
css.inject(styleSheet); css.inject(styleSheet);
}; };
@ -108,16 +110,14 @@ function(NumberController, dom, css, common, styleSheet) {
{ {
updateDisplay: function() { updateDisplay: function () {
var pct = (this.getValue() - this.__min)/(this.__max - this.__min); var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
this.__foreground.style.width = pct*100+'%'; this.__foreground.style.width = pct * 100 + '%';
return NumberControllerSlider.superclass.prototype.updateDisplay.call(this); return NumberControllerSlider.superclass.prototype.updateDisplay.call(this);
} }
} }
); );
function map(v, i1, i2, o1, o2) { function map(v, i1, i2, o1, o2) {
@ -126,4 +126,4 @@ function(NumberController, dom, css, common, styleSheet) {
return NumberControllerSlider; return NumberControllerSlider;
}); });

18
src/dat/controllers/OptionController.js
View File

@ -15,8 +15,8 @@ define([
'dat/controllers/Controller', 'dat/controllers/Controller',
'dat/dom/dom', 'dat/dom/dom',
'dat/utils/common' 'dat/utils/common'
], ],
function(Controller, dom, common) { function (Controller, dom, common) {
/** /**
* @class Provides a select input to alter the property of an object, using a * @class Provides a select input to alter the property of an object, using a
@ -31,7 +31,7 @@ function(Controller, dom, common) {
* *
* @member dat.controllers * @member dat.controllers
*/ */
var OptionController = function(object, property, options) { var OptionController = function (object, property, options) {
OptionController.superclass.call(this, object, property); OptionController.superclass.call(this, object, property);
@ -45,13 +45,13 @@ function(Controller, dom, common) {
if (common.isArray(options)) { if (common.isArray(options)) {
var map = {}; var map = {};
common.each(options, function(element) { common.each(options, function (element) {
map[element] = element; map[element] = element;
}); });
options = map; options = map;
} }
common.each(options, function(value, key) { common.each(options, function (value, key) {
var opt = document.createElement('option'); var opt = document.createElement('option');
opt.innerHTML = key; opt.innerHTML = key;
@ -63,7 +63,7 @@ function(Controller, dom, common) {
// Acknowledge original value // Acknowledge original value
this.updateDisplay(); this.updateDisplay();
dom.bind(this.__select, 'change', function() { dom.bind(this.__select, 'change', function () {
var desiredValue = this.options[this.selectedIndex].value; var desiredValue = this.options[this.selectedIndex].value;
_this.setValue(desiredValue); _this.setValue(desiredValue);
}); });
@ -81,7 +81,7 @@ function(Controller, dom, common) {
{ {
setValue: function(v) { setValue: function (v) {
var toReturn = OptionController.superclass.prototype.setValue.call(this, v); var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
@ -89,7 +89,7 @@ function(Controller, dom, common) {
return toReturn; return toReturn;
}, },
updateDisplay: function() { updateDisplay: function () {
this.__select.value = this.getValue(); this.__select.value = this.getValue();
return OptionController.superclass.prototype.updateDisplay.call(this); return OptionController.superclass.prototype.updateDisplay.call(this);
} }
@ -100,4 +100,4 @@ function(Controller, dom, common) {
return OptionController; return OptionController;
}); });

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

@ -15,7 +15,7 @@ define([
'dat/controllers/Controller', 'dat/controllers/Controller',
'dat/dom/dom', 'dat/dom/dom',
'dat/utils/common' 'dat/utils/common'
], function(Controller, dom, common) { ], function (Controller, dom, common) {
/** /**
* @class Provides a text input to alter the string property of an object. * @class Provides a text input to alter the string property of an object.
@ -27,7 +27,7 @@ define([
* *
* @member dat.controllers * @member dat.controllers
*/ */
var StringController = function(object, property) { var StringController = function (object, property) {
StringController.superclass.call(this, object, property); StringController.superclass.call(this, object, property);
@ -39,13 +39,12 @@ define([
dom.bind(this.__input, 'keyup', onChange); dom.bind(this.__input, 'keyup', onChange);
dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'change', onChange);
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
this.blur(); this.blur();
} }
}); });
function onChange() { function onChange() {
_this.setValue(_this.__input.value); _this.setValue(_this.__input.value);
} }
@ -71,7 +70,7 @@ define([
{ {
updateDisplay: function() { updateDisplay: function () {
// Stops the caret from moving on account of: // Stops the caret from moving on account of:
// keyup -> setValue -> updateDisplay // keyup -> setValue -> updateDisplay
if (!dom.isActive(this.__input)) { if (!dom.isActive(this.__input)) {

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

@ -19,10 +19,10 @@ define([
'dat/controllers/FunctionController', 'dat/controllers/FunctionController',
'dat/controllers/BooleanController', 'dat/controllers/BooleanController',
'dat/utils/common' 'dat/utils/common'
], ],
function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) { function (OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
return function(object, property) { return function (object, property) {
var initialValue = object[property]; var initialValue = object[property];
@ -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]
});
} }

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

@ -14,10 +14,9 @@
define([ define([
'dat/dom/dom', 'dat/dom/dom',
'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');
common.extend(this.backgroundElement.style, { common.extend(this.backgroundElement.style, {
@ -44,19 +43,17 @@ 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);
var _this = this; var _this = this;
dom.bind(this.backgroundElement, 'click', function() { dom.bind(this.backgroundElement, 'click', function () {
_this.hide(); _this.hide();
}); });
}; };
CenteredDiv.prototype.show = function() { CenteredDiv.prototype.show = function () {
var _this = this; var _this = this;
@ -64,12 +61,12 @@ define([
this.domElement.style.display = 'block'; this.domElement.style.display = 'block';
this.domElement.style.opacity = 0; this.domElement.style.opacity = 0;
// this.domElement.style.top = '52%'; // this.domElement.style.top = '52%';
this.domElement.style.webkitTransform = 'scale(1.1)'; this.domElement.style.webkitTransform = 'scale(1.1)';
this.layout(); this.layout();
common.defer(function() { common.defer(function () {
_this.backgroundElement.style.opacity = 1; _this.backgroundElement.style.opacity = 1;
_this.domElement.style.opacity = 1; _this.domElement.style.opacity = 1;
_this.domElement.style.webkitTransform = 'scale(1)'; _this.domElement.style.webkitTransform = 'scale(1)';
@ -77,11 +74,11 @@ define([
}; };
CenteredDiv.prototype.hide = function() { CenteredDiv.prototype.hide = function () {
var _this = this; var _this = this;
var hide = function() { var hide = function () {
_this.domElement.style.display = 'none'; _this.domElement.style.display = 'none';
_this.backgroundElement.style.display = 'none'; _this.backgroundElement.style.display = 'none';
@ -97,15 +94,15 @@ define([
dom.bind(this.domElement, 'oTransitionEnd', hide); dom.bind(this.domElement, 'oTransitionEnd', hide);
this.backgroundElement.style.opacity = 0; this.backgroundElement.style.opacity = 0;
// this.domElement.style.top = '48%'; // this.domElement.style.top = '48%';
this.domElement.style.opacity = 0; this.domElement.style.opacity = 0;
this.domElement.style.webkitTransform = 'scale(1.1)'; this.domElement.style.webkitTransform = 'scale(1.1)';
}; };
CenteredDiv.prototype.layout = function() { CenteredDiv.prototype.layout = function () {
this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px'; this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';
this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px'; this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';
}; };
function lockScroll(e) { function lockScroll(e) {

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

@ -13,17 +13,17 @@
define([ define([
'dat/utils/common' 'dat/utils/common'
], function(common) { ], function (common) {
var EVENT_MAP = { var EVENT_MAP = {
'HTMLEvents': ['change'], 'HTMLEvents': ['change'],
'MouseEvents': ['click','mousemove','mousedown','mouseup', 'mouseover'], 'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
'KeyboardEvents': ['keydown'] 'KeyboardEvents': ['keydown']
}; };
var EVENT_MAP_INV = {}; var EVENT_MAP_INV = {};
common.each(EVENT_MAP, function(v, k) { common.each(EVENT_MAP, function (v, k) {
common.each(v, function(e) { common.each(v, function (e) {
EVENT_MAP_INV[e] = k; EVENT_MAP_INV[e] = k;
}); });
}); });
@ -57,14 +57,13 @@ define([
* @param elem * @param elem
* @param selectable * @param selectable
*/ */
makeSelectable: function(elem, selectable) { makeSelectable: function (elem, selectable) {
if (elem === undefined || elem.style === undefined) return; if (elem === undefined || elem.style === undefined) return;
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';
@ -78,7 +77,7 @@ define([
* @param horizontal * @param horizontal
* @param vertical * @param vertical
*/ */
makeFullscreen: function(elem, horizontal, vertical) { makeFullscreen: function (elem, horizontal, vertical) {
if (common.isUndefined(horizontal)) horizontal = true; if (common.isUndefined(horizontal)) horizontal = true;
if (common.isUndefined(vertical)) vertical = true; if (common.isUndefined(vertical)) vertical = true;
@ -102,7 +101,7 @@ define([
* @param eventType * @param eventType
* @param params * @param params
*/ */
fakeEvent: function(elem, eventType, params, aux) { fakeEvent: function (elem, eventType, params, aux) {
params = params || {}; params = params || {};
var className = EVENT_MAP_INV[eventType]; var className = EVENT_MAP_INV[eventType];
if (!className) { if (!className) {
@ -154,7 +153,7 @@ define([
* @param func * @param func
* @param bool * @param bool
*/ */
bind: function(elem, event, func, bool) { bind: function (elem, event, func, bool) {
bool = bool || false; bool = bool || false;
if (elem.addEventListener) if (elem.addEventListener)
elem.addEventListener(event, func, bool); elem.addEventListener(event, func, bool);
@ -170,7 +169,7 @@ define([
* @param func * @param func
* @param bool * @param bool
*/ */
unbind: function(elem, event, func, bool) { unbind: function (elem, event, func, bool) {
bool = bool || false; bool = bool || false;
if (elem.removeEventListener) if (elem.removeEventListener)
elem.removeEventListener(event, func, bool); elem.removeEventListener(event, func, bool);
@ -184,7 +183,7 @@ define([
* @param elem * @param elem
* @param className * @param className
*/ */
addClass: function(elem, className) { addClass: function (elem, className) {
if (elem.className === undefined) { if (elem.className === undefined) {
elem.className = className; elem.className = className;
} else if (elem.className !== className) { } else if (elem.className !== className) {
@ -202,7 +201,7 @@ define([
* @param elem * @param elem
* @param className * @param className
*/ */
removeClass: function(elem, className) { removeClass: function (elem, className) {
if (className) { if (className) {
if (elem.className === undefined) { if (elem.className === undefined) {
// elem.className = className; // elem.className = className;
@ -222,7 +221,7 @@ define([
return dom; return dom;
}, },
hasClass: function(elem, className) { hasClass: function (elem, className) {
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false; return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
}, },
@ -230,7 +229,7 @@ define([
* *
* @param elem * @param elem
*/ */
getWidth: function(elem) { getWidth: function (elem) {
var style = getComputedStyle(elem); var style = getComputedStyle(elem);
@ -245,7 +244,7 @@ define([
* *
* @param elem * @param elem
*/ */
getHeight: function(elem) { getHeight: function (elem) {
var style = getComputedStyle(elem); var style = getComputedStyle(elem);
@ -260,8 +259,11 @@ 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;
@ -276,8 +278,8 @@ define([
* *
* @param elem * @param elem
*/ */
isActive: function(elem) { isActive: function (elem) {
return elem === document.activeElement && ( elem.type || elem.href ); return elem === document.activeElement && (elem.type || elem.href);
} }
}; };

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 {

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

@ -34,7 +34,7 @@ define([
'dat/utils/common' 'dat/utils/common'
], function(css, saveDialogueContents, styleSheet, controllerFactory, Controller, BooleanController, FunctionController, NumberControllerBox, NumberControllerSlider, OptionController, ColorController, requestAnimationFrame, CenteredDiv, dom, common) { ], function (css, saveDialogueContents, styleSheet, controllerFactory, Controller, BooleanController, FunctionController, NumberControllerBox, NumberControllerSlider, OptionController, ColorController, requestAnimationFrame, CenteredDiv, dom, common) {
css.inject(styleSheet); css.inject(styleSheet);
@ -48,7 +48,7 @@ define([
var DEFAULT_DEFAULT_PRESET_NAME = 'Default'; var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
var SUPPORTS_LOCAL_STORAGE = (function() { var SUPPORTS_LOCAL_STORAGE = (function () {
try { try {
return 'localStorage' in window && window['localStorage'] !== null; return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) { } catch (e) {
@ -85,7 +85,7 @@ define([
* @param {dat.gui.GUI} [params.parent] The GUI I'm nested in. * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.
* @param {Boolean} [params.closed] If true, starts closed * @param {Boolean} [params.closed] If true, starts closed
*/ */
var GUI = function(params) { var GUI = function (params) {
var _this = this; var _this = this;
@ -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,11 +168,10 @@ 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;
} }
// params.scrollable = common.isUndefined(params.parent) && params.scrollable === true; // params.scrollable = common.isUndefined(params.parent) && params.scrollable === true;
// Not part of params because I don't want people passing this in via // Not part of params because I don't want people passing this in via
// constructor. Should be a 'remembered' value. // constructor. Should be a 'remembered' value.
@ -191,13 +191,13 @@ define([
* @type dat.gui.GUI * @type dat.gui.GUI
*/ */
parent: { parent: {
get: function() { get: function () {
return params.parent; return params.parent;
} }
}, },
scrollable: { scrollable: {
get: function() { get: function () {
return params.scrollable; return params.scrollable;
} }
}, },
@ -207,7 +207,7 @@ define([
* @type Boolean * @type Boolean
*/ */
autoPlace: { autoPlace: {
get: function() { get: function () {
return params.autoPlace; return params.autoPlace;
} }
}, },
@ -218,7 +218,7 @@ define([
*/ */
preset: { preset: {
get: function() { get: function () {
if (_this.parent) { if (_this.parent) {
return _this.getRoot().preset; return _this.getRoot().preset;
} else { } else {
@ -226,7 +226,7 @@ define([
} }
}, },
set: function(v) { set: function (v) {
if (_this.parent) { if (_this.parent) {
_this.getRoot().preset = v; _this.getRoot().preset = v;
} else { } else {
@ -243,10 +243,10 @@ define([
* @type Number * @type Number
*/ */
width: { width: {
get: function() { get: function () {
return params.width; return params.width;
}, },
set: function(v) { set: function (v) {
params.width = v; params.width = v;
setWidth(_this, v); setWidth(_this, v);
} }
@ -258,10 +258,10 @@ define([
* @type String * @type String
*/ */
name: { name: {
get: function() { get: function () {
return params.name; return params.name;
}, },
set: function(v) { set: function (v) {
// TODO Check for collisions among sibling folders // TODO Check for collisions among sibling folders
params.name = v; params.name = v;
if (title_row_name) { if (title_row_name) {
@ -275,10 +275,10 @@ define([
* @type Boolean * @type Boolean
*/ */
closed: { closed: {
get: function() { get: function () {
return params.closed; return params.closed;
}, },
set: function(v) { set: function (v) {
params.closed = v; params.closed = v;
if (params.closed) { if (params.closed) {
dom.addClass(_this.__ul, GUI.CLASS_CLOSED); dom.addClass(_this.__ul, GUI.CLASS_CLOSED);
@ -301,7 +301,7 @@ define([
* @type Object * @type Object
*/ */
load: { load: {
get: function() { get: function () {
return params.load; return params.load;
} }
}, },
@ -313,10 +313,10 @@ define([
*/ */
useLocalStorage: { useLocalStorage: {
get: function() { get: function () {
return use_local_storage; return use_local_storage;
}, },
set: function(bool) { set: function (bool) {
if (SUPPORTS_LOCAL_STORAGE) { if (SUPPORTS_LOCAL_STORAGE) {
use_local_storage = bool; use_local_storage = bool;
if (bool) { if (bool) {
@ -362,14 +362,12 @@ define([
dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON); dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
this.domElement.appendChild(this.__closeButton); this.domElement.appendChild(this.__closeButton);
dom.bind(this.__closeButton, 'click', function() { dom.bind(this.__closeButton, 'click', function () {
_this.closed = !_this.closed; _this.closed = !_this.closed;
}); });
// Oh, you're a nested GUI! // Oh, you're a nested GUI!
} else { } else {
@ -382,7 +380,7 @@ define([
var title_row = addRow(_this, title_row_name); var title_row = addRow(_this, title_row_name);
var on_click_title = function(e) { var on_click_title = function (e) {
e.preventDefault(); e.preventDefault();
_this.closed = !_this.closed; _this.closed = !_this.closed;
return false; return false;
@ -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,10 +450,11 @@ 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;
common.defer(function() { common.defer(function () {
root.width -= 1; root.width -= 1;
}); });
} }
@ -460,10 +465,10 @@ define([
}; };
GUI.toggleHide = function() { GUI.toggleHide = function () {
hide = !hide; hide = !hide;
common.each(hideable_guis, function(gui) { common.each(hideable_guis, function (gui) {
gui.domElement.style.zIndex = hide ? -999 : 999; gui.domElement.style.zIndex = hide ? -999 : 999;
gui.domElement.style.opacity = hide ? 0 : 1; gui.domElement.style.opacity = hide ? 0 : 1;
}); });
@ -482,7 +487,7 @@ define([
GUI.TEXT_CLOSED = 'Close Controls'; GUI.TEXT_CLOSED = 'Close Controls';
GUI.TEXT_OPEN = 'Open Controls'; GUI.TEXT_OPEN = 'Open Controls';
dom.bind(window, 'keydown', function(e) { dom.bind(window, 'keydown', function (e) {
if (document.activeElement.type !== 'text' && if (document.activeElement.type !== 'text' &&
(e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) { (e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) {
@ -504,13 +509,12 @@ define([
* @returns {dat.controllers.Controller} The new controller that was added. * @returns {dat.controllers.Controller} The new controller that was added.
* @instance * @instance
*/ */
add: function(object, property) { add: function (object, property) {
return add( return add(
this, this,
object, object,
property, property, {
{
factoryArgs: Array.prototype.slice.call(arguments, 2) factoryArgs: Array.prototype.slice.call(arguments, 2)
} }
); );
@ -523,13 +527,12 @@ define([
* @returns {dat.controllers.ColorController} The new controller that was added. * @returns {dat.controllers.ColorController} The new controller that was added.
* @instance * @instance
*/ */
addColor: function(object, property) { addColor: function (object, property) {
return add( return add(
this, this,
object, object,
property, property, {
{
color: true color: true
} }
); );
@ -540,19 +543,19 @@ define([
* @param controller * @param controller
* @instance * @instance
*/ */
remove: function(controller) { remove: function (controller) {
// TODO listening? // TODO listening?
this.__ul.removeChild(controller.__li); this.__ul.removeChild(controller.__li);
this.__controllers.splice(this.__controllers.indexOf(controller), 1); this.__controllers.splice(this.__controllers.indexOf(controller), 1);
var _this = this; var _this = this;
common.defer(function() { common.defer(function () {
_this.onResize(); _this.onResize();
}); });
}, },
destroy: function() { destroy: function () {
if (this.autoPlace) { if (this.autoPlace) {
auto_place_container.removeChild(this.domElement); auto_place_container.removeChild(this.domElement);
@ -567,7 +570,7 @@ define([
* name * name
* @instance * @instance
*/ */
addFolder: function(name) { addFolder: function (name) {
// We have to prevent collisions on names in order to have a key // We have to prevent collisions on names in order to have a key
// by which to remember saved values // by which to remember saved values
@ -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
@ -606,15 +612,15 @@ define([
}, },
open: function() { open: function () {
this.closed = false; this.closed = false;
}, },
close: function() { close: function () {
this.closed = true; this.closed = true;
}, },
onResize: function() { onResize: function () {
var root = this.getRoot(); var root = this.getRoot();
@ -623,8 +629,8 @@ define([
var top = dom.getOffset(root.__ul).top; var top = dom.getOffset(root.__ul).top;
var h = 0; var h = 0;
common.each(root.__ul.childNodes, function(node) { common.each(root.__ul.childNodes, function (node) {
if (! (root.autoPlace && node === root.__save_row)) if (!(root.autoPlace && node === root.__save_row))
h += dom.getHeight(node); h += dom.getHeight(node);
}); });
@ -639,7 +645,7 @@ define([
} }
if (root.__resize_handle) { if (root.__resize_handle) {
common.defer(function() { common.defer(function () {
root.__resize_handle.style.height = root.__ul.offsetHeight + 'px'; root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';
}); });
} }
@ -659,7 +665,7 @@ define([
* @throws {Error} if not called on a top level GUI. * @throws {Error} if not called on a top level GUI.
* @instance * @instance
*/ */
remember: function() { remember: function () {
if (common.isUndefined(SAVE_DIALOGUE)) { if (common.isUndefined(SAVE_DIALOGUE)) {
SAVE_DIALOGUE = new CenteredDiv(); SAVE_DIALOGUE = new CenteredDiv();
@ -672,7 +678,7 @@ define([
var _this = this; var _this = this;
common.each(Array.prototype.slice.call(arguments), function(object) { common.each(Array.prototype.slice.call(arguments), function (object) {
if (_this.__rememberedObjects.length == 0) { if (_this.__rememberedObjects.length == 0) {
addSaveMenu(_this); addSaveMenu(_this);
} }
@ -692,7 +698,7 @@ define([
* @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI. * @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI.
* @instance * @instance
*/ */
getRoot: function() { getRoot: function () {
var gui = this; var gui = this;
while (gui.parent) { while (gui.parent) {
gui = gui.parent; gui = gui.parent;
@ -705,7 +711,7 @@ define([
* this GUI as well as its remembered properties. * this GUI as well as its remembered properties.
* @instance * @instance
*/ */
getSaveObject: function() { getSaveObject: function () {
var toReturn = this.load; var toReturn = this.load;
@ -725,7 +731,7 @@ define([
} }
toReturn.folders = {}; toReturn.folders = {};
common.each(this.__folders, function(element, key) { common.each(this.__folders, function (element, key) {
toReturn.folders[key] = element.getSaveObject(); toReturn.folders[key] = element.getSaveObject();
}); });
@ -733,7 +739,7 @@ define([
}, },
save: function() { save: function () {
if (!this.load.remembered) { if (!this.load.remembered) {
this.load.remembered = {}; this.load.remembered = {};
@ -745,7 +751,7 @@ define([
}, },
saveAs: function(presetName) { saveAs: function (presetName) {
if (!this.load.remembered) { if (!this.load.remembered) {
@ -762,9 +768,9 @@ define([
}, },
revert: function(gui) { revert: function (gui) {
common.each(this.__controllers, function(controller) { common.each(this.__controllers, function (controller) {
// Make revert work on Default. // Make revert work on Default.
if (!this.getRoot().load.remembered) { if (!this.getRoot().load.remembered) {
controller.setValue(controller.initialValue); controller.setValue(controller.initialValue);
@ -773,7 +779,7 @@ define([
} }
}, this); }, this);
common.each(this.__folders, function(folder) { common.each(this.__folders, function (folder) {
folder.revert(folder); folder.revert(folder);
}); });
@ -781,10 +787,9 @@ define([
markPresetModified(this.getRoot(), false); markPresetModified(this.getRoot(), false);
} }
}, },
listen: function(controller) { listen: function (controller) {
var init = this.__listening.length == 0; var init = this.__listening.length == 0;
this.__listening.push(controller); this.__listening.push(controller);
@ -792,7 +797,7 @@ define([
}, },
updateDisplay: function() { updateDisplay: function () {
for (var c in this.__controllers) { for (var c in this.__controllers) {
this.__controllers[c].updateDisplay(); this.__controllers[c].updateDisplay();
} }
@ -819,7 +824,7 @@ define([
} else { } else {
var factoryArgs = [object,property].concat(params.factoryArgs); var factoryArgs = [object, property].concat(params.factoryArgs);
controller = controllerFactory.apply(gui, factoryArgs); controller = controllerFactory.apply(gui, factoryArgs);
} }
@ -879,7 +884,7 @@ define([
common.extend(controller, { common.extend(controller, {
options: function(options) { options: function (options) {
if (arguments.length > 1) { if (arguments.length > 1) {
controller.remove(); controller.remove();
@ -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]
} }
@ -913,17 +916,17 @@ define([
}, },
name: function(v) { name: function (v) {
controller.__li.firstElementChild.firstElementChild.innerHTML = v; controller.__li.firstElementChild.firstElementChild.innerHTML = v;
return controller; return controller;
}, },
listen: function() { listen: function () {
controller.__gui.listen(controller); controller.__gui.listen(controller);
return controller; return controller;
}, },
remove: function() { remove: function () {
controller.__gui.remove(controller); controller.__gui.remove(controller);
return controller; return controller;
} }
@ -933,13 +936,16 @@ 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];
var pb = box[method]; var pb = box[method];
controller[method] = box[method] = function() { controller[method] = box[method] = function () {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
pc.apply(controller, args); pc.apply(controller, args);
return pb.apply(box, args); return pb.apply(box, args);
@ -949,10 +955,9 @@ 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) {
// Have we defined both boundaries? // Have we defined both boundaries?
if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) { if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) {
@ -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,37 +981,34 @@ 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');
}); });
dom.bind(controller.__checkbox, 'click', function(e) { dom.bind(controller.__checkbox, 'click', function (e) {
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');
}); });
dom.bind(li, 'mouseover', function() { dom.bind(li, 'mouseover', function () {
dom.addClass(controller.__button, 'hover'); dom.addClass(controller.__button, 'hover');
}); });
dom.bind(li, 'mouseout', function() { dom.bind(li, 'mouseout', function () {
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) {
li.style.borderLeftColor = controller.__color.toString(); li.style.borderLeftColor = controller.__color.toString();
return r; return r;
}, controller.updateDisplay); }, controller.updateDisplay);
@ -1016,7 +1017,7 @@ define([
} }
controller.setValue = common.compose(function(r) { controller.setValue = common.compose(function (r) {
if (gui.getRoot().__preset_select && controller.isModified()) { if (gui.getRoot().__preset_select && controller.isModified()) {
markPresetModified(gui.getRoot(), true); markPresetModified(gui.getRoot(), true);
} }
@ -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] &&
@ -1139,7 +1139,7 @@ define([
if (gui.load && gui.load.remembered) { if (gui.load && gui.load.remembered) {
common.each(gui.load.remembered, function(value, key) { common.each(gui.load.remembered, function (value, key) {
addPresetOption(gui, key, key == gui.preset); addPresetOption(gui, key, key == gui.preset);
}); });
@ -1147,8 +1147,7 @@ define([
addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false); addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false);
} }
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;
@ -1184,7 +1183,7 @@ define([
showHideExplain(); showHideExplain();
// TODO: Use a boolean controller, fool! // TODO: Use a boolean controller, fool!
dom.bind(localStorageCheckBox, 'change', function() { dom.bind(localStorageCheckBox, 'change', function () {
gui.useLocalStorage = !gui.useLocalStorage; gui.useLocalStorage = !gui.useLocalStorage;
showHideExplain(); showHideExplain();
}); });
@ -1193,33 +1192,33 @@ define([
var newConstructorTextArea = document.getElementById('dg-new-constructor'); var newConstructorTextArea = document.getElementById('dg-new-constructor');
dom.bind(newConstructorTextArea, 'keydown', function(e) { dom.bind(newConstructorTextArea, 'keydown', function (e) {
if (e.metaKey && (e.which === 67 || e.keyCode == 67)) { if (e.metaKey && (e.which === 67 || e.keyCode == 67)) {
SAVE_DIALOGUE.hide(); SAVE_DIALOGUE.hide();
} }
}); });
dom.bind(gears, 'click', function() { dom.bind(gears, 'click', function () {
newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2); newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2);
SAVE_DIALOGUE.show(); SAVE_DIALOGUE.show();
newConstructorTextArea.focus(); newConstructorTextArea.focus();
newConstructorTextArea.select(); newConstructorTextArea.select();
}); });
dom.bind(button, 'click', function() { dom.bind(button, 'click', function () {
gui.save(); gui.save();
}); });
dom.bind(button2, 'click', function() { dom.bind(button2, 'click', function () {
var presetName = prompt('Enter a new preset name.'); var presetName = prompt('Enter a new preset name.');
if (presetName) gui.saveAs(presetName); if (presetName) gui.saveAs(presetName);
}); });
dom.bind(button3, 'click', function() { dom.bind(button3, 'click', function () {
gui.revert(); gui.revert();
}); });
// div.appendChild(button2); // div.appendChild(button2);
} }
@ -1234,7 +1233,7 @@ define([
height: '200px', height: '200px',
cursor: 'ew-resize', cursor: 'ew-resize',
position: 'absolute' position: 'absolute'
// border: '1px solid blue' // border: '1px solid blue'
}); });
@ -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';
} }
} }
@ -1297,7 +1297,7 @@ define([
var toReturn = {}; var toReturn = {};
// For each object I'm remembering // For each object I'm remembering
common.each(gui.__rememberedObjects, function(val, index) { common.each(gui.__rememberedObjects, function (val, index) {
var saved_values = {}; var saved_values = {};
@ -1306,7 +1306,7 @@ define([
gui.__rememberedObjectIndecesToControllers[index]; gui.__rememberedObjectIndecesToControllers[index];
// Remember each value for each property // Remember each value for each property
common.each(controller_map, function(controller, property) { common.each(controller_map, function (controller, property) {
saved_values[property] = useInitialValues ? controller.initialValue : controller.getValue(); saved_values[property] = useInitialValues ? controller.initialValue : controller.getValue();
}); });
@ -1339,7 +1339,7 @@ define([
function markPresetModified(gui, modified) { function markPresetModified(gui, modified) {
var opt = gui.__preset_select[gui.__preset_select.selectedIndex]; var opt = gui.__preset_select[gui.__preset_select.selectedIndex];
// console.log('mark', modified, opt); // console.log('mark', modified, opt);
if (modified) { if (modified) {
opt.innerHTML = opt.value + "*"; opt.innerHTML = opt.value + "*";
} else { } else {
@ -1349,16 +1349,15 @@ define([
function updateDisplays(controllerArray) { function updateDisplays(controllerArray) {
if (controllerArray.length != 0) { if (controllerArray.length != 0) {
requestAnimationFrame(function() { requestAnimationFrame(function () {
updateDisplays(controllerArray); updateDisplays(controllerArray);
}); });
} }
common.each(controllerArray, function(c) { common.each(controllerArray, function (c) {
c.updateDisplay(); c.updateDisplay();
}); });

68
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,35 +85,29 @@ $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,
.closed ul li > * { .closed ul li> * {
height: 0; height: 0;
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>

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

@ -10,41 +10,59 @@
/** 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 { }
overflow-y: auto; }
.dg.main.taller-than-window .close-button { .dg.main.taller-than-window {
overflow-y: auto;
}
.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 { }
opacity: 1 !important; }
.dg.main:hover .close-button, .dg.main ul.closed .close-button {
.dg.main .close-button.drag { opacity: 1 !important;
opacity: 1; } }
.dg.main .close-button {
.dg.main:hover .close-button,
.dg.main .close-button.drag {
opacity: 1;
}
.dg.main .close-button {
/*opacity: 0;*/ /*opacity: 0;*/
-webkit-transition: opacity 0.1s linear; -webkit-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear; -o-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 { }
background-color: #111; }
.dg.a { .dg.main .close-button:hover {
background-color: #111;
}
.dg.a {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
overflow-x: hidden; } overflow-x: hidden;
.dg.a.has-save > ul { }
margin-top: 27px; }
.dg.a.has-save > ul.closed { .dg.a.has-save> ul {
margin-top: 0; } margin-top: 27px;
.dg.a .save-row { }
.dg.a.has-save> ul.closed {
margin-top: 0;
}
.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 ul li,
.dg .closed ul li > * { .dg .closed li:not(.title),
.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 { }
height: 100%; }
.dg .c input[type=checkbox] { .dg .slider-fg {
margin-top: 9px; } height: 100%;
.dg .c select { }
margin-top: 5px; }
.dg .cr.function, .dg .c input[type=checkbox] {
.dg .cr.function .property-name, margin-top: 9px;
.dg .cr.function *, }
.dg .cr.boolean,
.dg .cr.boolean * { .dg .c select {
cursor: pointer; } margin-top: 5px;
.dg .selector { }
.dg .cr.function,
.dg .cr.function .property-name,
.dg .cr.function *,
.dg .cr.boolean,
.dg .cr.boolean * {
cursor: pointer;
}
.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 .selector.drag {
display: block; } .dg .c:hover .selector,
.dg li.save-row { .dg .selector.drag {
padding: 0; } display: block;
.dg li.save-row .button { }
.dg li.save-row {
padding: 0;
}
.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,43 +255,65 @@
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 { }
font-size: 10px; }
#dg-local-explain code {
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 { }
/** Scrollbar */ }
.dg.main::-webkit-scrollbar { .dg.main {
/** Scrollbar */
}
.dg.main::-webkit-scrollbar {
width: 5px; width: 5px;
background: #1a1a1a; }
.dg.main::-webkit-scrollbar-corner {
height: 0;
display: none; }
.dg.main::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #676767; }
.dg li:not(.folder) {
background: #1a1a1a; background: #1a1a1a;
border-bottom: 1px solid #2c2c2c; } }
.dg li.save-row {
.dg.main::-webkit-scrollbar-corner {
height: 0;
display: none;
}
.dg.main::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #676767;
}
.dg li:not(.folder) {
background: #1a1a1a;
border-bottom: 1px solid #2c2c2c;
}
.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;
border-radius: 2px; border-radius: 2px;
@ -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 { }
border-bottom: 0; }
.dg li.title { .dg li.folder {
border-bottom: 0;
}
.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 { }
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }
.dg .cr.boolean { .dg .closed li.title {
border-left: 3px solid #806787; } background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==);
.dg .cr.function { }
border-left: 3px solid #e61d5f; }
.dg .cr.number { .dg .cr.boolean {
border-left: 3px solid #2fa1d6; } border-left: 3px solid #806787;
.dg .cr.number input[type=text] { }
color: #2fa1d6; }
.dg .cr.string { .dg .cr.function {
border-left: 3px solid #1ed36f; } border-left: 3px solid #e61d5f;
.dg .cr.string input[type=text] { }
color: #1ed36f; }
.dg .cr.function:hover, .dg .cr.boolean:hover { .dg .cr.number {
background: #111; } border-left: 3px solid #2fa1d6;
.dg .c input[type=text] { }
.dg .cr.number input[type=text] {
color: #2fa1d6;
}
.dg .cr.string {
border-left: 3px solid #1ed36f;
}
.dg .cr.string input[type=text] {
color: #1ed36f;
}
.dg .cr.function:hover,
.dg .cr.boolean:hover {
background: #111;
}
.dg .c input[type=text] {
background: #303030; background: #303030;
outline: none; } outline: none;
.dg .c input[type=text]:hover { }
background: #3c3c3c; }
.dg .c input[type=text]:focus { .dg .c input[type=text]:hover {
background: #3c3c3c;
}
.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 { }
background: #2fa1d6; }
.dg .c .slider:hover { .dg .c .slider-fg {
background: #3c3c3c; } background: #2fa1d6;
.dg .c .slider:hover .slider-fg { }
background: #44abda; }
.dg .c .slider:hover {
background: #3c3c3c;
}
.dg .c .slider:hover .slider-fg {
background: #44abda;
}

47
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);
} }
} }
} }
} }

45
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;
@ -27,9 +26,9 @@ define([
BREAK: {}, BREAK: {},
extend: function(target) { extend: function (target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) { this.each(ARR_SLICE.call(arguments, 1), function (obj) {
for (var key in obj) for (var key in obj)
if (!this.isUndefined(obj[key])) if (!this.isUndefined(obj[key]))
@ -41,9 +40,9 @@ define([
}, },
defaults: function(target) { defaults: function (target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) { this.each(ARR_SLICE.call(arguments, 1), function (obj) {
for (var key in obj) for (var key in obj)
if (this.isUndefined(target[key])) if (this.isUndefined(target[key]))
@ -55,18 +54,18 @@ define([
}, },
compose: function() { compose: function () {
var toCall = ARR_SLICE.call(arguments); var toCall = ARR_SLICE.call(arguments);
return function() { return function () {
var args = ARR_SLICE.call(arguments); var args = ARR_SLICE.call(arguments);
for (var i = toCall.length -1; i >= 0; i--) { for (var i = toCall.length - 1; i >= 0; i--) {
args = [toCall[i].apply(this, args)]; args = [toCall[i].apply(this, args)];
} }
return args[0]; return args[0];
} }
}, },
each: function(obj, itr, scope) { each: function (obj, itr, scope) {
if (!obj) return; if (!obj) return;
@ -90,48 +89,48 @@ define([
}, },
defer: function(fnc) { defer: function (fnc) {
setTimeout(fnc, 0); setTimeout(fnc, 0);
}, },
toArray: function(obj) { toArray: function (obj) {
if (obj.toArray) return obj.toArray(); if (obj.toArray) return obj.toArray();
return ARR_SLICE.call(obj); return ARR_SLICE.call(obj);
}, },
isUndefined: function(obj) { isUndefined: function (obj) {
return obj === undefined; return obj === undefined;
}, },
isNull: function(obj) { isNull: function (obj) {
return obj === null; return obj === null;
}, },
isNaN: function(obj) { isNaN: function (obj) {
return obj !== obj; return obj !== obj;
}, },
isArray: Array.isArray || function(obj) { isArray: Array.isArray || function (obj) {
return obj.constructor === Array; return obj.constructor === Array;
}, },
isObject: function(obj) { isObject: function (obj) {
return obj === Object(obj); return obj === Object(obj);
}, },
isNumber: function(obj) { isNumber: function (obj) {
return obj === obj+0; return obj === obj + 0;
}, },
isString: function(obj) { isString: function (obj) {
return obj === obj+''; return obj === obj + '';
}, },
isBoolean: function(obj) { isBoolean: function (obj) {
return obj === false || obj === true; return obj === false || obj === true;
}, },
isFunction: function(obj) { isFunction: function (obj) {
return Object.prototype.toString.call(obj) === '[object Function]'; return Object.prototype.toString.call(obj) === '[object Function]';
} }

6
src/dat/utils/css.js
View File

@ -12,7 +12,7 @@
*/ */
define([], define([],
function() { function () {
return { return {
load: function (url, doc) { load: function (url, doc) {
doc = doc || document; doc = doc || document;
@ -22,7 +22,7 @@ function() {
link.href = url; link.href = url;
doc.getElementsByTagName('head')[0].appendChild(link); doc.getElementsByTagName('head')[0].appendChild(link);
}, },
inject: function(css, doc) { inject: function (css, doc) {
doc = doc || document; doc = doc || document;
var injected = document.createElement('style'); var injected = document.createElement('style');
injected.type = 'text/css'; injected.type = 'text/css';
@ -30,4 +30,4 @@ function() {
doc.getElementsByTagName('head')[0].appendChild(injected); doc.getElementsByTagName('head')[0].appendChild(injected);
} }
} }
}); });

5
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
@ -24,7 +23,7 @@ define([
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback, element) { function (callback, element) {
window.setTimeout(callback, 1000 / 60); window.setTimeout(callback, 1000 / 60);