library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Using classses

Browse Source
This commit is contained in:
Tomas Korcak 2015-08-14 18:27:54 +02:00
parent 78e84d8c3b
commit 075e499065
33 changed files with 2360 additions and 6914 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.editorconfig Normal file
View File

@ -0,0 +1,17 @@
# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
max_line_length = 80
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = false
[COMMIT_EDITMSG]
max_line_length = 0

4405
build/dat.gui.js
View File

File diff suppressed because one or more lines are too long

2
build/dat.gui.min.js vendored
View File

File diff suppressed because one or more lines are too long

69
example.html
View File

@ -3,11 +3,74 @@
<head> <head>
</head> </head>
<body> <body>
<script type="text/javascript" src="build/dat.gui.min.js"></script> <script type="text/javascript" src="build/dat.gui.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var obj = { x: 5 }; var obj = {
example: {
message: 'Hello World',
speed: 42,
displayOutline: false,
explode: function () {
console.log('Bang!');
},
},
noiseStrength: 10,
growthSpeed: 0.2,
maxSize: 6,
message: null,
speed: null,
flow: {
speed: 0.4,
noiseStrength: 10
},
letters: {
growthSpeed: 0.2,
maxSize: 10,
message: 'folders'
},
colors: {
color0: "#ffae23", // CSS string
color1: [ 0, 128, 255 ], // RGB array
color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
}
};
var gui = new dat.gui.GUI(); var gui = new dat.gui.GUI();
gui.add(obj, 'x'); gui.add(obj.example, 'message');
gui.add(obj.example, 'speed', -5, 5);
gui.add(obj.example, 'displayOutline');
gui.add(obj.example, 'explode');
gui.add(obj, 'noiseStrength').step(5); // Increment amount
gui.add(obj, 'growthSpeed', -5, 5); // Min and max
gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
// Choose from accepted values
gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
// Choose from named values
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
var f1 = gui.addFolder('Flow Field');
f1.add(obj.flow, 'speed');
f1.add(obj.flow, 'noiseStrength');
var f2 = gui.addFolder('Letters');
f2.add(obj.letters, 'growthSpeed');
f2.add(obj.letters, 'maxSize');
f2.add(obj.letters, 'message');
gui.addColor(obj.colors, 'color0');
gui.addColor(obj.colors, 'color1');
gui.addColor(obj.colors, 'color2');
gui.addColor(obj.colors, 'color3');
</script> </script>
</body> </body>
</html> </html>

15
package.json
View File

@ -7,23 +7,32 @@
"test": "tests" "test": "tests"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "node ./node_modules/eslint/bin/eslint.js src/",
"build": "webpack && webpack --config ./webpack.config.min.js" "build": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
"dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/dataarts/dat.gui.git" "url": "git+https://github.com/dataarts/dat.gui.git"
}, },
"author": "Data Arts Team, Google Creative Lab", "author": "Data Arts Team, Google Creative Lab",
"license": "Apache 2.0", "license": "Apache-2.0",
"bugs": { "bugs": {
"url": "https://github.com/dataarts/dat.gui/issues" "url": "https://github.com/dataarts/dat.gui/issues"
}, },
"homepage": "https://github.com/dataarts/dat.gui#readme", "homepage": "https://github.com/dataarts/dat.gui#readme",
"devDependencies": { "devDependencies": {
"babel-core": "^5.8.22",
"babel-eslint": "^4.0.5",
"babel-loader": "^5.3.2",
"css-loader": "^0.16.0", "css-loader": "^0.16.0",
"eslint": "^1.1.0",
"eslint-config-airbnb": "0.0.7",
"eslint-plugin-react": "^3.2.2",
"extend": "^3.0.0", "extend": "^3.0.0",
"html-loader": "^0.3.0", "html-loader": "^0.3.0",
"node-sass": "^3.2.0",
"sass-loader": "^2.0.0",
"style-loader": "^0.12.3", "style-loader": "^0.12.3",
"webpack": "^1.11.0" "webpack": "^1.11.0"
} }

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

@ -13,34 +13,58 @@
import interpret from './interpret'; import interpret from './interpret';
import math from './math'; import math from './math';
import toString from './toString'; import colorToString from './toString';
import common from '../utils/common'; import common from '../utils/common';
var Color = function () { class Color {
constructor() {
this.__state = interpret.apply(this, arguments); this.__state = interpret.apply(this, arguments);
if (this.__state === false) { if (this.__state === false) {
throw 'Failed to interpret color arguments'; throw 'Failed to interpret color arguments';
} }
this.__state.a = this.__state.a || 1; this.__state.a = this.__state.a || 1;
}
toString() {
return colorToString(this);
}
toOriginal() {
return this.__state.conversion.write(this);
}
}
Color.recalculateRGB = function(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';
}
};
Color.recalculateHSV = function(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;
}
}; };
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a']; 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, 'r', 2);
defineRGBComponent(Color.prototype, 'g', 1); defineRGBComponent(Color.prototype, 'g', 1);
defineRGBComponent(Color.prototype, 'b', 0); defineRGBComponent(Color.prototype, 'b', 0);
@ -51,132 +75,75 @@ defineHSVComponent(Color.prototype, 'v');
Object.defineProperty(Color.prototype, 'a', { Object.defineProperty(Color.prototype, 'a', {
get: function () { get: function () {
return this.__state.a; return this.__state.a;
}, },
set: function (v) { set: function (v) {
this.__state.a = v; this.__state.a = v;
} }
}); });
Object.defineProperty(Color.prototype, 'hex', { Object.defineProperty(Color.prototype, 'hex', {
get: function () {
get: function () { if (!this.__state.space !== 'HEX') {
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
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;
} }
return this.__state.hex;
},
set: function (v) {
this.__state.space = 'HEX';
this.__state.hex = v;
}
}); });
function defineRGBComponent(target, component, componentHexIndex) { function defineRGBComponent(target, component, componentHexIndex) {
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function () {
if (this.__state.space === 'RGB') {
return this.__state[component];
}
get: function () { Color.recalculateRGB(this, component, componentHexIndex);
if (this.__state.space === 'RGB') { return this.__state[component];
return this.__state[component]; },
}
recalculateRGB(this, component, componentHexIndex); set: function (v) {
if (this.__state.space !== 'RGB') {
return this.__state[component]; Color.recalculateRGB(this, component, componentHexIndex);
this.__state.space = 'RGB';
}, }
set: function (v) {
if (this.__state.space !== 'RGB') {
recalculateRGB(this, component, componentHexIndex);
this.__state.space = 'RGB';
}
this.__state[component] = v;
}
});
this.__state[component] = v;
}
});
} }
function defineHSVComponent(target, component) { function defineHSVComponent(target, component) {
Object.defineProperty(target, component, {
get: function () {
if (this.__state.space === 'HSV')
return this.__state[component];
Object.defineProperty(target, component, { Color.recalculateHSV(this);
get: function () { return this.__state[component];
if (this.__state.space === 'HSV') },
return this.__state[component];
recalculateHSV(this); set: function (v) {
if (this.__state.space !== 'HSV') {
return this.__state[component]; Color.recalculateHSV(this);
this.__state.space = 'HSV';
}, }
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';
this.__state[component] = v;
} }
});
}
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;
}
} }
export default Color; export default Color;

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

