mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
formatted 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
parent
b9410572ea
commit
581e482823
18
example.html
18
example.html
@ -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 = {
|
||||||
var gui = new dat.GUI();
|
x: 5
|
||||||
gui.add(obj, 'x');
|
};
|
||||||
</script>
|
var gui = new dat.GUI();
|
||||||
|
gui.add(obj, 'x');
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
@ -71,10 +71,10 @@ define([
|
|||||||
return {
|
return {
|
||||||
space: 'HEX',
|
space: 'HEX',
|
||||||
hex: parseInt(
|
hex: parseInt(
|
||||||
'0x' +
|
'0x' +
|
||||||
test[1].toString() + test[1].toString() +
|
test[1].toString() + test[1].toString() +
|
||||||
test[2].toString() + test[2].toString() +
|
test[2].toString() + test[2].toString() +
|
||||||
test[3].toString() + test[3].toString())
|
test[3].toString() + test[3].toString())
|
||||||
};
|
};
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -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,11 +225,11 @@ 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) &&
|
||||||
common.isNumber(original.a)) {
|
common.isNumber(original.a)) {
|
||||||
return {
|
return {
|
||||||
space: 'RGB',
|
space: 'RGB',
|
||||||
r: original.r,
|
r: original.r,
|
||||||
@ -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,10 +252,10 @@ 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)) {
|
||||||
return {
|
return {
|
||||||
space: 'RGB',
|
space: 'RGB',
|
||||||
r: original.r,
|
r: original.r,
|
||||||
@ -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,11 +276,11 @@ 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) &&
|
||||||
common.isNumber(original.a)) {
|
common.isNumber(original.a)) {
|
||||||
return {
|
return {
|
||||||
space: 'HSV',
|
space: 'HSV',
|
||||||
h: original.h,
|
h: original.h,
|
||||||
@ -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,10 +303,10 @@ 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)) {
|
||||||
return {
|
return {
|
||||||
space: 'HSV',
|
space: 'HSV',
|
||||||
h: original.h,
|
h: original.h,
|
||||||
@ -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;
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -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,12 +44,12 @@ 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),
|
||||||
delta = max - min,
|
delta = max - min,
|
||||||
h, s;
|
h, s;
|
||||||
|
|
||||||
if (max != 0) {
|
if (max != 0) {
|
||||||
s = delta / max;
|
s = delta / max;
|
||||||
@ -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));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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)) {
|
||||||
|
|
||||||
|
|||||||
@ -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);
|
||||||
@ -54,36 +53,35 @@ define([
|
|||||||
|
|
||||||
common.extend(
|
common.extend(
|
||||||
|
|
||||||
BooleanController.prototype,
|
BooleanController.prototype,
|
||||||
Controller.prototype,
|
Controller.prototype,
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
||||||
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());
|
||||||
}
|
}
|
||||||
this.__prev = this.getValue();
|
this.__prev = this.getValue();
|
||||||
return toReturn;
|
return toReturn;
|
||||||
},
|
},
|
||||||
|
|
||||||
updateDisplay: function() {
|
updateDisplay: function () {
|
||||||
|
|
||||||
if (this.getValue() === true) {
|
|
||||||
this.__checkbox.setAttribute('checked', 'checked');
|
|
||||||
this.__checkbox.checked = true;
|
|
||||||
} else {
|
|
||||||
this.__checkbox.checked = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return BooleanController.superclass.prototype.updateDisplay.call(this);
|
|
||||||
|
|
||||||
|
if (this.getValue() === true) {
|
||||||
|
this.__checkbox.setAttribute('checked', 'checked');
|
||||||
|
this.__checkbox.checked = true;
|
||||||
|
} else {
|
||||||
|
this.__checkbox.checked = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return BooleanController.superclass.prototype.updateDisplay.call(this);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return BooleanController;
|
return BooleanController;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -235,77 +234,77 @@ define([
|
|||||||
|
|
||||||
common.extend(
|
common.extend(
|
||||||
|
|
||||||
ColorController.prototype,
|
ColorController.prototype,
|
||||||
Controller.prototype,
|
Controller.prototype,
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
||||||
updateDisplay: function() {
|
updateDisplay: function () {
|
||||||
|
|
||||||
var i = interpret(this.getValue());
|
var i = interpret(this.getValue());
|
||||||
|
|
||||||
if (i !== false) {
|
if (i !== false) {
|
||||||
|
|
||||||
var mismatch = false;
|
var mismatch = false;
|
||||||
|
|
||||||
// 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]) {
|
||||||
mismatch = true;
|
mismatch = true;
|
||||||
return {}; // break
|
return {}; // break
|
||||||
}
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
// If nothing diverges, we keep our previous values
|
|
||||||
// for statefulness, otherwise we recalculate fresh
|
|
||||||
if (mismatch) {
|
|
||||||
common.extend(this.__color.__state, i);
|
|
||||||
}
|
}
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
// If nothing diverges, we keep our previous values
|
||||||
|
// for statefulness, otherwise we recalculate fresh
|
||||||
|
if (mismatch) {
|
||||||
|
common.extend(this.__color.__state, i);
|
||||||
}
|
}
|
||||||
|
|
||||||
common.extend(this.__temp.__state, this.__color.__state);
|
|
||||||
|
|
||||||
this.__temp.a = 1;
|
|
||||||
|
|
||||||
var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
|
|
||||||
var _flip = 255 - flip;
|
|
||||||
|
|
||||||
common.extend(this.__field_knob.style, {
|
|
||||||
marginLeft: 100 * this.__color.s - 7 + 'px',
|
|
||||||
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
|
|
||||||
backgroundColor: this.__temp.toString(),
|
|
||||||
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')'
|
|
||||||
});
|
|
||||||
|
|
||||||
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
|
|
||||||
|
|
||||||
this.__temp.s = 1;
|
|
||||||
this.__temp.v = 1;
|
|
||||||
|
|
||||||
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
|
|
||||||
|
|
||||||
common.extend(this.__input.style, {
|
|
||||||
backgroundColor: this.__input.value = this.__color.toString(),
|
|
||||||
color: 'rgb(' + flip + ',' + flip + ',' + flip +')',
|
|
||||||
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)'
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
common.extend(this.__temp.__state, this.__color.__state);
|
||||||
|
|
||||||
|
this.__temp.a = 1;
|
||||||
|
|
||||||
|
var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
|
||||||
|
var _flip = 255 - flip;
|
||||||
|
|
||||||
|
common.extend(this.__field_knob.style, {
|
||||||
|
marginLeft: 100 * this.__color.s - 7 + 'px',
|
||||||
|
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
|
||||||
|
backgroundColor: this.__temp.toString(),
|
||||||
|
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
|
||||||
|
|
||||||
|
this.__temp.s = 1;
|
||||||
|
this.__temp.v = 1;
|
||||||
|
|
||||||
|
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
|
||||||
|
|
||||||
|
common.extend(this.__input.style, {
|
||||||
|
backgroundColor: this.__input.value = this.__color.toString(),
|
||||||
|
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
|
||||||
|
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
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;
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -12,8 +12,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
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];
|
||||||
|
|
||||||
@ -63,82 +63,81 @@ define([
|
|||||||
|
|
||||||
common.extend(
|
common.extend(
|
||||||
|
|
||||||
Controller.prototype,
|
Controller.prototype,
|
||||||
|
|
||||||
/** @lends dat.controllers.Controller.prototype */
|
/** @lends dat.controllers.Controller.prototype */
|
||||||
{
|
{
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify that a function fire every time someone changes the value with
|
* Specify that a function fire every time someone changes the value with
|
||||||
* this Controller.
|
* this Controller.
|
||||||
*
|
*
|
||||||
* @param {Function} fnc This function will be called whenever the value
|
* @param {Function} fnc This function will be called whenever the value
|
||||||
* 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;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify that a function fire every time someone "finishes" changing
|
* Specify that a function fire every time someone "finishes" changing
|
||||||
* the value wih this Controller. Useful for values that change
|
* the value wih this Controller. Useful for values that change
|
||||||
* incrementally like numbers or strings.
|
* incrementally like numbers or strings.
|
||||||
*
|
*
|
||||||
* @param {Function} fnc This function will be called whenever
|
* @param {Function} fnc This function will be called whenever
|
||||||
* 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;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Change the value of <code>object[property]</code>
|
* Change the value of <code>object[property]</code>
|
||||||
*
|
*
|
||||||
* @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);
|
||||||
}
|
|
||||||
this.updateDisplay();
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the value of <code>object[property]</code>
|
|
||||||
*
|
|
||||||
* @returns {Object} The current value of <code>object[property]</code>
|
|
||||||
*/
|
|
||||||
getValue: function() {
|
|
||||||
return this.object[this.property];
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Refreshes the visual display of a Controller in order to keep sync
|
|
||||||
* with the object's current value.
|
|
||||||
* @returns {dat.controllers.Controller} this
|
|
||||||
*/
|
|
||||||
updateDisplay: function() {
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @returns {Boolean} true if the value has deviated from initialValue
|
|
||||||
*/
|
|
||||||
isModified: function() {
|
|
||||||
return this.initialValue !== this.getValue()
|
|
||||||
}
|
}
|
||||||
|
this.updateDisplay();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the value of <code>object[property]</code>
|
||||||
|
*
|
||||||
|
* @returns {Object} The current value of <code>object[property]</code>
|
||||||
|
*/
|
||||||
|
getValue: function () {
|
||||||
|
return this.object[this.property];
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refreshes the visual display of a Controller in order to keep sync
|
||||||
|
* with the object's current value.
|
||||||
|
* @returns {dat.controllers.Controller} this
|
||||||
|
*/
|
||||||
|
updateDisplay: function () {
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {Boolean} true if the value has deviated from initialValue
|
||||||
|
*/
|
||||||
|
isModified: function () {
|
||||||
|
return this.initialValue !== this.getValue()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return Controller;
|
return Controller;
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -12,10 +12,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
define([
|
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,27 +45,25 @@ define([
|
|||||||
|
|
||||||
this.domElement.appendChild(this.__button);
|
this.domElement.appendChild(this.__button);
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
FunctionController.superclass = Controller;
|
FunctionController.superclass = Controller;
|
||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
this.getValue().call(this.object);
|
this.getValue().call(this.object);
|
||||||
if (this.__onFinishChange) {
|
if (this.__onFinishChange) {
|
||||||
this.__onFinishChange.call(this, this.getValue());
|
this.__onFinishChange.call(this, this.getValue());
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -12,9 +12,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
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,89 +46,88 @@ 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 {
|
||||||
|
|
||||||
this.__impliedStep = this.__step;
|
this.__impliedStep = this.__step;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.__precision = numDecimals(this.__impliedStep);
|
this.__precision = numDecimals(this.__impliedStep);
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
NumberController.superclass = Controller;
|
NumberController.superclass = Controller;
|
||||||
|
|
||||||
common.extend(
|
common.extend(
|
||||||
|
|
||||||
NumberController.prototype,
|
NumberController.prototype,
|
||||||
Controller.prototype,
|
Controller.prototype,
|
||||||
|
|
||||||
/** @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;
|
||||||
} else if (this.__max !== undefined && v > this.__max) {
|
} else if (this.__max !== undefined && v > this.__max) {
|
||||||
v = this.__max;
|
v = this.__max;
|
||||||
}
|
|
||||||
|
|
||||||
if (this.__step !== undefined && v % this.__step != 0) {
|
|
||||||
v = Math.round(v / this.__step) * this.__step;
|
|
||||||
}
|
|
||||||
|
|
||||||
return NumberController.superclass.prototype.setValue.call(this, v);
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify a minimum value for <code>object[property]</code>.
|
|
||||||
*
|
|
||||||
* @param {Number} minValue The minimum value for
|
|
||||||
* <code>object[property]</code>
|
|
||||||
* @returns {dat.controllers.NumberController} this
|
|
||||||
*/
|
|
||||||
min: function(v) {
|
|
||||||
this.__min = v;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify a maximum value for <code>object[property]</code>.
|
|
||||||
*
|
|
||||||
* @param {Number} maxValue The maximum value for
|
|
||||||
* <code>object[property]</code>
|
|
||||||
* @returns {dat.controllers.NumberController} this
|
|
||||||
*/
|
|
||||||
max: function(v) {
|
|
||||||
this.__max = v;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specify a step value that dat.controllers.NumberController
|
|
||||||
* increments by.
|
|
||||||
*
|
|
||||||
* @param {Number} stepValue The step value for
|
|
||||||
* dat.controllers.NumberController
|
|
||||||
* @default if minimum and maximum specified increment is 1% of the
|
|
||||||
* difference otherwise stepValue is 1
|
|
||||||
* @returns {dat.controllers.NumberController} this
|
|
||||||
*/
|
|
||||||
step: function(v) {
|
|
||||||
this.__step = v;
|
|
||||||
this.__impliedStep = v;
|
|
||||||
this.__precision = numDecimals(v);
|
|
||||||
return this;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.__step !== undefined && v % this.__step != 0) {
|
||||||
|
v = Math.round(v / this.__step) * this.__step;
|
||||||
|
}
|
||||||
|
|
||||||
|
return NumberController.superclass.prototype.setValue.call(this, v);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify a minimum value for <code>object[property]</code>.
|
||||||
|
*
|
||||||
|
* @param {Number} minValue The minimum value for
|
||||||
|
* <code>object[property]</code>
|
||||||
|
* @returns {dat.controllers.NumberController} this
|
||||||
|
*/
|
||||||
|
min: function (v) {
|
||||||
|
this.__min = v;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify a maximum value for <code>object[property]</code>.
|
||||||
|
*
|
||||||
|
* @param {Number} maxValue The maximum value for
|
||||||
|
* <code>object[property]</code>
|
||||||
|
* @returns {dat.controllers.NumberController} this
|
||||||
|
*/
|
||||||
|
max: function (v) {
|
||||||
|
this.__max = v;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify a step value that dat.controllers.NumberController
|
||||||
|
* increments by.
|
||||||
|
*
|
||||||
|
* @param {Number} stepValue The step value for
|
||||||
|
* dat.controllers.NumberController
|
||||||
|
* @default if minimum and maximum specified increment is 1% of the
|
||||||
|
* difference otherwise stepValue is 1
|
||||||
|
* @returns {dat.controllers.NumberController} this
|
||||||
|
*/
|
||||||
|
step: function (v) {
|
||||||
|
this.__step = v;
|
||||||
|
this.__impliedStep = v;
|
||||||
|
this.__precision = numDecimals(v);
|
||||||
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
function numDecimals(x) {
|
function numDecimals(x) {
|
||||||
|
|||||||
@ -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) {
|
||||||
@ -108,22 +108,22 @@ define([
|
|||||||
|
|
||||||
common.extend(
|
common.extend(
|
||||||
|
|
||||||
NumberControllerBox.prototype,
|
NumberControllerBox.prototype,
|
||||||
NumberController.prototype,
|
NumberController.prototype,
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
||||||
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)) {
|
||||||
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
||||||
}
|
|
||||||
return NumberControllerBox.superclass.prototype.updateDisplay.call(this);
|
|
||||||
}
|
}
|
||||||
|
return NumberControllerBox.superclass.prototype.updateDisplay.call(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
function roundToDecimal(value, decimals) {
|
function roundToDecimal(value, decimals) {
|
||||||
@ -134,4 +134,3 @@ define([
|
|||||||
return NumberControllerBox;
|
return NumberControllerBox;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
@ -33,7 +33,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #aaa;
|
||||||
content: '';
|
content: '';
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: -1em;
|
margin-right: -1em;
|
||||||
|
|||||||
@ -17,113 +17,113 @@ 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
|
||||||
* a minimum and maximum, and provides a slider element with which to
|
* a minimum and maximum, and provides a slider element with which to
|
||||||
* manipulate it. It should be noted that the slider element is made up of
|
* manipulate it. It should be noted that the slider element is made up of
|
||||||
* <code><div></code> tags, <strong>not</strong> the html5
|
* <code><div></code> tags, <strong>not</strong> the html5
|
||||||
* <code><slider></code> element.
|
* <code><slider></code> element.
|
||||||
*
|
*
|
||||||
* @extends dat.controllers.Controller
|
* @extends dat.controllers.Controller
|
||||||
* @extends dat.controllers.NumberController
|
* @extends dat.controllers.NumberController
|
||||||
*
|
*
|
||||||
* @param {Object} object The object to be manipulated
|
* @param {Object} object The object to be manipulated
|
||||||
* @param {string} property The name of the property to be manipulated
|
* @param {string} property The name of the property to be manipulated
|
||||||
* @param {Number} minValue Minimum allowed value
|
* @param {Number} minValue Minimum allowed value
|
||||||
* @param {Number} maxValue Maximum allowed value
|
* @param {Number} maxValue Maximum allowed value
|
||||||
* @param {Number} stepValue Increment by which to change value
|
* @param {Number} stepValue Increment by which to change value
|
||||||
*
|
*
|
||||||
* @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.addClass(this.__background, 'slider');
|
||||||
|
dom.addClass(this.__foreground, 'slider-fg');
|
||||||
|
|
||||||
dom.bind(this.__background, 'mousedown', onMouseDown);
|
function onMouseDown(e) {
|
||||||
|
|
||||||
dom.addClass(this.__background, 'slider');
|
dom.bind(window, 'mousemove', onMouseDrag);
|
||||||
dom.addClass(this.__foreground, 'slider-fg');
|
dom.bind(window, 'mouseup', onMouseUp);
|
||||||
|
|
||||||
function onMouseDown(e) {
|
onMouseDrag(e);
|
||||||
|
|
||||||
dom.bind(window, 'mousemove', onMouseDrag);
|
|
||||||
dom.bind(window, 'mouseup', onMouseUp);
|
|
||||||
|
|
||||||
onMouseDrag(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseDrag(e) {
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
var offset = dom.getOffset(_this.__background);
|
|
||||||
var width = dom.getWidth(_this.__background);
|
|
||||||
|
|
||||||
_this.setValue(
|
|
||||||
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
|
|
||||||
);
|
|
||||||
|
|
||||||
return false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseUp() {
|
|
||||||
dom.unbind(window, 'mousemove', onMouseDrag);
|
|
||||||
dom.unbind(window, 'mouseup', onMouseUp);
|
|
||||||
if (_this.__onFinishChange) {
|
|
||||||
_this.__onFinishChange.call(_this, _this.getValue());
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
this.updateDisplay();
|
function onMouseDrag(e) {
|
||||||
|
|
||||||
this.__background.appendChild(this.__foreground);
|
e.preventDefault();
|
||||||
this.domElement.appendChild(this.__background);
|
|
||||||
|
|
||||||
};
|
var offset = dom.getOffset(_this.__background);
|
||||||
|
var width = dom.getWidth(_this.__background);
|
||||||
|
|
||||||
NumberControllerSlider.superclass = NumberController;
|
_this.setValue(
|
||||||
|
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
|
||||||
|
);
|
||||||
|
|
||||||
/**
|
return false;
|
||||||
* Injects default stylesheet for slider elements.
|
|
||||||
*/
|
|
||||||
NumberControllerSlider.useDefaultStyles = function() {
|
|
||||||
css.inject(styleSheet);
|
|
||||||
};
|
|
||||||
|
|
||||||
common.extend(
|
}
|
||||||
|
|
||||||
|
function onMouseUp() {
|
||||||
|
dom.unbind(window, 'mousemove', onMouseDrag);
|
||||||
|
dom.unbind(window, 'mouseup', onMouseUp);
|
||||||
|
if (_this.__onFinishChange) {
|
||||||
|
_this.__onFinishChange.call(_this, _this.getValue());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateDisplay();
|
||||||
|
|
||||||
|
this.__background.appendChild(this.__foreground);
|
||||||
|
this.domElement.appendChild(this.__background);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
NumberControllerSlider.superclass = NumberController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Injects default stylesheet for slider elements.
|
||||||
|
*/
|
||||||
|
NumberControllerSlider.useDefaultStyles = function () {
|
||||||
|
css.inject(styleSheet);
|
||||||
|
};
|
||||||
|
|
||||||
|
common.extend(
|
||||||
|
|
||||||
NumberControllerSlider.prototype,
|
NumberControllerSlider.prototype,
|
||||||
NumberController.prototype,
|
NumberController.prototype,
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
||||||
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) {
|
||||||
|
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
||||||
|
}
|
||||||
|
|
||||||
);
|
return NumberControllerSlider;
|
||||||
|
|
||||||
function map(v, i1, i2, o1, o2) {
|
});
|
||||||
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
|
||||||
}
|
|
||||||
|
|
||||||
return NumberControllerSlider;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|||||||
@ -15,73 +15,73 @@ 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
|
|
||||||
* list of accepted values.
|
|
||||||
*
|
|
||||||
* @extends dat.controllers.Controller
|
|
||||||
*
|
|
||||||
* @param {Object} object The object to be manipulated
|
|
||||||
* @param {string} property The name of the property to be manipulated
|
|
||||||
* @param {Object|string[]} options A map of labels to acceptable values, or
|
|
||||||
* a list of acceptable string values.
|
|
||||||
*
|
|
||||||
* @member dat.controllers
|
|
||||||
*/
|
|
||||||
var OptionController = function(object, property, options) {
|
|
||||||
|
|
||||||
OptionController.superclass.call(this, object, property);
|
|
||||||
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The drop down menu
|
* @class Provides a select input to alter the property of an object, using a
|
||||||
* @ignore
|
* list of accepted values.
|
||||||
|
*
|
||||||
|
* @extends dat.controllers.Controller
|
||||||
|
*
|
||||||
|
* @param {Object} object The object to be manipulated
|
||||||
|
* @param {string} property The name of the property to be manipulated
|
||||||
|
* @param {Object|string[]} options A map of labels to acceptable values, or
|
||||||
|
* a list of acceptable string values.
|
||||||
|
*
|
||||||
|
* @member dat.controllers
|
||||||
*/
|
*/
|
||||||
this.__select = document.createElement('select');
|
var OptionController = function (object, property, options) {
|
||||||
|
|
||||||
|
OptionController.superclass.call(this, object, property);
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The drop down menu
|
||||||
|
* @ignore
|
||||||
|
*/
|
||||||
|
this.__select = document.createElement('select');
|
||||||
|
|
||||||
|
if (common.isArray(options)) {
|
||||||
|
var map = {};
|
||||||
|
common.each(options, function (element) {
|
||||||
|
map[element] = element;
|
||||||
|
});
|
||||||
|
options = map;
|
||||||
|
}
|
||||||
|
|
||||||
|
common.each(options, function (value, key) {
|
||||||
|
|
||||||
|
var opt = document.createElement('option');
|
||||||
|
opt.innerHTML = key;
|
||||||
|
opt.setAttribute('value', value);
|
||||||
|
_this.__select.appendChild(opt);
|
||||||
|
|
||||||
if (common.isArray(options)) {
|
|
||||||
var map = {};
|
|
||||||
common.each(options, function(element) {
|
|
||||||
map[element] = element;
|
|
||||||
});
|
});
|
||||||
options = map;
|
|
||||||
}
|
|
||||||
|
|
||||||
common.each(options, function(value, key) {
|
// Acknowledge original value
|
||||||
|
this.updateDisplay();
|
||||||
|
|
||||||
var opt = document.createElement('option');
|
dom.bind(this.__select, 'change', function () {
|
||||||
opt.innerHTML = key;
|
var desiredValue = this.options[this.selectedIndex].value;
|
||||||
opt.setAttribute('value', value);
|
_this.setValue(desiredValue);
|
||||||
_this.__select.appendChild(opt);
|
});
|
||||||
|
|
||||||
});
|
this.domElement.appendChild(this.__select);
|
||||||
|
|
||||||
// Acknowledge original value
|
};
|
||||||
this.updateDisplay();
|
|
||||||
|
|
||||||
dom.bind(this.__select, 'change', function() {
|
OptionController.superclass = Controller;
|
||||||
var desiredValue = this.options[this.selectedIndex].value;
|
|
||||||
_this.setValue(desiredValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.domElement.appendChild(this.__select);
|
common.extend(
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
OptionController.superclass = Controller;
|
|
||||||
|
|
||||||
common.extend(
|
|
||||||
|
|
||||||
OptionController.prototype,
|
OptionController.prototype,
|
||||||
Controller.prototype,
|
Controller.prototype,
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
||||||
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,15 +89,15 @@ 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);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return OptionController;
|
return OptionController;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -12,10 +12,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
define([
|
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);
|
||||||
}
|
}
|
||||||
@ -66,22 +65,22 @@ define([
|
|||||||
|
|
||||||
common.extend(
|
common.extend(
|
||||||
|
|
||||||
StringController.prototype,
|
StringController.prototype,
|
||||||
Controller.prototype,
|
Controller.prototype,
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
||||||
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)) {
|
||||||
this.__input.value = this.getValue();
|
this.__input.value = this.getValue();
|
||||||
}
|
|
||||||
return StringController.superclass.prototype.updateDisplay.call(this);
|
|
||||||
}
|
}
|
||||||
|
return StringController.superclass.prototype.updateDisplay.call(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return StringController;
|
return StringController;
|
||||||
|
|||||||
@ -12,54 +12,57 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
define([
|
define([
|
||||||
'dat/controllers/OptionController',
|
'dat/controllers/OptionController',
|
||||||
'dat/controllers/NumberControllerBox',
|
'dat/controllers/NumberControllerBox',
|
||||||
'dat/controllers/NumberControllerSlider',
|
'dat/controllers/NumberControllerSlider',
|
||||||
'dat/controllers/StringController',
|
'dat/controllers/StringController',
|
||||||
'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];
|
||||||
|
|
||||||
// Providing options?
|
// Providing options?
|
||||||
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
|
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
|
||||||
return new OptionController(object, property, arguments[2]);
|
return new OptionController(object, property, arguments[2]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Providing a map?
|
// Providing a map?
|
||||||
|
|
||||||
if (common.isNumber(initialValue)) {
|
if (common.isNumber(initialValue)) {
|
||||||
|
|
||||||
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
|
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
|
||||||
|
|
||||||
// Has min and max.
|
// Has min and max.
|
||||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });
|
return new NumberControllerBox(object, property, {
|
||||||
|
min: arguments[2],
|
||||||
|
max: arguments[3]
|
||||||
|
});
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (common.isString(initialValue)) {
|
|
||||||
return new StringController(object, property);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (common.isFunction(initialValue)) {
|
|
||||||
return new FunctionController(object, property, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (common.isBoolean(initialValue)) {
|
|
||||||
return new BooleanController(object, property);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
if (common.isString(initialValue)) {
|
||||||
|
return new StringController(object, property);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (common.isFunction(initialValue)) {
|
||||||
|
return new FunctionController(object, property, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (common.isBoolean(initialValue)) {
|
||||||
|
return new BooleanController(object, property);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
@ -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) {
|
||||||
@ -110,38 +109,38 @@ define([
|
|||||||
}
|
}
|
||||||
var evt = document.createEvent(className);
|
var evt = document.createEvent(className);
|
||||||
switch (className) {
|
switch (className) {
|
||||||
case 'MouseEvents':
|
case 'MouseEvents':
|
||||||
var clientX = params.x || params.clientX || 0;
|
var clientX = params.x || params.clientX || 0;
|
||||||
var clientY = params.y || params.clientY || 0;
|
var clientY = params.y || params.clientY || 0;
|
||||||
evt.initMouseEvent(eventType, params.bubbles || false,
|
evt.initMouseEvent(eventType, params.bubbles || false,
|
||||||
params.cancelable || true, window, params.clickCount || 1,
|
params.cancelable || true, window, params.clickCount || 1,
|
||||||
0, //screen X
|
0, //screen X
|
||||||
0, //screen Y
|
0, //screen Y
|
||||||
clientX, //client X
|
clientX, //client X
|
||||||
clientY, //client Y
|
clientY, //client Y
|
||||||
false, false, false, false, 0, null);
|
false, false, false, false, 0, null);
|
||||||
break;
|
break;
|
||||||
case 'KeyboardEvents':
|
case 'KeyboardEvents':
|
||||||
var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
|
var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
|
||||||
common.defaults(params, {
|
common.defaults(params, {
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
altKey: false,
|
altKey: false,
|
||||||
shiftKey: false,
|
shiftKey: false,
|
||||||
metaKey: false,
|
metaKey: false,
|
||||||
keyCode: undefined,
|
keyCode: undefined,
|
||||||
charCode: undefined
|
charCode: undefined
|
||||||
});
|
});
|
||||||
init(eventType, params.bubbles || false,
|
init(eventType, params.bubbles || false,
|
||||||
params.cancelable, window,
|
params.cancelable, window,
|
||||||
params.ctrlKey, params.altKey,
|
params.ctrlKey, params.altKey,
|
||||||
params.shiftKey, params.metaKey,
|
params.shiftKey, params.metaKey,
|
||||||
params.keyCode, params.charCode);
|
params.keyCode, params.charCode);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
evt.initEvent(eventType, params.bubbles || false,
|
evt.initEvent(eventType, params.bubbles || false,
|
||||||
params.cancelable || true);
|
params.cancelable || true);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
common.defaults(evt, aux);
|
common.defaults(evt, aux);
|
||||||
elem.dispatchEvent(evt);
|
elem.dispatchEvent(evt);
|
||||||
@ -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,38 +229,41 @@ define([
|
|||||||
*
|
*
|
||||||
* @param elem
|
* @param elem
|
||||||
*/
|
*/
|
||||||
getWidth: function(elem) {
|
getWidth: function (elem) {
|
||||||
|
|
||||||
var style = getComputedStyle(elem);
|
var style = getComputedStyle(elem);
|
||||||
|
|
||||||
return cssValueToPixels(style['border-left-width']) +
|
return cssValueToPixels(style['border-left-width']) +
|
||||||
cssValueToPixels(style['border-right-width']) +
|
cssValueToPixels(style['border-right-width']) +
|
||||||
cssValueToPixels(style['padding-left']) +
|
cssValueToPixels(style['padding-left']) +
|
||||||
cssValueToPixels(style['padding-right']) +
|
cssValueToPixels(style['padding-right']) +
|
||||||
cssValueToPixels(style['width']);
|
cssValueToPixels(style['width']);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param elem
|
* @param elem
|
||||||
*/
|
*/
|
||||||
getHeight: function(elem) {
|
getHeight: function (elem) {
|
||||||
|
|
||||||
var style = getComputedStyle(elem);
|
var style = getComputedStyle(elem);
|
||||||
|
|
||||||
return cssValueToPixels(style['border-top-width']) +
|
return cssValueToPixels(style['border-top-width']) +
|
||||||
cssValueToPixels(style['border-bottom-width']) +
|
cssValueToPixels(style['border-bottom-width']) +
|
||||||
cssValueToPixels(style['padding-top']) +
|
cssValueToPixels(style['padding-top']) +
|
||||||
cssValueToPixels(style['padding-bottom']) +
|
cssValueToPixels(style['padding-bottom']) +
|
||||||
cssValueToPixels(style['height']);
|
cssValueToPixels(style['height']);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @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);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
1069
src/dat/gui/GUI.js
1069
src/dat/gui/GUI.js
File diff suppressed because it is too large
Load Diff
@ -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,101 +10,73 @@ $button-height: 20px;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Auto-place container */
|
/* Auto-place container */
|
||||||
&.ac {
|
&.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
&: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;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
&: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;
|
||||||
@ -273,7 +219,7 @@ $button-height: 20px;
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
code {
|
code {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#dat-gui-save-locally {
|
#dat-gui-save-locally {
|
||||||
|
|||||||
@ -1,21 +1,17 @@
|
|||||||
<div id="dg-save" class="dg dialogue">
|
<div id="dg-save" class="dg dialogue">
|
||||||
|
|
||||||
Here's the new load parameter for your <code>GUI</code>'s constructor:
|
Here's the new load parameter for your <code>GUI</code>'s constructor:
|
||||||
|
|
||||||
<textarea id="dg-new-constructor"></textarea>
|
<textarea id="dg-new-constructor"></textarea>
|
||||||
|
|
||||||
<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,
|
</div>
|
||||||
and your friends may not see the same values you do.
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -10,156 +10,227 @@
|
|||||||
/** 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 {
|
}
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
.dg ul {
|
||||||
padding: 0;
|
list-style: none;
|
||||||
width: 100%;
|
margin: 0;
|
||||||
clear: both; }
|
padding: 0;
|
||||||
.dg.ac {
|
width: 100%;
|
||||||
position: fixed;
|
clear: both;
|
||||||
top: 0;
|
}
|
||||||
left: 0;
|
|
||||||
right: 0;
|
.dg.ac {
|
||||||
height: 0;
|
position: fixed;
|
||||||
z-index: 0; }
|
top: 0;
|
||||||
.dg:not(.ac) .main {
|
left: 0;
|
||||||
/** Exclude mains in ac so that we don't hide close button */
|
right: 0;
|
||||||
overflow: hidden; }
|
height: 0;
|
||||||
.dg.main {
|
z-index: 0;
|
||||||
-webkit-transition: opacity 0.1s linear;
|
}
|
||||||
-o-transition: opacity 0.1s linear;
|
|
||||||
-moz-transition: opacity 0.1s linear;
|
.dg:not(.ac) .main {
|
||||||
transition: opacity 0.1s linear; }
|
/** Exclude mains in ac so that we don't hide close button */
|
||||||
.dg.main.taller-than-window {
|
overflow: hidden;
|
||||||
overflow-y: auto; }
|
}
|
||||||
.dg.main.taller-than-window .close-button {
|
|
||||||
opacity: 1;
|
.dg.main {
|
||||||
/* TODO, these are style notes */
|
-webkit-transition: opacity 0.1s linear;
|
||||||
margin-top: -1px;
|
-o-transition: opacity 0.1s linear;
|
||||||
border-top: 1px solid #2c2c2c; }
|
-moz-transition: opacity 0.1s linear;
|
||||||
.dg.main ul.closed .close-button {
|
transition: opacity 0.1s linear;
|
||||||
opacity: 1 !important; }
|
}
|
||||||
.dg.main:hover .close-button,
|
|
||||||
.dg.main .close-button.drag {
|
.dg.main.taller-than-window {
|
||||||
opacity: 1; }
|
overflow-y: auto;
|
||||||
.dg.main .close-button {
|
}
|
||||||
/*opacity: 0;*/
|
|
||||||
-webkit-transition: opacity 0.1s linear;
|
.dg.main.taller-than-window .close-button {
|
||||||
-o-transition: opacity 0.1s linear;
|
opacity: 1;
|
||||||
-moz-transition: opacity 0.1s linear;
|
/* TODO, these are style notes */
|
||||||
transition: opacity 0.1s linear;
|
margin-top: -1px;
|
||||||
border: 0;
|
border-top: 1px solid #2c2c2c;
|
||||||
position: absolute;
|
}
|
||||||
line-height: 19px;
|
|
||||||
height: 20px;
|
.dg.main ul.closed .close-button {
|
||||||
/* TODO, these are style notes */
|
opacity: 1 !important;
|
||||||
cursor: pointer;
|
}
|
||||||
text-align: center;
|
|
||||||
background-color: #000; }
|
.dg.main:hover .close-button,
|
||||||
.dg.main .close-button:hover {
|
.dg.main .close-button.drag {
|
||||||
background-color: #111; }
|
opacity: 1;
|
||||||
.dg.a {
|
}
|
||||||
float: right;
|
|
||||||
margin-right: 15px;
|
.dg.main .close-button {
|
||||||
overflow-x: hidden; }
|
/*opacity: 0;*/
|
||||||
.dg.a.has-save > ul {
|
-webkit-transition: opacity 0.1s linear;
|
||||||
margin-top: 27px; }
|
-o-transition: opacity 0.1s linear;
|
||||||
.dg.a.has-save > ul.closed {
|
-moz-transition: opacity 0.1s linear;
|
||||||
margin-top: 0; }
|
transition: opacity 0.1s linear;
|
||||||
.dg.a .save-row {
|
border: 0;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 0;
|
line-height: 19px;
|
||||||
z-index: 1002; }
|
height: 20px;
|
||||||
.dg li {
|
/* TODO, these are style notes */
|
||||||
-webkit-transition: height 0.1s ease-out;
|
cursor: pointer;
|
||||||
-o-transition: height 0.1s ease-out;
|
text-align: center;
|
||||||
-moz-transition: height 0.1s ease-out;
|
background-color: #000;
|
||||||
transition: height 0.1s ease-out; }
|
}
|
||||||
.dg li:not(.folder) {
|
|
||||||
cursor: auto;
|
.dg.main .close-button:hover {
|
||||||
height: 27px;
|
background-color: #111;
|
||||||
line-height: 27px;
|
}
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 4px 0 5px; }
|
.dg.a {
|
||||||
.dg li.folder {
|
float: right;
|
||||||
padding: 0;
|
margin-right: 15px;
|
||||||
border-left: 4px solid rgba(0, 0, 0, 0); }
|
overflow-x: hidden;
|
||||||
.dg li.title {
|
}
|
||||||
cursor: pointer;
|
|
||||||
margin-left: -4px; }
|
.dg.a.has-save> ul {
|
||||||
.dg .closed li:not(.title),
|
margin-top: 27px;
|
||||||
.dg .closed ul li,
|
}
|
||||||
.dg .closed ul li > * {
|
|
||||||
height: 0;
|
.dg.a.has-save> ul.closed {
|
||||||
overflow: hidden;
|
margin-top: 0;
|
||||||
border: 0; }
|
}
|
||||||
.dg .cr {
|
|
||||||
clear: both;
|
.dg.a .save-row {
|
||||||
padding-left: 3px;
|
position: fixed;
|
||||||
height: 27px; }
|
top: 0;
|
||||||
.dg .property-name {
|
z-index: 1002;
|
||||||
cursor: default;
|
}
|
||||||
float: left;
|
|
||||||
clear: left;
|
.dg li {
|
||||||
width: 40%;
|
-webkit-transition: height 0.1s ease-out;
|
||||||
overflow: hidden;
|
-o-transition: height 0.1s ease-out;
|
||||||
text-overflow: ellipsis; }
|
-moz-transition: height 0.1s ease-out;
|
||||||
.dg .c {
|
transition: height 0.1s ease-out;
|
||||||
float: left;
|
}
|
||||||
width: 60%; }
|
|
||||||
.dg .c input[type=text] {
|
.dg li:not(.folder) {
|
||||||
border: 0;
|
cursor: auto;
|
||||||
margin-top: 4px;
|
height: 27px;
|
||||||
padding: 3px;
|
line-height: 27px;
|
||||||
width: 100%;
|
overflow: hidden;
|
||||||
float: right; }
|
padding: 0 4px 0 5px;
|
||||||
.dg .has-slider input[type=text] {
|
}
|
||||||
width: 30%;
|
|
||||||
/*display: none;*/
|
.dg li.folder {
|
||||||
margin-left: 0; }
|
padding: 0;
|
||||||
.dg .slider {
|
border-left: 4px solid rgba(0, 0, 0, 0);
|
||||||
float: left;
|
}
|
||||||
width: 66%;
|
|
||||||
margin-left: -5px;
|
.dg li.title {
|
||||||
margin-right: 0;
|
cursor: pointer;
|
||||||
height: 19px;
|
margin-left: -4px;
|
||||||
margin-top: 4px; }
|
}
|
||||||
.dg .slider-fg {
|
|
||||||
height: 100%; }
|
.dg .closed li:not(.title),
|
||||||
.dg .c input[type=checkbox] {
|
.dg .closed ul li,
|
||||||
margin-top: 9px; }
|
.dg .closed ul li> * {
|
||||||
.dg .c select {
|
height: 0;
|
||||||
margin-top: 5px; }
|
overflow: hidden;
|
||||||
.dg .cr.function,
|
border: 0;
|
||||||
.dg .cr.function .property-name,
|
}
|
||||||
.dg .cr.function *,
|
|
||||||
.dg .cr.boolean,
|
.dg .cr {
|
||||||
.dg .cr.boolean * {
|
clear: both;
|
||||||
cursor: pointer; }
|
padding-left: 3px;
|
||||||
.dg .selector {
|
height: 27px;
|
||||||
display: none;
|
}
|
||||||
position: absolute;
|
|
||||||
margin-left: -9px;
|
.dg .property-name {
|
||||||
margin-top: 23px;
|
cursor: default;
|
||||||
z-index: 10; }
|
float: left;
|
||||||
.dg .c:hover .selector,
|
clear: left;
|
||||||
.dg .selector.drag {
|
width: 40%;
|
||||||
display: block; }
|
overflow: hidden;
|
||||||
.dg li.save-row {
|
text-overflow: ellipsis;
|
||||||
padding: 0; }
|
}
|
||||||
.dg li.save-row .button {
|
|
||||||
display: inline-block;
|
.dg .c {
|
||||||
padding: 0px 6px; }
|
float: left;
|
||||||
.dg.dialogue {
|
width: 60%;
|
||||||
background-color: #222;
|
}
|
||||||
width: 460px;
|
|
||||||
padding: 15px;
|
.dg .c input[type=text] {
|
||||||
font-size: 13px;
|
border: 0;
|
||||||
line-height: 15px; }
|
margin-top: 4px;
|
||||||
|
padding: 3px;
|
||||||
|
width: 100%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .has-slider input[type=text] {
|
||||||
|
width: 30%;
|
||||||
|
/*display: none;*/
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .slider {
|
||||||
|
float: left;
|
||||||
|
width: 66%;
|
||||||
|
margin-left: -5px;
|
||||||
|
margin-right: 0;
|
||||||
|
height: 19px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .slider-fg {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c input[type=checkbox] {
|
||||||
|
margin-top: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c select {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .cr.function,
|
||||||
|
.dg .cr.function .property-name,
|
||||||
|
.dg .cr.function *,
|
||||||
|
.dg .cr.boolean,
|
||||||
|
.dg .cr.boolean * {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .selector {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -9px;
|
||||||
|
margin-top: 23px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c:hover .selector,
|
||||||
|
.dg .selector.drag {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg li.save-row {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg li.save-row .button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg.dialogue {
|
||||||
|
background-color: #222;
|
||||||
|
width: 460px;
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
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,98 +255,160 @@
|
|||||||
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 {
|
||||||
width: 5px;
|
/** Scrollbar */
|
||||||
background: #1a1a1a; }
|
}
|
||||||
.dg.main::-webkit-scrollbar-corner {
|
|
||||||
height: 0;
|
.dg.main::-webkit-scrollbar {
|
||||||
display: none; }
|
width: 5px;
|
||||||
.dg.main::-webkit-scrollbar-thumb {
|
background: #1a1a1a;
|
||||||
border-radius: 5px;
|
}
|
||||||
background: #676767; }
|
|
||||||
.dg li:not(.folder) {
|
.dg.main::-webkit-scrollbar-corner {
|
||||||
background: #1a1a1a;
|
height: 0;
|
||||||
border-bottom: 1px solid #2c2c2c; }
|
display: none;
|
||||||
.dg li.save-row {
|
}
|
||||||
line-height: 25px;
|
|
||||||
background: #dad5cb;
|
.dg.main::-webkit-scrollbar-thumb {
|
||||||
border: 0; }
|
border-radius: 5px;
|
||||||
.dg li.save-row select {
|
background: #676767;
|
||||||
margin-left: 5px;
|
}
|
||||||
width: 108px; }
|
|
||||||
.dg li.save-row .button {
|
.dg li:not(.folder) {
|
||||||
margin-left: 5px;
|
background: #1a1a1a;
|
||||||
margin-top: 1px;
|
border-bottom: 1px solid #2c2c2c;
|
||||||
border-radius: 2px;
|
}
|
||||||
font-size: 9px;
|
|
||||||
line-height: 7px;
|
.dg li.save-row {
|
||||||
padding: 4px 4px 5px 4px;
|
line-height: 25px;
|
||||||
background: #c5bdad;
|
background: #dad5cb;
|
||||||
color: #fff;
|
border: 0;
|
||||||
text-shadow: 0 1px 0 #b0a58f;
|
}
|
||||||
box-shadow: 0 -1px 0 #b0a58f;
|
|
||||||
cursor: pointer; }
|
.dg li.save-row select {
|
||||||
.dg li.save-row .button.gears {
|
margin-left: 5px;
|
||||||
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;
|
width: 108px;
|
||||||
height: 7px;
|
}
|
||||||
width: 8px; }
|
|
||||||
.dg li.save-row .button:hover {
|
.dg li.save-row .button {
|
||||||
background-color: #bab19e;
|
margin-left: 5px;
|
||||||
box-shadow: 0 -1px 0 #b0a58f; }
|
margin-top: 1px;
|
||||||
.dg li.folder {
|
border-radius: 2px;
|
||||||
border-bottom: 0; }
|
font-size: 9px;
|
||||||
.dg li.title {
|
line-height: 7px;
|
||||||
padding-left: 16px;
|
padding: 4px 4px 5px 4px;
|
||||||
background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
|
background: #c5bdad;
|
||||||
cursor: pointer;
|
color: #fff;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
|
text-shadow: 0 1px 0 #b0a58f;
|
||||||
.dg .closed li.title {
|
box-shadow: 0 -1px 0 #b0a58f;
|
||||||
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }
|
cursor: pointer;
|
||||||
.dg .cr.boolean {
|
}
|
||||||
border-left: 3px solid #806787; }
|
|
||||||
.dg .cr.function {
|
.dg li.save-row .button.gears {
|
||||||
border-left: 3px solid #e61d5f; }
|
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;
|
||||||
.dg .cr.number {
|
height: 7px;
|
||||||
border-left: 3px solid #2fa1d6; }
|
width: 8px;
|
||||||
.dg .cr.number input[type=text] {
|
}
|
||||||
color: #2fa1d6; }
|
|
||||||
.dg .cr.string {
|
.dg li.save-row .button:hover {
|
||||||
border-left: 3px solid #1ed36f; }
|
background-color: #bab19e;
|
||||||
.dg .cr.string input[type=text] {
|
box-shadow: 0 -1px 0 #b0a58f;
|
||||||
color: #1ed36f; }
|
}
|
||||||
.dg .cr.function:hover, .dg .cr.boolean:hover {
|
|
||||||
background: #111; }
|
.dg li.folder {
|
||||||
.dg .c input[type=text] {
|
border-bottom: 0;
|
||||||
background: #303030;
|
}
|
||||||
outline: none; }
|
|
||||||
.dg .c input[type=text]:hover {
|
.dg li.title {
|
||||||
background: #3c3c3c; }
|
padding-left: 16px;
|
||||||
.dg .c input[type=text]:focus {
|
background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
|
||||||
background: #494949;
|
cursor: pointer;
|
||||||
color: #fff; }
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
.dg .c .slider {
|
}
|
||||||
background: #303030;
|
|
||||||
cursor: ew-resize; }
|
.dg .closed li.title {
|
||||||
.dg .c .slider-fg {
|
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==);
|
||||||
background: #2fa1d6; }
|
}
|
||||||
.dg .c .slider:hover {
|
|
||||||
background: #3c3c3c; }
|
.dg .cr.boolean {
|
||||||
.dg .c .slider:hover .slider-fg {
|
border-left: 3px solid #806787;
|
||||||
background: #44abda; }
|
}
|
||||||
|
|
||||||
|
.dg .cr.function {
|
||||||
|
border-left: 3px solid #e61d5f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .cr.number {
|
||||||
|
border-left: 3px solid #2fa1d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c input[type=text]:hover {
|
||||||
|
background: #3c3c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c input[type=text]:focus {
|
||||||
|
background: #494949;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c .slider {
|
||||||
|
background: #303030;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c .slider-fg {
|
||||||
|
background: #2fa1d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c .slider:hover {
|
||||||
|
background: #3c3c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dg .c .slider:hover .slider-fg {
|
||||||
|
background: #44abda;
|
||||||
|
}
|
||||||
|
|||||||
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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]';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -12,22 +12,22 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
define([],
|
define([],
|
||||||
function() {
|
function () {
|
||||||
return {
|
return {
|
||||||
load: function (url, doc) {
|
load: function (url, doc) {
|
||||||
doc = doc || document;
|
doc = doc || document;
|
||||||
var link = doc.createElement('link');
|
var link = doc.createElement('link');
|
||||||
link.type = 'text/css';
|
link.type = 'text/css';
|
||||||
link.rel = 'stylesheet';
|
link.rel = 'stylesheet';
|
||||||
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';
|
||||||
injected.innerHTML = css;
|
injected.innerHTML = css;
|
||||||
doc.getElementsByTagName('head')[0].appendChild(injected);
|
doc.getElementsByTagName('head')[0].appendChild(injected);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
|||||||
@ -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
|
||||||
@ -20,13 +19,13 @@ define([
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
return window.requestAnimationFrame ||
|
return window.requestAnimationFrame ||
|
||||||
window.webkitRequestAnimationFrame ||
|
window.webkitRequestAnimationFrame ||
|
||||||
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);
|
||||||
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user