mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
deleting the project
This commit is contained in:
George Michael Brower
parent
a3ae8c6627
commit
9c3a7d688a
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
.DS_Store
|
||||
.sass-cache
|
||||
|
||||
@ -1,755 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
/** @namespace */
|
||||
var dat = dat || {};
|
||||
|
||||
/** @namespace */
|
||||
dat.color = dat.color || {};
|
||||
|
||||
/** @namespace */
|
||||
dat.utils = dat.utils || {};
|
||||
|
||||
dat.utils.common = (function () {
|
||||
|
||||
var ARR_EACH = Array.prototype.forEach;
|
||||
var ARR_SLICE = Array.prototype.slice;
|
||||
|
||||
/**
|
||||
* Band-aid methods for things that should be a lot easier in JavaScript.
|
||||
* Implementation and structure inspired by underscore.js
|
||||
* http://documentcloud.github.com/underscore/
|
||||
*/
|
||||
|
||||
return {
|
||||
|
||||
BREAK: {},
|
||||
|
||||
extend: function(target) {
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
|
||||
|
||||
for (var key in obj)
|
||||
if (!this.isUndefined(obj[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
}, this);
|
||||
|
||||
return target;
|
||||
|
||||
},
|
||||
|
||||
defaults: function(target) {
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
|
||||
|
||||
for (var key in obj)
|
||||
if (this.isUndefined(target[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
}, this);
|
||||
|
||||
return target;
|
||||
|
||||
},
|
||||
|
||||
compose: function() {
|
||||
var toCall = ARR_SLICE.call(arguments);
|
||||
return function() {
|
||||
var args = ARR_SLICE.call(arguments);
|
||||
for (var i = toCall.length -1; i >= 0; i--) {
|
||||
args = [toCall[i].apply(this, args)];
|
||||
}
|
||||
return args[0];
|
||||
}
|
||||
},
|
||||
|
||||
each: function(obj, itr, scope) {
|
||||
|
||||
|
||||
if (ARR_EACH && obj.forEach === ARR_EACH) {
|
||||
|
||||
obj.forEach(itr, scope);
|
||||
|
||||
} else if (obj.length === obj.length + 0) { // Is number but not NaN
|
||||
|
||||
for (var key = 0, l = obj.length; key < l; key++)
|
||||
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
} else {
|
||||
|
||||
for (var key in obj)
|
||||
if (itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
defer: function(fnc) {
|
||||
setTimeout(fnc, 0);
|
||||
},
|
||||
|
||||
toArray: function(obj) {
|
||||
if (obj.toArray) return obj.toArray();
|
||||
return ARR_SLICE.call(obj);
|
||||
},
|
||||
|
||||
isUndefined: function(obj) {
|
||||
return obj === undefined;
|
||||
},
|
||||
|
||||
isNull: function(obj) {
|
||||
return obj === null;
|
||||
},
|
||||
|
||||
isNaN: function(obj) {
|
||||
return obj !== obj;
|
||||
},
|
||||
|
||||
isArray: Array.isArray || function(obj) {
|
||||
return obj.constructor === Array;
|
||||
},
|
||||
|
||||
isObject: function(obj) {
|
||||
return obj === Object(obj);
|
||||
},
|
||||
|
||||
isNumber: function(obj) {
|
||||
return obj === obj+0;
|
||||
},
|
||||
|
||||
isString: function(obj) {
|
||||
return obj === obj+'';
|
||||
},
|
||||
|
||||
isBoolean: function(obj) {
|
||||
return obj === false || obj === true;
|
||||
},
|
||||
|
||||
isFunction: function(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Function]';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
|
||||
dat.color.toString = (function (common) {
|
||||
|
||||
return function(color) {
|
||||
|
||||
if (color.a == 1 || common.isUndefined(color.a)) {
|
||||
|
||||
var s = color.hex.toString(16);
|
||||
while (s.length < 6) {
|
||||
s = '0' + s;
|
||||
}
|
||||
|
||||
return '#' + s;
|
||||
|
||||
} else {
|
||||
|
||||
return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})(dat.utils.common);
|
||||
|
||||
|
||||
dat.Color = dat.color.Color = (function (interpret, math, toString, common) {
|
||||
|
||||
var Color = function() {
|
||||
|
||||
this.__state = interpret.apply(this, arguments);
|
||||
|
||||
if (this.__state === false) {
|
||||
throw 'Failed to interpret color arguments';
|
||||
}
|
||||
|
||||
this.__state.a = this.__state.a || 1;
|
||||
|
||||
|
||||
};
|
||||
|
||||
Color.COMPONENTS = ['r','g','b','h','s','v','hex','a'];
|
||||
|
||||
common.extend(Color.prototype, {
|
||||
|
||||
toString: function() {
|
||||
return toString(this);
|
||||
},
|
||||
|
||||
toOriginal: function() {
|
||||
return this.__state.conversion.write(this);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
defineRGBComponent(Color.prototype, 'r', 2);
|
||||
defineRGBComponent(Color.prototype, 'g', 1);
|
||||
defineRGBComponent(Color.prototype, 'b', 0);
|
||||
|
||||
defineHSVComponent(Color.prototype, 'h');
|
||||
defineHSVComponent(Color.prototype, 's');
|
||||
defineHSVComponent(Color.prototype, 'v');
|
||||
|
||||
Object.defineProperty(Color.prototype, 'a', {
|
||||
|
||||
get: function() {
|
||||
return this.__state.a;
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
this.__state.a = v;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Object.defineProperty(Color.prototype, 'hex', {
|
||||
|
||||
get: function() {
|
||||
|
||||
if (!this.__state.space !== 'HEX') {
|
||||
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
|
||||
}
|
||||
|
||||
return this.__state.hex;
|
||||
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
|
||||
this.__state.space = 'HEX';
|
||||
this.__state.hex = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function defineRGBComponent(target, component, componentHexIndex) {
|
||||
|
||||
Object.defineProperty(target, component, {
|
||||
|
||||
get: function() {
|
||||
|
||||
if (this.__state.space === 'RGB') {
|
||||
return this.__state[component];
|
||||
}
|
||||
|
||||
recalculateRGB(this, component, componentHexIndex);
|
||||
|
||||
return this.__state[component];
|
||||
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
|
||||
if (this.__state.space !== 'RGB') {
|
||||
recalculateRGB(this, component, componentHexIndex);
|
||||
this.__state.space = 'RGB';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function defineHSVComponent(target, component) {
|
||||
|
||||
Object.defineProperty(target, component, {
|
||||
|
||||
get: function() {
|
||||
|
||||
if (this.__state.space === 'HSV')
|
||||
return this.__state[component];
|
||||
|
||||
recalculateHSV(this);
|
||||
|
||||
return this.__state[component];
|
||||
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
|
||||
if (this.__state.space !== 'HSV') {
|
||||
recalculateHSV(this);
|
||||
this.__state.space = 'HSV';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function recalculateRGB(color, component, componentHexIndex) {
|
||||
|
||||
if (color.__state.space === 'HEX') {
|
||||
|
||||
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
|
||||
|
||||
} else if (color.__state.space === 'HSV') {
|
||||
|
||||
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
|
||||
|
||||
} else {
|
||||
|
||||
throw 'Corrupted color state';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function recalculateHSV(color) {
|
||||
|
||||
var result = math.rgb_to_hsv(color.r, color.g, color.b);
|
||||
|
||||
common.extend(color.__state,
|
||||
{
|
||||
s: result.s,
|
||||
v: result.v
|
||||
}
|
||||
);
|
||||
|
||||
if (!common.isNaN(result.h)) {
|
||||
color.__state.h = result.h;
|
||||
} else if (common.isUndefined(color.__state.h)) {
|
||||
color.__state.h = 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return Color;
|
||||
|
||||
})(dat.color.interpret = (function (toString, common) {
|
||||
|
||||
var result, toReturn;
|
||||
|
||||
var interpret = function() {
|
||||
|
||||
toReturn = false;
|
||||
|
||||
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
|
||||
|
||||
common.each(INTERPRETATIONS, function(family) {
|
||||
|
||||
if (family.litmus(original)) {
|
||||
|
||||
common.each(family.conversions, function(conversion, conversionName) {
|
||||
|
||||
result = conversion.read(original);
|
||||
|
||||
if (toReturn === false && result !== false) {
|
||||
toReturn = result;
|
||||
result.conversionName = conversionName;
|
||||
result.conversion = conversion;
|
||||
return common.BREAK;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return common.BREAK;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return toReturn;
|
||||
|
||||
};
|
||||
|
||||
var INTERPRETATIONS = [
|
||||
|
||||
// Strings
|
||||
{
|
||||
|
||||
litmus: common.isString,
|
||||
|
||||
conversions: {
|
||||
|
||||
THREE_CHAR_HEX: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: parseInt(
|
||||
'0x' +
|
||||
test[1].toString() + test[1].toString() +
|
||||
test[2].toString() + test[2].toString() +
|
||||
test[3].toString() + test[3].toString())
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
SIX_CHAR_HEX: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^#([A-F0-9]{6})$/i);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: parseInt('0x' + test[1].toString())
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
CSS_RGB: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: parseFloat(test[1]),
|
||||
g: parseFloat(test[2]),
|
||||
b: parseFloat(test[3])
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
CSS_RGBA: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: parseFloat(test[1]),
|
||||
g: parseFloat(test[2]),
|
||||
b: parseFloat(test[3]),
|
||||
a: parseFloat(test[4])
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Numbers
|
||||
{
|
||||
|
||||
litmus: common.isNumber,
|
||||
|
||||
conversions: {
|
||||
|
||||
HEX: {
|
||||
read: function(original) {
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: original,
|
||||
conversionName: 'HEX'
|
||||
}
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return color.hex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Arrays
|
||||
{
|
||||
|
||||
litmus: common.isArray,
|
||||
|
||||
conversions: {
|
||||
|
||||
RGB_ARRAY: {
|
||||
read: function(original) {
|
||||
if (original.length != 3) return false;
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original[0],
|
||||
g: original[1],
|
||||
b: original[2]
|
||||
};
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return [color.r, color.g, color.b];
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
RGBA_ARRAY: {
|
||||
read: function(original) {
|
||||
if (original.length != 4) return false;
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original[0],
|
||||
g: original[1],
|
||||
b: original[2],
|
||||
a: original[3]
|
||||
};
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return [color.r, color.g, color.b, color.a];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Objects
|
||||
{
|
||||
|
||||
litmus: common.isObject,
|
||||
|
||||
conversions: {
|
||||
|
||||
RGBA_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.r) &&
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b) &&
|
||||
common.isNumber(original.a)) {
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original.r,
|
||||
g: original.g,
|
||||
b: original.b,
|
||||
a: original.a
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
r: color.r,
|
||||
g: color.g,
|
||||
b: color.b,
|
||||
a: color.a
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
RGB_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.r) &&
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b)) {
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original.r,
|
||||
g: original.g,
|
||||
b: original.b
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
r: color.r,
|
||||
g: color.g,
|
||||
b: color.b
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
HSVA_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.h) &&
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v) &&
|
||||
common.isNumber(original.a)) {
|
||||
return {
|
||||
space: 'HSV',
|
||||
h: original.h,
|
||||
s: original.s,
|
||||
v: original.v,
|
||||
a: original.a
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
h: color.h,
|
||||
s: color.s,
|
||||
v: color.v,
|
||||
a: color.a
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
HSV_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.h) &&
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v)) {
|
||||
return {
|
||||
space: 'HSV',
|
||||
h: original.h,
|
||||
s: original.s,
|
||||
v: original.v
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
h: color.h,
|
||||
s: color.s,
|
||||
v: color.v
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
];
|
||||
|
||||
return interpret;
|
||||
|
||||
|
||||
})(dat.color.toString,
|
||||
dat.utils.common),
|
||||
dat.color.math = (function () {
|
||||
|
||||
var tmpComponent;
|
||||
|
||||
return {
|
||||
|
||||
hsv_to_rgb: function(h, s, v) {
|
||||
|
||||
var hi = Math.floor(h / 60) % 6;
|
||||
|
||||
var f = h / 60 - Math.floor(h / 60);
|
||||
var p = v * (1.0 - s);
|
||||
var q = v * (1.0 - (f * s));
|
||||
var t = v * (1.0 - ((1.0 - f) * s));
|
||||
var c = [
|
||||
[v, t, p],
|
||||
[q, v, p],
|
||||
[p, v, t],
|
||||
[p, q, v],
|
||||
[t, p, v],
|
||||
[v, p, q]
|
||||
][hi];
|
||||
|
||||
return {
|
||||
r: c[0] * 255,
|
||||
g: c[1] * 255,
|
||||
b: c[2] * 255
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
rgb_to_hsv: function(r, g, b) {
|
||||
|
||||
var min = Math.min(r, g, b),
|
||||
max = Math.max(r, g, b),
|
||||
delta = max - min,
|
||||
h, s;
|
||||
|
||||
if (max != 0) {
|
||||
s = delta / max;
|
||||
} else {
|
||||
return {
|
||||
h: NaN,
|
||||
s: 0,
|
||||
v: 0
|
||||
};
|
||||
}
|
||||
|
||||
if (r == max) {
|
||||
h = (g - b) / delta;
|
||||
} else if (g == max) {
|
||||
h = 2 + (b - r) / delta;
|
||||
} else {
|
||||
h = 4 + (r - g) / delta;
|
||||
}
|
||||
h /= 6;
|
||||
if (h < 0) {
|
||||
h += 1;
|
||||
}
|
||||
|
||||
return {
|
||||
h: h * 360,
|
||||
s: s,
|
||||
v: max / 255
|
||||
};
|
||||
},
|
||||
|
||||
rgb_to_hex: function(r, g, b) {
|
||||
var hex = this.hex_with_component(0, 2, r);
|
||||
hex = this.hex_with_component(hex, 1, g);
|
||||
hex = this.hex_with_component(hex, 0, b);
|
||||
return hex;
|
||||
},
|
||||
|
||||
component_from_hex: function(hex, componentIndex) {
|
||||
return (hex >> (componentIndex * 8)) & 0xFF;
|
||||
},
|
||||
|
||||
hex_with_component: function(hex, componentIndex, value) {
|
||||
return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})(),
|
||||
dat.color.toString,
|
||||
dat.utils.common);
|
||||
26
build/dat.color.min.js
vendored
26
build/dat.color.min.js
vendored
@ -1,26 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
var dat=dat||{};dat.color=dat.color||{};dat.utils=dat.utils||{};
|
||||
dat.utils.common=function(){var f=Array.prototype.forEach,b=Array.prototype.slice;return{BREAK:{},extend:function(c){this.each(b.call(arguments,1),function(b){for(var d in b)this.isUndefined(b[d])||(c[d]=b[d])},this);return c},defaults:function(c){this.each(b.call(arguments,1),function(b){for(var d in b)this.isUndefined(c[d])&&(c[d]=b[d])},this);return c},compose:function(){var c=b.call(arguments);return function(){for(var e=b.call(arguments),d=c.length-1;d>=0;d--)e=[c[d].apply(this,e)];return e[0]}},
|
||||
each:function(b,e,d){if(f&&b.forEach===f)b.forEach(e,d);else if(b.length===b.length+0)for(var a=0,h=b.length;a<h;a++){if(a in b&&e.call(d,b[a],a)===this.BREAK)break}else for(a in b)if(e.call(d,b[a],a)===this.BREAK)break},defer:function(b){setTimeout(b,0)},toArray:function(c){return c.toArray?c.toArray():b.call(c)},isUndefined:function(b){return b===void 0},isNull:function(b){return b===null},isNaN:function(b){return b!==b},isArray:Array.isArray||function(b){return b.constructor===Array},isObject:function(b){return b===
|
||||
Object(b)},isNumber:function(b){return b===b+0},isString:function(b){return b===b+""},isBoolean:function(b){return b===false||b===true},isFunction:function(b){return Object.prototype.toString.call(b)==="[object Function]"}}}();dat.color.toString=function(f){return function(b){if(b.a==1||f.isUndefined(b.a)){for(b=b.hex.toString(16);b.length<6;)b="0"+b;return"#"+b}else return"rgba("+Math.round(b.r)+","+Math.round(b.g)+","+Math.round(b.b)+","+b.a+")"}}(dat.utils.common);
|
||||
dat.Color=dat.color.Color=function(f,b,c,e){function d(a,b,c){Object.defineProperty(a,b,{get:function(){if(this.__state.space==="RGB")return this.__state[b];h(this,b,c);return this.__state[b]},set:function(a){if(this.__state.space!=="RGB")h(this,b,c),this.__state.space="RGB";this.__state[b]=a}})}function a(a,b){Object.defineProperty(a,b,{get:function(){if(this.__state.space==="HSV")return this.__state[b];i(this);return this.__state[b]},set:function(a){if(this.__state.space!=="HSV")i(this),this.__state.space=
|
||||
"HSV";this.__state[b]=a}})}function h(a,c,d){if(a.__state.space==="HEX")a.__state[c]=b.component_from_hex(a.__state.hex,d);else if(a.__state.space==="HSV")e.extend(a.__state,b.hsv_to_rgb(a.__state.h,a.__state.s,a.__state.v));else throw"Corrupted color state";}function i(a){var c=b.rgb_to_hsv(a.r,a.g,a.b);e.extend(a.__state,{s:c.s,v:c.v});if(e.isNaN(c.h)){if(e.isUndefined(a.__state.h))a.__state.h=0}else a.__state.h=c.h}var g=function(){this.__state=f.apply(this,arguments);if(this.__state===false)throw"Failed to interpret color arguments";
|
||||
this.__state.a=this.__state.a||1};g.COMPONENTS="r,g,b,h,s,v,hex,a".split(",");e.extend(g.prototype,{toString:function(){return c(this)},toOriginal:function(){return this.__state.conversion.write(this)}});d(g.prototype,"r",2);d(g.prototype,"g",1);d(g.prototype,"b",0);a(g.prototype,"h");a(g.prototype,"s");a(g.prototype,"v");Object.defineProperty(g.prototype,"a",{get:function(){return this.__state.a},set:function(a){this.__state.a=a}});Object.defineProperty(g.prototype,"hex",{get:function(){if(!this.__state.space!==
|
||||
"HEX")this.__state.hex=b.rgb_to_hex(this.r,this.g,this.b);return this.__state.hex},set:function(a){this.__state.space="HEX";this.__state.hex=a}});return g}(dat.color.interpret=function(f,b){var c,e,d=[{litmus:b.isString,conversions:{THREE_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);return a===null?false:{space:"HEX",hex:parseInt("0x"+a[1].toString()+a[1].toString()+a[2].toString()+a[2].toString()+a[3].toString()+a[3].toString())}},write:f},SIX_CHAR_HEX:{read:function(a){a=
|
||||
a.match(/^#([A-F0-9]{6})$/i);return a===null?false:{space:"HEX",hex:parseInt("0x"+a[1].toString())}},write:f},CSS_RGB:{read:function(a){a=a.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);return a===null?false:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3])}},write:f},CSS_RGBA:{read:function(a){a=a.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);return a===null?false:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3]),a:parseFloat(a[4])}},write:f}}},
|
||||
{litmus:b.isNumber,conversions:{HEX:{read:function(a){return{space:"HEX",hex:a,conversionName:"HEX"}},write:function(a){return a.hex}}}},{litmus:b.isArray,conversions:{RGB_ARRAY:{read:function(a){return a.length!=3?false:{space:"RGB",r:a[0],g:a[1],b:a[2]}},write:function(a){return[a.r,a.g,a.b]}},RGBA_ARRAY:{read:function(a){return a.length!=4?false:{space:"RGB",r:a[0],g:a[1],b:a[2],a:a[3]}},write:function(a){return[a.r,a.g,a.b,a.a]}}}},{litmus:b.isObject,conversions:{RGBA_OBJ:{read:function(a){return b.isNumber(a.r)&&
|
||||
b.isNumber(a.g)&&b.isNumber(a.b)&&b.isNumber(a.a)?{space:"RGB",r:a.r,g:a.g,b:a.b,a:a.a}:false},write:function(a){return{r:a.r,g:a.g,b:a.b,a:a.a}}},RGB_OBJ:{read:function(a){return b.isNumber(a.r)&&b.isNumber(a.g)&&b.isNumber(a.b)?{space:"RGB",r:a.r,g:a.g,b:a.b}:false},write:function(a){return{r:a.r,g:a.g,b:a.b}}},HSVA_OBJ:{read:function(a){return b.isNumber(a.h)&&b.isNumber(a.s)&&b.isNumber(a.v)&&b.isNumber(a.a)?{space:"HSV",h:a.h,s:a.s,v:a.v,a:a.a}:false},write:function(a){return{h:a.h,s:a.s,v:a.v,
|
||||
a:a.a}}},HSV_OBJ:{read:function(a){return b.isNumber(a.h)&&b.isNumber(a.s)&&b.isNumber(a.v)?{space:"HSV",h:a.h,s:a.s,v:a.v}:false},write:function(a){return{h:a.h,s:a.s,v:a.v}}}}}];return function(){e=false;var a=arguments.length>1?b.toArray(arguments):arguments[0];b.each(d,function(d){if(d.litmus(a))return b.each(d.conversions,function(d,f){c=d.read(a);if(e===false&&c!==false)return e=c,c.conversionName=f,c.conversion=d,b.BREAK}),b.BREAK});return e}}(dat.color.toString,dat.utils.common),dat.color.math=
|
||||
function(){var f;return{hsv_to_rgb:function(b,c,e){var d=b/60-Math.floor(b/60),a=e*(1-c),f=e*(1-d*c),c=e*(1-(1-d)*c),b=[[e,c,a],[f,e,a],[a,e,c],[a,f,e],[c,a,e],[e,a,f]][Math.floor(b/60)%6];return{r:b[0]*255,g:b[1]*255,b:b[2]*255}},rgb_to_hsv:function(b,c,e){var d=Math.min(b,c,e),a=Math.max(b,c,e),d=a-d;if(a==0)return{h:NaN,s:0,v:0};b=b==a?(c-e)/d:c==a?2+(e-b)/d:4+(b-c)/d;b/=6;b<0&&(b+=1);return{h:b*360,s:d/a,v:a/255}},rgb_to_hex:function(b,c,e){b=this.hex_with_component(0,2,b);b=this.hex_with_component(b,
|
||||
1,c);return b=this.hex_with_component(b,0,e)},component_from_hex:function(b,c){return b>>c*8&255},hex_with_component:function(b,c,e){return e<<(f=c*8)|b&~(255<<f)}}}(),dat.color.toString,dat.utils.common);
|
||||
3627
build/dat.gui.js
3627
build/dat.gui.js
File diff suppressed because one or more lines are too long
93
build/dat.gui.min.js
vendored
93
build/dat.gui.min.js
vendored
File diff suppressed because one or more lines are too long
13
example.html
13
example.html
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="build/dat.gui.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var obj = { x: 5 };
|
||||
var gui = new dat.GUI();
|
||||
gui.add(obj, 'x', 0, 10);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
readme.wiki
89
readme.wiki
@ -1,89 +0,0 @@
|
||||
=dat.GUI=
|
||||
A lightweight graphical user interface for changing variables in JavaScript.
|
||||
|
||||
Get started with dat.GUI by reading the tutorial at [http://workshop.chromeexperiments.com/examples/gui].
|
||||
|
||||
----
|
||||
|
||||
==Packaged Builds==
|
||||
The easiest way to use dat.GUI in your code is by using the built source at {{{build/dat.gui.min.js}}}. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.
|
||||
|
||||
In your {{{head}}} tag, include the following code:
|
||||
{{{
|
||||
<script type="text/javascript" src="dat.gui.min.js"></script>
|
||||
}}}
|
||||
|
||||
----
|
||||
|
||||
==Using dat.GUI with require.js==
|
||||
Internally, dat.GUI uses [http://requirejs.org/ require.js] to handle dependency management. If you're making changes to the source and want to see the effects of your changes without building, use require js.
|
||||
|
||||
In your {{{head}}} tag, include the following code:
|
||||
{{{
|
||||
<script data-main="path/to/main" src="path/to/requirejs/require.js"></script>
|
||||
}}}
|
||||
|
||||
Then, in {{{path/to/main.js}}}:
|
||||
{{{
|
||||
require([
|
||||
'path/to/gui/module/GUI'
|
||||
], function(GUI) {
|
||||
|
||||
// No namespace necessary
|
||||
var gui = new GUI();
|
||||
|
||||
});
|
||||
}}}
|
||||
|
||||
----
|
||||
|
||||
==Directory Contents==
|
||||
* build: Concatenated source code.
|
||||
* src: Modular code in [http://requirejs.org/ require.js] format. Also includes css, [http://sass-lang.com/ scss], and html, some of which is included during build.
|
||||
* tests: [https://github.com/jquery/qunit QUnit] test suite.
|
||||
* utils: [http://nodejs.org/ node.js] utility scripts for compiling source.
|
||||
|
||||
----
|
||||
|
||||
==Building your own dat.GUI==
|
||||
|
||||
In the terminal, enter the following:
|
||||
|
||||
{{{
|
||||
$ cd utils
|
||||
$ node build_gui.js
|
||||
}}}
|
||||
|
||||
This will create a namespaced, unminified build of dat.GUI at {{{build/dat.gui.js}}}
|
||||
|
||||
_To export minified source using Closure Compiler, open {{{utils/build_gui.js}}} and set the {{{minify}}} parameter to {{{true}}}._
|
||||
|
||||
----
|
||||
|
||||
==Change log==
|
||||
|
||||
===0.5===
|
||||
* Moved to requirejs for dependency management.
|
||||
* Changed global namespace from *DAT* to *dat* (lowercase).
|
||||
* Added support for color controllers. See [http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers Color Controllers].
|
||||
* Added support for folders. See [http://workshop.chromeexperiments.com/examples/gui/#3--Folders Folders].
|
||||
* Added support for saving named presets. See [http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets Presets].
|
||||
* Removed `height` parameter from GUI constructor. Scrollbar automatically induced when window is too short.
|
||||
* `dat.GUI.autoPlace` parameter removed. Use `new dat.GUI( { autoPlace: false } )`. See [http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement Custom Placement].
|
||||
* `gui.autoListen` and `gui.listenAll()` removed. See [http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually Updating The Display Manually].
|
||||
* `dat.GUI.load` removed. See [http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values Saving Values].
|
||||
* Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
|
||||
|
||||
|
||||
===0.4===
|
||||
|
||||
* Migrated from GitHub to Google Code.
|
||||
|
||||
----
|
||||
|
||||
==Thanks==
|
||||
The following libraries and open-source projects were used in the development of dat.GUI.
|
||||
* [http://requirejs.org/ require.js]
|
||||
* [http://sass-lang.com/ Sass]
|
||||
* [http://nodejs.org/ node.js]
|
||||
* [https://github.com/jquery/qunit QUnit] / [http://jquery.com jquery]
|
||||
1323
src/DAT/GUI/GUI.js
1323
src/DAT/GUI/GUI.js
File diff suppressed because it is too large
Load Diff
@ -1,189 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/color/interpret',
|
||||
'dat/color/math',
|
||||
'dat/color/toString',
|
||||
'dat/utils/common'
|
||||
], function(interpret, math, toString, common) {
|
||||
|
||||
var Color = function() {
|
||||
|
||||
this.__state = interpret.apply(this, arguments);
|
||||
|
||||
if (this.__state === false) {
|
||||
throw 'Failed to interpret color arguments';
|
||||
}
|
||||
|
||||
this.__state.a = this.__state.a || 1;
|
||||
|
||||
|
||||
};
|
||||
|
||||
Color.COMPONENTS = ['r','g','b','h','s','v','hex','a'];
|
||||
|
||||
common.extend(Color.prototype, {
|
||||
|
||||
toString: function() {
|
||||
return toString(this);
|
||||
},
|
||||
|
||||
toOriginal: function() {
|
||||
return this.__state.conversion.write(this);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
defineRGBComponent(Color.prototype, 'r', 2);
|
||||
defineRGBComponent(Color.prototype, 'g', 1);
|
||||
defineRGBComponent(Color.prototype, 'b', 0);
|
||||
|
||||
defineHSVComponent(Color.prototype, 'h');
|
||||
defineHSVComponent(Color.prototype, 's');
|
||||
defineHSVComponent(Color.prototype, 'v');
|
||||
|
||||
Object.defineProperty(Color.prototype, 'a', {
|
||||
|
||||
get: function() {
|
||||
return this.__state.a;
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
this.__state.a = v;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Object.defineProperty(Color.prototype, 'hex', {
|
||||
|
||||
get: function() {
|
||||
|
||||
if (!this.__state.space !== 'HEX') {
|
||||
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
|
||||
}
|
||||
|
||||
return this.__state.hex;
|
||||
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
|
||||
this.__state.space = 'HEX';
|
||||
this.__state.hex = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function defineRGBComponent(target, component, componentHexIndex) {
|
||||
|
||||
Object.defineProperty(target, component, {
|
||||
|
||||
get: function() {
|
||||
|
||||
if (this.__state.space === 'RGB') {
|
||||
return this.__state[component];
|
||||
}
|
||||
|
||||
recalculateRGB(this, component, componentHexIndex);
|
||||
|
||||
return this.__state[component];
|
||||
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
|
||||
if (this.__state.space !== 'RGB') {
|
||||
recalculateRGB(this, component, componentHexIndex);
|
||||
this.__state.space = 'RGB';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function defineHSVComponent(target, component) {
|
||||
|
||||
Object.defineProperty(target, component, {
|
||||
|
||||
get: function() {
|
||||
|
||||
if (this.__state.space === 'HSV')
|
||||
return this.__state[component];
|
||||
|
||||
recalculateHSV(this);
|
||||
|
||||
return this.__state[component];
|
||||
|
||||
},
|
||||
|
||||
set: function(v) {
|
||||
|
||||
if (this.__state.space !== 'HSV') {
|
||||
recalculateHSV(this);
|
||||
this.__state.space = 'HSV';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function recalculateRGB(color, component, componentHexIndex) {
|
||||
|
||||
if (color.__state.space === 'HEX') {
|
||||
|
||||
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
|
||||
|
||||
} else if (color.__state.space === 'HSV') {
|
||||
|
||||
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
|
||||
|
||||
} else {
|
||||
|
||||
throw 'Corrupted color state';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function recalculateHSV(color) {
|
||||
|
||||
var result = math.rgb_to_hsv(color.r, color.g, color.b);
|
||||
|
||||
common.extend(color.__state,
|
||||
{
|
||||
s: result.s,
|
||||
v: result.v
|
||||
}
|
||||
);
|
||||
|
||||
if (!common.isNaN(result.h)) {
|
||||
color.__state.h = result.h;
|
||||
} else if (common.isUndefined(color.__state.h)) {
|
||||
color.__state.h = 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return Color;
|
||||
|
||||
});
|
||||
@ -1,340 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/color/toString',
|
||||
'dat/utils/common'
|
||||
], function(toString, common) {
|
||||
|
||||
var result, toReturn;
|
||||
|
||||
var interpret = function() {
|
||||
|
||||
toReturn = false;
|
||||
|
||||
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
|
||||
|
||||
common.each(INTERPRETATIONS, function(family) {
|
||||
|
||||
if (family.litmus(original)) {
|
||||
|
||||
common.each(family.conversions, function(conversion, conversionName) {
|
||||
|
||||
result = conversion.read(original);
|
||||
|
||||
if (toReturn === false && result !== false) {
|
||||
toReturn = result;
|
||||
result.conversionName = conversionName;
|
||||
result.conversion = conversion;
|
||||
return common.BREAK;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return common.BREAK;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return toReturn;
|
||||
|
||||
};
|
||||
|
||||
var INTERPRETATIONS = [
|
||||
|
||||
// Strings
|
||||
{
|
||||
|
||||
litmus: common.isString,
|
||||
|
||||
conversions: {
|
||||
|
||||
THREE_CHAR_HEX: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: parseInt(
|
||||
'0x' +
|
||||
test[1].toString() + test[1].toString() +
|
||||
test[2].toString() + test[2].toString() +
|
||||
test[3].toString() + test[3].toString())
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
SIX_CHAR_HEX: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^#([A-F0-9]{6})$/i);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: parseInt('0x' + test[1].toString())
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
CSS_RGB: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: parseFloat(test[1]),
|
||||
g: parseFloat(test[2]),
|
||||
b: parseFloat(test[3])
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
CSS_RGBA: {
|
||||
|
||||
read: function(original) {
|
||||
|
||||
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
|
||||
if (test === null) return false;
|
||||
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: parseFloat(test[1]),
|
||||
g: parseFloat(test[2]),
|
||||
b: parseFloat(test[3]),
|
||||
a: parseFloat(test[4])
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Numbers
|
||||
{
|
||||
|
||||
litmus: common.isNumber,
|
||||
|
||||
conversions: {
|
||||
|
||||
HEX: {
|
||||
read: function(original) {
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: original,
|
||||
conversionName: 'HEX'
|
||||
}
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return color.hex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Arrays
|
||||
{
|
||||
|
||||
litmus: common.isArray,
|
||||
|
||||
conversions: {
|
||||
|
||||
RGB_ARRAY: {
|
||||
read: function(original) {
|
||||
if (original.length != 3) return false;
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original[0],
|
||||
g: original[1],
|
||||
b: original[2]
|
||||
};
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return [color.r, color.g, color.b];
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
RGBA_ARRAY: {
|
||||
read: function(original) {
|
||||
if (original.length != 4) return false;
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original[0],
|
||||
g: original[1],
|
||||
b: original[2],
|
||||
a: original[3]
|
||||
};
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return [color.r, color.g, color.b, color.a];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Objects
|
||||
{
|
||||
|
||||
litmus: common.isObject,
|
||||
|
||||
conversions: {
|
||||
|
||||
RGBA_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.r) &&
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b) &&
|
||||
common.isNumber(original.a)) {
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original.r,
|
||||
g: original.g,
|
||||
b: original.b,
|
||||
a: original.a
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
r: color.r,
|
||||
g: color.g,
|
||||
b: color.b,
|
||||
a: color.a
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
RGB_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.r) &&
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b)) {
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original.r,
|
||||
g: original.g,
|
||||
b: original.b
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
r: color.r,
|
||||
g: color.g,
|
||||
b: color.b
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
HSVA_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.h) &&
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v) &&
|
||||
common.isNumber(original.a)) {
|
||||
return {
|
||||
space: 'HSV',
|
||||
h: original.h,
|
||||
s: original.s,
|
||||
v: original.v,
|
||||
a: original.a
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
h: color.h,
|
||||
s: color.s,
|
||||
v: color.v,
|
||||
a: color.a
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
HSV_OBJ: {
|
||||
read: function(original) {
|
||||
if (common.isNumber(original.h) &&
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v)) {
|
||||
return {
|
||||
space: 'HSV',
|
||||
h: original.h,
|
||||
s: original.s,
|
||||
v: original.v
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
return {
|
||||
h: color.h,
|
||||
s: color.s,
|
||||
v: color.v
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
];
|
||||
|
||||
return interpret;
|
||||
|
||||
|
||||
});
|
||||
@ -1,100 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
|
||||
], function() {
|
||||
|
||||
var tmpComponent;
|
||||
|
||||
return {
|
||||
|
||||
hsv_to_rgb: function(h, s, v) {
|
||||
|
||||
var hi = Math.floor(h / 60) % 6;
|
||||
|
||||
var f = h / 60 - Math.floor(h / 60);
|
||||
var p = v * (1.0 - s);
|
||||
var q = v * (1.0 - (f * s));
|
||||
var t = v * (1.0 - ((1.0 - f) * s));
|
||||
var c = [
|
||||
[v, t, p],
|
||||
[q, v, p],
|
||||
[p, v, t],
|
||||
[p, q, v],
|
||||
[t, p, v],
|
||||
[v, p, q]
|
||||
][hi];
|
||||
|
||||
return {
|
||||
r: c[0] * 255,
|
||||
g: c[1] * 255,
|
||||
b: c[2] * 255
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
rgb_to_hsv: function(r, g, b) {
|
||||
|
||||
var min = Math.min(r, g, b),
|
||||
max = Math.max(r, g, b),
|
||||
delta = max - min,
|
||||
h, s;
|
||||
|
||||
if (max != 0) {
|
||||
s = delta / max;
|
||||
} else {
|
||||
return {
|
||||
h: NaN,
|
||||
s: 0,
|
||||
v: 0
|
||||
};
|
||||
}
|
||||
|
||||
if (r == max) {
|
||||
h = (g - b) / delta;
|
||||
} else if (g == max) {
|
||||
h = 2 + (b - r) / delta;
|
||||
} else {
|
||||
h = 4 + (r - g) / delta;
|
||||
}
|
||||
h /= 6;
|
||||
if (h < 0) {
|
||||
h += 1;
|
||||
}
|
||||
|
||||
return {
|
||||
h: h * 360,
|
||||
s: s,
|
||||
v: max / 255
|
||||
};
|
||||
},
|
||||
|
||||
rgb_to_hex: function(r, g, b) {
|
||||
var hex = this.hex_with_component(0, 2, r);
|
||||
hex = this.hex_with_component(hex, 1, g);
|
||||
hex = this.hex_with_component(hex, 0, b);
|
||||
return hex;
|
||||
},
|
||||
|
||||
component_from_hex: function(hex, componentIndex) {
|
||||
return (hex >> (componentIndex * 8)) & 0xFF;
|
||||
},
|
||||
|
||||
hex_with_component: function(hex, componentIndex, value) {
|
||||
return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@ -1,37 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/utils/common'
|
||||
], function(common) {
|
||||
|
||||
return function(color) {
|
||||
|
||||
if (color.a == 1 || common.isUndefined(color.a)) {
|
||||
|
||||
var s = color.hex.toString(16);
|
||||
while (s.length < 6) {
|
||||
s = '0' + s;
|
||||
}
|
||||
|
||||
return '#' + s;
|
||||
|
||||
} else {
|
||||
|
||||
return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@ -1,96 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/Controller',
|
||||
'dat/dom/dom',
|
||||
'dat/utils/common'
|
||||
], function(Controller, dom, common) {
|
||||
|
||||
/**
|
||||
* @class Provides a checkbox input to alter the boolean property of an object.
|
||||
* @extends dat.controllers.Controller
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var BooleanController = function(object, property) {
|
||||
|
||||
BooleanController.superclass.call(this, object, property);
|
||||
|
||||
var _this = this;
|
||||
var _prev = this.getValue();
|
||||
|
||||
this.__checkbox = document.createElement('input');
|
||||
this.__checkbox.setAttribute('type', 'checkbox');
|
||||
|
||||
|
||||
dom.bind(this.__checkbox, 'change', onChange, false);
|
||||
|
||||
this.domElement.appendChild(this.__checkbox);
|
||||
|
||||
// Match original value
|
||||
this.updateDisplay();
|
||||
|
||||
function onChange() {
|
||||
var cur = !_this.getValue();
|
||||
if (cur !== _prev) {
|
||||
_this.setValue(cur);
|
||||
} else {
|
||||
_this.setValue(!cur);
|
||||
}
|
||||
_prev = cur;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
BooleanController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
BooleanController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
setValue: function(v) {
|
||||
var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
this.__prev = this.getValue();
|
||||
return toReturn;
|
||||
},
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
if (this.getValue() === true) {
|
||||
this.__checkbox.setAttribute('checked', 'checked');
|
||||
} else {
|
||||
this.__checkbox.removeAttribute('checked');
|
||||
}
|
||||
|
||||
return BooleanController.superclass.prototype.updateDisplay.call(this);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
return BooleanController;
|
||||
|
||||
});
|
||||
@ -1,324 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/Controller',
|
||||
'dat/dom/dom',
|
||||
'dat/color/Color',
|
||||
'dat/color/interpret',
|
||||
'dat/utils/common'
|
||||
], function(Controller, dom, Color, interpret, common) {
|
||||
|
||||
var ColorController = function(object, property) {
|
||||
|
||||
ColorController.superclass.call(this, object, property);
|
||||
|
||||
this.__color = new Color(this.getValue());
|
||||
this.__temp = new Color(0);
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
|
||||
dom.makeSelectable(this.domElement, false);
|
||||
|
||||
this.__selector = document.createElement('div');
|
||||
this.__selector.className = 'selector';
|
||||
|
||||
this.__saturation_field = document.createElement('div');
|
||||
this.__saturation_field.className = 'saturation-field';
|
||||
|
||||
this.__field_knob = document.createElement('div');
|
||||
this.__field_knob.className = 'field-knob';
|
||||
this.__field_knob_border = '2px solid ';
|
||||
|
||||
this.__hue_knob = document.createElement('div');
|
||||
this.__hue_knob.className = 'hue-knob';
|
||||
|
||||
this.__hue_field = document.createElement('div');
|
||||
this.__hue_field.className = 'hue-field';
|
||||
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.type = 'text';
|
||||
this.__input_textShadow = '0 1px 1px ';
|
||||
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
if (e.keyCode === 13) { // on enter
|
||||
onBlur.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
|
||||
dom.bind(this.__selector, 'mousedown', function(e) {
|
||||
|
||||
dom
|
||||
.addClass(this, 'drag')
|
||||
.bind(window, 'mouseup', function(e) {
|
||||
dom.removeClass(_this.__selector, 'drag');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
var value_field = document.createElement('div');
|
||||
|
||||
common.extend(this.__selector.style, {
|
||||
width: '122px',
|
||||
height: '102px',
|
||||
padding: '3px',
|
||||
backgroundColor: '#222',
|
||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
|
||||
});
|
||||
|
||||
common.extend(this.__field_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'),
|
||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
||||
borderRadius: '12px',
|
||||
zIndex: 1
|
||||
});
|
||||
|
||||
common.extend(this.__hue_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '15px',
|
||||
height: '2px',
|
||||
borderRight: '4px solid #fff',
|
||||
zIndex: 1
|
||||
});
|
||||
|
||||
common.extend(this.__saturation_field.style, {
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
border: '1px solid #555',
|
||||
marginRight: '3px',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'
|
||||
});
|
||||
|
||||
common.extend(value_field.style, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'none'
|
||||
});
|
||||
|
||||
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
|
||||
|
||||
common.extend(this.__hue_field.style, {
|
||||
width: '15px',
|
||||
height: '100px',
|
||||
display: 'inline-block',
|
||||
border: '1px solid #555',
|
||||
cursor: 'ns-resize'
|
||||
});
|
||||
|
||||
hueGradient(this.__hue_field);
|
||||
|
||||
common.extend(this.__input.style, {
|
||||
outline: 'none',
|
||||
// width: '120px',
|
||||
textAlign: 'center',
|
||||
// padding: '4px',
|
||||
// marginBottom: '6px',
|
||||
color: '#fff',
|
||||
border: 0,
|
||||
fontWeight: 'bold',
|
||||
textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)'
|
||||
});
|
||||
|
||||
dom.bind(this.__saturation_field, 'mousedown', fieldDown);
|
||||
dom.bind(this.__field_knob, 'mousedown', fieldDown);
|
||||
|
||||
dom.bind(this.__hue_field, 'mousedown', function(e) {
|
||||
setH(e);
|
||||
dom.bind(window, 'mousemove', setH);
|
||||
dom.bind(window, 'mouseup', unbindH);
|
||||
});
|
||||
|
||||
function fieldDown(e) {
|
||||
setSV(e);
|
||||
// document.body.style.cursor = 'none';
|
||||
dom.bind(window, 'mousemove', setSV);
|
||||
dom.bind(window, 'mouseup', unbindSV);
|
||||
}
|
||||
|
||||
function unbindSV() {
|
||||
dom.unbind(window, 'mousemove', setSV);
|
||||
dom.unbind(window, 'mouseup', unbindSV);
|
||||
// document.body.style.cursor = 'default';
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
var i = interpret(this.value);
|
||||
if (i !== false) {
|
||||
_this.__color.__state = i;
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
} else {
|
||||
this.value = _this.__color.toString();
|
||||
}
|
||||
}
|
||||
|
||||
function unbindH() {
|
||||
dom.unbind(window, 'mousemove', setH);
|
||||
dom.unbind(window, 'mouseup', unbindH);
|
||||
}
|
||||
|
||||
this.__saturation_field.appendChild(value_field);
|
||||
this.__selector.appendChild(this.__field_knob);
|
||||
this.__selector.appendChild(this.__saturation_field);
|
||||
this.__selector.appendChild(this.__hue_field);
|
||||
this.__hue_field.appendChild(this.__hue_knob);
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
this.domElement.appendChild(this.__selector);
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
function setSV(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var w = dom.getWidth(_this.__saturation_field);
|
||||
var o = dom.getOffset(_this.__saturation_field);
|
||||
var s = (e.clientX - o.left + document.body.scrollLeft) / w;
|
||||
var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
|
||||
|
||||
if (v > 1) v = 1;
|
||||
else if (v < 0) v = 0;
|
||||
|
||||
if (s > 1) s = 1;
|
||||
else if (s < 0) s = 0;
|
||||
|
||||
_this.__color.v = v;
|
||||
_this.__color.s = s;
|
||||
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
function setH(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var s = dom.getHeight(_this.__hue_field);
|
||||
var o = dom.getOffset(_this.__hue_field);
|
||||
var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
|
||||
|
||||
if (h > 1) h = 1;
|
||||
else if (h < 0) h = 0;
|
||||
|
||||
_this.__color.h = h * 360;
|
||||
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
ColorController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
ColorController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
var i = interpret(this.getValue());
|
||||
|
||||
if (i !== false) {
|
||||
|
||||
var mismatch = false;
|
||||
|
||||
// Check for mismatch on the interpreted value.
|
||||
|
||||
common.each(Color.COMPONENTS, function(component) {
|
||||
if (!common.isUndefined(i[component]) &&
|
||||
!common.isUndefined(this.__color.__state[component]) &&
|
||||
i[component] !== this.__color.__state[component]) {
|
||||
mismatch = true;
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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-',''];
|
||||
|
||||
function linearGradient(elem, x, a, b) {
|
||||
elem.style.background = '';
|
||||
common.each(vendors, function(vendor) {
|
||||
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); ';
|
||||
});
|
||||
}
|
||||
|
||||
function hueGradient(elem) {
|
||||
elem.style.background = '';
|
||||
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'
|
||||
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
|
||||
elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
|
||||
elem.style.cssText += 'background: -ms-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;
|
||||
|
||||
});
|
||||
@ -1,144 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/utils/common'
|
||||
], function(common) {
|
||||
|
||||
/**
|
||||
* @class An "abstract" class that represents a given property of an object.
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var Controller = function(object, property) {
|
||||
|
||||
this.initialValue = object[property];
|
||||
|
||||
/**
|
||||
* Those who extend this class will put their DOM elements in here.
|
||||
* @type {DOMElement}
|
||||
*/
|
||||
this.domElement = document.createElement('div');
|
||||
|
||||
/**
|
||||
* The object to manipulate
|
||||
* @type {Object}
|
||||
*/
|
||||
this.object = object;
|
||||
|
||||
/**
|
||||
* The name of the property to manipulate
|
||||
* @type {String}
|
||||
*/
|
||||
this.property = property;
|
||||
|
||||
/**
|
||||
* The function to be called on change.
|
||||
* @type {Function}
|
||||
* @ignore
|
||||
*/
|
||||
this.__onChange = undefined;
|
||||
|
||||
/**
|
||||
* The function to be called on finishing change.
|
||||
* @type {Function}
|
||||
* @ignore
|
||||
*/
|
||||
this.__onFinishChange = undefined;
|
||||
|
||||
};
|
||||
|
||||
common.extend(
|
||||
|
||||
Controller.prototype,
|
||||
|
||||
/** @lends dat.controllers.Controller.prototype */
|
||||
{
|
||||
|
||||
/**
|
||||
* Specify that a function fire every time someone changes the value with
|
||||
* this Controller.
|
||||
*
|
||||
* @param {Function} fnc This function will be called whenever the value
|
||||
* is modified via this Controller.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
onChange: function(fnc) {
|
||||
this.__onChange = fnc;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Specify that a function fire every time someone "finishes" changing
|
||||
* the value wih this Controller. Useful for values that change
|
||||
* incrementally like numbers or strings.
|
||||
*
|
||||
* @param {Function} fnc This function will be called whenever
|
||||
* someone "finishes" changing the value via this Controller.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
onFinishChange: function(fnc) {
|
||||
this.__onFinishChange = fnc;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Change the value of <code>object[property]</code>
|
||||
*
|
||||
* @param {Object} newValue The new value of <code>object[property]</code>
|
||||
*/
|
||||
setValue: function(newValue) {
|
||||
this.object[this.property] = newValue;
|
||||
if (this.__onChange) {
|
||||
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()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
return Controller;
|
||||
|
||||
|
||||
});
|
||||
@ -1,72 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/Controller',
|
||||
'dat/dom/dom',
|
||||
'dat/utils/common'
|
||||
], function(Controller, dom, common) {
|
||||
|
||||
/**
|
||||
* @class Provides a GUI interface to fire a specified method, a property of an object.
|
||||
*
|
||||
* @extends dat.controllers.Controller
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var FunctionController = function(object, property, text) {
|
||||
|
||||
FunctionController.superclass.call(this, object, property);
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.__button = document.createElement('div');
|
||||
this.__button.innerHTML = text === undefined ? 'Fire' : text;
|
||||
dom.bind(this.__button, 'click', function() {
|
||||
_this.fire();
|
||||
});
|
||||
|
||||
dom.addClass(this.__button, 'button');
|
||||
|
||||
this.domElement.appendChild(this.__button);
|
||||
|
||||
|
||||
};
|
||||
|
||||
FunctionController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
FunctionController.prototype,
|
||||
Controller.prototype,
|
||||
{
|
||||
|
||||
fire: function() {
|
||||
if (this.__onChange) {
|
||||
this.__onChange.call(this);
|
||||
}
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
this.getValue().call(this.object);
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
return FunctionController;
|
||||
|
||||
});
|
||||
@ -1,143 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/Controller',
|
||||
'dat/utils/common'
|
||||
], function(Controller, common) {
|
||||
|
||||
/**
|
||||
* @class Represents a given property of an object that is a number.
|
||||
*
|
||||
* @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} [params] Optional parameters
|
||||
* @param {Number} [params.min] Minimum allowed value
|
||||
* @param {Number} [params.max] Maximum allowed value
|
||||
* @param {Number} [params.step] Increment by which to change value
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var NumberController = function(object, property, params) {
|
||||
|
||||
NumberController.superclass.call(this, object, property);
|
||||
|
||||
params = params || {};
|
||||
|
||||
this.__min = params.min;
|
||||
this.__max = params.max;
|
||||
this.__step = params.step;
|
||||
|
||||
if (common.isUndefined(this.__step)) {
|
||||
|
||||
if (this.initialValue == 0) {
|
||||
this.__impliedStep = 1; // What are we, psychics?
|
||||
} else {
|
||||
// Hey Doug, check this out.
|
||||
this.__impliedStep = Math.pow(10, Math.floor(Math.log(this.initialValue)/Math.LN10))/10;
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
this.__impliedStep = this.__step;
|
||||
|
||||
}
|
||||
|
||||
this.__precision = numDecimals(this.__impliedStep);
|
||||
|
||||
|
||||
};
|
||||
|
||||
NumberController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
NumberController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
/** @lends dat.controllers.NumberController.prototype */
|
||||
{
|
||||
|
||||
setValue: function(v) {
|
||||
|
||||
if (this.__min !== undefined && v < this.__min) {
|
||||
v = this.__min;
|
||||
} else if (this.__max !== undefined && 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;
|
||||
return this;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
function numDecimals(x) {
|
||||
x = x.toString();
|
||||
if (x.indexOf('.') > -1) {
|
||||
return x.length - x.indexOf('.') - 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
return NumberController;
|
||||
|
||||
});
|
||||
@ -1,134 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/NumberController',
|
||||
'dat/dom/dom',
|
||||
'dat/utils/common'
|
||||
], function(NumberController, dom, common) {
|
||||
|
||||
/**
|
||||
* @class Represents a given property of an object that is a number and
|
||||
* provides an input element with which to manipulate it.
|
||||
*
|
||||
* @extends dat.controllers.Controller
|
||||
* @extends dat.controllers.NumberController
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
* @param {Object} [params] Optional parameters
|
||||
* @param {Number} [params.min] Minimum allowed value
|
||||
* @param {Number} [params.max] Maximum allowed value
|
||||
* @param {Number} [params.step] Increment by which to change value
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var NumberControllerBox = function(object, property, params) {
|
||||
|
||||
this.__truncationSuspended = false;
|
||||
|
||||
NumberControllerBox.superclass.call(this, object, property, params);
|
||||
|
||||
var _this = this;
|
||||
|
||||
/**
|
||||
* {Number} Previous mouse y position
|
||||
* @ignore
|
||||
*/
|
||||
var prev_y;
|
||||
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.setAttribute('type', 'text');
|
||||
|
||||
// Makes it so manually specified values are not truncated.
|
||||
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'mousedown', onMouseDown);
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
|
||||
// When pressing entire, you can be as precise as you want.
|
||||
if (e.keyCode === 13) {
|
||||
_this.__truncationSuspended = true;
|
||||
this.blur();
|
||||
_this.__truncationSuspended = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function onChange() {
|
||||
var attempted = parseFloat(_this.__input.value);
|
||||
if (!common.isNaN(attempted)) _this.setValue(attempted);
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
onChange();
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
dom.bind(window, 'mousemove', onMouseDrag);
|
||||
dom.bind(window, 'mouseup', onMouseUp);
|
||||
prev_y = e.clientY;
|
||||
}
|
||||
|
||||
function onMouseDrag(e) {
|
||||
|
||||
var diff = prev_y - e.clientY;
|
||||
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
||||
|
||||
prev_y = e.clientY;
|
||||
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dom.unbind(window, 'mousemove', onMouseDrag);
|
||||
dom.unbind(window, 'mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
|
||||
};
|
||||
|
||||
NumberControllerBox.superclass = NumberController;
|
||||
|
||||
common.extend(
|
||||
|
||||
NumberControllerBox.prototype,
|
||||
NumberController.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
||||
return NumberControllerBox.superclass.prototype.updateDisplay.call(this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
function roundToDecimal(value, decimals) {
|
||||
var tenTo = Math.pow(10, decimals);
|
||||
return Math.round(value * tenTo) / tenTo;
|
||||
}
|
||||
|
||||
return NumberControllerBox;
|
||||
|
||||
});
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
.slider {
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
background-color: #eee;
|
||||
padding: 0 0.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-fg {
|
||||
padding: 1px 0 2px 0;
|
||||
background-color: #aaa;
|
||||
height: 1em;
|
||||
margin-left: -0.5em;
|
||||
padding-right: 0.5em;
|
||||
border-radius: 1em 0 0 1em;
|
||||
}
|
||||
|
||||
.slider-fg:after {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
content: '';
|
||||
float: right;
|
||||
margin-right: -1em;
|
||||
margin-top: -1px;
|
||||
height: 0.9em;
|
||||
width: 0.9em;
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/NumberController',
|
||||
'dat/dom/dom',
|
||||
'dat/utils/css',
|
||||
'dat/utils/common',
|
||||
'text!dat/controllers/NumberControllerSlider.css'
|
||||
],
|
||||
function(NumberController, dom, css, common, styleSheet) {
|
||||
|
||||
/**
|
||||
* @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
|
||||
* manipulate it. It should be noted that the slider element is made up of
|
||||
* <code><div></code> tags, <strong>not</strong> the html5
|
||||
* <code><slider></code> element.
|
||||
*
|
||||
* @extends dat.controllers.Controller
|
||||
* @extends dat.controllers.NumberController
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
* @param {Number} minValue Minimum allowed value
|
||||
* @param {Number} maxValue Maximum allowed value
|
||||
* @param {Number} stepValue Increment by which to change value
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var NumberControllerSlider = function(object, property, min, max, step) {
|
||||
|
||||
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step });
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.__background = 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');
|
||||
|
||||
function onMouseDown(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();
|
||||
|
||||
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,
|
||||
NumberController.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
var pct = (this.getValue() - this.__min)/(this.__max - this.__min);
|
||||
this.__foreground.style.width = pct*100+'%';
|
||||
return NumberControllerSlider.superclass.prototype.updateDisplay.call(this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
);
|
||||
|
||||
function map(v, i1, i2, o1, o2) {
|
||||
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
||||
}
|
||||
|
||||
return NumberControllerSlider;
|
||||
|
||||
});
|
||||
@ -1,103 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/Controller',
|
||||
'dat/dom/dom',
|
||||
'dat/utils/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
|
||||
* @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);
|
||||
|
||||
});
|
||||
|
||||
// Acknowledge original value
|
||||
this.updateDisplay();
|
||||
|
||||
dom.bind(this.__select, 'change', function() {
|
||||
var desiredValue = this.options[this.selectedIndex].value;
|
||||
_this.setValue(desiredValue);
|
||||
});
|
||||
|
||||
this.domElement.appendChild(this.__select);
|
||||
|
||||
};
|
||||
|
||||
OptionController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
OptionController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
setValue: function(v) {
|
||||
var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
return toReturn;
|
||||
},
|
||||
|
||||
updateDisplay: function() {
|
||||
this.__select.value = this.getValue();
|
||||
return OptionController.superclass.prototype.updateDisplay.call(this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
return OptionController;
|
||||
|
||||
});
|
||||
@ -1,89 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/Controller',
|
||||
'dat/dom/dom',
|
||||
'dat/utils/common'
|
||||
], function(Controller, dom, common) {
|
||||
|
||||
/**
|
||||
* @class Provides a text input to alter the string property of an object.
|
||||
*
|
||||
* @extends dat.controllers.Controller
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var StringController = function(object, property) {
|
||||
|
||||
StringController.superclass.call(this, object, property);
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.setAttribute('type', 'text');
|
||||
|
||||
dom.bind(this.__input, 'keyup', onChange);
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.blur();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function onChange() {
|
||||
_this.setValue(_this.__input.value);
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
|
||||
};
|
||||
|
||||
StringController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
StringController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
// Stops the caret from moving on account of:
|
||||
// keyup -> setValue -> updateDisplay
|
||||
if (!dom.isActive(this.__input)) {
|
||||
this.__input.value = this.getValue();
|
||||
}
|
||||
return StringController.superclass.prototype.updateDisplay.call(this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
return StringController;
|
||||
|
||||
});
|
||||
@ -1,65 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/controllers/OptionController',
|
||||
'dat/controllers/NumberControllerBox',
|
||||
'dat/controllers/NumberControllerSlider',
|
||||
'dat/controllers/StringController',
|
||||
'dat/controllers/FunctionController',
|
||||
'dat/controllers/BooleanController',
|
||||
'dat/utils/common'
|
||||
],
|
||||
function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
|
||||
|
||||
return function(object, property) {
|
||||
|
||||
var initialValue = object[property];
|
||||
|
||||
// Providing options?
|
||||
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
|
||||
return new OptionController(object, property, arguments[2]);
|
||||
}
|
||||
|
||||
// Providing a map?
|
||||
|
||||
if (common.isNumber(initialValue)) {
|
||||
|
||||
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
|
||||
|
||||
// Has min and max.
|
||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
||||
|
||||
} else {
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@ -1,109 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/dom/dom',
|
||||
'dat/utils/common'
|
||||
], function(dom, common) {
|
||||
|
||||
var CenteredDiv = function() {
|
||||
|
||||
this.backgroundElement = document.createElement('div');
|
||||
common.extend(this.backgroundElement.style, {
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
display: 'none',
|
||||
zIndex: '1000',
|
||||
opacity: 0,
|
||||
WebkitTransition: 'opacity 0.2s linear'
|
||||
});
|
||||
|
||||
dom.makeFullscreen(this.backgroundElement);
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
common.extend(this.domElement.style, {
|
||||
position: 'fixed',
|
||||
display: 'none',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
zIndex: '1001',
|
||||
opacity: 0,
|
||||
WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear'
|
||||
});
|
||||
|
||||
|
||||
document.body.appendChild(this.backgroundElement);
|
||||
document.body.appendChild(this.domElement);
|
||||
|
||||
var _this = this;
|
||||
dom.bind(this.backgroundElement, 'click', function() {
|
||||
_this.hide();
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
CenteredDiv.prototype.show = function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.backgroundElement.style.display = 'block';
|
||||
|
||||
this.domElement.style.display = 'block';
|
||||
this.domElement.style.opacity = 0;
|
||||
// this.domElement.style.top = '52%';
|
||||
this.domElement.style.webkitTransform = 'scale(1.1)';
|
||||
|
||||
this.layout();
|
||||
|
||||
common.defer(function() {
|
||||
_this.backgroundElement.style.opacity = 1;
|
||||
_this.domElement.style.opacity = 1;
|
||||
_this.domElement.style.webkitTransform = 'scale(1)';
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
CenteredDiv.prototype.hide = function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
var hide = function() {
|
||||
|
||||
_this.domElement.style.display = 'none';
|
||||
_this.backgroundElement.style.display = 'none';
|
||||
|
||||
dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
|
||||
dom.unbind(_this.domElement, 'transitionend', hide);
|
||||
dom.unbind(_this.domElement, 'oTransitionEnd', hide);
|
||||
|
||||
};
|
||||
|
||||
dom.bind(this.domElement, 'webkitTransitionEnd', hide);
|
||||
dom.bind(this.domElement, 'transitionend', hide);
|
||||
dom.bind(this.domElement, 'oTransitionEnd', hide);
|
||||
|
||||
this.backgroundElement.style.opacity = 0;
|
||||
// this.domElement.style.top = '48%';
|
||||
this.domElement.style.opacity = 0;
|
||||
this.domElement.style.webkitTransform = 'scale(1.1)';
|
||||
|
||||
};
|
||||
|
||||
CenteredDiv.prototype.layout = function() {
|
||||
this.domElement.style.marginLeft = -dom.getWidth(this.domElement) / 2 + 'px';
|
||||
this.domElement.style.marginTop = -dom.getHeight(this.domElement) / 2 + 'px';
|
||||
};
|
||||
|
||||
return CenteredDiv;
|
||||
|
||||
});
|
||||
@ -1,287 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
'dat/utils/common'
|
||||
], function(common) {
|
||||
|
||||
var EVENT_MAP = {
|
||||
'HTMLEvents': ['change'],
|
||||
'MouseEvents': ['click','mousemove','mousedown','mouseup', 'mouseover'],
|
||||
'KeyboardEvents': ['keydown']
|
||||
};
|
||||
|
||||
var EVENT_MAP_INV = {};
|
||||
common.each(EVENT_MAP, function(v, k) {
|
||||
common.each(v, function(e) {
|
||||
EVENT_MAP_INV[e] = k;
|
||||
});
|
||||
});
|
||||
|
||||
var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
|
||||
|
||||
function cssValueToPixels(val) {
|
||||
|
||||
if (val === '0' || common.isUndefined(val)) return 0;
|
||||
|
||||
var match = val.match(CSS_VALUE_PIXELS);
|
||||
|
||||
if (!common.isNull(match)) {
|
||||
return parseFloat(match[1]);
|
||||
}
|
||||
|
||||
// TODO ...ems? %?
|
||||
|
||||
return 0;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @namespace
|
||||
* @member dat.dom
|
||||
*/
|
||||
var dom = {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param selectable
|
||||
*/
|
||||
makeSelectable: function(elem, selectable) {
|
||||
|
||||
if (elem === undefined || elem.style === undefined) return;
|
||||
|
||||
elem.onselectstart = selectable ? function() {
|
||||
return false;
|
||||
} : function() {
|
||||
};
|
||||
|
||||
elem.style.MozUserSelect = selectable ? 'auto' : 'none';
|
||||
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
|
||||
elem.unselectable = selectable ? 'on' : 'off';
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param horizontal
|
||||
* @param vertical
|
||||
*/
|
||||
makeFullscreen: function(elem, horizontal, vertical) {
|
||||
|
||||
if (common.isUndefined(horizontal)) horizontal = true;
|
||||
if (common.isUndefined(vertical)) vertical = true;
|
||||
|
||||
elem.style.position = 'absolute';
|
||||
|
||||
if (horizontal) {
|
||||
elem.style.left = 0;
|
||||
elem.style.right = 0;
|
||||
}
|
||||
if (vertical) {
|
||||
elem.style.top = 0;
|
||||
elem.style.bottom = 0;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param eventType
|
||||
* @param params
|
||||
*/
|
||||
fakeEvent: function(elem, eventType, params, aux) {
|
||||
params = params || {};
|
||||
var className = EVENT_MAP_INV[eventType];
|
||||
if (!className) {
|
||||
throw new Error('Event type ' + eventType + ' not supported.');
|
||||
}
|
||||
var evt = document.createEvent(className);
|
||||
switch (className) {
|
||||
case 'MouseEvents':
|
||||
var clientX = params.x || params.clientX || 0;
|
||||
var clientY = params.y || params.clientY || 0;
|
||||
evt.initMouseEvent(eventType, params.bubbles || false,
|
||||
params.cancelable || true, window, params.clickCount || 1,
|
||||
0, //screen X
|
||||
0, //screen Y
|
||||
clientX, //client X
|
||||
clientY, //client Y
|
||||
false, false, false, false, 0, null);
|
||||
break;
|
||||
case 'KeyboardEvents':
|
||||
var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
|
||||
common.defaults(params, {
|
||||
cancelable: true,
|
||||
ctrlKey: false,
|
||||
altKey: false,
|
||||
shiftKey: false,
|
||||
metaKey: false,
|
||||
keyCode: undefined,
|
||||
charCode: undefined
|
||||
});
|
||||
init(eventType, params.bubbles || false,
|
||||
params.cancelable, window,
|
||||
params.ctrlKey, params.altKey,
|
||||
params.shiftKey, params.metaKey,
|
||||
params.keyCode, params.charCode);
|
||||
break;
|
||||
default:
|
||||
evt.initEvent(eventType, params.bubbles || false,
|
||||
params.cancelable || true);
|
||||
break;
|
||||
}
|
||||
common.defaults(evt, aux);
|
||||
elem.dispatchEvent(evt);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param event
|
||||
* @param func
|
||||
* @param bool
|
||||
*/
|
||||
bind: function(elem, event, func, bool) {
|
||||
bool = bool || false;
|
||||
if (elem.addEventListener)
|
||||
elem.addEventListener(event, func, bool);
|
||||
else if (elem.attachEvent)
|
||||
elem.attachEvent('on' + event, func);
|
||||
return dom;
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param event
|
||||
* @param func
|
||||
* @param bool
|
||||
*/
|
||||
unbind: function(elem, event, func, bool) {
|
||||
bool = bool || false;
|
||||
if (elem.removeEventListener)
|
||||
elem.removeEventListener(event, func, bool);
|
||||
else if (elem.detachEvent)
|
||||
elem.detachEvent('on' + event, func);
|
||||
return dom;
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param className
|
||||
*/
|
||||
addClass: function(elem, className) {
|
||||
if (elem.className === undefined) {
|
||||
elem.className = className;
|
||||
} else if (elem.className !== className) {
|
||||
var classes = elem.className.split(/ +/);
|
||||
if (classes.indexOf(className) == -1) {
|
||||
classes.push(className);
|
||||
elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
|
||||
}
|
||||
}
|
||||
return dom;
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param className
|
||||
*/
|
||||
removeClass: function(elem, className) {
|
||||
if (className) {
|
||||
if (elem.className === undefined) {
|
||||
// elem.className = className;
|
||||
} else if (elem.className === className) {
|
||||
elem.removeAttribute('class');
|
||||
} else {
|
||||
var classes = elem.className.split(/ +/);
|
||||
var index = classes.indexOf(className);
|
||||
if (index != -1) {
|
||||
classes.splice(index, 1);
|
||||
elem.className = classes.join(' ');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
elem.className = undefined;
|
||||
}
|
||||
return dom;
|
||||
},
|
||||
|
||||
hasClass: function(elem, className) {
|
||||
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
*/
|
||||
getWidth: function(elem) {
|
||||
|
||||
var style = getComputedStyle(elem);
|
||||
|
||||
return cssValueToPixels(style['border-left-width']) +
|
||||
cssValueToPixels(style['border-right-width']) +
|
||||
cssValueToPixels(style['padding-left']) +
|
||||
cssValueToPixels(style['padding-right']) +
|
||||
cssValueToPixels(style['width']);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
*/
|
||||
getHeight: function(elem) {
|
||||
|
||||
var style = getComputedStyle(elem);
|
||||
|
||||
return cssValueToPixels(style['border-top-width']) +
|
||||
cssValueToPixels(style['border-bottom-width']) +
|
||||
cssValueToPixels(style['padding-top']) +
|
||||
cssValueToPixels(style['padding-bottom']) +
|
||||
cssValueToPixels(style['height']);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
*/
|
||||
getOffset: function(elem) {
|
||||
var offset = {left: 0, top:0};
|
||||
if (elem.offsetParent) {
|
||||
do {
|
||||
offset.left += elem.offsetLeft;
|
||||
offset.top += elem.offsetTop;
|
||||
} while (elem = elem.offsetParent);
|
||||
}
|
||||
return offset;
|
||||
},
|
||||
|
||||
// http://stackoverflow.com/posts/2684561/revisions
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
*/
|
||||
isActive: function(elem) {
|
||||
return elem === document.activeElement && ( elem.type || elem.href );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return dom;
|
||||
|
||||
});
|
||||
@ -1,221 +0,0 @@
|
||||
$nest-margin: 4px;
|
||||
$row-height: 27px;
|
||||
|
||||
.dg {
|
||||
|
||||
/** Clear list styles */
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Auto-place container */
|
||||
&.ac {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&.main {
|
||||
@include transition(opacity, 0.1s, linear);
|
||||
/*overflow-y: hidden;*/
|
||||
&.taller-than-window {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Auto-placed GUI's */
|
||||
&.a {
|
||||
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.has-save {
|
||||
margin-top: $row-height;
|
||||
}
|
||||
|
||||
.save-row {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Line items that don't contain folders. */
|
||||
li:not(.folder) {
|
||||
cursor: auto;
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
overflow: hidden;
|
||||
padding: 0 4px 0 5px;
|
||||
@include transition(height, 0.1s, ease-out);
|
||||
}
|
||||
|
||||
li.folder {
|
||||
padding: 0;
|
||||
border-left: $nest-margin solid rgba(0,0,0,0);
|
||||
|
||||
}
|
||||
|
||||
/** Folder names */
|
||||
li.title {
|
||||
cursor: pointer;
|
||||
margin-left: -$nest-margin;
|
||||
}
|
||||
|
||||
/** Hides closed items */
|
||||
.closed li:not(.title),
|
||||
.closed ul li,
|
||||
.closed ul li > * {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/** Controller row */
|
||||
.cr {
|
||||
clear: both;
|
||||
padding-left: 3px;
|
||||
height: $row-height;
|
||||
}
|
||||
|
||||
/** Name-half (left) */
|
||||
.property-name {
|
||||
cursor: default;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 40%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/** Controller-half (right) */
|
||||
.c {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/** Controller placement */
|
||||
.c input[type=text] {
|
||||
border: 0;
|
||||
margin-top: 4px;
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Shorter number boxes when slider is present. */
|
||||
.has-slider input[type=text] {
|
||||
width: 30%;
|
||||
/*display: none;*/
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
float: left;
|
||||
width: 66%;
|
||||
margin-left: -5px;
|
||||
margin-right: 0;
|
||||
height: 19px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.slider-fg {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.c input[type=checkbox] {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.c select {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/** Ensure the entire boolean and function row shows a hand */
|
||||
.cr.function,
|
||||
.cr.function .property-name, /* Don't know why I need to be this explicit */
|
||||
.cr.function *,
|
||||
.cr.boolean,
|
||||
.cr.boolean * {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.selector {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin-left: -9px;
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
|
||||
.c:hover .selector,
|
||||
.selector.drag {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
li.save-row {
|
||||
|
||||
padding: 0;
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0px 6px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.dialogue {
|
||||
background-color: #222;
|
||||
width: 460px;
|
||||
padding: 15px;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* TODO Separate style and structure */
|
||||
#dg-new-constructor {
|
||||
padding: 10px;
|
||||
color: #222;
|
||||
font-family: Monaco, monospace;
|
||||
font-size: 10px;
|
||||
border: 0;
|
||||
resize: none;
|
||||
box-shadow: inset 1px 1px 1px #888;
|
||||
word-wrap: break-word;
|
||||
margin: 12px 0;
|
||||
display: block;
|
||||
width: 440px;
|
||||
overflow-y: scroll;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#dg-local-explain {
|
||||
display: none;
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
border-radius: 3px;
|
||||
background-color: #333;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
code {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#dat-gui-save-locally {
|
||||
display: none;
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<div id="dg-save" class="dg dialogue">
|
||||
|
||||
Here's the new load parameter for your <code>GUI</code>'s constructor:
|
||||
|
||||
<textarea id="dg-new-constructor"></textarea>
|
||||
|
||||
<div id="dg-save-locally">
|
||||
|
||||
<input id="dg-local-storage" type="checkbox"/> Automatically save
|
||||
values to <code>localStorage</code> on exit.
|
||||
|
||||
<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.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,261 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
.dg {
|
||||
/** Clear list styles */
|
||||
/* Auto-place container */
|
||||
/* Auto-placed GUI's */
|
||||
/* Line items that don't contain folders. */
|
||||
/** Folder names */
|
||||
/** Hides closed items */
|
||||
/** Controller row */
|
||||
/** Name-half (left) */
|
||||
/** Controller-half (right) */
|
||||
/** Controller placement */
|
||||
/** Shorter number boxes when slider is present. */
|
||||
/** Ensure the entire boolean and function row shows a hand */ }
|
||||
.dg ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
clear: both; }
|
||||
.dg.ac {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
z-index: 0; }
|
||||
.dg.main {
|
||||
-webkit-transition: opacity 0.1s linear;
|
||||
-o-transition: opacity 0.1s linear;
|
||||
-moz-transition: opacity 0.1s linear;
|
||||
transition: opacity 0.1s linear;
|
||||
/*overflow-y: hidden;*/ }
|
||||
.dg.main.taller-than-window {
|
||||
overflow-y: auto; }
|
||||
.dg.a {
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
overflow-x: hidden; }
|
||||
.dg.a.has-save {
|
||||
margin-top: 27px; }
|
||||
.dg.a .save-row {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1002; }
|
||||
.dg li:not(.folder) {
|
||||
cursor: auto;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
overflow: hidden;
|
||||
padding: 0 4px 0 5px;
|
||||
-webkit-transition: height 0.1s ease-out;
|
||||
-o-transition: height 0.1s ease-out;
|
||||
-moz-transition: height 0.1s ease-out;
|
||||
transition: height 0.1s ease-out; }
|
||||
.dg li.folder {
|
||||
padding: 0;
|
||||
border-left: 4px solid rgba(0, 0, 0, 0); }
|
||||
.dg li.title {
|
||||
cursor: pointer;
|
||||
margin-left: -4px; }
|
||||
.dg .closed li:not(.title),
|
||||
.dg .closed ul li,
|
||||
.dg .closed ul li > * {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border: 0; }
|
||||
.dg .cr {
|
||||
clear: both;
|
||||
padding-left: 3px;
|
||||
height: 27px; }
|
||||
.dg .property-name {
|
||||
cursor: default;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 40%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.dg .c {
|
||||
float: left;
|
||||
width: 60%; }
|
||||
.dg .c input[type=text] {
|
||||
border: 0;
|
||||
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; }
|
||||
.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 */
|
||||
#dg-new-constructor {
|
||||
padding: 10px;
|
||||
color: #222;
|
||||
font-family: Monaco, monospace;
|
||||
font-size: 10px;
|
||||
border: 0;
|
||||
resize: none;
|
||||
box-shadow: inset 1px 1px 1px #888;
|
||||
word-wrap: break-word;
|
||||
margin: 12px 0;
|
||||
display: block;
|
||||
width: 440px;
|
||||
overflow-y: scroll;
|
||||
height: 100px;
|
||||
position: relative; }
|
||||
|
||||
#dg-local-explain {
|
||||
display: none;
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
border-radius: 3px;
|
||||
background-color: #333;
|
||||
padding: 8px;
|
||||
margin-top: 10px; }
|
||||
#dg-local-explain code {
|
||||
font-size: 10px; }
|
||||
|
||||
#dat-gui-save-locally {
|
||||
display: none; }
|
||||
|
||||
/** Main type */
|
||||
.dg {
|
||||
color: #eee;
|
||||
font: 11px 'Lucida Grande', sans-serif;
|
||||
text-shadow: 0 -1px 0 #111111;
|
||||
/** Auto place */
|
||||
/* Controller row, <li> */
|
||||
/** Controllers */ }
|
||||
.dg.main {
|
||||
/** Scrollbar */ }
|
||||
.dg.main::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background: #1a1a1a; }
|
||||
.dg.main::-webkit-scrollbar-corner {
|
||||
height: 0;
|
||||
display: none; }
|
||||
.dg.main::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: #676767; }
|
||||
.dg li:not(.folder) {
|
||||
background: #1a1a1a;
|
||||
border-bottom: 1px solid #2c2c2c; }
|
||||
.dg li.save-row {
|
||||
line-height: 25px;
|
||||
background: #dad5cb;
|
||||
border: 0; }
|
||||
.dg li.save-row select {
|
||||
margin-left: 5px;
|
||||
width: 108px; }
|
||||
.dg li.save-row .button {
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
border-radius: 2px;
|
||||
font-size: 9px;
|
||||
line-height: 7px;
|
||||
padding: 4px 4px 5px 4px;
|
||||
background: #c5bdad;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #b0a58f;
|
||||
box-shadow: 0 -1px 0 #b0a58f;
|
||||
cursor: pointer; }
|
||||
.dg li.save-row .button.gears {
|
||||
background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
|
||||
height: 7px;
|
||||
width: 8px; }
|
||||
.dg li.save-row .button:hover {
|
||||
background-color: #bab19e;
|
||||
box-shadow: 0 -1px 0 #b0a58f; }
|
||||
.dg li.folder {
|
||||
border-bottom: 0; }
|
||||
.dg li.title {
|
||||
padding-left: 16px;
|
||||
background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
.dg .closed li.title {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }
|
||||
.dg .cr.boolean {
|
||||
border-left: 3px solid #806787; }
|
||||
.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,202 +0,0 @@
|
||||
$background-color: #1a1a1a;
|
||||
|
||||
$hover-lighten: 5%;
|
||||
$border-lighten: 7%;
|
||||
$active-lighten: 10%;
|
||||
|
||||
$number-color: #2FA1D6;
|
||||
$boolean-color: #806787;
|
||||
$string-color: #1ed36f;
|
||||
$function-color: #e61d5f;
|
||||
$save-row-color: #dad5cb;
|
||||
$button-color: darken($save-row-color, 10%);
|
||||
|
||||
$input-color: lighten($background-color, 8.5%);
|
||||
|
||||
@mixin transition($prop, $time, $curve) {
|
||||
-webkit-transition: $prop $time $curve;
|
||||
-o-transition: $prop $time $curve;
|
||||
-moz-transition: $prop $time $curve;
|
||||
transition: $prop $time $curve;
|
||||
}
|
||||
|
||||
@mixin gradient($a, $b) {
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($a), to($b));
|
||||
background: -o-gradient(linear, 0% 0%, 0% 100%, from($a), to($b));
|
||||
background: -moz-gradient(linear, 0% 0%, 0% 100%, from($a), to($b));
|
||||
}
|
||||
|
||||
@mixin button() {
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
border-radius: 2px;
|
||||
font-size: 9px;
|
||||
line-height: 7px;
|
||||
padding: 4px 4px 5px 4px;
|
||||
background: $button-color;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 darken($button-color, 10%);
|
||||
box-shadow: 0 -1px 0 darken($button-color, 10%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin gears() {
|
||||
background: $button-color url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
@import "structure";
|
||||
|
||||
/** Main type */
|
||||
.dg {
|
||||
|
||||
|
||||
color: #eee;
|
||||
font: 11px 'Lucida Grande', sans-serif;
|
||||
text-shadow: 0 -1px 0 #111;
|
||||
|
||||
/** Auto place */
|
||||
&.main {
|
||||
|
||||
/** Scrollbar */
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background: $background-color;
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: lighten($background-color, 30%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
&:not(.folder) {
|
||||
background: $background-color;
|
||||
border-bottom: 1px solid lighten($background-color, $border-lighten);
|
||||
}
|
||||
|
||||
&.save-row {
|
||||
|
||||
line-height: 25px;
|
||||
background: $save-row-color;
|
||||
border: 0;
|
||||
|
||||
select {
|
||||
margin-left: 5px;
|
||||
width: 108px;
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
&.gears {
|
||||
@include gears;
|
||||
}
|
||||
|
||||
@include button;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($button-color, 5%);
|
||||
box-shadow: 0 -1px 0 darken($button-color, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.folder {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.title {
|
||||
padding-left: 16px;
|
||||
background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.closed li.title {
|
||||
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==);
|
||||
}
|
||||
|
||||
/* Controller row, <li> */
|
||||
.cr {
|
||||
|
||||
&.boolean {
|
||||
border-left: 3px solid $boolean-color;
|
||||
}
|
||||
|
||||
&.function {
|
||||
border-left: 3px solid $function-color;
|
||||
}
|
||||
|
||||
&.number {
|
||||
border-left: 3px solid $number-color;
|
||||
input[type=text] {
|
||||
color: $number-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.string {
|
||||
border-left: 3px solid $string-color;
|
||||
input[type=text] {
|
||||
color: $string-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.function:hover ,
|
||||
&.boolean:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/** Controllers */
|
||||
.c {
|
||||
|
||||
|
||||
|
||||
input[type=text] {
|
||||
|
||||
background: $input-color;
|
||||
outline: none;
|
||||
&:hover {
|
||||
background: lighten($input-color, $hover-lighten);
|
||||
}
|
||||
&:focus {
|
||||
background: lighten($input-color, $active-lighten);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.slider {
|
||||
background: $input-color;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.slider-fg {
|
||||
background: $number-color;
|
||||
}
|
||||
|
||||
.slider:hover {
|
||||
background: lighten($input-color, $hover-lighten);
|
||||
.slider-fg {
|
||||
background: lighten($number-color, $hover-lighten);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,139 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
], function() {
|
||||
|
||||
var ARR_EACH = Array.prototype.forEach;
|
||||
var ARR_SLICE = Array.prototype.slice;
|
||||
|
||||
/**
|
||||
* Band-aid methods for things that should be a lot easier in JavaScript.
|
||||
* Implementation and structure inspired by underscore.js
|
||||
* http://documentcloud.github.com/underscore/
|
||||
*/
|
||||
|
||||
return {
|
||||
|
||||
BREAK: {},
|
||||
|
||||
extend: function(target) {
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
|
||||
|
||||
for (var key in obj)
|
||||
if (!this.isUndefined(obj[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
}, this);
|
||||
|
||||
return target;
|
||||
|
||||
},
|
||||
|
||||
defaults: function(target) {
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
|
||||
|
||||
for (var key in obj)
|
||||
if (this.isUndefined(target[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
}, this);
|
||||
|
||||
return target;
|
||||
|
||||
},
|
||||
|
||||
compose: function() {
|
||||
var toCall = ARR_SLICE.call(arguments);
|
||||
return function() {
|
||||
var args = ARR_SLICE.call(arguments);
|
||||
for (var i = toCall.length -1; i >= 0; i--) {
|
||||
args = [toCall[i].apply(this, args)];
|
||||
}
|
||||
return args[0];
|
||||
}
|
||||
},
|
||||
|
||||
each: function(obj, itr, scope) {
|
||||
|
||||
|
||||
if (ARR_EACH && obj.forEach === ARR_EACH) {
|
||||
|
||||
obj.forEach(itr, scope);
|
||||
|
||||
} else if (obj.length === obj.length + 0) { // Is number but not NaN
|
||||
|
||||
for (var key = 0, l = obj.length; key < l; key++)
|
||||
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
} else {
|
||||
|
||||
for (var key in obj)
|
||||
if (itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
defer: function(fnc) {
|
||||
setTimeout(fnc, 0);
|
||||
},
|
||||
|
||||
toArray: function(obj) {
|
||||
if (obj.toArray) return obj.toArray();
|
||||
return ARR_SLICE.call(obj);
|
||||
},
|
||||
|
||||
isUndefined: function(obj) {
|
||||
return obj === undefined;
|
||||
},
|
||||
|
||||
isNull: function(obj) {
|
||||
return obj === null;
|
||||
},
|
||||
|
||||
isNaN: function(obj) {
|
||||
return obj !== obj;
|
||||
},
|
||||
|
||||
isArray: Array.isArray || function(obj) {
|
||||
return obj.constructor === Array;
|
||||
},
|
||||
|
||||
isObject: function(obj) {
|
||||
return obj === Object(obj);
|
||||
},
|
||||
|
||||
isNumber: function(obj) {
|
||||
return obj === obj+0;
|
||||
},
|
||||
|
||||
isString: function(obj) {
|
||||
return obj === obj+'';
|
||||
},
|
||||
|
||||
isBoolean: function(obj) {
|
||||
return obj === false || obj === true;
|
||||
},
|
||||
|
||||
isFunction: function(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Function]';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
@ -1,33 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([],
|
||||
function() {
|
||||
return {
|
||||
load: function (url, doc) {
|
||||
doc = doc || document;
|
||||
var link = doc.createElement('link');
|
||||
link.type = 'text/css';
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
doc.getElementsByTagName('head')[0].appendChild(link);
|
||||
},
|
||||
inject: function(css, doc) {
|
||||
doc = doc || document;
|
||||
var injected = document.createElement('style');
|
||||
injected.type = 'text/css';
|
||||
injected.innerHTML = css;
|
||||
doc.getElementsByTagName('head')[0].appendChild(injected);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
define([
|
||||
], function() {
|
||||
|
||||
/**
|
||||
* requirejs version of Paul Irish's RequestAnimationFrame
|
||||
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
*/
|
||||
|
||||
return window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback, element) {
|
||||
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
|
||||
};
|
||||
});
|
||||
1412
tests/index.html
1412
tests/index.html
File diff suppressed because it is too large
Load Diff
9046
tests/jquery.js
vendored
9046
tests/jquery.js
vendored
File diff suppressed because it is too large
Load Diff
226
tests/qunit.css
226
tests/qunit.css
@ -1,226 +0,0 @@
|
||||
/**
|
||||
* QUnit 1.2.0pre - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://docs.jquery.com/QUnit
|
||||
*
|
||||
* Copyright (c) 2011 John Resig, Jörn Zaefferer
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 15px 15px 0 0;
|
||||
-moz-border-radius: 15px 15px 0 0;
|
||||
-webkit-border-top-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests ol {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
|
||||
box-shadow: inset 0px 2px 13px #999;
|
||||
-moz-box-shadow: inset 0px 2px 13px #999;
|
||||
-webkit-box-shadow: inset 0px 2px 13px #999;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
margin: 0.5em;
|
||||
padding: 0.4em 0.5em 0.4em 0.5em;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #5E740B;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 15px 15px;
|
||||
-moz-border-radius: 0 0 15px 15px;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
}
|
||||
1587
tests/qunit.js
1587
tests/qunit.js
File diff suppressed because it is too large
Load Diff
@ -1,8 +0,0 @@
|
||||
require('./builder.js').build({
|
||||
"baseUrl": "../src/",
|
||||
"main": "dat/color/Color",
|
||||
"out": "../build/dat.color.js",
|
||||
"minify": false,
|
||||
"shortcut": "dat.Color",
|
||||
"paths": {}
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
require('./builder.js').build({
|
||||
"baseUrl": "../src/",
|
||||
"main": "dat/gui/GUI",
|
||||
"out": "../build/dat.gui.js",
|
||||
"minify": false,
|
||||
"shortcut": "dat.GUI",
|
||||
"paths": {}
|
||||
});
|
||||
284
utils/builder.js
284
utils/builder.js
@ -1,284 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
var fs = require('fs'),
|
||||
closure = require('./closure'),
|
||||
params,
|
||||
defined,
|
||||
third_party,
|
||||
request_counts,
|
||||
namespaces,
|
||||
next_load = '',
|
||||
next_path = '';
|
||||
|
||||
exports.build = build;
|
||||
exports.file_exists = file_exists;
|
||||
exports.read_file = read_file;
|
||||
exports.tab = tab;
|
||||
|
||||
exports.license = read_file('license.txt');
|
||||
|
||||
function build(_params) {
|
||||
|
||||
params = _params;
|
||||
|
||||
defined = {};
|
||||
third_party = {};
|
||||
request_counts = {};
|
||||
namespaces = {};
|
||||
|
||||
var deps = [];
|
||||
|
||||
load_module(params.baseUrl + params.main + '.js', params.main);
|
||||
|
||||
for (var i in defined) {
|
||||
if (params.verbose) console.log('Loaded: ' + defined[i].path);
|
||||
deps.push(defined[i].path);
|
||||
if (defined[i].module) {
|
||||
var namespace = i.substr(0, i.lastIndexOf('/'));
|
||||
namespaces[namespace] = true;
|
||||
}
|
||||
}
|
||||
|
||||
var to_write = '';
|
||||
var ensured = {};
|
||||
|
||||
|
||||
for (var name in params.paths) {
|
||||
var path = params.baseUrl + params.paths[name] + '.js';
|
||||
var str = read_file(path);
|
||||
if (str === false) {
|
||||
console.log('Failed to locate dependency \'' + name + '\' at ' + path);
|
||||
fail();
|
||||
}
|
||||
third_party[name] = str;
|
||||
to_write += third_party[name] + "\n\n";
|
||||
if (params.verbose) console.log('Loaded: ' + path);
|
||||
//deps.push(path);
|
||||
}
|
||||
|
||||
// Ensure namespaces
|
||||
for (i in namespaces) {
|
||||
|
||||
var split = i.split('/');
|
||||
|
||||
for (var j = 0; j < split.length; j++) {
|
||||
var cur = [];
|
||||
if (j == 0 && !ensured[split[j]]) {
|
||||
to_write += '/** @namespace */\n';
|
||||
to_write += 'var ' + split[j] + ' = ' + split[j] + ' || {};\n\n';
|
||||
ensured[split[j]] = true;
|
||||
} else {
|
||||
for (var k = 0; k <= j; k++) {
|
||||
cur.push(split[k]);
|
||||
}
|
||||
var curn = cur.join('.');
|
||||
if (!ensured[curn]) {
|
||||
to_write += '/** @namespace */\n';
|
||||
to_write += curn + ' = ' + curn + ' || {};\n\n';
|
||||
}
|
||||
ensured[curn] = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var shared_count = 0;
|
||||
for (i in request_counts) {
|
||||
var count = request_counts[i];
|
||||
if (count > 1) {
|
||||
if (i in defined) {
|
||||
var new_shared = i.replace(/\//g, '.');
|
||||
var v = new_shared + ' = ' + defined[i].getClosure() + ';\n';
|
||||
to_write += v + "\n\n";
|
||||
defined[i].shared = new_shared;
|
||||
shared_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
to_write += params.shortcut + ' = ' + params.main.replace(/\//g, '.') + ' = ' + defined[params.main].getClosure() + ';';
|
||||
|
||||
if (params.verbose) console.log('Exported: ' + params.main + ' to window.' + params.shortcut);
|
||||
|
||||
if (params.minify) {
|
||||
|
||||
console.log('Compiling minified source ...');
|
||||
|
||||
|
||||
closure.compile(to_write, function(error, code) {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
} else {
|
||||
write(exports.license + code);
|
||||
}
|
||||
if (params.on_compile) {
|
||||
params.on_compile();
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
write(exports.license + "\n" + to_write);
|
||||
|
||||
}
|
||||
|
||||
return deps;
|
||||
|
||||
}
|
||||
|
||||
function define(deps, callback) {
|
||||
|
||||
this.name = next_load;
|
||||
this.path = next_path;
|
||||
this.shared = false;
|
||||
|
||||
defined[this.name] = this;
|
||||
|
||||
if (Array.isArray(deps)) {
|
||||
|
||||
this.deps = deps;
|
||||
this.callback = callback.toString();
|
||||
this.module = true;
|
||||
|
||||
// Simple define call, just an object
|
||||
} else if (typeof deps === 'object') {
|
||||
|
||||
var props = [];
|
||||
for (var i in deps) {
|
||||
props.push(i + ':' + deps[i].toString())
|
||||
}
|
||||
this.callback = '{' + props.join(',') + '}';
|
||||
this.module = true;
|
||||
|
||||
} else {
|
||||
|
||||
this.deps = deps;
|
||||
this.callback = callback;
|
||||
|
||||
}
|
||||
|
||||
this.getClosure = function() {
|
||||
if (this.shared) return this.shared;
|
||||
if (!this.deps || this.text) return this.callback;
|
||||
var arg_string = '(';
|
||||
var args = [];
|
||||
for (var i in this.deps) {
|
||||
var dep = this.deps[i];
|
||||
if (dep in defined) {
|
||||
var closure = defined[dep].getClosure();
|
||||
if (!defined[dep].shared && !defined[dep].text) {
|
||||
closure = defined[dep].name.replace(/\//g, '.') + ' = ' + closure;
|
||||
}
|
||||
args.push(closure);
|
||||
}
|
||||
}
|
||||
arg_string += args.join(',\n');
|
||||
arg_string += ')';
|
||||
return '(' + this.callback + ')' + arg_string;
|
||||
|
||||
};
|
||||
|
||||
this.recurseDeps = function() {
|
||||
|
||||
if (!this.deps) return;
|
||||
|
||||
for (var i in this.deps) {
|
||||
|
||||
var dep = this.deps[i];
|
||||
|
||||
if (dep in params.paths) continue;
|
||||
|
||||
var path = params.baseUrl + dep;
|
||||
|
||||
// Define module?
|
||||
if (file_exists(path + '.js')) {
|
||||
load_module(path + '.js', dep);
|
||||
|
||||
// Text module?
|
||||
} else if (path.match(/text!/) != null) {
|
||||
load_text(path.replace('text!', ''), dep);
|
||||
}
|
||||
|
||||
// up the request count
|
||||
if (dep in request_counts) {
|
||||
request_counts[dep]++
|
||||
} else {
|
||||
request_counts[dep] = 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.recurseDeps();
|
||||
|
||||
}
|
||||
|
||||
function file_exists(path) {
|
||||
try {
|
||||
var stats = fs.lstatSync(path)
|
||||
return stats.isFile();
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function read_file(path) {
|
||||
try {
|
||||
return fs.readFileSync(path).toString();
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function load_module(path, name) {
|
||||
name = name || path;
|
||||
if (name in defined) return;
|
||||
next_load = name;
|
||||
next_path = path;
|
||||
eval('new ' + read_file(path));
|
||||
}
|
||||
|
||||
function load_text(path, name) {
|
||||
name = name || path;
|
||||
if (name in defined) return;
|
||||
var text = read_file(path);
|
||||
text = text.replace(/\r/g, "\\r");
|
||||
text = text.replace(/\n/g, "\\n");
|
||||
text = text.replace(/"/g, "\\\"");
|
||||
next_load = name;
|
||||
next_path = path;
|
||||
var d = new define([], '"' + text + '"');
|
||||
d.text = true;
|
||||
d.module = false;
|
||||
}
|
||||
|
||||
function tab(str, tabs) {
|
||||
var lines = str.split("\n");
|
||||
for (var i in lines) {
|
||||
lines[i] = tabs + lines[i];
|
||||
}
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
function write(str) {
|
||||
fs.writeFile(params.out, str);
|
||||
console.log('Saved to ' + params.out);
|
||||
}
|
||||
|
||||
function fail() {
|
||||
console.log('Build failed.');
|
||||
process.exit(0);
|
||||
}
|
||||
108
utils/closure.js
108
utils/closure.js
@ -1,108 +0,0 @@
|
||||
/// # Google Closure Compiler Service #
|
||||
/// https://github.com/weaver/scribbles/blob/master/node/google-closure/lib/closure.js
|
||||
/// Compress javascript with Node.js using the Closure Compiler
|
||||
/// Service.
|
||||
|
||||
var sys = require('sys');
|
||||
|
||||
exports.compile = compile;
|
||||
|
||||
// Use the Google Closure Compiler Service to compress Javascript
|
||||
// code.
|
||||
//
|
||||
// + code - String of javascript to compress
|
||||
// + next - Function callback that accepts.
|
||||
//
|
||||
// This method will POST the `code` to the compiler service. If an
|
||||
// error occurs, `next()` will be called with an `Error` object as the
|
||||
// first argument. Otherwise, the `next()` will be called with `null`
|
||||
// as the first argument and a String of compressed javascript as the
|
||||
// second argument.
|
||||
//
|
||||
// compile('... javascript ...', function(err, result) {
|
||||
// if (err) throw err;
|
||||
//
|
||||
// ... do something with result ...
|
||||
// });
|
||||
//
|
||||
// Returns nothing.
|
||||
function compile(code, next) {
|
||||
try {
|
||||
var qs = require('querystring'),
|
||||
http = require('http'),
|
||||
host = 'closure-compiler.appspot.com',
|
||||
body = qs.stringify({
|
||||
js_code: code.toString('utf-8'),
|
||||
compilation_level: 'SIMPLE_OPTIMIZATIONS',
|
||||
output_format: 'json',
|
||||
output_info: 'compiled_code'
|
||||
}),
|
||||
client = http.createClient(80, host).on('error', next),
|
||||
req = client.request('POST', '/compile', {
|
||||
'Host': host,
|
||||
'Content-Length': body.length,
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
});
|
||||
|
||||
req.on('error', next).end(body);
|
||||
|
||||
req.on('response', function(res) {
|
||||
if (res.statusCode != 200)
|
||||
next(new Error('Unexpected HTTP response: ' + res.statusCode));
|
||||
else
|
||||
capture(res, 'utf-8', parseResponse);
|
||||
});
|
||||
|
||||
function parseResponse(err, data) {
|
||||
err ? next(err) : loadJSON(data, function(err, obj) {
|
||||
var error;
|
||||
if (err)
|
||||
next(err);
|
||||
else if ((error = obj.errors || obj.serverErrors || obj.warnings))
|
||||
next(new Error('Failed to compile: ' + sys.inspect(error)));
|
||||
else
|
||||
next(null, obj.compiledCode);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
}
|
||||
|
||||
// Convert a Stream to a String.
|
||||
//
|
||||
// + input - Stream object
|
||||
// + encoding - String input encoding
|
||||
// + next - Function error/success callback
|
||||
//
|
||||
// Returns nothing.
|
||||
function capture(input, encoding, next) {
|
||||
var buffer = '';
|
||||
|
||||
input.on('data', function(chunk) {
|
||||
buffer += chunk.toString(encoding);
|
||||
});
|
||||
|
||||
input.on('end', function() {
|
||||
next(null, buffer);
|
||||
});
|
||||
|
||||
input.on('error', next);
|
||||
}
|
||||
|
||||
// Convert JSON.load() to callback-style.
|
||||
//
|
||||
// + data - String value to load
|
||||
// + next - Function error/success callback
|
||||
//
|
||||
// Returns nothing.
|
||||
function loadJSON(data, next) {
|
||||
var err, obj;
|
||||
|
||||
try {
|
||||
obj = JSON.parse(data);
|
||||
} catch (x) {
|
||||
err = x;
|
||||
}
|
||||
next(err, obj);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
/**
|
||||
* dat-gui JavaScript Controller Library
|
||||
* http://code.google.com/p/dat-gui
|
||||
*
|
||||
* Copyright 2011 Data Arts Team, Google Creative Lab
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
Loading…
Reference in New Issue
Block a user