@ -16,18 +16,14 @@ import common from '../utils/common';
var result, toReturn; var result, toReturn;
var interpret = function() { var interpret = function () {
toReturn = false; toReturn = false;
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0]; var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
common.each(INTERPRETATIONS, function (family) {
common.each(INTERPRETATIONS, function(family) {
if (family.litmus(original)) { if (family.litmus(original)) {
common.each(family.conversions, function (conversion, conversionName) {
common.each(family.conversions, function(conversion, conversionName) {
result = conversion.read(original); result = conversion.read(original);
if (toReturn === false && result !== false) { if (toReturn === false && result !== false) {
@ -35,33 +31,23 @@ var interpret = function() {
result.conversionName = conversionName; result.conversionName = conversionName;
result.conversion = conversion; result.conversion = conversion;
return common.BREAK; return common.BREAK;
} }
}); });
return common.BREAK; return common.BREAK;
} }
}); });
return toReturn; return toReturn;
}; };
var INTERPRETATIONS = [ var INTERPRETATIONS = [
// Strings // Strings
{ {
litmus: common.isString, litmus: common.isString,
conversions: { conversions: {
THREE_CHAR_HEX: { THREE_CHAR_HEX: {
read: function (original) {
read: function(original) {
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
if (test === null) return false; if (test === null) return false;
@ -69,21 +55,19 @@ var INTERPRETATIONS = [
return { return {
space: 'HEX', space: 'HEX',
hex: parseInt( hex: parseInt(
'0x' + '0x' +
test[1].toString() + test[1].toString() + test[1].toString() + test[1].toString() +
test[2].toString() + test[2].toString() + test[2].toString() + test[2].toString() +
test[3].toString() + test[3].toString()) test[3].toString() + test[3].toString())
}; };
}, },
write: toString write: toString
}, },
SIX_CHAR_HEX: { SIX_CHAR_HEX: {
read: function (original) {
read: function(original) {
var test = original.match(/^#([A-F0-9]{6})$/i); var test = original.match(/^#([A-F0-9]{6})$/i);
if (test === null) return false; if (test === null) return false;
@ -96,12 +80,10 @@ var INTERPRETATIONS = [
}, },
write: toString write: toString
}, },
CSS_RGB: { CSS_RGB: {
read: function (original) {
read: function(original) {
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
if (test === null) return false; if (test === null) return false;
@ -116,12 +98,10 @@ var INTERPRETATIONS = [
}, },
write: toString write: toString
}, },
CSS_RGBA: { CSS_RGBA: {
read: function (original) {
read: function(original) {
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/); var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
if (test === null) return false; if (test === null) return false;
@ -133,26 +113,21 @@ var INTERPRETATIONS = [
b: parseFloat(test[3]), b: parseFloat(test[3]),
a: parseFloat(test[4]) a: parseFloat(test[4])
}; };
}, },
write: toString write: toString
} }
} }
}, },
// Numbers // Numbers
{ {
litmus: common.isNumber, litmus: common.isNumber,
conversions: { conversions: {
HEX: { HEX: {
read: function(original) { read: function (original) {
return { return {
space: 'HEX', space: 'HEX',
hex: original, hex: original,
@ -160,7 +135,7 @@ var INTERPRETATIONS = [
} }
}, },
write: function(color) { write: function (color) {
return color.hex; return color.hex;
} }
} }
@ -171,13 +146,11 @@ var INTERPRETATIONS = [
// Arrays // Arrays
{ {
litmus: common.isArray, litmus: common.isArray,
conversions: { conversions: {
RGB_ARRAY: { RGB_ARRAY: {
read: function(original) { read: function (original) {
if (original.length != 3) return false; if (original.length != 3) return false;
return { return {
space: 'RGB', space: 'RGB',
@ -187,14 +160,13 @@ var INTERPRETATIONS = [
}; };
}, },
write: function(color) { write: function (color) {
return [color.r, color.g, color.b]; return [color.r, color.g, color.b];
} }
}, },
RGBA_ARRAY: { RGBA_ARRAY: {
read: function(original) { read: function (original) {
if (original.length != 4) return false; if (original.length != 4) return false;
return { return {
space: 'RGB', space: 'RGB',
@ -205,14 +177,11 @@ var INTERPRETATIONS = [
}; };
}, },
write: function(color) { write: function (color) {
return [color.r, color.g, color.b, color.a]; return [color.r, color.g, color.b, color.a];
} }
} }
} }
}, },
// Objects // Objects
@ -223,11 +192,11 @@ var INTERPRETATIONS = [
conversions: { conversions: {
RGBA_OBJ: { RGBA_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.r) && if (common.isNumber(original.r) &&
common.isNumber(original.g) && common.isNumber(original.g) &&
common.isNumber(original.b) && common.isNumber(original.b) &&
common.isNumber(original.a)) { common.isNumber(original.a)) {
return { return {
space: 'RGB', space: 'RGB',
r: original.r, r: original.r,
@ -239,7 +208,7 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
r: color.r, r: color.r,
g: color.g, g: color.g,
@ -250,10 +219,10 @@ var INTERPRETATIONS = [
}, },
RGB_OBJ: { RGB_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.r) && if (common.isNumber(original.r) &&
common.isNumber(original.g) && common.isNumber(original.g) &&
common.isNumber(original.b)) { common.isNumber(original.b)) {
return { return {
space: 'RGB', space: 'RGB',
r: original.r, r: original.r,
@ -264,7 +233,7 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
r: color.r, r: color.r,
g: color.g, g: color.g,
@ -274,11 +243,11 @@ var INTERPRETATIONS = [
}, },
HSVA_OBJ: { HSVA_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.h) && if (common.isNumber(original.h) &&
common.isNumber(original.s) && common.isNumber(original.s) &&
common.isNumber(original.v) && common.isNumber(original.v) &&
common.isNumber(original.a)) { common.isNumber(original.a)) {
return { return {
space: 'HSV', space: 'HSV',
h: original.h, h: original.h,
@ -290,7 +259,7 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
h: color.h, h: color.h,
s: color.s, s: color.s,
@ -301,10 +270,10 @@ var INTERPRETATIONS = [
}, },
HSV_OBJ: { HSV_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.h) && if (common.isNumber(original.h) &&
common.isNumber(original.s) && common.isNumber(original.s) &&
common.isNumber(original.v)) { common.isNumber(original.v)) {
return { return {
space: 'HSV', space: 'HSV',
h: original.h, h: original.h,
@ -315,21 +284,16 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
h: color.h, h: color.h,
s: color.s, s: color.s,
v: color.v v: color.v
} }
} }
} }
} }
} }
]; ];
export default interpret; export default interpret;

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

@ -15,81 +15,81 @@ var tmpComponent;
var ColorMath = { var ColorMath = {
hsv_to_rgb: function(h, s, v) { hsv_to_rgb: function (h, s, v) {
var hi = Math.floor(h / 60) % 6; var hi = Math.floor(h / 60) % 6;
var f = h / 60 - Math.floor(h / 60); var f = h / 60 - Math.floor(h / 60);
var p = v * (1.0 - s); var p = v * (1.0 - s);
var q = v * (1.0 - (f * s)); var q = v * (1.0 - (f * s));
var t = v * (1.0 - ((1.0 - f) * s)); var t = v * (1.0 - ((1.0 - f) * s));
var c = [ var c = [
[v, t, p], [v, t, p],
[q, v, p], [q, v, p],
[p, v, t], [p, v, t],
[p, q, v], [p, q, v],
[t, p, v], [t, p, v],
[v, p, q] [v, p, q]
][hi]; ][hi];
return { return {
r: c[0] * 255, r: c[0] * 255,
g: c[1] * 255, g: c[1] * 255,
b: c[2] * 255 b: c[2] * 255
}; };
}, },
rgb_to_hsv: function(r, g, b) { rgb_to_hsv: function (r, g, b) {
var min = Math.min(r, g, b), var min = Math.min(r, g, b),
max = Math.max(r, g, b), max = Math.max(r, g, b),
delta = max - min, delta = max - min,
h, s; h, s;
if (max != 0) { if (max != 0) {
s = delta / max; s = delta / max;
} else { } else {
return { return {
h: NaN, h: NaN,
s: 0, s: 0,
v: 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));
} }
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));
}
} }
export default ColorMath; export default ColorMath;

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

@ -13,7 +13,7 @@
import common from '../utils/common'; import common from '../utils/common';
var toString = function (color) { var colorToString = function (color) {
if (color.a == 1 || common.isUndefined(color.a)) { if (color.a == 1 || common.isUndefined(color.a)) {
var s = color.hex.toString(16); var s = color.hex.toString(16);
while (s.length < 6) { while (s.length < 6) {
@ -26,4 +26,4 @@ var toString = function (color) {
} }
}; };
export default toString; export default colorToString;

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

@ -24,9 +24,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var BooleanController = function(object, property) { class BooleanController extends Controller {
constructor(object, property) {
BooleanController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
this.__prev = this.getValue(); this.__prev = this.getValue();
@ -34,6 +34,9 @@ var BooleanController = function(object, property) {
this.__checkbox = document.createElement('input'); this.__checkbox = document.createElement('input');
this.__checkbox.setAttribute('type', 'checkbox'); this.__checkbox.setAttribute('type', 'checkbox');
function onChange() {
_this.setValue(!_this.__prev);
}
dom.bind(this.__checkbox, 'change', onChange, false); dom.bind(this.__checkbox, 'change', onChange, false);
@ -41,47 +44,27 @@ var BooleanController = function(object, property) {
// Match original value // Match original value
this.updateDisplay(); this.updateDisplay();
}
function onChange() { setValue(v) {
_this.setValue(!_this.__prev); var toReturn = super.setValue(v);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
this.__prev = this.getValue();
return toReturn;
}
updateDisplay() {
if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true;
} else {
this.__checkbox.checked = false;
} }
}; return super.updateDisplay();
}
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');
this.__checkbox.checked = true;
} else {
this.__checkbox.checked = false;
}
return BooleanController.superclass.prototype.updateDisplay.call(this);
}
}
);
export default BooleanController; export default BooleanController;

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

@ -17,292 +17,278 @@ import Color from '../color/Color';
import interpret from '../color/interpret'; import interpret from '../color/interpret';
import common from '../utils/common'; import common from '../utils/common';
var ColorController = function(object, property) { class ColorController extends Controller {
ColorController.superclass.call(this, object, property); constructor(object, property) {
super(object, property);
this.__color = new Color(this.getValue()); this.__color = new Color(this.getValue());
this.__temp = new Color(0); this.__temp = new Color(0);
var _this = this; var _this = this;
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
dom.makeSelectable(this.domElement, false); dom.makeSelectable(this.domElement, false);
this.__selector = document.createElement('div'); this.__selector = document.createElement('div');
this.__selector.className = 'selector'; this.__selector.className = 'selector';
this.__saturation_field = document.createElement('div'); this.__saturation_field = document.createElement('div');
this.__saturation_field.className = 'saturation-field'; this.__saturation_field.className = 'saturation-field';
this.__field_knob = document.createElement('div'); this.__field_knob = document.createElement('div');
this.__field_knob.className = 'field-knob'; this.__field_knob.className = 'field-knob';
this.__field_knob_border = '2px solid '; this.__field_knob_border = '2px solid ';
this.__hue_knob = document.createElement('div'); this.__hue_knob = document.createElement('div');
this.__hue_knob.className = 'hue-knob'; this.__hue_knob.className = 'hue-knob';
this.__hue_field = document.createElement('div'); this.__hue_field = document.createElement('div');
this.__hue_field.className = 'hue-field'; this.__hue_field.className = 'hue-field';
this.__input = document.createElement('input'); this.__input = document.createElement('input');
this.__input.type = 'text'; this.__input.type = 'text';
this.__input_textShadow = '0 1px 1px '; this.__input_textShadow = '0 1px 1px ';
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
if (e.keyCode === 13) { // on enter if (e.keyCode === 13) { // on enter
onBlur.call(this); onBlur.call(this);
} }
}); });
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__selector, 'mousedown', function (_e) { dom.bind(this.__selector, 'mousedown', function (_e) {
dom dom
.addClass(this, 'drag') .addClass(this, 'drag')
.bind(window, 'mouseup', function(e) { .bind(window, 'mouseup', function (e) {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
}); });
var value_field = document.createElement('div'); var value_field = document.createElement('div');
common.extend(this.__selector.style, { common.extend(this.__selector.style, {
width: '122px', width: '122px',
height: '102px', height: '102px',
padding: '3px', padding: '3px',
backgroundColor: '#222', backgroundColor: '#222',
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)' boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
}); });
common.extend(this.__field_knob.style, { common.extend(this.__field_knob.style, {
position: 'absolute', position: 'absolute',
width: '12px', width: '12px',
height: '12px', height: '12px',
border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'), border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'),
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)', boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
borderRadius: '12px', borderRadius: '12px',
zIndex: 1 zIndex: 1
}); });
common.extend(this.__hue_knob.style, { common.extend(this.__hue_knob.style, {
position: 'absolute', position: 'absolute',
width: '15px', width: '15px',
height: '2px', height: '2px',
borderRight: '4px solid #fff', borderRight: '4px solid #fff',
zIndex: 1 zIndex: 1
}); });
common.extend(this.__saturation_field.style, { common.extend(this.__saturation_field.style, {
width: '100px', width: '100px',
height: '100px', height: '100px',
border: '1px solid #555', border: '1px solid #555',
marginRight: '3px', marginRight: '3px',
display: 'inline-block', display: 'inline-block',
cursor: 'pointer' cursor: 'pointer'
}); });
common.extend(value_field.style, { common.extend(value_field.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
background: 'none' background: 'none'
}); });
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000'); linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
common.extend(this.__hue_field.style, { common.extend(this.__hue_field.style, {
width: '15px', width: '15px',
height: '100px', height: '100px',
display: 'inline-block', display: 'inline-block',
border: '1px solid #555', border: '1px solid #555',
cursor: 'ns-resize' cursor: 'ns-resize'
}); });
hueGradient(this.__hue_field); hueGradient(this.__hue_field);
common.extend(this.__input.style, { common.extend(this.__input.style, {
outline: 'none', outline: 'none',
// width: '120px', // width: '120px',
textAlign: 'center', textAlign: 'center',
// padding: '4px', // padding: '4px',
// marginBottom: '6px', // marginBottom: '6px',
color: '#fff', color: '#fff',
border: 0, border: 0,
fontWeight: 'bold', fontWeight: 'bold',
textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)' textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)'
}); });
dom.bind(this.__saturation_field, 'mousedown', fieldDown); dom.bind(this.__saturation_field, 'mousedown', fieldDown);
dom.bind(this.__field_knob, 'mousedown', fieldDown); dom.bind(this.__field_knob, 'mousedown', fieldDown);
dom.bind(this.__hue_field, 'mousedown', function(e) { dom.bind(this.__hue_field, 'mousedown', function (e) {
setH(e); setH(e);
dom.bind(window, 'mousemove', setH); dom.bind(window, 'mousemove', setH);
dom.bind(window, 'mouseup', unbindH); dom.bind(window, 'mouseup', unbindH);
}); });
function fieldDown(e) { function fieldDown(e) {
setSV(e); setSV(e);
// document.body.style.cursor = 'none'; // document.body.style.cursor = 'none';
dom.bind(window, 'mousemove', setSV); dom.bind(window, 'mousemove', setSV);
dom.bind(window, 'mouseup', unbindSV); dom.bind(window, 'mouseup', unbindSV);
} }
function unbindSV() { function unbindSV() {
dom.unbind(window, 'mousemove', setSV); dom.unbind(window, 'mousemove', setSV);
dom.unbind(window, 'mouseup', unbindSV); dom.unbind(window, 'mouseup', unbindSV);
// document.body.style.cursor = 'default'; // 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;
function onBlur() {
var i = interpret(this.value);
if (i !== false) {
_this.__color.__state = i;
_this.setValue(_this.__color.toOriginal()); _this.setValue(_this.__color.toOriginal());
} else {
this.value = _this.__color.toString();
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;
} }
} }
function unbindH() { updateDisplay() {
dom.unbind(window, 'mousemove', setH); var i = interpret(this.getValue());
dom.unbind(window, 'mouseup', unbindH);
}
this.__saturation_field.appendChild(value_field); if (i !== false) {
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); var mismatch = false;
this.domElement.appendChild(this.__selector);
this.updateDisplay(); // Check for mismatch on the interpreted value.
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.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);
common.extend(this.__temp.__state, this.__color.__state); // If nothing diverges, we keep our previous values
// for statefulness, otherwise we recalculate fresh
this.__temp.a = 1; if (mismatch) {
common.extend(this.__color.__state, i);
var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
var _flip = 255 - flip;
common.extend(this.__field_knob.style, {
marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')'
});
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
this.__temp.s = 1;
this.__temp.v = 1;
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
common.extend(this.__input.style, {
backgroundColor: this.__input.value = this.__color.toString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip +')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)'
});
} }
} }
); common.extend(this.__temp.__state, this.__color.__state);
var vendors = ['-moz-','-o-','-webkit-','-ms-','']; 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) { function linearGradient(elem, x, a, b) {
elem.style.background = ''; elem.style.background = '';
common.each(vendors, function(vendor) { common.each(vendors, function (vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); '; elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
}); });
} }

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

@ -21,8 +21,8 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var Controller = function(object, property) { class Controller {
constructor(object, property) {
this.initialValue = object[property]; this.initialValue = object[property];
/** /**
@ -56,82 +56,73 @@ var Controller = function(object, property) {
* @ignore * @ignore
*/ */
this.__onFinishChange = undefined; this.__onFinishChange = undefined;
}
}; /**
* 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(fnc) {
this.__onChange = fnc;
return this;
}
common.extend( /**
* 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(fnc) {
this.__onFinishChange = fnc;
return this;
}
Controller.prototype, /**
* Change the value of <code>object[property]</code>
/** @lends dat.controllers.Controller.prototype */ *
{ * @param {Object} newValue The new value of <code>object[property]</code>
*/
/** setValue(newValue) {
* Specify that a function fire every time someone changes the value with this.object[this.property] = newValue;
* this Controller. if (this.__onChange) {
* this.__onChange.call(this, newValue);
* @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()
}
} }
); this.updateDisplay();
return this;
}
/**
* Gets the value of <code>object[property]</code>
*
* @returns {Object} The current value of <code>object[property]</code>
*/
getValue() {
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() {
return this;
}
/**
* @returns {Boolean} true if the value has deviated from initialValue
*/
isModified() {
return this.initialValue !== this.getValue()
}
}
export default Controller; export default Controller;

60
src/dat/controllers/ControllerFactory.js
View File

@ -20,41 +20,41 @@ import BooleanController from './BooleanController';
import common from '../utils/common'; import common from '../utils/common';
var ControllerFactory = function (object, property) { var ControllerFactory = function (object, property) {
var initialValue = object[property]; var initialValue = object[property];
// Providing options? // Providing options?
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) { if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
return new OptionController(object, property, arguments[2]); return new OptionController(object, property, arguments[2]);
}
// Providing a map?
if (common.isNumber(initialValue)) {
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
// Has min and max.
if (common.isNumber(arguments[4])) // has step
{
return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
}
else {
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
}
} else {
return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
} }
}
// Providing a map? if (common.isString(initialValue)) {
if (common.isNumber(initialValue)) { return new StringController(object, property);
}
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) { if (common.isFunction(initialValue)) {
// Has min and max. return new FunctionController(object, property, '');
if (common.isNumber(arguments[4])) // has step }
{
return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
}
else {
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)) { if (common.isBoolean(initialValue)) {
return new StringController(object, property); return new BooleanController(object, property);
} }
if (common.isFunction(initialValue)) {
return new FunctionController(object, property, '');
}
if (common.isBoolean(initialValue)) {
return new BooleanController(object, property);
}
}; };
export default ControllerFactory; export default ControllerFactory;

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

@ -25,46 +25,34 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var FunctionController = function(object, property, text) { class FunctionController extends Controller{
constructor(object, property, text) {
FunctionController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
this.__button = document.createElement('div'); this.__button = document.createElement('div');
this.__button.innerHTML = text === undefined ? 'Fire' : text; this.__button.innerHTML = text === undefined ? 'Fire' : text;
dom.bind(this.__button, 'click', function(e) { dom.bind(this.__button, 'click', function (e) {
e.preventDefault(); e.preventDefault();
_this.fire(); _this.fire();
return false; return false;
}); });
dom.addClass(this.__button, 'button'); dom.addClass(this.__button, 'button');
this.domElement.appendChild(this.__button); this.domElement.appendChild(this.__button);
}
fire() {
}; if (this.__onChange) {
this.__onChange.call(this);
FunctionController.superclass = Controller;
common.extend(
FunctionController.prototype,
Controller.prototype,
{
fire: function() {
if (this.__onChange) {
this.__onChange.call(this);
}
this.getValue().call(this.object);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
}
} }
this.getValue().call(this.object);
); if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
}
}
export default FunctionController; export default FunctionController;

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

@ -14,6 +14,15 @@
import Controller from './Controller'; import Controller from './Controller';
import common from '../utils/common'; import common from '../utils/common';
function numDecimals(x) {
x = x.toString();
if (x.indexOf('.') > -1) {
return x.length - x.indexOf('.') - 1;
} else {
return 0;
}
}
/** /**
* @class Represents a given property of an object that is a number. * @class Represents a given property of an object that is a number.
* *
@ -28,9 +37,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberController = function(object, property, params) { class NumberController extends Controller {
constructor(object, property, params) {
NumberController.superclass.call(this, object, property); super(object, property);
params = params || {}; params = params || {};
@ -40,99 +49,76 @@ var NumberController = function(object, property, params) {
if (common.isUndefined(this.__step)) { if (common.isUndefined(this.__step)) {
if (this.initialValue == 0) { if (this.initialValue == 0) {
this.__impliedStep = 1; // What are we, psychics? this.__impliedStep = 1; // What are we, psychics?
} else { } else {
// Hey Doug, check this out. // Hey Doug, check this out.
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue))/Math.LN10))/10; this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
} }
} else { } else {
this.__impliedStep = this.__step; this.__impliedStep = this.__step;
} }
this.__precision = numDecimals(this.__impliedStep); this.__precision = numDecimals(this.__impliedStep);
}; }
NumberController.superclass = Controller;
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;
this.__impliedStep = v;
this.__precision = numDecimals(v);
return this;
}
setValue(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;
function numDecimals(x) {
x = x.toString();
if (x.indexOf('.') > -1) {
return x.length - x.indexOf('.') - 1;
} else {
return 0;
} }
return super.setValue(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(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(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(v) {
this.__step = v;
this.__impliedStep = v;
this.__precision = numDecimals(v);
return this;
}
} }
export default NumberController; export default NumberController;

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

@ -15,6 +15,11 @@ import NumberController from './NumberController';
import dom from '../dom/dom'; import dom from '../dom/dom';
import common from '../utils/common'; import common from '../utils/common';
function roundToDecimal(value, decimals) {
var tenTo = Math.pow(10, decimals);
return Math.round(value * tenTo) / tenTo;
}
/** /**
* @class Represents a given property of an object that is a number and * @class Represents a given property of an object that is a number and
* provides an input element with which to manipulate it. * provides an input element with which to manipulate it.
@ -31,99 +36,81 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberControllerBox = function(object, property, params) { class NumberControllerBox extends NumberController {
constructor(object, property, params) {
super(object, property, params);
this.__truncationSuspended = false; this.__truncationSuspended = false;
NumberControllerBox.superclass.call(this, object, property, params); var _this = this;
var _this = this; /**
* {Number} Previous mouse y position
* @ignore
*/
var prev_y;
/** this.__input = document.createElement('input');
* {Number} Previous mouse y position this.__input.setAttribute('type', 'text');
* @ignore
*/
var prev_y;
this.__input = document.createElement('input'); // Makes it so manually specified values are not truncated.
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) {
dom.bind(this.__input, 'change', onChange); // When pressing entire, you can be as precise as you want.
dom.bind(this.__input, 'blur', onBlur); if (e.keyCode === 13) {
dom.bind(this.__input, 'mousedown', onMouseDown); _this.__truncationSuspended = true;
dom.bind(this.__input, 'keydown', function(e) { this.blur();
_this.__truncationSuspended = false;
// 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 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 roundToDecimal(value, decimals) { function onMouseDown(e) {
var tenTo = Math.pow(10, decimals); dom.bind(window, 'mousemove', onMouseDrag);
return Math.round(value * tenTo) / tenTo; 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);
}
updateDisplay() {
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
return super.updateDisplay();
}
} }
export default NumberControllerBox; export default NumberControllerBox;

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

