diff --git a/src/dat/color/Color.js b/src/dat/color/Color.js index a9af8be..249b576 100644 --- a/src/dat/color/Color.js +++ b/src/dat/color/Color.js @@ -11,10 +11,10 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var interpret = require('./interpret'), - math = require('./math'), - toString = require('./toString'), - common = require('../utils/common'); +import interpret from './interpret'; +import math from './math'; +import toString from './toString'; +import common from '../utils/common'; var Color = function () { @@ -179,4 +179,4 @@ function recalculateHSV(color) { } -module.exports = Color; +export default Color; diff --git a/src/dat/color/interpret.js b/src/dat/color/interpret.js index b5a54b9..5b3fbe9 100644 --- a/src/dat/color/interpret.js +++ b/src/dat/color/interpret.js @@ -11,8 +11,8 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var toString = require('./toString'), - common = require('../utils/common'); +import * as toString from './toString'; +import common from '../utils/common'; var result, toReturn; @@ -332,4 +332,4 @@ var INTERPRETATIONS = [ ]; -module.exports = interpret; +export default interpret; diff --git a/src/dat/color/math.js b/src/dat/color/math.js index 28681ae..d5140cc 100644 --- a/src/dat/color/math.js +++ b/src/dat/color/math.js @@ -92,4 +92,4 @@ var ColorMath = { } } -module.exports = ColorMath; +export default ColorMath; diff --git a/src/dat/color/toString.js b/src/dat/color/toString.js index 6394932..6c3eab4 100644 --- a/src/dat/color/toString.js +++ b/src/dat/color/toString.js @@ -11,9 +11,9 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var common = require('../utils/common'); +import common from '../utils/common'; -module.exports = function(color) { +var toString = function (color) { if (color.a == 1 || common.isUndefined(color.a)) { var s = color.hex.toString(16); while (s.length < 6) { @@ -24,4 +24,6 @@ module.exports = function(color) { } else { return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')'; } -}; \ No newline at end of file +}; + +export default toString; \ No newline at end of file diff --git a/src/dat/controllers/BooleanController.js b/src/dat/controllers/BooleanController.js index d400bc7..2ac4414 100644 --- a/src/dat/controllers/BooleanController.js +++ b/src/dat/controllers/BooleanController.js @@ -11,9 +11,9 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - dom = require('../dom/dom'), - common = require('../utils/common'); +import Controller from './Controller'; +import dom from '../dom/dom'; +import common from '../utils/common'; /** * @class Provides a checkbox input to alter the boolean property of an object. @@ -84,4 +84,4 @@ common.extend( ); -module.exports = BooleanController; +export default BooleanController; diff --git a/src/dat/controllers/ColorController.js b/src/dat/controllers/ColorController.js index d6fd86d..51f2818 100644 --- a/src/dat/controllers/ColorController.js +++ b/src/dat/controllers/ColorController.js @@ -11,11 +11,11 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - dom = require('../dom/dom'), - Color = require('../color/Color'), - interpret = require('../color/interpret'), - common = require('../utils/common'); +import Controller from './Controller'; +import dom from '../dom/dom'; +import Color from '../color/Color'; +import interpret from '../color/interpret'; +import common from '../utils/common'; var ColorController = function(object, property) { ColorController.superclass.call(this, object, property); @@ -57,7 +57,7 @@ var ColorController = function(object, property) { dom.bind(this.__input, 'blur', onBlur); - dom.bind(this.__selector, 'mousedown', function(e) { + dom.bind(this.__selector, 'mousedown', function (_e) { dom .addClass(this, 'drag') @@ -308,12 +308,12 @@ function linearGradient(elem, x, a, b) { function hueGradient(elem) { elem.style.background = ''; - elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);' - elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' - elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' - elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' - elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);' + elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'; + elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; + elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; + elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; + elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; } -module.exports = ColorController; \ No newline at end of file +export default ColorController; \ No newline at end of file diff --git a/src/dat/controllers/Controller.js b/src/dat/controllers/Controller.js index a3ec93f..c1a8a5b 100644 --- a/src/dat/controllers/Controller.js +++ b/src/dat/controllers/Controller.js @@ -11,7 +11,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var common = require('../utils/common'); +import common from '../utils/common'; /** * @class An "abstract" class that represents a given property of an object. @@ -134,4 +134,4 @@ common.extend( } ); -module.exports = Controller; \ No newline at end of file +export default Controller; \ No newline at end of file diff --git a/src/dat/controllers/factory.js b/src/dat/controllers/ControllerFactory.js similarity index 74% rename from src/dat/controllers/factory.js rename to src/dat/controllers/ControllerFactory.js index 3b2a0cc..d369633 100644 --- a/src/dat/controllers/factory.js +++ b/src/dat/controllers/ControllerFactory.js @@ -11,16 +11,15 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var OptionController = require('./OptionController'), - NumberControllerBox = require('./NumberControllerBox'), - NumberControllerSlider = require('./NumberControllerSlider'), - StringController = require('./StringController'), - FunctionController = require('./FunctionController'), - BooleanController = require('./BooleanController'), - common = require('../utils/common'); - -module.exports = function (object, property) { +import OptionController from './OptionController'; +import NumberControllerBox from './NumberControllerBox'; +import NumberControllerSlider from './NumberControllerSlider'; +import StringController from './StringController'; +import FunctionController from './FunctionController'; +import BooleanController from './BooleanController'; +import common from '../utils/common'; +var ControllerFactory = function (object, property) { var initialValue = object[property]; // Providing options? @@ -29,23 +28,20 @@ module.exports = function (object, property) { } // Providing a map? - if (common.isNumber(initialValue)) { if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) { - // Has min and max. if (common.isNumber(arguments[4])) // has step + { return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]); - else + } + else { return new NumberControllerSlider(object, property, arguments[2], arguments[3]); - + } } else { - return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]}); - } - } if (common.isString(initialValue)) { @@ -59,5 +55,6 @@ module.exports = function (object, property) { if (common.isBoolean(initialValue)) { return new BooleanController(object, property); } +}; -}; \ No newline at end of file +export default ControllerFactory; \ No newline at end of file diff --git a/src/dat/controllers/FunctionController.js b/src/dat/controllers/FunctionController.js index 65d013a..b199770 100644 --- a/src/dat/controllers/FunctionController.js +++ b/src/dat/controllers/FunctionController.js @@ -11,9 +11,9 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - dom = require('../dom/dom'), - common = require('../utils/common'); +import Controller from './Controller'; +import dom from '../dom/dom'; +import common from '../utils/common'; /** * @class Provides a GUI interface to fire a specified method, a property of an object. @@ -67,4 +67,4 @@ common.extend( ); -module.exports = FunctionController; \ No newline at end of file +export default FunctionController; \ No newline at end of file diff --git a/src/dat/controllers/NumberController.js b/src/dat/controllers/NumberController.js index c592398..204425b 100644 --- a/src/dat/controllers/NumberController.js +++ b/src/dat/controllers/NumberController.js @@ -11,9 +11,8 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - common = require('../utils/common'); - +import Controller from './Controller'; +import common from '../utils/common'; /** * @class Represents a given property of an object that is a number. @@ -136,4 +135,4 @@ function numDecimals(x) { } } -module.exports = NumberController; +export default NumberController; diff --git a/src/dat/controllers/NumberControllerBox.js b/src/dat/controllers/NumberControllerBox.js index 7055bb2..ec7a17d 100644 --- a/src/dat/controllers/NumberControllerBox.js +++ b/src/dat/controllers/NumberControllerBox.js @@ -11,10 +11,9 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - NumberController = require('./NumberController'), - dom = require('../dom/dom'), - common = require('../utils/common'); +import NumberController from './NumberController'; +import dom from '../dom/dom'; +import common from '../utils/common'; /** * @class Represents a given property of an object that is a number and @@ -127,6 +126,6 @@ function roundToDecimal(value, decimals) { return Math.round(value * tenTo) / tenTo; } -module.exports = NumberControllerBox; +export default NumberControllerBox; diff --git a/src/dat/controllers/NumberControllerSlider.js b/src/dat/controllers/NumberControllerSlider.js index 51cbf27..1d39fc2 100644 --- a/src/dat/controllers/NumberControllerSlider.js +++ b/src/dat/controllers/NumberControllerSlider.js @@ -11,11 +11,11 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var NumberController = require('./NumberController'), - dom = require('../dom/dom'), - css = require('../utils/css'), - common = require('../utils/common'), - styleSheet = require('./NumberControllerSlider.css'); +import NumberController from './NumberController'; +import dom from '../dom/dom'; +import css from '../utils/css'; +import common from '../utils/common'; +import styleSheet from '!style!css!sass!./NumberControllerSlider.scss'; /** * @class Represents a given property of an object that is a number, contains @@ -121,4 +121,4 @@ function map(v, i1, i2, o1, o2) { return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); } -module.exports = NumberControllerSlider; \ No newline at end of file +export default NumberControllerSlider; \ No newline at end of file diff --git a/src/dat/controllers/NumberControllerSlider.css b/src/dat/controllers/NumberControllerSlider.scss similarity index 100% rename from src/dat/controllers/NumberControllerSlider.css rename to src/dat/controllers/NumberControllerSlider.scss diff --git a/src/dat/controllers/OptionController.js b/src/dat/controllers/OptionController.js index b5eb874..ae5d0a5 100644 --- a/src/dat/controllers/OptionController.js +++ b/src/dat/controllers/OptionController.js @@ -11,9 +11,9 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - dom = require('../dom/dom'), - common = require('../utils/common'); +import Controller from './Controller'; +import dom from '../dom/dom'; +import common from '../utils/common'; /** * @class Provides a select input to alter the property of an object, using a @@ -95,4 +95,4 @@ common.extend( ); -module.exports = OptionController; \ No newline at end of file +export default OptionController; \ No newline at end of file diff --git a/src/dat/controllers/StringController.js b/src/dat/controllers/StringController.js index b457627..afed221 100644 --- a/src/dat/controllers/StringController.js +++ b/src/dat/controllers/StringController.js @@ -11,9 +11,9 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var Controller = require('./Controller'), - dom = require('../dom/dom'), - common = require('../utils/common'); +import Controller from './Controller'; +import dom from '../dom/dom'; +import common from '../utils/common'; /** * @class Provides a text input to alter the string property of an object. @@ -82,4 +82,4 @@ common.extend( ); -module.exports = StringController; +export default StringController; diff --git a/src/dat/dom/CenteredDiv.js b/src/dat/dom/CenteredDiv.js index 6f983c7..2859885 100644 --- a/src/dat/dom/CenteredDiv.js +++ b/src/dat/dom/CenteredDiv.js @@ -11,8 +11,8 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var dom = require('../dom/dom'), - common = require('../utils/common'); +import dom from '../dom/dom'; +import common from '../utils/common'; var CenteredDiv = function() { @@ -109,4 +109,4 @@ function lockScroll(e) { console.log(e); } -module.exports = CenteredDiv; +export default CenteredDiv; diff --git a/src/dat/dom/dom.js b/src/dat/dom/dom.js index c9a83a6..569418e 100644 --- a/src/dat/dom/dom.js +++ b/src/dat/dom/dom.js @@ -11,7 +11,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var common = require('../utils/common'); +import common from '../utils/common'; var EVENT_MAP = { 'HTMLEvents': ['change'], @@ -280,4 +280,4 @@ var dom = { }; -module.exports = dom; +export default dom; diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js index 9161075..8ae0ffc 100644 --- a/src/dat/gui/GUI.js +++ b/src/dat/gui/GUI.js @@ -11,21 +11,21 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ -var css = require('../utils/css'), - saveDialogueContents = require('html!./saveDialogue.html'), - styleSheet = require('./style.css'), - controllerFactory = require('../controllers/factory'), - Controller = require('../controllers/Controller'), - BooleanController = require('../controllers/BooleanController'), - FunctionController = require('../controllers/FunctionController'), - NumberControllerBox = require('../controllers/NumberControllerBox'), - NumberControllerSlider = require('../controllers/NumberControllerSlider'), - OptionController = require('../controllers/OptionController'), - ColorController = require('../controllers/ColorController'), - requestAnimationFrame = require('../utils/requestAnimationFrame'), - CenteredDiv = require('../dom/CenteredDiv'), - dom = require('../dom/dom'), - common = require('../utils/common'); +import css from '../utils/css'; +import saveDialogueContents from 'html!./saveDialogue.html'; +import styleSheet from '!style!css!sass!./style.scss'; +import ControllerFactory from '../controllers/ControllerFactory'; +import Controller from '../controllers/Controller'; +import BooleanController from '../controllers/BooleanController'; +import FunctionController from '../controllers/FunctionController'; +import NumberControllerBox from '../controllers/NumberControllerBox'; +import NumberControllerSlider from '../controllers/NumberControllerSlider'; +import OptionController from '../controllers/OptionController'; +import ColorController from '../controllers/ColorController'; +import requestAnimationFrame from '../utils/requestAnimationFrame'; +import CenteredDiv from '../dom/CenteredDiv'; +import dom from '../dom/dom'; +import common from '../utils/common'; css.inject(styleSheet); @@ -802,7 +802,7 @@ function add(gui, object, property, params) { } else { var factoryArgs = [object,property].concat(params.factoryArgs); - controller = controllerFactory.apply(gui, factoryArgs); + controller = ControllerFactory.apply(gui, factoryArgs); } diff --git a/src/dat/gui/GUI.css b/src/dat/gui/GUI.scss similarity index 100% rename from src/dat/gui/GUI.css rename to src/dat/gui/GUI.scss diff --git a/src/dat/gui/style.css b/src/dat/gui/style.css deleted file mode 100644 index df55984..0000000 --- a/src/dat/gui/style.css +++ /dev/null @@ -1,282 +0,0 @@ -.dg { - /** Clear list styles */ - /* Auto-place container */ - /* Auto-placed GUI's */ - /* Line items that don't contain folders. */ - /** Folder names */ - /** Hides closed items */ - /** Controller row */ - /** Name-half (left) */ - /** 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; } - -/* TODO Separate style and structure */ -#dg-new-constructor { - padding: 10px; - color: #222; - font-family: Monaco, monospace; - font-size: 10px; - border: 0; - resize: none; - box-shadow: inset 1px 1px 1px #888; - word-wrap: break-word; - margin: 12px 0; - display: block; - width: 440px; - overflow-y: scroll; - height: 100px; - position: relative; } - -#dg-local-explain { - display: none; - font-size: 11px; - line-height: 17px; - border-radius: 3px; - background-color: #333; - padding: 8px; - margin-top: 10px; } - #dg-local-explain code { - font-size: 10px; } - -#dat-gui-save-locally { - display: none; } - -/** Main type */ -.dg { - color: #eee; - font: 11px 'Lucida Grande', sans-serif; - text-shadow: 0 -1px 0 #111; - /** Auto place */ - /* Controller row,