mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
4382 lines
135 KiB
JavaScript
4382 lines
135 KiB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
|
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
module.exports = factory();
|
|
else if(typeof define === 'function' && define.amd)
|
|
define(factory);
|
|
else if(typeof exports === 'object')
|
|
exports["dat"] = factory();
|
|
else
|
|
root["dat"] = factory();
|
|
})(this, function() {
|
|
return /******/ (function(modules) { // webpackBootstrap
|
|
/******/ // The module cache
|
|
/******/ var installedModules = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/
|
|
/******/ // Check if module is in cache
|
|
/******/ if(installedModules[moduleId])
|
|
/******/ return installedModules[moduleId].exports;
|
|
/******/
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = installedModules[moduleId] = {
|
|
/******/ exports: {},
|
|
/******/ id: moduleId,
|
|
/******/ loaded: false
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Flag the module as loaded
|
|
/******/ module.loaded = true;
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/******/
|
|
/******/ // expose the modules object (__webpack_modules__)
|
|
/******/ __webpack_require__.m = modules;
|
|
/******/
|
|
/******/ // expose the module cache
|
|
/******/ __webpack_require__.c = installedModules;
|
|
/******/
|
|
/******/ // __webpack_public_path__
|
|
/******/ __webpack_require__.p = "";
|
|
/******/
|
|
/******/ // Load entry module and return exports
|
|
/******/ return __webpack_require__(0);
|
|
/******/ })
|
|
/************************************************************************/
|
|
/******/ ([
|
|
/* 0 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
'use strict';
|
|
|
|
module.exports = __webpack_require__(1);
|
|
|
|
/***/ },
|
|
/* 1 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
color: {
|
|
Color: __webpack_require__(2),
|
|
math: __webpack_require__(6),
|
|
interpret: __webpack_require__(3)
|
|
},
|
|
|
|
controllers: {
|
|
Controller: __webpack_require__(7),
|
|
BooleanController: __webpack_require__(8),
|
|
OptionController: __webpack_require__(10),
|
|
StringController: __webpack_require__(11),
|
|
NumberController: __webpack_require__(12),
|
|
NumberControllerBox: __webpack_require__(13),
|
|
NumberControllerSlider: __webpack_require__(14),
|
|
FunctionController: __webpack_require__(20),
|
|
ColorController: __webpack_require__(21)
|
|
},
|
|
|
|
dom: {
|
|
dom: __webpack_require__(9)
|
|
},
|
|
|
|
gui: {
|
|
GUI: __webpack_require__(22)
|
|
},
|
|
|
|
GUI: __webpack_require__(22)
|
|
};
|
|
|
|
/***/ },
|
|
/* 2 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
var _interpret = __webpack_require__(3);
|
|
|
|
var _interpret2 = _interopRequireDefault(_interpret);
|
|
|
|
var _math = __webpack_require__(6);
|
|
|
|
var _math2 = _interopRequireDefault(_math);
|
|
|
|
var _toString = __webpack_require__(4);
|
|
|
|
var _toString2 = _interopRequireDefault(_toString);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
var Color = (function () {
|
|
function Color() {
|
|
_classCallCheck(this, Color);
|
|
|
|
this.__state = _interpret2['default'].apply(this, arguments);
|
|
|
|
if (this.__state === false) {
|
|
throw new Error('Failed to interpret color arguments');
|
|
}
|
|
|
|
this.__state.a = this.__state.a || 1;
|
|
}
|
|
|
|
Color.prototype.toString = function toString() {
|
|
return _toString2['default'](this);
|
|
};
|
|
|
|
Color.prototype.toOriginal = function toOriginal() {
|
|
return this.__state.conversion.write(this);
|
|
};
|
|
|
|
return Color;
|
|
})();
|
|
|
|
Color.recalculateRGB = function (color, component, componentHexIndex) {
|
|
if (color.__state.space === 'HEX') {
|
|
color.__state[component] = _math2['default'].component_from_hex(color.__state.hex, componentHexIndex);
|
|
} else if (color.__state.space === 'HSV') {
|
|
_utilsCommon2['default'].extend(color.__state, _math2['default'].hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
|
|
} else {
|
|
throw new Error('Corrupted color state');
|
|
}
|
|
};
|
|
|
|
Color.recalculateHSV = function (color) {
|
|
var result = _math2['default'].rgb_to_hsv(color.r, color.g, color.b);
|
|
|
|
_utilsCommon2['default'].extend(color.__state, {
|
|
s: result.s,
|
|
v: result.v
|
|
});
|
|
|
|
if (!_utilsCommon2['default'].isNaN(result.h)) {
|
|
color.__state.h = result.h;
|
|
} else if (_utilsCommon2['default'].isUndefined(color.__state.h)) {
|
|
color.__state.h = 0;
|
|
}
|
|
};
|
|
|
|
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
|
|
|
|
defineRGBComponent(Color.prototype, 'r', 2);
|
|
defineRGBComponent(Color.prototype, 'g', 1);
|
|
defineRGBComponent(Color.prototype, 'b', 0);
|
|
|
|
defineHSVComponent(Color.prototype, 'h');
|
|
defineHSVComponent(Color.prototype, 's');
|
|
defineHSVComponent(Color.prototype, 'v');
|
|
|
|
Object.defineProperty(Color.prototype, 'a', {
|
|
get: function get() {
|
|
return this.__state.a;
|
|
},
|
|
|
|
set: function set(v) {
|
|
this.__state.a = v;
|
|
}
|
|
});
|
|
|
|
Object.defineProperty(Color.prototype, 'hex', {
|
|
get: function get() {
|
|
if (!this.__state.space !== 'HEX') {
|
|
this.__state.hex = _math2['default'].rgb_to_hex(this.r, this.g, this.b);
|
|
}
|
|
|
|
return this.__state.hex;
|
|
},
|
|
|
|
set: function set(v) {
|
|
this.__state.space = 'HEX';
|
|
this.__state.hex = v;
|
|
}
|
|
});
|
|
|
|
function defineRGBComponent(target, component, componentHexIndex) {
|
|
Object.defineProperty(target, component, {
|
|
get: function get() {
|
|
if (this.__state.space === 'RGB') {
|
|
return this.__state[component];
|
|
}
|
|
|
|
Color.recalculateRGB(this, component, componentHexIndex);
|
|
|
|
return this.__state[component];
|
|
},
|
|
|
|
set: function set(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 get() {
|
|
if (this.__state.space === 'HSV') {
|
|
return this.__state[component];
|
|
}
|
|
|
|
Color.recalculateHSV(this);
|
|
|
|
return this.__state[component];
|
|
},
|
|
|
|
set: function set(v) {
|
|
if (this.__state.space !== 'HSV') {
|
|
Color.recalculateHSV(this);
|
|
this.__state.space = 'HSV';
|
|
}
|
|
|
|
this.__state[component] = v;
|
|
}
|
|
});
|
|
}
|
|
|
|
exports['default'] = Color;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 3 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var _toString = __webpack_require__(4);
|
|
|
|
var _toString2 = _interopRequireDefault(_toString);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
var INTERPRETATIONS = [
|
|
// Strings
|
|
{
|
|
litmus: _utilsCommon2['default'].isString,
|
|
conversions: {
|
|
THREE_CHAR_HEX: {
|
|
read: function read(original) {
|
|
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
|
|
if (test === null) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
space: 'HEX',
|
|
hex: parseInt('0x' + test[1].toString() + test[1].toString() + test[2].toString() + test[2].toString() + test[3].toString() + test[3].toString(), 0)
|
|
};
|
|
},
|
|
|
|
write: _toString2['default']
|
|
},
|
|
|
|
SIX_CHAR_HEX: {
|
|
read: function read(original) {
|
|
var test = original.match(/^#([A-F0-9]{6})$/i);
|
|
if (test === null) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
space: 'HEX',
|
|
hex: parseInt('0x' + test[1].toString(), 0)
|
|
};
|
|
},
|
|
|
|
write: _toString2['default']
|
|
},
|
|
|
|
CSS_RGB: {
|
|
read: function read(original) {
|
|
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
|
|
if (test === null) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
space: 'RGB',
|
|
r: parseFloat(test[1]),
|
|
g: parseFloat(test[2]),
|
|
b: parseFloat(test[3])
|
|
};
|
|
},
|
|
|
|
write: _toString2['default']
|
|
},
|
|
|
|
CSS_RGBA: {
|
|
read: function read(original) {
|
|
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
|
|
if (test === null) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
space: 'RGB',
|
|
r: parseFloat(test[1]),
|
|
g: parseFloat(test[2]),
|
|
b: parseFloat(test[3]),
|
|
a: parseFloat(test[4])
|
|
};
|
|
},
|
|
|
|
write: _toString2['default']
|
|
}
|
|
}
|
|
},
|
|
|
|
// Numbers
|
|
{
|
|
litmus: _utilsCommon2['default'].isNumber,
|
|
|
|
conversions: {
|
|
|
|
HEX: {
|
|
read: function read(original) {
|
|
return {
|
|
space: 'HEX',
|
|
hex: original,
|
|
conversionName: 'HEX'
|
|
};
|
|
},
|
|
|
|
write: function write(color) {
|
|
return color.hex;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// Arrays
|
|
{
|
|
litmus: _utilsCommon2['default'].isArray,
|
|
conversions: {
|
|
RGB_ARRAY: {
|
|
read: function read(original) {
|
|
if (original.length !== 3) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
space: 'RGB',
|
|
r: original[0],
|
|
g: original[1],
|
|
b: original[2]
|
|
};
|
|
},
|
|
|
|
write: function write(color) {
|
|
return [color.r, color.g, color.b];
|
|
}
|
|
},
|
|
|
|
RGBA_ARRAY: {
|
|
read: function read(original) {
|
|
if (original.length !== 4) return false;
|
|
return {
|
|
space: 'RGB',
|
|
r: original[0],
|
|
g: original[1],
|
|
b: original[2],
|
|
a: original[3]
|
|
};
|
|
},
|
|
|
|
write: function write(color) {
|
|
return [color.r, color.g, color.b, color.a];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// Objects
|
|
{
|
|
litmus: _utilsCommon2['default'].isObject,
|
|
conversions: {
|
|
|
|
RGBA_OBJ: {
|
|
read: function read(original) {
|
|
if (_utilsCommon2['default'].isNumber(original.r) && _utilsCommon2['default'].isNumber(original.g) && _utilsCommon2['default'].isNumber(original.b) && _utilsCommon2['default'].isNumber(original.a)) {
|
|
return {
|
|
space: 'RGB',
|
|
r: original.r,
|
|
g: original.g,
|
|
b: original.b,
|
|
a: original.a
|
|
};
|
|
}
|
|
return false;
|
|
},
|
|
|
|
write: function write(color) {
|
|
return {
|
|
r: color.r,
|
|
g: color.g,
|
|
b: color.b,
|
|
a: color.a
|
|
};
|
|
}
|
|
},
|
|
|
|
RGB_OBJ: {
|
|
read: function read(original) {
|
|
if (_utilsCommon2['default'].isNumber(original.r) && _utilsCommon2['default'].isNumber(original.g) && _utilsCommon2['default'].isNumber(original.b)) {
|
|
return {
|
|
space: 'RGB',
|
|
r: original.r,
|
|
g: original.g,
|
|
b: original.b
|
|
};
|
|
}
|
|
return false;
|
|
},
|
|
|
|
write: function write(color) {
|
|
return {
|
|
r: color.r,
|
|
g: color.g,
|
|
b: color.b
|
|
};
|
|
}
|
|
},
|
|
|
|
HSVA_OBJ: {
|
|
read: function read(original) {
|
|
if (_utilsCommon2['default'].isNumber(original.h) && _utilsCommon2['default'].isNumber(original.s) && _utilsCommon2['default'].isNumber(original.v) && _utilsCommon2['default'].isNumber(original.a)) {
|
|
return {
|
|
space: 'HSV',
|
|
h: original.h,
|
|
s: original.s,
|
|
v: original.v,
|
|
a: original.a
|
|
};
|
|
}
|
|
return false;
|
|
},
|
|
|
|
write: function write(color) {
|
|
return {
|
|
h: color.h,
|
|
s: color.s,
|
|
v: color.v,
|
|
a: color.a
|
|
};
|
|
}
|
|
},
|
|
|
|
HSV_OBJ: {
|
|
read: function read(original) {
|
|
if (_utilsCommon2['default'].isNumber(original.h) && _utilsCommon2['default'].isNumber(original.s) && _utilsCommon2['default'].isNumber(original.v)) {
|
|
return {
|
|
space: 'HSV',
|
|
h: original.h,
|
|
s: original.s,
|
|
v: original.v
|
|
};
|
|
}
|
|
return false;
|
|
},
|
|
|
|
write: function write(color) {
|
|
return {
|
|
h: color.h,
|
|
s: color.s,
|
|
v: color.v
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}];
|
|
|
|
var result = undefined;
|
|
var toReturn = undefined;
|
|
|
|
var interpret = function interpret() {
|
|
toReturn = false;
|
|
|
|
var original = arguments.length > 1 ? _utilsCommon2['default'].toArray(arguments) : arguments[0];
|
|
_utilsCommon2['default'].each(INTERPRETATIONS, function (family) {
|
|
if (family.litmus(original)) {
|
|
_utilsCommon2['default'].each(family.conversions, function (conversion, conversionName) {
|
|
result = conversion.read(original);
|
|
|
|
if (toReturn === false && result !== false) {
|
|
toReturn = result;
|
|
result.conversionName = conversionName;
|
|
result.conversion = conversion;
|
|
return _utilsCommon2['default'].BREAK;
|
|
}
|
|
});
|
|
|
|
return _utilsCommon2['default'].BREAK;
|
|
}
|
|
});
|
|
|
|
return toReturn;
|
|
};
|
|
|
|
exports['default'] = interpret;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 4 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
exports['default'] = function (color) {
|
|
if (color.a === 1 || _utilsCommon2['default'].isUndefined(color.a)) {
|
|
var s = color.hex.toString(16);
|
|
while (s.length < 6) {
|
|
s = '0' + s;
|
|
}
|
|
return '#' + s;
|
|
}
|
|
|
|
return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
|
|
};
|
|
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 5 */
|
|
/***/ function(module, exports) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
var ARR_EACH = Array.prototype.forEach;
|
|
var ARR_SLICE = Array.prototype.slice;
|
|
|
|
/**
|
|
* Band-aid methods for things that should be a lot easier in JavaScript.
|
|
* Implementation and structure inspired by underscore.js
|
|
* http://documentcloud.github.com/underscore/
|
|
*/
|
|
|
|
var Common = {
|
|
BREAK: {},
|
|
|
|
extend: function extend(target) {
|
|
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
|
for (var key in obj) {
|
|
if (!this.isUndefined(obj[key])) {
|
|
target[key] = obj[key];
|
|
}
|
|
}
|
|
}, this);
|
|
|
|
return target;
|
|
},
|
|
|
|
defaults: function defaults(target) {
|
|
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
|
for (var key in obj) {
|
|
if (this.isUndefined(target[key])) {
|
|
target[key] = obj[key];
|
|
}
|
|
}
|
|
}, this);
|
|
|
|
return target;
|
|
},
|
|
|
|
compose: function compose() {
|
|
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 each(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
|
|
var key = undefined;
|
|
var l = undefined;
|
|
for (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 defer(fnc) {
|
|
setTimeout(fnc, 0);
|
|
},
|
|
|
|
toArray: function toArray(obj) {
|
|
if (obj.toArray) return obj.toArray();
|
|
return ARR_SLICE.call(obj);
|
|
},
|
|
|
|
isUndefined: function isUndefined(obj) {
|
|
return obj === undefined;
|
|
},
|
|
|
|
isNull: function isNull(obj) {
|
|
return obj === null;
|
|
},
|
|
|
|
isNaN: (function (_isNaN) {
|
|
function isNaN(_x) {
|
|
return _isNaN.apply(this, arguments);
|
|
}
|
|
|
|
isNaN.toString = function () {
|
|
return _isNaN.toString();
|
|
};
|
|
|
|
return isNaN;
|
|
})(function (obj) {
|
|
return isNaN(obj);
|
|
}),
|
|
|
|
isArray: Array.isArray || function (obj) {
|
|
return obj.constructor === Array;
|
|
},
|
|
|
|
isObject: function isObject(obj) {
|
|
return obj === Object(obj);
|
|
},
|
|
|
|
isNumber: function isNumber(obj) {
|
|
return obj === obj + 0;
|
|
},
|
|
|
|
isString: function isString(obj) {
|
|
return obj === obj + '';
|
|
},
|
|
|
|
isBoolean: function isBoolean(obj) {
|
|
return obj === false || obj === true;
|
|
},
|
|
|
|
isFunction: function isFunction(obj) {
|
|
return Object.prototype.toString.call(obj) === '[object Function]';
|
|
}
|
|
|
|
};
|
|
|
|
exports['default'] = Common;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 6 */
|
|
/***/ function(module, exports) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
var tmpComponent = undefined;
|
|
|
|
var ColorMath = {
|
|
hsv_to_rgb: function hsv_to_rgb(h, s, v) {
|
|
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];
|
|
|
|
return {
|
|
r: c[0] * 255,
|
|
g: c[1] * 255,
|
|
b: c[2] * 255
|
|
};
|
|
},
|
|
|
|
rgb_to_hsv: function rgb_to_hsv(r, g, b) {
|
|
var min = Math.min(r, g, b);
|
|
var max = Math.max(r, g, b);
|
|
var delta = max - min;
|
|
var h = undefined;
|
|
var s = undefined;
|
|
|
|
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 rgb_to_hex(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 component_from_hex(hex, componentIndex) {
|
|
return hex >> componentIndex * 8 & 0xFF;
|
|
},
|
|
|
|
hex_with_component: function hex_with_component(hex, componentIndex, value) {
|
|
return value << (tmpComponent = componentIndex * 8) | hex & ~(0xFF << tmpComponent);
|
|
}
|
|
};
|
|
|
|
exports["default"] = ColorMath;
|
|
module.exports = exports["default"];
|
|
|
|
/***/ },
|
|
/* 7 */
|
|
/***/ function(module, exports) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
/**
|
|
* @class An "abstract" class that represents a given property of an object.
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
var Controller = (function () {
|
|
function Controller(object, property) {
|
|
_classCallCheck(this, Controller);
|
|
|
|
this.initialValue = object[property];
|
|
|
|
/**
|
|
* Those who extend this class will put their DOM elements in here.
|
|
* @type {DOMElement}
|
|
*/
|
|
this.domElement = document.createElement('div');
|
|
|
|
/**
|
|
* The object to manipulate
|
|
* @type {Object}
|
|
*/
|
|
this.object = object;
|
|
|
|
/**
|
|
* The name of the property to manipulate
|
|
* @type {String}
|
|
*/
|
|
this.property = property;
|
|
|
|
/**
|
|
* The function to be called on change.
|
|
* @type {Function}
|
|
* @ignore
|
|
*/
|
|
this.__onChange = undefined;
|
|
|
|
/**
|
|
* The function to be called on finishing change.
|
|
* @type {Function}
|
|
* @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 {Controller} this
|
|
*/
|
|
|
|
Controller.prototype.onChange = function onChange(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 {Controller} this
|
|
*/
|
|
|
|
Controller.prototype.onFinishChange = function onFinishChange(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>
|
|
*/
|
|
|
|
Controller.prototype.setValue = function 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>
|
|
*/
|
|
|
|
Controller.prototype.getValue = function 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 {Controller} this
|
|
*/
|
|
|
|
Controller.prototype.updateDisplay = function updateDisplay() {
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* @returns {Boolean} true if the value has deviated from initialValue
|
|
*/
|
|
|
|
Controller.prototype.isModified = function isModified() {
|
|
return this.initialValue !== this.getValue();
|
|
};
|
|
|
|
return Controller;
|
|
})();
|
|
|
|
exports['default'] = Controller;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 8 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _Controller2 = __webpack_require__(7);
|
|
|
|
var _Controller3 = _interopRequireDefault(_Controller2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
/**
|
|
* @class Provides a checkbox input to alter the boolean property of an object.
|
|
* @extends dat.controllers.Controller
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var BooleanController = (function (_Controller) {
|
|
_inherits(BooleanController, _Controller);
|
|
|
|
function BooleanController(object, property) {
|
|
_classCallCheck(this, BooleanController);
|
|
|
|
_Controller.call(this, object, property);
|
|
|
|
var _this = this;
|
|
this.__prev = this.getValue();
|
|
|
|
this.__checkbox = document.createElement('input');
|
|
this.__checkbox.setAttribute('type', 'checkbox');
|
|
|
|
function onChange() {
|
|
_this.setValue(!_this.__prev);
|
|
}
|
|
|
|
_domDom2['default'].bind(this.__checkbox, 'change', onChange, false);
|
|
|
|
this.domElement.appendChild(this.__checkbox);
|
|
|
|
// Match original value
|
|
this.updateDisplay();
|
|
}
|
|
|
|
BooleanController.prototype.setValue = function setValue(v) {
|
|
var toReturn = _Controller.prototype.setValue.call(this, v);
|
|
if (this.__onFinishChange) {
|
|
this.__onFinishChange.call(this, this.getValue());
|
|
}
|
|
this.__prev = this.getValue();
|
|
return toReturn;
|
|
};
|
|
|
|
BooleanController.prototype.updateDisplay = function updateDisplay() {
|
|
if (this.getValue() === true) {
|
|
this.__checkbox.setAttribute('checked', 'checked');
|
|
this.__checkbox.checked = true;
|
|
} else {
|
|
this.__checkbox.checked = false;
|
|
}
|
|
|
|
return _Controller.prototype.updateDisplay.call(this);
|
|
};
|
|
|
|
return BooleanController;
|
|
})(_Controller3['default']);
|
|
|
|
exports['default'] = BooleanController;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 9 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
var EVENT_MAP = {
|
|
'HTMLEvents': ['change'],
|
|
'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
|
|
'KeyboardEvents': ['keydown']
|
|
};
|
|
|
|
var EVENT_MAP_INV = {};
|
|
_utilsCommon2['default'].each(EVENT_MAP, function (v, k) {
|
|
_utilsCommon2['default'].each(v, function (e) {
|
|
EVENT_MAP_INV[e] = k;
|
|
});
|
|
});
|
|
|
|
var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
|
|
|
|
function cssValueToPixels(val) {
|
|
if (val === '0' || _utilsCommon2['default'].isUndefined(val)) {
|
|
return 0;
|
|
}
|
|
|
|
var match = val.match(CSS_VALUE_PIXELS);
|
|
|
|
if (!_utilsCommon2['default'].isNull(match)) {
|
|
return parseFloat(match[1]);
|
|
}
|
|
|
|
// TODO ...ems? %?
|
|
|
|
return 0;
|
|
}
|
|
|
|
/**
|
|
* @namespace
|
|
* @member dat.dom
|
|
*/
|
|
var dom = {
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
* @param selectable
|
|
*/
|
|
makeSelectable: function makeSelectable(elem, selectable) {
|
|
if (elem === undefined || elem.style === undefined) return;
|
|
|
|
elem.onselectstart = selectable ? function () {
|
|
return false;
|
|
} : function () {};
|
|
|
|
elem.style.MozUserSelect = selectable ? 'auto' : 'none';
|
|
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
|
|
elem.unselectable = selectable ? 'on' : 'off';
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
* @param horizontal
|
|
* @param vert
|
|
*/
|
|
makeFullscreen: function makeFullscreen(elem, hor, vert) {
|
|
var vertical = vert;
|
|
var horizontal = hor;
|
|
|
|
if (_utilsCommon2['default'].isUndefined(horizontal)) {
|
|
horizontal = true;
|
|
}
|
|
|
|
if (_utilsCommon2['default'].isUndefined(vertical)) {
|
|
vertical = true;
|
|
}
|
|
|
|
elem.style.position = 'absolute';
|
|
|
|
if (horizontal) {
|
|
elem.style.left = 0;
|
|
elem.style.right = 0;
|
|
}
|
|
if (vertical) {
|
|
elem.style.top = 0;
|
|
elem.style.bottom = 0;
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
* @param eventType
|
|
* @param params
|
|
*/
|
|
fakeEvent: function fakeEvent(elem, eventType, pars, aux) {
|
|
var params = pars || {};
|
|
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
|
|
_utilsCommon2['default'].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;
|
|
}
|
|
}
|
|
_utilsCommon2['default'].defaults(evt, aux);
|
|
elem.dispatchEvent(evt);
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
* @param event
|
|
* @param func
|
|
* @param bool
|
|
*/
|
|
bind: function bind(elem, event, func, newBool) {
|
|
var bool = newBool || false;
|
|
if (elem.addEventListener) {
|
|
elem.addEventListener(event, func, bool);
|
|
} else if (elem.attachEvent) {
|
|
elem.attachEvent('on' + event, func);
|
|
}
|
|
return dom;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
* @param event
|
|
* @param func
|
|
* @param bool
|
|
*/
|
|
unbind: function unbind(elem, event, func, newBool) {
|
|
var bool = newBool || false;
|
|
if (elem.removeEventListener) {
|
|
elem.removeEventListener(event, func, bool);
|
|
} else if (elem.detachEvent) {
|
|
elem.detachEvent('on' + event, func);
|
|
}
|
|
return dom;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
* @param className
|
|
*/
|
|
addClass: function addClass(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 removeClass(elem, className) {
|
|
if (className) {
|
|
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 hasClass(elem, className) {
|
|
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param elem
|
|
*/
|
|
getWidth: function getWidth(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 getHeight(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 el
|
|
*/
|
|
getOffset: function getOffset(el) {
|
|
var elem = el;
|
|
var offset = { left: 0, top: 0 };
|
|
if (elem.offsetParent) {
|
|
do {
|
|
offset.left += elem.offsetLeft;
|
|
offset.top += elem.offsetTop;
|
|
elem = elem.offsetParent;
|
|
} while (elem);
|
|
}
|
|
return offset;
|
|
},
|
|
|
|
// http://stackoverflow.com/posts/2684561/revisions
|
|
/**
|
|
*
|
|
* @param elem
|
|
*/
|
|
isActive: function isActive(elem) {
|
|
return elem === document.activeElement && (elem.type || elem.href);
|
|
}
|
|
|
|
};
|
|
|
|
exports['default'] = dom;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 10 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _Controller2 = __webpack_require__(7);
|
|
|
|
var _Controller3 = _interopRequireDefault(_Controller2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
/**
|
|
* @class Provides a select input to alter the property of an object, using a
|
|
* list of accepted values.
|
|
*
|
|
* @extends dat.controllers.Controller
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
* @param {Object|string[]} options A map of labels to acceptable values, or
|
|
* a list of acceptable string values.
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var OptionController = (function (_Controller) {
|
|
_inherits(OptionController, _Controller);
|
|
|
|
function OptionController(object, property, opts) {
|
|
_classCallCheck(this, OptionController);
|
|
|
|
_Controller.call(this, object, property);
|
|
|
|
var options = opts;
|
|
|
|
var _this = this;
|
|
|
|
/**
|
|
* The drop down menu
|
|
* @ignore
|
|
*/
|
|
this.__select = document.createElement('select');
|
|
|
|
if (_utilsCommon2['default'].isArray(options)) {
|
|
(function () {
|
|
var map = {};
|
|
_utilsCommon2['default'].each(options, function (element) {
|
|
map[element] = element;
|
|
});
|
|
options = map;
|
|
})();
|
|
}
|
|
|
|
_utilsCommon2['default'].each(options, function (value, key) {
|
|
var opt = document.createElement('option');
|
|
opt.innerHTML = key;
|
|
opt.setAttribute('value', value);
|
|
_this.__select.appendChild(opt);
|
|
});
|
|
|
|
// Acknowledge original value
|
|
this.updateDisplay();
|
|
|
|
_domDom2['default'].bind(this.__select, 'change', function () {
|
|
var desiredValue = this.options[this.selectedIndex].value;
|
|
_this.setValue(desiredValue);
|
|
});
|
|
|
|
this.domElement.appendChild(this.__select);
|
|
}
|
|
|
|
OptionController.prototype.setValue = function setValue(v) {
|
|
var toReturn = _Controller.prototype.setValue.call(this, v);
|
|
|
|
if (this.__onFinishChange) {
|
|
this.__onFinishChange.call(this, this.getValue());
|
|
}
|
|
return toReturn;
|
|
};
|
|
|
|
OptionController.prototype.updateDisplay = function updateDisplay() {
|
|
this.__select.value = this.getValue();
|
|
return _Controller.prototype.updateDisplay.call(this);
|
|
};
|
|
|
|
return OptionController;
|
|
})(_Controller3['default']);
|
|
|
|
exports['default'] = OptionController;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 11 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _Controller2 = __webpack_require__(7);
|
|
|
|
var _Controller3 = _interopRequireDefault(_Controller2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
/**
|
|
* @class Provides a text input to alter the string property of an object.
|
|
*
|
|
* @extends dat.controllers.Controller
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var StringController = (function (_Controller) {
|
|
_inherits(StringController, _Controller);
|
|
|
|
function StringController(object, property) {
|
|
_classCallCheck(this, StringController);
|
|
|
|
_Controller.call(this, object, property);
|
|
|
|
var _this = this;
|
|
|
|
this.__input = document.createElement('input');
|
|
this.__input.setAttribute('type', 'text');
|
|
|
|
_domDom2['default'].bind(this.__input, 'keyup', onChange);
|
|
_domDom2['default'].bind(this.__input, 'change', onChange);
|
|
_domDom2['default'].bind(this.__input, 'blur', onBlur);
|
|
_domDom2['default'].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.prototype.updateDisplay = function updateDisplay() {
|
|
// Stops the caret from moving on account of:
|
|
// keyup -> setValue -> updateDisplay
|
|
if (!_domDom2['default'].isActive(this.__input)) {
|
|
this.__input.value = this.getValue();
|
|
}
|
|
return _Controller.prototype.updateDisplay.call(this);
|
|
};
|
|
|
|
return StringController;
|
|
})(_Controller3['default']);
|
|
|
|
exports['default'] = StringController;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 12 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _Controller2 = __webpack_require__(7);
|
|
|
|
var _Controller3 = _interopRequireDefault(_Controller2);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
function numDecimals(x) {
|
|
var _x = x.toString();
|
|
if (_x.indexOf('.') > -1) {
|
|
return _x.length - _x.indexOf('.') - 1;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
/**
|
|
* @class Represents a given property of an object that is a number.
|
|
*
|
|
* @extends dat.controllers.Controller
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
* @param {Object} [params] Optional parameters
|
|
* @param {Number} [params.min] Minimum allowed value
|
|
* @param {Number} [params.max] Maximum allowed value
|
|
* @param {Number} [params.step] Increment by which to change value
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var NumberController = (function (_Controller) {
|
|
_inherits(NumberController, _Controller);
|
|
|
|
function NumberController(object, property, params) {
|
|
_classCallCheck(this, NumberController);
|
|
|
|
_Controller.call(this, object, property);
|
|
|
|
var _params = params || {};
|
|
|
|
this.__min = _params.min;
|
|
this.__max = _params.max;
|
|
this.__step = _params.step;
|
|
|
|
if (_utilsCommon2['default'].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;
|
|
}
|
|
} else {
|
|
this.__impliedStep = this.__step;
|
|
}
|
|
|
|
this.__precision = numDecimals(this.__impliedStep);
|
|
}
|
|
|
|
NumberController.prototype.setValue = function setValue(v) {
|
|
var _v = v;
|
|
|
|
if (this.__min !== undefined && _v < this.__min) {
|
|
_v = this.__min;
|
|
} else if (this.__max !== undefined && _v > this.__max) {
|
|
_v = this.__max;
|
|
}
|
|
|
|
if (this.__step !== undefined && _v % this.__step !== 0) {
|
|
_v = Math.round(_v / this.__step) * this.__step;
|
|
}
|
|
|
|
return _Controller.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
|
|
*/
|
|
|
|
NumberController.prototype.min = function 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
|
|
*/
|
|
|
|
NumberController.prototype.max = function 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
|
|
*/
|
|
|
|
NumberController.prototype.step = function step(v) {
|
|
this.__step = v;
|
|
this.__impliedStep = v;
|
|
this.__precision = numDecimals(v);
|
|
return this;
|
|
};
|
|
|
|
return NumberController;
|
|
})(_Controller3['default']);
|
|
|
|
exports['default'] = NumberController;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 13 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _NumberController2 = __webpack_require__(12);
|
|
|
|
var _NumberController3 = _interopRequireDefault(_NumberController2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
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.
|
|
*
|
|
* @extends dat.controllers.Controller
|
|
* @extends dat.controllers.NumberController
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
* @param {Object} [params] Optional parameters
|
|
* @param {Number} [params.min] Minimum allowed value
|
|
* @param {Number} [params.max] Maximum allowed value
|
|
* @param {Number} [params.step] Increment by which to change value
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var NumberControllerBox = (function (_NumberController) {
|
|
_inherits(NumberControllerBox, _NumberController);
|
|
|
|
function NumberControllerBox(object, property, params) {
|
|
_classCallCheck(this, NumberControllerBox);
|
|
|
|
_NumberController.call(this, object, property, params);
|
|
|
|
this.__truncationSuspended = false;
|
|
|
|
var _this = this;
|
|
|
|
/**
|
|
* {Number} Previous mouse y position
|
|
* @ignore
|
|
*/
|
|
var prevY = undefined;
|
|
|
|
this.__input = document.createElement('input');
|
|
this.__input.setAttribute('type', 'text');
|
|
|
|
// Makes it so manually specified values are not truncated.
|
|
|
|
_domDom2['default'].bind(this.__input, 'change', onChange);
|
|
_domDom2['default'].bind(this.__input, 'blur', onBlur);
|
|
_domDom2['default'].bind(this.__input, 'mousedown', onMouseDown);
|
|
_domDom2['default'].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 (!_utilsCommon2['default'].isNaN(attempted)) {
|
|
_this.setValue(attempted);
|
|
}
|
|
}
|
|
|
|
function onBlur() {
|
|
onChange();
|
|
if (_this.__onFinishChange) {
|
|
_this.__onFinishChange.call(_this, _this.getValue());
|
|
}
|
|
}
|
|
|
|
function onMouseDown(e) {
|
|
_domDom2['default'].bind(window, 'mousemove', onMouseDrag);
|
|
_domDom2['default'].bind(window, 'mouseup', onMouseUp);
|
|
prevY = e.clientY;
|
|
}
|
|
|
|
function onMouseDrag(e) {
|
|
var diff = prevY - e.clientY;
|
|
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
|
|
|
prevY = e.clientY;
|
|
}
|
|
|
|
function onMouseUp() {
|
|
_domDom2['default'].unbind(window, 'mousemove', onMouseDrag);
|
|
_domDom2['default'].unbind(window, 'mouseup', onMouseUp);
|
|
}
|
|
|
|
this.updateDisplay();
|
|
|
|
this.domElement.appendChild(this.__input);
|
|
}
|
|
|
|
NumberControllerBox.prototype.updateDisplay = function updateDisplay() {
|
|
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
|
return _NumberController.prototype.updateDisplay.call(this);
|
|
};
|
|
|
|
return NumberControllerBox;
|
|
})(_NumberController3['default']);
|
|
|
|
exports['default'] = NumberControllerBox;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 14 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _NumberController2 = __webpack_require__(12);
|
|
|
|
var _NumberController3 = _interopRequireDefault(_NumberController2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
var _utilsCss = __webpack_require__(15);
|
|
|
|
var _utilsCss2 = _interopRequireDefault(_utilsCss);
|
|
|
|
var _styleCssSassNumberControllerSliderScss = __webpack_require__(16);
|
|
|
|
var _styleCssSassNumberControllerSliderScss2 = _interopRequireDefault(_styleCssSassNumberControllerSliderScss);
|
|
|
|
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
|
|
* manipulate it. It should be noted that the slider element is made up of
|
|
* <code><div></code> tags, <strong>not</strong> the html5
|
|
* <code><slider></code> element.
|
|
*
|
|
* @extends dat.controllers.Controller
|
|
* @extends dat.controllers.NumberController
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
* @param {Number} minValue Minimum allowed value
|
|
* @param {Number} maxValue Maximum allowed value
|
|
* @param {Number} stepValue Increment by which to change value
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var NumberControllerSlider = (function (_NumberController) {
|
|
_inherits(NumberControllerSlider, _NumberController);
|
|
|
|
function NumberControllerSlider(object, property, min, max, step) {
|
|
_classCallCheck(this, NumberControllerSlider);
|
|
|
|
_NumberController.call(this, object, property, { min: min, max: max, step: step });
|
|
|
|
var _this = this;
|
|
|
|
this.__background = document.createElement('div');
|
|
this.__foreground = document.createElement('div');
|
|
|
|
_domDom2['default'].bind(this.__background, 'mousedown', onMouseDown);
|
|
|
|
_domDom2['default'].addClass(this.__background, 'slider');
|
|
_domDom2['default'].addClass(this.__foreground, 'slider-fg');
|
|
|
|
function onMouseDown(e) {
|
|
_domDom2['default'].bind(window, 'mousemove', onMouseDrag);
|
|
_domDom2['default'].bind(window, 'mouseup', onMouseUp);
|
|
|
|
onMouseDrag(e);
|
|
}
|
|
|
|
function onMouseDrag(e) {
|
|
e.preventDefault();
|
|
|
|
var offset = _domDom2['default'].getOffset(_this.__background);
|
|
var width = _domDom2['default'].getWidth(_this.__background);
|
|
|
|
_this.setValue(map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max));
|
|
|
|
return false;
|
|
}
|
|
|
|
function onMouseUp() {
|
|
_domDom2['default'].unbind(window, 'mousemove', onMouseDrag);
|
|
_domDom2['default'].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);
|
|
}
|
|
|
|
/**
|
|
* Injects default stylesheet for slider elements.
|
|
*/
|
|
|
|
NumberControllerSlider.prototype.updateDisplay = function updateDisplay() {
|
|
var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
|
|
this.__foreground.style.width = pct * 100 + '%';
|
|
return _NumberController.prototype.updateDisplay.call(this);
|
|
};
|
|
|
|
return NumberControllerSlider;
|
|
})(_NumberController3['default']);
|
|
|
|
NumberControllerSlider.useDefaultStyles = function () {
|
|
_utilsCss2['default'].inject(_styleCssSassNumberControllerSliderScss2['default']);
|
|
};
|
|
|
|
exports['default'] = NumberControllerSlider;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 15 */
|
|
/***/ function(module, exports) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
module.exports = {
|
|
load: function load(url, indoc) {
|
|
var doc = indoc || document;
|
|
var link = doc.createElement('link');
|
|
link.type = 'text/css';
|
|
link.rel = 'stylesheet';
|
|
link.href = url;
|
|
doc.getElementsByTagName('head')[0].appendChild(link);
|
|
},
|
|
|
|
inject: function inject(css, indoc) {
|
|
var doc = indoc || document;
|
|
var injected = document.createElement('style');
|
|
injected.type = 'text/css';
|
|
injected.innerHTML = css;
|
|
doc.getElementsByTagName('head')[0].appendChild(injected);
|
|
}
|
|
};
|
|
|
|
/***/ },
|
|
/* 16 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
// style-loader: Adds some css to the DOM by adding a <style> tag
|
|
|
|
// load the styles
|
|
var content = __webpack_require__(17);
|
|
if(typeof content === 'string') content = [[module.id, content, '']];
|
|
// add the styles to the DOM
|
|
var update = __webpack_require__(19)(content, {});
|
|
if(content.locals) module.exports = content.locals;
|
|
// Hot Module Replacement
|
|
if(false) {
|
|
// When the styles change, update the <style> tags
|
|
if(!content.locals) {
|
|
module.hot.accept("!!./../../../node_modules/css-loader/index.js!./../../../node_modules/sass-loader/index.js!./NumberControllerSlider.scss", function() {
|
|
var newContent = require("!!./../../../node_modules/css-loader/index.js!./../../../node_modules/sass-loader/index.js!./NumberControllerSlider.scss");
|
|
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
|
update(newContent);
|
|
});
|
|
}
|
|
// When the module is disposed, remove the <style> tags
|
|
module.hot.dispose(function() { update(); });
|
|
}
|
|
|
|
/***/ },
|
|
/* 17 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
exports = module.exports = __webpack_require__(18)();
|
|
// imports
|
|
|
|
|
|
// module
|
|
exports.push([module.id, "/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n.slider {\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);\n height: 1em;\n border-radius: 1em;\n background-color: #eee;\n padding: 0 0.5em;\n overflow: hidden; }\n\n.slider-fg {\n padding: 1px 0 2px 0;\n background-color: #aaa;\n height: 1em;\n margin-left: -0.5em;\n padding-right: 0.5em;\n border-radius: 1em 0 0 1em; }\n\n.slider-fg:after {\n display: inline-block;\n border-radius: 1em;\n background-color: #fff;\n border: 1px solid #aaa;\n content: '';\n float: right;\n margin-right: -1em;\n margin-top: -1px;\n height: 0.9em;\n width: 0.9em; }\n", ""]);
|
|
|
|
// exports
|
|
|
|
|
|
/***/ },
|
|
/* 18 */
|
|
/***/ function(module, exports) {
|
|
|
|
/*
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|
Author Tobias Koppers @sokra
|
|
*/
|
|
// css base code, injected by the css-loader
|
|
module.exports = function() {
|
|
var list = [];
|
|
|
|
// return the list of modules as css string
|
|
list.toString = function toString() {
|
|
var result = [];
|
|
for(var i = 0; i < this.length; i++) {
|
|
var item = this[i];
|
|
if(item[2]) {
|
|
result.push("@media " + item[2] + "{" + item[1] + "}");
|
|
} else {
|
|
result.push(item[1]);
|
|
}
|
|
}
|
|
return result.join("");
|
|
};
|
|
|
|
// import a list of modules into the list
|
|
list.i = function(modules, mediaQuery) {
|
|
if(typeof modules === "string")
|
|
modules = [[null, modules, ""]];
|
|
var alreadyImportedModules = {};
|
|
for(var i = 0; i < this.length; i++) {
|
|
var id = this[i][0];
|
|
if(typeof id === "number")
|
|
alreadyImportedModules[id] = true;
|
|
}
|
|
for(i = 0; i < modules.length; i++) {
|
|
var item = modules[i];
|
|
// skip already imported module
|
|
// this implementation is not 100% perfect for weird media query combinations
|
|
// when a module is imported multiple times with different media queries.
|
|
// I hope this will never occur (Hey this way we have smaller bundles)
|
|
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
|
if(mediaQuery && !item[2]) {
|
|
item[2] = mediaQuery;
|
|
} else if(mediaQuery) {
|
|
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
|
}
|
|
list.push(item);
|
|
}
|
|
}
|
|
};
|
|
return list;
|
|
};
|
|
|
|
|
|
/***/ },
|
|
/* 19 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/*
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|
Author Tobias Koppers @sokra
|
|
*/
|
|
var stylesInDom = {},
|
|
memoize = function(fn) {
|
|
var memo;
|
|
return function () {
|
|
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
|
|
return memo;
|
|
};
|
|
},
|
|
isOldIE = memoize(function() {
|
|
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
|
|
}),
|
|
getHeadElement = memoize(function () {
|
|
return document.head || document.getElementsByTagName("head")[0];
|
|
}),
|
|
singletonElement = null,
|
|
singletonCounter = 0;
|
|
|
|
module.exports = function(list, options) {
|
|
if(false) {
|
|
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
|
|
}
|
|
|
|
options = options || {};
|
|
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
|
// tags it will allow on a page
|
|
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
|
|
|
|
var styles = listToStyles(list);
|
|
addStylesToDom(styles, options);
|
|
|
|
return function update(newList) {
|
|
var mayRemove = [];
|
|
for(var i = 0; i < styles.length; i++) {
|
|
var item = styles[i];
|
|
var domStyle = stylesInDom[item.id];
|
|
domStyle.refs--;
|
|
mayRemove.push(domStyle);
|
|
}
|
|
if(newList) {
|
|
var newStyles = listToStyles(newList);
|
|
addStylesToDom(newStyles, options);
|
|
}
|
|
for(var i = 0; i < mayRemove.length; i++) {
|
|
var domStyle = mayRemove[i];
|
|
if(domStyle.refs === 0) {
|
|
for(var j = 0; j < domStyle.parts.length; j++)
|
|
domStyle.parts[j]();
|
|
delete stylesInDom[domStyle.id];
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
function addStylesToDom(styles, options) {
|
|
for(var i = 0; i < styles.length; i++) {
|
|
var item = styles[i];
|
|
var domStyle = stylesInDom[item.id];
|
|
if(domStyle) {
|
|
domStyle.refs++;
|
|
for(var j = 0; j < domStyle.parts.length; j++) {
|
|
domStyle.parts[j](item.parts[j]);
|
|
}
|
|
for(; j < item.parts.length; j++) {
|
|
domStyle.parts.push(addStyle(item.parts[j], options));
|
|
}
|
|
} else {
|
|
var parts = [];
|
|
for(var j = 0; j < item.parts.length; j++) {
|
|
parts.push(addStyle(item.parts[j], options));
|
|
}
|
|
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
|
|
}
|
|
}
|
|
}
|
|
|
|
function listToStyles(list) {
|
|
var styles = [];
|
|
var newStyles = {};
|
|
for(var i = 0; i < list.length; i++) {
|
|
var item = list[i];
|
|
var id = item[0];
|
|
var css = item[1];
|
|
var media = item[2];
|
|
var sourceMap = item[3];
|
|
var part = {css: css, media: media, sourceMap: sourceMap};
|
|
if(!newStyles[id])
|
|
styles.push(newStyles[id] = {id: id, parts: [part]});
|
|
else
|
|
newStyles[id].parts.push(part);
|
|
}
|
|
return styles;
|
|
}
|
|
|
|
function createStyleElement() {
|
|
var styleElement = document.createElement("style");
|
|
var head = getHeadElement();
|
|
styleElement.type = "text/css";
|
|
head.appendChild(styleElement);
|
|
return styleElement;
|
|
}
|
|
|
|
function createLinkElement() {
|
|
var linkElement = document.createElement("link");
|
|
var head = getHeadElement();
|
|
linkElement.rel = "stylesheet";
|
|
head.appendChild(linkElement);
|
|
return linkElement;
|
|
}
|
|
|
|
function addStyle(obj, options) {
|
|
var styleElement, update, remove;
|
|
|
|
if (options.singleton) {
|
|
var styleIndex = singletonCounter++;
|
|
styleElement = singletonElement || (singletonElement = createStyleElement());
|
|
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
|
|
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
|
|
} else if(obj.sourceMap &&
|
|
typeof URL === "function" &&
|
|
typeof URL.createObjectURL === "function" &&
|
|
typeof URL.revokeObjectURL === "function" &&
|
|
typeof Blob === "function" &&
|
|
typeof btoa === "function") {
|
|
styleElement = createLinkElement();
|
|
update = updateLink.bind(null, styleElement);
|
|
remove = function() {
|
|
styleElement.parentNode.removeChild(styleElement);
|
|
if(styleElement.href)
|
|
URL.revokeObjectURL(styleElement.href);
|
|
};
|
|
} else {
|
|
styleElement = createStyleElement();
|
|
update = applyToTag.bind(null, styleElement);
|
|
remove = function() {
|
|
styleElement.parentNode.removeChild(styleElement);
|
|
};
|
|
}
|
|
|
|
update(obj);
|
|
|
|
return function updateStyle(newObj) {
|
|
if(newObj) {
|
|
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
|
|
return;
|
|
update(obj = newObj);
|
|
} else {
|
|
remove();
|
|
}
|
|
};
|
|
}
|
|
|
|
var replaceText = (function () {
|
|
var textStore = [];
|
|
|
|
return function (index, replacement) {
|
|
textStore[index] = replacement;
|
|
return textStore.filter(Boolean).join('\n');
|
|
};
|
|
})();
|
|
|
|
function applyToSingletonTag(styleElement, index, remove, obj) {
|
|
var css = remove ? "" : obj.css;
|
|
|
|
if (styleElement.styleSheet) {
|
|
styleElement.styleSheet.cssText = replaceText(index, css);
|
|
} else {
|
|
var cssNode = document.createTextNode(css);
|
|
var childNodes = styleElement.childNodes;
|
|
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
|
|
if (childNodes.length) {
|
|
styleElement.insertBefore(cssNode, childNodes[index]);
|
|
} else {
|
|
styleElement.appendChild(cssNode);
|
|
}
|
|
}
|
|
}
|
|
|
|
function applyToTag(styleElement, obj) {
|
|
var css = obj.css;
|
|
var media = obj.media;
|
|
var sourceMap = obj.sourceMap;
|
|
|
|
if(media) {
|
|
styleElement.setAttribute("media", media)
|
|
}
|
|
|
|
if(styleElement.styleSheet) {
|
|
styleElement.styleSheet.cssText = css;
|
|
} else {
|
|
while(styleElement.firstChild) {
|
|
styleElement.removeChild(styleElement.firstChild);
|
|
}
|
|
styleElement.appendChild(document.createTextNode(css));
|
|
}
|
|
}
|
|
|
|
function updateLink(linkElement, obj) {
|
|
var css = obj.css;
|
|
var media = obj.media;
|
|
var sourceMap = obj.sourceMap;
|
|
|
|
if(sourceMap) {
|
|
// http://stackoverflow.com/a/26603875
|
|
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
|
|
}
|
|
|
|
var blob = new Blob([css], { type: "text/css" });
|
|
|
|
var oldSrc = linkElement.href;
|
|
|
|
linkElement.href = URL.createObjectURL(blob);
|
|
|
|
if(oldSrc)
|
|
URL.revokeObjectURL(oldSrc);
|
|
}
|
|
|
|
|
|
/***/ },
|
|
/* 20 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _Controller2 = __webpack_require__(7);
|
|
|
|
var _Controller3 = _interopRequireDefault(_Controller2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
/**
|
|
* @class Provides a GUI interface to fire a specified method, a property of an object.
|
|
*
|
|
* @extends dat.controllers.Controller
|
|
*
|
|
* @param {Object} object The object to be manipulated
|
|
* @param {string} property The name of the property to be manipulated
|
|
*
|
|
* @member dat.controllers
|
|
*/
|
|
|
|
var FunctionController = (function (_Controller) {
|
|
_inherits(FunctionController, _Controller);
|
|
|
|
function FunctionController(object, property, text) {
|
|
_classCallCheck(this, FunctionController);
|
|
|
|
_Controller.call(this, object, property);
|
|
|
|
var _this = this;
|
|
|
|
this.__button = document.createElement('div');
|
|
this.__button.innerHTML = text === undefined ? 'Fire' : text;
|
|
|
|
_domDom2['default'].bind(this.__button, 'click', function (e) {
|
|
e.preventDefault();
|
|
_this.fire();
|
|
return false;
|
|
});
|
|
|
|
_domDom2['default'].addClass(this.__button, 'button');
|
|
|
|
this.domElement.appendChild(this.__button);
|
|
}
|
|
|
|
FunctionController.prototype.fire = function fire() {
|
|
if (this.__onChange) {
|
|
this.__onChange.call(this);
|
|
}
|
|
this.getValue().call(this.object);
|
|
if (this.__onFinishChange) {
|
|
this.__onFinishChange.call(this, this.getValue());
|
|
}
|
|
};
|
|
|
|
return FunctionController;
|
|
})(_Controller3['default']);
|
|
|
|
exports['default'] = FunctionController;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 21 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
|
|
var _Controller2 = __webpack_require__(7);
|
|
|
|
var _Controller3 = _interopRequireDefault(_Controller2);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
var _colorColor = __webpack_require__(2);
|
|
|
|
var _colorColor2 = _interopRequireDefault(_colorColor);
|
|
|
|
var _colorInterpret = __webpack_require__(3);
|
|
|
|
var _colorInterpret2 = _interopRequireDefault(_colorInterpret);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
var ColorController = (function (_Controller) {
|
|
_inherits(ColorController, _Controller);
|
|
|
|
function ColorController(object, property) {
|
|
_classCallCheck(this, ColorController);
|
|
|
|
_Controller.call(this, object, property);
|
|
|
|
this.__color = new _colorColor2['default'](this.getValue());
|
|
this.__temp = new _colorColor2['default'](0);
|
|
|
|
var _this = this;
|
|
|
|
this.domElement = document.createElement('div');
|
|
|
|
_domDom2['default'].makeSelectable(this.domElement, false);
|
|
|
|
this.__selector = document.createElement('div');
|
|
this.__selector.className = 'selector';
|
|
|
|
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.__hue_knob = document.createElement('div');
|
|
this.__hue_knob.className = 'hue-knob';
|
|
|
|
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 ';
|
|
|
|
_domDom2['default'].bind(this.__input, 'keydown', function (e) {
|
|
if (e.keyCode === 13) {
|
|
// on enter
|
|
onBlur.call(this);
|
|
}
|
|
});
|
|
|
|
_domDom2['default'].bind(this.__input, 'blur', onBlur);
|
|
|
|
_domDom2['default'].bind(this.__selector, 'mousedown', function () /* e */{
|
|
_domDom2['default'].addClass(this, 'drag').bind(window, 'mouseup', function () /* e */{
|
|
_domDom2['default'].removeClass(_this.__selector, 'drag');
|
|
});
|
|
});
|
|
|
|
var valueField = document.createElement('div');
|
|
|
|
_utilsCommon2['default'].extend(this.__selector.style, {
|
|
width: '122px',
|
|
height: '102px',
|
|
padding: '3px',
|
|
backgroundColor: '#222',
|
|
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
|
|
});
|
|
|
|
_utilsCommon2['default'].extend(this.__field_knob.style, {
|
|
position: 'absolute',
|
|
width: '12px',
|
|
height: '12px',
|
|
border: this.__field_knob_border + (this.__color.v < 0.5 ? '#fff' : '#000'),
|
|
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
|
borderRadius: '12px',
|
|
zIndex: 1
|
|
});
|
|
|
|
_utilsCommon2['default'].extend(this.__hue_knob.style, {
|
|
position: 'absolute',
|
|
width: '15px',
|
|
height: '2px',
|
|
borderRight: '4px solid #fff',
|
|
zIndex: 1
|
|
});
|
|
|
|
_utilsCommon2['default'].extend(this.__saturation_field.style, {
|
|
width: '100px',
|
|
height: '100px',
|
|
border: '1px solid #555',
|
|
marginRight: '3px',
|
|
display: 'inline-block',
|
|
cursor: 'pointer'
|
|
});
|
|
|
|
_utilsCommon2['default'].extend(valueField.style, {
|
|
width: '100%',
|
|
height: '100%',
|
|
background: 'none'
|
|
});
|
|
|
|
linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
|
|
|
|
_utilsCommon2['default'].extend(this.__hue_field.style, {
|
|
width: '15px',
|
|
height: '100px',
|
|
display: 'inline-block',
|
|
border: '1px solid #555',
|
|
cursor: 'ns-resize'
|
|
});
|
|
|
|
hueGradient(this.__hue_field);
|
|
|
|
_utilsCommon2['default'].extend(this.__input.style, {
|
|
outline: 'none',
|
|
// width: '120px',
|
|
textAlign: 'center',
|
|
// padding: '4px',
|
|
// marginBottom: '6px',
|
|
color: '#fff',
|
|
border: 0,
|
|
fontWeight: 'bold',
|
|
textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)'
|
|
});
|
|
|
|
_domDom2['default'].bind(this.__saturation_field, 'mousedown', fieldDown);
|
|
_domDom2['default'].bind(this.__field_knob, 'mousedown', fieldDown);
|
|
|
|
_domDom2['default'].bind(this.__hue_field, 'mousedown', function (e) {
|
|
setH(e);
|
|
_domDom2['default'].bind(window, 'mousemove', setH);
|
|
_domDom2['default'].bind(window, 'mouseup', unbindH);
|
|
});
|
|
|
|
function fieldDown(e) {
|
|
setSV(e);
|
|
// document.body.style.cursor = 'none';
|
|
_domDom2['default'].bind(window, 'mousemove', setSV);
|
|
_domDom2['default'].bind(window, 'mouseup', unbindSV);
|
|
}
|
|
|
|
function unbindSV() {
|
|
_domDom2['default'].unbind(window, 'mousemove', setSV);
|
|
_domDom2['default'].unbind(window, 'mouseup', unbindSV);
|
|
// document.body.style.cursor = 'default';
|
|
}
|
|
|
|
function onBlur() {
|
|
var i = _colorInterpret2['default'](this.value);
|
|
if (i !== false) {
|
|
_this.__color.__state = i;
|
|
_this.setValue(_this.__color.toOriginal());
|
|
} else {
|
|
this.value = _this.__color.toString();
|
|
}
|
|
}
|
|
|
|
function unbindH() {
|
|
_domDom2['default'].unbind(window, 'mousemove', setH);
|
|
_domDom2['default'].unbind(window, 'mouseup', unbindH);
|
|
}
|
|
|
|
this.__saturation_field.appendChild(valueField);
|
|
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 = _domDom2['default'].getWidth(_this.__saturation_field);
|
|
var o = _domDom2['default'].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 = _domDom2['default'].getHeight(_this.__hue_field);
|
|
var o = _domDom2['default'].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.prototype.updateDisplay = function updateDisplay() {
|
|
var i = _colorInterpret2['default'](this.getValue());
|
|
|
|
if (i !== false) {
|
|
var mismatch = false;
|
|
|
|
// Check for mismatch on the interpreted value.
|
|
|
|
_utilsCommon2['default'].each(_colorColor2['default'].COMPONENTS, function (component) {
|
|
if (!_utilsCommon2['default'].isUndefined(i[component]) && !_utilsCommon2['default'].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) {
|
|
_utilsCommon2['default'].extend(this.__color.__state, i);
|
|
}
|
|
}
|
|
|
|
_utilsCommon2['default'].extend(this.__temp.__state, this.__color.__state);
|
|
|
|
this.__temp.a = 1;
|
|
|
|
var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0;
|
|
var _flip = 255 - flip;
|
|
|
|
_utilsCommon2['default'].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());
|
|
|
|
_utilsCommon2['default'].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)'
|
|
});
|
|
};
|
|
|
|
return ColorController;
|
|
})(_Controller3['default']);
|
|
|
|
var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
|
|
|
|
function linearGradient(elem, x, a, b) {
|
|
elem.style.background = '';
|
|
_utilsCommon2['default'].each(vendors, function (vendor) {
|
|
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
|
|
});
|
|
}
|
|
|
|
function hueGradient(elem) {
|
|
elem.style.background = '';
|
|
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
|
|
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
|
elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
|
elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
|
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
|
}
|
|
|
|
exports['default'] = ColorController;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 22 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var _utilsCss = __webpack_require__(15);
|
|
|
|
var _utilsCss2 = _interopRequireDefault(_utilsCss);
|
|
|
|
var _htmlSaveDialogueHtml = __webpack_require__(23);
|
|
|
|
var _htmlSaveDialogueHtml2 = _interopRequireDefault(_htmlSaveDialogueHtml);
|
|
|
|
var _styleCssSassStyleScss = __webpack_require__(24);
|
|
|
|
var _styleCssSassStyleScss2 = _interopRequireDefault(_styleCssSassStyleScss);
|
|
|
|
var _controllersControllerFactory = __webpack_require__(26);
|
|
|
|
var _controllersControllerFactory2 = _interopRequireDefault(_controllersControllerFactory);
|
|
|
|
var _controllersController = __webpack_require__(7);
|
|
|
|
var _controllersController2 = _interopRequireDefault(_controllersController);
|
|
|
|
var _controllersBooleanController = __webpack_require__(8);
|
|
|
|
var _controllersBooleanController2 = _interopRequireDefault(_controllersBooleanController);
|
|
|
|
var _controllersFunctionController = __webpack_require__(20);
|
|
|
|
var _controllersFunctionController2 = _interopRequireDefault(_controllersFunctionController);
|
|
|
|
var _controllersNumberControllerBox = __webpack_require__(13);
|
|
|
|
var _controllersNumberControllerBox2 = _interopRequireDefault(_controllersNumberControllerBox);
|
|
|
|
var _controllersNumberControllerSlider = __webpack_require__(14);
|
|
|
|
var _controllersNumberControllerSlider2 = _interopRequireDefault(_controllersNumberControllerSlider);
|
|
|
|
var _controllersColorController = __webpack_require__(21);
|
|
|
|
var _controllersColorController2 = _interopRequireDefault(_controllersColorController);
|
|
|
|
var _utilsRequestAnimationFrame = __webpack_require__(27);
|
|
|
|
var _utilsRequestAnimationFrame2 = _interopRequireDefault(_utilsRequestAnimationFrame);
|
|
|
|
var _domCenteredDiv = __webpack_require__(28);
|
|
|
|
var _domCenteredDiv2 = _interopRequireDefault(_domCenteredDiv);
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
_utilsCss2['default'].inject(_styleCssSassStyleScss2['default']);
|
|
|
|
/** Outer-most className for GUI's */
|
|
var CSS_NAMESPACE = 'dg';
|
|
|
|
var HIDE_KEY_CODE = 72;
|
|
|
|
/** The only value shared between the JS and SCSS. Use caution. */
|
|
var CLOSE_BUTTON_HEIGHT = 20;
|
|
|
|
var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
|
|
|
|
var SUPPORTS_LOCAL_STORAGE = (function () {
|
|
try {
|
|
return 'localStorage' in window && window.localStorage !== null;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
})();
|
|
|
|
var SAVE_DIALOGUE = undefined;
|
|
|
|
/** Have we yet to create an autoPlace GUI? */
|
|
var autoPlaceVirgin = true;
|
|
|
|
/** Fixed position div that auto place GUI's go inside */
|
|
var autoPlaceContainer = undefined;
|
|
|
|
/** Are we hiding the GUI's ? */
|
|
var hide = false;
|
|
|
|
/** GUI's which should be hidden */
|
|
var hideableGuis = [];
|
|
|
|
/**
|
|
* A lightweight controller library for JavaScript. It allows you to easily
|
|
* manipulate variables and fire functions on the fly.
|
|
* @class
|
|
*
|
|
* @member dat.gui
|
|
*
|
|
* @param {Object} [params]
|
|
* @param {String} [params.name] The name of this GUI.
|
|
* @param {Object} [params.load] JSON object representing the saved state of
|
|
* this GUI.
|
|
* @param {Boolean} [params.auto=true]
|
|
* @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.
|
|
* @param {Boolean} [params.closed] If true, starts closed
|
|
*/
|
|
var GUI = function GUI(pars) {
|
|
var _this = this;
|
|
|
|
var params = pars || {};
|
|
|
|
/**
|
|
* Outermost DOM Element
|
|
* @type DOMElement
|
|
*/
|
|
this.domElement = document.createElement('div');
|
|
this.__ul = document.createElement('ul');
|
|
this.domElement.appendChild(this.__ul);
|
|
|
|
_domDom2['default'].addClass(this.domElement, CSS_NAMESPACE);
|
|
|
|
/**
|
|
* Nested GUI's by name
|
|
* @ignore
|
|
*/
|
|
this.__folders = {};
|
|
|
|
this.__controllers = [];
|
|
|
|
/**
|
|
* List of objects I'm remembering for save, only used in top level GUI
|
|
* @ignore
|
|
*/
|
|
this.__rememberedObjects = [];
|
|
|
|
/**
|
|
* Maps the index of remembered objects to a map of controllers, only used
|
|
* in top level GUI.
|
|
*
|
|
* @private
|
|
* @ignore
|
|
*
|
|
* @example
|
|
* [
|
|
* {
|
|
* propertyName: Controller,
|
|
* anotherPropertyName: Controller
|
|
* },
|
|
* {
|
|
* propertyName: Controller
|
|
* }
|
|
* ]
|
|
*/
|
|
this.__rememberedObjectIndecesToControllers = [];
|
|
|
|
this.__listening = [];
|
|
|
|
// Default parameters
|
|
params = _utilsCommon2['default'].defaults(params, {
|
|
autoPlace: true,
|
|
width: GUI.DEFAULT_WIDTH
|
|
});
|
|
|
|
params = _utilsCommon2['default'].defaults(params, {
|
|
resizable: params.autoPlace,
|
|
hideable: params.autoPlace
|
|
});
|
|
|
|
if (!_utilsCommon2['default'].isUndefined(params.load)) {
|
|
// Explicit preset
|
|
if (params.preset) {
|
|
params.load.preset = params.preset;
|
|
}
|
|
} else {
|
|
params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME };
|
|
}
|
|
|
|
if (_utilsCommon2['default'].isUndefined(params.parent) && params.hideable) {
|
|
hideableGuis.push(this);
|
|
}
|
|
|
|
// Only root level GUI's are resizable.
|
|
params.resizable = _utilsCommon2['default'].isUndefined(params.parent) && params.resizable;
|
|
|
|
if (params.autoPlace && _utilsCommon2['default'].isUndefined(params.scrollable)) {
|
|
params.scrollable = true;
|
|
}
|
|
// params.scrollable = common.isUndefined(params.parent) && params.scrollable === true;
|
|
|
|
// Not part of params because I don't want people passing this in via
|
|
// constructor. Should be a 'remembered' value.
|
|
var useLocalStorage = SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true';
|
|
|
|
var saveToLocalStorage = undefined;
|
|
|
|
Object.defineProperties(this,
|
|
/** @lends dat.gui.GUI.prototype */
|
|
{
|
|
/**
|
|
* The parent <code>GUI</code>
|
|
* @type dat.gui.GUI
|
|
*/
|
|
parent: {
|
|
get: function get() {
|
|
return params.parent;
|
|
}
|
|
},
|
|
|
|
scrollable: {
|
|
get: function get() {
|
|
return params.scrollable;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles <code>GUI</code>'s element placement for you
|
|
* @type Boolean
|
|
*/
|
|
autoPlace: {
|
|
get: function get() {
|
|
return params.autoPlace;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The identifier for a set of saved values
|
|
* @type String
|
|
*/
|
|
preset: {
|
|
get: function get() {
|
|
if (_this.parent) {
|
|
return _this.getRoot().preset;
|
|
}
|
|
|
|
return params.load.preset;
|
|
},
|
|
|
|
set: function set(v) {
|
|
if (_this.parent) {
|
|
_this.getRoot().preset = v;
|
|
} else {
|
|
params.load.preset = v;
|
|
}
|
|
setPresetSelectIndex(this);
|
|
_this.revert();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The width of <code>GUI</code> element
|
|
* @type Number
|
|
*/
|
|
width: {
|
|
get: function get() {
|
|
return params.width;
|
|
},
|
|
set: function set(v) {
|
|
params.width = v;
|
|
setWidth(_this, v);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The name of <code>GUI</code>. Used for folders. i.e
|
|
* a folder's name
|
|
* @type String
|
|
*/
|
|
name: {
|
|
get: function get() {
|
|
return params.name;
|
|
},
|
|
set: function set(v) {
|
|
// TODO Check for collisions among sibling folders
|
|
params.name = v;
|
|
if (titleRowName) {
|
|
titleRowName.innerHTML = params.name;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Whether the <code>GUI</code> is collapsed or not
|
|
* @type Boolean
|
|
*/
|
|
closed: {
|
|
get: function get() {
|
|
return params.closed;
|
|
},
|
|
set: function set(v) {
|
|
params.closed = v;
|
|
if (params.closed) {
|
|
_domDom2['default'].addClass(_this.__ul, GUI.CLASS_CLOSED);
|
|
} else {
|
|
_domDom2['default'].removeClass(_this.__ul, GUI.CLASS_CLOSED);
|
|
}
|
|
// For browsers that aren't going to respect the CSS transition,
|
|
// Lets just check our height against the window height right off
|
|
// the bat.
|
|
this.onResize();
|
|
|
|
if (_this.__closeButton) {
|
|
_this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Contains all presets
|
|
* @type Object
|
|
*/
|
|
load: {
|
|
get: function get() {
|
|
return params.load;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Determines whether or not to use <a href="https://developer.mozilla.org/en/DOM/Storage#localStorage">localStorage</a> as the means for
|
|
* <code>remember</code>ing
|
|
* @type Boolean
|
|
*/
|
|
useLocalStorage: {
|
|
|
|
get: function get() {
|
|
return useLocalStorage;
|
|
},
|
|
set: function set(bool) {
|
|
if (SUPPORTS_LOCAL_STORAGE) {
|
|
useLocalStorage = bool;
|
|
if (bool) {
|
|
_domDom2['default'].bind(window, 'unload', saveToLocalStorage);
|
|
} else {
|
|
_domDom2['default'].unbind(window, 'unload', saveToLocalStorage);
|
|
}
|
|
localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Are we a root level GUI?
|
|
if (_utilsCommon2['default'].isUndefined(params.parent)) {
|
|
params.closed = false;
|
|
|
|
_domDom2['default'].addClass(this.domElement, GUI.CLASS_MAIN);
|
|
_domDom2['default'].makeSelectable(this.domElement, false);
|
|
|
|
// Are we supposed to be loading locally?
|
|
if (SUPPORTS_LOCAL_STORAGE) {
|
|
if (useLocalStorage) {
|
|
_this.useLocalStorage = true;
|
|
|
|
var savedGui = localStorage.getItem(getLocalStorageHash(this, 'gui'));
|
|
|
|
if (savedGui) {
|
|
params.load = JSON.parse(savedGui);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.__closeButton = document.createElement('div');
|
|
this.__closeButton.innerHTML = GUI.TEXT_CLOSED;
|
|
_domDom2['default'].addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
|
|
this.domElement.appendChild(this.__closeButton);
|
|
|
|
_domDom2['default'].bind(this.__closeButton, 'click', function () {
|
|
_this.closed = !_this.closed;
|
|
});
|
|
// Oh, you're a nested GUI!
|
|
} else {
|
|
if (params.closed === undefined) {
|
|
params.closed = true;
|
|
}
|
|
|
|
var _titleRowName = document.createTextNode(params.name);
|
|
_domDom2['default'].addClass(_titleRowName, 'controller-name');
|
|
|
|
var titleRow = addRow(_this, _titleRowName);
|
|
|
|
var onClickTitle = function onClickTitle(e) {
|
|
e.preventDefault();
|
|
_this.closed = !_this.closed;
|
|
return false;
|
|
};
|
|
|
|
_domDom2['default'].addClass(this.__ul, GUI.CLASS_CLOSED);
|
|
|
|
_domDom2['default'].addClass(titleRow, 'title');
|
|
_domDom2['default'].bind(titleRow, 'click', onClickTitle);
|
|
|
|
if (!params.closed) {
|
|
this.closed = false;
|
|
}
|
|
}
|
|
|
|
if (params.autoPlace) {
|
|
if (_utilsCommon2['default'].isUndefined(params.parent)) {
|
|
if (autoPlaceVirgin) {
|
|
autoPlaceContainer = document.createElement('div');
|
|
_domDom2['default'].addClass(autoPlaceContainer, CSS_NAMESPACE);
|
|
_domDom2['default'].addClass(autoPlaceContainer, GUI.CLASS_AUTO_PLACE_CONTAINER);
|
|
document.body.appendChild(autoPlaceContainer);
|
|
autoPlaceVirgin = false;
|
|
}
|
|
|
|
// Put it in the dom for you.
|
|
autoPlaceContainer.appendChild(this.domElement);
|
|
|
|
// Apply the auto styles
|
|
_domDom2['default'].addClass(this.domElement, GUI.CLASS_AUTO_PLACE);
|
|
}
|
|
|
|
// Make it not elastic.
|
|
if (!this.parent) {
|
|
setWidth(_this, params.width);
|
|
}
|
|
}
|
|
|
|
_domDom2['default'].bind(window, 'resize', function () {
|
|
_this.onResize();
|
|
});
|
|
_domDom2['default'].bind(this.__ul, 'webkitTransitionEnd', function () {
|
|
_this.onResize();
|
|
});
|
|
_domDom2['default'].bind(this.__ul, 'transitionend', function () {
|
|
_this.onResize();
|
|
});
|
|
_domDom2['default'].bind(this.__ul, 'oTransitionEnd', function () {
|
|
_this.onResize();
|
|
});
|
|
this.onResize();
|
|
|
|
if (params.resizable) {
|
|
addResizeHandle(this);
|
|
}
|
|
|
|
saveToLocalStorage = function () {
|
|
if (SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(_this, 'isLocal')) === 'true') {
|
|
localStorage.setItem(getLocalStorageHash(_this, 'gui'), JSON.stringify(_this.getSaveObject()));
|
|
}
|
|
};
|
|
|
|
// expose this method publicly
|
|
this.saveToLocalStorageIfPossible = saveToLocalStorage;
|
|
|
|
function resetWidth() {
|
|
var root = _this.getRoot();
|
|
root.width += 1;
|
|
_utilsCommon2['default'].defer(function () {
|
|
root.width -= 1;
|
|
});
|
|
}
|
|
|
|
if (!params.parent) {
|
|
resetWidth();
|
|
}
|
|
};
|
|
|
|
GUI.toggleHide = function () {
|
|
hide = !hide;
|
|
_utilsCommon2['default'].each(hideableGuis, function (gui) {
|
|
gui.domElement.style.zIndex = hide ? -999 : 999;
|
|
gui.domElement.style.opacity = hide ? 0 : 1;
|
|
});
|
|
};
|
|
|
|
GUI.CLASS_AUTO_PLACE = 'a';
|
|
GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';
|
|
GUI.CLASS_MAIN = 'main';
|
|
GUI.CLASS_CONTROLLER_ROW = 'cr';
|
|
GUI.CLASS_TOO_TALL = 'taller-than-window';
|
|
GUI.CLASS_CLOSED = 'closed';
|
|
GUI.CLASS_CLOSE_BUTTON = 'close-button';
|
|
GUI.CLASS_DRAG = 'drag';
|
|
|
|
GUI.DEFAULT_WIDTH = 245;
|
|
GUI.TEXT_CLOSED = 'Close Controls';
|
|
GUI.TEXT_OPEN = 'Open Controls';
|
|
|
|
_domDom2['default'].bind(window, 'keydown', function (e) {
|
|
if (document.activeElement.type !== 'text' && (e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE)) {
|
|
GUI.toggleHide();
|
|
}
|
|
}, false);
|
|
|
|
_utilsCommon2['default'].extend(GUI.prototype,
|
|
|
|
/** @lends dat.gui.GUI */
|
|
{
|
|
|
|
/**
|
|
* @param object
|
|
* @param property
|
|
* @returns {dat.controllers.Controller} The new controller that was added.
|
|
* @instance
|
|
*/
|
|
add: (function (_add) {
|
|
function add(_x, _x2) {
|
|
return _add.apply(this, arguments);
|
|
}
|
|
|
|
add.toString = function () {
|
|
return _add.toString();
|
|
};
|
|
|
|
return add;
|
|
})(function (object, property) {
|
|
return add(this, object, property, {
|
|
factoryArgs: Array.prototype.slice.call(arguments, 2)
|
|
});
|
|
}),
|
|
|
|
/**
|
|
* @param object
|
|
* @param property
|
|
* @returns {dat.controllers.ColorController} The new controller that was added.
|
|
* @instance
|
|
*/
|
|
addColor: function addColor(object, property) {
|
|
return add(this, object, property, {
|
|
color: true
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @param controller
|
|
* @instance
|
|
*/
|
|
remove: function remove(controller) {
|
|
// TODO listening?
|
|
this.__ul.removeChild(controller.__li);
|
|
this.__controllers.splice(this.__controllers.indexOf(controller), 1);
|
|
var _this = this;
|
|
_utilsCommon2['default'].defer(function () {
|
|
_this.onResize();
|
|
});
|
|
},
|
|
|
|
destroy: function destroy() {
|
|
if (this.autoPlace) {
|
|
autoPlaceContainer.removeChild(this.domElement);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param name
|
|
* @returns {dat.gui.GUI} The new folder.
|
|
* @throws {Error} if this GUI already has a folder by the specified
|
|
* name
|
|
* @instance
|
|
*/
|
|
addFolder: function addFolder(name) {
|
|
// We have to prevent collisions on names in order to have a key
|
|
// by which to remember saved values
|
|
if (this.__folders[name] !== undefined) {
|
|
throw new Error('You already have a folder in this GUI by the' + ' name "' + name + '"');
|
|
}
|
|
|
|
var newGuiParams = { name: name, parent: this };
|
|
|
|
// We need to pass down the autoPlace trait so that we can
|
|
// attach event listeners to open/close folder actions to
|
|
// ensure that a scrollbar appears if the window is too short.
|
|
newGuiParams.autoPlace = this.autoPlace;
|
|
|
|
// Do we have saved appearance data for this folder?
|
|
|
|
if (this.load && // Anything loaded?
|
|
this.load.folders && // Was my parent a dead-end?
|
|
this.load.folders[name]) {
|
|
// Did daddy remember me?
|
|
|
|
// Start me closed if I was closed
|
|
newGuiParams.closed = this.load.folders[name].closed;
|
|
|
|
// Pass down the loaded data
|
|
newGuiParams.load = this.load.folders[name];
|
|
}
|
|
|
|
var gui = new GUI(newGuiParams);
|
|
this.__folders[name] = gui;
|
|
|
|
var li = addRow(this, gui.domElement);
|
|
_domDom2['default'].addClass(li, 'folder');
|
|
return gui;
|
|
},
|
|
|
|
open: function open() {
|
|
this.closed = false;
|
|
},
|
|
|
|
close: function close() {
|
|
this.closed = true;
|
|
},
|
|
|
|
onResize: function onResize() {
|
|
var root = this.getRoot();
|
|
if (root.scrollable) {
|
|
var _top = _domDom2['default'].getOffset(root.__ul).top;
|
|
var h = 0;
|
|
|
|
_utilsCommon2['default'].each(root.__ul.childNodes, function (node) {
|
|
if (!(root.autoPlace && node === root.__save_row)) {
|
|
h += _domDom2['default'].getHeight(node);
|
|
}
|
|
});
|
|
|
|
if (window.innerHeight - _top - CLOSE_BUTTON_HEIGHT < h) {
|
|
_domDom2['default'].addClass(root.domElement, GUI.CLASS_TOO_TALL);
|
|
root.__ul.style.height = window.innerHeight - _top - CLOSE_BUTTON_HEIGHT + 'px';
|
|
} else {
|
|
_domDom2['default'].removeClass(root.domElement, GUI.CLASS_TOO_TALL);
|
|
root.__ul.style.height = 'auto';
|
|
}
|
|
}
|
|
|
|
if (root.__resize_handle) {
|
|
_utilsCommon2['default'].defer(function () {
|
|
root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';
|
|
});
|
|
}
|
|
|
|
if (root.__closeButton) {
|
|
root.__closeButton.style.width = root.width + 'px';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Mark objects for saving. The order of these objects cannot change as
|
|
* the GUI grows. When remembering new objects, append them to the end
|
|
* of the list.
|
|
*
|
|
* @param {Object...} objects
|
|
* @throws {Error} if not called on a top level GUI.
|
|
* @instance
|
|
*/
|
|
remember: function remember() {
|
|
if (_utilsCommon2['default'].isUndefined(SAVE_DIALOGUE)) {
|
|
SAVE_DIALOGUE = new _domCenteredDiv2['default']();
|
|
SAVE_DIALOGUE.domElement.innerHTML = _htmlSaveDialogueHtml2['default'];
|
|
}
|
|
|
|
if (this.parent) {
|
|
throw new Error('You can only call remember on a top level GUI.');
|
|
}
|
|
|
|
var _this = this;
|
|
|
|
_utilsCommon2['default'].each(Array.prototype.slice.call(arguments), function (object) {
|
|
if (_this.__rememberedObjects.length === 0) {
|
|
addSaveMenu(_this);
|
|
}
|
|
if (_this.__rememberedObjects.indexOf(object) === -1) {
|
|
_this.__rememberedObjects.push(object);
|
|
}
|
|
});
|
|
|
|
if (this.autoPlace) {
|
|
// Set save row width
|
|
setWidth(this, this.width);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI.
|
|
* @instance
|
|
*/
|
|
getRoot: function getRoot() {
|
|
var gui = this;
|
|
while (gui.parent) {
|
|
gui = gui.parent;
|
|
}
|
|
return gui;
|
|
},
|
|
|
|
/**
|
|
* @returns {Object} a JSON object representing the current state of
|
|
* this GUI as well as its remembered properties.
|
|
* @instance
|
|
*/
|
|
getSaveObject: function getSaveObject() {
|
|
var toReturn = this.load;
|
|
toReturn.closed = this.closed;
|
|
|
|
// Am I remembering any values?
|
|
if (this.__rememberedObjects.length > 0) {
|
|
toReturn.preset = this.preset;
|
|
|
|
if (!toReturn.remembered) {
|
|
toReturn.remembered = {};
|
|
}
|
|
|
|
toReturn.remembered[this.preset] = getCurrentPreset(this);
|
|
}
|
|
|
|
toReturn.folders = {};
|
|
_utilsCommon2['default'].each(this.__folders, function (element, key) {
|
|
toReturn.folders[key] = element.getSaveObject();
|
|
});
|
|
|
|
return toReturn;
|
|
},
|
|
|
|
save: function save() {
|
|
if (!this.load.remembered) {
|
|
this.load.remembered = {};
|
|
}
|
|
|
|
this.load.remembered[this.preset] = getCurrentPreset(this);
|
|
markPresetModified(this, false);
|
|
this.saveToLocalStorageIfPossible();
|
|
},
|
|
|
|
saveAs: function saveAs(presetName) {
|
|
if (!this.load.remembered) {
|
|
// Retain default values upon first save
|
|
this.load.remembered = {};
|
|
this.load.remembered[DEFAULT_DEFAULT_PRESET_NAME] = getCurrentPreset(this, true);
|
|
}
|
|
|
|
this.load.remembered[presetName] = getCurrentPreset(this);
|
|
this.preset = presetName;
|
|
addPresetOption(this, presetName, true);
|
|
this.saveToLocalStorageIfPossible();
|
|
},
|
|
|
|
revert: function revert(gui) {
|
|
_utilsCommon2['default'].each(this.__controllers, function (controller) {
|
|
// Make revert work on Default.
|
|
if (!this.getRoot().load.remembered) {
|
|
controller.setValue(controller.initialValue);
|
|
} else {
|
|
recallSavedValue(gui || this.getRoot(), controller);
|
|
}
|
|
}, this);
|
|
|
|
_utilsCommon2['default'].each(this.__folders, function (folder) {
|
|
folder.revert(folder);
|
|
});
|
|
|
|
if (!gui) {
|
|
markPresetModified(this.getRoot(), false);
|
|
}
|
|
},
|
|
|
|
listen: function listen(controller) {
|
|
var init = this.__listening.length === 0;
|
|
this.__listening.push(controller);
|
|
if (init) {
|
|
updateDisplays(this.__listening);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Add a row to the end of the GUI or before another row.
|
|
*
|
|
* @param gui
|
|
* @param [newDom] If specified, inserts the dom content in the new row
|
|
* @param [liBefore] If specified, places the new row before another row
|
|
*/
|
|
function addRow(gui, newDom, liBefore) {
|
|
var li = document.createElement('li');
|
|
if (newDom) {
|
|
li.appendChild(newDom);
|
|
}
|
|
|
|
if (liBefore) {
|
|
gui.__ul.insertBefore(li, params.before);
|
|
} else {
|
|
gui.__ul.appendChild(li);
|
|
}
|
|
gui.onResize();
|
|
return li;
|
|
}
|
|
|
|
function markPresetModified(gui, modified) {
|
|
var opt = gui.__preset_select[gui.__preset_select.selectedIndex];
|
|
|
|
// console.log('mark', modified, opt);
|
|
if (modified) {
|
|
opt.innerHTML = opt.value + '*';
|
|
} else {
|
|
opt.innerHTML = opt.value;
|
|
}
|
|
}
|
|
|
|
function augmentController(gui, li, controller) {
|
|
controller.__li = li;
|
|
controller.__gui = gui;
|
|
|
|
_utilsCommon2['default'].extend(controller, {
|
|
options: function options(_options) {
|
|
if (arguments.length > 1) {
|
|
controller.remove();
|
|
|
|
return add(gui, controller.object, controller.property, {
|
|
before: controller.__li.nextElementSibling,
|
|
factoryArgs: [_utilsCommon2['default'].toArray(arguments)]
|
|
});
|
|
}
|
|
|
|
if (_utilsCommon2['default'].isArray(_options) || _utilsCommon2['default'].isObject(_options)) {
|
|
controller.remove();
|
|
|
|
return add(gui, controller.object, controller.property, {
|
|
before: controller.__li.nextElementSibling,
|
|
factoryArgs: [_options]
|
|
});
|
|
}
|
|
},
|
|
|
|
name: function name(v) {
|
|
controller.__li.firstElementChild.firstElementChild.innerHTML = v;
|
|
return controller;
|
|
},
|
|
|
|
listen: function listen() {
|
|
controller.__gui.listen(controller);
|
|
return controller;
|
|
},
|
|
|
|
remove: function remove() {
|
|
controller.__gui.remove(controller);
|
|
return controller;
|
|
}
|
|
});
|
|
|
|
// All sliders should be accompanied by a box.
|
|
if (controller instanceof _controllersNumberControllerSlider2['default']) {
|
|
(function () {
|
|
var box = new _controllersNumberControllerBox2['default'](controller.object, controller.property, { min: controller.__min, max: controller.__max, step: controller.__step });
|
|
|
|
_utilsCommon2['default'].each(['updateDisplay', 'onChange', 'onFinishChange'], function (method) {
|
|
var pc = controller[method];
|
|
var pb = box[method];
|
|
controller[method] = box[method] = function () {
|
|
var args = Array.prototype.slice.call(arguments);
|
|
pc.apply(controller, args);
|
|
return pb.apply(box, args);
|
|
};
|
|
});
|
|
|
|
_domDom2['default'].addClass(li, 'has-slider');
|
|
controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild);
|
|
})();
|
|
} else if (controller instanceof _controllersNumberControllerBox2['default']) {
|
|
var r = function r(returned) {
|
|
// Have we defined both boundaries?
|
|
if (_utilsCommon2['default'].isNumber(controller.__min) && _utilsCommon2['default'].isNumber(controller.__max)) {
|
|
// Well, then lets just replace this with a slider.
|
|
controller.remove();
|
|
return add(gui, controller.object, controller.property, {
|
|
before: controller.__li.nextElementSibling,
|
|
factoryArgs: [controller.__min, controller.__max, controller.__step]
|
|
});
|
|
}
|
|
|
|
return returned;
|
|
};
|
|
|
|
controller.min = _utilsCommon2['default'].compose(r, controller.min);
|
|
controller.max = _utilsCommon2['default'].compose(r, controller.max);
|
|
} else if (controller instanceof _controllersBooleanController2['default']) {
|
|
_domDom2['default'].bind(li, 'click', function () {
|
|
_domDom2['default'].fakeEvent(controller.__checkbox, 'click');
|
|
});
|
|
|
|
_domDom2['default'].bind(controller.__checkbox, 'click', function (e) {
|
|
e.stopPropagation(); // Prevents double-toggle
|
|
});
|
|
} else if (controller instanceof _controllersFunctionController2['default']) {
|
|
_domDom2['default'].bind(li, 'click', function () {
|
|
_domDom2['default'].fakeEvent(controller.__button, 'click');
|
|
});
|
|
|
|
_domDom2['default'].bind(li, 'mouseover', function () {
|
|
_domDom2['default'].addClass(controller.__button, 'hover');
|
|
});
|
|
|
|
_domDom2['default'].bind(li, 'mouseout', function () {
|
|
_domDom2['default'].removeClass(controller.__button, 'hover');
|
|
});
|
|
} else if (controller instanceof _controllersColorController2['default']) {
|
|
_domDom2['default'].addClass(li, 'color');
|
|
controller.updateDisplay = _utilsCommon2['default'].compose(function (val) {
|
|
li.style.borderLeftColor = controller.__color.toString();
|
|
return val;
|
|
}, controller.updateDisplay);
|
|
|
|
controller.updateDisplay();
|
|
}
|
|
|
|
controller.setValue = _utilsCommon2['default'].compose(function (val) {
|
|
if (gui.getRoot().__preset_select && controller.isModified()) {
|
|
markPresetModified(gui.getRoot(), true);
|
|
}
|
|
|
|
return val;
|
|
}, controller.setValue);
|
|
}
|
|
|
|
function recallSavedValue(gui, controller) {
|
|
// Find the topmost GUI, that's where remembered objects live.
|
|
var root = gui.getRoot();
|
|
|
|
// Does the object we're controlling match anything we've been told to
|
|
// remember?
|
|
var matchedIndex = root.__rememberedObjects.indexOf(controller.object);
|
|
|
|
// Why yes, it does!
|
|
if (matchedIndex !== -1) {
|
|
// Let me fetch a map of controllers for thcommon.isObject.
|
|
var controllerMap = root.__rememberedObjectIndecesToControllers[matchedIndex];
|
|
|
|
// Ohp, I believe this is the first controller we've created for this
|
|
// object. Lets make the map fresh.
|
|
if (controllerMap === undefined) {
|
|
controllerMap = {};
|
|
root.__rememberedObjectIndecesToControllers[matchedIndex] = controllerMap;
|
|
}
|
|
|
|
// Keep track of this controller
|
|
controllerMap[controller.property] = controller;
|
|
|
|
// Okay, now have we saved any values for this controller?
|
|
if (root.load && root.load.remembered) {
|
|
var presetMap = root.load.remembered;
|
|
|
|
// Which preset are we trying to load?
|
|
var preset = undefined;
|
|
|
|
if (presetMap[gui.preset]) {
|
|
preset = presetMap[gui.preset];
|
|
} else if (presetMap[DEFAULT_DEFAULT_PRESET_NAME]) {
|
|
// Uhh, you can have the default instead?
|
|
preset = presetMap[DEFAULT_DEFAULT_PRESET_NAME];
|
|
} else {
|
|
// Nada.
|
|
return;
|
|
}
|
|
|
|
// Did the loaded object remember thcommon.isObject? && Did we remember this particular property?
|
|
if (preset[matchedIndex] && preset[matchedIndex][controller.property] !== undefined) {
|
|
// We did remember something for this guy ...
|
|
var value = preset[matchedIndex][controller.property];
|
|
|
|
// And that's what it is.
|
|
controller.initialValue = value;
|
|
controller.setValue(value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function add(gui, object, property, params) {
|
|
if (object[property] === undefined) {
|
|
throw new Error('Object "' + object + '" has no property "' + property + '"');
|
|
}
|
|
|
|
var controller = undefined;
|
|
|
|
if (params.color) {
|
|
controller = new _controllersColorController2['default'](object, property);
|
|
} else {
|
|
var factoryArgs = [object, property].concat(params.factoryArgs);
|
|
controller = _controllersControllerFactory2['default'].apply(gui, factoryArgs);
|
|
}
|
|
|
|
if (params.before instanceof _controllersController2['default']) {
|
|
params.before = params.before.__li;
|
|
}
|
|
|
|
recallSavedValue(gui, controller);
|
|
|
|
_domDom2['default'].addClass(controller.domElement, 'c');
|
|
|
|
var name = document.createElement('span');
|
|
_domDom2['default'].addClass(name, 'property-name');
|
|
name.innerHTML = controller.property;
|
|
|
|
var container = document.createElement('div');
|
|
container.appendChild(name);
|
|
container.appendChild(controller.domElement);
|
|
|
|
var li = addRow(gui, container, params.before);
|
|
|
|
_domDom2['default'].addClass(li, GUI.CLASS_CONTROLLER_ROW);
|
|
if (controller instanceof _controllersColorController2['default']) {
|
|
_domDom2['default'].addClass(li, 'color');
|
|
} else {
|
|
_domDom2['default'].addClass(li, typeof controller.getValue());
|
|
}
|
|
|
|
augmentController(gui, li, controller);
|
|
|
|
gui.__controllers.push(controller);
|
|
|
|
return controller;
|
|
}
|
|
|
|
function getLocalStorageHash(gui, key) {
|
|
// TODO how does this deal with multiple GUI's?
|
|
return document.location.href + '.' + key;
|
|
}
|
|
|
|
function addPresetOption(gui, name, setSelected) {
|
|
var opt = document.createElement('option');
|
|
opt.innerHTML = name;
|
|
opt.value = name;
|
|
gui.__preset_select.appendChild(opt);
|
|
if (setSelected) {
|
|
gui.__preset_select.selectedIndex = gui.__preset_select.length - 1;
|
|
}
|
|
}
|
|
|
|
function showHideExplain(gui, explain) {
|
|
explain.style.display = gui.useLocalStorage ? 'block' : 'none';
|
|
}
|
|
|
|
function addSaveMenu(gui) {
|
|
var div = gui.__save_row = document.createElement('li');
|
|
|
|
_domDom2['default'].addClass(gui.domElement, 'has-save');
|
|
|
|
gui.__ul.insertBefore(div, gui.__ul.firstChild);
|
|
|
|
_domDom2['default'].addClass(div, 'save-row');
|
|
|
|
var gears = document.createElement('span');
|
|
gears.innerHTML = ' ';
|
|
_domDom2['default'].addClass(gears, 'button gears');
|
|
|
|
// TODO replace with FunctionController
|
|
var button = document.createElement('span');
|
|
button.innerHTML = 'Save';
|
|
_domDom2['default'].addClass(button, 'button');
|
|
_domDom2['default'].addClass(button, 'save');
|
|
|
|
var button2 = document.createElement('span');
|
|
button2.innerHTML = 'New';
|
|
_domDom2['default'].addClass(button2, 'button');
|
|
_domDom2['default'].addClass(button2, 'save-as');
|
|
|
|
var button3 = document.createElement('span');
|
|
button3.innerHTML = 'Revert';
|
|
_domDom2['default'].addClass(button3, 'button');
|
|
_domDom2['default'].addClass(button3, 'revert');
|
|
|
|
var select = gui.__preset_select = document.createElement('select');
|
|
|
|
if (gui.load && gui.load.remembered) {
|
|
_utilsCommon2['default'].each(gui.load.remembered, function (value, key) {
|
|
addPresetOption(gui, key, key === gui.preset);
|
|
});
|
|
} else {
|
|
addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false);
|
|
}
|
|
|
|
_domDom2['default'].bind(select, 'change', function () {
|
|
for (var index = 0; index < gui.__preset_select.length; index++) {
|
|
gui.__preset_select[index].innerHTML = gui.__preset_select[index].value;
|
|
}
|
|
|
|
gui.preset = this.value;
|
|
});
|
|
|
|
div.appendChild(select);
|
|
div.appendChild(gears);
|
|
div.appendChild(button);
|
|
div.appendChild(button2);
|
|
div.appendChild(button3);
|
|
|
|
if (SUPPORTS_LOCAL_STORAGE) {
|
|
(function () {
|
|
var explain = document.getElementById('dg-local-explain');
|
|
var localStorageCheckBox = document.getElementById('dg-local-storage');
|
|
var saveLocally = document.getElementById('dg-save-locally');
|
|
|
|
saveLocally.style.display = 'block';
|
|
|
|
if (localStorage.getItem(getLocalStorageHash(gui, 'isLocal')) === 'true') {
|
|
localStorageCheckBox.setAttribute('checked', 'checked');
|
|
}
|
|
|
|
showHideExplain(gui, explain);
|
|
|
|
// TODO: Use a boolean controller, fool!
|
|
_domDom2['default'].bind(localStorageCheckBox, 'change', function () {
|
|
gui.useLocalStorage = !gui.useLocalStorage;
|
|
showHideExplain(gui, explain);
|
|
});
|
|
})();
|
|
}
|
|
|
|
var newConstructorTextArea = document.getElementById('dg-new-constructor');
|
|
|
|
_domDom2['default'].bind(newConstructorTextArea, 'keydown', function (e) {
|
|
if (e.metaKey && (e.which === 67 || e.keyCode === 67)) {
|
|
SAVE_DIALOGUE.hide();
|
|
}
|
|
});
|
|
|
|
_domDom2['default'].bind(gears, 'click', function () {
|
|
newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2);
|
|
SAVE_DIALOGUE.show();
|
|
newConstructorTextArea.focus();
|
|
newConstructorTextArea.select();
|
|
});
|
|
|
|
_domDom2['default'].bind(button, 'click', function () {
|
|
gui.save();
|
|
});
|
|
|
|
_domDom2['default'].bind(button2, 'click', function () {
|
|
var presetName = prompt('Enter a new preset name.');
|
|
if (presetName) {
|
|
gui.saveAs(presetName);
|
|
}
|
|
});
|
|
|
|
_domDom2['default'].bind(button3, 'click', function () {
|
|
gui.revert();
|
|
});
|
|
|
|
// div.appendChild(button2);
|
|
}
|
|
|
|
function addResizeHandle(gui) {
|
|
var pmouseX = undefined;
|
|
|
|
gui.__resize_handle = document.createElement('div');
|
|
|
|
_utilsCommon2['default'].extend(gui.__resize_handle.style, {
|
|
|
|
width: '6px',
|
|
marginLeft: '-3px',
|
|
height: '200px',
|
|
cursor: 'ew-resize',
|
|
position: 'absolute'
|
|
// border: '1px solid blue'
|
|
|
|
});
|
|
|
|
function drag(e) {
|
|
e.preventDefault();
|
|
|
|
gui.width += pmouseX - e.clientX;
|
|
gui.onResize();
|
|
pmouseX = e.clientX;
|
|
|
|
return false;
|
|
}
|
|
|
|
function dragStop() {
|
|
_domDom2['default'].removeClass(gui.__closeButton, GUI.CLASS_DRAG);
|
|
_domDom2['default'].unbind(window, 'mousemove', drag);
|
|
_domDom2['default'].unbind(window, 'mouseup', dragStop);
|
|
}
|
|
|
|
function dragStart(e) {
|
|
e.preventDefault();
|
|
|
|
pmouseX = e.clientX;
|
|
|
|
_domDom2['default'].addClass(gui.__closeButton, GUI.CLASS_DRAG);
|
|
_domDom2['default'].bind(window, 'mousemove', drag);
|
|
_domDom2['default'].bind(window, 'mouseup', dragStop);
|
|
|
|
return false;
|
|
}
|
|
|
|
_domDom2['default'].bind(gui.__resize_handle, 'mousedown', dragStart);
|
|
_domDom2['default'].bind(gui.__closeButton, 'mousedown', dragStart);
|
|
|
|
gui.domElement.insertBefore(gui.__resize_handle, gui.domElement.firstElementChild);
|
|
}
|
|
|
|
function setWidth(gui, w) {
|
|
gui.domElement.style.width = w + 'px';
|
|
// Auto placed save-rows are position fixed, so we have to
|
|
// set the width manually if we want it to bleed to the edge
|
|
if (gui.__save_row && gui.autoPlace) {
|
|
gui.__save_row.style.width = w + 'px';
|
|
}
|
|
if (gui.__closeButton) {
|
|
gui.__closeButton.style.width = w + 'px';
|
|
}
|
|
}
|
|
|
|
function getCurrentPreset(gui, useInitialValues) {
|
|
var toReturn = {};
|
|
|
|
// For each object I'm remembering
|
|
_utilsCommon2['default'].each(gui.__rememberedObjects, function (val, index) {
|
|
var savedValues = {};
|
|
|
|
// The controllers I've made for thcommon.isObject by property
|
|
var controllerMap = gui.__rememberedObjectIndecesToControllers[index];
|
|
|
|
// Remember each value for each property
|
|
_utilsCommon2['default'].each(controllerMap, function (controller, property) {
|
|
savedValues[property] = useInitialValues ? controller.initialValue : controller.getValue();
|
|
});
|
|
|
|
// Save the values for thcommon.isObject
|
|
toReturn[index] = savedValues;
|
|
});
|
|
|
|
return toReturn;
|
|
}
|
|
|
|
function setPresetSelectIndex(gui) {
|
|
for (var index = 0; index < gui.__preset_select.length; index++) {
|
|
if (gui.__preset_select[index].value === gui.preset) {
|
|
gui.__preset_select.selectedIndex = index;
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateDisplays(controllerArray) {
|
|
if (controllerArray.length !== 0) {
|
|
_utilsRequestAnimationFrame2['default'](function () {
|
|
updateDisplays(controllerArray);
|
|
});
|
|
}
|
|
|
|
_utilsCommon2['default'].each(controllerArray, function (c) {
|
|
c.updateDisplay();
|
|
});
|
|
}
|
|
|
|
module.exports = GUI;
|
|
|
|
/***/ },
|
|
/* 23 */
|
|
/***/ function(module, exports) {
|
|
|
|
module.exports = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n <textarea id=\"dg-new-constructor\"></textarea>\n\n <div id=\"dg-save-locally\">\n\n <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n values to <code>localStorage</code> on exit.\n\n <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n override those passed to <code>dat.GUI</code>'s constructor. This makes it\n easier to work incrementally, but <code>localStorage</code> is fragile,\n and your friends may not see the same values you do.\n\n </div>\n\n </div>\n\n</div>";
|
|
|
|
/***/ },
|
|
/* 24 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
// style-loader: Adds some css to the DOM by adding a <style> tag
|
|
|
|
// load the styles
|
|
var content = __webpack_require__(25);
|
|
if(typeof content === 'string') content = [[module.id, content, '']];
|
|
// add the styles to the DOM
|
|
var update = __webpack_require__(19)(content, {});
|
|
if(content.locals) module.exports = content.locals;
|
|
// Hot Module Replacement
|
|
if(false) {
|
|
// When the styles change, update the <style> tags
|
|
if(!content.locals) {
|
|
module.hot.accept("!!./../../../node_modules/css-loader/index.js!./../../../node_modules/sass-loader/index.js!./style.scss", function() {
|
|
var newContent = require("!!./../../../node_modules/css-loader/index.js!./../../../node_modules/sass-loader/index.js!./style.scss");
|
|
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
|
update(newContent);
|
|
});
|
|
}
|
|
// When the module is disposed, remove the <style> tags
|
|
module.hot.dispose(function() { update(); });
|
|
}
|
|
|
|
/***/ },
|
|
/* 25 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
exports = module.exports = __webpack_require__(18)();
|
|
// imports
|
|
|
|
|
|
// module
|
|
exports.push([module.id, ".dg {\n /** Clear list styles */\n /* Auto-place container */\n /* Auto-placed GUI's */\n /* Line items that don't contain folders. */\n /** Folder names */\n /** Hides closed items */\n /** Controller row */\n /** Name-half (left) */\n /** Controller-half (right) */\n /** Controller placement */\n /** Shorter number boxes when slider is present. */\n /** Ensure the entire boolean and function row shows a hand */ }\n .dg ul {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n clear: both; }\n .dg.ac {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n z-index: 0; }\n .dg:not(.ac) .main {\n /** Exclude mains in ac so that we don't hide close button */\n overflow: hidden; }\n .dg.main {\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear; }\n .dg.main.taller-than-window {\n overflow-y: auto; }\n .dg.main.taller-than-window .close-button {\n opacity: 1;\n /* TODO, these are style notes */\n margin-top: -1px;\n border-top: 1px solid #2c2c2c; }\n .dg.main ul.closed .close-button {\n opacity: 1 !important; }\n .dg.main:hover .close-button,\n .dg.main .close-button.drag {\n opacity: 1; }\n .dg.main .close-button {\n /*opacity: 0;*/\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear;\n border: 0;\n position: absolute;\n line-height: 19px;\n height: 20px;\n /* TODO, these are style notes */\n cursor: pointer;\n text-align: center;\n background-color: #000; }\n .dg.main .close-button:hover {\n background-color: #111; }\n .dg.a {\n float: right;\n margin-right: 15px;\n overflow-x: hidden; }\n .dg.a.has-save > ul {\n margin-top: 27px; }\n .dg.a.has-save > ul.closed {\n margin-top: 0; }\n .dg.a .save-row {\n position: fixed;\n top: 0;\n z-index: 1002; }\n .dg li {\n -webkit-transition: height 0.1s ease-out;\n -o-transition: height 0.1s ease-out;\n -moz-transition: height 0.1s ease-out;\n transition: height 0.1s ease-out; }\n .dg li:not(.folder) {\n cursor: auto;\n height: 27px;\n line-height: 27px;\n overflow: hidden;\n padding: 0 4px 0 5px; }\n .dg li.folder {\n padding: 0;\n border-left: 4px solid transparent; }\n .dg li.title {\n cursor: pointer;\n margin-left: -4px; }\n .dg .closed li:not(.title),\n .dg .closed ul li,\n .dg .closed ul li > * {\n height: 0;\n overflow: hidden;\n border: 0; }\n .dg .cr {\n clear: both;\n padding-left: 3px;\n height: 27px; }\n .dg .property-name {\n cursor: default;\n float: left;\n clear: left;\n width: 40%;\n overflow: hidden;\n text-overflow: ellipsis; }\n .dg .c {\n float: left;\n width: 60%; }\n .dg .c input[type=text] {\n border: 0;\n margin-top: 4px;\n padding: 3px;\n width: 100%;\n float: right; }\n .dg .has-slider input[type=text] {\n width: 30%;\n /*display: none;*/\n margin-left: 0; }\n .dg .slider {\n float: left;\n width: 66%;\n margin-left: -5px;\n margin-right: 0;\n height: 19px;\n margin-top: 4px; }\n .dg .slider-fg {\n height: 100%; }\n .dg .c input[type=checkbox] {\n margin-top: 9px; }\n .dg .c select {\n margin-top: 5px; }\n .dg .cr.function,\n .dg .cr.function .property-name, .dg .cr.function *,\n .dg .cr.boolean,\n .dg .cr.boolean * {\n cursor: pointer; }\n .dg .selector {\n display: none;\n position: absolute;\n margin-left: -9px;\n margin-top: 23px;\n z-index: 10; }\n .dg .c:hover .selector,\n .dg .selector.drag {\n display: block; }\n .dg li.save-row {\n padding: 0; }\n .dg li.save-row .button {\n display: inline-block;\n padding: 0px 6px; }\n .dg.dialogue {\n background-color: #222;\n width: 460px;\n padding: 15px;\n font-size: 13px;\n line-height: 15px; }\n\n/* TODO Separate style and structure */\n#dg-new-constructor {\n padding: 10px;\n color: #222;\n font-family: Monaco, monospace;\n font-size: 10px;\n border: 0;\n resize: none;\n box-shadow: inset 1px 1px 1px #888;\n word-wrap: break-word;\n margin: 12px 0;\n display: block;\n width: 440px;\n overflow-y: scroll;\n height: 100px;\n position: relative; }\n\n#dg-local-explain {\n display: none;\n font-size: 11px;\n line-height: 17px;\n border-radius: 3px;\n background-color: #333;\n padding: 8px;\n margin-top: 10px; }\n #dg-local-explain code {\n font-size: 10px; }\n\n#dat-gui-save-locally {\n display: none; }\n\n/** Main type */\n.dg {\n color: #eee;\n font: 11px 'Lucida Grande', sans-serif;\n text-shadow: 0 -1px 0 #111;\n /** Auto place */\n /* Controller row, <li> */\n /** Controllers */ }\n .dg.main {\n /** Scrollbar */ }\n .dg.main::-webkit-scrollbar {\n width: 5px;\n background: #1a1a1a; }\n .dg.main::-webkit-scrollbar-corner {\n height: 0;\n display: none; }\n .dg.main::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: #676767; }\n .dg li:not(.folder) {\n background: #1a1a1a;\n border-bottom: 1px solid #2c2c2c; }\n .dg li.save-row {\n line-height: 25px;\n background: #dad5cb;\n border: 0; }\n .dg li.save-row select {\n margin-left: 5px;\n width: 108px; }\n .dg li.save-row .button {\n margin-left: 5px;\n margin-top: 1px;\n border-radius: 2px;\n font-size: 9px;\n line-height: 7px;\n padding: 4px 4px 5px 4px;\n background: #c5bdad;\n color: #fff;\n text-shadow: 0 1px 0 #b0a58f;\n box-shadow: 0 -1px 0 #b0a58f;\n cursor: pointer; }\n .dg li.save-row .button.gears {\n background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;\n height: 7px;\n width: 8px; }\n .dg li.save-row .button:hover {\n background-color: #bab19e;\n box-shadow: 0 -1px 0 #b0a58f; }\n .dg li.folder {\n border-bottom: 0; }\n .dg li.title {\n padding-left: 16px;\n background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2); }\n .dg .closed li.title {\n background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }\n .dg .cr.boolean {\n border-left: 3px solid #806787; }\n .dg .cr.color {\n border-left: 3px solid; }\n .dg .cr.function {\n border-left: 3px solid #e61d5f; }\n .dg .cr.number {\n border-left: 3px solid #2FA1D6; }\n .dg .cr.number input[type=text] {\n color: #2FA1D6; }\n .dg .cr.string {\n border-left: 3px solid #1ed36f; }\n .dg .cr.string input[type=text] {\n color: #1ed36f; }\n .dg .cr.function:hover,\n .dg .cr.boolean:hover {\n background: #111; }\n .dg .c input[type=text] {\n background: #303030;\n outline: none; }\n .dg .c input[type=text]:hover {\n background: #3c3c3c; }\n .dg .c input[type=text]:focus {\n background: #494949;\n color: #fff; }\n .dg .c .slider {\n background: #303030;\n cursor: ew-resize; }\n .dg .c .slider-fg {\n background: #2FA1D6; }\n .dg .c .slider:hover {\n background: #3c3c3c; }\n .dg .c .slider:hover .slider-fg {\n background: #44abda; }\n", ""]);
|
|
|
|
// exports
|
|
|
|
|
|
/***/ },
|
|
/* 26 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var _OptionController = __webpack_require__(10);
|
|
|
|
var _OptionController2 = _interopRequireDefault(_OptionController);
|
|
|
|
var _NumberControllerBox = __webpack_require__(13);
|
|
|
|
var _NumberControllerBox2 = _interopRequireDefault(_NumberControllerBox);
|
|
|
|
var _NumberControllerSlider = __webpack_require__(14);
|
|
|
|
var _NumberControllerSlider2 = _interopRequireDefault(_NumberControllerSlider);
|
|
|
|
var _StringController = __webpack_require__(11);
|
|
|
|
var _StringController2 = _interopRequireDefault(_StringController);
|
|
|
|
var _FunctionController = __webpack_require__(20);
|
|
|
|
var _FunctionController2 = _interopRequireDefault(_FunctionController);
|
|
|
|
var _BooleanController = __webpack_require__(8);
|
|
|
|
var _BooleanController2 = _interopRequireDefault(_BooleanController);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
var ControllerFactory = function ControllerFactory(object, property) {
|
|
var initialValue = object[property];
|
|
|
|
// Providing options?
|
|
if (_utilsCommon2['default'].isArray(arguments[2]) || _utilsCommon2['default'].isObject(arguments[2])) {
|
|
return new _OptionController2['default'](object, property, arguments[2]);
|
|
}
|
|
|
|
// Providing a map?
|
|
if (_utilsCommon2['default'].isNumber(initialValue)) {
|
|
if (_utilsCommon2['default'].isNumber(arguments[2]) && _utilsCommon2['default'].isNumber(arguments[3])) {
|
|
// Has min and max.
|
|
if (_utilsCommon2['default'].isNumber(arguments[4])) {
|
|
// has step
|
|
return new _NumberControllerSlider2['default'](object, property, arguments[2], arguments[3], arguments[4]);
|
|
}
|
|
|
|
return new _NumberControllerSlider2['default'](object, property, arguments[2], arguments[3]);
|
|
}
|
|
return new _NumberControllerBox2['default'](object, property, { min: arguments[2], max: arguments[3] });
|
|
}
|
|
|
|
if (_utilsCommon2['default'].isString(initialValue)) {
|
|
return new _StringController2['default'](object, property);
|
|
}
|
|
|
|
if (_utilsCommon2['default'].isFunction(initialValue)) {
|
|
return new _FunctionController2['default'](object, property, '');
|
|
}
|
|
|
|
if (_utilsCommon2['default'].isBoolean(initialValue)) {
|
|
return new _BooleanController2['default'](object, property);
|
|
}
|
|
};
|
|
|
|
exports['default'] = ControllerFactory;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ },
|
|
/* 27 */
|
|
/***/ function(module, exports) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
|
|
exports["default"] = function () {
|
|
function requestAnimationFrame(callback) {
|
|
// TODO: Get rid of window
|
|
window.setTimeout(callback, 1000 / 60);
|
|
}
|
|
|
|
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || requestAnimationFrame;
|
|
};
|
|
|
|
module.exports = exports["default"];
|
|
|
|
/***/ },
|
|
/* 28 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
var _domDom = __webpack_require__(9);
|
|
|
|
var _domDom2 = _interopRequireDefault(_domDom);
|
|
|
|
var _utilsCommon = __webpack_require__(5);
|
|
|
|
var _utilsCommon2 = _interopRequireDefault(_utilsCommon);
|
|
|
|
var CenteredDiv = (function () {
|
|
function CenteredDiv() {
|
|
_classCallCheck(this, CenteredDiv);
|
|
|
|
this.backgroundElement = document.createElement('div');
|
|
_utilsCommon2['default'].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'
|
|
});
|
|
|
|
_domDom2['default'].makeFullscreen(this.backgroundElement);
|
|
this.backgroundElement.style.position = 'fixed';
|
|
|
|
this.domElement = document.createElement('div');
|
|
_utilsCommon2['default'].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);
|
|
|
|
var _this = this;
|
|
_domDom2['default'].bind(this.backgroundElement, 'click', function () {
|
|
_this.hide();
|
|
});
|
|
}
|
|
|
|
CenteredDiv.prototype.show = function show() {
|
|
var _this = this;
|
|
|
|
this.backgroundElement.style.display = 'block';
|
|
|
|
this.domElement.style.display = 'block';
|
|
this.domElement.style.opacity = 0;
|
|
// this.domElement.style.top = '52%';
|
|
this.domElement.style.webkitTransform = 'scale(1.1)';
|
|
|
|
this.layout();
|
|
|
|
_utilsCommon2['default'].defer(function () {
|
|
_this.backgroundElement.style.opacity = 1;
|
|
_this.domElement.style.opacity = 1;
|
|
_this.domElement.style.webkitTransform = 'scale(1)';
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Hide centered div
|
|
*/
|
|
|
|
CenteredDiv.prototype.hide = function hide() {
|
|
var _this = this;
|
|
|
|
var hide = function hide() {
|
|
_this.domElement.style.display = 'none';
|
|
_this.backgroundElement.style.display = 'none';
|
|
|
|
_domDom2['default'].unbind(_this.domElement, 'webkitTransitionEnd', hide);
|
|
_domDom2['default'].unbind(_this.domElement, 'transitionend', hide);
|
|
_domDom2['default'].unbind(_this.domElement, 'oTransitionEnd', hide);
|
|
};
|
|
|
|
_domDom2['default'].bind(this.domElement, 'webkitTransitionEnd', hide);
|
|
_domDom2['default'].bind(this.domElement, 'transitionend', hide);
|
|
_domDom2['default'].bind(this.domElement, 'oTransitionEnd', hide);
|
|
|
|
this.backgroundElement.style.opacity = 0;
|
|
// this.domElement.style.top = '48%';
|
|
this.domElement.style.opacity = 0;
|
|
this.domElement.style.webkitTransform = 'scale(1.1)';
|
|
};
|
|
|
|
CenteredDiv.prototype.layout = function layout() {
|
|
this.domElement.style.left = window.innerWidth / 2 - _domDom2['default'].getWidth(this.domElement) / 2 + 'px';
|
|
this.domElement.style.top = window.innerHeight / 2 - _domDom2['default'].getHeight(this.domElement) / 2 + 'px';
|
|
};
|
|
|
|
return CenteredDiv;
|
|
})();
|
|
|
|
exports['default'] = CenteredDiv;
|
|
module.exports = exports['default'];
|
|
|
|
/***/ }
|
|
/******/ ])
|
|
});
|
|
;
|
|
//# sourceMappingURL=dat.gui.js.map
|