diff --git a/example.html b/example.html index 3c6380b..e081c6b 100644 --- a/example.html +++ b/example.html @@ -1,13 +1,19 @@ + + - - + + - \ No newline at end of file + + diff --git a/src/dat/color/Color.js b/src/dat/color/Color.js index 429d314..8a49400 100644 --- a/src/dat/color/Color.js +++ b/src/dat/color/Color.js @@ -16,9 +16,9 @@ define([ 'dat/color/math', 'dat/color/toString', 'dat/utils/common' -], function(interpret, math, toString, common) { +], function (interpret, math, toString, common) { - var Color = function() { + var Color = function () { this.__state = interpret.apply(this, arguments); @@ -28,18 +28,17 @@ define([ this.__state.a = this.__state.a || 1; - }; - Color.COMPONENTS = ['r','g','b','h','s','v','hex','a']; + Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a']; common.extend(Color.prototype, { - toString: function() { + toString: function () { return toString(this); }, - toOriginal: function() { + toOriginal: function () { return this.__state.conversion.write(this); } @@ -55,11 +54,11 @@ define([ Object.defineProperty(Color.prototype, 'a', { - get: function() { + get: function () { return this.__state.a; }, - set: function(v) { + set: function (v) { this.__state.a = v; } @@ -67,7 +66,7 @@ define([ Object.defineProperty(Color.prototype, 'hex', { - get: function() { + get: function () { if (!this.__state.space !== 'HEX') { this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b); @@ -77,7 +76,7 @@ define([ }, - set: function(v) { + set: function (v) { this.__state.space = 'HEX'; this.__state.hex = v; @@ -90,7 +89,7 @@ define([ Object.defineProperty(target, component, { - get: function() { + get: function () { if (this.__state.space === 'RGB') { return this.__state[component]; @@ -102,7 +101,7 @@ define([ }, - set: function(v) { + set: function (v) { if (this.__state.space !== 'RGB') { recalculateRGB(this, component, componentHexIndex); @@ -121,7 +120,7 @@ define([ Object.defineProperty(target, component, { - get: function() { + get: function () { if (this.__state.space === 'HSV') return this.__state[component]; @@ -132,7 +131,7 @@ define([ }, - set: function(v) { + set: function (v) { if (this.__state.space !== 'HSV') { recalculateHSV(this); @@ -169,12 +168,10 @@ define([ var result = math.rgb_to_hsv(color.r, color.g, color.b); - common.extend(color.__state, - { - s: result.s, - v: result.v - } - ); + common.extend(color.__state, { + s: result.s, + v: result.v + }); if (!common.isNaN(result.h)) { color.__state.h = result.h; diff --git a/src/dat/color/interpret.js b/src/dat/color/interpret.js index 8e64d03..8db0ad8 100644 --- a/src/dat/color/interpret.js +++ b/src/dat/color/interpret.js @@ -14,21 +14,21 @@ define([ 'dat/color/toString', 'dat/utils/common' -], function(toString, common) { +], function (toString, common) { var result, toReturn; - var interpret = function() { + var interpret = function () { toReturn = false; var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0]; - common.each(INTERPRETATIONS, function(family) { + common.each(INTERPRETATIONS, function (family) { if (family.litmus(original)) { - common.each(family.conversions, function(conversion, conversionName) { + common.each(family.conversions, function (conversion, conversionName) { result = conversion.read(original); @@ -63,7 +63,7 @@ define([ THREE_CHAR_HEX: { - read: function(original) { + read: function (original) { var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); if (test === null) return false; @@ -71,10 +71,10 @@ define([ return { space: 'HEX', hex: parseInt( - '0x' + - test[1].toString() + test[1].toString() + - test[2].toString() + test[2].toString() + - test[3].toString() + test[3].toString()) + '0x' + + test[1].toString() + test[1].toString() + + test[2].toString() + test[2].toString() + + test[3].toString() + test[3].toString()) }; }, @@ -85,7 +85,7 @@ define([ SIX_CHAR_HEX: { - read: function(original) { + read: function (original) { var test = original.match(/^#([A-F0-9]{6})$/i); if (test === null) return false; @@ -103,7 +103,7 @@ define([ CSS_RGB: { - read: function(original) { + read: function (original) { var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); if (test === null) return false; @@ -123,7 +123,7 @@ define([ CSS_RGBA: { - read: function(original) { + read: function (original) { var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/); if (test === null) return false; @@ -154,7 +154,7 @@ define([ conversions: { HEX: { - read: function(original) { + read: function (original) { return { space: 'HEX', hex: original, @@ -162,7 +162,7 @@ define([ } }, - write: function(color) { + write: function (color) { return color.hex; } } @@ -179,7 +179,7 @@ define([ conversions: { RGB_ARRAY: { - read: function(original) { + read: function (original) { if (original.length != 3) return false; return { space: 'RGB', @@ -189,14 +189,14 @@ define([ }; }, - write: function(color) { + write: function (color) { return [color.r, color.g, color.b]; } }, RGBA_ARRAY: { - read: function(original) { + read: function (original) { if (original.length != 4) return false; return { space: 'RGB', @@ -207,7 +207,7 @@ define([ }; }, - write: function(color) { + write: function (color) { return [color.r, color.g, color.b, color.a]; } @@ -225,11 +225,11 @@ define([ conversions: { RGBA_OBJ: { - read: function(original) { + read: function (original) { if (common.isNumber(original.r) && - common.isNumber(original.g) && - common.isNumber(original.b) && - common.isNumber(original.a)) { + common.isNumber(original.g) && + common.isNumber(original.b) && + common.isNumber(original.a)) { return { space: 'RGB', r: original.r, @@ -241,7 +241,7 @@ define([ return false; }, - write: function(color) { + write: function (color) { return { r: color.r, g: color.g, @@ -252,10 +252,10 @@ define([ }, RGB_OBJ: { - read: function(original) { + read: function (original) { if (common.isNumber(original.r) && - common.isNumber(original.g) && - common.isNumber(original.b)) { + common.isNumber(original.g) && + common.isNumber(original.b)) { return { space: 'RGB', r: original.r, @@ -266,7 +266,7 @@ define([ return false; }, - write: function(color) { + write: function (color) { return { r: color.r, g: color.g, @@ -276,11 +276,11 @@ define([ }, HSVA_OBJ: { - read: function(original) { + read: function (original) { if (common.isNumber(original.h) && - common.isNumber(original.s) && - common.isNumber(original.v) && - common.isNumber(original.a)) { + common.isNumber(original.s) && + common.isNumber(original.v) && + common.isNumber(original.a)) { return { space: 'HSV', h: original.h, @@ -292,7 +292,7 @@ define([ return false; }, - write: function(color) { + write: function (color) { return { h: color.h, s: color.s, @@ -303,10 +303,10 @@ define([ }, HSV_OBJ: { - read: function(original) { + read: function (original) { if (common.isNumber(original.h) && - common.isNumber(original.s) && - common.isNumber(original.v)) { + common.isNumber(original.s) && + common.isNumber(original.v)) { return { space: 'HSV', h: original.h, @@ -317,7 +317,7 @@ define([ return false; }, - write: function(color) { + write: function (color) { return { h: color.h, s: color.s, @@ -331,10 +331,8 @@ define([ } - ]; return interpret; - -}); \ No newline at end of file +}); diff --git a/src/dat/color/math.js b/src/dat/color/math.js index 6be2613..8f65451 100644 --- a/src/dat/color/math.js +++ b/src/dat/color/math.js @@ -13,13 +13,13 @@ define([ -], function() { +], function () { var tmpComponent; return { - hsv_to_rgb: function(h, s, v) { + hsv_to_rgb: function (h, s, v) { var hi = Math.floor(h / 60) % 6; @@ -44,12 +44,12 @@ define([ }, - rgb_to_hsv: function(r, g, b) { + rgb_to_hsv: function (r, g, b) { var min = Math.min(r, g, b), - max = Math.max(r, g, b), - delta = max - min, - h, s; + max = Math.max(r, g, b), + delta = max - min, + h, s; if (max != 0) { s = delta / max; @@ -80,21 +80,21 @@ define([ }; }, - rgb_to_hex: function(r, g, b) { + rgb_to_hex: function (r, g, b) { var hex = this.hex_with_component(0, 2, r); hex = this.hex_with_component(hex, 1, g); hex = this.hex_with_component(hex, 0, b); return hex; }, - component_from_hex: function(hex, componentIndex) { + component_from_hex: function (hex, componentIndex) { return (hex >> (componentIndex * 8)) & 0xFF; }, - hex_with_component: function(hex, componentIndex, value) { - return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent)); + hex_with_component: function (hex, componentIndex, value) { + return value << (tmpComponent = componentIndex * 8) | (hex & ~(0xFF << tmpComponent)); } } -}); \ No newline at end of file +}); diff --git a/src/dat/color/toString.js b/src/dat/color/toString.js index c052a79..c96ad4c 100644 --- a/src/dat/color/toString.js +++ b/src/dat/color/toString.js @@ -13,9 +13,9 @@ define([ 'dat/utils/common' -], function(common) { +], function (common) { - return function(color) { + return function (color) { if (color.a == 1 || common.isUndefined(color.a)) { @@ -34,4 +34,4 @@ define([ } -}); \ No newline at end of file +}); diff --git a/src/dat/controllers/BooleanController.js b/src/dat/controllers/BooleanController.js index 49ddf57..37a3982 100644 --- a/src/dat/controllers/BooleanController.js +++ b/src/dat/controllers/BooleanController.js @@ -15,7 +15,7 @@ define([ 'dat/controllers/Controller', 'dat/dom/dom', 'dat/utils/common' -], function(Controller, dom, common) { +], function (Controller, dom, common) { /** * @class Provides a checkbox input to alter the boolean property of an object. @@ -26,7 +26,7 @@ define([ * * @member dat.controllers */ - var BooleanController = function(object, property) { + var BooleanController = function (object, property) { BooleanController.superclass.call(this, object, property); @@ -36,7 +36,6 @@ define([ this.__checkbox = document.createElement('input'); this.__checkbox.setAttribute('type', 'checkbox'); - dom.bind(this.__checkbox, 'change', onChange, false); this.domElement.appendChild(this.__checkbox); @@ -54,38 +53,37 @@ define([ common.extend( - BooleanController.prototype, - Controller.prototype, + BooleanController.prototype, + Controller.prototype, - { + { - setValue: function(v) { - var toReturn = BooleanController.superclass.prototype.setValue.call(this, v); - if (this.__onFinishChange) { - this.__onFinishChange.call(this, this.getValue()); - } - this.__prev = this.getValue(); - return toReturn; - }, + setValue: function (v) { + var toReturn = BooleanController.superclass.prototype.setValue.call(this, v); + if (this.__onFinishChange) { + this.__onFinishChange.call(this, this.getValue()); + } + this.__prev = this.getValue(); + return toReturn; + }, - updateDisplay: function() { - - if (this.getValue() === true) { - this.__checkbox.setAttribute('checked', 'checked'); - this.__checkbox.checked = true; - } else { - this.__checkbox.checked = false; - } - - return BooleanController.superclass.prototype.updateDisplay.call(this); + updateDisplay: function () { + if (this.getValue() === true) { + this.__checkbox.setAttribute('checked', 'checked'); + this.__checkbox.checked = true; + } else { + this.__checkbox.checked = false; } + return BooleanController.superclass.prototype.updateDisplay.call(this); } + } + ); return BooleanController; -}); \ No newline at end of file +}); diff --git a/src/dat/controllers/ColorController.js b/src/dat/controllers/ColorController.js index eef8978..de383e9 100644 --- a/src/dat/controllers/ColorController.js +++ b/src/dat/controllers/ColorController.js @@ -17,9 +17,9 @@ define([ 'dat/color/Color', 'dat/color/interpret', 'dat/utils/common' -], function(Controller, dom, Color, interpret, common) { +], function (Controller, dom, Color, interpret, common) { - var ColorController = function(object, property) { + var ColorController = function (object, property) { ColorController.superclass.call(this, object, property); @@ -52,7 +52,7 @@ define([ this.__input.type = 'text'; this.__input_textShadow = '0 1px 1px '; - dom.bind(this.__input, 'keydown', function(e) { + dom.bind(this.__input, 'keydown', function (e) { if (e.keyCode === 13) { // on enter onBlur.call(this); } @@ -60,11 +60,11 @@ define([ dom.bind(this.__input, 'blur', onBlur); - dom.bind(this.__selector, 'mousedown', function(e) { + dom.bind(this.__selector, 'mousedown', function (e) { dom .addClass(this, 'drag') - .bind(window, 'mouseup', function(e) { + .bind(window, 'mouseup', function (e) { dom.removeClass(_this.__selector, 'drag'); }); @@ -89,7 +89,7 @@ define([ borderRadius: '12px', zIndex: 1 }); - + common.extend(this.__hue_knob.style, { position: 'absolute', width: '15px', @@ -112,7 +112,7 @@ define([ height: '100%', background: 'none' }); - + linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000'); common.extend(this.__hue_field.style, { @@ -127,10 +127,10 @@ define([ common.extend(this.__input.style, { outline: 'none', -// width: '120px', + // width: '120px', textAlign: 'center', -// padding: '4px', -// marginBottom: '6px', + // padding: '4px', + // marginBottom: '6px', color: '#fff', border: 0, fontWeight: 'bold', @@ -140,7 +140,7 @@ define([ dom.bind(this.__saturation_field, 'mousedown', fieldDown); dom.bind(this.__field_knob, 'mousedown', fieldDown); - dom.bind(this.__hue_field, 'mousedown', function(e) { + dom.bind(this.__hue_field, 'mousedown', function (e) { setH(e); dom.bind(window, 'mousemove', setH); dom.bind(window, 'mouseup', unbindH); @@ -205,7 +205,6 @@ define([ _this.setValue(_this.__color.toOriginal()); - return false; } @@ -235,80 +234,80 @@ define([ common.extend( - ColorController.prototype, - Controller.prototype, + ColorController.prototype, + Controller.prototype, - { + { - updateDisplay: function() { + updateDisplay: function () { - var i = interpret(this.getValue()); + var i = interpret(this.getValue()); - if (i !== false) { + if (i !== false) { - var mismatch = false; + var mismatch = false; - // Check for mismatch on the interpreted value. + // Check for mismatch on the interpreted value. - common.each(Color.COMPONENTS, function(component) { - if (!common.isUndefined(i[component]) && - !common.isUndefined(this.__color.__state[component]) && - i[component] !== this.__color.__state[component]) { - mismatch = true; - return {}; // break - } - }, this); - - // If nothing diverges, we keep our previous values - // for statefulness, otherwise we recalculate fresh - if (mismatch) { - common.extend(this.__color.__state, i); + common.each(Color.COMPONENTS, function (component) { + if (!common.isUndefined(i[component]) && + !common.isUndefined(this.__color.__state[component]) && + i[component] !== this.__color.__state[component]) { + mismatch = true; + return {}; // break } + }, this); + // If nothing diverges, we keep our previous values + // for statefulness, otherwise we recalculate fresh + if (mismatch) { + common.extend(this.__color.__state, i); } - common.extend(this.__temp.__state, this.__color.__state); - - this.__temp.a = 1; - - var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0; - var _flip = 255 - flip; - - common.extend(this.__field_knob.style, { - marginLeft: 100 * this.__color.s - 7 + 'px', - marginTop: 100 * (1 - this.__color.v) - 7 + 'px', - backgroundColor: this.__temp.toString(), - border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')' - }); - - this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px' - - this.__temp.s = 1; - this.__temp.v = 1; - - linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString()); - - common.extend(this.__input.style, { - backgroundColor: this.__input.value = this.__color.toString(), - color: 'rgb(' + flip + ',' + flip + ',' + flip +')', - textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)' - }); - } + common.extend(this.__temp.__state, this.__color.__state); + + this.__temp.a = 1; + + var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0; + var _flip = 255 - flip; + + common.extend(this.__field_knob.style, { + marginLeft: 100 * this.__color.s - 7 + 'px', + marginTop: 100 * (1 - this.__color.v) - 7 + 'px', + backgroundColor: this.__temp.toString(), + border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')' + }); + + this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px' + + this.__temp.s = 1; + this.__temp.v = 1; + + linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString()); + + common.extend(this.__input.style, { + backgroundColor: this.__input.value = this.__color.toString(), + color: 'rgb(' + flip + ',' + flip + ',' + flip + ')', + textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)' + }); + } + } + ); - - var vendors = ['-moz-','-o-','-webkit-','-ms-','']; - + + var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', '']; + function linearGradient(elem, x, a, b) { elem.style.background = ''; - common.each(vendors, function(vendor) { - elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); '; + common.each(vendors, function (vendor) { + elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); '; }); } - + 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%);' @@ -318,7 +317,6 @@ define([ elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' } - return ColorController; -}); \ No newline at end of file +}); diff --git a/src/dat/controllers/Controller.js b/src/dat/controllers/Controller.js index 3a44df3..819adef 100644 --- a/src/dat/controllers/Controller.js +++ b/src/dat/controllers/Controller.js @@ -12,8 +12,8 @@ */ define([ - 'dat/utils/common' -], function(common) { + 'dat/utils/common' +], function (common) { /** * @class An "abstract" class that represents a given property of an object. @@ -23,7 +23,7 @@ define([ * * @member dat.controllers */ - var Controller = function(object, property) { + var Controller = function (object, property) { this.initialValue = object[property]; @@ -63,82 +63,81 @@ define([ common.extend( - Controller.prototype, + Controller.prototype, - /** @lends dat.controllers.Controller.prototype */ - { + /** @lends dat.controllers.Controller.prototype */ + { - /** - * Specify that a function fire every time someone changes the value with - * this Controller. - * - * @param {Function} fnc This function will be called whenever the value - * is modified via this Controller. - * @returns {dat.controllers.Controller} this - */ - onChange: function(fnc) { - this.__onChange = fnc; - return this; - }, + /** + * Specify that a function fire every time someone changes the value with + * this Controller. + * + * @param {Function} fnc This function will be called whenever the value + * is modified via this Controller. + * @returns {dat.controllers.Controller} this + */ + onChange: function (fnc) { + this.__onChange = fnc; + return this; + }, - /** - * Specify that a function fire every time someone "finishes" changing - * the value wih this Controller. Useful for values that change - * incrementally like numbers or strings. - * - * @param {Function} fnc This function will be called whenever - * someone "finishes" changing the value via this Controller. - * @returns {dat.controllers.Controller} this - */ - onFinishChange: function(fnc) { - this.__onFinishChange = fnc; - return this; - }, + /** + * Specify that a function fire every time someone "finishes" changing + * the value wih this Controller. Useful for values that change + * incrementally like numbers or strings. + * + * @param {Function} fnc This function will be called whenever + * someone "finishes" changing the value via this Controller. + * @returns {dat.controllers.Controller} this + */ + onFinishChange: function (fnc) { + this.__onFinishChange = fnc; + return this; + }, - /** - * Change the value of object[property] - * - * @param {Object} newValue The new value of object[property] - */ - setValue: function(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] - */ - getValue: function() { - return this.object[this.property]; - }, - - /** - * Refreshes the visual display of a Controller in order to keep sync - * with the object's current value. - * @returns {dat.controllers.Controller} this - */ - updateDisplay: function() { - return this; - }, - - /** - * @returns {Boolean} true if the value has deviated from initialValue - */ - isModified: function() { - return this.initialValue !== this.getValue() + /** + * Change the value of object[property] + * + * @param {Object} newValue The new value of object[property] + */ + setValue: function (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] + */ + getValue: function () { + return this.object[this.property]; + }, + + /** + * Refreshes the visual display of a Controller in order to keep sync + * with the object's current value. + * @returns {dat.controllers.Controller} this + */ + updateDisplay: function () { + return this; + }, + + /** + * @returns {Boolean} true if the value has deviated from initialValue + */ + isModified: function () { + return this.initialValue !== this.getValue() } + } + ); return Controller; - -}); \ No newline at end of file +}); diff --git a/src/dat/controllers/FunctionController.js b/src/dat/controllers/FunctionController.js index e7748cc..c9f5e3a 100644 --- a/src/dat/controllers/FunctionController.js +++ b/src/dat/controllers/FunctionController.js @@ -12,10 +12,10 @@ */ define([ - 'dat/controllers/Controller', - 'dat/dom/dom', - 'dat/utils/common' -], function(Controller, dom, common) { + 'dat/controllers/Controller', + 'dat/dom/dom', + 'dat/utils/common' +], function (Controller, dom, common) { /** * @class Provides a GUI interface to fire a specified method, a property of an object. @@ -27,7 +27,7 @@ define([ * * @member dat.controllers */ - var FunctionController = function(object, property, text) { + var FunctionController = function (object, property, text) { FunctionController.superclass.call(this, object, property); @@ -35,7 +35,7 @@ define([ this.__button = document.createElement('div'); this.__button.innerHTML = text === undefined ? 'Fire' : text; - dom.bind(this.__button, 'click', function(e) { + dom.bind(this.__button, 'click', function (e) { e.preventDefault(); _this.fire(); return false; @@ -45,27 +45,25 @@ define([ this.domElement.appendChild(this.__button); - }; FunctionController.superclass = Controller; common.extend( - FunctionController.prototype, - Controller.prototype, - { - - fire: function() { - if (this.__onChange) { - this.__onChange.call(this); - } - this.getValue().call(this.object); - if (this.__onFinishChange) { - this.__onFinishChange.call(this, this.getValue()); - } + FunctionController.prototype, + Controller.prototype, { + + fire: function () { + if (this.__onChange) { + this.__onChange.call(this); + } + this.getValue().call(this.object); + if (this.__onFinishChange) { + this.__onFinishChange.call(this, this.getValue()); } } + } ); diff --git a/src/dat/controllers/NumberController.js b/src/dat/controllers/NumberController.js index 4cab081..c852052 100644 --- a/src/dat/controllers/NumberController.js +++ b/src/dat/controllers/NumberController.js @@ -12,9 +12,9 @@ */ define([ - 'dat/controllers/Controller', - 'dat/utils/common' -], function(Controller, common) { + 'dat/controllers/Controller', + 'dat/utils/common' +], function (Controller, common) { /** * @class Represents a given property of an object that is a number. @@ -30,7 +30,7 @@ define([ * * @member dat.controllers */ - var NumberController = function(object, property, params) { + var NumberController = function (object, property, params) { NumberController.superclass.call(this, object, property); @@ -46,89 +46,88 @@ define([ 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; + this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10; } } else { - this.__impliedStep = this.__step; + this.__impliedStep = this.__step; } this.__precision = numDecimals(this.__impliedStep); - }; NumberController.superclass = Controller; common.extend( - NumberController.prototype, - Controller.prototype, + NumberController.prototype, + Controller.prototype, - /** @lends dat.controllers.NumberController.prototype */ - { + /** @lends dat.controllers.NumberController.prototype */ + { - setValue: function(v) { + setValue: function (v) { - if (this.__min !== undefined && v < this.__min) { - v = this.__min; - } else if (this.__max !== undefined && v > this.__max) { - v = this.__max; - } - - if (this.__step !== undefined && v % this.__step != 0) { - v = Math.round(v / this.__step) * this.__step; - } - - return NumberController.superclass.prototype.setValue.call(this, v); - - }, - - /** - * Specify a minimum value for object[property]. - * - * @param {Number} minValue The minimum value for - * object[property] - * @returns {dat.controllers.NumberController} this - */ - min: function(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 - */ - max: function(v) { - this.__max = v; - return this; - }, - - /** - * Specify a step value that dat.controllers.NumberController - * increments by. - * - * @param {Number} stepValue The step value for - * dat.controllers.NumberController - * @default if minimum and maximum specified increment is 1% of the - * difference otherwise stepValue is 1 - * @returns {dat.controllers.NumberController} this - */ - step: function(v) { - this.__step = v; - this.__impliedStep = v; - this.__precision = numDecimals(v); - return this; + if (this.__min !== undefined && v < this.__min) { + v = this.__min; + } else if (this.__max !== undefined && v > this.__max) { + v = this.__max; } + if (this.__step !== undefined && v % this.__step != 0) { + v = Math.round(v / this.__step) * this.__step; + } + + return NumberController.superclass.prototype.setValue.call(this, v); + + }, + + /** + * Specify a minimum value for object[property]. + * + * @param {Number} minValue The minimum value for + * object[property] + * @returns {dat.controllers.NumberController} this + */ + min: function (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 + */ + max: function (v) { + this.__max = v; + return this; + }, + + /** + * Specify a step value that dat.controllers.NumberController + * increments by. + * + * @param {Number} stepValue The step value for + * dat.controllers.NumberController + * @default if minimum and maximum specified increment is 1% of the + * difference otherwise stepValue is 1 + * @returns {dat.controllers.NumberController} this + */ + step: function (v) { + this.__step = v; + this.__impliedStep = v; + this.__precision = numDecimals(v); + return this; } + } + ); function numDecimals(x) { diff --git a/src/dat/controllers/NumberControllerBox.js b/src/dat/controllers/NumberControllerBox.js index b59bf73..120d354 100644 --- a/src/dat/controllers/NumberControllerBox.js +++ b/src/dat/controllers/NumberControllerBox.js @@ -15,7 +15,7 @@ define([ 'dat/controllers/NumberController', 'dat/dom/dom', 'dat/utils/common' -], function(NumberController, dom, common) { +], function (NumberController, dom, common) { /** * @class Represents a given property of an object that is a number and @@ -33,7 +33,7 @@ define([ * * @member dat.controllers */ - var NumberControllerBox = function(object, property, params) { + var NumberControllerBox = function (object, property, params) { this.__truncationSuspended = false; @@ -55,7 +55,7 @@ define([ dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'mousedown', onMouseDown); - dom.bind(this.__input, 'keydown', function(e) { + dom.bind(this.__input, 'keydown', function (e) { // When pressing entire, you can be as precise as you want. if (e.keyCode === 13) { @@ -108,22 +108,22 @@ define([ common.extend( - NumberControllerBox.prototype, - NumberController.prototype, + NumberControllerBox.prototype, + NumberController.prototype, - { + { - updateDisplay: function() { - // Use the same solution from StringController.js to enable - // editing s while "listen()"ing - if (!dom.isActive(this.__input)) { - this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision); - } - return NumberControllerBox.superclass.prototype.updateDisplay.call(this); + updateDisplay: function () { + // Use the same solution from StringController.js to enable + // editing s while "listen()"ing + if (!dom.isActive(this.__input)) { + this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision); } - + return NumberControllerBox.superclass.prototype.updateDisplay.call(this); } + } + ); function roundToDecimal(value, decimals) { @@ -134,4 +134,3 @@ define([ return NumberControllerBox; }); - diff --git a/src/dat/controllers/NumberControllerSlider.css b/src/dat/controllers/NumberControllerSlider.css index c52186c..0d03a67 100644 --- a/src/dat/controllers/NumberControllerSlider.css +++ b/src/dat/controllers/NumberControllerSlider.css @@ -12,7 +12,7 @@ */ .slider { - box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); height: 1em; border-radius: 1em; background-color: #eee; @@ -33,11 +33,11 @@ display: inline-block; border-radius: 1em; background-color: #fff; - border: 1px solid #aaa; + border: 1px solid #aaa; content: ''; float: right; margin-right: -1em; margin-top: -1px; height: 0.9em; width: 0.9em; -} \ No newline at end of file +} diff --git a/src/dat/controllers/NumberControllerSlider.js b/src/dat/controllers/NumberControllerSlider.js index 6794008..61215a1 100644 --- a/src/dat/controllers/NumberControllerSlider.js +++ b/src/dat/controllers/NumberControllerSlider.js @@ -17,113 +17,113 @@ define([ 'dat/utils/css', 'dat/utils/common', 'text!dat/controllers/NumberControllerSlider.css' -], -function(NumberController, dom, css, common, styleSheet) { + ], + function (NumberController, dom, css, common, styleSheet) { - /** - * @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(object, property, min, max, step) { + /** + * @class Represents a given property of an object that is a number, contains + * a minimum and maximum, and provides a slider element with which to + * manipulate it. It should be noted that the slider element is made up of + * <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 (object, property, min, max, step) { - NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step }); + NumberControllerSlider.superclass.call(this, object, property, { + min: min, + max: max, + step: step + }); - var _this = this; + var _this = this; - this.__background = document.createElement('div'); - this.__foreground = document.createElement('div'); - + this.__background = document.createElement('div'); + this.__foreground = document.createElement('div'); + dom.bind(this.__background, 'mousedown', onMouseDown); - dom.bind(this.__background, 'mousedown', onMouseDown); - - dom.addClass(this.__background, 'slider'); - dom.addClass(this.__foreground, 'slider-fg'); + dom.addClass(this.__background, 'slider'); + dom.addClass(this.__foreground, 'slider-fg'); - function onMouseDown(e) { + function onMouseDown(e) { - dom.bind(window, 'mousemove', onMouseDrag); - dom.bind(window, 'mouseup', onMouseUp); + dom.bind(window, 'mousemove', onMouseDrag); + dom.bind(window, 'mouseup', onMouseUp); - onMouseDrag(e); - } - - function onMouseDrag(e) { - - e.preventDefault(); - - var offset = dom.getOffset(_this.__background); - var width = dom.getWidth(_this.__background); - - _this.setValue( - map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max) - ); - - return false; - - } - - function onMouseUp() { - dom.unbind(window, 'mousemove', onMouseDrag); - dom.unbind(window, 'mouseup', onMouseUp); - if (_this.__onFinishChange) { - _this.__onFinishChange.call(_this, _this.getValue()); + onMouseDrag(e); } - } - this.updateDisplay(); + function onMouseDrag(e) { - this.__background.appendChild(this.__foreground); - this.domElement.appendChild(this.__background); + e.preventDefault(); - }; + var offset = dom.getOffset(_this.__background); + var width = dom.getWidth(_this.__background); - NumberControllerSlider.superclass = NumberController; + _this.setValue( + map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max) + ); - /** - * Injects default stylesheet for slider elements. - */ - NumberControllerSlider.useDefaultStyles = function() { - css.inject(styleSheet); - }; + return false; - common.extend( + } + + function onMouseUp() { + dom.unbind(window, 'mousemove', onMouseDrag); + dom.unbind(window, 'mouseup', onMouseUp); + if (_this.__onFinishChange) { + _this.__onFinishChange.call(_this, _this.getValue()); + } + } + + this.updateDisplay(); + + this.__background.appendChild(this.__foreground); + this.domElement.appendChild(this.__background); + + }; + + NumberControllerSlider.superclass = NumberController; + + /** + * Injects default stylesheet for slider elements. + */ + NumberControllerSlider.useDefaultStyles = function () { + css.inject(styleSheet); + }; + + common.extend( NumberControllerSlider.prototype, NumberController.prototype, { - updateDisplay: function() { - var pct = (this.getValue() - this.__min)/(this.__max - this.__min); - this.__foreground.style.width = pct*100+'%'; + updateDisplay: function () { + var pct = (this.getValue() - this.__min) / (this.__max - this.__min); + this.__foreground.style.width = pct * 100 + '%'; return NumberControllerSlider.superclass.prototype.updateDisplay.call(this); } } + ); + function map(v, i1, i2, o1, o2) { + return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); + } - ); + return NumberControllerSlider; - function map(v, i1, i2, o1, o2) { - return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); - } - - return NumberControllerSlider; - -}); \ No newline at end of file + }); diff --git a/src/dat/controllers/OptionController.js b/src/dat/controllers/OptionController.js index 1e9c53e..94e946d 100644 --- a/src/dat/controllers/OptionController.js +++ b/src/dat/controllers/OptionController.js @@ -15,73 +15,73 @@ define([ 'dat/controllers/Controller', 'dat/dom/dom', 'dat/utils/common' -], -function(Controller, dom, common) { - - /** - * @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(object, property, options) { - - OptionController.superclass.call(this, object, property); - - var _this = this; + ], + function (Controller, dom, common) { /** - * The drop down menu - * @ignore + * @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 */ - this.__select = document.createElement('select'); + var OptionController = function (object, property, options) { + + OptionController.superclass.call(this, object, property); + + var _this = this; + + /** + * The drop down menu + * @ignore + */ + this.__select = document.createElement('select'); + + if (common.isArray(options)) { + var map = {}; + common.each(options, function (element) { + map[element] = element; + }); + options = map; + } + + common.each(options, function (value, key) { + + var opt = document.createElement('option'); + opt.innerHTML = key; + opt.setAttribute('value', value); + _this.__select.appendChild(opt); - if (common.isArray(options)) { - var map = {}; - common.each(options, function(element) { - map[element] = element; }); - options = map; - } - common.each(options, function(value, key) { + // Acknowledge original value + this.updateDisplay(); - var opt = document.createElement('option'); - opt.innerHTML = key; - opt.setAttribute('value', value); - _this.__select.appendChild(opt); + dom.bind(this.__select, 'change', function () { + var desiredValue = this.options[this.selectedIndex].value; + _this.setValue(desiredValue); + }); - }); + this.domElement.appendChild(this.__select); - // Acknowledge original value - this.updateDisplay(); + }; - dom.bind(this.__select, 'change', function() { - var desiredValue = this.options[this.selectedIndex].value; - _this.setValue(desiredValue); - }); + OptionController.superclass = Controller; - this.domElement.appendChild(this.__select); - - }; - - OptionController.superclass = Controller; - - common.extend( + common.extend( OptionController.prototype, Controller.prototype, { - setValue: function(v) { + setValue: function (v) { var toReturn = OptionController.superclass.prototype.setValue.call(this, v); if (this.__onFinishChange) { this.__onFinishChange.call(this, this.getValue()); @@ -89,15 +89,15 @@ function(Controller, dom, common) { return toReturn; }, - updateDisplay: function() { + updateDisplay: function () { this.__select.value = this.getValue(); return OptionController.superclass.prototype.updateDisplay.call(this); } } - ); + ); - return OptionController; + return OptionController; -}); \ No newline at end of file + }); diff --git a/src/dat/controllers/StringController.js b/src/dat/controllers/StringController.js index 75a5fd2..0ae731b 100644 --- a/src/dat/controllers/StringController.js +++ b/src/dat/controllers/StringController.js @@ -12,10 +12,10 @@ */ define([ - 'dat/controllers/Controller', - 'dat/dom/dom', - 'dat/utils/common' -], function(Controller, dom, common) { + 'dat/controllers/Controller', + 'dat/dom/dom', + 'dat/utils/common' +], function (Controller, dom, common) { /** * @class Provides a text input to alter the string property of an object. @@ -27,7 +27,7 @@ define([ * * @member dat.controllers */ - var StringController = function(object, property) { + var StringController = function (object, property) { StringController.superclass.call(this, object, property); @@ -39,12 +39,11 @@ define([ dom.bind(this.__input, 'keyup', onChange); dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'blur', onBlur); - dom.bind(this.__input, 'keydown', function(e) { + dom.bind(this.__input, 'keydown', function (e) { if (e.keyCode === 13) { this.blur(); } }); - function onChange() { _this.setValue(_this.__input.value); @@ -66,24 +65,24 @@ define([ common.extend( - StringController.prototype, - Controller.prototype, + StringController.prototype, + Controller.prototype, - { + { - updateDisplay: function() { - // Stops the caret from moving on account of: - // keyup -> setValue -> updateDisplay - if (!dom.isActive(this.__input)) { - this.__input.value = this.getValue(); - } - return StringController.superclass.prototype.updateDisplay.call(this); + updateDisplay: function () { + // Stops the caret from moving on account of: + // keyup -> setValue -> updateDisplay + if (!dom.isActive(this.__input)) { + this.__input.value = this.getValue(); } - + return StringController.superclass.prototype.updateDisplay.call(this); } + } + ); return StringController; -}); \ No newline at end of file +}); diff --git a/src/dat/controllers/factory.js b/src/dat/controllers/factory.js index 897b267..2ce8ecc 100644 --- a/src/dat/controllers/factory.js +++ b/src/dat/controllers/factory.js @@ -12,54 +12,57 @@ */ define([ - 'dat/controllers/OptionController', - 'dat/controllers/NumberControllerBox', - 'dat/controllers/NumberControllerSlider', - 'dat/controllers/StringController', - 'dat/controllers/FunctionController', - 'dat/controllers/BooleanController', - 'dat/utils/common' -], - function(OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) { + 'dat/controllers/OptionController', + 'dat/controllers/NumberControllerBox', + 'dat/controllers/NumberControllerSlider', + 'dat/controllers/StringController', + 'dat/controllers/FunctionController', + 'dat/controllers/BooleanController', + 'dat/utils/common' + ], + function (OptionController, NumberControllerBox, NumberControllerSlider, StringController, FunctionController, BooleanController, common) { - return function(object, property) { + return function (object, property) { - var initialValue = object[property]; + var initialValue = object[property]; - // Providing options? - if (common.isArray(arguments[2]) || common.isObject(arguments[2])) { - return new OptionController(object, property, arguments[2]); - } + // Providing options? + if (common.isArray(arguments[2]) || common.isObject(arguments[2])) { + return new OptionController(object, property, arguments[2]); + } - // Providing a map? + // Providing a map? - if (common.isNumber(initialValue)) { + if (common.isNumber(initialValue)) { - if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) { + if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) { - // Has min and max. - return new NumberControllerSlider(object, property, arguments[2], arguments[3]); + // Has min and max. + return new NumberControllerSlider(object, property, arguments[2], arguments[3]); - } else { + } else { - return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] }); + return new NumberControllerBox(object, property, { + min: arguments[2], + max: arguments[3] + }); - } - - } - - if (common.isString(initialValue)) { - return new StringController(object, property); - } - - if (common.isFunction(initialValue)) { - return new FunctionController(object, property, ''); - } - - if (common.isBoolean(initialValue)) { - return new BooleanController(object, property); } } - }); \ No newline at end of file + if (common.isString(initialValue)) { + return new StringController(object, property); + } + + if (common.isFunction(initialValue)) { + return new FunctionController(object, property, ''); + } + + if (common.isBoolean(initialValue)) { + return new BooleanController(object, property); + } + + } + + }); diff --git a/src/dat/dom/CenteredDiv.js b/src/dat/dom/CenteredDiv.js index 98f0602..3b332ed 100644 --- a/src/dat/dom/CenteredDiv.js +++ b/src/dat/dom/CenteredDiv.js @@ -14,10 +14,9 @@ define([ 'dat/dom/dom', 'dat/utils/common' -], function(dom, common) { +], function (dom, common) { - - var CenteredDiv = function() { + var CenteredDiv = function () { this.backgroundElement = document.createElement('div'); common.extend(this.backgroundElement.style, { @@ -44,19 +43,17 @@ define([ transition: 'transform 0.2s ease-out, opacity 0.2s linear' }); - document.body.appendChild(this.backgroundElement); document.body.appendChild(this.domElement); var _this = this; - dom.bind(this.backgroundElement, 'click', function() { + dom.bind(this.backgroundElement, 'click', function () { _this.hide(); }); - }; - CenteredDiv.prototype.show = function() { + CenteredDiv.prototype.show = function () { var _this = this; @@ -64,12 +61,12 @@ define([ this.domElement.style.display = 'block'; this.domElement.style.opacity = 0; -// this.domElement.style.top = '52%'; + // this.domElement.style.top = '52%'; this.domElement.style.webkitTransform = 'scale(1.1)'; this.layout(); - common.defer(function() { + common.defer(function () { _this.backgroundElement.style.opacity = 1; _this.domElement.style.opacity = 1; _this.domElement.style.webkitTransform = 'scale(1)'; @@ -77,11 +74,11 @@ define([ }; - CenteredDiv.prototype.hide = function() { + CenteredDiv.prototype.hide = function () { var _this = this; - var hide = function() { + var hide = function () { _this.domElement.style.display = 'none'; _this.backgroundElement.style.display = 'none'; @@ -97,21 +94,21 @@ define([ dom.bind(this.domElement, 'oTransitionEnd', hide); this.backgroundElement.style.opacity = 0; -// this.domElement.style.top = '48%'; + // this.domElement.style.top = '48%'; this.domElement.style.opacity = 0; this.domElement.style.webkitTransform = 'scale(1.1)'; }; - CenteredDiv.prototype.layout = function() { - this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px'; - this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px'; + CenteredDiv.prototype.layout = function () { + this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px'; + this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px'; }; - + function lockScroll(e) { console.log(e); } return CenteredDiv; -}); \ No newline at end of file +}); diff --git a/src/dat/dom/dom.js b/src/dat/dom/dom.js index 734bc3e..355949b 100644 --- a/src/dat/dom/dom.js +++ b/src/dat/dom/dom.js @@ -13,17 +13,17 @@ define([ 'dat/utils/common' -], function(common) { +], function (common) { var EVENT_MAP = { 'HTMLEvents': ['change'], - 'MouseEvents': ['click','mousemove','mousedown','mouseup', 'mouseover'], + 'MouseEvents': ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'], 'KeyboardEvents': ['keydown'] }; var EVENT_MAP_INV = {}; - common.each(EVENT_MAP, function(v, k) { - common.each(v, function(e) { + common.each(EVENT_MAP, function (v, k) { + common.each(v, function (e) { EVENT_MAP_INV[e] = k; }); }); @@ -57,14 +57,13 @@ define([ * @param elem * @param selectable */ - makeSelectable: function(elem, selectable) { + makeSelectable: function (elem, selectable) { if (elem === undefined || elem.style === undefined) return; - elem.onselectstart = selectable ? function() { + elem.onselectstart = selectable ? function () { return false; - } : function() { - }; + } : function () {}; elem.style.MozUserSelect = selectable ? 'auto' : 'none'; elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none'; @@ -78,7 +77,7 @@ define([ * @param horizontal * @param vertical */ - makeFullscreen: function(elem, horizontal, vertical) { + makeFullscreen: function (elem, horizontal, vertical) { if (common.isUndefined(horizontal)) horizontal = true; if (common.isUndefined(vertical)) vertical = true; @@ -102,7 +101,7 @@ define([ * @param eventType * @param params */ - fakeEvent: function(elem, eventType, params, aux) { + fakeEvent: function (elem, eventType, params, aux) { params = params || {}; var className = EVENT_MAP_INV[eventType]; if (!className) { @@ -110,38 +109,38 @@ define([ } var evt = document.createEvent(className); switch (className) { - case 'MouseEvents': - var clientX = params.x || params.clientX || 0; - var clientY = params.y || params.clientY || 0; - evt.initMouseEvent(eventType, params.bubbles || false, - params.cancelable || true, window, params.clickCount || 1, - 0, //screen X - 0, //screen Y - clientX, //client X - clientY, //client Y - false, false, false, false, 0, null); - break; - case 'KeyboardEvents': - var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz - common.defaults(params, { - cancelable: true, - ctrlKey: false, - altKey: false, - shiftKey: false, - metaKey: false, - keyCode: undefined, - charCode: undefined - }); - init(eventType, params.bubbles || false, - params.cancelable, window, - params.ctrlKey, params.altKey, - params.shiftKey, params.metaKey, - params.keyCode, params.charCode); - break; - default: - evt.initEvent(eventType, params.bubbles || false, - params.cancelable || true); - break; + case 'MouseEvents': + var clientX = params.x || params.clientX || 0; + var clientY = params.y || params.clientY || 0; + evt.initMouseEvent(eventType, params.bubbles || false, + params.cancelable || true, window, params.clickCount || 1, + 0, //screen X + 0, //screen Y + clientX, //client X + clientY, //client Y + false, false, false, false, 0, null); + break; + case 'KeyboardEvents': + var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz + common.defaults(params, { + cancelable: true, + ctrlKey: false, + altKey: false, + shiftKey: false, + metaKey: false, + keyCode: undefined, + charCode: undefined + }); + init(eventType, params.bubbles || false, + params.cancelable, window, + params.ctrlKey, params.altKey, + params.shiftKey, params.metaKey, + params.keyCode, params.charCode); + break; + default: + evt.initEvent(eventType, params.bubbles || false, + params.cancelable || true); + break; } common.defaults(evt, aux); elem.dispatchEvent(evt); @@ -154,7 +153,7 @@ define([ * @param func * @param bool */ - bind: function(elem, event, func, bool) { + bind: function (elem, event, func, bool) { bool = bool || false; if (elem.addEventListener) elem.addEventListener(event, func, bool); @@ -170,7 +169,7 @@ define([ * @param func * @param bool */ - unbind: function(elem, event, func, bool) { + unbind: function (elem, event, func, bool) { bool = bool || false; if (elem.removeEventListener) elem.removeEventListener(event, func, bool); @@ -184,7 +183,7 @@ define([ * @param elem * @param className */ - addClass: function(elem, className) { + addClass: function (elem, className) { if (elem.className === undefined) { elem.className = className; } else if (elem.className !== className) { @@ -202,7 +201,7 @@ define([ * @param elem * @param className */ - removeClass: function(elem, className) { + removeClass: function (elem, className) { if (className) { if (elem.className === undefined) { // elem.className = className; @@ -222,7 +221,7 @@ define([ return dom; }, - hasClass: function(elem, className) { + hasClass: function (elem, className) { return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false; }, @@ -230,38 +229,41 @@ define([ * * @param elem */ - getWidth: function(elem) { + getWidth: function (elem) { var style = getComputedStyle(elem); return cssValueToPixels(style['border-left-width']) + - cssValueToPixels(style['border-right-width']) + - cssValueToPixels(style['padding-left']) + - cssValueToPixels(style['padding-right']) + - cssValueToPixels(style['width']); + cssValueToPixels(style['border-right-width']) + + cssValueToPixels(style['padding-left']) + + cssValueToPixels(style['padding-right']) + + cssValueToPixels(style['width']); }, /** * * @param elem */ - getHeight: function(elem) { + getHeight: function (elem) { var style = getComputedStyle(elem); return cssValueToPixels(style['border-top-width']) + - cssValueToPixels(style['border-bottom-width']) + - cssValueToPixels(style['padding-top']) + - cssValueToPixels(style['padding-bottom']) + - cssValueToPixels(style['height']); + cssValueToPixels(style['border-bottom-width']) + + cssValueToPixels(style['padding-top']) + + cssValueToPixels(style['padding-bottom']) + + cssValueToPixels(style['height']); }, /** * * @param elem */ - getOffset: function(elem) { - var offset = {left: 0, top:0}; + getOffset: function (elem) { + var offset = { + left: 0, + top: 0 + }; if (elem.offsetParent) { do { offset.left += elem.offsetLeft; @@ -276,12 +278,12 @@ define([ * * @param elem */ - isActive: function(elem) { - return elem === document.activeElement && ( elem.type || elem.href ); + isActive: function (elem) { + return elem === document.activeElement && (elem.type || elem.href); } }; return dom; -}); \ No newline at end of file +}); diff --git a/src/dat/gui/GUI.css b/src/dat/gui/GUI.css index e5af34c..eee3589 100644 --- a/src/dat/gui/GUI.css +++ b/src/dat/gui/GUI.css @@ -39,7 +39,6 @@ a.guidat-toggle:active { text-align: center; display: block; padding: 5px; - } a.guidat-toggle:hover { diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js index 2a28d86..6ce1eb5 100644 --- a/src/dat/gui/GUI.js +++ b/src/dat/gui/GUI.js @@ -34,7 +34,7 @@ define([ 'dat/utils/common' -], function(css, saveDialogueContents, styleSheet, controllerFactory, Controller, BooleanController, FunctionController, NumberControllerBox, NumberControllerSlider, OptionController, ColorController, requestAnimationFrame, CenteredDiv, dom, common) { +], function (css, saveDialogueContents, styleSheet, controllerFactory, Controller, BooleanController, FunctionController, NumberControllerBox, NumberControllerSlider, OptionController, ColorController, requestAnimationFrame, CenteredDiv, dom, common) { css.inject(styleSheet); @@ -48,7 +48,7 @@ define([ var DEFAULT_DEFAULT_PRESET_NAME = 'Default'; - var SUPPORTS_LOCAL_STORAGE = (function() { + var SUPPORTS_LOCAL_STORAGE = (function () { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { @@ -85,7 +85,7 @@ define([ * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in. * @param {Boolean} [params.closed] If true, starts closed */ - var GUI = function(params) { + var GUI = function (params) { var _this = this; @@ -148,7 +148,6 @@ define([ hideable: params.autoPlace }); - if (!common.isUndefined(params.load)) { // Explicit preset @@ -156,7 +155,9 @@ define([ } else { - params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME }; + params.load = { + preset: DEFAULT_DEFAULT_PRESET_NAME + }; } @@ -167,170 +168,169 @@ define([ // Only root level GUI's are resizable. params.resizable = common.isUndefined(params.parent) && params.resizable; - if (params.autoPlace && common.isUndefined(params.scrollable)) { params.scrollable = true; } -// params.scrollable = common.isUndefined(params.parent) && 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 use_local_storage = - SUPPORTS_LOCAL_STORAGE && - localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true'; + SUPPORTS_LOCAL_STORAGE && + localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true'; var saveToLocalStorage; Object.defineProperties(this, - /** @lends dat.gui.GUI.prototype */ - { + /** @lends dat.gui.GUI.prototype */ + { - /** - * The parent GUI - * @type dat.gui.GUI - */ - parent: { - get: function() { - return params.parent; + /** + * The parent GUI + * @type dat.gui.GUI + */ + parent: { + get: function () { + return params.parent; + } + }, + + scrollable: { + get: function () { + return params.scrollable; + } + }, + + /** + * Handles GUI's element placement for you + * @type Boolean + */ + autoPlace: { + get: function () { + return params.autoPlace; + } + }, + + /** + * The identifier for a set of saved values + * @type String + */ + preset: { + + get: function () { + if (_this.parent) { + return _this.getRoot().preset; + } else { + return params.load.preset; } }, - scrollable: { - get: function() { - return params.scrollable; + set: function (v) { + if (_this.parent) { + _this.getRoot().preset = v; + } else { + params.load.preset = v; } - }, - - /** - * Handles GUI's element placement for you - * @type Boolean - */ - autoPlace: { - get: function() { - return params.autoPlace; - } - }, - - /** - * The identifier for a set of saved values - * @type String - */ - preset: { - - get: function() { - if (_this.parent) { - return _this.getRoot().preset; - } else { - return params.load.preset; - } - }, - - set: function(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() { - return params.width; - }, - set: function(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() { - return params.name; - }, - set: function(v) { - // TODO Check for collisions among sibling folders - params.name = v; - if (title_row_name) { - title_row_name.innerHTML = params.name; - } - } - }, - - /** - * Whether the GUI is collapsed or not - * @type Boolean - */ - closed: { - get: function() { - return params.closed; - }, - set: function(v) { - params.closed = v; - if (params.closed) { - dom.addClass(_this.__ul, GUI.CLASS_CLOSED); - } else { - dom.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() { - return params.load; - } - }, - - /** - * Determines whether or not to use localStorage as the means for - * remembering - * @type Boolean - */ - useLocalStorage: { - - get: function() { - return use_local_storage; - }, - set: function(bool) { - if (SUPPORTS_LOCAL_STORAGE) { - use_local_storage = bool; - if (bool) { - dom.bind(window, 'unload', saveToLocalStorage); - } else { - dom.unbind(window, 'unload', saveToLocalStorage); - } - localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool); - } - } - + setPresetSelectIndex(this); + _this.revert(); } - }); + }, + + /** + * The width of GUI element + * @type Number + */ + width: { + get: function () { + return params.width; + }, + set: function (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 () { + return params.name; + }, + set: function (v) { + // TODO Check for collisions among sibling folders + params.name = v; + if (title_row_name) { + title_row_name.innerHTML = params.name; + } + } + }, + + /** + * Whether the GUI is collapsed or not + * @type Boolean + */ + closed: { + get: function () { + return params.closed; + }, + set: function (v) { + params.closed = v; + if (params.closed) { + dom.addClass(_this.__ul, GUI.CLASS_CLOSED); + } else { + dom.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 () { + return params.load; + } + }, + + /** + * Determines whether or not to use localStorage as the means for + * remembering + * @type Boolean + */ + useLocalStorage: { + + get: function () { + return use_local_storage; + }, + set: function (bool) { + if (SUPPORTS_LOCAL_STORAGE) { + use_local_storage = bool; + if (bool) { + dom.bind(window, 'unload', saveToLocalStorage); + } else { + dom.unbind(window, 'unload', saveToLocalStorage); + } + localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool); + } + } + + } + + }); // Are we a root level GUI? if (common.isUndefined(params.parent)) { @@ -362,14 +362,12 @@ define([ dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON); this.domElement.appendChild(this.__closeButton); - dom.bind(this.__closeButton, 'click', function() { + dom.bind(this.__closeButton, 'click', function () { _this.closed = !_this.closed; - }); - // Oh, you're a nested GUI! } else { @@ -382,7 +380,7 @@ define([ var title_row = addRow(_this, title_row_name); - var on_click_title = function(e) { + var on_click_title = function (e) { e.preventDefault(); _this.closed = !_this.closed; return false; @@ -419,19 +417,25 @@ define([ } - // Make it not elastic. if (!this.parent) setWidth(_this, params.width); } - dom.bind(window, 'resize', function() { _this.onResize() }); - dom.bind(this.__ul, 'webkitTransitionEnd', function() { _this.onResize(); }); - dom.bind(this.__ul, 'transitionend', function() { _this.onResize() }); - dom.bind(this.__ul, 'oTransitionEnd', function() { _this.onResize() }); + dom.bind(window, 'resize', function () { + _this.onResize() + }); + dom.bind(this.__ul, 'webkitTransitionEnd', function () { + _this.onResize(); + }); + dom.bind(this.__ul, 'transitionend', function () { + _this.onResize() + }); + dom.bind(this.__ul, 'oTransitionEnd', function () { + _this.onResize() + }); this.onResize(); - if (params.resizable) { addResizeHandle(this); } @@ -446,24 +450,25 @@ define([ this.saveToLocalStorageIfPossible = saveToLocalStorage; var root = _this.getRoot(); - function resetWidth() { - var root = _this.getRoot(); - root.width += 1; - common.defer(function() { - root.width -= 1; - }); - } - if (!params.parent) { - resetWidth(); - } + function resetWidth() { + var root = _this.getRoot(); + root.width += 1; + common.defer(function () { + root.width -= 1; + }); + } + + if (!params.parent) { + resetWidth(); + } }; - GUI.toggleHide = function() { + GUI.toggleHide = function () { hide = !hide; - common.each(hideable_guis, function(gui) { + common.each(hideable_guis, function (gui) { gui.domElement.style.zIndex = hide ? -999 : 999; gui.domElement.style.opacity = hide ? 0 : 1; }); @@ -482,10 +487,10 @@ define([ GUI.TEXT_CLOSED = 'Close Controls'; GUI.TEXT_OPEN = 'Open Controls'; - dom.bind(window, 'keydown', function(e) { + dom.bind(window, 'keydown', function (e) { if (document.activeElement.type !== 'text' && - (e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) { + (e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) { GUI.toggleHide(); } @@ -493,316 +498,316 @@ define([ common.extend( - GUI.prototype, + GUI.prototype, - /** @lends dat.gui.GUI */ - { + /** @lends dat.gui.GUI */ + { - /** - * @param object - * @param property - * @returns {dat.controllers.Controller} The new controller that was added. - * @instance - */ - add: function(object, property) { + /** + * @param object + * @param property + * @returns {dat.controllers.Controller} The new controller that was added. + * @instance + */ + add: function (object, property) { - return add( - this, - object, - property, - { - factoryArgs: Array.prototype.slice.call(arguments, 2) - } - ); - - }, - - /** - * @param object - * @param property - * @returns {dat.controllers.ColorController} The new controller that was added. - * @instance - */ - addColor: function(object, property) { - - return add( - this, - object, - property, - { - color: true - } - ); - - }, - - /** - * @param controller - * @instance - */ - remove: function(controller) { - - // TODO listening? - this.__ul.removeChild(controller.__li); - this.__controllers.splice(this.__controllers.indexOf(controller), 1); - var _this = this; - common.defer(function() { - _this.onResize(); - }); - - }, - - destroy: function() { - - if (this.autoPlace) { - auto_place_container.removeChild(this.domElement); + return add( + this, + object, + property, { + factoryArgs: Array.prototype.slice.call(arguments, 2) } + ); - }, + }, - /** - * @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(name) { + /** + * @param object + * @param property + * @returns {dat.controllers.ColorController} The new controller that was added. + * @instance + */ + addColor: function (object, property) { - // 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 + '"'); + return add( + this, + object, + property, { + color: true } + ); - var new_gui_params = { 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. - new_gui_params.autoPlace = this.autoPlace; + /** + * @param controller + * @instance + */ + remove: function (controller) { - // Do we have saved appearance data for this folder? + // TODO listening? + this.__ul.removeChild(controller.__li); + this.__controllers.splice(this.__controllers.indexOf(controller), 1); + var _this = this; + common.defer(function () { + _this.onResize(); + }); - 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 - new_gui_params.closed = this.load.folders[name].closed; + destroy: function () { - // Pass down the loaded data - new_gui_params.load = this.load.folders[name]; - - } - - var gui = new GUI(new_gui_params); - this.__folders[name] = gui; - - var li = addRow(this, gui.domElement); - dom.addClass(li, 'folder'); - return gui; - - }, - - open: function() { - this.closed = false; - }, - - close: function() { - this.closed = true; - }, - - onResize: function() { - - var root = this.getRoot(); - - if (root.scrollable) { - - var top = dom.getOffset(root.__ul).top; - var h = 0; - - common.each(root.__ul.childNodes, function(node) { - if (! (root.autoPlace && node === root.__save_row)) - h += dom.getHeight(node); - }); - - if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) { - dom.addClass(root.domElement, GUI.CLASS_TOO_TALL); - root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px'; - } else { - dom.removeClass(root.domElement, GUI.CLASS_TOO_TALL); - root.__ul.style.height = 'auto'; - } - - } - - if (root.__resize_handle) { - common.defer(function() { - root.__resize_handle.style.height = root.__ul.offsetHeight + 'px'; - }); - } - - if (root.__closeButton) { - root.__closeButton.style.width = root.width + 'px'; - } - - }, - - /** - * Mark objects for saving. The order of these objects cannot change as - * the GUI grows. When remembering new objects, append them to the end - * of the list. - * - * @param {Object...} objects - * @throws {Error} if not called on a top level GUI. - * @instance - */ - remember: function() { - - if (common.isUndefined(SAVE_DIALOGUE)) { - SAVE_DIALOGUE = new CenteredDiv(); - SAVE_DIALOGUE.domElement.innerHTML = saveDialogueContents; - } - - if (this.parent) { - throw new Error("You can only call remember on a top level GUI."); - } - - var _this = this; - - common.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() { - 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() { - - 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 = {}; - common.each(this.__folders, function(element, key) { - toReturn.folders[key] = element.getSaveObject(); - }); - - return toReturn; - - }, - - save: function() { - - if (!this.load.remembered) { - this.load.remembered = {}; - } - - this.load.remembered[this.preset] = getCurrentPreset(this); - markPresetModified(this, false); - this.saveToLocalStorageIfPossible(); - - }, - - saveAs: function(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(gui) { - - common.each(this.__controllers, function(controller) { - // Make revert work on Default. - if (!this.getRoot().load.remembered) { - controller.setValue(controller.initialValue); - } else { - recallSavedValue(gui || this.getRoot(), controller); - } - }, this); - - common.each(this.__folders, function(folder) { - folder.revert(folder); - }); - - if (!gui) { - markPresetModified(this.getRoot(), false); - } - - - }, - - listen: function(controller) { - - var init = this.__listening.length == 0; - this.__listening.push(controller); - if (init) updateDisplays(this.__listening); - - }, - - updateDisplay: function() { - for (var c in this.__controllers) { - this.__controllers[c].updateDisplay(); - } - for (var f in this.__folders) { - this.__folders[f].updateDisplay(); - } + if (this.autoPlace) { + auto_place_container.removeChild(this.domElement); } + }, + + /** + * @param name + * @returns {dat.gui.GUI} The new folder. + * @throws {Error} if this GUI already has a folder by the specified + * name + * @instance + */ + addFolder: function (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 new_gui_params = { + 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. + new_gui_params.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 + new_gui_params.closed = this.load.folders[name].closed; + + // Pass down the loaded data + new_gui_params.load = this.load.folders[name]; + + } + + var gui = new GUI(new_gui_params); + this.__folders[name] = gui; + + var li = addRow(this, gui.domElement); + dom.addClass(li, 'folder'); + return gui; + + }, + + open: function () { + this.closed = false; + }, + + close: function () { + this.closed = true; + }, + + onResize: function () { + + var root = this.getRoot(); + + if (root.scrollable) { + + var top = dom.getOffset(root.__ul).top; + var h = 0; + + common.each(root.__ul.childNodes, function (node) { + if (!(root.autoPlace && node === root.__save_row)) + h += dom.getHeight(node); + }); + + if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) { + dom.addClass(root.domElement, GUI.CLASS_TOO_TALL); + root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px'; + } else { + dom.removeClass(root.domElement, GUI.CLASS_TOO_TALL); + root.__ul.style.height = 'auto'; + } + + } + + if (root.__resize_handle) { + common.defer(function () { + root.__resize_handle.style.height = root.__ul.offsetHeight + 'px'; + }); + } + + if (root.__closeButton) { + root.__closeButton.style.width = root.width + 'px'; + } + + }, + + /** + * Mark objects for saving. The order of these objects cannot change as + * the GUI grows. When remembering new objects, append them to the end + * of the list. + * + * @param {Object...} objects + * @throws {Error} if not called on a top level GUI. + * @instance + */ + remember: function () { + + if (common.isUndefined(SAVE_DIALOGUE)) { + SAVE_DIALOGUE = new CenteredDiv(); + SAVE_DIALOGUE.domElement.innerHTML = saveDialogueContents; + } + + if (this.parent) { + throw new Error("You can only call remember on a top level GUI."); + } + + var _this = this; + + common.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 () { + 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 () { + + 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 = {}; + common.each(this.__folders, function (element, key) { + toReturn.folders[key] = element.getSaveObject(); + }); + + return toReturn; + + }, + + save: function () { + + if (!this.load.remembered) { + this.load.remembered = {}; + } + + this.load.remembered[this.preset] = getCurrentPreset(this); + markPresetModified(this, false); + this.saveToLocalStorageIfPossible(); + + }, + + saveAs: function (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 (gui) { + + common.each(this.__controllers, function (controller) { + // Make revert work on Default. + if (!this.getRoot().load.remembered) { + controller.setValue(controller.initialValue); + } else { + recallSavedValue(gui || this.getRoot(), controller); + } + }, this); + + common.each(this.__folders, function (folder) { + folder.revert(folder); + }); + + if (!gui) { + markPresetModified(this.getRoot(), false); + } + + }, + + listen: function (controller) { + + var init = this.__listening.length == 0; + this.__listening.push(controller); + if (init) updateDisplays(this.__listening); + + }, + + updateDisplay: function () { + for (var c in this.__controllers) { + this.__controllers[c].updateDisplay(); + } + for (var f in this.__folders) { + this.__folders[f].updateDisplay(); + } } + } + ); function add(gui, object, property, params) { @@ -819,7 +824,7 @@ define([ } else { - var factoryArgs = [object,property].concat(params.factoryArgs); + var factoryArgs = [object, property].concat(params.factoryArgs); controller = controllerFactory.apply(gui, factoryArgs); } @@ -879,19 +884,18 @@ define([ common.extend(controller, { - options: function(options) { + options: function (options) { if (arguments.length > 1) { controller.remove(); return add( - gui, - controller.object, - controller.property, - { - before: controller.__li.nextElementSibling, - factoryArgs: [common.toArray(arguments)] - } + gui, + controller.object, + controller.property, { + before: controller.__li.nextElementSibling, + factoryArgs: [common.toArray(arguments)] + } ); } @@ -900,30 +904,29 @@ define([ controller.remove(); return add( - gui, - controller.object, - controller.property, - { - before: controller.__li.nextElementSibling, - factoryArgs: [options] - } + gui, + controller.object, + controller.property, { + before: controller.__li.nextElementSibling, + factoryArgs: [options] + } ); } }, - name: function(v) { + name: function (v) { controller.__li.firstElementChild.firstElementChild.innerHTML = v; return controller; }, - listen: function() { + listen: function () { controller.__gui.listen(controller); return controller; }, - remove: function() { + remove: function () { controller.__gui.remove(controller); return controller; } @@ -933,13 +936,16 @@ define([ // All sliders should be accompanied by a box. if (controller instanceof NumberControllerSlider) { - var box = new NumberControllerBox(controller.object, controller.property, - { min: controller.__min, max: controller.__max, step: controller.__step }); + var box = new NumberControllerBox(controller.object, controller.property, { + min: controller.__min, + max: controller.__max, + step: controller.__step + }); - common.each(['updateDisplay', 'onChange', 'onFinishChange'], function(method) { + common.each(['updateDisplay', 'onChange', 'onFinishChange'], function (method) { var pc = controller[method]; var pb = box[method]; - controller[method] = box[method] = function() { + controller[method] = box[method] = function () { var args = Array.prototype.slice.call(arguments); pc.apply(controller, args); return pb.apply(box, args); @@ -949,10 +955,9 @@ define([ dom.addClass(li, 'has-slider'); controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild); - } - else if (controller instanceof NumberControllerBox) { + } else if (controller instanceof NumberControllerBox) { - var r = function(returned) { + var r = function (returned) { // Have we defined both boundaries? if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) { @@ -960,13 +965,12 @@ define([ // Well, then lets just replace this with a slider. controller.remove(); return add( - gui, - controller.object, - controller.property, - { - before: controller.__li.nextElementSibling, - factoryArgs: [controller.__min, controller.__max, controller.__step] - }); + gui, + controller.object, + controller.property, { + before: controller.__li.nextElementSibling, + factoryArgs: [controller.__min, controller.__max, controller.__step] + }); } @@ -977,37 +981,34 @@ define([ controller.min = common.compose(r, controller.min); controller.max = common.compose(r, controller.max); - } - else if (controller instanceof BooleanController) { + } else if (controller instanceof BooleanController) { - dom.bind(li, 'click', function() { + dom.bind(li, 'click', function () { dom.fakeEvent(controller.__checkbox, 'click'); }); - dom.bind(controller.__checkbox, 'click', function(e) { + dom.bind(controller.__checkbox, 'click', function (e) { e.stopPropagation(); // Prevents double-toggle }) - } - else if (controller instanceof FunctionController) { + } else if (controller instanceof FunctionController) { - dom.bind(li, 'click', function() { + dom.bind(li, 'click', function () { dom.fakeEvent(controller.__button, 'click'); }); - dom.bind(li, 'mouseover', function() { + dom.bind(li, 'mouseover', function () { dom.addClass(controller.__button, 'hover'); }); - dom.bind(li, 'mouseout', function() { + dom.bind(li, 'mouseout', function () { dom.removeClass(controller.__button, 'hover'); }); - } - else if (controller instanceof ColorController) { + } else if (controller instanceof ColorController) { dom.addClass(li, 'color'); - controller.updateDisplay = common.compose(function(r) { + controller.updateDisplay = common.compose(function (r) { li.style.borderLeftColor = controller.__color.toString(); return r; }, controller.updateDisplay); @@ -1016,7 +1017,7 @@ define([ } - controller.setValue = common.compose(function(r) { + controller.setValue = common.compose(function (r) { if (gui.getRoot().__preset_select && controller.isModified()) { markPresetModified(gui.getRoot(), true); } @@ -1039,14 +1040,14 @@ define([ // Let me fetch a map of controllers for thcommon.isObject. var controller_map = - root.__rememberedObjectIndecesToControllers[matched_index]; + root.__rememberedObjectIndecesToControllers[matched_index]; // Ohp, I believe this is the first controller we've created for this // object. Lets make the map fresh. if (controller_map === undefined) { controller_map = {}; root.__rememberedObjectIndecesToControllers[matched_index] = - controller_map; + controller_map; } // Keep track of this controller @@ -1077,12 +1078,11 @@ define([ } - // Did the loaded object remember thcommon.isObject? if (preset[matched_index] && // Did we remember this particular property? - preset[matched_index][controller.property] !== undefined) { + preset[matched_index][controller.property] !== undefined) { // We did remember something for this guy ... var value = preset[matched_index][controller.property]; @@ -1139,7 +1139,7 @@ define([ if (gui.load && gui.load.remembered) { - common.each(gui.load.remembered, function(value, key) { + common.each(gui.load.remembered, function (value, key) { addPresetOption(gui, key, key == gui.preset); }); @@ -1147,8 +1147,7 @@ define([ addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false); } - dom.bind(select, 'change', function() { - + dom.bind(select, 'change', function () { for (var index = 0; index < gui.__preset_select.length; index++) { gui.__preset_select[index].innerHTML = gui.__preset_select[index].value; @@ -1184,7 +1183,7 @@ define([ showHideExplain(); // TODO: Use a boolean controller, fool! - dom.bind(localStorageCheckBox, 'change', function() { + dom.bind(localStorageCheckBox, 'change', function () { gui.useLocalStorage = !gui.useLocalStorage; showHideExplain(); }); @@ -1193,33 +1192,33 @@ define([ var newConstructorTextArea = document.getElementById('dg-new-constructor'); - dom.bind(newConstructorTextArea, 'keydown', function(e) { + dom.bind(newConstructorTextArea, 'keydown', function (e) { if (e.metaKey && (e.which === 67 || e.keyCode == 67)) { SAVE_DIALOGUE.hide(); } }); - dom.bind(gears, 'click', function() { + dom.bind(gears, 'click', function () { newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2); SAVE_DIALOGUE.show(); newConstructorTextArea.focus(); newConstructorTextArea.select(); }); - dom.bind(button, 'click', function() { + dom.bind(button, 'click', function () { gui.save(); }); - dom.bind(button2, 'click', function() { + dom.bind(button2, 'click', function () { var presetName = prompt('Enter a new preset name.'); if (presetName) gui.saveAs(presetName); }); - dom.bind(button3, 'click', function() { + dom.bind(button3, 'click', function () { gui.revert(); }); -// div.appendChild(button2); + // div.appendChild(button2); } @@ -1234,7 +1233,7 @@ define([ height: '200px', cursor: 'ew-resize', position: 'absolute' -// border: '1px solid blue' + // border: '1px solid blue' }); @@ -1287,7 +1286,8 @@ define([ // 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) { + } + if (gui.__closeButton) { gui.__closeButton.style.width = w + 'px'; } } @@ -1297,16 +1297,16 @@ define([ var toReturn = {}; // For each object I'm remembering - common.each(gui.__rememberedObjects, function(val, index) { + common.each(gui.__rememberedObjects, function (val, index) { var saved_values = {}; // The controllers I've made for thcommon.isObject by property var controller_map = - gui.__rememberedObjectIndecesToControllers[index]; + gui.__rememberedObjectIndecesToControllers[index]; // Remember each value for each property - common.each(controller_map, function(controller, property) { + common.each(controller_map, function (controller, property) { saved_values[property] = useInitialValues ? controller.initialValue : controller.getValue(); }); @@ -1339,7 +1339,7 @@ define([ function markPresetModified(gui, modified) { var opt = gui.__preset_select[gui.__preset_select.selectedIndex]; -// console.log('mark', modified, opt); + // console.log('mark', modified, opt); if (modified) { opt.innerHTML = opt.value + "*"; } else { @@ -1349,16 +1349,15 @@ define([ function updateDisplays(controllerArray) { - if (controllerArray.length != 0) { - requestAnimationFrame(function() { + requestAnimationFrame(function () { updateDisplays(controllerArray); }); } - common.each(controllerArray, function(c) { + common.each(controllerArray, function (c) { c.updateDisplay(); }); diff --git a/src/dat/gui/_structure.scss b/src/dat/gui/_structure.scss index 4b4a80b..bf3fa76 100644 --- a/src/dat/gui/_structure.scss +++ b/src/dat/gui/_structure.scss @@ -1,10 +1,7 @@ $nest-margin: 4px; $row-height: 27px; - $button-height: 20px; - .dg { - /** Clear list styles */ ul { list-style: none; @@ -13,101 +10,73 @@ $button-height: 20px; width: 100%; clear: both; } - /* Auto-place container */ &.ac { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 0; - z-index: 0; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 0; + z-index: 0; } - &:not(.ac) .main { /** Exclude mains in ac so that we don't hide close button */ overflow: hidden; } - &.main { - @include transition(opacity, 0.1s, linear); - &.taller-than-window { - overflow-y: auto; - .close-button { - opacity: 1; - /* TODO, these are style notes */ margin-top: -1px; border-top: 1px solid $border-color; - } - } - ul.closed .close-button { opacity: 1 !important; } - - &:hover .close-button, .close-button.drag { opacity: 1; } - .close-button { /*opacity: 0;*/ @include transition(opacity, 0.1s, linear); border: 0; position: absolute; - line-height: $button-height - 1; height: $button-height; - - /* TODO, these are style notes */ + /* TODO, these are style notes */ cursor: pointer; text-align: center; background-color: #000; &:hover { background-color: #111; } - } - } - /* Auto-placed GUI's */ &.a { - float: right; margin-right: 15px; overflow-x: hidden; - - &.has-save > ul { + &.has-save> ul { margin-top: $row-height; &.closed { margin-top: 0; } } - - - .save-row { position: fixed; top: 0; z-index: 1002; } - } - - li { + li { @include transition(height, 0.1s, ease-out); } - /* Line items that don't contain folders. */ li:not(.folder) { cursor: auto; @@ -116,35 +85,29 @@ $button-height: 20px; overflow: hidden; padding: 0 4px 0 5px; } - - li.folder { - padding: 0; - border-left: $nest-margin solid rgba(0,0,0,0); - + li.folder { + padding: 0; + border-left: $nest-margin solid rgba(0, 0, 0, 0); } - /** Folder names */ li.title { cursor: pointer; margin-left: -$nest-margin; } - /** Hides closed items */ .closed li:not(.title), .closed ul li, - .closed ul li > * { + .closed ul li> * { height: 0; overflow: hidden; border: 0; } - - /** Controller row */ + /** Controller row */ .cr { clear: both; padding-left: 3px; height: $row-height; } - /** Name-half (left) */ .property-name { cursor: default; @@ -154,13 +117,11 @@ $button-height: 20px; overflow: hidden; text-overflow: ellipsis; } - /** Controller-half (right) */ - .c { + .c { float: left; width: 60%; } - /** Controller placement */ .c input[type=text] { border: 0; @@ -169,14 +130,12 @@ $button-height: 20px; width: 100%; float: right; } - /** Shorter number boxes when slider is present. */ .has-slider input[type=text] { width: 30%; /*display: none;*/ margin-left: 0; } - .slider { float: left; width: 66%; @@ -185,29 +144,24 @@ $button-height: 20px; height: 19px; margin-top: 4px; } - .slider-fg { height: 100%; } - .c input[type=checkbox] { margin-top: 9px; } - .c select { margin-top: 5px; } - - /** Ensure the entire boolean and function row shows a hand */ + /** Ensure the entire boolean and function row shows a hand */ .cr.function, - .cr.function .property-name, /* Don't know why I need to be this explicit */ + .cr.function .property-name, + /* Don't know why I need to be this explicit */ .cr.function *, .cr.boolean, .cr.boolean * { cursor: pointer; } - - .selector { display: none; position: absolute; @@ -215,25 +169,17 @@ $button-height: 20px; margin-top: 23px; z-index: 10; } - - .c:hover .selector, .selector.drag { display: block; } - - li.save-row { - padding: 0; - .button { display: inline-block; padding: 0px 6px; } - } - &.dialogue { background-color: #222; width: 460px; @@ -241,11 +187,11 @@ $button-height: 20px; font-size: 13px; line-height: 15px; } - - } + /* TODO Separate style and structure */ + #dg-new-constructor { padding: 10px; color: #222; @@ -273,7 +219,7 @@ $button-height: 20px; margin-top: 10px; code { font-size: 10px; - } + } } #dat-gui-save-locally { diff --git a/src/dat/gui/saveDialogue.html b/src/dat/gui/saveDialogue.html index bbb0ff7..28967c3 100644 --- a/src/dat/gui/saveDialogue.html +++ b/src/dat/gui/saveDialogue.html @@ -1,21 +1,17 @@
- Here's the new load parameter for your GUI's constructor: + Here's the new load parameter for your GUI's constructor: - + -
+
- Automatically save - values to localStorage on exit. + Automatically save values to localStorage on exit. + +
The values saved to localStorage will override those passed to dat.GUI's constructor. This makes it easier to work incrementally, but localStorage is fragile, and your friends may not see the same values you do. + +
-
The values saved to localStorage will - override those passed to dat.GUI's constructor. This makes it - easier to work incrementally, but localStorage is fragile, - and your friends may not see the same values you do. -
- -
-
\ No newline at end of file +
diff --git a/src/dat/gui/style.css b/src/dat/gui/style.css index e53790d..da2954f 100644 --- a/src/dat/gui/style.css +++ b/src/dat/gui/style.css @@ -10,156 +10,227 @@ /** Controller-half (right) */ /** Controller placement */ /** Shorter number boxes when slider is present. */ - /** Ensure the entire boolean and function row shows a hand */ } - .dg ul { - list-style: none; - margin: 0; - padding: 0; - width: 100%; - clear: both; } - .dg.ac { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 0; - z-index: 0; } - .dg:not(.ac) .main { - /** Exclude mains in ac so that we don't hide close button */ - overflow: hidden; } - .dg.main { - -webkit-transition: opacity 0.1s linear; - -o-transition: opacity 0.1s linear; - -moz-transition: opacity 0.1s linear; - transition: opacity 0.1s linear; } - .dg.main.taller-than-window { - overflow-y: auto; } - .dg.main.taller-than-window .close-button { - opacity: 1; - /* TODO, these are style notes */ - margin-top: -1px; - border-top: 1px solid #2c2c2c; } - .dg.main ul.closed .close-button { - opacity: 1 !important; } - .dg.main:hover .close-button, - .dg.main .close-button.drag { - opacity: 1; } - .dg.main .close-button { - /*opacity: 0;*/ - -webkit-transition: opacity 0.1s linear; - -o-transition: opacity 0.1s linear; - -moz-transition: opacity 0.1s linear; - transition: opacity 0.1s linear; - border: 0; - position: absolute; - line-height: 19px; - height: 20px; - /* TODO, these are style notes */ - cursor: pointer; - text-align: center; - background-color: #000; } - .dg.main .close-button:hover { - background-color: #111; } - .dg.a { - float: right; - margin-right: 15px; - overflow-x: hidden; } - .dg.a.has-save > ul { - margin-top: 27px; } - .dg.a.has-save > ul.closed { - margin-top: 0; } - .dg.a .save-row { - position: fixed; - top: 0; - z-index: 1002; } - .dg li { - -webkit-transition: height 0.1s ease-out; - -o-transition: height 0.1s ease-out; - -moz-transition: height 0.1s ease-out; - transition: height 0.1s ease-out; } - .dg li:not(.folder) { - cursor: auto; - height: 27px; - line-height: 27px; - overflow: hidden; - padding: 0 4px 0 5px; } - .dg li.folder { - padding: 0; - border-left: 4px solid rgba(0, 0, 0, 0); } - .dg li.title { - cursor: pointer; - margin-left: -4px; } - .dg .closed li:not(.title), - .dg .closed ul li, - .dg .closed ul li > * { - height: 0; - overflow: hidden; - border: 0; } - .dg .cr { - clear: both; - padding-left: 3px; - height: 27px; } - .dg .property-name { - cursor: default; - float: left; - clear: left; - width: 40%; - overflow: hidden; - text-overflow: ellipsis; } - .dg .c { - float: left; - width: 60%; } - .dg .c input[type=text] { - border: 0; - margin-top: 4px; - padding: 3px; - width: 100%; - float: right; } - .dg .has-slider input[type=text] { - width: 30%; - /*display: none;*/ - margin-left: 0; } - .dg .slider { - float: left; - width: 66%; - margin-left: -5px; - margin-right: 0; - height: 19px; - margin-top: 4px; } - .dg .slider-fg { - height: 100%; } - .dg .c input[type=checkbox] { - margin-top: 9px; } - .dg .c select { - margin-top: 5px; } - .dg .cr.function, - .dg .cr.function .property-name, - .dg .cr.function *, - .dg .cr.boolean, - .dg .cr.boolean * { - cursor: pointer; } - .dg .selector { - display: none; - position: absolute; - margin-left: -9px; - margin-top: 23px; - z-index: 10; } - .dg .c:hover .selector, - .dg .selector.drag { - display: block; } - .dg li.save-row { - padding: 0; } - .dg li.save-row .button { - display: inline-block; - padding: 0px 6px; } - .dg.dialogue { - background-color: #222; - width: 460px; - padding: 15px; - font-size: 13px; - line-height: 15px; } + /** Ensure the entire boolean and function row shows a hand */ +} + +.dg ul { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + clear: both; +} + +.dg.ac { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 0; + z-index: 0; +} + +.dg:not(.ac) .main { + /** Exclude mains in ac so that we don't hide close button */ + overflow: hidden; +} + +.dg.main { + -webkit-transition: opacity 0.1s linear; + -o-transition: opacity 0.1s linear; + -moz-transition: opacity 0.1s linear; + transition: opacity 0.1s linear; +} + +.dg.main.taller-than-window { + overflow-y: auto; +} + +.dg.main.taller-than-window .close-button { + opacity: 1; + /* TODO, these are style notes */ + margin-top: -1px; + border-top: 1px solid #2c2c2c; +} + +.dg.main ul.closed .close-button { + opacity: 1 !important; +} + +.dg.main:hover .close-button, +.dg.main .close-button.drag { + opacity: 1; +} + +.dg.main .close-button { + /*opacity: 0;*/ + -webkit-transition: opacity 0.1s linear; + -o-transition: opacity 0.1s linear; + -moz-transition: opacity 0.1s linear; + transition: opacity 0.1s linear; + border: 0; + position: absolute; + line-height: 19px; + height: 20px; + /* TODO, these are style notes */ + cursor: pointer; + text-align: center; + background-color: #000; +} + +.dg.main .close-button:hover { + background-color: #111; +} + +.dg.a { + float: right; + margin-right: 15px; + overflow-x: hidden; +} + +.dg.a.has-save> ul { + margin-top: 27px; +} + +.dg.a.has-save> ul.closed { + margin-top: 0; +} + +.dg.a .save-row { + position: fixed; + top: 0; + z-index: 1002; +} + +.dg li { + -webkit-transition: height 0.1s ease-out; + -o-transition: height 0.1s ease-out; + -moz-transition: height 0.1s ease-out; + transition: height 0.1s ease-out; +} + +.dg li:not(.folder) { + cursor: auto; + height: 27px; + line-height: 27px; + overflow: hidden; + padding: 0 4px 0 5px; +} + +.dg li.folder { + padding: 0; + border-left: 4px solid rgba(0, 0, 0, 0); +} + +.dg li.title { + cursor: pointer; + margin-left: -4px; +} + +.dg .closed li:not(.title), +.dg .closed ul li, +.dg .closed ul li> * { + height: 0; + overflow: hidden; + border: 0; +} + +.dg .cr { + clear: both; + padding-left: 3px; + height: 27px; +} + +.dg .property-name { + cursor: default; + float: left; + clear: left; + width: 40%; + overflow: hidden; + text-overflow: ellipsis; +} + +.dg .c { + float: left; + width: 60%; +} + +.dg .c input[type=text] { + border: 0; + margin-top: 4px; + padding: 3px; + width: 100%; + float: right; +} + +.dg .has-slider input[type=text] { + width: 30%; + /*display: none;*/ + margin-left: 0; +} + +.dg .slider { + float: left; + width: 66%; + margin-left: -5px; + margin-right: 0; + height: 19px; + margin-top: 4px; +} + +.dg .slider-fg { + height: 100%; +} + +.dg .c input[type=checkbox] { + margin-top: 9px; +} + +.dg .c select { + margin-top: 5px; +} + +.dg .cr.function, +.dg .cr.function .property-name, +.dg .cr.function *, +.dg .cr.boolean, +.dg .cr.boolean * { + cursor: pointer; +} + +.dg .selector { + display: none; + position: absolute; + margin-left: -9px; + margin-top: 23px; + z-index: 10; +} + +.dg .c:hover .selector, +.dg .selector.drag { + display: block; +} + +.dg li.save-row { + padding: 0; +} + +.dg li.save-row .button { + display: inline-block; + padding: 0px 6px; +} + +.dg.dialogue { + background-color: #222; + width: 460px; + padding: 15px; + font-size: 13px; + line-height: 15px; +} + /* TODO Separate style and structure */ + #dg-new-constructor { padding: 10px; color: #222; @@ -174,7 +245,8 @@ width: 440px; overflow-y: scroll; height: 100px; - position: relative; } + position: relative; +} #dg-local-explain { display: none; @@ -183,98 +255,160 @@ border-radius: 3px; background-color: #333; padding: 8px; - margin-top: 10px; } - #dg-local-explain code { - font-size: 10px; } + margin-top: 10px; +} + +#dg-local-explain code { + font-size: 10px; +} #dat-gui-save-locally { - display: none; } + display: none; +} + /** Main type */ + .dg { color: #eee; font: 11px 'Lucida Grande', sans-serif; text-shadow: 0 -1px 0 #111; /** Auto place */ /* Controller row,
  • */ - /** Controllers */ } - .dg.main { - /** Scrollbar */ } - .dg.main::-webkit-scrollbar { - width: 5px; - background: #1a1a1a; } - .dg.main::-webkit-scrollbar-corner { - height: 0; - display: none; } - .dg.main::-webkit-scrollbar-thumb { - border-radius: 5px; - background: #676767; } - .dg li:not(.folder) { - background: #1a1a1a; - border-bottom: 1px solid #2c2c2c; } - .dg li.save-row { - line-height: 25px; - background: #dad5cb; - border: 0; } - .dg li.save-row select { - margin-left: 5px; - width: 108px; } - .dg li.save-row .button { - margin-left: 5px; - margin-top: 1px; - border-radius: 2px; - font-size: 9px; - line-height: 7px; - padding: 4px 4px 5px 4px; - background: #c5bdad; - color: #fff; - text-shadow: 0 1px 0 #b0a58f; - box-shadow: 0 -1px 0 #b0a58f; - cursor: pointer; } - .dg li.save-row .button.gears { - background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat; - height: 7px; - width: 8px; } - .dg li.save-row .button:hover { - background-color: #bab19e; - box-shadow: 0 -1px 0 #b0a58f; } - .dg li.folder { - border-bottom: 0; } - .dg li.title { - padding-left: 16px; - background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; - cursor: pointer; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); } - .dg .closed li.title { - background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); } - .dg .cr.boolean { - border-left: 3px solid #806787; } - .dg .cr.function { - border-left: 3px solid #e61d5f; } - .dg .cr.number { - border-left: 3px solid #2fa1d6; } - .dg .cr.number input[type=text] { - color: #2fa1d6; } - .dg .cr.string { - border-left: 3px solid #1ed36f; } - .dg .cr.string input[type=text] { - color: #1ed36f; } - .dg .cr.function:hover, .dg .cr.boolean:hover { - background: #111; } - .dg .c input[type=text] { - background: #303030; - outline: none; } - .dg .c input[type=text]:hover { - background: #3c3c3c; } - .dg .c input[type=text]:focus { - background: #494949; - color: #fff; } - .dg .c .slider { - background: #303030; - cursor: ew-resize; } - .dg .c .slider-fg { - background: #2fa1d6; } - .dg .c .slider:hover { - background: #3c3c3c; } - .dg .c .slider:hover .slider-fg { - background: #44abda; } + /** Controllers */ +} + +.dg.main { + /** Scrollbar */ +} + +.dg.main::-webkit-scrollbar { + width: 5px; + background: #1a1a1a; +} + +.dg.main::-webkit-scrollbar-corner { + height: 0; + display: none; +} + +.dg.main::-webkit-scrollbar-thumb { + border-radius: 5px; + background: #676767; +} + +.dg li:not(.folder) { + background: #1a1a1a; + border-bottom: 1px solid #2c2c2c; +} + +.dg li.save-row { + line-height: 25px; + background: #dad5cb; + border: 0; +} + +.dg li.save-row select { + margin-left: 5px; + width: 108px; +} + +.dg li.save-row .button { + margin-left: 5px; + margin-top: 1px; + border-radius: 2px; + font-size: 9px; + line-height: 7px; + padding: 4px 4px 5px 4px; + background: #c5bdad; + color: #fff; + text-shadow: 0 1px 0 #b0a58f; + box-shadow: 0 -1px 0 #b0a58f; + cursor: pointer; +} + +.dg li.save-row .button.gears { + background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat; + height: 7px; + width: 8px; +} + +.dg li.save-row .button:hover { + background-color: #bab19e; + box-shadow: 0 -1px 0 #b0a58f; +} + +.dg li.folder { + border-bottom: 0; +} + +.dg li.title { + padding-left: 16px; + background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; + cursor: pointer; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.dg .closed li.title { + background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); +} + +.dg .cr.boolean { + border-left: 3px solid #806787; +} + +.dg .cr.function { + border-left: 3px solid #e61d5f; +} + +.dg .cr.number { + border-left: 3px solid #2fa1d6; +} + +.dg .cr.number input[type=text] { + color: #2fa1d6; +} + +.dg .cr.string { + border-left: 3px solid #1ed36f; +} + +.dg .cr.string input[type=text] { + color: #1ed36f; +} + +.dg .cr.function:hover, +.dg .cr.boolean:hover { + background: #111; +} + +.dg .c input[type=text] { + background: #303030; + outline: none; +} + +.dg .c input[type=text]:hover { + background: #3c3c3c; +} + +.dg .c input[type=text]:focus { + background: #494949; + color: #fff; +} + +.dg .c .slider { + background: #303030; + cursor: ew-resize; +} + +.dg .c .slider-fg { + background: #2fa1d6; +} + +.dg .c .slider:hover { + background: #3c3c3c; +} + +.dg .c .slider:hover .slider-fg { + background: #44abda; +} diff --git a/src/dat/gui/style.scss b/src/dat/gui/style.scss index 358c65f..bc15b3e 100644 --- a/src/dat/gui/style.scss +++ b/src/dat/gui/style.scss @@ -1,9 +1,7 @@ $background-color: #1a1a1a; - $hover-lighten: 5%; $border-lighten: 7%; $active-lighten: 10%; - $number-color: #2FA1D6; $boolean-color: #806787; $string-color: #1ed36f; @@ -12,7 +10,6 @@ $save-row-color: #dad5cb; $button-color: darken($save-row-color, 10%); $border-color: lighten($background-color, $border-lighten); $input-color: lighten($background-color, 8.5%); - @mixin transition($prop, $time, $curve) { -webkit-transition: $prop $time $curve; -o-transition: $prop $time $curve; @@ -49,16 +46,13 @@ $input-color: lighten($background-color, 8.5%); @import "structure"; /** Main type */ + .dg { - - color: #eee; font: 11px 'Lucida Grande', sans-serif; text-shadow: 0 -1px 0 #111; - /** Auto place */ &.main { - /** Scrollbar */ &::-webkit-scrollbar { width: 5px; @@ -72,102 +66,72 @@ $input-color: lighten($background-color, 8.5%); border-radius: 5px; background: lighten($background-color, 30%); } - } - li { - &:not(.folder) { background: $background-color; border-bottom: 1px solid $border-color; } - &.save-row { - line-height: 25px; background: $save-row-color; border: 0; - select { margin-left: 5px; width: 108px; - } - .button { - &.gears { @include gears; } - @include button; - &:hover { background-color: darken($button-color, 5%); box-shadow: 0 -1px 0 darken($button-color, 10%); } - } - } - &.folder { border-bottom: 0; } - &.title { padding-left: 16px; background: #000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } - } - .closed li.title { background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); } - /* Controller row,
  • */ .cr { - &.boolean { border-left: 3px solid $boolean-color; } - &.function { border-left: 3px solid $function-color; } - &.number { border-left: 3px solid $number-color; input[type=text] { color: $number-color; } } - &.string { border-left: 3px solid $string-color; input[type=text] { color: $string-color; } } - - &.function:hover , + &.function:hover, &.boolean:hover { background: #111; } - } - - /** Controllers */ .c { - - - input[type=text] { - background: $input-color; outline: none; &:hover { @@ -177,26 +141,19 @@ $input-color: lighten($background-color, 8.5%); background: lighten($input-color, $active-lighten); color: #fff; } - } - - .slider { background: $input-color; cursor: ew-resize; } - .slider-fg { background: $number-color; } - .slider:hover { background: lighten($input-color, $hover-lighten); .slider-fg { background: lighten($number-color, $hover-lighten); } } - } - } diff --git a/src/dat/utils/common.js b/src/dat/utils/common.js index b5bcc34..59dc09f 100644 --- a/src/dat/utils/common.js +++ b/src/dat/utils/common.js @@ -11,9 +11,8 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -define([ -], function() { - +define([], function () { + var ARR_EACH = Array.prototype.forEach; var ARR_SLICE = Array.prototype.slice; @@ -23,118 +22,118 @@ define([ * http://documentcloud.github.com/underscore/ */ - return { - + return { + BREAK: {}, - - extend: function(target) { - - this.each(ARR_SLICE.call(arguments, 1), function(obj) { - + + extend: function (target) { + + this.each(ARR_SLICE.call(arguments, 1), function (obj) { + for (var key in obj) - if (!this.isUndefined(obj[key])) + if (!this.isUndefined(obj[key])) target[key] = obj[key]; - + }, this); - + return target; - + }, - - defaults: function(target) { - - this.each(ARR_SLICE.call(arguments, 1), function(obj) { - + + defaults: function (target) { + + this.each(ARR_SLICE.call(arguments, 1), function (obj) { + for (var key in obj) - if (this.isUndefined(target[key])) + if (this.isUndefined(target[key])) target[key] = obj[key]; - + }, this); - + return target; - + }, - - compose: function() { + + compose: function () { var toCall = ARR_SLICE.call(arguments); - return function() { - var args = ARR_SLICE.call(arguments); - for (var i = toCall.length -1; i >= 0; i--) { - args = [toCall[i].apply(this, args)]; - } - return args[0]; - } + return function () { + var args = ARR_SLICE.call(arguments); + for (var i = toCall.length - 1; i >= 0; i--) { + args = [toCall[i].apply(this, args)]; + } + return args[0]; + } }, - - each: function(obj, itr, scope) { + + each: function (obj, itr, scope) { if (!obj) return; - if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) { - + if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) { + obj.forEach(itr, scope); - + } else if (obj.length === obj.length + 0) { // Is number but not NaN - + for (var key = 0, l = obj.length; key < l; key++) - if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) + if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) return; - + } else { - for (var key in obj) + for (var key in obj) if (itr.call(scope, obj[key], key) === this.BREAK) return; - + } - + }, - - defer: function(fnc) { + + defer: function (fnc) { setTimeout(fnc, 0); }, - - toArray: function(obj) { + + toArray: function (obj) { if (obj.toArray) return obj.toArray(); return ARR_SLICE.call(obj); }, - isUndefined: function(obj) { + isUndefined: function (obj) { return obj === undefined; }, - - isNull: function(obj) { + + isNull: function (obj) { return obj === null; }, - - isNaN: function(obj) { + + isNaN: function (obj) { return obj !== obj; }, - - isArray: Array.isArray || function(obj) { + + isArray: Array.isArray || function (obj) { return obj.constructor === Array; }, - - isObject: function(obj) { + + isObject: function (obj) { return obj === Object(obj); }, - - isNumber: function(obj) { - return obj === obj+0; + + isNumber: function (obj) { + return obj === obj + 0; }, - - isString: function(obj) { - return obj === obj+''; + + isString: function (obj) { + return obj === obj + ''; }, - - isBoolean: function(obj) { + + isBoolean: function (obj) { return obj === false || obj === true; }, - - isFunction: function(obj) { + + isFunction: function (obj) { return Object.prototype.toString.call(obj) === '[object Function]'; } - + }; - -}); \ No newline at end of file + +}); diff --git a/src/dat/utils/css.js b/src/dat/utils/css.js index 4b8a926..3a10bb2 100644 --- a/src/dat/utils/css.js +++ b/src/dat/utils/css.js @@ -12,22 +12,22 @@ */ define([], -function() { - return { - load: function (url, doc) { - doc = doc || document; - var link = doc.createElement('link'); - link.type = 'text/css'; - link.rel = 'stylesheet'; - link.href = url; - doc.getElementsByTagName('head')[0].appendChild(link); - }, - inject: function(css, doc) { - doc = doc || document; - var injected = document.createElement('style'); - injected.type = 'text/css'; - injected.innerHTML = css; - doc.getElementsByTagName('head')[0].appendChild(injected); + function () { + return { + load: function (url, doc) { + doc = doc || document; + var link = doc.createElement('link'); + link.type = 'text/css'; + link.rel = 'stylesheet'; + link.href = url; + doc.getElementsByTagName('head')[0].appendChild(link); + }, + inject: function (css, doc) { + doc = doc || document; + var injected = document.createElement('style'); + injected.type = 'text/css'; + injected.innerHTML = css; + doc.getElementsByTagName('head')[0].appendChild(injected); + } } - } -}); + }); diff --git a/src/dat/utils/requestAnimationFrame.js b/src/dat/utils/requestAnimationFrame.js index ee1f27d..70ccf85 100644 --- a/src/dat/utils/requestAnimationFrame.js +++ b/src/dat/utils/requestAnimationFrame.js @@ -11,8 +11,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -define([ -], function() { +define([], function () { /** * requirejs version of Paul Irish's RequestAnimationFrame @@ -20,13 +19,13 @@ define([ */ return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - function(callback, element) { + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function (callback, element) { - window.setTimeout(callback, 1000 / 60); + window.setTimeout(callback, 1000 / 60); - }; + }; });