@ -17,6 +17,10 @@ import css from '../utils/css';
import common from '../utils/common'; import common from '../utils/common';
import styleSheet from '!style!css!sass!./NumberControllerSlider.scss'; import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
function map(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}
/** /**
* @class Represents a given property of an object that is a number, contains * @class Represents a given property of an object that is a number, contains
* a minimum and maximum, and provides a slider element with which to * a minimum and maximum, and provides a slider element with which to
@ -35,90 +39,70 @@ import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberControllerSlider = function(object, property, min, max, step) { class NumberControllerSlider extends NumberController {
constructor(object, property, min, max, step) {
super(object, property, {min: min, max: max, step: step});
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step }); var _this = this;
var _this = this; this.__background = document.createElement('div');
this.__foreground = document.createElement('div');
this.__background = document.createElement('div');
this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown);
dom.bind(this.__background, 'mousedown', onMouseDown); dom.addClass(this.__background, 'slider');
dom.addClass(this.__foreground, 'slider-fg');
dom.addClass(this.__background, 'slider'); function onMouseDown(e) {
dom.addClass(this.__foreground, 'slider-fg');
function onMouseDown(e) { dom.bind(window, 'mousemove', onMouseDrag);
dom.bind(window, 'mouseup', onMouseUp);
dom.bind(window, 'mousemove', onMouseDrag); onMouseDrag(e);
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());
} }
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);
} }
this.updateDisplay(); updateDisplay() {
var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
this.__background.appendChild(this.__foreground); this.__foreground.style.width = pct * 100 + '%';
this.domElement.appendChild(this.__background); return super.updateDisplay();
}
}; }
NumberControllerSlider.superclass = NumberController;
/** /**
* Injects default stylesheet for slider elements. * Injects default stylesheet for slider elements.
*/ */
NumberControllerSlider.useDefaultStyles = function() { NumberControllerSlider.useDefaultStyles = function () {
css.inject(styleSheet); 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));
}
export default NumberControllerSlider; export default NumberControllerSlider;

