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 common.js + webpack

Browse Source
This commit is contained in:
Tomas Korcak 2015-08-14 15:24:30 +02:00
parent 8f0eba8ade
commit b00f8f69f4
36 changed files with 6389 additions and 6232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -10,32 +10,11 @@ The easiest way to use dat.GUI in your code is by using the built source at `bui
In your `head` tag, include the following code: In your `head` tag, include the following code:
``` ```
<script type="text/javascript" src="dat.gui.min.js"></script> <script type="text/javascript" src="dat.gui.main.js"></script>
``` ```
---- ----
##Using dat.GUI with require.js
Internally, dat.GUI uses [require.js](http://requirejs.org/) 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 ##Directory Contents
* build: Concatenated source code. * build: Concatenated source code.
@ -50,19 +29,20 @@ require([
In the terminal, enter the following: In the terminal, enter the following:
``` ```
$ cd utils $ npm run build
$ node build_gui.js
``` ```
This will create a namespaced, unminified build of dat.GUI at `build/dat.gui.js` This will create a namespaced, unminified build of dat.GUI at `build/dat.gui.main.js`
_To export minified source using Closure Compiler, open `utils/build_gui.js` and set the `minify` parameter to `true`._
---- ----
##Change log ##Change log
###0.5 ### 0.6.0
* Using common.js
* Using webpack for build
### 0.5
* Moved to requirejs for dependency management. * Moved to requirejs for dependency management.
* Changed global namespace from *DAT* to *dat* (lowercase). * Changed global namespace from *DAT* to *dat* (lowercase).
* Added support for color controllers. See [Color Controllers](http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers). * Added support for color controllers. See [Color Controllers](http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers).
@ -75,7 +55,7 @@ _To export minified source using Closure Compiler, open `utils/build_gui.js` and
* Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel. * Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
#0.4 ### 0.4
* Migrated from GitHub to Google Code. * Migrated from GitHub to Google Code.

7407
build/dat.gui.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
example.html
View File

@ -6,7 +6,7 @@
<script type="text/javascript" src="build/dat.gui.min.js"></script> <script type="text/javascript" src="build/dat.gui.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var obj = { x: 5 }; var obj = { x: 5 };
var gui = new dat.GUI(); var gui = new dat.gui.GUI();
gui.add(obj, 'x'); gui.add(obj, 'x');
</script> </script>
</body> </body>

1
index.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./src/dat/index');

30
package.json Normal file
View File

@ -0,0 +1,30 @@
{
"name": "dat.gui",
"version": "0.6.0",
"description": "A lightweight graphical user interface for changing variables in JavaScript.",
"main": "index.js",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack && webpack --config ./webpack.config.min.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/dataarts/dat.gui.git"
},
"author": "Data Arts Team, Google Creative Lab",
"license": "Apache 2.0",
"bugs": {
"url": "https://github.com/dataarts/dat.gui/issues"
},
"homepage": "https://github.com/dataarts/dat.gui#readme",
"devDependencies": {
"css-loader": "^0.16.0",
"extend": "^3.0.0",
"html-loader": "^0.3.0",
"style-loader": "^0.12.3",
"webpack": "^1.11.0"
}
}

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

@ -11,179 +11,172 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var interpret = require('./interpret'),
'dat/color/interpret', math = require('./math'),
'dat/color/math', toString = require('./toString'),
'dat/color/toString', common = require('../utils/common');
'dat/utils/common'
], function(interpret, math, toString, common) {
var Color = function() { var Color = function () {
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;
};
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
}; common.extend(Color.prototype, {
Color.COMPONENTS = ['r','g','b','h','s','v','hex','a']; toString: function () {
return toString(this);
common.extend(Color.prototype, {
toString: function() {
return toString(this);
}, },
toOriginal: function() { toOriginal: function () {
return this.__state.conversion.write(this); 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);
defineHSVComponent(Color.prototype, 'h'); defineHSVComponent(Color.prototype, 'h');
defineHSVComponent(Color.prototype, 's'); defineHSVComponent(Color.prototype, 's');
defineHSVComponent(Color.prototype, 'v'); 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') { return this.__state.hex;
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
}
return this.__state.hex;
}, },
set: function(v) { set: function (v) {
this.__state.space = 'HEX'; this.__state.space = 'HEX';
this.__state.hex = v; this.__state.hex = v;
} }
}); });
function defineRGBComponent(target, component, componentHexIndex) { function defineRGBComponent(target, component, componentHexIndex) {
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function() { 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;
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) { function defineHSVComponent(target, component) {
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function() { get: function () {
if (this.__state.space === 'HSV') if (this.__state.space === 'HSV')
return this.__state[component]; return this.__state[component];
recalculateHSV(this); recalculateHSV(this);
return this.__state[component]; return this.__state[component];
}, },
set: function(v) { set: function (v) {
if (this.__state.space !== 'HSV') {
recalculateHSV(this);
this.__state.space = 'HSV';
}
this.__state[component] = v;
if (this.__state.space !== 'HSV') {
recalculateHSV(this);
this.__state.space = 'HSV';
} }
this.__state[component] = v;
}
}); });
} }
function recalculateRGB(color, component, componentHexIndex) { function recalculateRGB(color, component, componentHexIndex) {
if (color.__state.space === 'HEX') { if (color.__state.space === 'HEX') {
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex); color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
} else if (color.__state.space === 'HSV') { } else if (color.__state.space === 'HSV') {
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v)); common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
} else { } else {
throw 'Corrupted color state'; throw 'Corrupted color state';
} }
} }
function recalculateHSV(color) { function recalculateHSV(color) {
var result = math.rgb_to_hsv(color.r, color.g, color.b); var result = math.rgb_to_hsv(color.r, color.g, color.b);
common.extend(color.__state, common.extend(color.__state,
{ {
s: result.s, s: result.s,
v: result.v v: result.v
} }
); );
if (!common.isNaN(result.h)) { if (!common.isNaN(result.h)) {
color.__state.h = result.h; color.__state.h = result.h;
} else if (common.isUndefined(color.__state.h)) { } else if (common.isUndefined(color.__state.h)) {
color.__state.h = 0; color.__state.h = 0;
} }
} }
return Color; module.exports = Color;
});

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

@ -11,330 +11,325 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var toString = require('./toString'),
'dat/color/toString', common = require('../utils/common');
'dat/utils/common'
], function(toString, common) {
var result, toReturn; var result, toReturn;
var interpret = function() { var interpret = function() {
toReturn = false; toReturn = false;
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0]; var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
common.each(INTERPRETATIONS, function(family) { common.each(INTERPRETATIONS, function(family) {
if (family.litmus(original)) { if (family.litmus(original)) {
common.each(family.conversions, function(conversion, conversionName) { common.each(family.conversions, function(conversion, conversionName) {
result = conversion.read(original); result = conversion.read(original);
if (toReturn === false && result !== false) { if (toReturn === false && result !== false) {
toReturn = result; toReturn = result;
result.conversionName = conversionName; result.conversionName = conversionName;
result.conversion = conversion; result.conversion = conversion;
return common.BREAK; 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
} }
});
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, // Numbers
{
conversions: { litmus: common.isNumber,
HEX: { conversions: {
read: function(original) {
return {
space: 'HEX',
hex: original,
conversionName: 'HEX'
}
},
write: function(color) { HEX: {
return color.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];
} }
} },
},
// 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]
};
}, },
RGBA_ARRAY: { write: function(color) {
read: function(original) { return [color.r, color.g, color.b, color.a];
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
}
}
} }
} }
} }
},
]; // Objects
{
return interpret; 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
}
}
}
}
}
}); ];
module.exports = interpret;

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

@ -11,90 +11,85 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var tmpComponent;
], function() { var ColorMath = {
var tmpComponent;
return {
hsv_to_rgb: function(h, s, v) { hsv_to_rgb: function(h, s, v) {
var hi = Math.floor(h / 60) % 6; var hi = Math.floor(h / 60) % 6;
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) {
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;
}
if (max != 0) {
s = delta / max;
} else {
return { return {
h: NaN, h: h * 360,
s: 0, s: s,
v: 0 v: max / 255
}; };
}
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) { rgb_to_hex: function(r, g, b) {
var hex = this.hex_with_component(0, 2, r); var hex = this.hex_with_component(0, 2, r);
hex = this.hex_with_component(hex, 1, g); hex = this.hex_with_component(hex, 1, g);
hex = this.hex_with_component(hex, 0, b); hex = this.hex_with_component(hex, 0, b);
return hex; return hex;
}, },
component_from_hex: function(hex, componentIndex) { component_from_hex: function(hex, componentIndex) {
return (hex >> (componentIndex * 8)) & 0xFF; return (hex >> (componentIndex * 8)) & 0xFF;
}, },
hex_with_component: function(hex, componentIndex, value) { hex_with_component: function(hex, componentIndex, value) {
return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent)); return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent));
} }
}
} module.exports = ColorMath;
});

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

@ -11,27 +11,17 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var common = require('../utils/common');
'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 + ')';
module.exports = 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 + ')';
} }
};
});

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

@ -11,22 +11,20 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/Controller', dom = require('../dom/dom'),
'dat/dom/dom', common = require('../utils/common');
'dat/utils/common'
], function(Controller, dom, common) {
/** /**
* @class Provides a checkbox input to alter the boolean property of an object. * @class Provides a checkbox input to alter the boolean property of an object.
* @extends dat.controllers.Controller * @extends dat.controllers.Controller
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* *
* @member dat.controllers * @member dat.controllers
*/ */
var BooleanController = function(object, property) { var BooleanController = function(object, property) {
BooleanController.superclass.call(this, object, property); BooleanController.superclass.call(this, object, property);
@ -45,47 +43,45 @@ define([
this.updateDisplay(); this.updateDisplay();
function onChange() { function onChange() {
_this.setValue(!_this.__prev); _this.setValue(!_this.__prev);
} }
}; };
BooleanController.superclass = Controller; BooleanController.superclass = Controller;
common.extend( common.extend(
BooleanController.prototype, BooleanController.prototype,
Controller.prototype, Controller.prototype,
{ {
setValue: function(v) { setValue: function(v) {
var toReturn = BooleanController.superclass.prototype.setValue.call(this, v); var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
} }
this.__prev = this.getValue(); this.__prev = this.getValue();
return toReturn; return toReturn;
}, },
updateDisplay: function() { updateDisplay: function() {
if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true;
} else {
this.__checkbox.checked = false;
}
return BooleanController.superclass.prototype.updateDisplay.call(this); if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true;
} else {
this.__checkbox.checked = false;
}
return BooleanController.superclass.prototype.updateDisplay.call(this);
} }
} }
); );
return BooleanController; module.exports = BooleanController;
});

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

@ -11,314 +11,309 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/Controller', dom = require('../dom/dom'),
'dat/dom/dom', Color = require('../color/Color'),
'dat/color/Color', interpret = require('../color/interpret'),
'dat/color/interpret', common = require('../utils/common');
'dat/utils/common'
], function(Controller, dom, Color, interpret, common) {
var ColorController = function(object, property) { var ColorController = function(object, property) {
ColorController.superclass.call(this, object, property);
ColorController.superclass.call(this, object, property); this.__color = new Color(this.getValue());
this.__temp = new Color(0);
this.__color = new Color(this.getValue()); var _this = this;
this.__temp = new Color(0);
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.className = 'selector';
this.__selector = document.createElement('div'); this.__saturation_field = document.createElement('div');
this.__selector.className = 'selector'; this.__saturation_field.className = 'saturation-field';
this.__saturation_field = document.createElement('div'); this.__field_knob = document.createElement('div');
this.__saturation_field.className = 'saturation-field'; this.__field_knob.className = 'field-knob';
this.__field_knob_border = '2px solid ';
this.__field_knob = document.createElement('div'); this.__hue_knob = document.createElement('div');
this.__field_knob.className = 'field-knob'; this.__hue_knob.className = 'hue-knob';
this.__field_knob_border = '2px solid ';
this.__hue_knob = document.createElement('div'); this.__hue_field = document.createElement('div');
this.__hue_knob.className = 'hue-knob'; this.__hue_field.className = 'hue-field';
this.__hue_field = document.createElement('div'); this.__input = document.createElement('input');
this.__hue_field.className = 'hue-field'; this.__input.type = 'text';
this.__input_textShadow = '0 1px 1px ';
this.__input = document.createElement('input'); dom.bind(this.__input, 'keydown', function(e) {
this.__input.type = 'text'; if (e.keyCode === 13) { // on enter
this.__input_textShadow = '0 1px 1px '; onBlur.call(this);
}
});
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'blur', onBlur);
if (e.keyCode === 13) { // on enter
onBlur.call(this);
}
});
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, {
position: 'absolute',
width: '15px',
height: '2px',
borderRight: '4px solid #fff',
zIndex: 1
});
common.extend(this.__saturation_field.style, { common.extend(this.__hue_knob.style, {
width: '100px', position: 'absolute',
height: '100px', width: '15px',
border: '1px solid #555', height: '2px',
marginRight: '3px', borderRight: '4px solid #fff',
display: 'inline-block', zIndex: 1
cursor: 'pointer' });
});
common.extend(value_field.style, { common.extend(this.__saturation_field.style, {
width: '100%', width: '100px',
height: '100%', height: '100px',
background: 'none' border: '1px solid #555',
}); marginRight: '3px',
display: 'inline-block',
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000'); cursor: 'pointer'
});
common.extend(this.__hue_field.style, { common.extend(value_field.style, {
width: '15px', width: '100%',
height: '100px', height: '100%',
display: 'inline-block', background: 'none'
border: '1px solid #555', });
cursor: 'ns-resize'
});
hueGradient(this.__hue_field); linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
common.extend(this.__input.style, { common.extend(this.__hue_field.style, {
outline: 'none', 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', // 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) { function unbindH() {
dom.unbind(window, 'mousemove', setH);
dom.unbind(window, 'mouseup', unbindH);
}
e.preventDefault(); 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);
var s = dom.getHeight(_this.__hue_field); this.domElement.appendChild(this.__input);
var o = dom.getOffset(_this.__hue_field); this.domElement.appendChild(this.__selector);
var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
if (h > 1) h = 1; this.updateDisplay();
else if (h < 0) h = 0;
_this.__color.h = h * 360; function setSV(e) {
_this.setValue(_this.__color.toOriginal()); e.preventDefault();
return false; 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;
ColorController.superclass = Controller; _this.__color.v = v;
_this.__color.s = s;
common.extend( _this.setValue(_this.__color.toOriginal());
ColorController.prototype,
Controller.prototype,
{ return false;
updateDisplay: function() { }
var i = interpret(this.getValue()); function setH(e) {
if (i !== false) { e.preventDefault();
var mismatch = false; 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;
// Check for mismatch on the interpreted value. if (h > 1) h = 1;
else if (h < 0) h = 0;
common.each(Color.COMPONENTS, function(component) { _this.__color.h = h * 360;
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 _this.setValue(_this.__color.toOriginal());
// for statefulness, otherwise we recalculate fresh
if (mismatch) { return false;
common.extend(this.__color.__state, i);
}
};
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)'
});
} }
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) { var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
elem.style.background = '';
common.each(vendors, function(vendor) { function linearGradient(elem, x, a, b) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); '; 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%);' function hueGradient(elem) {
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' elem.style.background = '';
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: -moz-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: -webkit-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%);' 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; module.exports = ColorController;
});

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

@ -11,19 +11,17 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var common = require('../utils/common');
'dat/utils/common'
], function(common) {
/** /**
* @class An "abstract" class that represents a given property of an object. * @class An "abstract" class that represents a given property of an object.
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* *
* @member dat.controllers * @member dat.controllers
*/ */
var Controller = function(object, property) { var Controller = function(object, property) {
this.initialValue = object[property]; this.initialValue = object[property];
@ -59,14 +57,14 @@ define([
*/ */
this.__onFinishChange = undefined; this.__onFinishChange = undefined;
}; };
common.extend( common.extend(
Controller.prototype, Controller.prototype,
/** @lends dat.controllers.Controller.prototype */ /** @lends dat.controllers.Controller.prototype */
{ {
/** /**
* Specify that a function fire every time someone changes the value with * Specify that a function fire every time someone changes the value with
@ -77,8 +75,8 @@ define([
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
onChange: function(fnc) { onChange: function(fnc) {
this.__onChange = fnc; this.__onChange = fnc;
return this; return this;
}, },
/** /**
@ -91,8 +89,8 @@ define([
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
onFinishChange: function(fnc) { onFinishChange: function(fnc) {
this.__onFinishChange = fnc; this.__onFinishChange = fnc;
return this; return this;
}, },
/** /**
@ -101,12 +99,12 @@ define([
* @param {Object} newValue The new value of <code>object[property]</code> * @param {Object} newValue The new value of <code>object[property]</code>
*/ */
setValue: function(newValue) { setValue: function(newValue) {
this.object[this.property] = newValue; this.object[this.property] = newValue;
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this, newValue); this.__onChange.call(this, newValue);
} }
this.updateDisplay(); this.updateDisplay();
return this; return this;
}, },
/** /**
@ -115,7 +113,7 @@ define([
* @returns {Object} The current value of <code>object[property]</code> * @returns {Object} The current value of <code>object[property]</code>
*/ */
getValue: function() { getValue: function() {
return this.object[this.property]; return this.object[this.property];
}, },
/** /**
@ -124,21 +122,16 @@ define([
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
updateDisplay: function() { updateDisplay: function() {
return this; return this;
}, },
/** /**
* @returns {Boolean} true if the value has deviated from initialValue * @returns {Boolean} true if the value has deviated from initialValue
*/ */
isModified: function() { isModified: function() {
return this.initialValue !== this.getValue() return this.initialValue !== this.getValue()
} }
}
);
} module.exports = Controller;
);
return Controller;
});

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

@ -11,23 +11,21 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/Controller', dom = require('../dom/dom'),
'dat/dom/dom', common = require('../utils/common');
'dat/utils/common'
], function(Controller, dom, common) {
/** /**
* @class Provides a GUI interface to fire a specified method, a property of an object. * @class Provides a GUI interface to fire a specified method, a property of an object.
* *
* @extends dat.controllers.Controller * @extends dat.controllers.Controller
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* *
* @member dat.controllers * @member dat.controllers
*/ */
var FunctionController = function(object, property, text) { var FunctionController = function(object, property, text) {
FunctionController.superclass.call(this, object, property); FunctionController.superclass.call(this, object, property);
@ -36,9 +34,9 @@ define([
this.__button = document.createElement('div'); this.__button = document.createElement('div');
this.__button.innerHTML = text === undefined ? 'Fire' : text; this.__button.innerHTML = text === undefined ? 'Fire' : text;
dom.bind(this.__button, 'click', function(e) { dom.bind(this.__button, 'click', function(e) {
e.preventDefault(); e.preventDefault();
_this.fire(); _this.fire();
return false; return false;
}); });
dom.addClass(this.__button, 'button'); dom.addClass(this.__button, 'button');
@ -46,29 +44,27 @@ define([
this.domElement.appendChild(this.__button); this.domElement.appendChild(this.__button);
}; };
FunctionController.superclass = Controller; FunctionController.superclass = Controller;
common.extend( common.extend(
FunctionController.prototype,
Controller.prototype,
{
FunctionController.prototype,
Controller.prototype,
{
fire: function() { fire: function() {
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this); this.__onChange.call(this);
} }
this.getValue().call(this.object); this.getValue().call(this.object);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
} }
} }
} }
); );
return FunctionController; module.exports = FunctionController;
});

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

@ -11,26 +11,25 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/Controller', common = require('../utils/common');
'dat/utils/common'
], function(Controller, common) {
/**
* @class Represents a given property of an object that is a number. /**
* * @class Represents a given property of an object that is a number.
* @extends dat.controllers.Controller *
* * @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} object The object to be manipulated
* @param {Object} [params] Optional parameters * @param {string} property The name of the property to be manipulated
* @param {Number} [params.min] Minimum allowed value * @param {Object} [params] Optional parameters
* @param {Number} [params.max] Maximum allowed value * @param {Number} [params.min] Minimum allowed value
* @param {Number} [params.step] Increment by which to change value * @param {Number} [params.max] Maximum allowed value
* * @param {Number} [params.step] Increment by which to change value
* @member dat.controllers *
*/ * @member dat.controllers
var NumberController = function(object, property, params) { */
var NumberController = function(object, property, params) {
NumberController.superclass.call(this, object, property); NumberController.superclass.call(this, object, property);
@ -42,47 +41,44 @@ define([
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.superclass = Controller; NumberController.prototype,
Controller.prototype,
common.extend( /** @lends dat.controllers.NumberController.prototype */
{
NumberController.prototype,
Controller.prototype,
/** @lends dat.controllers.NumberController.prototype */
{
setValue: function(v) { setValue: function(v) {
if (this.__min !== undefined && v < this.__min) { if (this.__min !== undefined && v < this.__min) {
v = this.__min; v = this.__min;
} else if (this.__max !== undefined && v > this.__max) { } else if (this.__max !== undefined && v > this.__max) {
v = this.__max; v = this.__max;
} }
if (this.__step !== undefined && v % this.__step != 0) { if (this.__step !== undefined && v % this.__step != 0) {
v = Math.round(v / this.__step) * this.__step; v = Math.round(v / this.__step) * this.__step;
} }
return NumberController.superclass.prototype.setValue.call(this, v); return NumberController.superclass.prototype.setValue.call(this, v);
}, },
@ -94,8 +90,8 @@ define([
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
min: function(v) { min: function(v) {
this.__min = v; this.__min = v;
return this; return this;
}, },
/** /**
@ -106,8 +102,8 @@ define([
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
max: function(v) { max: function(v) {
this.__max = v; this.__max = v;
return this; return this;
}, },
/** /**
@ -121,25 +117,23 @@ define([
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
step: function(v) { step: function(v) {
this.__step = v; this.__step = v;
this.__impliedStep = v; this.__impliedStep = v;
this.__precision = numDecimals(v); this.__precision = numDecimals(v);
return this; return this;
} }
} }
); );
function numDecimals(x) { function numDecimals(x) {
x = x.toString(); x = x.toString();
if (x.indexOf('.') > -1) { if (x.indexOf('.') > -1) {
return x.length - x.indexOf('.') - 1; return x.length - x.indexOf('.') - 1;
} else { } else {
return 0; return 0;
} }
} }
return NumberController; module.exports = NumberController;
});

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

@ -11,124 +11,122 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/NumberController', NumberController = require('./NumberController'),
'dat/dom/dom', dom = require('../dom/dom'),
'dat/utils/common' common = require('../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;
/** /**
* @class Represents a given property of an object that is a number and * {Number} Previous mouse y position
* provides an input element with which to manipulate it. * @ignore
*
* @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) { var prev_y;
this.__truncationSuspended = false; this.__input = document.createElement('input');
this.__input.setAttribute('type', 'text');
NumberControllerBox.superclass.call(this, object, property, params); // Makes it so manually specified values are not truncated.
var _this = this; 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.
* {Number} Previous mouse y position if (e.keyCode === 13) {
* @ignore _this.__truncationSuspended = true;
*/ this.blur();
var prev_y; _this.__truncationSuspended = false;
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) { function onChange() {
dom.bind(window, 'mousemove', onMouseDrag); var attempted = parseFloat(_this.__input.value);
dom.bind(window, 'mouseup', onMouseUp); if (!common.isNaN(attempted)) _this.setValue(attempted);
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; 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;
}
module.exports = NumberControllerBox;
});

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

@ -11,119 +11,114 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var NumberController = require('./NumberController'),
'dat/controllers/NumberController', dom = require('../dom/dom'),
'dat/dom/dom', css = require('../utils/css'),
'dat/utils/css', common = require('../utils/common'),
'dat/utils/common', styleSheet = require('./NumberControllerSlider.css');
'text!dat/controllers/NumberControllerSlider.css'
],
function(NumberController, dom, css, common, styleSheet) {
/** /**
* @class Represents a given property of an object that is a number, contains * @class Represents a given property of an object that is a number, contains
* a minimum and maximum, and provides a slider element with which to * a minimum and maximum, and provides a slider element with which to
* manipulate it. It should be noted that the slider element is made up of * manipulate it. It should be noted that the slider element is made up of
* <code>&lt;div&gt;</code> tags, <strong>not</strong> the html5 * <code>&lt;div&gt;</code> tags, <strong>not</strong> the html5
* <code>&lt;slider&gt;</code> element. * <code>&lt;slider&gt;</code> element.
* *
* @extends dat.controllers.Controller * @extends dat.controllers.Controller
* @extends dat.controllers.NumberController * @extends dat.controllers.NumberController
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* @param {Number} minValue Minimum allowed value * @param {Number} minValue Minimum allowed value
* @param {Number} maxValue Maximum allowed value * @param {Number} maxValue Maximum allowed value
* @param {Number} stepValue Increment by which to change value * @param {Number} stepValue Increment by which to change value
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberControllerSlider = function(object, property, min, max, step) { var NumberControllerSlider = function(object, property, min, max, step) {
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step }); NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step });
var _this = this; var _this = this;
this.__background = document.createElement('div'); this.__background = document.createElement('div');
this.__foreground = document.createElement('div'); this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown);
dom.addClass(this.__background, 'slider');
dom.addClass(this.__foreground, 'slider-fg');
function onMouseDown(e) { dom.bind(this.__background, 'mousedown', onMouseDown);
dom.bind(window, 'mousemove', onMouseDrag); dom.addClass(this.__background, 'slider');
dom.bind(window, 'mouseup', onMouseUp); dom.addClass(this.__foreground, 'slider-fg');
onMouseDrag(e); 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());
} }
}
function onMouseDrag(e) { this.updateDisplay();
e.preventDefault(); this.__background.appendChild(this.__foreground);
this.domElement.appendChild(this.__background);
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; NumberControllerSlider.superclass = NumberController;
} /**
* Injects default stylesheet for slider elements.
*/
NumberControllerSlider.useDefaultStyles = function() {
css.inject(styleSheet);
};
function onMouseUp() { common.extend(
dom.unbind(window, 'mousemove', onMouseDrag);
dom.unbind(window, 'mouseup', onMouseUp);
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}
}
this.updateDisplay(); NumberControllerSlider.prototype,
NumberController.prototype,
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);
}
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; function map(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}); }
module.exports = NumberControllerSlider;

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

@ -11,27 +11,24 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/Controller', dom = require('../dom/dom'),
'dat/dom/dom', common = require('../utils/common');
'dat/utils/common'
],
function(Controller, dom, common) {
/** /**
* @class Provides a select input to alter the property of an object, using a * @class Provides a select input to alter the property of an object, using a
* list of accepted values. * list of accepted values.
* *
* @extends dat.controllers.Controller * @extends dat.controllers.Controller
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* @param {Object|string[]} options A map of labels to acceptable values, or * @param {Object|string[]} options A map of labels to acceptable values, or
* a list of acceptable string values. * a list of acceptable string values.
* *
* @member dat.controllers * @member dat.controllers
*/ */
var OptionController = function(object, property, options) { var OptionController = function(object, property, options) {
OptionController.superclass.call(this, object, property); OptionController.superclass.call(this, object, property);
@ -44,19 +41,19 @@ function(Controller, dom, common) {
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);
}); });
@ -64,40 +61,38 @@ function(Controller, dom, common) {
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);
}; };
OptionController.superclass = Controller; OptionController.superclass = Controller;
common.extend( common.extend(
OptionController.prototype, OptionController.prototype,
Controller.prototype, Controller.prototype,
{ {
setValue: function(v) { setValue: function(v) {
var toReturn = OptionController.superclass.prototype.setValue.call(this, v); var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
} }
return toReturn; return toReturn;
}, },
updateDisplay: function() { updateDisplay: function() {
this.__select.value = this.getValue(); this.__select.value = this.getValue();
return OptionController.superclass.prototype.updateDisplay.call(this); return OptionController.superclass.prototype.updateDisplay.call(this);
} }
} }
); );
return OptionController; module.exports = OptionController;
});

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

@ -11,79 +11,75 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var Controller = require('./Controller'),
'dat/controllers/Controller', dom = require('../dom/dom'),
'dat/dom/dom', common = require('../utils/common');
'dat/utils/common'
], function(Controller, dom, common) {
/** /**
* @class Provides a text input to alter the string property of an object. * @class Provides a text input to alter the string property of an object.
* *
* @extends dat.controllers.Controller * @extends dat.controllers.Controller
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* *
* @member dat.controllers * @member dat.controllers
*/ */
var StringController = function(object, property) { var StringController = function(object, property) {
StringController.superclass.call(this, object, property); StringController.superclass.call(this, object, property);
var _this = this; var _this = this;
this.__input = document.createElement('input'); this.__input = document.createElement('input');
this.__input.setAttribute('type', 'text'); this.__input.setAttribute('type', 'text');
dom.bind(this.__input, 'keyup', onChange); dom.bind(this.__input, 'keyup', onChange);
dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'change', onChange);
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function(e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
this.blur(); this.blur();
}
});
function onChange() {
_this.setValue(_this.__input.value);
} }
});
function onBlur() {
if (_this.__onFinishChange) { function onChange() {
_this.__onFinishChange.call(_this, _this.getValue()); _this.setValue(_this.__input.value);
} }
function onBlur() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
} }
}
this.updateDisplay(); this.updateDisplay();
this.domElement.appendChild(this.__input); this.domElement.appendChild(this.__input);
}; };
StringController.superclass = Controller; StringController.superclass = Controller;
common.extend( common.extend(
StringController.prototype, StringController.prototype,
Controller.prototype, Controller.prototype,
{ {
updateDisplay: function() { updateDisplay: function() {
// Stops the caret from moving on account of: // Stops the caret from moving on account of:
// keyup -> setValue -> updateDisplay // keyup -> setValue -> updateDisplay
if (!dom.isActive(this.__input)) { if (!dom.isActive(this.__input)) {
this.__input.value = this.getValue(); this.__input.value = this.getValue();
}
return StringController.superclass.prototype.updateDisplay.call(this);
} }
return StringController.superclass.prototype.updateDisplay.call(this);
} }
); }
return StringController; );
}); module.exports = StringController;

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

@ -11,55 +11,46 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var OptionController = require('./OptionController'),
'dat/controllers/OptionController', NumberControllerBox = require('./NumberControllerBox'),
'dat/controllers/NumberControllerBox', NumberControllerSlider = require('./NumberControllerSlider'),
'dat/controllers/NumberControllerSlider', StringController = require('./StringController'),
'dat/controllers/StringController', FunctionController = require('./FunctionController'),
'dat/controllers/FunctionController', BooleanController = require('./BooleanController'),
'dat/controllers/BooleanController', common = require('../utils/common');
'dat/utils/common'
],
function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
return function(object, property) { module.exports = function(object, property) {
var initialValue = object[property]; var initialValue = object[property];
// Providing options? // Providing options?
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) { if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
return new OptionController(object, property, arguments[2]); return new OptionController(object, property, arguments[2]);
} }
// Providing a map? // Providing a map?
if (common.isNumber(initialValue)) { if (common.isNumber(initialValue)) {
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) { if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
// Has min and max.
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
// Has min and max. } else {
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
} else { return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });
}
}
return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] }); if (common.isString(initialValue)) {
return new StringController(object, property);
}
} if (common.isFunction(initialValue)) {
return new FunctionController(object, property, '');
}
} if (common.isBoolean(initialValue)) {
return new BooleanController(object, property);
if (common.isString(initialValue)) { }
return new StringController(object, property); };
}
if (common.isFunction(initialValue)) {
return new FunctionController(object, property, '');
}
if (common.isBoolean(initialValue)) {
return new BooleanController(object, property);
}
}
});

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

@ -11,24 +11,21 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var dom = require('../dom/dom'),
'dat/dom/dom', common = require('../utils/common');
'dat/utils/common'
], function(dom, common) {
var CenteredDiv = function() {
var CenteredDiv = function() {
this.backgroundElement = document.createElement('div'); this.backgroundElement = document.createElement('div');
common.extend(this.backgroundElement.style, { common.extend(this.backgroundElement.style, {
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);
@ -36,12 +33,12 @@ define([
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'
}); });
@ -50,13 +47,13 @@ define([
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;
@ -70,25 +67,25 @@ define([
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);
}; };
@ -101,17 +98,15 @@ define([
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);
} }
return CenteredDiv; module.exports = CenteredDiv;
});

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

@ -11,64 +11,62 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var common = require('../utils/common');
'dat/utils/common'
], function(common) {
var EVENT_MAP = { var EVENT_MAP = {
'HTMLEvents': ['change'], 'HTMLEvents': ['change'],
'MouseEvents': ['click','mousemove','mousedown','mouseup', 'mouseover'], 'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
'KeyboardEvents': ['keydown'] 'KeyboardEvents': ['keydown']
}; };
var EVENT_MAP_INV = {}; var EVENT_MAP_INV = {};
common.each(EVENT_MAP, function(v, k) { common.each(EVENT_MAP, function (v, k) {
common.each(v, function(e) { common.each(v, function (e) {
EVENT_MAP_INV[e] = k; EVENT_MAP_INV[e] = k;
}); });
}); });
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;
} }
/** /**
* @namespace * @namespace
* @member dat.dom * @member dat.dom
*/ */
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';
}, },
@ -78,21 +76,21 @@ define([
* @param horizontal * @param horizontal
* @param vertical * @param vertical
*/ */
makeFullscreen: function(elem, horizontal, vertical) { makeFullscreen: function (elem, horizontal, vertical) {
if (common.isUndefined(horizontal)) horizontal = true; if (common.isUndefined(horizontal)) horizontal = true;
if (common.isUndefined(vertical)) vertical = true; if (common.isUndefined(vertical)) vertical = true;
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) { if (vertical) {
elem.style.top = 0; elem.style.top = 0;
elem.style.bottom = 0; elem.style.bottom = 0;
} }
}, },
@ -102,99 +100,81 @@ define([
* @param eventType * @param eventType
* @param params * @param params
*/ */
fakeEvent: function(elem, eventType, params, aux) { fakeEvent: function (elem, eventType, params, aux) {
params = params || {}; params = params || {};
var className = EVENT_MAP_INV[eventType]; var className = EVENT_MAP_INV[eventType];
if (!className) { if (!className) {
throw new Error('Event type ' + eventType + ' not supported.'); 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+$/, '');
} }
} var evt = document.createEvent(className);
return dom; 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;
}, },
/** /**
@ -202,86 +182,102 @@ define([
* @param elem * @param elem
* @param className * @param className
*/ */
removeClass: function(elem, className) { addClass: function (elem, className) {
if (className) {
if (elem.className === undefined) { if (elem.className === undefined) {
// elem.className = className; elem.className = className;
} else if (elem.className === className) { } else if (elem.className !== className) {
elem.removeAttribute('class'); var classes = elem.className.split(/ +/);
} else { if (classes.indexOf(className) == -1) {
var classes = elem.className.split(/ +/); classes.push(className);
var index = classes.indexOf(className); elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
if (index != -1) { }
classes.splice(index, 1);
elem.className = classes.join(' ');
}
} }
} else { return dom;
elem.className = undefined;
}
return dom;
}, },
hasClass: function(elem, className) { /**
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false; *
* @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 * @param elem
*/ */
getWidth: function(elem) { getWidth: function (elem) {
var style = getComputedStyle(elem); var style = getComputedStyle(elem);
return cssValueToPixels(style['border-left-width']) + return cssValueToPixels(style['border-left-width']) +
cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['border-right-width']) +
cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-left']) +
cssValueToPixels(style['padding-right']) + cssValueToPixels(style['padding-right']) +
cssValueToPixels(style['width']); cssValueToPixels(style['width']);
}, },
/** /**
* *
* @param elem * @param elem
*/ */
getHeight: function(elem) { getHeight: function (elem) {
var style = getComputedStyle(elem); var style = getComputedStyle(elem);
return cssValueToPixels(style['border-top-width']) + return cssValueToPixels(style['border-top-width']) +
cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['border-bottom-width']) +
cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-top']) +
cssValueToPixels(style['padding-bottom']) + cssValueToPixels(style['padding-bottom']) +
cssValueToPixels(style['height']); cssValueToPixels(style['height']);
}, },
/** /**
* *
* @param elem * @param elem
*/ */
getOffset: function(elem) { getOffset: function (elem) {
var offset = {left: 0, top:0}; var offset = {left: 0, top: 0};
if (elem.offsetParent) { if (elem.offsetParent) {
do { do {
offset.left += elem.offsetLeft; offset.left += elem.offsetLeft;
offset.top += elem.offsetTop; offset.top += elem.offsetTop;
} while (elem = elem.offsetParent); } while (elem = elem.offsetParent);
} }
return offset; return offset;
}, },
// http://stackoverflow.com/posts/2684561/revisions // http://stackoverflow.com/posts/2684561/revisions
/** /**
* *
* @param elem * @param elem
*/ */
isActive: function(elem) { isActive: function (elem) {
return elem === document.activeElement && ( elem.type || elem.href ); return elem === document.activeElement && ( elem.type || elem.href );
} }
}; };
return dom; module.exports = dom;
});

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

File diff suppressed because it is too large Load Diff

27
src/dat/index.js Normal file
View File

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

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

@ -11,130 +11,127 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ var ARR_EACH = Array.prototype.forEach;
], function() { var ARR_SLICE = Array.prototype.slice;
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. * Band-aid methods for things that should be a lot easier in JavaScript.
* Implementation and structure inspired by underscore.js * Implementation and structure inspired by underscore.js
* http://documentcloud.github.com/underscore/ * http://documentcloud.github.com/underscore/
*/ */
var Common = {
return {
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) { each: function (obj, itr, scope) {
return obj === undefined;
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;
}
}, },
isNull: function(obj) { defer: function (fnc) {
return obj === null; setTimeout(fnc, 0);
}, },
isNaN: function(obj) { toArray: function (obj) {
return obj !== obj; if (obj.toArray) return obj.toArray();
return ARR_SLICE.call(obj);
}, },
isArray: Array.isArray || function(obj) { isUndefined: function (obj) {
return obj.constructor === Array; return obj === undefined;
}, },
isObject: function(obj) { isNull: function (obj) {
return obj === Object(obj); return obj === null;
}, },
isNumber: function(obj) { isNaN: function (obj) {
return obj === obj+0; return obj !== obj;
}, },
isString: function(obj) { isArray: Array.isArray || function (obj) {
return obj === obj+''; return obj.constructor === Array;
}, },
isBoolean: function(obj) { isObject: function (obj) {
return obj === false || obj === true; return obj === Object(obj);
}, },
isFunction: function(obj) { isNumber: function (obj) {
return Object.prototype.toString.call(obj) === '[object Function]'; 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]';
} }
}; };
}); module.exports = Common;

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

@ -11,23 +11,20 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([], module.exports = {
function() {
return {
load: function (url, doc) { load: function (url, doc) {
doc = doc || document; doc = doc || document;
var link = doc.createElement('link'); var link = doc.createElement('link');
link.type = 'text/css'; link.type = 'text/css';
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.href = url; link.href = url;
doc.getElementsByTagName('head')[0].appendChild(link); doc.getElementsByTagName('head')[0].appendChild(link);
}, },
inject: function(css, doc) { inject: function (css, doc) {
doc = doc || document; doc = doc || document;
var injected = document.createElement('style'); var injected = document.createElement('style');
injected.type = 'text/css'; injected.type = 'text/css';
injected.innerHTML = css; injected.innerHTML = css;
doc.getElementsByTagName('head')[0].appendChild(injected); doc.getElementsByTagName('head')[0].appendChild(injected);
} }
} };
});

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

@ -11,22 +11,13 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ module.exports = function () {
], function() { return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
/** window.mozRequestAnimationFrame ||
* requirejs version of Paul Irish's RequestAnimationFrame window.oRequestAnimationFrame ||
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/ window.msRequestAnimationFrame ||
*/ function (callback, element) {
window.setTimeout(callback, 1000 / 60);
return window.requestAnimationFrame || };
window.webkitRequestAnimationFrame || };
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
});

3
tests/index.html
View File

@ -7,11 +7,12 @@
<script type="text/javascript" src="qunit.js"></script> <script type="text/javascript" src="qunit.js"></script>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script>
<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">
$.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;

19
utils/build.js
View File

@ -1,19 +0,0 @@
var builder = require('./builder.js');
builder.build({
"baseUrl": "../src/",
"main": "dat/gui/GUI",
"out": "../build/dat.gui.js",
"minify": false,
"shortcut": "dat.GUI",
"paths": {}
});
builder.build({
"baseUrl": "../src/",
"main": "dat/gui/GUI",
"out": "../build/dat.gui.min.js",
"minify": true,
"shortcut": "dat.GUI",
"paths": {}
});

8
utils/build_color.js
View File

@ -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": {}
});

8
utils/build_gui.js
View File

@ -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
View File

@ -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
View File

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

12
utils/license.txt
View File

@ -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
*/

26
webpack.config.js Normal file
View File

@ -0,0 +1,26 @@
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 Normal file
View File

@ -0,0 +1,15 @@
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);