mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Using classses
This commit is contained in:
parent
78e84d8c3b
commit
075e499065
17
.editorconfig
Normal file
17
.editorconfig
Normal file
@ -0,0 +1,17 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
max_line_length = 80
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = 0
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[COMMIT_EDITMSG]
|
||||
max_line_length = 0
|
4405
build/dat.gui.js
4405
build/dat.gui.js
File diff suppressed because one or more lines are too long
2
build/dat.gui.min.js
vendored
2
build/dat.gui.min.js
vendored
File diff suppressed because one or more lines are too long
69
example.html
69
example.html
@ -3,11 +3,74 @@
|
||||
<head>
|
||||
</head>
|
||||
<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">
|
||||
var obj = { x: 5 };
|
||||
var obj = {
|
||||
example: {
|
||||
message: 'Hello World',
|
||||
speed: 42,
|
||||
displayOutline: false,
|
||||
explode: function () {
|
||||
console.log('Bang!');
|
||||
},
|
||||
},
|
||||
|
||||
noiseStrength: 10,
|
||||
growthSpeed: 0.2,
|
||||
maxSize: 6,
|
||||
message: null,
|
||||
speed: null,
|
||||
|
||||
flow: {
|
||||
speed: 0.4,
|
||||
noiseStrength: 10
|
||||
},
|
||||
|
||||
letters: {
|
||||
growthSpeed: 0.2,
|
||||
maxSize: 10,
|
||||
message: 'folders'
|
||||
},
|
||||
|
||||
colors: {
|
||||
color0: "#ffae23", // CSS string
|
||||
color1: [ 0, 128, 255 ], // RGB array
|
||||
color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
|
||||
color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
|
||||
}
|
||||
};
|
||||
|
||||
var gui = new dat.gui.GUI();
|
||||
gui.add(obj, 'x');
|
||||
gui.add(obj.example, 'message');
|
||||
gui.add(obj.example, 'speed', -5, 5);
|
||||
gui.add(obj.example, 'displayOutline');
|
||||
gui.add(obj.example, 'explode');
|
||||
|
||||
gui.add(obj, 'noiseStrength').step(5); // Increment amount
|
||||
gui.add(obj, 'growthSpeed', -5, 5); // Min and max
|
||||
gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
|
||||
|
||||
// Choose from accepted values
|
||||
gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
|
||||
|
||||
// Choose from named values
|
||||
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
|
||||
|
||||
var f1 = gui.addFolder('Flow Field');
|
||||
f1.add(obj.flow, 'speed');
|
||||
f1.add(obj.flow, 'noiseStrength');
|
||||
|
||||
var f2 = gui.addFolder('Letters');
|
||||
f2.add(obj.letters, 'growthSpeed');
|
||||
f2.add(obj.letters, 'maxSize');
|
||||
f2.add(obj.letters, 'message');
|
||||
|
||||
gui.addColor(obj.colors, 'color0');
|
||||
gui.addColor(obj.colors, 'color1');
|
||||
gui.addColor(obj.colors, 'color2');
|
||||
gui.addColor(obj.colors, 'color3');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
15
package.json
15
package.json
@ -7,23 +7,32 @@
|
||||
"test": "tests"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack && webpack --config ./webpack.config.min.js"
|
||||
"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/dataarts/dat.gui.git"
|
||||
},
|
||||
"author": "Data Arts Team, Google Creative Lab",
|
||||
"license": "Apache 2.0",
|
||||
"license": "Apache-2.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/dataarts/dat.gui/issues"
|
||||
},
|
||||
"homepage": "https://github.com/dataarts/dat.gui#readme",
|
||||
"devDependencies": {
|
||||
"babel-core": "^5.8.22",
|
||||
"babel-eslint": "^4.0.5",
|
||||
"babel-loader": "^5.3.2",
|
||||
"css-loader": "^0.16.0",
|
||||
"eslint": "^1.1.0",
|
||||
"eslint-config-airbnb": "0.0.7",
|
||||
"eslint-plugin-react": "^3.2.2",
|
||||
"extend": "^3.0.0",
|
||||
"html-loader": "^0.3.0",
|
||||
"node-sass": "^3.2.0",
|
||||
"sass-loader": "^2.0.0",
|
||||
"style-loader": "^0.12.3",
|
||||
"webpack": "^1.11.0"
|
||||
}
|
||||
|
@ -13,34 +13,58 @@
|
||||
|
||||
import interpret from './interpret';
|
||||
import math from './math';
|
||||
import toString from './toString';
|
||||
import colorToString from './toString';
|
||||
import common from '../utils/common';
|
||||
|
||||
var Color = function () {
|
||||
|
||||
class Color {
|
||||
constructor() {
|
||||
this.__state = interpret.apply(this, arguments);
|
||||
|
||||
if (this.__state === false) {
|
||||
throw 'Failed to interpret color arguments';
|
||||
throw 'Failed to interpret color arguments';
|
||||
}
|
||||
|
||||
this.__state.a = this.__state.a || 1;
|
||||
}
|
||||
|
||||
toString() {
|
||||
return colorToString(this);
|
||||
}
|
||||
|
||||
toOriginal() {
|
||||
return this.__state.conversion.write(this);
|
||||
}
|
||||
}
|
||||
|
||||
Color.recalculateRGB = function(color, component, componentHexIndex) {
|
||||
if (color.__state.space === 'HEX') {
|
||||
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
|
||||
} else if (color.__state.space === 'HSV') {
|
||||
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
|
||||
} else {
|
||||
throw 'Corrupted color state';
|
||||
}
|
||||
};
|
||||
|
||||
Color.recalculateHSV = function(color) {
|
||||
var result = math.rgb_to_hsv(color.r, color.g, color.b);
|
||||
|
||||
common.extend(color.__state,
|
||||
{
|
||||
s: result.s,
|
||||
v: result.v
|
||||
}
|
||||
);
|
||||
|
||||
if (!common.isNaN(result.h)) {
|
||||
color.__state.h = result.h;
|
||||
} else if (common.isUndefined(color.__state.h)) {
|
||||
color.__state.h = 0;
|
||||
}
|
||||
};
|
||||
|
||||
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
|
||||
|
||||
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);
|
||||
@ -51,132 +75,75 @@ defineHSVComponent(Color.prototype, 'v');
|
||||
|
||||
Object.defineProperty(Color.prototype, 'a', {
|
||||
|
||||
get: function () {
|
||||
return this.__state.a;
|
||||
},
|
||||
get: function () {
|
||||
return this.__state.a;
|
||||
},
|
||||
|
||||
set: function (v) {
|
||||
this.__state.a = v;
|
||||
}
|
||||
set: function (v) {
|
||||
this.__state.a = v;
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Color.prototype, 'hex', {
|
||||
|
||||
get: function () {
|
||||
|
||||
if (!this.__state.space !== 'HEX') {
|
||||
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
|
||||
}
|
||||
|
||||
return this.__state.hex;
|
||||
|
||||
},
|
||||
|
||||
set: function (v) {
|
||||
|
||||
this.__state.space = 'HEX';
|
||||
this.__state.hex = v;
|
||||
|
||||
get: function () {
|
||||
if (!this.__state.space !== 'HEX') {
|
||||
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
|
||||
}
|
||||
|
||||
return this.__state.hex;
|
||||
},
|
||||
|
||||
set: function (v) {
|
||||
this.__state.space = 'HEX';
|
||||
this.__state.hex = v;
|
||||
}
|
||||
});
|
||||
|
||||
function defineRGBComponent(target, component, componentHexIndex) {
|
||||
|
||||
Object.defineProperty(target, component, {
|
||||
Object.defineProperty(target, component, {
|
||||
get: function () {
|
||||
if (this.__state.space === 'RGB') {
|
||||
return this.__state[component];
|
||||
}
|
||||
|
||||
get: function () {
|
||||
Color.recalculateRGB(this, component, componentHexIndex);
|
||||
|
||||
if (this.__state.space === 'RGB') {
|
||||
return this.__state[component];
|
||||
}
|
||||
return this.__state[component];
|
||||
},
|
||||
|
||||
recalculateRGB(this, component, componentHexIndex);
|
||||
|
||||
return this.__state[component];
|
||||
|
||||
},
|
||||
|
||||
set: function (v) {
|
||||
|
||||
if (this.__state.space !== 'RGB') {
|
||||
recalculateRGB(this, component, componentHexIndex);
|
||||
this.__state.space = 'RGB';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
set: function (v) {
|
||||
if (this.__state.space !== 'RGB') {
|
||||
Color.recalculateRGB(this, component, componentHexIndex);
|
||||
this.__state.space = 'RGB';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function defineHSVComponent(target, component) {
|
||||
Object.defineProperty(target, component, {
|
||||
get: function () {
|
||||
if (this.__state.space === 'HSV')
|
||||
return this.__state[component];
|
||||
|
||||
Object.defineProperty(target, component, {
|
||||
Color.recalculateHSV(this);
|
||||
|
||||
get: function () {
|
||||
return this.__state[component];
|
||||
|
||||
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';
|
||||
set: function (v) {
|
||||
if (this.__state.space !== 'HSV') {
|
||||
Color.recalculateHSV(this);
|
||||
this.__state.space = 'HSV';
|
||||
}
|
||||
|
||||
this.__state[component] = v;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function recalculateHSV(color) {
|
||||
|
||||
var result = math.rgb_to_hsv(color.r, color.g, color.b);
|
||||
|
||||
common.extend(color.__state,
|
||||
{
|
||||
s: result.s,
|
||||
v: result.v
|
||||
}
|
||||
);
|
||||
|
||||
if (!common.isNaN(result.h)) {
|
||||
color.__state.h = result.h;
|
||||
} else if (common.isUndefined(color.__state.h)) {
|
||||
color.__state.h = 0;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
export default Color;
|
||||
|
@ -16,18 +16,14 @@ import common from '../utils/common';
|
||||
|
||||
var result, toReturn;
|
||||
|
||||
var interpret = function() {
|
||||
|
||||
var interpret = function () {
|
||||
toReturn = false;
|
||||
|
||||
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
|
||||
|
||||
common.each(INTERPRETATIONS, function(family) {
|
||||
common.each(INTERPRETATIONS, function (family) {
|
||||
|
||||
if (family.litmus(original)) {
|
||||
|
||||
common.each(family.conversions, function(conversion, conversionName) {
|
||||
|
||||
common.each(family.conversions, function (conversion, conversionName) {
|
||||
result = conversion.read(original);
|
||||
|
||||
if (toReturn === false && result !== false) {
|
||||
@ -35,33 +31,23 @@ var interpret = function() {
|
||||
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) {
|
||||
read: function (original) {
|
||||
|
||||
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
|
||||
if (test === null) return false;
|
||||
@ -69,21 +55,19 @@ var INTERPRETATIONS = [
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: parseInt(
|
||||
'0x' +
|
||||
test[1].toString() + test[1].toString() +
|
||||
test[2].toString() + test[2].toString() +
|
||||
test[3].toString() + test[3].toString())
|
||||
'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) {
|
||||
read: function (original) {
|
||||
|
||||
var test = original.match(/^#([A-F0-9]{6})$/i);
|
||||
if (test === null) return false;
|
||||
@ -96,12 +80,10 @@ var INTERPRETATIONS = [
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
CSS_RGB: {
|
||||
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
|
||||
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
|
||||
if (test === null) return false;
|
||||
@ -116,12 +98,10 @@ var INTERPRETATIONS = [
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
},
|
||||
|
||||
CSS_RGBA: {
|
||||
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
|
||||
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
|
||||
if (test === null) return false;
|
||||
@ -133,26 +113,21 @@ var INTERPRETATIONS = [
|
||||
b: parseFloat(test[3]),
|
||||
a: parseFloat(test[4])
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
write: toString
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Numbers
|
||||
{
|
||||
|
||||
litmus: common.isNumber,
|
||||
|
||||
conversions: {
|
||||
|
||||
HEX: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
return {
|
||||
space: 'HEX',
|
||||
hex: original,
|
||||
@ -160,7 +135,7 @@ var INTERPRETATIONS = [
|
||||
}
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return color.hex;
|
||||
}
|
||||
}
|
||||
@ -171,13 +146,11 @@ var INTERPRETATIONS = [
|
||||
|
||||
// Arrays
|
||||
{
|
||||
|
||||
litmus: common.isArray,
|
||||
|
||||
conversions: {
|
||||
|
||||
RGB_ARRAY: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
if (original.length != 3) return false;
|
||||
return {
|
||||
space: 'RGB',
|
||||
@ -187,14 +160,13 @@ var INTERPRETATIONS = [
|
||||
};
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return [color.r, color.g, color.b];
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
RGBA_ARRAY: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
if (original.length != 4) return false;
|
||||
return {
|
||||
space: 'RGB',
|
||||
@ -205,14 +177,11 @@ var INTERPRETATIONS = [
|
||||
};
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return [color.r, color.g, color.b, color.a];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Objects
|
||||
@ -223,11 +192,11 @@ var INTERPRETATIONS = [
|
||||
conversions: {
|
||||
|
||||
RGBA_OBJ: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
if (common.isNumber(original.r) &&
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b) &&
|
||||
common.isNumber(original.a)) {
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b) &&
|
||||
common.isNumber(original.a)) {
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original.r,
|
||||
@ -239,7 +208,7 @@ var INTERPRETATIONS = [
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return {
|
||||
r: color.r,
|
||||
g: color.g,
|
||||
@ -250,10 +219,10 @@ var INTERPRETATIONS = [
|
||||
},
|
||||
|
||||
RGB_OBJ: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
if (common.isNumber(original.r) &&
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b)) {
|
||||
common.isNumber(original.g) &&
|
||||
common.isNumber(original.b)) {
|
||||
return {
|
||||
space: 'RGB',
|
||||
r: original.r,
|
||||
@ -264,7 +233,7 @@ var INTERPRETATIONS = [
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return {
|
||||
r: color.r,
|
||||
g: color.g,
|
||||
@ -274,11 +243,11 @@ var INTERPRETATIONS = [
|
||||
},
|
||||
|
||||
HSVA_OBJ: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
if (common.isNumber(original.h) &&
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v) &&
|
||||
common.isNumber(original.a)) {
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v) &&
|
||||
common.isNumber(original.a)) {
|
||||
return {
|
||||
space: 'HSV',
|
||||
h: original.h,
|
||||
@ -290,7 +259,7 @@ var INTERPRETATIONS = [
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return {
|
||||
h: color.h,
|
||||
s: color.s,
|
||||
@ -301,10 +270,10 @@ var INTERPRETATIONS = [
|
||||
},
|
||||
|
||||
HSV_OBJ: {
|
||||
read: function(original) {
|
||||
read: function (original) {
|
||||
if (common.isNumber(original.h) &&
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v)) {
|
||||
common.isNumber(original.s) &&
|
||||
common.isNumber(original.v)) {
|
||||
return {
|
||||
space: 'HSV',
|
||||
h: original.h,
|
||||
@ -315,21 +284,16 @@ var INTERPRETATIONS = [
|
||||
return false;
|
||||
},
|
||||
|
||||
write: function(color) {
|
||||
write: function (color) {
|
||||
return {
|
||||
h: color.h,
|
||||
s: color.s,
|
||||
v: color.v
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
];
|
||||
|
||||
export default interpret;
|
||||
|
@ -15,81 +15,81 @@ var tmpComponent;
|
||||
|
||||
var ColorMath = {
|
||||
|
||||
hsv_to_rgb: function(h, s, v) {
|
||||
hsv_to_rgb: function (h, s, v) {
|
||||
|
||||
var hi = Math.floor(h / 60) % 6;
|
||||
var hi = Math.floor(h / 60) % 6;
|
||||
|
||||
var f = h / 60 - Math.floor(h / 60);
|
||||
var p = v * (1.0 - s);
|
||||
var q = v * (1.0 - (f * s));
|
||||
var t = v * (1.0 - ((1.0 - f) * s));
|
||||
var c = [
|
||||
[v, t, p],
|
||||
[q, v, p],
|
||||
[p, v, t],
|
||||
[p, q, v],
|
||||
[t, p, v],
|
||||
[v, p, q]
|
||||
][hi];
|
||||
var f = h / 60 - Math.floor(h / 60);
|
||||
var p = v * (1.0 - s);
|
||||
var q = v * (1.0 - (f * s));
|
||||
var t = v * (1.0 - ((1.0 - f) * s));
|
||||
var c = [
|
||||
[v, t, p],
|
||||
[q, v, p],
|
||||
[p, v, t],
|
||||
[p, q, v],
|
||||
[t, p, v],
|
||||
[v, p, q]
|
||||
][hi];
|
||||
|
||||
return {
|
||||
r: c[0] * 255,
|
||||
g: c[1] * 255,
|
||||
b: c[2] * 255
|
||||
};
|
||||
return {
|
||||
r: c[0] * 255,
|
||||
g: c[1] * 255,
|
||||
b: c[2] * 255
|
||||
};
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
rgb_to_hsv: function(r, g, b) {
|
||||
rgb_to_hsv: function (r, g, b) {
|
||||
|
||||
var min = Math.min(r, g, b),
|
||||
max = Math.max(r, g, b),
|
||||
delta = max - min,
|
||||
h, s;
|
||||
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 (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));
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorMath;
|
||||
|
@ -13,7 +13,7 @@
|
||||
|
||||
import common from '../utils/common';
|
||||
|
||||
var toString = function (color) {
|
||||
var colorToString = function (color) {
|
||||
if (color.a == 1 || common.isUndefined(color.a)) {
|
||||
var s = color.hex.toString(16);
|
||||
while (s.length < 6) {
|
||||
@ -26,4 +26,4 @@ var toString = function (color) {
|
||||
}
|
||||
};
|
||||
|
||||
export default toString;
|
||||
export default colorToString;
|
@ -24,9 +24,9 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var BooleanController = function(object, property) {
|
||||
|
||||
BooleanController.superclass.call(this, object, property);
|
||||
class BooleanController extends Controller {
|
||||
constructor(object, property) {
|
||||
super(object, property);
|
||||
|
||||
var _this = this;
|
||||
this.__prev = this.getValue();
|
||||
@ -34,6 +34,9 @@ var BooleanController = function(object, property) {
|
||||
this.__checkbox = document.createElement('input');
|
||||
this.__checkbox.setAttribute('type', 'checkbox');
|
||||
|
||||
function onChange() {
|
||||
_this.setValue(!_this.__prev);
|
||||
}
|
||||
|
||||
dom.bind(this.__checkbox, 'change', onChange, false);
|
||||
|
||||
@ -41,47 +44,27 @@ var BooleanController = function(object, property) {
|
||||
|
||||
// Match original value
|
||||
this.updateDisplay();
|
||||
}
|
||||
|
||||
function onChange() {
|
||||
_this.setValue(!_this.__prev);
|
||||
setValue(v) {
|
||||
var toReturn = super.setValue(v);
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
this.__prev = this.getValue();
|
||||
return toReturn;
|
||||
}
|
||||
|
||||
updateDisplay() {
|
||||
if (this.getValue() === true) {
|
||||
this.__checkbox.setAttribute('checked', 'checked');
|
||||
this.__checkbox.checked = true;
|
||||
} else {
|
||||
this.__checkbox.checked = false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
BooleanController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
BooleanController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
setValue: function(v) {
|
||||
var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
this.__prev = this.getValue();
|
||||
return toReturn;
|
||||
},
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
if (this.getValue() === true) {
|
||||
this.__checkbox.setAttribute('checked', 'checked');
|
||||
this.__checkbox.checked = true;
|
||||
} else {
|
||||
this.__checkbox.checked = false;
|
||||
}
|
||||
|
||||
return BooleanController.superclass.prototype.updateDisplay.call(this);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
return super.updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
export default BooleanController;
|
||||
|
@ -17,292 +17,278 @@ import Color from '../color/Color';
|
||||
import interpret from '../color/interpret';
|
||||
import common from '../utils/common';
|
||||
|
||||
var ColorController = function(object, property) {
|
||||
ColorController.superclass.call(this, object, property);
|
||||
class ColorController extends Controller {
|
||||
constructor(object, property) {
|
||||
super(object, property);
|
||||
|
||||
this.__color = new Color(this.getValue());
|
||||
this.__temp = new Color(0);
|
||||
this.__color = new Color(this.getValue());
|
||||
this.__temp = new Color(0);
|
||||
|
||||
var _this = this;
|
||||
var _this = this;
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
this.domElement = document.createElement('div');
|
||||
|
||||
dom.makeSelectable(this.domElement, false);
|
||||
dom.makeSelectable(this.domElement, false);
|
||||
|
||||
this.__selector = document.createElement('div');
|
||||
this.__selector.className = 'selector';
|
||||
this.__selector = document.createElement('div');
|
||||
this.__selector.className = 'selector';
|
||||
|
||||
this.__saturation_field = document.createElement('div');
|
||||
this.__saturation_field.className = 'saturation-field';
|
||||
this.__saturation_field = document.createElement('div');
|
||||
this.__saturation_field.className = 'saturation-field';
|
||||
|
||||
this.__field_knob = document.createElement('div');
|
||||
this.__field_knob.className = 'field-knob';
|
||||
this.__field_knob_border = '2px solid ';
|
||||
this.__field_knob = document.createElement('div');
|
||||
this.__field_knob.className = 'field-knob';
|
||||
this.__field_knob_border = '2px solid ';
|
||||
|
||||
this.__hue_knob = document.createElement('div');
|
||||
this.__hue_knob.className = 'hue-knob';
|
||||
this.__hue_knob = document.createElement('div');
|
||||
this.__hue_knob.className = 'hue-knob';
|
||||
|
||||
this.__hue_field = document.createElement('div');
|
||||
this.__hue_field.className = 'hue-field';
|
||||
this.__hue_field = document.createElement('div');
|
||||
this.__hue_field.className = 'hue-field';
|
||||
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.type = 'text';
|
||||
this.__input_textShadow = '0 1px 1px ';
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.type = 'text';
|
||||
this.__input_textShadow = '0 1px 1px ';
|
||||
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
if (e.keyCode === 13) { // on enter
|
||||
onBlur.call(this);
|
||||
}
|
||||
});
|
||||
dom.bind(this.__input, 'keydown', function (e) {
|
||||
if (e.keyCode === 13) { // on enter
|
||||
onBlur.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
|
||||
dom.bind(this.__selector, 'mousedown', function (_e) {
|
||||
dom.bind(this.__selector, 'mousedown', function (_e) {
|
||||
|
||||
dom
|
||||
dom
|
||||
.addClass(this, 'drag')
|
||||
.bind(window, 'mouseup', function(e) {
|
||||
.bind(window, 'mouseup', function (e) {
|
||||
dom.removeClass(_this.__selector, 'drag');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
var value_field = document.createElement('div');
|
||||
var value_field = document.createElement('div');
|
||||
|
||||
common.extend(this.__selector.style, {
|
||||
width: '122px',
|
||||
height: '102px',
|
||||
padding: '3px',
|
||||
backgroundColor: '#222',
|
||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
|
||||
});
|
||||
common.extend(this.__selector.style, {
|
||||
width: '122px',
|
||||
height: '102px',
|
||||
padding: '3px',
|
||||
backgroundColor: '#222',
|
||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
|
||||
});
|
||||
|
||||
common.extend(this.__field_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'),
|
||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
||||
borderRadius: '12px',
|
||||
zIndex: 1
|
||||
});
|
||||
common.extend(this.__field_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'),
|
||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
||||
borderRadius: '12px',
|
||||
zIndex: 1
|
||||
});
|
||||
|
||||
common.extend(this.__hue_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '15px',
|
||||
height: '2px',
|
||||
borderRight: '4px solid #fff',
|
||||
zIndex: 1
|
||||
});
|
||||
common.extend(this.__hue_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '15px',
|
||||
height: '2px',
|
||||
borderRight: '4px solid #fff',
|
||||
zIndex: 1
|
||||
});
|
||||
|
||||
common.extend(this.__saturation_field.style, {
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
border: '1px solid #555',
|
||||
marginRight: '3px',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'
|
||||
});
|
||||
common.extend(this.__saturation_field.style, {
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
border: '1px solid #555',
|
||||
marginRight: '3px',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'
|
||||
});
|
||||
|
||||
common.extend(value_field.style, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'none'
|
||||
});
|
||||
common.extend(value_field.style, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'none'
|
||||
});
|
||||
|
||||
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
|
||||
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
|
||||
|
||||
common.extend(this.__hue_field.style, {
|
||||
width: '15px',
|
||||
height: '100px',
|
||||
display: 'inline-block',
|
||||
border: '1px solid #555',
|
||||
cursor: 'ns-resize'
|
||||
});
|
||||
common.extend(this.__hue_field.style, {
|
||||
width: '15px',
|
||||
height: '100px',
|
||||
display: 'inline-block',
|
||||
border: '1px solid #555',
|
||||
cursor: 'ns-resize'
|
||||
});
|
||||
|
||||
hueGradient(this.__hue_field);
|
||||
hueGradient(this.__hue_field);
|
||||
|
||||
common.extend(this.__input.style, {
|
||||
outline: 'none',
|
||||
common.extend(this.__input.style, {
|
||||
outline: 'none',
|
||||
// width: '120px',
|
||||
textAlign: 'center',
|
||||
textAlign: 'center',
|
||||
// padding: '4px',
|
||||
// marginBottom: '6px',
|
||||
color: '#fff',
|
||||
border: 0,
|
||||
fontWeight: 'bold',
|
||||
textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)'
|
||||
});
|
||||
color: '#fff',
|
||||
border: 0,
|
||||
fontWeight: 'bold',
|
||||
textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)'
|
||||
});
|
||||
|
||||
dom.bind(this.__saturation_field, 'mousedown', fieldDown);
|
||||
dom.bind(this.__field_knob, 'mousedown', fieldDown);
|
||||
dom.bind(this.__saturation_field, 'mousedown', fieldDown);
|
||||
dom.bind(this.__field_knob, 'mousedown', fieldDown);
|
||||
|
||||
dom.bind(this.__hue_field, 'mousedown', function(e) {
|
||||
setH(e);
|
||||
dom.bind(window, 'mousemove', setH);
|
||||
dom.bind(window, 'mouseup', unbindH);
|
||||
});
|
||||
dom.bind(this.__hue_field, 'mousedown', function (e) {
|
||||
setH(e);
|
||||
dom.bind(window, 'mousemove', setH);
|
||||
dom.bind(window, 'mouseup', unbindH);
|
||||
});
|
||||
|
||||
function fieldDown(e) {
|
||||
setSV(e);
|
||||
// document.body.style.cursor = 'none';
|
||||
dom.bind(window, 'mousemove', setSV);
|
||||
dom.bind(window, 'mouseup', unbindSV);
|
||||
}
|
||||
function fieldDown(e) {
|
||||
setSV(e);
|
||||
// document.body.style.cursor = 'none';
|
||||
dom.bind(window, 'mousemove', setSV);
|
||||
dom.bind(window, 'mouseup', unbindSV);
|
||||
}
|
||||
|
||||
function unbindSV() {
|
||||
dom.unbind(window, 'mousemove', setSV);
|
||||
dom.unbind(window, 'mouseup', unbindSV);
|
||||
// document.body.style.cursor = 'default';
|
||||
}
|
||||
function unbindSV() {
|
||||
dom.unbind(window, 'mousemove', setSV);
|
||||
dom.unbind(window, 'mouseup', unbindSV);
|
||||
// document.body.style.cursor = 'default';
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
var i = interpret(this.value);
|
||||
if (i !== false) {
|
||||
_this.__color.__state = i;
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
} else {
|
||||
this.value = _this.__color.toString();
|
||||
}
|
||||
}
|
||||
|
||||
function unbindH() {
|
||||
dom.unbind(window, 'mousemove', setH);
|
||||
dom.unbind(window, 'mouseup', unbindH);
|
||||
}
|
||||
|
||||
this.__saturation_field.appendChild(value_field);
|
||||
this.__selector.appendChild(this.__field_knob);
|
||||
this.__selector.appendChild(this.__saturation_field);
|
||||
this.__selector.appendChild(this.__hue_field);
|
||||
this.__hue_field.appendChild(this.__hue_knob);
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
this.domElement.appendChild(this.__selector);
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
function setSV(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var w = dom.getWidth(_this.__saturation_field);
|
||||
var o = dom.getOffset(_this.__saturation_field);
|
||||
var s = (e.clientX - o.left + document.body.scrollLeft) / w;
|
||||
var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
|
||||
|
||||
if (v > 1) v = 1;
|
||||
else if (v < 0) v = 0;
|
||||
|
||||
if (s > 1) s = 1;
|
||||
else if (s < 0) s = 0;
|
||||
|
||||
_this.__color.v = v;
|
||||
_this.__color.s = s;
|
||||
|
||||
function onBlur() {
|
||||
var i = interpret(this.value);
|
||||
if (i !== false) {
|
||||
_this.__color.__state = i;
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
} else {
|
||||
this.value = _this.__color.toString();
|
||||
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
function setH(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var s = dom.getHeight(_this.__hue_field);
|
||||
var o = dom.getOffset(_this.__hue_field);
|
||||
var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
|
||||
|
||||
if (h > 1) h = 1;
|
||||
else if (h < 0) h = 0;
|
||||
|
||||
_this.__color.h = h * 360;
|
||||
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function unbindH() {
|
||||
dom.unbind(window, 'mousemove', setH);
|
||||
dom.unbind(window, 'mouseup', unbindH);
|
||||
}
|
||||
updateDisplay() {
|
||||
var i = interpret(this.getValue());
|
||||
|
||||
this.__saturation_field.appendChild(value_field);
|
||||
this.__selector.appendChild(this.__field_knob);
|
||||
this.__selector.appendChild(this.__saturation_field);
|
||||
this.__selector.appendChild(this.__hue_field);
|
||||
this.__hue_field.appendChild(this.__hue_knob);
|
||||
if (i !== false) {
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
this.domElement.appendChild(this.__selector);
|
||||
var mismatch = false;
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
function setSV(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var w = dom.getWidth(_this.__saturation_field);
|
||||
var o = dom.getOffset(_this.__saturation_field);
|
||||
var s = (e.clientX - o.left + document.body.scrollLeft) / w;
|
||||
var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
|
||||
|
||||
if (v > 1) v = 1;
|
||||
else if (v < 0) v = 0;
|
||||
|
||||
if (s > 1) s = 1;
|
||||
else if (s < 0) s = 0;
|
||||
|
||||
_this.__color.v = v;
|
||||
_this.__color.s = s;
|
||||
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
function setH(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var s = dom.getHeight(_this.__hue_field);
|
||||
var o = dom.getOffset(_this.__hue_field);
|
||||
var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
|
||||
|
||||
if (h > 1) h = 1;
|
||||
else if (h < 0) h = 0;
|
||||
|
||||
_this.__color.h = h * 360;
|
||||
|
||||
_this.setValue(_this.__color.toOriginal());
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
ColorController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
ColorController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
var i = interpret(this.getValue());
|
||||
|
||||
if (i !== false) {
|
||||
|
||||
var mismatch = false;
|
||||
|
||||
// Check for mismatch on the interpreted value.
|
||||
|
||||
common.each(Color.COMPONENTS, function(component) {
|
||||
if (!common.isUndefined(i[component]) &&
|
||||
!common.isUndefined(this.__color.__state[component]) &&
|
||||
i[component] !== this.__color.__state[component]) {
|
||||
mismatch = true;
|
||||
return {}; // break
|
||||
}
|
||||
}, this);
|
||||
|
||||
// If nothing diverges, we keep our previous values
|
||||
// for statefulness, otherwise we recalculate fresh
|
||||
if (mismatch) {
|
||||
common.extend(this.__color.__state, i);
|
||||
}
|
||||
// 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);
|
||||
|
||||
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)'
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
|
||||
this.__temp.a = 1;
|
||||
|
||||
var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
|
||||
var _flip = 255 - flip;
|
||||
|
||||
common.extend(this.__field_knob.style, {
|
||||
marginLeft: 100 * this.__color.s - 7 + 'px',
|
||||
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
|
||||
backgroundColor: this.__temp.toString(),
|
||||
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
|
||||
});
|
||||
|
||||
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
|
||||
|
||||
this.__temp.s = 1;
|
||||
this.__temp.v = 1;
|
||||
|
||||
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
|
||||
|
||||
common.extend(this.__input.style, {
|
||||
backgroundColor: this.__input.value = this.__color.toString(),
|
||||
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
|
||||
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
|
||||
|
||||
function linearGradient(elem, x, a, b) {
|
||||
elem.style.background = '';
|
||||
common.each(vendors, function(vendor) {
|
||||
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); ';
|
||||
common.each(vendors, function (vendor) {
|
||||
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -21,8 +21,8 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var Controller = function(object, property) {
|
||||
|
||||
class Controller {
|
||||
constructor(object, property) {
|
||||
this.initialValue = object[property];
|
||||
|
||||
/**
|
||||
@ -56,82 +56,73 @@ var Controller = function(object, property) {
|
||||
* @ignore
|
||||
*/
|
||||
this.__onFinishChange = undefined;
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* Specify that a function fire every time someone changes the value with
|
||||
* this Controller.
|
||||
*
|
||||
* @param {Function} fnc This function will be called whenever the value
|
||||
* is modified via this Controller.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
onChange(fnc) {
|
||||
this.__onChange = fnc;
|
||||
return this;
|
||||
}
|
||||
|
||||
common.extend(
|
||||
/**
|
||||
* Specify that a function fire every time someone "finishes" changing
|
||||
* the value wih this Controller. Useful for values that change
|
||||
* incrementally like numbers or strings.
|
||||
*
|
||||
* @param {Function} fnc This function will be called whenever
|
||||
* someone "finishes" changing the value via this Controller.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
onFinishChange(fnc) {
|
||||
this.__onFinishChange = fnc;
|
||||
return this;
|
||||
}
|
||||
|
||||
Controller.prototype,
|
||||
|
||||
/** @lends dat.controllers.Controller.prototype */
|
||||
{
|
||||
|
||||
/**
|
||||
* Specify that a function fire every time someone changes the value with
|
||||
* this Controller.
|
||||
*
|
||||
* @param {Function} fnc This function will be called whenever the value
|
||||
* is modified via this Controller.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
onChange: function(fnc) {
|
||||
this.__onChange = fnc;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Specify that a function fire every time someone "finishes" changing
|
||||
* the value wih this Controller. Useful for values that change
|
||||
* incrementally like numbers or strings.
|
||||
*
|
||||
* @param {Function} fnc This function will be called whenever
|
||||
* someone "finishes" changing the value via this Controller.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
onFinishChange: function(fnc) {
|
||||
this.__onFinishChange = fnc;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Change the value of <code>object[property]</code>
|
||||
*
|
||||
* @param {Object} newValue The new value of <code>object[property]</code>
|
||||
*/
|
||||
setValue: function(newValue) {
|
||||
this.object[this.property] = newValue;
|
||||
if (this.__onChange) {
|
||||
this.__onChange.call(this, newValue);
|
||||
}
|
||||
this.updateDisplay();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the value of <code>object[property]</code>
|
||||
*
|
||||
* @returns {Object} The current value of <code>object[property]</code>
|
||||
*/
|
||||
getValue: function() {
|
||||
return this.object[this.property];
|
||||
},
|
||||
|
||||
/**
|
||||
* Refreshes the visual display of a Controller in order to keep sync
|
||||
* with the object's current value.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
updateDisplay: function() {
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns {Boolean} true if the value has deviated from initialValue
|
||||
*/
|
||||
isModified: function() {
|
||||
return this.initialValue !== this.getValue()
|
||||
}
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
);
|
||||
this.updateDisplay();
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the value of <code>object[property]</code>
|
||||
*
|
||||
* @returns {Object} The current value of <code>object[property]</code>
|
||||
*/
|
||||
getValue() {
|
||||
return this.object[this.property];
|
||||
}
|
||||
|
||||
/**
|
||||
* Refreshes the visual display of a Controller in order to keep sync
|
||||
* with the object's current value.
|
||||
* @returns {dat.controllers.Controller} this
|
||||
*/
|
||||
updateDisplay() {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Boolean} true if the value has deviated from initialValue
|
||||
*/
|
||||
isModified() {
|
||||
return this.initialValue !== this.getValue()
|
||||
}
|
||||
}
|
||||
|
||||
export default Controller;
|
@ -20,41 +20,41 @@ import BooleanController from './BooleanController';
|
||||
import common from '../utils/common';
|
||||
|
||||
var ControllerFactory = function (object, property) {
|
||||
var initialValue = 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 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]);
|
||||
}
|
||||
else {
|
||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
||||
}
|
||||
} else {
|
||||
return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
|
||||
}
|
||||
}
|
||||
|
||||
// Providing a map?
|
||||
if (common.isNumber(initialValue)) {
|
||||
if (common.isString(initialValue)) {
|
||||
return new StringController(object, property);
|
||||
}
|
||||
|
||||
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
|
||||
// Has min and max.
|
||||
if (common.isNumber(arguments[4])) // has step
|
||||
{
|
||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
|
||||
}
|
||||
else {
|
||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
||||
}
|
||||
} else {
|
||||
return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
|
||||
}
|
||||
}
|
||||
if (common.isFunction(initialValue)) {
|
||||
return new FunctionController(object, property, '');
|
||||
}
|
||||
|
||||
if (common.isString(initialValue)) {
|
||||
return new StringController(object, property);
|
||||
}
|
||||
|
||||
if (common.isFunction(initialValue)) {
|
||||
return new FunctionController(object, property, '');
|
||||
}
|
||||
|
||||
if (common.isBoolean(initialValue)) {
|
||||
return new BooleanController(object, property);
|
||||
}
|
||||
if (common.isBoolean(initialValue)) {
|
||||
return new BooleanController(object, property);
|
||||
}
|
||||
};
|
||||
|
||||
export default ControllerFactory;
|
@ -25,46 +25,34 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var FunctionController = function(object, property, text) {
|
||||
|
||||
FunctionController.superclass.call(this, object, property);
|
||||
class FunctionController extends Controller{
|
||||
constructor(object, property, text) {
|
||||
super(object, property);
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.__button = document.createElement('div');
|
||||
this.__button.innerHTML = text === undefined ? 'Fire' : text;
|
||||
dom.bind(this.__button, 'click', function(e) {
|
||||
e.preventDefault();
|
||||
_this.fire();
|
||||
return false;
|
||||
dom.bind(this.__button, 'click', function (e) {
|
||||
e.preventDefault();
|
||||
_this.fire();
|
||||
return false;
|
||||
});
|
||||
|
||||
dom.addClass(this.__button, 'button');
|
||||
|
||||
this.domElement.appendChild(this.__button);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
FunctionController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
FunctionController.prototype,
|
||||
Controller.prototype,
|
||||
{
|
||||
|
||||
fire: function() {
|
||||
if (this.__onChange) {
|
||||
this.__onChange.call(this);
|
||||
}
|
||||
this.getValue().call(this.object);
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
}
|
||||
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;
|
@ -14,6 +14,15 @@
|
||||
import Controller from './Controller';
|
||||
import common from '../utils/common';
|
||||
|
||||
function numDecimals(x) {
|
||||
x = x.toString();
|
||||
if (x.indexOf('.') > -1) {
|
||||
return x.length - x.indexOf('.') - 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @class Represents a given property of an object that is a number.
|
||||
*
|
||||
@ -28,9 +37,9 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var NumberController = function(object, property, params) {
|
||||
|
||||
NumberController.superclass.call(this, object, property);
|
||||
class NumberController extends Controller {
|
||||
constructor(object, property, params) {
|
||||
super(object, property);
|
||||
|
||||
params = params || {};
|
||||
|
||||
@ -40,99 +49,76 @@ var NumberController = function(object, property, params) {
|
||||
|
||||
if (common.isUndefined(this.__step)) {
|
||||
|
||||
if (this.initialValue == 0) {
|
||||
this.__impliedStep = 1; // What are we, psychics?
|
||||
} else {
|
||||
// Hey Doug, check this out.
|
||||
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue))/Math.LN10))/10;
|
||||
}
|
||||
if (this.initialValue == 0) {
|
||||
this.__impliedStep = 1; // What are we, psychics?
|
||||
} else {
|
||||
// Hey Doug, check this out.
|
||||
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
this.__impliedStep = this.__step;
|
||||
this.__impliedStep = this.__step;
|
||||
}
|
||||
|
||||
this.__precision = numDecimals(this.__impliedStep);
|
||||
};
|
||||
|
||||
NumberController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
NumberController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
/** @lends dat.controllers.NumberController.prototype */
|
||||
{
|
||||
|
||||
setValue: function(v) {
|
||||
|
||||
if (this.__min !== undefined && v < this.__min) {
|
||||
v = this.__min;
|
||||
} else if (this.__max !== undefined && v > this.__max) {
|
||||
v = this.__max;
|
||||
}
|
||||
|
||||
if (this.__step !== undefined && v % this.__step != 0) {
|
||||
v = Math.round(v / this.__step) * this.__step;
|
||||
}
|
||||
|
||||
return NumberController.superclass.prototype.setValue.call(this, v);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Specify a minimum value for <code>object[property]</code>.
|
||||
*
|
||||
* @param {Number} minValue The minimum value for
|
||||
* <code>object[property]</code>
|
||||
* @returns {dat.controllers.NumberController} this
|
||||
*/
|
||||
min: function(v) {
|
||||
this.__min = v;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Specify a maximum value for <code>object[property]</code>.
|
||||
*
|
||||
* @param {Number} maxValue The maximum value for
|
||||
* <code>object[property]</code>
|
||||
* @returns {dat.controllers.NumberController} this
|
||||
*/
|
||||
max: function(v) {
|
||||
this.__max = v;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Specify a step value that dat.controllers.NumberController
|
||||
* increments by.
|
||||
*
|
||||
* @param {Number} stepValue The step value for
|
||||
* dat.controllers.NumberController
|
||||
* @default if minimum and maximum specified increment is 1% of the
|
||||
* difference otherwise stepValue is 1
|
||||
* @returns {dat.controllers.NumberController} this
|
||||
*/
|
||||
step: function(v) {
|
||||
this.__step = v;
|
||||
this.__impliedStep = v;
|
||||
this.__precision = numDecimals(v);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
setValue(v) {
|
||||
if (this.__min !== undefined && v < this.__min) {
|
||||
v = this.__min;
|
||||
} else if (this.__max !== undefined && v > this.__max) {
|
||||
v = this.__max;
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
function numDecimals(x) {
|
||||
x = x.toString();
|
||||
if (x.indexOf('.') > -1) {
|
||||
return x.length - x.indexOf('.') - 1;
|
||||
} else {
|
||||
return 0;
|
||||
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;
|
||||
|
@ -15,6 +15,11 @@ import NumberController from './NumberController';
|
||||
import dom from '../dom/dom';
|
||||
import common from '../utils/common';
|
||||
|
||||
function roundToDecimal(value, decimals) {
|
||||
var tenTo = Math.pow(10, decimals);
|
||||
return Math.round(value * tenTo) / tenTo;
|
||||
}
|
||||
|
||||
/**
|
||||
* @class Represents a given property of an object that is a number and
|
||||
* provides an input element with which to manipulate it.
|
||||
@ -31,99 +36,81 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var NumberControllerBox = function(object, property, params) {
|
||||
class NumberControllerBox extends NumberController {
|
||||
constructor(object, property, params) {
|
||||
super(object, property, params);
|
||||
|
||||
this.__truncationSuspended = false;
|
||||
this.__truncationSuspended = false;
|
||||
|
||||
NumberControllerBox.superclass.call(this, object, property, params);
|
||||
var _this = this;
|
||||
|
||||
var _this = this;
|
||||
/**
|
||||
* {Number} Previous mouse y position
|
||||
* @ignore
|
||||
*/
|
||||
var prev_y;
|
||||
|
||||
/**
|
||||
* {Number} Previous mouse y position
|
||||
* @ignore
|
||||
*/
|
||||
var prev_y;
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.setAttribute('type', 'text');
|
||||
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.setAttribute('type', 'text');
|
||||
// Makes it so manually specified values are not truncated.
|
||||
|
||||
// Makes it so manually specified values are not truncated.
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'mousedown', onMouseDown);
|
||||
dom.bind(this.__input, 'keydown', function (e) {
|
||||
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'mousedown', onMouseDown);
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
|
||||
// When pressing entire, you can be as precise as you want.
|
||||
if (e.keyCode === 13) {
|
||||
_this.__truncationSuspended = true;
|
||||
this.blur();
|
||||
_this.__truncationSuspended = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function onChange() {
|
||||
var attempted = parseFloat(_this.__input.value);
|
||||
if (!common.isNaN(attempted)) _this.setValue(attempted);
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
onChange();
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
dom.bind(window, 'mousemove', onMouseDrag);
|
||||
dom.bind(window, 'mouseup', onMouseUp);
|
||||
prev_y = e.clientY;
|
||||
}
|
||||
|
||||
function onMouseDrag(e) {
|
||||
|
||||
var diff = prev_y - e.clientY;
|
||||
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
||||
|
||||
prev_y = e.clientY;
|
||||
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dom.unbind(window, 'mousemove', onMouseDrag);
|
||||
dom.unbind(window, 'mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
|
||||
};
|
||||
|
||||
NumberControllerBox.superclass = NumberController;
|
||||
|
||||
common.extend(
|
||||
|
||||
NumberControllerBox.prototype,
|
||||
NumberController.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
||||
return NumberControllerBox.superclass.prototype.updateDisplay.call(this);
|
||||
// When pressing entire, you can be as precise as you want.
|
||||
if (e.keyCode === 13) {
|
||||
_this.__truncationSuspended = true;
|
||||
this.blur();
|
||||
_this.__truncationSuspended = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function onChange() {
|
||||
var attempted = parseFloat(_this.__input.value);
|
||||
if (!common.isNaN(attempted)) _this.setValue(attempted);
|
||||
}
|
||||
|
||||
);
|
||||
function onBlur() {
|
||||
onChange();
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
function roundToDecimal(value, decimals) {
|
||||
var tenTo = Math.pow(10, decimals);
|
||||
return Math.round(value * tenTo) / tenTo;
|
||||
function onMouseDown(e) {
|
||||
dom.bind(window, 'mousemove', onMouseDrag);
|
||||
dom.bind(window, 'mouseup', onMouseUp);
|
||||
prev_y = e.clientY;
|
||||
}
|
||||
|
||||
function onMouseDrag(e) {
|
||||
|
||||
var diff = prev_y - e.clientY;
|
||||
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
||||
|
||||
prev_y = e.clientY;
|
||||
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dom.unbind(window, 'mousemove', onMouseDrag);
|
||||
dom.unbind(window, 'mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
}
|
||||
|
||||
updateDisplay() {
|
||||
|
||||
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
||||
return super.updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
export default NumberControllerBox;
|
||||
|
@ -17,6 +17,10 @@ import css from '../utils/css';
|
||||
import common from '../utils/common';
|
||||
import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
|
||||
|
||||
function map(v, i1, i2, o1, o2) {
|
||||
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
||||
}
|
||||
|
||||
/**
|
||||
* @class Represents a given property of an object that is a number, contains
|
||||
* a minimum and maximum, and provides a slider element with which to
|
||||
@ -35,90 +39,70 @@ import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var NumberControllerSlider = function(object, property, min, max, step) {
|
||||
class NumberControllerSlider extends NumberController {
|
||||
constructor(object, property, min, max, step) {
|
||||
super(object, property, {min: min, max: max, step: step});
|
||||
|
||||
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step });
|
||||
var _this = this;
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.__background = document.createElement('div');
|
||||
this.__foreground = document.createElement('div');
|
||||
this.__background = document.createElement('div');
|
||||
this.__foreground = document.createElement('div');
|
||||
|
||||
|
||||
dom.bind(this.__background, 'mousedown', onMouseDown);
|
||||
|
||||
dom.bind(this.__background, 'mousedown', onMouseDown);
|
||||
dom.addClass(this.__background, 'slider');
|
||||
dom.addClass(this.__foreground, 'slider-fg');
|
||||
|
||||
dom.addClass(this.__background, 'slider');
|
||||
dom.addClass(this.__foreground, 'slider-fg');
|
||||
function onMouseDown(e) {
|
||||
|
||||
function onMouseDown(e) {
|
||||
dom.bind(window, 'mousemove', onMouseDrag);
|
||||
dom.bind(window, 'mouseup', onMouseUp);
|
||||
|
||||
dom.bind(window, 'mousemove', onMouseDrag);
|
||||
dom.bind(window, 'mouseup', onMouseUp);
|
||||
|
||||
onMouseDrag(e);
|
||||
}
|
||||
|
||||
function onMouseDrag(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var offset = dom.getOffset(_this.__background);
|
||||
var width = dom.getWidth(_this.__background);
|
||||
|
||||
_this.setValue(
|
||||
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
|
||||
);
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dom.unbind(window, 'mousemove', onMouseDrag);
|
||||
dom.unbind(window, 'mouseup', onMouseUp);
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
onMouseDrag(e);
|
||||
}
|
||||
|
||||
function onMouseDrag(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var offset = dom.getOffset(_this.__background);
|
||||
var width = dom.getWidth(_this.__background);
|
||||
|
||||
_this.setValue(
|
||||
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
|
||||
);
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
dom.unbind(window, 'mousemove', onMouseDrag);
|
||||
dom.unbind(window, 'mouseup', onMouseUp);
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.__background.appendChild(this.__foreground);
|
||||
this.domElement.appendChild(this.__background);
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.__background.appendChild(this.__foreground);
|
||||
this.domElement.appendChild(this.__background);
|
||||
|
||||
};
|
||||
|
||||
NumberControllerSlider.superclass = NumberController;
|
||||
updateDisplay() {
|
||||
var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
|
||||
this.__foreground.style.width = pct * 100 + '%';
|
||||
return super.updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Injects default stylesheet for slider elements.
|
||||
*/
|
||||
NumberControllerSlider.useDefaultStyles = function() {
|
||||
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));
|
||||
}
|
||||
|
||||
export default NumberControllerSlider;
|
@ -12,7 +12,7 @@
|
||||
*/
|
||||
|
||||
.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;
|
||||
border-radius: 1em;
|
||||
background-color: #eee;
|
||||
@ -33,7 +33,7 @@
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid #aaa;
|
||||
content: '';
|
||||
float: right;
|
||||
margin-right: -1em;
|
||||
|
@ -28,9 +28,9 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var OptionController = function(object, property, options) {
|
||||
|
||||
OptionController.superclass.call(this, object, property);
|
||||
class OptionController extends Controller{
|
||||
constructor(object, property, options) {
|
||||
super(object, property);
|
||||
|
||||
var _this = this;
|
||||
|
||||
@ -41,58 +41,46 @@ var OptionController = function(object, property, options) {
|
||||
this.__select = document.createElement('select');
|
||||
|
||||
if (common.isArray(options)) {
|
||||
var map = {};
|
||||
common.each(options, function(element) {
|
||||
map[element] = element;
|
||||
});
|
||||
options = map;
|
||||
var map = {};
|
||||
common.each(options, function (element) {
|
||||
map[element] = element;
|
||||
});
|
||||
options = map;
|
||||
}
|
||||
|
||||
common.each(options, function(value, key) {
|
||||
common.each(options, function (value, key) {
|
||||
|
||||
var opt = document.createElement('option');
|
||||
opt.innerHTML = key;
|
||||
opt.setAttribute('value', value);
|
||||
_this.__select.appendChild(opt);
|
||||
var opt = document.createElement('option');
|
||||
opt.innerHTML = key;
|
||||
opt.setAttribute('value', value);
|
||||
_this.__select.appendChild(opt);
|
||||
|
||||
});
|
||||
|
||||
// Acknowledge original value
|
||||
this.updateDisplay();
|
||||
|
||||
dom.bind(this.__select, 'change', function() {
|
||||
var desiredValue = this.options[this.selectedIndex].value;
|
||||
_this.setValue(desiredValue);
|
||||
dom.bind(this.__select, 'change', function () {
|
||||
var desiredValue = this.options[this.selectedIndex].value;
|
||||
_this.setValue(desiredValue);
|
||||
});
|
||||
|
||||
this.domElement.appendChild(this.__select);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
OptionController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
OptionController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
setValue: function(v) {
|
||||
var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
return toReturn;
|
||||
},
|
||||
|
||||
updateDisplay: function() {
|
||||
this.__select.value = this.getValue();
|
||||
return OptionController.superclass.prototype.updateDisplay.call(this);
|
||||
}
|
||||
setValue (v) {
|
||||
var toReturn = super.setValue(v);
|
||||
|
||||
if (this.__onFinishChange) {
|
||||
this.__onFinishChange.call(this, this.getValue());
|
||||
}
|
||||
return toReturn;
|
||||
}
|
||||
|
||||
);
|
||||
updateDisplay() {
|
||||
this.__select.value = this.getValue();
|
||||
return super.updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
export default OptionController;
|
@ -25,61 +25,48 @@ import common from '../utils/common';
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var StringController = function(object, property) {
|
||||
class StringController extends Controller {
|
||||
constructor(object, property) {
|
||||
super(object, property);
|
||||
|
||||
StringController.superclass.call(this, object, property);
|
||||
var _this = this;
|
||||
|
||||
var _this = this;
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.setAttribute('type', 'text');
|
||||
|
||||
this.__input = document.createElement('input');
|
||||
this.__input.setAttribute('type', 'text');
|
||||
|
||||
dom.bind(this.__input, 'keyup', onChange);
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.blur();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function onChange() {
|
||||
_this.setValue(_this.__input.value);
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
|
||||
};
|
||||
|
||||
StringController.superclass = Controller;
|
||||
|
||||
common.extend(
|
||||
|
||||
StringController.prototype,
|
||||
Controller.prototype,
|
||||
|
||||
{
|
||||
|
||||
updateDisplay: function() {
|
||||
// Stops the caret from moving on account of:
|
||||
// keyup -> setValue -> updateDisplay
|
||||
if (!dom.isActive(this.__input)) {
|
||||
this.__input.value = this.getValue();
|
||||
}
|
||||
return StringController.superclass.prototype.updateDisplay.call(this);
|
||||
dom.bind(this.__input, 'keyup', onChange);
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'keydown', function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.blur();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function onChange() {
|
||||
_this.setValue(_this.__input.value);
|
||||
}
|
||||
|
||||
);
|
||||
function onBlur() {
|
||||
if (_this.__onFinishChange) {
|
||||
_this.__onFinishChange.call(_this, _this.getValue());
|
||||
}
|
||||
}
|
||||
|
||||
this.updateDisplay();
|
||||
|
||||
this.domElement.appendChild(this.__input);
|
||||
}
|
||||
|
||||
updateDisplay() {
|
||||
// Stops the caret from moving on account of:
|
||||
// keyup -> setValue -> updateDisplay
|
||||
if (!dom.isActive(this.__input)) {
|
||||
this.__input.value = this.getValue();
|
||||
}
|
||||
return super.updateDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
export default StringController;
|
||||
|
@ -14,99 +14,99 @@
|
||||
import dom from '../dom/dom';
|
||||
import common from '../utils/common';
|
||||
|
||||
var CenteredDiv = function() {
|
||||
var CenteredDiv = function () {
|
||||
|
||||
this.backgroundElement = document.createElement('div');
|
||||
common.extend(this.backgroundElement.style, {
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
top: 0,
|
||||
left: 0,
|
||||
display: 'none',
|
||||
zIndex: '1000',
|
||||
opacity: 0,
|
||||
WebkitTransition: 'opacity 0.2s linear',
|
||||
transition: 'opacity 0.2s linear'
|
||||
});
|
||||
this.backgroundElement = document.createElement('div');
|
||||
common.extend(this.backgroundElement.style, {
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
top: 0,
|
||||
left: 0,
|
||||
display: 'none',
|
||||
zIndex: '1000',
|
||||
opacity: 0,
|
||||
WebkitTransition: 'opacity 0.2s linear',
|
||||
transition: 'opacity 0.2s linear'
|
||||
});
|
||||
|
||||
dom.makeFullscreen(this.backgroundElement);
|
||||
this.backgroundElement.style.position = 'fixed';
|
||||
dom.makeFullscreen(this.backgroundElement);
|
||||
this.backgroundElement.style.position = 'fixed';
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
common.extend(this.domElement.style, {
|
||||
position: 'fixed',
|
||||
display: 'none',
|
||||
zIndex: '1001',
|
||||
opacity: 0,
|
||||
WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
|
||||
transition: 'transform 0.2s ease-out, opacity 0.2s linear'
|
||||
});
|
||||
this.domElement = document.createElement('div');
|
||||
common.extend(this.domElement.style, {
|
||||
position: 'fixed',
|
||||
display: 'none',
|
||||
zIndex: '1001',
|
||||
opacity: 0,
|
||||
WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
|
||||
transition: 'transform 0.2s ease-out, opacity 0.2s linear'
|
||||
});
|
||||
|
||||
|
||||
document.body.appendChild(this.backgroundElement);
|
||||
document.body.appendChild(this.domElement);
|
||||
document.body.appendChild(this.backgroundElement);
|
||||
document.body.appendChild(this.domElement);
|
||||
|
||||
var _this = this;
|
||||
dom.bind(this.backgroundElement, 'click', function() {
|
||||
_this.hide();
|
||||
});
|
||||
var _this = this;
|
||||
dom.bind(this.backgroundElement, 'click', function () {
|
||||
_this.hide();
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
CenteredDiv.prototype.show = function() {
|
||||
CenteredDiv.prototype.show = function () {
|
||||
|
||||
var _this = this;
|
||||
var _this = this;
|
||||
|
||||
this.backgroundElement.style.display = 'block';
|
||||
this.backgroundElement.style.display = 'block';
|
||||
|
||||
this.domElement.style.display = 'block';
|
||||
this.domElement.style.opacity = 0;
|
||||
this.domElement.style.display = 'block';
|
||||
this.domElement.style.opacity = 0;
|
||||
// this.domElement.style.top = '52%';
|
||||
this.domElement.style.webkitTransform = 'scale(1.1)';
|
||||
this.domElement.style.webkitTransform = 'scale(1.1)';
|
||||
|
||||
this.layout();
|
||||
this.layout();
|
||||
|
||||
common.defer(function() {
|
||||
_this.backgroundElement.style.opacity = 1;
|
||||
_this.domElement.style.opacity = 1;
|
||||
_this.domElement.style.webkitTransform = 'scale(1)';
|
||||
});
|
||||
common.defer(function () {
|
||||
_this.backgroundElement.style.opacity = 1;
|
||||
_this.domElement.style.opacity = 1;
|
||||
_this.domElement.style.webkitTransform = 'scale(1)';
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
CenteredDiv.prototype.hide = function() {
|
||||
CenteredDiv.prototype.hide = function () {
|
||||
|
||||
var _this = this;
|
||||
var _this = this;
|
||||
|
||||
var hide = function() {
|
||||
var hide = function () {
|
||||
|
||||
_this.domElement.style.display = 'none';
|
||||
_this.backgroundElement.style.display = 'none';
|
||||
_this.domElement.style.display = 'none';
|
||||
_this.backgroundElement.style.display = 'none';
|
||||
|
||||
dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
|
||||
dom.unbind(_this.domElement, 'transitionend', hide);
|
||||
dom.unbind(_this.domElement, 'oTransitionEnd', hide);
|
||||
dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
|
||||
dom.unbind(_this.domElement, 'transitionend', hide);
|
||||
dom.unbind(_this.domElement, 'oTransitionEnd', hide);
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
dom.bind(this.domElement, 'webkitTransitionEnd', hide);
|
||||
dom.bind(this.domElement, 'transitionend', hide);
|
||||
dom.bind(this.domElement, 'oTransitionEnd', hide);
|
||||
dom.bind(this.domElement, 'webkitTransitionEnd', hide);
|
||||
dom.bind(this.domElement, 'transitionend', hide);
|
||||
dom.bind(this.domElement, 'oTransitionEnd', hide);
|
||||
|
||||
this.backgroundElement.style.opacity = 0;
|
||||
this.backgroundElement.style.opacity = 0;
|
||||
// this.domElement.style.top = '48%';
|
||||
this.domElement.style.opacity = 0;
|
||||
this.domElement.style.webkitTransform = 'scale(1.1)';
|
||||
this.domElement.style.opacity = 0;
|
||||
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';
|
||||
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);
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
export default CenteredDiv;
|
||||
|
@ -14,33 +14,33 @@
|
||||
import common from '../utils/common';
|
||||
|
||||
var EVENT_MAP = {
|
||||
'HTMLEvents': ['change'],
|
||||
'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
|
||||
'KeyboardEvents': ['keydown']
|
||||
'HTMLEvents': ['change'],
|
||||
'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
|
||||
'KeyboardEvents': ['keydown']
|
||||
};
|
||||
|
||||
var EVENT_MAP_INV = {};
|
||||
common.each(EVENT_MAP, function (v, k) {
|
||||
common.each(v, function (e) {
|
||||
EVENT_MAP_INV[e] = k;
|
||||
});
|
||||
common.each(v, function (e) {
|
||||
EVENT_MAP_INV[e] = k;
|
||||
});
|
||||
});
|
||||
|
||||
var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
|
||||
|
||||
function cssValueToPixels(val) {
|
||||
|
||||
if (val === '0' || common.isUndefined(val)) return 0;
|
||||
if (val === '0' || common.isUndefined(val)) return 0;
|
||||
|
||||
var match = val.match(CSS_VALUE_PIXELS);
|
||||
var match = val.match(CSS_VALUE_PIXELS);
|
||||
|
||||
if (!common.isNull(match)) {
|
||||
return parseFloat(match[1]);
|
||||
}
|
||||
if (!common.isNull(match)) {
|
||||
return parseFloat(match[1]);
|
||||
}
|
||||
|
||||
// TODO ...ems? %?
|
||||
// TODO ...ems? %?
|
||||
|
||||
return 0;
|
||||
return 0;
|
||||
|
||||
}
|
||||
|
||||
@ -50,233 +50,233 @@ function cssValueToPixels(val) {
|
||||
*/
|
||||
var dom = {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param selectable
|
||||
*/
|
||||
makeSelectable: function (elem, selectable) {
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param selectable
|
||||
*/
|
||||
makeSelectable: function (elem, selectable) {
|
||||
|
||||
if (elem === undefined || elem.style === undefined) return;
|
||||
if (elem === undefined || elem.style === undefined) return;
|
||||
|
||||
elem.onselectstart = selectable ? function () {
|
||||
return false;
|
||||
} : function () {
|
||||
};
|
||||
elem.onselectstart = selectable ? function () {
|
||||
return false;
|
||||
} : function () {
|
||||
};
|
||||
|
||||
elem.style.MozUserSelect = selectable ? 'auto' : 'none';
|
||||
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
|
||||
elem.unselectable = selectable ? 'on' : 'off';
|
||||
elem.style.MozUserSelect = selectable ? 'auto' : 'none';
|
||||
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
|
||||
elem.unselectable = selectable ? 'on' : 'off';
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param horizontal
|
||||
* @param vertical
|
||||
*/
|
||||
makeFullscreen: function (elem, horizontal, vertical) {
|
||||
/**
|
||||
*
|
||||
* @param elem
|
||||
* @param horizontal
|
||||
* @param vertical
|
||||
*/
|
||||
makeFullscreen: function (elem, horizontal, vertical) {
|
||||
|
||||
if (common.isUndefined(horizontal)) horizontal = true;
|
||||
if (common.isUndefined(vertical)) vertical = true;
|
||||
if (common.isUndefined(horizontal)) horizontal = true;
|
||||
if (common.isUndefined(vertical)) vertical = true;
|
||||
|
||||
elem.style.position = 'absolute';
|
||||
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 (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 );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
2008
src/dat/gui/GUI.js
2008
src/dat/gui/GUI.js
File diff suppressed because it is too large
Load Diff
@ -16,12 +16,12 @@ $button-height: 20px;
|
||||
|
||||
/* Auto-place container */
|
||||
&.ac {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
z-index: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:not(.ac) .main {
|
||||
@ -53,7 +53,6 @@ $button-height: 20px;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
&:hover .close-button,
|
||||
.close-button.drag {
|
||||
opacity: 1;
|
||||
@ -68,7 +67,7 @@ $button-height: 20px;
|
||||
line-height: $button-height - 1;
|
||||
height: $button-height;
|
||||
|
||||
/* TODO, these are style notes */
|
||||
/* TODO, these are style notes */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background-color: #000;
|
||||
@ -94,8 +93,6 @@ $button-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.save-row {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -118,8 +115,8 @@ $button-height: 20px;
|
||||
}
|
||||
|
||||
li.folder {
|
||||
padding: 0;
|
||||
border-left: $nest-margin solid rgba(0,0,0,0);
|
||||
padding: 0;
|
||||
border-left: $nest-margin solid rgba(0, 0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
@ -156,7 +153,7 @@ $button-height: 20px;
|
||||
}
|
||||
|
||||
/** Controller-half (right) */
|
||||
.c {
|
||||
.c {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
@ -198,7 +195,7 @@ $button-height: 20px;
|
||||
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 .property-name, /* Don't know why I need to be this explicit */
|
||||
.cr.function *,
|
||||
@ -207,7 +204,6 @@ $button-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.selector {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -216,13 +212,11 @@ $button-height: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
.c:hover .selector,
|
||||
.selector.drag {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
li.save-row {
|
||||
|
||||
padding: 0;
|
||||
@ -242,7 +236,6 @@ $button-height: 20px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* TODO Separate style and structure */
|
||||
@ -273,7 +266,7 @@ $button-height: 20px;
|
||||
margin-top: 10px;
|
||||
code {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dat-gui-save-locally {
|
||||
|
@ -51,7 +51,6 @@ $input-color: lighten($background-color, 8.5%);
|
||||
/** Main type */
|
||||
.dg {
|
||||
|
||||
|
||||
color: #eee;
|
||||
font: 11px 'Lucida Grande', sans-serif;
|
||||
text-shadow: 0 -1px 0 #111;
|
||||
@ -157,19 +156,16 @@ $input-color: lighten($background-color, 8.5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.function:hover ,
|
||||
&.function:hover,
|
||||
&.boolean:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/** Controllers */
|
||||
.c {
|
||||
|
||||
|
||||
|
||||
input[type=text] {
|
||||
|
||||
background: $input-color;
|
||||
@ -184,7 +180,6 @@ $input-color: lighten($background-color, 8.5%);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.slider {
|
||||
background: $input-color;
|
||||
cursor: ew-resize;
|
||||
|
@ -1,29 +1,29 @@
|
||||
module.exports = {
|
||||
color: {
|
||||
Color: require('./color/Color'),
|
||||
math: require('./color/math'),
|
||||
interpret: require('./color/interpret')
|
||||
},
|
||||
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')
|
||||
},
|
||||
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')
|
||||
},
|
||||
dom: {
|
||||
dom: require('./dom/dom')
|
||||
},
|
||||
|
||||
gui: {
|
||||
GUI: require('./gui/GUI')
|
||||
},
|
||||
|
||||
GUI: require('./gui/GUI')
|
||||
};
|
@ -22,115 +22,115 @@ var ARR_SLICE = Array.prototype.slice;
|
||||
|
||||
var Common = {
|
||||
|
||||
BREAK: {},
|
||||
BREAK: {},
|
||||
|
||||
extend: function (target) {
|
||||
extend: function (target) {
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
||||
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
||||
|
||||
for (var key in obj)
|
||||
if (!this.isUndefined(obj[key]))
|
||||
target[key] = obj[key];
|
||||
for (var key in obj)
|
||||
if (!this.isUndefined(obj[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
}, this);
|
||||
}, this);
|
||||
|
||||
return target;
|
||||
return target;
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
defaults: function (target) {
|
||||
defaults: function (target) {
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
||||
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
||||
|
||||
for (var key in obj)
|
||||
if (this.isUndefined(target[key]))
|
||||
target[key] = obj[key];
|
||||
for (var key in obj)
|
||||
if (this.isUndefined(target[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
}, this);
|
||||
}, this);
|
||||
|
||||
return target;
|
||||
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;
|
||||
|
||||
if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {
|
||||
|
||||
obj.forEach(itr, scope);
|
||||
|
||||
} else if (obj.length === obj.length + 0) { // Is number but not NaN
|
||||
|
||||
for (var key = 0, l = obj.length; key < l; key++)
|
||||
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
} else {
|
||||
|
||||
for (var key in obj)
|
||||
if (itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
defer: function (fnc) {
|
||||
setTimeout(fnc, 0);
|
||||
},
|
||||
|
||||
toArray: function (obj) {
|
||||
if (obj.toArray) return obj.toArray();
|
||||
return ARR_SLICE.call(obj);
|
||||
},
|
||||
|
||||
isUndefined: function (obj) {
|
||||
return obj === undefined;
|
||||
},
|
||||
|
||||
isNull: function (obj) {
|
||||
return obj === null;
|
||||
},
|
||||
|
||||
isNaN: function (obj) {
|
||||
return obj !== obj;
|
||||
},
|
||||
|
||||
isArray: Array.isArray || function (obj) {
|
||||
return obj.constructor === Array;
|
||||
},
|
||||
|
||||
isObject: function (obj) {
|
||||
return obj === Object(obj);
|
||||
},
|
||||
|
||||
isNumber: function (obj) {
|
||||
return obj === obj + 0;
|
||||
},
|
||||
|
||||
isString: function (obj) {
|
||||
return obj === obj + '';
|
||||
},
|
||||
|
||||
isBoolean: function (obj) {
|
||||
return obj === false || obj === true;
|
||||
},
|
||||
|
||||
isFunction: function (obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Function]';
|
||||
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;
|
||||
|
||||
if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {
|
||||
|
||||
obj.forEach(itr, scope);
|
||||
|
||||
} else if (obj.length === obj.length + 0) { // Is number but not NaN
|
||||
|
||||
for (var key = 0, l = obj.length; key < l; key++)
|
||||
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
} else {
|
||||
|
||||
for (var key in obj)
|
||||
if (itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
defer: function (fnc) {
|
||||
setTimeout(fnc, 0);
|
||||
},
|
||||
|
||||
toArray: function (obj) {
|
||||
if (obj.toArray) return obj.toArray();
|
||||
return ARR_SLICE.call(obj);
|
||||
},
|
||||
|
||||
isUndefined: function (obj) {
|
||||
return obj === undefined;
|
||||
},
|
||||
|
||||
isNull: function (obj) {
|
||||
return obj === null;
|
||||
},
|
||||
|
||||
isNaN: function (obj) {
|
||||
return obj !== obj;
|
||||
},
|
||||
|
||||
isArray: Array.isArray || function (obj) {
|
||||
return obj.constructor === Array;
|
||||
},
|
||||
|
||||
isObject: function (obj) {
|
||||
return obj === Object(obj);
|
||||
},
|
||||
|
||||
isNumber: function (obj) {
|
||||
return obj === obj + 0;
|
||||
},
|
||||
|
||||
isString: function (obj) {
|
||||
return obj === obj + '';
|
||||
},
|
||||
|
||||
isBoolean: function (obj) {
|
||||
return obj === false || obj === true;
|
||||
},
|
||||
|
||||
isFunction: function (obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Function]';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
@ -12,19 +12,19 @@
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
load: function (url, doc) {
|
||||
doc = doc || document;
|
||||
var link = doc.createElement('link');
|
||||
link.type = 'text/css';
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
doc.getElementsByTagName('head')[0].appendChild(link);
|
||||
},
|
||||
inject: function (css, doc) {
|
||||
doc = doc || document;
|
||||
var injected = document.createElement('style');
|
||||
injected.type = 'text/css';
|
||||
injected.innerHTML = css;
|
||||
doc.getElementsByTagName('head')[0].appendChild(injected);
|
||||
}
|
||||
load: function (url, doc) {
|
||||
doc = doc || document;
|
||||
var link = doc.createElement('link');
|
||||
link.type = 'text/css';
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
doc.getElementsByTagName('head')[0].appendChild(link);
|
||||
},
|
||||
inject: function (css, doc) {
|
||||
doc = doc || document;
|
||||
var injected = document.createElement('style');
|
||||
injected.type = 'text/css';
|
||||
injected.innerHTML = css;
|
||||
doc.getElementsByTagName('head')[0].appendChild(injected);
|
||||
}
|
||||
};
|
@ -12,12 +12,12 @@
|
||||
*/
|
||||
|
||||
module.exports = function () {
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback, element) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback, element) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
};
|
||||
|
@ -12,8 +12,6 @@
|
||||
|
||||
$.noConflict();
|
||||
jQuery(document).ready(function($) {
|
||||
// var dat = this['dat.gui'];
|
||||
|
||||
var math = dat.color.math;
|
||||
var interpret = dat.color.interpret;
|
||||
var Color = dat.color.Color;
|
||||
|
@ -1,26 +0,0 @@
|
||||
var path = require("path");
|
||||
|
||||
module.exports = {
|
||||
target: 'web',
|
||||
|
||||
context: path.resolve(__dirname, 'src'),
|
||||
|
||||
entry: {
|
||||
main: '../index'
|
||||
},
|
||||
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loader: "style-loader!css-loader" },
|
||||
{ test: /\.png$/, loader: "url-loader?limit=100000" },
|
||||
{ test: /\.jpg$/, loader: "file-loader" }
|
||||
]
|
||||
},
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, 'build'),
|
||||
filename: 'dat.gui.js',
|
||||
library: ['dat'],
|
||||
libraryTarget: 'umd'
|
||||
}
|
||||
};
|
15
webpack.config.min.js
vendored
15
webpack.config.min.js
vendored
@ -1,15 +0,0 @@
|
||||
var extend = require('extend'),
|
||||
webpack = require('webpack'),
|
||||
webpackConfig = require('./webpack.config');
|
||||
|
||||
var config = {
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({minimize: true})
|
||||
],
|
||||
|
||||
output: {
|
||||
filename: 'dat.gui.min.js'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = extend(true, webpackConfig, config);
|
Loading…
Reference in New Issue
Block a user