4
src/dat/controllers/NumberControllerSlider.scss
View File

@ -12,7 +12,7 @@
*/ */
.slider { .slider {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
height: 1em; height: 1em;
border-radius: 1em; border-radius: 1em;
background-color: #eee; background-color: #eee;
@ -33,7 +33,7 @@
display: inline-block; display: inline-block;
border-radius: 1em; border-radius: 1em;
background-color: #fff; background-color: #fff;
border: 1px solid #aaa; border: 1px solid #aaa;
content: ''; content: '';
float: right; float: right;
margin-right: -1em; margin-right: -1em;

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

@ -28,9 +28,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var OptionController = function(object, property, options) { class OptionController extends Controller{
constructor(object, property, options) {
OptionController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
@ -41,58 +41,46 @@ var OptionController = function(object, property, options) {
this.__select = document.createElement('select'); this.__select = document.createElement('select');
if (common.isArray(options)) { if (common.isArray(options)) {
var map = {}; var map = {};
common.each(options, function(element) { common.each(options, function (element) {
map[element] = element; map[element] = element;
}); });
options = map; options = map;
} }
common.each(options, function(value, key) { common.each(options, function (value, key) {
var opt = document.createElement('option'); var opt = document.createElement('option');
opt.innerHTML = key; opt.innerHTML = key;
opt.setAttribute('value', value); opt.setAttribute('value', value);
_this.__select.appendChild(opt); _this.__select.appendChild(opt);
}); });
// Acknowledge original value // Acknowledge original value
this.updateDisplay(); this.updateDisplay();
dom.bind(this.__select, 'change', function() { dom.bind(this.__select, 'change', function () {
var desiredValue = this.options[this.selectedIndex].value; var desiredValue = this.options[this.selectedIndex].value;
_this.setValue(desiredValue); _this.setValue(desiredValue);
}); });
this.domElement.appendChild(this.__select); this.domElement.appendChild(this.__select);
}
}; setValue (v) {
var toReturn = super.setValue(v);
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);
}
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
} }
return toReturn;
}
); updateDisplay() {
this.__select.value = this.getValue();
return super.updateDisplay();
}
}
export default OptionController; export default OptionController;

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

