(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'; var _index = __webpack_require__(1); var _index2 = _interopRequireDefault(_index); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } module.exports = _index2.default; /** * 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 */ /***/ }, /* 1 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Color = __webpack_require__(2); var _Color2 = _interopRequireDefault(_Color); var _math = __webpack_require__(6); var _math2 = _interopRequireDefault(_math); var _interpret = __webpack_require__(3); var _interpret2 = _interopRequireDefault(_interpret); var _Controller = __webpack_require__(7); var _Controller2 = _interopRequireDefault(_Controller); var _BooleanController = __webpack_require__(8); var _BooleanController2 = _interopRequireDefault(_BooleanController); var _OptionController = __webpack_require__(10); var _OptionController2 = _interopRequireDefault(_OptionController); var _StringController = __webpack_require__(11); var _StringController2 = _interopRequireDefault(_StringController); var _NumberController = __webpack_require__(12); var _NumberController2 = _interopRequireDefault(_NumberController); var _NumberControllerBox = __webpack_require__(13); var _NumberControllerBox2 = _interopRequireDefault(_NumberControllerBox); var _NumberControllerSlider = __webpack_require__(14); var _NumberControllerSlider2 = _interopRequireDefault(_NumberControllerSlider); var _FunctionController = __webpack_require__(15); var _FunctionController2 = _interopRequireDefault(_FunctionController); var _ColorController = __webpack_require__(16); var _ColorController2 = _interopRequireDefault(_ColorController); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); var _GUI = __webpack_require__(17); var _GUI2 = _interopRequireDefault(_GUI); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /** * 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 */ exports.default = { color: { Color: _Color2.default, math: _math2.default, interpret: _interpret2.default }, controllers: { Controller: _Controller2.default, BooleanController: _BooleanController2.default, OptionController: _OptionController2.default, StringController: _StringController2.default, NumberController: _NumberController2.default, NumberControllerBox: _NumberControllerBox2.default, NumberControllerSlider: _NumberControllerSlider2.default, FunctionController: _FunctionController2.default, ColorController: _ColorController2.default }, dom: { dom: _dom2.default }, gui: { GUI: _GUI2.default }, GUI: _GUI2.default }; /***/ }, /* 2 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; 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 _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); 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"); } } /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var 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 (0, _toString2.default)(this); }; Color.prototype.toOriginal = function toOriginal() { return this.__state.conversion.write(this); }; return Color; }(); 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; } }); } 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') { _common2.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); _common2.default.extend(color.__state, { s: result.s, v: result.v }); if (!_common2.default.isNaN(result.h)) { color.__state.h = result.h; } else if (_common2.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; } }); exports.default = Color; /***/ }, /* 3 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _toString = __webpack_require__(4); var _toString2 = _interopRequireDefault(_toString); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var INTERPRETATIONS = [ // Strings { litmus: _common2.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: _common2.default.isNumber, conversions: { HEX: { read: function read(original) { return { space: 'HEX', hex: original, conversionName: 'HEX' }; }, write: function write(color) { return color.hex; } } } }, // Arrays { litmus: _common2.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: _common2.default.isObject, conversions: { RGBA_OBJ: { read: function read(original) { if (_common2.default.isNumber(original.r) && _common2.default.isNumber(original.g) && _common2.default.isNumber(original.b) && _common2.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 (_common2.default.isNumber(original.r) && _common2.default.isNumber(original.g) && _common2.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 (_common2.default.isNumber(original.h) && _common2.default.isNumber(original.s) && _common2.default.isNumber(original.v) && _common2.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 (_common2.default.isNumber(original.h) && _common2.default.isNumber(original.s) && _common2.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 = void 0; var toReturn = void 0; var interpret = function interpret() { toReturn = false; var original = arguments.length > 1 ? _common2.default.toArray(arguments) : arguments[0]; _common2.default.each(INTERPRETATIONS, function (family) { if (family.litmus(original)) { _common2.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 _common2.default.BREAK; } }); return _common2.default.BREAK; } }); return toReturn; }; exports.default = interpret; /***/ }, /* 4 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; exports.default = function (color) { if (color.a === 1 || _common2.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 + ')'; }; var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /***/ }, /* 5 */ /***/ function(module, exports) { 'use strict'; exports.__esModule = true; /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var 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) { var keys = this.isObject(obj) ? Object.keys(obj) : []; keys.forEach(function (key) { if (!this.isUndefined(obj[key])) { target[key] = obj[key]; } }.bind(this)); }, this); return target; }, defaults: function defaults(target) { this.each(ARR_SLICE.call(arguments, 1), function (obj) { var keys = this.isObject(obj) ? Object.keys(obj) : []; keys.forEach(function (key) { if (this.isUndefined(target[key])) { target[key] = obj[key]; } }.bind(this)); }, 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 = void 0; var l = void 0; 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); }, // call the function immediately, but wait until threshold passes to allow it to be called again debounce: function debounce(func, threshold) { var timeout = void 0; return function () { var obj = this; var args = arguments; function delayed() { timeout = null; } var allowCall = !timeout; clearTimeout(timeout); timeout = setTimeout(delayed, threshold); if (allowCall) { func.apply(obj, args); } }; }, 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; /***/ }, /* 6 */ /***/ function(module, exports) { "use strict"; exports.__esModule = true; /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var tmpComponent = void 0; 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 = void 0; var s = void 0; 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; /***/ }, /* 7 */ /***/ function(module, exports) { 'use strict'; exports.__esModule = true; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } /** * 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 */ 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 object[property] * * @param {Object} newValue The new value of object[property] */ 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 object[property] * * @returns {Object} The current value of object[property] */ 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; /***/ }, /* 8 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Controller2 = __webpack_require__(7); var _Controller3 = _interopRequireDefault(_Controller2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 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); var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property)); var _this = _this2; _this2.__prev = _this2.getValue(); _this2.__checkbox = document.createElement('input'); _this2.__checkbox.setAttribute('type', 'checkbox'); function onChange() { _this.setValue(!_this.__prev); } _dom2.default.bind(_this2.__checkbox, 'change', onChange, false); _this2.domElement.appendChild(_this2.__checkbox); // Match original value _this2.updateDisplay(); return _this2; } 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; /***/ }, /* 9 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var EVENT_MAP = { HTMLEvents: ['change'], MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'], KeyboardEvents: ['keydown'] }; /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var EVENT_MAP_INV = {}; _common2.default.each(EVENT_MAP, function (v, k) { _common2.default.each(v, function (e) { EVENT_MAP_INV[e] = k; }); }); var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/; function cssValueToPixels(val) { if (val === '0' || _common2.default.isUndefined(val)) { return 0; } var match = val.match(CSS_VALUE_PIXELS); if (!_common2.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 (_common2.default.isUndefined(horizontal)) { horizontal = true; } if (_common2.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 _common2.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; } } _common2.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; /***/ }, /* 10 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Controller2 = __webpack_require__(7); var _Controller3 = _interopRequireDefault(_Controller2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 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); var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property)); var options = opts; var _this = _this2; /** * The drop down menu * @ignore */ _this2.__select = document.createElement('select'); if (_common2.default.isArray(options)) { (function () { var map = {}; _common2.default.each(options, function (element) { map[element] = element; }); options = map; })(); } _common2.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 _this2.updateDisplay(); _dom2.default.bind(_this2.__select, 'change', function () { var desiredValue = this.options[this.selectedIndex].value; _this.setValue(desiredValue); }); _this2.domElement.appendChild(_this2.__select); return _this2; } 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() { if (_dom2.default.isActive(this.__select)) return this; // prevent number from updating if user is trying to manually update this.__select.value = this.getValue(); return _Controller.prototype.updateDisplay.call(this); }; return OptionController; }(_Controller3.default); exports.default = OptionController; /***/ }, /* 11 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Controller2 = __webpack_require__(7); var _Controller3 = _interopRequireDefault(_Controller2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 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); var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property)); var _this = _this2; function onChange() { _this.setValue(_this.__input.value); } function onBlur() { if (_this.__onFinishChange) { _this.__onFinishChange.call(_this, _this.getValue()); } } _this2.__input = document.createElement('input'); _this2.__input.setAttribute('type', 'text'); _dom2.default.bind(_this2.__input, 'keyup', onChange); _dom2.default.bind(_this2.__input, 'change', onChange); _dom2.default.bind(_this2.__input, 'blur', onBlur); _dom2.default.bind(_this2.__input, 'keydown', function (e) { if (e.keyCode === 13) { this.blur(); } }); _this2.updateDisplay(); _this2.domElement.appendChild(_this2.__input); return _this2; } StringController.prototype.updateDisplay = function updateDisplay() { // Stops the caret from moving on account of: // keyup -> setValue -> updateDisplay if (!_dom2.default.isActive(this.__input)) { this.__input.value = this.getValue(); } return _Controller.prototype.updateDisplay.call(this); }; return StringController; }(_Controller3.default); exports.default = StringController; /***/ }, /* 12 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Controller2 = __webpack_require__(7); var _Controller3 = _interopRequireDefault(_Controller2); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 */ 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); var _this = _possibleConstructorReturn(this, _Controller.call(this, object, property)); var _params = params || {}; _this.__min = _params.min; _this.__max = _params.max; _this.__step = _params.step; if (_common2.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); return _this; } 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 object[property]. * * @param {Number} minValue The minimum value for * object[property] * @returns {dat.controllers.NumberController} this */ NumberController.prototype.min = function min(v) { this.__min = v; return this; }; /** * Specify a maximum value for object[property]. * * @param {Number} maxValue The maximum value for * object[property] * @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; /***/ }, /* 13 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _NumberController2 = __webpack_require__(12); var _NumberController3 = _interopRequireDefault(_NumberController2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 */ 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); var _this2 = _possibleConstructorReturn(this, _NumberController.call(this, object, property, params)); _this2.__truncationSuspended = false; var _this = _this2; /** * {Number} Previous mouse y position * @ignore */ var prevY = void 0; function onChange() { var attempted = parseFloat(_this.__input.value); if (!_common2.default.isNaN(attempted)) { _this.setValue(attempted); } } function onBlur() { onChange(); if (_this.__onFinishChange) { _this.__onFinishChange.call(_this, _this.getValue()); } } function onMouseDrag(e) { document.activeElement.blur(); var diff = prevY - e.clientY; _this.setValue(_this.getValue() + diff * _this.__impliedStep); prevY = e.clientY; } function onMouseUp() { _dom2.default.unbind(window, 'mousemove', onMouseDrag); _dom2.default.unbind(window, 'mouseup', onMouseUp); } function onMouseDown(e) { _dom2.default.bind(window, 'mousemove', onMouseDrag); _dom2.default.bind(window, 'mouseup', onMouseUp); prevY = e.clientY; } _this2.__input = document.createElement('input'); _this2.__input.setAttribute('type', 'text'); // Makes it so manually specified values are not truncated. _dom2.default.bind(_this2.__input, 'change', onChange); _dom2.default.bind(_this2.__input, 'blur', onBlur); _dom2.default.bind(_this2.__input, 'mousedown', onMouseDown); _dom2.default.bind(_this2.__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; } }); _this2.updateDisplay(); _this2.domElement.appendChild(_this2.__input); return _this2; } NumberControllerBox.prototype.updateDisplay = function updateDisplay() { if (_dom2.default.isActive(this.__input)) return this; // prevent number from updating if user is trying to manually update 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; /***/ }, /* 14 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _NumberController2 = __webpack_require__(12); var _NumberController3 = _interopRequireDefault(_NumberController2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 */ 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 * <div> tags, not the html5 * <slider> 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); var _this2 = _possibleConstructorReturn(this, _NumberController.call(this, object, property, { min: min, max: max, step: step })); var _this = _this2; _this2.__background = document.createElement('div'); _this2.__foreground = document.createElement('div'); _dom2.default.bind(_this2.__background, 'mousedown', onMouseDown); _dom2.default.addClass(_this2.__background, 'slider'); _dom2.default.addClass(_this2.__foreground, 'slider-fg'); function onMouseDown(e) { document.activeElement.blur(); _dom2.default.bind(window, 'mousemove', onMouseDrag); _dom2.default.bind(window, 'mouseup', onMouseUp); onMouseDrag(e); } function onMouseDrag(e) { e.preventDefault(); var bgRect = _this.__background.getBoundingClientRect(); _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)); return false; } function onMouseUp() { _dom2.default.unbind(window, 'mousemove', onMouseDrag); _dom2.default.unbind(window, 'mouseup', onMouseUp); if (_this.__onFinishChange) { _this.__onFinishChange.call(_this, _this.getValue()); } } _this2.updateDisplay(); _this2.__background.appendChild(_this2.__foreground); _this2.domElement.appendChild(_this2.__background); return _this2; } 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); exports.default = NumberControllerSlider; /***/ }, /* 15 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Controller2 = __webpack_require__(7); var _Controller3 = _interopRequireDefault(_Controller2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * 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 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); var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property)); var _this = _this2; _this2.__button = document.createElement('div'); _this2.__button.innerHTML = text === undefined ? 'Fire' : text; _dom2.default.bind(_this2.__button, 'click', function (e) { e.preventDefault(); _this.fire(); return false; }); _dom2.default.addClass(_this2.__button, 'button'); _this2.domElement.appendChild(_this2.__button); return _this2; } 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; /***/ }, /* 16 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _Controller2 = __webpack_require__(7); var _Controller3 = _interopRequireDefault(_Controller2); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); var _Color = __webpack_require__(2); var _Color2 = _interopRequireDefault(_Color); var _interpret = __webpack_require__(3); var _interpret2 = _interopRequireDefault(_interpret); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 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; } /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var ColorController = function (_Controller) { _inherits(ColorController, _Controller); function ColorController(object, property) { _classCallCheck(this, ColorController); var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property)); _this2.__color = new _Color2.default(_this2.getValue()); _this2.__temp = new _Color2.default(0); var _this = _this2; _this2.domElement = document.createElement('div'); _dom2.default.makeSelectable(_this2.domElement, false); _this2.__selector = document.createElement('div'); _this2.__selector.className = 'selector'; _this2.__saturation_field = document.createElement('div'); _this2.__saturation_field.className = 'saturation-field'; _this2.__field_knob = document.createElement('div'); _this2.__field_knob.className = 'field-knob'; _this2.__field_knob_border = '2px solid '; _this2.__hue_knob = document.createElement('div'); _this2.__hue_knob.className = 'hue-knob'; _this2.__hue_field = document.createElement('div'); _this2.__hue_field.className = 'hue-field'; _this2.__input = document.createElement('input'); _this2.__input.type = 'text'; _this2.__input_textShadow = '0 1px 1px '; _dom2.default.bind(_this2.__input, 'keydown', function (e) { if (e.keyCode === 13) { // on enter onBlur.call(this); } }); _dom2.default.bind(_this2.__input, 'blur', onBlur); _dom2.default.bind(_this2.__selector, 'mousedown', function () /* e */{ _dom2.default.addClass(this, 'drag').bind(window, 'mouseup', function () /* e */{ _dom2.default.removeClass(_this.__selector, 'drag'); }); }); var valueField = document.createElement('div'); _common2.default.extend(_this2.__selector.style, { width: '122px', height: '102px', padding: '3px', backgroundColor: '#222', boxShadow: '0px 1px 3px rgba(0,0,0,0.3)' }); _common2.default.extend(_this2.__field_knob.style, { position: 'absolute', width: '12px', height: '12px', border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'), boxShadow: '0px 1px 3px rgba(0,0,0,0.5)', borderRadius: '12px', zIndex: 1 }); _common2.default.extend(_this2.__hue_knob.style, { position: 'absolute', width: '15px', height: '2px', borderRight: '4px solid #fff', zIndex: 1 }); _common2.default.extend(_this2.__saturation_field.style, { width: '100px', height: '100px', border: '1px solid #555', marginRight: '3px', display: 'inline-block', cursor: 'pointer' }); _common2.default.extend(valueField.style, { width: '100%', height: '100%', background: 'none' }); linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000'); _common2.default.extend(_this2.__hue_field.style, { width: '15px', height: '100px', border: '1px solid #555', cursor: 'ns-resize', position: 'absolute', top: '3px', right: '3px' }); hueGradient(_this2.__hue_field); _common2.default.extend(_this2.__input.style, { outline: 'none', // width: '120px', textAlign: 'center', // padding: '4px', // marginBottom: '6px', color: '#fff', border: 0, fontWeight: 'bold', textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)' }); _dom2.default.bind(_this2.__saturation_field, 'mousedown', fieldDown); _dom2.default.bind(_this2.__field_knob, 'mousedown', fieldDown); _dom2.default.bind(_this2.__hue_field, 'mousedown', function (e) { setH(e); _dom2.default.bind(window, 'mousemove', setH); _dom2.default.bind(window, 'mouseup', fieldUpH); }); function fieldDown(e) { setSV(e); // document.body.style.cursor = 'none'; _dom2.default.bind(window, 'mousemove', setSV); _dom2.default.bind(window, 'mouseup', fieldUpSV); } function fieldUpSV() { _dom2.default.unbind(window, 'mousemove', setSV); _dom2.default.unbind(window, 'mouseup', fieldUpSV); // document.body.style.cursor = 'default'; onFinish(); } function onBlur() { var i = (0, _interpret2.default)(this.value); if (i !== false) { _this.__color.__state = i; _this.setValue(_this.__color.toOriginal()); } else { this.value = _this.__color.toString(); } } function fieldUpH() { _dom2.default.unbind(window, 'mousemove', setH); _dom2.default.unbind(window, 'mouseup', fieldUpH); onFinish(); } function onFinish() { if (_this.__onFinishChange) { _this.__onFinishChange.call(_this, _this.__color.toString()); } } _this2.__saturation_field.appendChild(valueField); _this2.__selector.appendChild(_this2.__field_knob); _this2.__selector.appendChild(_this2.__saturation_field); _this2.__selector.appendChild(_this2.__hue_field); _this2.__hue_field.appendChild(_this2.__hue_knob); _this2.domElement.appendChild(_this2.__input); _this2.domElement.appendChild(_this2.__selector); _this2.updateDisplay(); function setSV(e) { e.preventDefault(); var fieldRect = _this.__saturation_field.getBoundingClientRect(); var s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left); var v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); 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 fieldRect = _this.__hue_field.getBoundingClientRect(); var h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); if (h > 1) { h = 1; } else if (h < 0) { h = 0; } _this.__color.h = h * 360; _this.setValue(_this.__color.toOriginal()); return false; } return _this2; } ColorController.prototype.updateDisplay = function updateDisplay() { var i = (0, _interpret2.default)(this.getValue()); if (i !== false) { var mismatch = false; // Check for mismatch on the interpreted value. _common2.default.each(_Color2.default.COMPONENTS, function (component) { if (!_common2.default.isUndefined(i[component]) && !_common2.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) { _common2.default.extend(this.__color.__state, i); } } _common2.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; _common2.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()); _common2.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 = ''; _common2.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; /***/ }, /* 17 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var _css = __webpack_require__(18); var _css2 = _interopRequireDefault(_css); var _saveDialogue = __webpack_require__(19); var _saveDialogue2 = _interopRequireDefault(_saveDialogue); var _ControllerFactory = __webpack_require__(20); var _ControllerFactory2 = _interopRequireDefault(_ControllerFactory); var _Controller = __webpack_require__(7); var _Controller2 = _interopRequireDefault(_Controller); var _BooleanController = __webpack_require__(8); var _BooleanController2 = _interopRequireDefault(_BooleanController); var _FunctionController = __webpack_require__(15); var _FunctionController2 = _interopRequireDefault(_FunctionController); var _NumberControllerBox = __webpack_require__(13); var _NumberControllerBox2 = _interopRequireDefault(_NumberControllerBox); var _NumberControllerSlider = __webpack_require__(14); var _NumberControllerSlider2 = _interopRequireDefault(_NumberControllerSlider); var _ColorController = __webpack_require__(16); var _ColorController2 = _interopRequireDefault(_ColorController); var _requestAnimationFrame = __webpack_require__(21); var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame); var _CenteredDiv = __webpack_require__(22); var _CenteredDiv2 = _interopRequireDefault(_CenteredDiv); var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); var _style = __webpack_require__(23); var _style2 = _interopRequireDefault(_style); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } // CSS to embed in build _css2.default.inject(_style2.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 = void 0; /** Have we yet to create an autoPlace GUI? */ var autoPlaceVirgin = true; /** Fixed position div that auto place GUI's go inside */ var autoPlaceContainer = void 0; /** 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); _dom2.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 = _common2.default.defaults(params, { autoPlace: true, width: GUI.DEFAULT_WIDTH }); params = _common2.default.defaults(params, { resizable: params.autoPlace, hideable: params.autoPlace }); if (!_common2.default.isUndefined(params.load)) { // Explicit preset if (params.preset) { params.load.preset = params.preset; } } else { params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME }; } if (_common2.default.isUndefined(params.parent) && params.hideable) { hideableGuis.push(this); } // Only root level GUI's are resizable. params.resizable = _common2.default.isUndefined(params.parent) && params.resizable; if (params.autoPlace && _common2.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 = void 0; Object.defineProperties(this, /** @lends dat.gui.GUI.prototype */ { /** * The parent GUI * @type dat.gui.GUI */ parent: { get: function get() { return params.parent; } }, scrollable: { get: function get() { return params.scrollable; } }, /** * Handles GUI'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 GUI element * @type Number */ width: { get: function get() { return params.width; }, set: function set(v) { params.width = v; setWidth(_this, v); } }, /** * The name of GUI. 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 GUI is collapsed or not * @type Boolean */ closed: { get: function get() { return params.closed; }, set: function set(v) { params.closed = v; if (params.closed) { _dom2.default.addClass(_this.__ul, GUI.CLASS_CLOSED); } else { _dom2.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 localStorage as the means for * remembering * @type Boolean */ useLocalStorage: { get: function get() { return useLocalStorage; }, set: function set(bool) { if (SUPPORTS_LOCAL_STORAGE) { useLocalStorage = bool; if (bool) { _dom2.default.bind(window, 'unload', saveToLocalStorage); } else { _dom2.default.unbind(window, 'unload', saveToLocalStorage); } localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool); } } } }); // Are we a root level GUI? if (_common2.default.isUndefined(params.parent)) { params.closed = false; _dom2.default.addClass(this.domElement, GUI.CLASS_MAIN); _dom2.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; _dom2.default.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON); this.domElement.appendChild(this.__closeButton); _dom2.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); _dom2.default.addClass(_titleRowName, 'controller-name'); var titleRow = addRow(_this, _titleRowName); var onClickTitle = function onClickTitle(e) { e.preventDefault(); _this.closed = !_this.closed; return false; }; _dom2.default.addClass(this.__ul, GUI.CLASS_CLOSED); _dom2.default.addClass(titleRow, 'title'); _dom2.default.bind(titleRow, 'click', onClickTitle); if (!params.closed) { this.closed = false; } } if (params.autoPlace) { if (_common2.default.isUndefined(params.parent)) { if (autoPlaceVirgin) { autoPlaceContainer = document.createElement('div'); _dom2.default.addClass(autoPlaceContainer, CSS_NAMESPACE); _dom2.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 _dom2.default.addClass(this.domElement, GUI.CLASS_AUTO_PLACE); } // Make it not elastic. if (!this.parent) { setWidth(_this, params.width); } } this.__resizeHandler = function () { _this.onResize(); }; _dom2.default.bind(window, 'resize', this.__resizeHandler); _dom2.default.bind(this.__ul, 'webkitTransitionEnd', this.__resizeHandler); _dom2.default.bind(this.__ul, 'transitionend', this.__resizeHandler); _dom2.default.bind(this.__ul, 'oTransitionEnd', this.__resizeHandler); this.onResize(); if (params.resizable) { addResizeHandle(this); } saveToLocalStorage = function saveToLocalStorage() { 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; _common2.default.defer(function () { root.width -= 1; }); } if (!params.parent) { resetWidth(); } }; GUI.toggleHide = function () { hide = !hide; _common2.default.each(hideableGuis, function (gui) { gui.domElement.style.display = hide ? 'none' : ''; }); }; 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'; GUI._keydownHandler = function (e) { if (document.activeElement.type !== 'text' && (e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE)) { GUI.toggleHide(); } }; _dom2.default.bind(window, 'keydown', GUI._keydownHandler, false); _common2.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(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; _common2.default.defer(function () { _this.onResize(); }); }, destroy: function destroy() { if (this.autoPlace) { autoPlaceContainer.removeChild(this.domElement); } _dom2.default.unbind(window, 'keydown', GUI._keydownHandler, false); _dom2.default.unbind(window, 'resize', this.__resizeHandler); if (this.saveToLocalStorageIfPossible) { _dom2.default.unbind(window, 'unload', this.saveToLocalStorageIfPossible); } }, /** * @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); _dom2.default.addClass(li, 'folder'); return gui; }, open: function open() { this.closed = false; }, close: function close() { this.closed = true; }, onResize: _common2.default.debounce(function () { // we debounce this function to prevent performance issues when rotating on tablet/mobile var root = this.getRoot(); if (root.scrollable) { var top = _dom2.default.getOffset(root.__ul).top; var h = 0; _common2.default.each(root.__ul.childNodes, function (node) { if (!(root.autoPlace && node === root.__save_row)) { h += _dom2.default.getHeight(node); } }); if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) { _dom2.default.addClass(root.domElement, GUI.CLASS_TOO_TALL); root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px'; } else { _dom2.default.removeClass(root.domElement, GUI.CLASS_TOO_TALL); root.__ul.style.height = 'auto'; } } if (root.__resize_handle) { _common2.default.defer(function () { root.__resize_handle.style.height = root.__ul.offsetHeight + 'px'; }); } if (root.__closeButton) { root.__closeButton.style.width = root.width + 'px'; } }, 200), /** * 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 (_common2.default.isUndefined(SAVE_DIALOGUE)) { SAVE_DIALOGUE = new _CenteredDiv2.default(); SAVE_DIALOGUE.domElement.innerHTML = _saveDialogue2.default; } if (this.parent) { throw new Error('You can only call remember on a top level GUI.'); } var _this = this; _common2.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 = {}; _common2.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) { _common2.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); } // fire onFinishChange callback if (controller.__onFinishChange) { controller.__onFinishChange.call(controller, controller.getValue()); } }, this); _common2.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); } }, updateDisplay: function updateDisplay() { _common2.default.each(this.__controllers, function (controller) { controller.updateDisplay(); }); _common2.default.each(this.__folders, function (folder) { folder.updateDisplay(); }); } }); /** * 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, liBefore); } 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; _common2.default.extend(controller, { options: function options(_options) { if (arguments.length > 1) { var nextSibling = controller.__li.nextElementSibling; controller.remove(); return _add(gui, controller.object, controller.property, { before: nextSibling, factoryArgs: [_common2.default.toArray(arguments)] }); } if (_common2.default.isArray(_options) || _common2.default.isObject(_options)) { var _nextSibling = controller.__li.nextElementSibling; controller.remove(); return _add(gui, controller.object, controller.property, { before: _nextSibling, 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 _NumberControllerSlider2.default) { (function () { var box = new _NumberControllerBox2.default(controller.object, controller.property, { min: controller.__min, max: controller.__max, step: controller.__step }); _common2.default.each(['updateDisplay', 'onChange', 'onFinishChange', 'step'], function (method) { var pc = controller[method]; var pb = box[method]; controller[method] = box[method] = function () { var args = Array.prototype.slice.call(arguments); pb.apply(box, args); return pc.apply(controller, args); }; }); _dom2.default.addClass(li, 'has-slider'); controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild); })(); } else if (controller instanceof _NumberControllerBox2.default) { var r = function r(returned) { // Have we defined both boundaries? if (_common2.default.isNumber(controller.__min) && _common2.default.isNumber(controller.__max)) { // Well, then lets just replace this with a slider. // lets remember if the old controller had a specific name or was listening var oldName = controller.__li.firstElementChild.firstElementChild.innerHTML; var wasListening = controller.__gui.__listening.indexOf(controller) > -1; controller.remove(); var newController = _add(gui, controller.object, controller.property, { before: controller.__li.nextElementSibling, factoryArgs: [controller.__min, controller.__max, controller.__step] }); newController.name(oldName); if (wasListening) newController.listen(); return newController; } return returned; }; controller.min = _common2.default.compose(r, controller.min); controller.max = _common2.default.compose(r, controller.max); } else if (controller instanceof _BooleanController2.default) { _dom2.default.bind(li, 'click', function () { _dom2.default.fakeEvent(controller.__checkbox, 'click'); }); _dom2.default.bind(controller.__checkbox, 'click', function (e) { e.stopPropagation(); // Prevents double-toggle }); } else if (controller instanceof _FunctionController2.default) { _dom2.default.bind(li, 'click', function () { _dom2.default.fakeEvent(controller.__button, 'click'); }); _dom2.default.bind(li, 'mouseover', function () { _dom2.default.addClass(controller.__button, 'hover'); }); _dom2.default.bind(li, 'mouseout', function () { _dom2.default.removeClass(controller.__button, 'hover'); }); } else if (controller instanceof _ColorController2.default) { _dom2.default.addClass(li, 'color'); controller.updateDisplay = _common2.default.compose(function (val) { li.style.borderLeftColor = controller.__color.toString(); return val; }, controller.updateDisplay); controller.updateDisplay(); } controller.setValue = _common2.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 = void 0; 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 = void 0; if (params.color) { controller = new _ColorController2.default(object, property); } else { var factoryArgs = [object, property].concat(params.factoryArgs); controller = _ControllerFactory2.default.apply(gui, factoryArgs); } if (params.before instanceof _Controller2.default) { params.before = params.before.__li; } recallSavedValue(gui, controller); _dom2.default.addClass(controller.domElement, 'c'); var name = document.createElement('span'); _dom2.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); _dom2.default.addClass(li, GUI.CLASS_CONTROLLER_ROW); if (controller instanceof _ColorController2.default) { _dom2.default.addClass(li, 'color'); } else { _dom2.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'); _dom2.default.addClass(gui.domElement, 'has-save'); gui.__ul.insertBefore(div, gui.__ul.firstChild); _dom2.default.addClass(div, 'save-row'); var gears = document.createElement('span'); gears.innerHTML = ' '; _dom2.default.addClass(gears, 'button gears'); // TODO replace with FunctionController var button = document.createElement('span'); button.innerHTML = 'Save'; _dom2.default.addClass(button, 'button'); _dom2.default.addClass(button, 'save'); var button2 = document.createElement('span'); button2.innerHTML = 'New'; _dom2.default.addClass(button2, 'button'); _dom2.default.addClass(button2, 'save-as'); var button3 = document.createElement('span'); button3.innerHTML = 'Revert'; _dom2.default.addClass(button3, 'button'); _dom2.default.addClass(button3, 'revert'); var select = gui.__preset_select = document.createElement('select'); if (gui.load && gui.load.remembered) { _common2.default.each(gui.load.remembered, function (value, key) { addPresetOption(gui, key, key === gui.preset); }); } else { addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false); } _dom2.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! _dom2.default.bind(localStorageCheckBox, 'change', function () { gui.useLocalStorage = !gui.useLocalStorage; showHideExplain(gui, explain); }); })(); } var newConstructorTextArea = document.getElementById('dg-new-constructor'); _dom2.default.bind(newConstructorTextArea, 'keydown', function (e) { if (e.metaKey && (e.which === 67 || e.keyCode === 67)) { SAVE_DIALOGUE.hide(); } }); _dom2.default.bind(gears, 'click', function () { newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2); SAVE_DIALOGUE.show(); newConstructorTextArea.focus(); newConstructorTextArea.select(); }); _dom2.default.bind(button, 'click', function () { gui.save(); }); _dom2.default.bind(button2, 'click', function () { var presetName = prompt('Enter a new preset name.'); if (presetName) { gui.saveAs(presetName); } }); _dom2.default.bind(button3, 'click', function () { gui.revert(); }); // div.appendChild(button2); } function addResizeHandle(gui) { var pmouseX = void 0; gui.__resize_handle = document.createElement('div'); _common2.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() { _dom2.default.removeClass(gui.__closeButton, GUI.CLASS_DRAG); _dom2.default.unbind(window, 'mousemove', drag); _dom2.default.unbind(window, 'mouseup', dragStop); } function dragStart(e) { e.preventDefault(); pmouseX = e.clientX; _dom2.default.addClass(gui.__closeButton, GUI.CLASS_DRAG); _dom2.default.bind(window, 'mousemove', drag); _dom2.default.bind(window, 'mouseup', dragStop); return false; } _dom2.default.bind(gui.__resize_handle, 'mousedown', dragStart); _dom2.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 _common2.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 _common2.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) { _requestAnimationFrame2.default.call(window, function () { updateDisplays(controllerArray); }); } _common2.default.each(controllerArray, function (c) { c.updateDisplay(); }); } module.exports = GUI; /***/ }, /* 18 */ /***/ function(module, exports) { 'use strict'; /** * 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 */ 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; var head = doc.getElementsByTagName('head')[0]; try { head.appendChild(injected); } catch (e) {// Unable to inject CSS, probably because of a Content Security Policy } } }; /***/ }, /* 19 */ /***/ function(module, exports) { module.exports = "
\n\n Here's the new load parameter for your GUI's constructor:\n\n \n\n
\n\n Automatically save\n values to localStorage on exit.\n\n
The values saved to localStorage will\n override those passed to dat.GUI's constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n\n
\n\n
\n\n
"; /***/ }, /* 20 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; 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__(15); var _FunctionController2 = _interopRequireDefault(_FunctionController); var _BooleanController = __webpack_require__(8); var _BooleanController2 = _interopRequireDefault(_BooleanController); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var ControllerFactory = function ControllerFactory(object, property) { var initialValue = object[property]; // Providing options? if (_common2.default.isArray(arguments[2]) || _common2.default.isObject(arguments[2])) { return new _OptionController2.default(object, property, arguments[2]); } // Providing a map? if (_common2.default.isNumber(initialValue)) { // Has min and max? (slider) if (_common2.default.isNumber(arguments[2]) && _common2.default.isNumber(arguments[3])) { // has step? if (_common2.default.isNumber(arguments[4])) { return new _NumberControllerSlider2.default(object, property, arguments[2], arguments[3], arguments[4]); } return new _NumberControllerSlider2.default(object, property, arguments[2], arguments[3]); } // number box if (_common2.default.isNumber(arguments[4])) { // has step return new _NumberControllerBox2.default(object, property, { min: arguments[2], max: arguments[3], step: arguments[4] }); } return new _NumberControllerBox2.default(object, property, { min: arguments[2], max: arguments[3] }); } if (_common2.default.isString(initialValue)) { return new _StringController2.default(object, property); } if (_common2.default.isFunction(initialValue)) { return new _FunctionController2.default(object, property, ''); } if (_common2.default.isBoolean(initialValue)) { return new _BooleanController2.default(object, property); } return null; }; /** * 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 */ exports.default = ControllerFactory; /***/ }, /* 21 */ /***/ function(module, exports) { "use strict"; exports.__esModule = true; /** * 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 */ function requestAnimationFrame(callback) { setTimeout(callback, 1000 / 60); } exports.default = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || requestAnimationFrame; /***/ }, /* 22 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; exports.__esModule = true; var _dom = __webpack_require__(9); var _dom2 = _interopRequireDefault(_dom); var _common = __webpack_require__(5); var _common2 = _interopRequireDefault(_common); 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"); } } /** * dat-gui JavaScript Controller Library * http://code.google.com/p/dat-gui * * Copyright 2011 Data Arts Team, Google Creative Lab * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 */ var CenteredDiv = function () { function CenteredDiv() { _classCallCheck(this, CenteredDiv); this.backgroundElement = document.createElement('div'); _common2.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' }); _dom2.default.makeFullscreen(this.backgroundElement); this.backgroundElement.style.position = 'fixed'; this.domElement = document.createElement('div'); _common2.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; _dom2.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(); _common2.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'; _dom2.default.unbind(_this.domElement, 'webkitTransitionEnd', hide); _dom2.default.unbind(_this.domElement, 'transitionend', hide); _dom2.default.unbind(_this.domElement, 'oTransitionEnd', hide); }; _dom2.default.bind(this.domElement, 'webkitTransitionEnd', hide); _dom2.default.bind(this.domElement, 'transitionend', hide); _dom2.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 - _dom2.default.getWidth(this.domElement) / 2 + 'px'; this.domElement.style.top = window.innerHeight / 2 - _dom2.default.getHeight(this.domElement) / 2 + 'px'; }; return CenteredDiv; }(); exports.default = CenteredDiv; /***/ }, /* 23 */ /***/ function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(24)(); // 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,\n .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,
  • */\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, .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 max-width: 100%; }\n .dg .c .slider:hover {\n background: #3c3c3c; }\n .dg .c .slider:hover .slider-fg {\n background: #44abda; }\n", ""]); // exports /***/ }, /* 24 */ /***/ 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; }; /***/ } /******/ ]) }); ; //# sourceMappingURL=dat.gui.js.map