Merge branch 'korczis-master' into develop

This commit is contained in:
Jeff Nusz 2016-08-17 12:11:08 -07:00 committed by customlogic
commit 0b21a06c56
50 changed files with 12690 additions and 7602 deletions

5
.babelrc Normal file
View File

@ -0,0 +1,5 @@
{
"stage": 0,
"loose": "all"
}

17
.editorconfig Normal file
View File

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

10
.eslintrc Normal file
View File

@ -0,0 +1,10 @@
{
"extends": "eslint-config-airbnb",
"rules": {
"comma-dangle": 0,
"func-names": 0,
"no-alert": 1,
"no-console": 1,
"no-use-before-define": 1
}
}

14
.gitattributes vendored Normal file
View File

@ -0,0 +1,14 @@
# Set the default behavior, in case people don't have core.autocrlf set.
* text=auto
# Explicitly declare text files you want to always be normalized and converted
# to native line endings on checkout.
*.c text
*.h text
# Declare files that will always have CRLF line endings on checkout.
*.sln text eol=crlf
# Denote all files that are truly binary and should not be modified.
*.png binary
*.jpg binary

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
.DS_Store .DS_Store
.sass-cache .sass-cache
.idea .idea/
node_modules/

26
CHANGELOG.md Normal file
View File

@ -0,0 +1,26 @@
## Changelog
### 0.6.1
* Fixed all eslint issues
### 0.6.0
* Using common.js
* Using webpack for build
* Fixed an issue with colors based on arrays - https://github.com/dataarts/dat.gui/pull/57
* Update factory.js, Step param was not used - https://github.com/dataarts/dat.gui/pull/45
### 0.5
* Moved to requirejs for dependency management.
* 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 folders. See [Folders](http://workshop.chromeexperiments.com/examples/gui/#3--Folders).
* Added support for saving named presets. See [Presets](http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets).
* Removed `height` parameter from GUI constructor. Scrollbar automatically induced when window is too short.
* `dat.GUI.autoPlace` parameter removed. Use `new dat.GUI( { autoPlace: false } )`. See [Custom Placement](http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement).
* `gui.autoListen` and `gui.listenAll()` removed. See [Updating The Display Manually](http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually).
* `dat.GUI.load` removed. See [Saving Values](http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values).
* Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
### 0.4
* Migrated from GitHub to Google Code.

View File

@ -1,87 +1,47 @@
#dat.GUI # dat.GUI
A lightweight graphical user interface for changing variables in JavaScript. A lightweight graphical user interface for changing variables in JavaScript.
Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui. Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui.
---- ## Live demo
##Packaged Builds Simple live demo [is available here](http://korczis.github.io/dat.gui-ng/).
## Packaged Builds
The easiest way to use dat.GUI in your code is by using the built source at `build/dat.gui.min.js`. These built JavaScript files bundle all the necessary dependencies to run dat.GUI. The easiest way to use dat.GUI in your code is by using the built source at `build/dat.gui.min.js`. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.
In your `head` tag, include the following code: 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.js"></script>
``` ```
---- ## Directory Contents
##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> ├── build - Compiled source code.
├── node_modules - External node dependencies.
├── src - Source files.
├── tests - Tests.
└── webpack - Webpack config files.
``` ```
Then, in `path/to/main.js`: ## Building your own dat.GUI
```
require([
'path/to/gui/module/GUI'
], function(GUI) {
// No namespace necessary
var gui = new GUI();
});
```
----
##Directory Contents
* build: Concatenated source code.
* src: Modular code in [require.js](http://requirejs.org/) format. Also includes css, [scss](http://sass-lang.com/), and html, some of which is included during build.
* tests: [QUnit](https://github.com/jquery/qunit) test suite.
* utils: [node.js](http://nodejs.org/) utility scripts for compiling source.
----
##Building your own dat.GUI
In the terminal, enter the following: In the terminal, enter the following:
``` ```
$ cd utils $ npm run build
$ node build_gui.js
``` ```
## npm scripts
- npm test - Run ESLint
- npm run build - Build development and production version of scripts.
- npm run dev - Build development version of script watch for changes.
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.js`
_To export minified source using Closure Compiler, open `utils/build_gui.js` and set the `minify` parameter to `true`._ ## Thanks
----
##Change log
###0.5
* Moved to requirejs for dependency management.
* 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 folders. See [Folders](http://workshop.chromeexperiments.com/examples/gui/#3--Folders).
* Added support for saving named presets. See [Presets](http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets).
* Removed `height` parameter from GUI constructor. Scrollbar automatically induced when window is too short.
* `dat.GUI.autoPlace` parameter removed. Use `new dat.GUI( { autoPlace: false } )`. See [Custom Placement](http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement).
* `gui.autoListen` and `gui.listenAll()` removed. See [Updating The Display Manually](http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually).
* `dat.GUI.load` removed. See [Saving Values](http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values).
* Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.
#0.4
* Migrated from GitHub to Google Code.
----
##Thanks
The following libraries / open-source projects were used in the development of dat.GUI: The following libraries / open-source projects were used in the development of dat.GUI:
* [require.js](http://requirejs.org/) * [require.js](http://requirejs.org/)
* [Sass](http://sass-lang.com/) * [Sass](http://sass-lang.com/)

View File

@ -1,12 +1,12 @@
{ {
"name": "dat-gui", "name": "dat.gui-ng",
"version": "0.5.0", "version": "0.6.1",
"homepage": "https://github.com/dataarts/dat.gui", "homepage": "https://github.com/korczis/dat.gui.git",
"authors": [ "authors": [
"Google Data Arts Team <dataarts@google.com>" "Google Data Arts Team <dataarts@google.com>"
], ],
"description": "dat.gui is a lightweight controller library for JavaScript.", "description": "dat.gui is a lightweight controller library for JavaScript.",
"main": "./build/dat.gui.js", "main": "./index.js",
"keywords": [ "keywords": [
"controller", "controller",
"javascript", "javascript",

File diff suppressed because one or more lines are too long

1
build/dat.gui.js.map Normal file

File diff suppressed because one or more lines are too long

99
build/dat.gui.min.js vendored

File diff suppressed because one or more lines are too long

View File

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

View File

@ -10,3 +10,7 @@
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
require('babel/polyfill');
export default require('./src/dat/index');

45
package.json Normal file
View File

@ -0,0 +1,45 @@
{
"name": "dat.gui",
"version": "0.6.1",
"description": "A lightweight graphical user interface for changing variables in JavaScript.",
"main": "index.js",
"directories": {
"test": "tests"
},
"scripts": {
"test": "node ./node_modules/eslint/bin/eslint.js src/",
"build": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
"dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap"
},
"repository": {
"type": "git",
"url": "git+https://github.com/korczis/dat.gui.git"
},
"author": "Data Arts Team, Google Creative Lab",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/korczis/dat.gui/issues"
},
"homepage": "https://github.com/korczis/dat.gui#readme",
"devDependencies": {
"babel-core": "^5.8.22",
"babel-eslint": "^4.0.5",
"babel-loader": "^5.3.2",
"css-loader": "^0.16.0",
"esdoc": "^0.2.1",
"esdoc-es7-plugin": "0.0.1",
"eslint": "^1.1.0",
"eslint-config-airbnb": "0.0.7",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.2.2",
"extend": "^3.0.0",
"html-loader": "^0.3.0",
"node-sass": "^3.2.0",
"sass-loader": "^2.0.0",
"style-loader": "^0.12.3",
"webpack": "^1.11.0"
},
"dependencies": {
"babel": "^5.8.21"
}
}

View File

@ -11,179 +11,138 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import interpret from './interpret';
'dat/color/interpret', import math from './math';
'dat/color/math', import colorToString from './toString';
'dat/color/toString', import common from '../utils/common';
'dat/utils/common'
], function(interpret, math, toString, common) {
var Color = function() {
class Color {
constructor() {
this.__state = interpret.apply(this, arguments); this.__state = interpret.apply(this, arguments);
if (this.__state === false) { if (this.__state === false) {
throw 'Failed to interpret color arguments'; throw new Error('Failed to interpret color arguments');
} }
this.__state.a = this.__state.a || 1; this.__state.a = this.__state.a || 1;
}
toString() {
return colorToString(this);
}
}; toOriginal() {
return this.__state.conversion.write(this);
Color.COMPONENTS = ['r','g','b','h','s','v','hex','a']; }
}
common.extend(Color.prototype, {
toString: function() {
return toString(this);
},
toOriginal: function() {
return this.__state.conversion.write(this);
}
});
defineRGBComponent(Color.prototype, 'r', 2);
defineRGBComponent(Color.prototype, 'g', 1);
defineRGBComponent(Color.prototype, 'b', 0);
defineHSVComponent(Color.prototype, 'h');
defineHSVComponent(Color.prototype, 's');
defineHSVComponent(Color.prototype, 'v');
Object.defineProperty(Color.prototype, 'a', {
function defineRGBComponent(target, component, componentHexIndex) {
Object.defineProperty(target, component, {
get: function() { get: function() {
return this.__state.a; if (this.__state.space === 'RGB') {
return this.__state[component];
}
Color.recalculateRGB(this, component, componentHexIndex);
return this.__state[component];
}, },
set: function(v) { set: function(v) {
this.__state.a = v; if (this.__state.space !== 'RGB') {
} Color.recalculateRGB(this, component, componentHexIndex);
this.__state.space = 'RGB';
});
Object.defineProperty(Color.prototype, 'hex', {
get: function() {
if (!this.__state.space !== 'HEX') {
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
} }
return this.__state.hex; this.__state[component] = v;
}
});
}
function defineHSVComponent(target, component) {
Object.defineProperty(target, component, {
get: function() {
if (this.__state.space === 'HSV') {
return this.__state[component];
}
Color.recalculateHSV(this);
return this.__state[component];
}, },
set: function(v) { set: function(v) {
if (this.__state.space !== 'HSV') {
Color.recalculateHSV(this);
this.__state.space = 'HSV';
}
this.__state.space = 'HEX'; this.__state[component] = v;
this.__state.hex = v;
} }
}); });
}
function defineRGBComponent(target, component, componentHexIndex) {
Object.defineProperty(target, component, {
get: function() {
if (this.__state.space === 'RGB') {
return this.__state[component];
}
recalculateRGB(this, component, componentHexIndex);
return this.__state[component];
},
set: function(v) {
if (this.__state.space !== 'RGB') {
recalculateRGB(this, component, componentHexIndex);
this.__state.space = 'RGB';
}
this.__state[component] = v;
}
});
Color.recalculateRGB = function(color, component, componentHexIndex) {
if (color.__state.space === 'HEX') {
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
} else if (color.__state.space === 'HSV') {
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
} else {
throw new Error('Corrupted color state');
} }
};
function defineHSVComponent(target, component) { Color.recalculateHSV = function(color) {
const result = math.rgb_to_hsv(color.r, color.g, color.b);
Object.defineProperty(target, component, {
get: function() {
if (this.__state.space === 'HSV')
return this.__state[component];
recalculateHSV(this);
return this.__state[component];
},
set: function(v) {
if (this.__state.space !== 'HSV') {
recalculateHSV(this);
this.__state.space = 'HSV';
}
this.__state[component] = v;
}
});
}
function recalculateRGB(color, component, componentHexIndex) {
if (color.__state.space === 'HEX') {
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
} else if (color.__state.space === 'HSV') {
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
} else {
throw 'Corrupted color state';
common.extend(color.__state,
{
s: result.s,
v: result.v
} }
);
if (!common.isNaN(result.h)) {
color.__state.h = result.h;
} else if (common.isUndefined(color.__state.h)) {
color.__state.h = 0;
} }
};
function recalculateHSV(color) { Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
var result = math.rgb_to_hsv(color.r, color.g, color.b); defineRGBComponent(Color.prototype, 'r', 2);
defineRGBComponent(Color.prototype, 'g', 1);
defineRGBComponent(Color.prototype, 'b', 0);
common.extend(color.__state, defineHSVComponent(Color.prototype, 'h');
{ defineHSVComponent(Color.prototype, 's');
s: result.s, defineHSVComponent(Color.prototype, 'v');
v: result.v
}
);
if (!common.isNaN(result.h)) { Object.defineProperty(Color.prototype, 'a', {
color.__state.h = result.h; get: function() {
} else if (common.isUndefined(color.__state.h)) { return this.__state.a;
color.__state.h = 0; },
}
set: function(v) {
this.__state.a = v;
} }
return Color;
}); });
Object.defineProperty(Color.prototype, 'hex', {
get: function() {
if (!this.__state.space !== 'HEX') {
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
}
return this.__state.hex;
},
set: function(v) {
this.__state.space = 'HEX';
this.__state.hex = v;
}
});
export default Color;

View File

@ -11,330 +11,290 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import toString from './toString';
'dat/color/toString', import common from '../utils/common';
'dat/utils/common'
], function(toString, common) { const INTERPRETATIONS = [
// Strings
var result, toReturn; {
litmus: common.isString,
var interpret = function() { conversions: {
THREE_CHAR_HEX: {
toReturn = false; read: function(original) {
const test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0]; if (test === null) {
common.each(INTERPRETATIONS, function(family) {
if (family.litmus(original)) {
common.each(family.conversions, function(conversion, conversionName) {
result = conversion.read(original);
if (toReturn === false && result !== false) {
toReturn = result;
result.conversionName = conversionName;
result.conversion = conversion;
return common.BREAK;
}
});
return common.BREAK;
}
});
return toReturn;
};
var INTERPRETATIONS = [
// Strings
{
litmus: common.isString,
conversions: {
THREE_CHAR_HEX: {
read: function(original) {
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
if (test === null) return false;
return {
space: 'HEX',
hex: parseInt(
'0x' +
test[1].toString() + test[1].toString() +
test[2].toString() + test[2].toString() +
test[3].toString() + test[3].toString())
};
},
write: toString
},
SIX_CHAR_HEX: {
read: function(original) {
var test = original.match(/^#([A-F0-9]{6})$/i);
if (test === null) return false;
return {
space: 'HEX',
hex: parseInt('0x' + test[1].toString())
};
},
write: toString
},
CSS_RGB: {
read: function(original) {
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
if (test === null) return false;
return {
space: 'RGB',
r: parseFloat(test[1]),
g: parseFloat(test[2]),
b: parseFloat(test[3])
};
},
write: toString
},
CSS_RGBA: {
read: function(original) {
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
if (test === null) return false;
return {
space: 'RGB',
r: parseFloat(test[1]),
g: parseFloat(test[2]),
b: parseFloat(test[3]),
a: parseFloat(test[4])
};
},
write: toString
}
}
},
// Numbers
{
litmus: common.isNumber,
conversions: {
HEX: {
read: function(original) {
return {
space: 'HEX',
hex: original,
conversionName: 'HEX'
}
},
write: function(color) {
return color.hex;
}
}
}
},
// Arrays
{
litmus: common.isArray,
conversions: {
RGB_ARRAY: {
read: function(original) {
if (original.length != 3) return false;
return {
space: 'RGB',
r: original[0],
g: original[1],
b: original[2]
};
},
write: function(color) {
return [color.r, color.g, color.b];
}
},
RGBA_ARRAY: {
read: function(original) {
if (original.length != 4) return false;
return {
space: 'RGB',
r: original[0],
g: original[1],
b: original[2],
a: original[3]
};
},
write: function(color) {
return [color.r, color.g, color.b, color.a];
}
}
}
},
// Objects
{
litmus: common.isObject,
conversions: {
RGBA_OBJ: {
read: function(original) {
if (common.isNumber(original.r) &&
common.isNumber(original.g) &&
common.isNumber(original.b) &&
common.isNumber(original.a)) {
return {
space: 'RGB',
r: original.r,
g: original.g,
b: original.b,
a: original.a
}
}
return false; return false;
},
write: function(color) {
return {
r: color.r,
g: color.g,
b: color.b,
a: color.a
}
} }
return {
space: 'HEX',
hex: parseInt(
'0x' +
test[1].toString() + test[1].toString() +
test[2].toString() + test[2].toString() +
test[3].toString() + test[3].toString(), 0)
};
}, },
RGB_OBJ: { write: toString
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) { SIX_CHAR_HEX: {
return { read: function(original) {
r: color.r, const test = original.match(/^#([A-F0-9]{6})$/i);
g: color.g, if (test === null) {
b: color.b return false;
}
} }
return {
space: 'HEX',
hex: parseInt('0x' + test[1].toString(), 0)
};
}, },
HSVA_OBJ: { write: toString
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) { CSS_RGB: {
return { read: function(original) {
h: color.h, const test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
s: color.s, if (test === null) {
v: color.v, return false;
a: color.a
}
} }
return {
space: 'RGB',
r: parseFloat(test[1]),
g: parseFloat(test[2]),
b: parseFloat(test[3])
};
}, },
HSV_OBJ: { write: toString
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) { CSS_RGBA: {
return { read: function(original) {
h: color.h, const test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
s: color.s, if (test === null) {
v: color.v return false;
}
} }
return {
space: 'RGB',
r: parseFloat(test[1]),
g: parseFloat(test[2]),
b: parseFloat(test[3]),
a: parseFloat(test[4])
};
},
write: toString
}
}
},
// Numbers
{
litmus: common.isNumber,
conversions: {
HEX: {
read: function(original) {
return {
space: 'HEX',
hex: original,
conversionName: 'HEX'
};
},
write: function(color) {
return color.hex;
} }
} }
} }
},
]; // Arrays
{
litmus: common.isArray,
conversions: {
RGB_ARRAY: {
read: function(original) {
if (original.length !== 3) {
return false;
}
return interpret; return {
space: 'RGB',
r: original[0],
g: original[1],
b: original[2]
};
},
write: function(color) {
return [color.r, color.g, color.b];
}
},
}); RGBA_ARRAY: {
read: function(original) {
if (original.length !== 4) return false;
return {
space: 'RGB',
r: original[0],
g: original[1],
b: original[2],
a: original[3]
};
},
write: function(color) {
return [color.r, color.g, color.b, color.a];
}
}
}
},
// Objects
{
litmus: common.isObject,
conversions: {
RGBA_OBJ: {
read: function(original) {
if (common.isNumber(original.r) &&
common.isNumber(original.g) &&
common.isNumber(original.b) &&
common.isNumber(original.a)) {
return {
space: 'RGB',
r: original.r,
g: original.g,
b: original.b,
a: original.a
};
}
return false;
},
write: function(color) {
return {
r: color.r,
g: color.g,
b: color.b,
a: color.a
};
}
},
RGB_OBJ: {
read: function(original) {
if (common.isNumber(original.r) &&
common.isNumber(original.g) &&
common.isNumber(original.b)) {
return {
space: 'RGB',
r: original.r,
g: original.g,
b: original.b
};
}
return false;
},
write: function(color) {
return {
r: color.r,
g: color.g,
b: color.b
};
}
},
HSVA_OBJ: {
read: function(original) {
if (common.isNumber(original.h) &&
common.isNumber(original.s) &&
common.isNumber(original.v) &&
common.isNumber(original.a)) {
return {
space: 'HSV',
h: original.h,
s: original.s,
v: original.v,
a: original.a
};
}
return false;
},
write: function(color) {
return {
h: color.h,
s: color.s,
v: color.v,
a: color.a
};
}
},
HSV_OBJ: {
read: function(original) {
if (common.isNumber(original.h) &&
common.isNumber(original.s) &&
common.isNumber(original.v)) {
return {
space: 'HSV',
h: original.h,
s: original.s,
v: original.v
};
}
return false;
},
write: function(color) {
return {
h: color.h,
s: color.s,
v: color.v
};
}
}
}
}
];
let result;
let toReturn;
const interpret = function() {
toReturn = false;
const original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
common.each(INTERPRETATIONS, function(family) {
if (family.litmus(original)) {
common.each(family.conversions, function(conversion, conversionName) {
result = conversion.read(original);
if (toReturn === false && result !== false) {
toReturn = result;
result.conversionName = conversionName;
result.conversion = conversion;
return common.BREAK;
}
});
return common.BREAK;
}
});
return toReturn;
};
export default interpret;

View File

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

View File

@ -11,27 +11,16 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import common from '../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 + ')';
export default function(color) {
if (color.a === 1 || common.isUndefined(color.a)) {
let s = color.hex.toString(16);
while (s.length < 6) {
s = '0' + s;
} }
return '#' + s;
} }
}); return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
}

View File

@ -11,31 +11,31 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import Controller from './Controller';
'dat/controllers/Controller', import dom from '../dom/dom';
'dat/dom/dom',
'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) { class BooleanController extends Controller {
constructor(object, property) {
super(object, property);
BooleanController.superclass.call(this, object, property); const _this = this;
var _this = this;
this.__prev = this.getValue(); this.__prev = this.getValue();
this.__checkbox = document.createElement('input'); this.__checkbox = document.createElement('input');
this.__checkbox.setAttribute('type', 'checkbox'); this.__checkbox.setAttribute('type', 'checkbox');
function onChange() {
_this.setValue(!_this.__prev);
}
dom.bind(this.__checkbox, 'change', onChange, false); dom.bind(this.__checkbox, 'change', onChange, false);
@ -43,49 +43,27 @@ define([
// Match original value // Match original value
this.updateDisplay(); this.updateDisplay();
}
function onChange() { setValue(v) {
_this.setValue(!_this.__prev); const toReturn = super.setValue(v);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
this.__prev = this.getValue();
return toReturn;
}
updateDisplay() {
if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true;
} else {
this.__checkbox.checked = false;
} }
}; return super.updateDisplay();
}
}
BooleanController.superclass = Controller; export default BooleanController;
common.extend(
BooleanController.prototype,
Controller.prototype,
{
setValue: function(v) {
var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
this.__prev = this.getValue();
return toReturn;
},
updateDisplay: function() {
if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true;
} else {
this.__checkbox.checked = false;
}
return BooleanController.superclass.prototype.updateDisplay.call(this);
}
}
);
return BooleanController;
});

View File

@ -11,22 +11,20 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import Controller from './Controller';
'dat/controllers/Controller', import dom from '../dom/dom';
'dat/dom/dom', import Color from '../color/Color';
'dat/color/Color', import interpret from '../color/interpret';
'dat/color/interpret', import common from '../utils/common';
'dat/utils/common'
], function(Controller, dom, Color, interpret, common) {
var ColorController = function(object, property) { class ColorController extends Controller {
constructor(object, property) {
ColorController.superclass.call(this, object, property); super(object, property);
this.__color = new Color(this.getValue()); this.__color = new Color(this.getValue());
this.__temp = new Color(0); this.__temp = new Color(0);
var _this = this; const _this = this;
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
@ -60,17 +58,15 @@ define([
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__selector, 'mousedown', function(e) { dom.bind(this.__selector, 'mousedown', function(/* e */) {
dom dom
.addClass(this, 'drag') .addClass(this, 'drag')
.bind(window, 'mouseup', function(e) { .bind(window, 'mouseup', function(/* e */) {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
}); });
var value_field = document.createElement('div'); const valueField = document.createElement('div');
common.extend(this.__selector.style, { common.extend(this.__selector.style, {
width: '122px', width: '122px',
@ -84,12 +80,12 @@ define([
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 < 0.5 ? '#fff' : '#000'),
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)', boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
borderRadius: '12px', borderRadius: '12px',
zIndex: 1 zIndex: 1
}); });
common.extend(this.__hue_knob.style, { common.extend(this.__hue_knob.style, {
position: 'absolute', position: 'absolute',
width: '15px', width: '15px',
@ -107,13 +103,13 @@ define([
cursor: 'pointer' cursor: 'pointer'
}); });
common.extend(value_field.style, { common.extend(valueField.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
background: 'none' background: 'none'
}); });
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000'); linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
common.extend(this.__hue_field.style, { common.extend(this.__hue_field.style, {
width: '15px', width: '15px',
@ -160,7 +156,7 @@ define([
} }
function onBlur() { function onBlur() {
var i = interpret(this.value); const i = interpret(this.value);
if (i !== false) { if (i !== false) {
_this.__color.__state = i; _this.__color.__state = i;
_this.setValue(_this.__color.toOriginal()); _this.setValue(_this.__color.toOriginal());
@ -174,7 +170,7 @@ define([
dom.unbind(window, 'mouseup', unbindH); dom.unbind(window, 'mouseup', unbindH);
} }
this.__saturation_field.appendChild(value_field); this.__saturation_field.appendChild(valueField);
this.__selector.appendChild(this.__field_knob); this.__selector.appendChild(this.__field_knob);
this.__selector.appendChild(this.__saturation_field); this.__selector.appendChild(this.__saturation_field);
this.__selector.appendChild(this.__hue_field); this.__selector.appendChild(this.__hue_field);
@ -186,19 +182,24 @@ define([
this.updateDisplay(); this.updateDisplay();
function setSV(e) { function setSV(e) {
e.preventDefault(); e.preventDefault();
var w = dom.getWidth(_this.__saturation_field); const w = dom.getWidth(_this.__saturation_field);
var o = dom.getOffset(_this.__saturation_field); const o = dom.getOffset(_this.__saturation_field);
var s = (e.clientX - o.left + document.body.scrollLeft) / w; let s = (e.clientX - o.left + document.body.scrollLeft) / w;
var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w; let v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
if (v > 1) v = 1; if (v > 1) {
else if (v < 0) v = 0; v = 1;
} else if (v < 0) {
v = 0;
}
if (s > 1) s = 1; if (s > 1) {
else if (s < 0) s = 0; s = 1;
} else if (s < 0) {
s = 0;
}
_this.__color.v = v; _this.__color.v = v;
_this.__color.s = s; _this.__color.s = s;
@ -207,118 +208,97 @@ define([
return false; return false;
} }
function setH(e) { function setH(e) {
e.preventDefault(); e.preventDefault();
var s = dom.getHeight(_this.__hue_field); const s = dom.getHeight(_this.__hue_field);
var o = dom.getOffset(_this.__hue_field); const o = dom.getOffset(_this.__hue_field);
var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s; let h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
if (h > 1) h = 1; if (h > 1) {
else if (h < 0) h = 0; h = 1;
} else if (h < 0) {
h = 0;
}
_this.__color.h = h * 360; _this.__color.h = h * 360;
_this.setValue(_this.__color.toOriginal()); _this.setValue(_this.__color.toOriginal());
return false; return false;
}
}
updateDisplay() {
const i = interpret(this.getValue());
if (i !== false) {
let 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);
ColorController.superclass = Controller; this.__temp.a = 1;
common.extend( const flip = (this.__color.v < 0.5 || this.__color.s > 0.5) ? 255 : 0;
const _flip = 255 - flip;
ColorController.prototype, common.extend(this.__field_knob.style, {
Controller.prototype, 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';
updateDisplay: function() { this.__temp.s = 1;
this.__temp.v = 1;
var i = interpret(this.getValue()); linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
if (i !== false) { common.extend(this.__input.style, {
backgroundColor: this.__input.value = this.__color.toString(),
var mismatch = false; color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
// Check for mismatch on the interpreted value.
common.each(Color.COMPONENTS, function(component) {
if (!common.isUndefined(i[component]) &&
!common.isUndefined(this.__color.__state[component]) &&
i[component] !== this.__color.__state[component]) {
mismatch = true;
return {}; // break
}
}, this);
// If nothing diverges, we keep our previous values
// for statefulness, otherwise we recalculate fresh
if (mismatch) {
common.extend(this.__color.__state, i);
}
}
common.extend(this.__temp.__state, this.__color.__state);
this.__temp.a = 1;
var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
var _flip = 255 - flip;
common.extend(this.__field_knob.style, {
marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')'
});
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
this.__temp.s = 1;
this.__temp.v = 1;
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
common.extend(this.__input.style, {
backgroundColor: this.__input.value = this.__color.toString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip +')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)'
});
}
}
);
var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
function linearGradient(elem, x, a, b) {
elem.style.background = '';
common.each(vendors, function(vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); ';
}); });
} }
}
function hueGradient(elem) {
elem.style.background = '';
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
}
const vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
return ColorController; function linearGradient(elem, x, a, b) {
elem.style.background = '';
common.each(vendors, function(vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
});
}
}); function hueGradient(elem) {
elem.style.background = '';
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
}
export default ColorController;

View File

@ -11,20 +11,16 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ /**
'dat/utils/common' * @class An "abstract" class that represents a given property of an object.
], function(common) { *
* @param {Object} object The object to be manipulated
/** * @param {string} property The name of the property to be manipulated
* @class An "abstract" class that represents a given property of an object. *
* * @member dat.controllers
* @param {Object} object The object to be manipulated */
* @param {string} property The name of the property to be manipulated class Controller {
* constructor(object, property) {
* @member dat.controllers
*/
var Controller = function(object, property) {
this.initialValue = object[property]; this.initialValue = object[property];
/** /**
@ -58,87 +54,74 @@ define([
* @ignore * @ignore
*/ */
this.__onFinishChange = undefined; this.__onFinishChange = undefined;
}
}; /**
* Specify that a function fire every time someone changes the value with
* this Controller.
*
* @param {Function} fnc This function will be called whenever the value
* is modified via this Controller.
* @returns {Controller} this
*/
onChange(fnc) {
this.__onChange = fnc;
return this;
}
common.extend( /**
* Specify that a function fire every time someone "finishes" changing
* the value wih this Controller. Useful for values that change
* incrementally like numbers or strings.
*
* @param {Function} fnc This function will be called whenever
* someone "finishes" changing the value via this Controller.
* @returns {Controller} this
*/
onFinishChange(fnc) {
this.__onFinishChange = fnc;
return this;
}
Controller.prototype, /**
* Change the value of <code>object[property]</code>
*
* @param {Object} newValue The new value of <code>object[property]</code>
*/
setValue(newValue) {
this.object[this.property] = newValue;
if (this.__onChange) {
this.__onChange.call(this, newValue);
}
/** @lends dat.controllers.Controller.prototype */ this.updateDisplay();
{ return this;
}
/** /**
* Specify that a function fire every time someone changes the value with * Gets the value of <code>object[property]</code>
* this Controller. *
* * @returns {Object} The current value of <code>object[property]</code>
* @param {Function} fnc This function will be called whenever the value */
* is modified via this Controller. getValue() {
* @returns {dat.controllers.Controller} this return this.object[this.property];
*/ }
onChange: function(fnc) {
this.__onChange = fnc;
return this;
},
/** /**
* Specify that a function fire every time someone "finishes" changing * Refreshes the visual display of a Controller in order to keep sync
* the value wih this Controller. Useful for values that change * with the object's current value.
* incrementally like numbers or strings. * @returns {Controller} this
* */
* @param {Function} fnc This function will be called whenever updateDisplay() {
* someone "finishes" changing the value via this Controller. return this;
* @returns {dat.controllers.Controller} this }
*/
onFinishChange: function(fnc) {
this.__onFinishChange = fnc;
return this;
},
/** /**
* Change the value of <code>object[property]</code> * @returns {Boolean} true if the value has deviated from initialValue
* */
* @param {Object} newValue The new value of <code>object[property]</code> isModified() {
*/ return this.initialValue !== this.getValue();
setValue: function(newValue) { }
this.object[this.property] = newValue; }
if (this.__onChange) {
this.__onChange.call(this, newValue);
}
this.updateDisplay();
return this;
},
/** export default Controller;
* Gets the value of <code>object[property]</code>
*
* @returns {Object} The current value of <code>object[property]</code>
*/
getValue: function() {
return this.object[this.property];
},
/**
* Refreshes the visual display of a Controller in order to keep sync
* with the object's current value.
* @returns {dat.controllers.Controller} this
*/
updateDisplay: function() {
return this;
},
/**
* @returns {Boolean} true if the value has deviated from initialValue
*/
isModified: function() {
return this.initialValue !== this.getValue()
}
}
);
return Controller;
});

View File

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

View File

@ -11,30 +11,28 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import Controller from './Controller';
'dat/controllers/Controller', import dom from '../dom/dom';
'dat/dom/dom',
'dat/utils/common'
], function(Controller, dom, common) {
/** /**
* @class Provides a GUI interface to fire a specified method, a property of an object. * @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) { class FunctionController extends Controller {
constructor(object, property, text) {
super(object, property);
FunctionController.superclass.call(this, object, property); const _this = this;
var _this = this;
this.__button = document.createElement('div'); this.__button = document.createElement('div');
this.__button.innerHTML = text === undefined ? 'Fire' : text; this.__button.innerHTML = text === undefined ? 'Fire' : text;
dom.bind(this.__button, 'click', function(e) { dom.bind(this.__button, 'click', function(e) {
e.preventDefault(); e.preventDefault();
_this.fire(); _this.fire();
@ -44,31 +42,17 @@ define([
dom.addClass(this.__button, 'button'); dom.addClass(this.__button, 'button');
this.domElement.appendChild(this.__button); this.domElement.appendChild(this.__button);
}
fire() {
if (this.__onChange) {
this.__onChange.call(this);
}
this.getValue().call(this.object);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
}
}
}; export default FunctionController;
FunctionController.superclass = Controller;
common.extend(
FunctionController.prototype,
Controller.prototype,
{
fire: function() {
if (this.__onChange) {
this.__onChange.call(this);
}
this.getValue().call(this.object);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
}
}
);
return FunctionController;
});

View File

@ -11,135 +11,112 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import Controller from './Controller';
'dat/controllers/Controller', import common from '../utils/common';
'dat/utils/common'
], function(Controller, common) {
/** function numDecimals(x) {
* @class Represents a given property of an object that is a number. const _x = x.toString();
* if (_x.indexOf('.') > -1) {
* @extends dat.controllers.Controller return _x.length - _x.indexOf('.') - 1;
* }
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
* @param {Object} [params] Optional parameters
* @param {Number} [params.min] Minimum allowed value
* @param {Number} [params.max] Maximum allowed value
* @param {Number} [params.step] Increment by which to change value
*
* @member dat.controllers
*/
var NumberController = function(object, property, params) {
NumberController.superclass.call(this, object, property); return 0;
}
params = params || {}; /**
* @class Represents a given property of an object that is a number.
*
* @extends dat.controllers.Controller
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
* @param {Object} [params] Optional parameters
* @param {Number} [params.min] Minimum allowed value
* @param {Number} [params.max] Maximum allowed value
* @param {Number} [params.step] Increment by which to change value
*
* @member dat.controllers
*/
class NumberController extends Controller {
constructor(object, property, params) {
super(object, property);
this.__min = params.min; const _params = params || {};
this.__max = params.max;
this.__step = params.step; this.__min = _params.min;
this.__max = _params.max;
this.__step = _params.step;
if (common.isUndefined(this.__step)) { if (common.isUndefined(this.__step)) {
if (this.initialValue === 0) {
if (this.initialValue == 0) {
this.__impliedStep = 1; // What are we, psychics? this.__impliedStep = 1; // What are we, psychics?
} else { } else {
// Hey Doug, check this out. // Hey Doug, check this out.
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue))/Math.LN10))/10; this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
} }
} else { } else {
this.__impliedStep = this.__step;
this.__impliedStep = this.__step;
} }
this.__precision = numDecimals(this.__impliedStep); this.__precision = numDecimals(this.__impliedStep);
};
NumberController.superclass = Controller;
common.extend(
NumberController.prototype,
Controller.prototype,
/** @lends dat.controllers.NumberController.prototype */
{
setValue: function(v) {
if (this.__min !== undefined && v < this.__min) {
v = this.__min;
} else if (this.__max !== undefined && v > this.__max) {
v = this.__max;
}
if (this.__step !== undefined && v % this.__step != 0) {
v = Math.round(v / this.__step) * this.__step;
}
return NumberController.superclass.prototype.setValue.call(this, v);
},
/**
* Specify a minimum value for <code>object[property]</code>.
*
* @param {Number} minValue The minimum value for
* <code>object[property]</code>
* @returns {dat.controllers.NumberController} this
*/
min: function(v) {
this.__min = v;
return this;
},
/**
* Specify a maximum value for <code>object[property]</code>.
*
* @param {Number} maxValue The maximum value for
* <code>object[property]</code>
* @returns {dat.controllers.NumberController} this
*/
max: function(v) {
this.__max = v;
return this;
},
/**
* Specify a step value that dat.controllers.NumberController
* increments by.
*
* @param {Number} stepValue The step value for
* dat.controllers.NumberController
* @default if minimum and maximum specified increment is 1% of the
* difference otherwise stepValue is 1
* @returns {dat.controllers.NumberController} this
*/
step: function(v) {
this.__step = v;
this.__impliedStep = v;
this.__precision = numDecimals(v);
return this;
}
}
);
function numDecimals(x) {
x = x.toString();
if (x.indexOf('.') > -1) {
return x.length - x.indexOf('.') - 1;
} else {
return 0;
}
} }
return NumberController; setValue(v) {
let _v = v;
}); if (this.__min !== undefined && _v < this.__min) {
_v = this.__min;
} else if (this.__max !== undefined && _v > this.__max) {
_v = this.__max;
}
if (this.__step !== undefined && _v % this.__step !== 0) {
_v = Math.round(_v / this.__step) * this.__step;
}
return super.setValue(_v);
}
/**
* Specify a minimum value for <code>object[property]</code>.
*
* @param {Number} minValue The minimum value for
* <code>object[property]</code>
* @returns {dat.controllers.NumberController} this
*/
min(v) {
this.__min = v;
return this;
}
/**
* Specify a maximum value for <code>object[property]</code>.
*
* @param {Number} maxValue The maximum value for
* <code>object[property]</code>
* @returns {dat.controllers.NumberController} this
*/
max(v) {
this.__max = v;
return this;
}
/**
* Specify a step value that dat.controllers.NumberController
* increments by.
*
* @param {Number} stepValue The step value for
* dat.controllers.NumberController
* @default if minimum and maximum specified increment is 1% of the
* difference otherwise stepValue is 1
* @returns {dat.controllers.NumberController} this
*/
step(v) {
this.__step = v;
this.__impliedStep = v;
this.__precision = numDecimals(v);
return this;
}
}
export default NumberController;

View File

@ -11,41 +11,76 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import NumberController from './NumberController';
'dat/controllers/NumberController', import dom from '../dom/dom';
'dat/dom/dom', import common from '../utils/common';
'dat/utils/common'
], function(NumberController, dom, common) {
/** function roundToDecimal(value, decimals) {
* @class Represents a given property of an object that is a number and const tenTo = Math.pow(10, decimals);
* provides an input element with which to manipulate it. return Math.round(value * tenTo) / tenTo;
* }
* @extends dat.controllers.Controller
* @extends dat.controllers.NumberController /**
* * @class Represents a given property of an object that is a number and
* @param {Object} object The object to be manipulated * provides an input element with which to manipulate it.
* @param {string} property The name of the property to be manipulated *
* @param {Object} [params] Optional parameters * @extends dat.controllers.Controller
* @param {Number} [params.min] Minimum allowed value * @extends dat.controllers.NumberController
* @param {Number} [params.max] Maximum allowed value *
* @param {Number} [params.step] Increment by which to change value * @param {Object} object The object to be manipulated
* * @param {string} property The name of the property to be manipulated
* @member dat.controllers * @param {Object} [params] Optional parameters
*/ * @param {Number} [params.min] Minimum allowed value
var NumberControllerBox = function(object, property, params) { * @param {Number} [params.max] Maximum allowed value
* @param {Number} [params.step] Increment by which to change value
*
* @member dat.controllers
*/
class NumberControllerBox extends NumberController {
constructor(object, property, params) {
super(object, property, params);
this.__truncationSuspended = false; this.__truncationSuspended = false;
NumberControllerBox.superclass.call(this, object, property, params); const _this = this;
var _this = this;
/** /**
* {Number} Previous mouse y position * {Number} Previous mouse y position
* @ignore * @ignore
*/ */
var prev_y; let prevY;
function onChange() {
const 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 onMouseDrag(e) {
const diff = prevY - e.clientY;
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
prevY = e.clientY;
}
function onMouseUp() {
dom.unbind(window, 'mousemove', onMouseDrag);
dom.unbind(window, 'mouseup', onMouseUp);
}
function onMouseDown(e) {
dom.bind(window, 'mousemove', onMouseDrag);
dom.bind(window, 'mouseup', onMouseUp);
prevY = e.clientY;
}
this.__input = document.createElement('input'); this.__input = document.createElement('input');
this.__input.setAttribute('type', 'text'); this.__input.setAttribute('type', 'text');
@ -56,79 +91,25 @@ define([
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'mousedown', onMouseDown); dom.bind(this.__input, 'mousedown', onMouseDown);
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function(e) {
// When pressing entire, you can be as precise as you want. // When pressing entire, you can be as precise as you want.
if (e.keyCode === 13) { if (e.keyCode === 13) {
_this.__truncationSuspended = true; _this.__truncationSuspended = true;
this.blur(); this.blur();
_this.__truncationSuspended = false; _this.__truncationSuspended = false;
} }
}); });
function onChange() {
var attempted = parseFloat(_this.__input.value);
if (!common.isNaN(attempted)) _this.setValue(attempted);
}
function onBlur() {
onChange();
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}
}
function onMouseDown(e) {
dom.bind(window, 'mousemove', onMouseDrag);
dom.bind(window, 'mouseup', onMouseUp);
prev_y = e.clientY;
}
function onMouseDrag(e) {
var diff = prev_y - e.clientY;
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
prev_y = e.clientY;
}
function onMouseUp() {
dom.unbind(window, 'mousemove', onMouseDrag);
dom.unbind(window, 'mouseup', onMouseUp);
}
this.updateDisplay(); this.updateDisplay();
this.domElement.appendChild(this.__input); 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; updateDisplay() {
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
return super.updateDisplay();
}
}
export default NumberControllerBox;
});

View File

@ -11,51 +11,48 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import NumberController from './NumberController';
'dat/controllers/NumberController', import dom from '../dom/dom';
'dat/dom/dom', import css from '../utils/css';
'dat/utils/css', import styleSheet from '!css!sass!./NumberControllerSlider.scss';
'dat/utils/common',
'text!dat/controllers/NumberControllerSlider.css'
],
function(NumberController, dom, css, common, styleSheet) {
/** function map(v, i1, i2, o1, o2) {
* @class Represents a given property of an object that is a number, contains return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
* a minimum and maximum, and provides a slider element with which to }
* manipulate it. It should be noted that the slider element is made up of
* <code>&lt;div&gt;</code> tags, <strong>not</strong> the html5
* <code>&lt;slider&gt;</code> element.
*
* @extends dat.controllers.Controller
* @extends dat.controllers.NumberController
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
* @param {Number} minValue Minimum allowed value
* @param {Number} maxValue Maximum allowed value
* @param {Number} stepValue Increment by which to change value
*
* @member dat.controllers
*/
var NumberControllerSlider = function(object, property, min, max, step) {
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step }); /**
* @class Represents a given property of an object that is a number, contains
* a minimum and maximum, and provides a slider element with which to
* manipulate it. It should be noted that the slider element is made up of
* <code>&lt;div&gt;</code> tags, <strong>not</strong> the html5
* <code>&lt;slider&gt;</code> element.
*
* @extends dat.controllers.Controller
* @extends dat.controllers.NumberController
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
* @param {Number} minValue Minimum allowed value
* @param {Number} maxValue Maximum allowed value
* @param {Number} stepValue Increment by which to change value
*
* @member dat.controllers
*/
class NumberControllerSlider extends NumberController {
constructor(object, property, min, max, step) {
super(object, property, {min: min, max: max, step: step});
var _this = this; const _this = this;
this.__background = document.createElement('div'); this.__background = document.createElement('div');
this.__foreground = document.createElement('div'); this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown); dom.bind(this.__background, 'mousedown', onMouseDown);
dom.addClass(this.__background, 'slider'); dom.addClass(this.__background, 'slider');
dom.addClass(this.__foreground, 'slider-fg'); dom.addClass(this.__foreground, 'slider-fg');
function onMouseDown(e) { function onMouseDown(e) {
dom.bind(window, 'mousemove', onMouseDrag); dom.bind(window, 'mousemove', onMouseDrag);
dom.bind(window, 'mouseup', onMouseUp); dom.bind(window, 'mouseup', onMouseUp);
@ -63,18 +60,16 @@ function(NumberController, dom, css, common, styleSheet) {
} }
function onMouseDrag(e) { function onMouseDrag(e) {
e.preventDefault(); e.preventDefault();
var offset = dom.getOffset(_this.__background); const offset = dom.getOffset(_this.__background);
var width = dom.getWidth(_this.__background); const width = dom.getWidth(_this.__background);
_this.setValue( _this.setValue(
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max) map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
); );
return false; return false;
} }
function onMouseUp() { function onMouseUp() {
@ -89,41 +84,20 @@ function(NumberController, dom, css, common, styleSheet) {
this.__background.appendChild(this.__foreground); this.__background.appendChild(this.__foreground);
this.domElement.appendChild(this.__background); this.domElement.appendChild(this.__background);
}
}; updateDisplay() {
const pct = (this.getValue() - this.__min) / (this.__max - this.__min);
this.__foreground.style.width = pct * 100 + '%';
return super.updateDisplay();
}
}
NumberControllerSlider.superclass = NumberController; /**
* Injects default stylesheet for slider elements.
*/
NumberControllerSlider.useDefaultStyles = function() {
css.inject(styleSheet.toString());
};
/** export default NumberControllerSlider;
* Injects default stylesheet for slider elements.
*/
NumberControllerSlider.useDefaultStyles = function() {
css.inject(styleSheet);
};
common.extend(
NumberControllerSlider.prototype,
NumberController.prototype,
{
updateDisplay: function() {
var pct = (this.getValue() - this.__min)/(this.__max - this.__min);
this.__foreground.style.width = pct*100+'%';
return NumberControllerSlider.superclass.prototype.updateDisplay.call(this);
}
}
);
function map(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}
return NumberControllerSlider;
});

View File

@ -12,20 +12,16 @@
*/ */
.slider { .slider {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
height: 1em; height: 1em;
border-radius: 1em; border-radius: 1em 0 0 1em;
background-color: #eee; background-color: #eee;
padding: 0 0.5em;
overflow: hidden;
} }
.slider-fg { .slider-fg {
padding: 1px 0 2px 0;
background-color: #aaa; background-color: #aaa;
height: 1em; height: 1em;
margin-left: -0.5em; margin-left: -0.5em;
padding-right: 0.5em;
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
} }
@ -33,11 +29,11 @@
display: inline-block; display: inline-block;
border-radius: 1em; border-radius: 1em;
background-color: #fff; background-color: #fff;
border: 1px solid #aaa; border: 1px solid #aaa;
content: ''; content: '';
float: right; float: right;
margin-right: -1em; margin-right: -0.5em;
margin-top: -1px; margin-top: 3px;
height: 0.9em; height: 0.9em;
width: 0.9em; width: 0.9em;
} }

View File

@ -11,31 +11,30 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import Controller from './Controller';
'dat/controllers/Controller', import dom from '../dom/dom';
'dat/dom/dom', import common from '../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) { class OptionController extends Controller {
constructor(object, property, opts) {
super(object, property);
OptionController.superclass.call(this, object, property); let options = opts;
var _this = this; const _this = this;
/** /**
* The drop down menu * The drop down menu
@ -44,7 +43,7 @@ function(Controller, dom, common) {
this.__select = document.createElement('select'); this.__select = document.createElement('select');
if (common.isArray(options)) { if (common.isArray(options)) {
var map = {}; const map = {};
common.each(options, function(element) { common.each(options, function(element) {
map[element] = element; map[element] = element;
}); });
@ -52,52 +51,36 @@ function(Controller, dom, common) {
} }
common.each(options, function(value, key) { common.each(options, function(value, key) {
const opt = document.createElement('option');
var opt = document.createElement('option');
opt.innerHTML = key; opt.innerHTML = key;
opt.setAttribute('value', value); opt.setAttribute('value', value);
_this.__select.appendChild(opt); _this.__select.appendChild(opt);
}); });
// Acknowledge original value // Acknowledge original value
this.updateDisplay(); this.updateDisplay();
dom.bind(this.__select, 'change', function() { dom.bind(this.__select, 'change', function() {
var desiredValue = this.options[this.selectedIndex].value; const desiredValue = this.options[this.selectedIndex].value;
_this.setValue(desiredValue); _this.setValue(desiredValue);
}); });
this.domElement.appendChild(this.__select); this.domElement.appendChild(this.__select);
}
}; setValue(v) {
const toReturn = super.setValue(v);
OptionController.superclass = Controller; if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
return toReturn;
}
common.extend( updateDisplay() {
this.__select.value = this.getValue();
return super.updateDisplay();
}
}
OptionController.prototype, export default OptionController;
Controller.prototype,
{
setValue: function(v) {
var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
return toReturn;
},
updateDisplay: function() {
this.__select.value = this.getValue();
return OptionController.superclass.prototype.updateDisplay.call(this);
}
}
);
return OptionController;
});

View File

@ -11,27 +11,34 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import Controller from './Controller';
'dat/controllers/Controller', import dom from '../dom/dom';
'dat/dom/dom',
'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) { class StringController extends Controller {
constructor(object, property) {
super(object, property);
StringController.superclass.call(this, object, property); const _this = this;
var _this = this; function onChange() {
_this.setValue(_this.__input.value);
}
function onBlur() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}
}
this.__input = document.createElement('input'); this.__input = document.createElement('input');
this.__input.setAttribute('type', 'text'); this.__input.setAttribute('type', 'text');
@ -44,46 +51,20 @@ define([
this.blur(); this.blur();
} }
}); });
function onChange() {
_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);
}
}; updateDisplay() {
// Stops the caret from moving on account of:
// keyup -> setValue -> updateDisplay
if (!dom.isActive(this.__input)) {
this.__input.value = this.getValue();
}
return super.updateDisplay();
}
}
StringController.superclass = Controller; export default StringController;
common.extend(
StringController.prototype,
Controller.prototype,
{
updateDisplay: function() {
// Stops the caret from moving on account of:
// keyup -> setValue -> updateDisplay
if (!dom.isActive(this.__input)) {
this.__input.value = this.getValue();
}
return StringController.superclass.prototype.updateDisplay.call(this);
}
}
);
return StringController;
});

View File

@ -1,65 +0,0 @@
/**
* dat-gui JavaScript Controller Library
* http://code.google.com/p/dat-gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
define([
'dat/controllers/OptionController',
'dat/controllers/NumberControllerBox',
'dat/controllers/NumberControllerSlider',
'dat/controllers/StringController',
'dat/controllers/FunctionController',
'dat/controllers/BooleanController',
'dat/utils/common'
],
function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) {
return function(object, property) {
var initialValue = object[property];
// Providing options?
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
return new OptionController(object, property, arguments[2]);
}
// Providing a map?
if (common.isNumber(initialValue)) {
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
// Has min and max.
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
} else {
return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });
}
}
if (common.isString(initialValue)) {
return new StringController(object, property);
}
if (common.isFunction(initialValue)) {
return new FunctionController(object, property, '');
}
if (common.isBoolean(initialValue)) {
return new BooleanController(object, property);
}
}
});

View File

@ -11,14 +11,11 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import dom from '../dom/dom';
'dat/dom/dom', import common from '../utils/common';
'dat/utils/common'
], function(dom, common) {
var CenteredDiv = function() {
class CenteredDiv {
constructor() {
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)',
@ -48,17 +45,14 @@ define([
document.body.appendChild(this.backgroundElement); document.body.appendChild(this.backgroundElement);
document.body.appendChild(this.domElement); document.body.appendChild(this.domElement);
var _this = this; const _this = this;
dom.bind(this.backgroundElement, 'click', function() { dom.bind(this.backgroundElement, 'click', function() {
_this.hide(); _this.hide();
}); });
}
show() {
}; const _this = this;
CenteredDiv.prototype.show = function() {
var _this = this;
this.backgroundElement.style.display = 'block'; this.backgroundElement.style.display = 'block';
@ -74,22 +68,21 @@ define([
_this.domElement.style.opacity = 1; _this.domElement.style.opacity = 1;
_this.domElement.style.webkitTransform = 'scale(1)'; _this.domElement.style.webkitTransform = 'scale(1)';
}); });
}
}; /**
* Hide centered div
CenteredDiv.prototype.hide = function() { */
hide() {
var _this = this; const _this = this;
var hide = function() {
const hide = function() {
_this.domElement.style.display = 'none'; _this.domElement.style.display = 'none';
_this.backgroundElement.style.display = 'none'; _this.backgroundElement.style.display = 'none';
dom.unbind(_this.domElement, 'webkitTransitionEnd', hide); dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
dom.unbind(_this.domElement, 'transitionend', hide); dom.unbind(_this.domElement, 'transitionend', hide);
dom.unbind(_this.domElement, 'oTransitionEnd', hide); dom.unbind(_this.domElement, 'oTransitionEnd', hide);
}; };
dom.bind(this.domElement, 'webkitTransitionEnd', hide); dom.bind(this.domElement, 'webkitTransitionEnd', hide);
@ -100,18 +93,12 @@ define([
// this.domElement.style.top = '48%'; // this.domElement.style.top = '48%';
this.domElement.style.opacity = 0; this.domElement.style.opacity = 0;
this.domElement.style.webkitTransform = 'scale(1.1)'; this.domElement.style.webkitTransform = 'scale(1.1)';
};
CenteredDiv.prototype.layout = function() {
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';
};
function lockScroll(e) {
console.log(e);
} }
return CenteredDiv; layout() {
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';
}
}
}); export default CenteredDiv;

View File

@ -11,277 +11,282 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ import common from '../utils/common';
'dat/utils/common'
], function(common) {
var EVENT_MAP = { const 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 = {}; const 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/; const CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
function cssValueToPixels(val) {
if (val === '0' || common.isUndefined(val)) return 0;
var match = val.match(CSS_VALUE_PIXELS);
if (!common.isNull(match)) {
return parseFloat(match[1]);
}
// TODO ...ems? %?
function cssValueToPixels(val) {
if (val === '0' || common.isUndefined(val)) {
return 0; return 0;
} }
const match = val.match(CSS_VALUE_PIXELS);
if (!common.isNull(match)) {
return parseFloat(match[1]);
}
// TODO ...ems? %?
return 0;
}
/**
* @namespace
* @member dat.dom
*/
const dom = {
/** /**
* @namespace *
* @member dat.dom * @param elem
* @param selectable
*/ */
var dom = { makeSelectable: function(elem, selectable) {
if (elem === undefined || elem.style === undefined) return;
/** elem.onselectstart = selectable ? function() {
* return false;
* @param elem } : function() {
* @param selectable };
*/
makeSelectable: function(elem, selectable) {
if (elem === undefined || elem.style === undefined) return; elem.style.MozUserSelect = selectable ? 'auto' : 'none';
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
elem.unselectable = selectable ? 'on' : 'off';
},
elem.onselectstart = selectable ? function() { /**
return false; *
} : function() { * @param elem
}; * @param horizontal
* @param vert
*/
makeFullscreen: function(elem, hor, vert) {
let vertical = vert;
let horizontal = hor;
elem.style.MozUserSelect = selectable ? 'auto' : 'none'; if (common.isUndefined(horizontal)) {
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none'; horizontal = true;
elem.unselectable = selectable ? 'on' : 'off';
},
/**
*
* @param elem
* @param horizontal
* @param vertical
*/
makeFullscreen: function(elem, horizontal, vertical) {
if (common.isUndefined(horizontal)) horizontal = true;
if (common.isUndefined(vertical)) vertical = true;
elem.style.position = 'absolute';
if (horizontal) {
elem.style.left = 0;
elem.style.right = 0;
}
if (vertical) {
elem.style.top = 0;
elem.style.bottom = 0;
}
},
/**
*
* @param elem
* @param eventType
* @param params
*/
fakeEvent: function(elem, eventType, params, aux) {
params = params || {};
var className = EVENT_MAP_INV[eventType];
if (!className) {
throw new Error('Event type ' + eventType + ' not supported.');
}
var evt = document.createEvent(className);
switch (className) {
case 'MouseEvents':
var clientX = params.x || params.clientX || 0;
var clientY = params.y || params.clientY || 0;
evt.initMouseEvent(eventType, params.bubbles || false,
params.cancelable || true, window, params.clickCount || 1,
0, //screen X
0, //screen Y
clientX, //client X
clientY, //client Y
false, false, false, false, 0, null);
break;
case 'KeyboardEvents':
var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
common.defaults(params, {
cancelable: true,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
keyCode: undefined,
charCode: undefined
});
init(eventType, params.bubbles || false,
params.cancelable, window,
params.ctrlKey, params.altKey,
params.shiftKey, params.metaKey,
params.keyCode, params.charCode);
break;
default:
evt.initEvent(eventType, params.bubbles || false,
params.cancelable || true);
break;
}
common.defaults(evt, aux);
elem.dispatchEvent(evt);
},
/**
*
* @param elem
* @param event
* @param func
* @param bool
*/
bind: function(elem, event, func, bool) {
bool = bool || false;
if (elem.addEventListener)
elem.addEventListener(event, func, bool);
else if (elem.attachEvent)
elem.attachEvent('on' + event, func);
return dom;
},
/**
*
* @param elem
* @param event
* @param func
* @param bool
*/
unbind: function(elem, event, func, bool) {
bool = bool || false;
if (elem.removeEventListener)
elem.removeEventListener(event, func, bool);
else if (elem.detachEvent)
elem.detachEvent('on' + event, func);
return dom;
},
/**
*
* @param elem
* @param className
*/
addClass: function(elem, className) {
if (elem.className === undefined) {
elem.className = className;
} else if (elem.className !== className) {
var classes = elem.className.split(/ +/);
if (classes.indexOf(className) == -1) {
classes.push(className);
elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
}
}
return dom;
},
/**
*
* @param elem
* @param className
*/
removeClass: function(elem, className) {
if (className) {
if (elem.className === undefined) {
// elem.className = className;
} else if (elem.className === className) {
elem.removeAttribute('class');
} else {
var classes = elem.className.split(/ +/);
var index = classes.indexOf(className);
if (index != -1) {
classes.splice(index, 1);
elem.className = classes.join(' ');
}
}
} else {
elem.className = undefined;
}
return dom;
},
hasClass: function(elem, className) {
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
},
/**
*
* @param elem
*/
getWidth: function(elem) {
var style = getComputedStyle(elem);
return cssValueToPixels(style['border-left-width']) +
cssValueToPixels(style['border-right-width']) +
cssValueToPixels(style['padding-left']) +
cssValueToPixels(style['padding-right']) +
cssValueToPixels(style['width']);
},
/**
*
* @param elem
*/
getHeight: function(elem) {
var style = getComputedStyle(elem);
return cssValueToPixels(style['border-top-width']) +
cssValueToPixels(style['border-bottom-width']) +
cssValueToPixels(style['padding-top']) +
cssValueToPixels(style['padding-bottom']) +
cssValueToPixels(style['height']);
},
/**
*
* @param elem
*/
getOffset: function(elem) {
var offset = {left: 0, top:0};
if (elem.offsetParent) {
do {
offset.left += elem.offsetLeft;
offset.top += elem.offsetTop;
} while (elem = elem.offsetParent);
}
return offset;
},
// http://stackoverflow.com/posts/2684561/revisions
/**
*
* @param elem
*/
isActive: function(elem) {
return elem === document.activeElement && ( elem.type || elem.href );
} }
}; if (common.isUndefined(vertical)) {
vertical = true;
}
return dom; elem.style.position = 'absolute';
}); if (horizontal) {
elem.style.left = 0;
elem.style.right = 0;
}
if (vertical) {
elem.style.top = 0;
elem.style.bottom = 0;
}
},
/**
*
* @param elem
* @param eventType
* @param params
*/
fakeEvent: function(elem, eventType, pars, aux) {
const params = pars || {};
const className = EVENT_MAP_INV[eventType];
if (!className) {
throw new Error('Event type ' + eventType + ' not supported.');
}
const evt = document.createEvent(className);
switch (className) {
case 'MouseEvents':
{
const clientX = params.x || params.clientX || 0;
const 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':
{
const 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, newBool) {
const bool = newBool || 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, newBool) {
const bool = newBool || 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) {
const classes = elem.className.split(/ +/);
if (classes.indexOf(className) === -1) {
classes.push(className);
elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
}
}
return dom;
},
/**
*
* @param elem
* @param className
*/
removeClass: function(elem, className) {
if (className) {
if (elem.className === className) {
elem.removeAttribute('class');
} else {
const classes = elem.className.split(/ +/);
const index = classes.indexOf(className);
if (index !== -1) {
classes.splice(index, 1);
elem.className = classes.join(' ');
}
}
} else {
elem.className = undefined;
}
return dom;
},
hasClass: function(elem, className) {
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
},
/**
*
* @param elem
*/
getWidth: function(elem) {
const style = getComputedStyle(elem);
return cssValueToPixels(style['border-left-width']) +
cssValueToPixels(style['border-right-width']) +
cssValueToPixels(style['padding-left']) +
cssValueToPixels(style['padding-right']) +
cssValueToPixels(style.width);
},
/**
*
* @param elem
*/
getHeight: function(elem) {
const style = getComputedStyle(elem);
return cssValueToPixels(style['border-top-width']) +
cssValueToPixels(style['border-bottom-width']) +
cssValueToPixels(style['padding-top']) +
cssValueToPixels(style['padding-bottom']) +
cssValueToPixels(style.height);
},
/**
*
* @param el
*/
getOffset: function(el) {
let elem = el;
const offset = {left: 0, top: 0};
if (elem.offsetParent) {
do {
offset.left += elem.offsetLeft;
offset.top += elem.offsetTop;
elem = elem.offsetParent;
} while (elem);
}
return offset;
},
// http://stackoverflow.com/posts/2684561/revisions
/**
*
* @param elem
*/
isActive: function(elem) {
return elem === document.activeElement && ( elem.type || elem.href );
}
};
export default dom;

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -1,280 +0,0 @@
.dg {
/** Clear list styles */
/* Auto-place container */
/* Auto-placed GUI's */
/* Line items that don't contain folders. */
/** Folder names */
/** Hides closed items */
/** Controller row */
/** Name-half (left) */
/** Controller-half (right) */
/** Controller placement */
/** Shorter number boxes when slider is present. */
/** Ensure the entire boolean and function row shows a hand */ }
.dg ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
clear: both; }
.dg.ac {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: 0; }
.dg:not(.ac) .main {
/** Exclude mains in ac so that we don't hide close button */
overflow: hidden; }
.dg.main {
-webkit-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
transition: opacity 0.1s linear; }
.dg.main.taller-than-window {
overflow-y: auto; }
.dg.main.taller-than-window .close-button {
opacity: 1;
/* TODO, these are style notes */
margin-top: -1px;
border-top: 1px solid #2c2c2c; }
.dg.main ul.closed .close-button {
opacity: 1 !important; }
.dg.main:hover .close-button,
.dg.main .close-button.drag {
opacity: 1; }
.dg.main .close-button {
/*opacity: 0;*/
-webkit-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
border: 0;
position: absolute;
line-height: 19px;
height: 20px;
/* TODO, these are style notes */
cursor: pointer;
text-align: center;
background-color: #000; }
.dg.main .close-button:hover {
background-color: #111; }
.dg.a {
float: right;
margin-right: 15px;
overflow-x: hidden; }
.dg.a.has-save > ul {
margin-top: 27px; }
.dg.a.has-save > ul.closed {
margin-top: 0; }
.dg.a .save-row {
position: fixed;
top: 0;
z-index: 1002; }
.dg li {
-webkit-transition: height 0.1s ease-out;
-o-transition: height 0.1s ease-out;
-moz-transition: height 0.1s ease-out;
transition: height 0.1s ease-out; }
.dg li:not(.folder) {
cursor: auto;
height: 27px;
line-height: 27px;
overflow: hidden;
padding: 0 4px 0 5px; }
.dg li.folder {
padding: 0;
border-left: 4px solid rgba(0, 0, 0, 0); }
.dg li.title {
cursor: pointer;
margin-left: -4px; }
.dg .closed li:not(.title),
.dg .closed ul li,
.dg .closed ul li > * {
height: 0;
overflow: hidden;
border: 0; }
.dg .cr {
clear: both;
padding-left: 3px;
height: 27px; }
.dg .property-name {
cursor: default;
float: left;
clear: left;
width: 40%;
overflow: hidden;
text-overflow: ellipsis; }
.dg .c {
float: left;
width: 60%; }
.dg .c input[type=text] {
border: 0;
margin-top: 4px;
padding: 3px;
width: 100%;
float: right; }
.dg .has-slider input[type=text] {
width: 30%;
/*display: none;*/
margin-left: 0; }
.dg .slider {
float: left;
width: 66%;
margin-left: -5px;
margin-right: 0;
height: 19px;
margin-top: 4px; }
.dg .slider-fg {
height: 100%; }
.dg .c input[type=checkbox] {
margin-top: 9px; }
.dg .c select {
margin-top: 5px; }
.dg .cr.function,
.dg .cr.function .property-name,
.dg .cr.function *,
.dg .cr.boolean,
.dg .cr.boolean * {
cursor: pointer; }
.dg .selector {
display: none;
position: absolute;
margin-left: -9px;
margin-top: 23px;
z-index: 10; }
.dg .c:hover .selector,
.dg .selector.drag {
display: block; }
.dg li.save-row {
padding: 0; }
.dg li.save-row .button {
display: inline-block;
padding: 0px 6px; }
.dg.dialogue {
background-color: #222;
width: 460px;
padding: 15px;
font-size: 13px;
line-height: 15px; }
/* TODO Separate style and structure */
#dg-new-constructor {
padding: 10px;
color: #222;
font-family: Monaco, monospace;
font-size: 10px;
border: 0;
resize: none;
box-shadow: inset 1px 1px 1px #888;
word-wrap: break-word;
margin: 12px 0;
display: block;
width: 440px;
overflow-y: scroll;
height: 100px;
position: relative; }
#dg-local-explain {
display: none;
font-size: 11px;
line-height: 17px;
border-radius: 3px;
background-color: #333;
padding: 8px;
margin-top: 10px; }
#dg-local-explain code {
font-size: 10px; }
#dat-gui-save-locally {
display: none; }
/** Main type */
.dg {
color: #eee;
font: 11px 'Lucida Grande', sans-serif;
text-shadow: 0 -1px 0 #111;
/** Auto place */
/* Controller row, <li> */
/** Controllers */ }
.dg.main {
/** Scrollbar */ }
.dg.main::-webkit-scrollbar {
width: 5px;
background: #1a1a1a; }
.dg.main::-webkit-scrollbar-corner {
height: 0;
display: none; }
.dg.main::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #676767; }
.dg li:not(.folder) {
background: #1a1a1a;
border-bottom: 1px solid #2c2c2c; }
.dg li.save-row {
line-height: 25px;
background: #dad5cb;
border: 0; }
.dg li.save-row select {
margin-left: 5px;
width: 108px; }
.dg li.save-row .button {
margin-left: 5px;
margin-top: 1px;
border-radius: 2px;
font-size: 9px;
line-height: 7px;
padding: 4px 4px 5px 4px;
background: #c5bdad;
color: #fff;
text-shadow: 0 1px 0 #b0a58f;
box-shadow: 0 -1px 0 #b0a58f;
cursor: pointer; }
.dg li.save-row .button.gears {
background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
height: 7px;
width: 8px; }
.dg li.save-row .button:hover {
background-color: #bab19e;
box-shadow: 0 -1px 0 #b0a58f; }
.dg li.folder {
border-bottom: 0; }
.dg li.title {
padding-left: 16px;
background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.dg .closed li.title {
background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }
.dg .cr.boolean {
border-left: 3px solid #806787; }
.dg .cr.function {
border-left: 3px solid #e61d5f; }
.dg .cr.number {
border-left: 3px solid #2fa1d6; }
.dg .cr.number input[type=text] {
color: #2fa1d6; }
.dg .cr.string {
border-left: 3px solid #1ed36f; }
.dg .cr.string input[type=text] {
color: #1ed36f; }
.dg .cr.function:hover, .dg .cr.boolean:hover {
background: #111; }
.dg .c input[type=text] {
background: #303030;
outline: none; }
.dg .c input[type=text]:hover {
background: #3c3c3c; }
.dg .c input[type=text]:focus {
background: #494949;
color: #fff; }
.dg .c .slider {
background: #303030;
cursor: ew-resize; }
.dg .c .slider-fg {
background: #2fa1d6; }
.dg .c .slider:hover {
background: #3c3c3c; }
.dg .c .slider:hover .slider-fg {
background: #44abda; }

View File

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

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

@ -0,0 +1,42 @@
/**
* 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
*/
export default {
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')
},
GUI: require('./gui/GUI')
};

View File

@ -11,130 +11,122 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([ const ARR_EACH = Array.prototype.forEach;
], function() { const 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/
*/ */
return { const Common = {
BREAK: {},
BREAK: {},
extend: function(target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
for (var key in obj)
if (!this.isUndefined(obj[key]))
target[key] = obj[key];
}, this);
return target;
},
defaults: function(target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
for (var key in obj)
if (this.isUndefined(target[key]))
target[key] = obj[key];
}, this);
return target;
},
compose: function() {
var toCall = ARR_SLICE.call(arguments);
return function() {
var args = ARR_SLICE.call(arguments);
for (var i = toCall.length -1; i >= 0; i--) {
args = [toCall[i].apply(this, args)];
}
return args[0];
}
},
each: function(obj, itr, scope) {
if (!obj) return; extend: function(target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) { for (const key in obj) {
if (!this.isUndefined(obj[key])) {
obj.forEach(itr, scope); target[key] = obj[key];
}
} 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;
} }
}, this);
},
defer: function(fnc) {
setTimeout(fnc, 0);
},
toArray: function(obj) {
if (obj.toArray) return obj.toArray();
return ARR_SLICE.call(obj);
},
isUndefined: function(obj) { return target;
return obj === undefined; },
},
defaults: function(target) {
isNull: function(obj) { this.each(ARR_SLICE.call(arguments, 1), function(obj) {
return obj === null; for (const key in obj) {
}, if (this.isUndefined(target[key])) {
target[key] = obj[key];
isNaN: function(obj) { }
return obj !== obj; }
}, }, this);
isArray: Array.isArray || function(obj) { return target;
return obj.constructor === Array; },
},
compose: function() {
isObject: function(obj) { const toCall = ARR_SLICE.call(arguments);
return obj === Object(obj); return function() {
}, let args = ARR_SLICE.call(arguments);
for (let i = toCall.length - 1; i >= 0; i--) {
isNumber: function(obj) { args = [toCall[i].apply(this, args)];
return obj === obj+0; }
}, return args[0];
};
isString: function(obj) { },
return obj === obj+'';
}, each: function(obj, itr, scope) {
if (!obj) {
isBoolean: function(obj) { return;
return obj === false || obj === true;
},
isFunction: function(obj) {
return Object.prototype.toString.call(obj) === '[object Function]';
} }
}; 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
let key;
let l;
for (key = 0, l = obj.length; key < l; key++) {
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) {
return;
}
}
} else {
for (const key in obj) {
if (itr.call(scope, obj[key], key) === this.BREAK) {
return;
}
}
}
},
defer: function(fnc) {
setTimeout(fnc, 0);
},
toArray: function(obj) {
if (obj.toArray) return obj.toArray();
return ARR_SLICE.call(obj);
},
isUndefined: function(obj) {
return obj === undefined;
},
isNull: function(obj) {
return obj === null;
},
isNaN: function(obj) {
return isNaN(obj);
},
isArray: Array.isArray || function(obj) {
return obj.constructor === Array;
},
isObject: function(obj) {
return obj === Object(obj);
},
isNumber: function(obj) {
return obj === obj + 0;
},
isString: function(obj) {
return obj === obj + '';
},
isBoolean: function(obj) {
return obj === false || obj === true;
},
isFunction: function(obj) {
return Object.prototype.toString.call(obj) === '[object Function]';
}
};
export default Common;

View File

@ -11,23 +11,21 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
define([], module.exports = {
function() { load: function(url, indoc) {
return { const doc = indoc || document;
load: function (url, doc) { const link = doc.createElement('link');
doc = doc || document; link.type = 'text/css';
var link = doc.createElement('link'); link.rel = 'stylesheet';
link.type = 'text/css'; link.href = url;
link.rel = 'stylesheet'; doc.getElementsByTagName('head')[0].appendChild(link);
link.href = url; },
doc.getElementsByTagName('head')[0].appendChild(link);
}, inject: function(css, indoc) {
inject: function(css, doc) { const doc = indoc || document;
doc = doc || document; const 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);
}
} }
}); };

View File

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

View File

@ -7,12 +7,11 @@
<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 math = dat.color.math; var math = dat.color.math;
var interpret = dat.color.interpret; var interpret = dat.color.interpret;
var Color = dat.color.Color; var Color = dat.color.Color;

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

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

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

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

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

62
webpack/webpack.config.js Normal file
View File

@ -0,0 +1,62 @@
/**
* 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 path = require("path");
module.exports = {
target: 'web',
context: path.resolve(__dirname, '..', 'src'),
entry: {
main: '../index'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{
test: /\.js$/,
loader: 'eslint-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}
]
},
output: {
path: path.join(__dirname, '..', 'build'),
filename: 'dat.gui.js',
library: ['dat'],
libraryTarget: 'umd'
}
};

31
webpack/webpack.config.min.js vendored Normal file
View File

@ -0,0 +1,31 @@
/**
* 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 extend = require('extend'),
webpack = require('webpack'),
webpackConfig = require('./webpack.config');
var config = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
comments: false
})
],
output: {
filename: 'dat.gui.min.js'
}
}
module.exports = extend(true, webpackConfig, config);