@ -25,61 +25,48 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var StringController = function(object, property) { class StringController extends Controller {
constructor(object, property) {
super(object, property);
StringController.superclass.call(this, object, property); var _this = this;
var _this = this; this.__input = document.createElement('input');
this.__input.setAttribute('type', 'text');
this.__input = document.createElement('input'); dom.bind(this.__input, 'keyup', onChange);
this.__input.setAttribute('type', 'text'); dom.bind(this.__input, 'change', onChange);
dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'keyup', onChange); dom.bind(this.__input, 'keydown', function (e) {
dom.bind(this.__input, 'change', onChange); if (e.keyCode === 13) {
dom.bind(this.__input, 'blur', onBlur); this.blur();
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);
} }
});
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);
}
updateDisplay() {
// Stops the caret from moving on account of:
// keyup -> setValue -> updateDisplay
if (!dom.isActive(this.__input)) {
this.__input.value = this.getValue();
}
return super.updateDisplay();
}
}
export default StringController; export default StringController;

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

@ -14,99 +14,99 @@
import dom from '../dom/dom'; import dom from '../dom/dom';
import common from '../utils/common'; import common from '../utils/common';
var CenteredDiv = function() { var CenteredDiv = function () {
this.backgroundElement = document.createElement('div'); this.backgroundElement = document.createElement('div');
common.extend(this.backgroundElement.style, { common.extend(this.backgroundElement.style, {
backgroundColor: 'rgba(0,0,0,0.8)', backgroundColor: 'rgba(0,0,0,0.8)',
top: 0, top: 0,
left: 0, left: 0,
display: 'none', display: 'none',
zIndex: '1000', zIndex: '1000',
opacity: 0, opacity: 0,
WebkitTransition: 'opacity 0.2s linear', WebkitTransition: 'opacity 0.2s linear',
transition: 'opacity 0.2s linear' transition: 'opacity 0.2s linear'
}); });
dom.makeFullscreen(this.backgroundElement); dom.makeFullscreen(this.backgroundElement);
this.backgroundElement.style.position = 'fixed'; this.backgroundElement.style.position = 'fixed';
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
common.extend(this.domElement.style, { common.extend(this.domElement.style, {
position: 'fixed', position: 'fixed',
display: 'none', display: 'none',
zIndex: '1001', zIndex: '1001',
opacity: 0, opacity: 0,
WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear', WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
transition: 'transform 0.2s ease-out, opacity 0.2s linear' transition: 'transform 0.2s ease-out, opacity 0.2s linear'
}); });
document.body.appendChild(this.backgroundElement); document.body.appendChild(this.backgroundElement);
document.body.appendChild(this.domElement); document.body.appendChild(this.domElement);
var _this = this; var _this = this;
dom.bind(this.backgroundElement, 'click', function() { dom.bind(this.backgroundElement, 'click', function () {
_this.hide(); _this.hide();
}); });
}; };
CenteredDiv.prototype.show = function() { CenteredDiv.prototype.show = function () {
var _this = this; var _this = this;
this.backgroundElement.style.display = 'block'; this.backgroundElement.style.display = 'block';
this.domElement.style.display = 'block'; this.domElement.style.display = 'block';
this.domElement.style.opacity = 0; this.domElement.style.opacity = 0;
// this.domElement.style.top = '52%'; // this.domElement.style.top = '52%';
this.domElement.style.webkitTransform = 'scale(1.1)'; this.domElement.style.webkitTransform = 'scale(1.1)';
this.layout(); this.layout();
common.defer(function() { common.defer(function () {
_this.backgroundElement.style.opacity = 1; _this.backgroundElement.style.opacity = 1;
_this.domElement.style.opacity = 1; _this.domElement.style.opacity = 1;
_this.domElement.style.webkitTransform = 'scale(1)'; _this.domElement.style.webkitTransform = 'scale(1)';
}); });
}; };
CenteredDiv.prototype.hide = function() { CenteredDiv.prototype.hide = function () {
var _this = this; var _this = this;
var hide = function() { var hide = function () {
_this.domElement.style.display = 'none'; _this.domElement.style.display = 'none';
_this.backgroundElement.style.display = 'none'; _this.backgroundElement.style.display = 'none';
dom.unbind(_this.domElement, 'webkitTransitionEnd', hide); dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
dom.unbind(_this.domElement, 'transitionend', hide); dom.unbind(_this.domElement, 'transitionend', hide);
dom.unbind(_this.domElement, 'oTransitionEnd', hide); dom.unbind(_this.domElement, 'oTransitionEnd', hide);
}; };
dom.bind(this.domElement, 'webkitTransitionEnd', hide); dom.bind(this.domElement, 'webkitTransitionEnd', hide);
dom.bind(this.domElement, 'transitionend', hide); dom.bind(this.domElement, 'transitionend', hide);
dom.bind(this.domElement, 'oTransitionEnd', hide); dom.bind(this.domElement, 'oTransitionEnd', hide);
this.backgroundElement.style.opacity = 0; this.backgroundElement.style.opacity = 0;
// this.domElement.style.top = '48%'; // this.domElement.style.top = '48%';
this.domElement.style.opacity = 0; this.domElement.style.opacity = 0;
this.domElement.style.webkitTransform = 'scale(1.1)'; this.domElement.style.webkitTransform = 'scale(1.1)';
}; };
CenteredDiv.prototype.layout = function() { CenteredDiv.prototype.layout = function () {
this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px'; this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';
this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px'; this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';
}; };
function lockScroll(e) { function lockScroll(e) {
console.log(e); console.log(e);
} }
export default CenteredDiv; export default CenteredDiv;

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

