library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-10-10 06:54:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Using classses

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

17
.editorconfig Normal file
View File

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

4405
build/dat.gui.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

69
example.html
View File

@ -3,11 +3,74 @@
<head>
</head>
<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
View File

@ -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"
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load Diff

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

@ -16,12 +16,12 @@ $button-height: 20px;
/* Auto-place container */
&.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;
@ -104,7 +101,7 @@ $button-height: 20px;
}
li {
li {
@include transition(height, 0.1s, ease-out);
}
@ -117,10 +114,10 @@ $button-height: 20px;
padding: 0 4px 0 5px;
}
li.folder {
padding: 0;
border-left: $nest-margin solid rgba(0,0,0,0);
li.folder {
padding: 0;
border-left: $nest-margin solid rgba(0, 0, 0, 0);
}
/** Folder names */
@ -137,8 +134,8 @@ $button-height: 20px;
overflow: hidden;
border: 0;
}
/** Controller row */
/** Controller row */
.cr {
clear: both;
padding-left: 3px;
@ -156,7 +153,7 @@ $button-height: 20px;
}
/** Controller-half (right) */
.c {
.c {
float: left;
width: 60%;
}
@ -197,8 +194,8 @@ $button-height: 20px;
.c select {
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 {

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

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

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

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

46
src/dat/index.js
View File

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

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

@ -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]';
}
};

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

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

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

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

2
tests/index.html
View File

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

26
webpack.config.js
View File

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

15
webpack.config.min.js vendored
View File

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