@ -14,33 +14,33 @@
import common from '../utils/common'; import common from '../utils/common';
var EVENT_MAP = { var EVENT_MAP = {
'HTMLEvents': ['change'], 'HTMLEvents': ['change'],
'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'], 'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
'KeyboardEvents': ['keydown'] 'KeyboardEvents': ['keydown']
}; };
var EVENT_MAP_INV = {}; var EVENT_MAP_INV = {};
common.each(EVENT_MAP, function (v, k) { common.each(EVENT_MAP, function (v, k) {
common.each(v, function (e) { common.each(v, function (e) {
EVENT_MAP_INV[e] = k; EVENT_MAP_INV[e] = k;
}); });
}); });
var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/; var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
function cssValueToPixels(val) { function cssValueToPixels(val) {
if (val === '0' || common.isUndefined(val)) return 0; if (val === '0' || common.isUndefined(val)) return 0;
var match = val.match(CSS_VALUE_PIXELS); var match = val.match(CSS_VALUE_PIXELS);
if (!common.isNull(match)) { if (!common.isNull(match)) {
return parseFloat(match[1]); return parseFloat(match[1]);
} }
// TODO ...ems? %? // TODO ...ems? %?
return 0; return 0;
} }
@ -50,233 +50,233 @@ function cssValueToPixels(val) {
*/ */
var dom = { var dom = {
/** /**
* *
* @param elem * @param elem
* @param selectable * @param selectable
*/ */
makeSelectable: function (elem, selectable) { makeSelectable: function (elem, selectable) {
if (elem === undefined || elem.style === undefined) return; if (elem === undefined || elem.style === undefined) return;
elem.onselectstart = selectable ? function () { elem.onselectstart = selectable ? function () {
return false; return false;
} : function () { } : function () {
}; };
elem.style.MozUserSelect = selectable ? 'auto' : 'none'; elem.style.MozUserSelect = selectable ? 'auto' : 'none';
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none'; elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
elem.unselectable = selectable ? 'on' : 'off'; elem.unselectable = selectable ? 'on' : 'off';
}, },
/** /**
* *
* @param elem * @param elem
* @param horizontal * @param horizontal
* @param vertical * @param vertical
*/ */
makeFullscreen: function (elem, horizontal, vertical) { makeFullscreen: function (elem, horizontal, vertical) {
if (common.isUndefined(horizontal)) horizontal = true; if (common.isUndefined(horizontal)) horizontal = true;
if (common.isUndefined(vertical)) vertical = true; if (common.isUndefined(vertical)) vertical = true;
elem.style.position = 'absolute'; elem.style.position = 'absolute';
if (horizontal) { if (horizontal) {
elem.style.left = 0; elem.style.left = 0;
elem.style.right = 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 );
} }
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 );
}
}; };

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

File diff suppressed because it is too large Load Diff

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

@ -16,12 +16,12 @@ $button-height: 20px;
/* Auto-place container */ /* Auto-place container */
&.ac { &.ac {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 0; height: 0;
z-index: 0; z-index: 0;
} }
&:not(.ac) .main { &:not(.ac) .main {
@ -53,7 +53,6 @@ $button-height: 20px;
opacity: 1 !important; opacity: 1 !important;
} }
&:hover .close-button, &:hover .close-button,
.close-button.drag { .close-button.drag {
opacity: 1; opacity: 1;
@ -68,7 +67,7 @@ $button-height: 20px;
line-height: $button-height - 1; line-height: $button-height - 1;
height: $button-height; height: $button-height;
/* TODO, these are style notes */ /* TODO, these are style notes */
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
background-color: #000; background-color: #000;
@ -94,8 +93,6 @@ $button-height: 20px;
} }
} }
.save-row { .save-row {
position: fixed; position: fixed;
top: 0; top: 0;
@ -104,7 +101,7 @@ $button-height: 20px;
} }
li { li {
@include transition(height, 0.1s, ease-out); @include transition(height, 0.1s, ease-out);
} }
@ -117,10 +114,10 @@ $button-height: 20px;
padding: 0 4px 0 5px; padding: 0 4px 0 5px;
} }
li.folder { li.folder {
padding: 0; padding: 0;
border-left: $nest-margin solid rgba(0,0,0,0); border-left: $nest-margin solid rgba(0, 0, 0, 0);
} }
/** Folder names */ /** Folder names */
@ -137,8 +134,8 @@ $button-height: 20px;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
} }
/** Controller row */ /** Controller row */
.cr { .cr {
clear: both; clear: both;
padding-left: 3px; padding-left: 3px;
@ -156,7 +153,7 @@ $button-height: 20px;
} }
/** Controller-half (right) */ /** Controller-half (right) */
.c { .c {
float: left; float: left;
width: 60%; width: 60%;
} }
@ -197,8 +194,8 @@ $button-height: 20px;
.c select { .c select {
margin-top: 5px; margin-top: 5px;
} }
/** Ensure the entire boolean and function row shows a hand */ /** Ensure the entire boolean and function row shows a hand */
.cr.function, .cr.function,
.cr.function .property-name, /* Don't know why I need to be this explicit */ .cr.function .property-name, /* Don't know why I need to be this explicit */
.cr.function *, .cr.function *,
@ -207,7 +204,6 @@ $button-height: 20px;
cursor: pointer; cursor: pointer;
} }
.selector { .selector {
display: none; display: none;
position: absolute; position: absolute;
@ -216,13 +212,11 @@ $button-height: 20px;
z-index: 10; z-index: 10;
} }
.c:hover .selector, .c:hover .selector,
.selector.drag { .selector.drag {
display: block; display: block;
} }
li.save-row { li.save-row {
padding: 0; padding: 0;
@ -242,7 +236,6 @@ $button-height: 20px;
line-height: 15px; line-height: 15px;
} }
} }
/* TODO Separate style and structure */ /* TODO Separate style and structure */
@ -273,7 +266,7 @@ $button-height: 20px;
margin-top: 10px; margin-top: 10px;
code { code {
font-size: 10px; font-size: 10px;
} }
} }
#dat-gui-save-locally { #dat-gui-save-locally {

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

@ -13,9 +13,9 @@
override those passed to <code>dat.GUI</code>'s constructor. This makes it override those passed to <code>dat.GUI</code>'s constructor. This makes it
easier to work incrementally, but <code>localStorage</code> is fragile, easier to work incrementally, but <code>localStorage</code> is fragile,
and your friends may not see the same values you do. and your friends may not see the same values you do.
</div> </div>
</div> </div>
</div> </div>

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

@ -51,7 +51,6 @@ $input-color: lighten($background-color, 8.5%);
/** Main type */ /** Main type */
.dg { .dg {
color: #eee; color: #eee;
font: 11px 'Lucida Grande', sans-serif; font: 11px 'Lucida Grande', sans-serif;
text-shadow: 0 -1px 0 #111; text-shadow: 0 -1px 0 #111;
@ -157,19 +156,16 @@ $input-color: lighten($background-color, 8.5%);
} }
} }
&.function:hover , &.function:hover,
&.boolean:hover { &.boolean:hover {
background: #111; background: #111;
} }
} }
/** Controllers */ /** Controllers */
.c { .c {
input[type=text] { input[type=text] {
background: $input-color; background: $input-color;
@ -184,7 +180,6 @@ $input-color: lighten($background-color, 8.5%);
} }
.slider { .slider {
background: $input-color; background: $input-color;
cursor: ew-resize; cursor: ew-resize;

46
src/dat/index.js
View File

@ -1,29 +1,29 @@
module.exports = { module.exports = {
color: { color: {
Color: require('./color/Color'), Color: require('./color/Color'),
math: require('./color/math'), math: require('./color/math'),
interpret: require('./color/interpret') interpret: require('./color/interpret')
}, },
controllers: { controllers: {
Controller: require('./controllers/Controller'), Controller: require('./controllers/Controller'),
BooleanController: require('./controllers/BooleanController'), BooleanController: require('./controllers/BooleanController'),
OptionController: require('./controllers/OptionController'), OptionController: require('./controllers/OptionController'),
StringController: require('./controllers/StringController'), StringController: require('./controllers/StringController'),
NumberController: require('./controllers/NumberController'), NumberController: require('./controllers/NumberController'),
NumberControllerBox: require('./controllers/NumberControllerBox'), NumberControllerBox: require('./controllers/NumberControllerBox'),
NumberControllerSlider: require('./controllers/NumberControllerSlider'), NumberControllerSlider: require('./controllers/NumberControllerSlider'),
FunctionController: require('./controllers/FunctionController'), FunctionController: require('./controllers/FunctionController'),
ColorController: require('./controllers/ColorController') ColorController: require('./controllers/ColorController')
}, },
dom: { dom: {
dom: require('./dom/dom') dom: require('./dom/dom')
}, },
gui: {
GUI: require('./gui/GUI')
},
gui: {
GUI: require('./gui/GUI') GUI: require('./gui/GUI')
},
GUI: require('./gui/GUI')
}; };

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

@ -22,115 +22,115 @@ var ARR_SLICE = Array.prototype.slice;
var Common = { var Common = {
BREAK: {}, BREAK: {},
extend: function (target) { extend: function (target) {
this.each(ARR_SLICE.call(arguments, 1), function (obj) { this.each(ARR_SLICE.call(arguments, 1), function (obj) {
for (var key in obj) for (var key in obj)
if (!this.isUndefined(obj[key])) if (!this.isUndefined(obj[key]))
target[key] = obj[key]; target[key] = obj[key];
}, this); }, this);
return target; return target;
}, },
defaults: function (target) { defaults: function (target) {
this.each(ARR_SLICE.call(arguments, 1), function (obj) { this.each(ARR_SLICE.call(arguments, 1), function (obj) {
for (var key in obj) for (var key in obj)
if (this.isUndefined(target[key])) if (this.isUndefined(target[key]))
target[key] = obj[key]; target[key] = obj[key];
}, this); }, this);
return target; return target;
}, },
compose: function () { compose: function () {
var toCall = ARR_SLICE.call(arguments); var toCall = ARR_SLICE.call(arguments);
return function () { return function () {
var args = ARR_SLICE.call(arguments); var args = ARR_SLICE.call(arguments);
for (var i = toCall.length - 1; i >= 0; i--) { for (var i = toCall.length - 1; i >= 0; i--) {
args = [toCall[i].apply(this, args)]; args = [toCall[i].apply(this, args)];
} }
return args[0]; return args[0];
}
},
each: function (obj, itr, scope) {
if (!obj) return;
if (ARR_EACH && obj.forEach && 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]';
} }
},
each: function (obj, itr, scope) {
if (!obj) return;
if (ARR_EACH && obj.forEach && 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]';
}
}; };

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

@ -12,19 +12,19 @@
*/ */
module.exports = { module.exports = {
load: function (url, doc) { load: function (url, doc) {
doc = doc || document; doc = doc || document;
var link = doc.createElement('link'); var link = doc.createElement('link');
link.type = 'text/css'; link.type = 'text/css';
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.href = url; link.href = url;
doc.getElementsByTagName('head')[0].appendChild(link); doc.getElementsByTagName('head')[0].appendChild(link);
}, },
inject: function (css, doc) { inject: function (css, doc) {
doc = doc || document; doc = doc || document;
var injected = document.createElement('style'); var injected = document.createElement('style');
injected.type = 'text/css'; injected.type = 'text/css';
injected.innerHTML = css; injected.innerHTML = css;
doc.getElementsByTagName('head')[0].appendChild(injected); doc.getElementsByTagName('head')[0].appendChild(injected);
} }
}; };

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

@ -12,12 +12,12 @@
*/ */
module.exports = function () { module.exports = function () {
return window.requestAnimationFrame || return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback, element) { function (callback, element) {
window.setTimeout(callback, 1000 / 60); window.setTimeout(callback, 1000 / 60);
}; };
}; };

2
tests/index.html
View File

@ -12,8 +12,6 @@
$.noConflict(); $.noConflict();
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// var dat = this['dat.gui'];
var math = dat.color.math; var math = dat.color.math;
var interpret = dat.color.interpret; var interpret = dat.color.interpret;
var Color = dat.color.Color; var Color = dat.color.Color;

26
webpack.config.js
View File

@ -1,26 +0,0 @@
var path = require("path");
module.exports = {
target: 'web',
context: path.resolve(__dirname, 'src'),
entry: {
main: '../index'
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
},
output: {
path: path.join(__dirname, 'build'),
filename: 'dat.gui.js',
library: ['dat'],
libraryTarget: 'umd'
}
};

15
webpack.config.min.js vendored
View File

@ -1,15 +0,0 @@
var extend = require('extend'),
webpack = require('webpack'),
webpackConfig = require('./webpack.config');
var config = {
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
],
output: {
filename: 'dat.gui.min.js'
}
}
module.exports = extend(true, webpackConfig, config);