diff --git a/build/dat.gui.css b/build/dat.gui.css new file mode 100644 index 0000000..45bc5ee --- /dev/null +++ b/build/dat.gui.css @@ -0,0 +1,283 @@ +.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 transparent; } + .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,
  • */ + /** 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: #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); } + .dg .closed li.title { + background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); } + .dg .cr.boolean { + border-left: 3px solid #806787; } + .dg .cr.color { + border-left: 3px solid; } + .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; + max-width: 100%; } + .dg .c .slider:hover { + background: #3c3c3c; } + .dg .c .slider:hover .slider-fg { + background: #44abda; } diff --git a/build/dat.gui.js b/build/dat.gui.js index 40d0a2b..a262562 100644 --- a/build/dat.gui.js +++ b/build/dat.gui.js @@ -5461,8 +5461,8 @@ return /******/ (function(modules) { // webpackBootstrap NumberController: __webpack_require__(204), NumberControllerBox: __webpack_require__(205), NumberControllerSlider: __webpack_require__(206), - FunctionController: __webpack_require__(210), - ColorController: __webpack_require__(211) + FunctionController: __webpack_require__(207), + ColorController: __webpack_require__(208) }, dom: { @@ -5470,10 +5470,10 @@ return /******/ (function(modules) { // webpackBootstrap }, gui: { - GUI: __webpack_require__(212) + GUI: __webpack_require__(209) }, - GUI: __webpack_require__(212) + GUI: __webpack_require__(209) }; module.exports = exports['default']; @@ -7353,14 +7353,6 @@ return /******/ (function(modules) { // webpackBootstrap var _domDom2 = _interopRequireDefault(_domDom); - var _utilsCss = __webpack_require__(207); - - var _utilsCss2 = _interopRequireDefault(_utilsCss); - - var _cssSassNumberControllerSliderScss = __webpack_require__(208); - - var _cssSassNumberControllerSliderScss2 = _interopRequireDefault(_cssSassNumberControllerSliderScss); - function map(v, i1, i2, o1, o2) { return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); } @@ -7436,10 +7428,6 @@ return /******/ (function(modules) { // webpackBootstrap this.domElement.appendChild(this.__background); } - /** - * Injects default stylesheet for slider elements. - */ - NumberControllerSlider.prototype.updateDisplay = function updateDisplay() { var pct = (this.getValue() - this.__min) / (this.__max - this.__min); this.__foreground.style.width = pct * 100 + '%'; @@ -7449,123 +7437,11 @@ return /******/ (function(modules) { // webpackBootstrap return NumberControllerSlider; })(_NumberController3['default']); - NumberControllerSlider.useDefaultStyles = function () { - _utilsCss2['default'].inject(_cssSassNumberControllerSliderScss2['default'].toString()); - }; - exports['default'] = NumberControllerSlider; module.exports = exports['default']; /***/ }, /* 207 */ -/***/ function(module, exports) { - - /** - * dat-gui JavaScript Controller Library - * http://code.google.com/p/dat-gui - * - * Copyright 2011 Data Arts Team, Google Creative Lab - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - */ - - 'use strict'; - - module.exports = { - load: function load(url, indoc) { - var doc = indoc || document; - var link = doc.createElement('link'); - link.type = 'text/css'; - link.rel = 'stylesheet'; - link.href = url; - doc.getElementsByTagName('head')[0].appendChild(link); - }, - - inject: function inject(css, indoc) { - var doc = indoc || document; - var injected = document.createElement('style'); - injected.type = 'text/css'; - injected.innerHTML = css; - doc.getElementsByTagName('head')[0].appendChild(injected); - } - }; - -/***/ }, -/* 208 */ -/***/ function(module, exports, __webpack_require__) { - - exports = module.exports = __webpack_require__(209)(); - // imports - - - // module - exports.push([module.id, "/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n.slider {\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);\n height: 1em;\n border-radius: 1em 0 0 1em;\n background-color: #eee; }\n\n.slider-fg {\n background-color: #aaa;\n height: 1em;\n margin-left: -0.5em;\n border-radius: 1em 0 0 1em; }\n\n.slider-fg:after {\n display: inline-block;\n border-radius: 1em;\n background-color: #fff;\n border: 1px solid #aaa;\n content: '';\n float: right;\n margin-right: -0.5em;\n margin-top: 3px;\n height: 0.9em;\n width: 0.9em; }\n", ""]); - - // exports - - -/***/ }, -/* 209 */ -/***/ function(module, exports) { - - /* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra - */ - // css base code, injected by the css-loader - module.exports = function() { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - var result = []; - for(var i = 0; i < this.length; i++) { - var item = this[i]; - if(item[2]) { - result.push("@media " + item[2] + "{" + item[1] + "}"); - } else { - result.push(item[1]); - } - } - return result.join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; - }; - - -/***/ }, -/* 210 */ /***/ function(module, exports, __webpack_require__) { /** @@ -7651,7 +7527,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 211 */ +/* 208 */ /***/ function(module, exports, __webpack_require__) { /** @@ -7998,7 +7874,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 212 */ +/* 209 */ /***/ function(module, exports, __webpack_require__) { /** @@ -8018,19 +7894,15 @@ return /******/ (function(modules) { // webpackBootstrap function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - var _utilsCss = __webpack_require__(207); + var _utilsCss = __webpack_require__(210); var _utilsCss2 = _interopRequireDefault(_utilsCss); - var _htmlSaveDialogueHtml = __webpack_require__(213); + var _htmlSaveDialogueHtml = __webpack_require__(211); var _htmlSaveDialogueHtml2 = _interopRequireDefault(_htmlSaveDialogueHtml); - var _styleCssSassStyleScss = __webpack_require__(214); - - var _styleCssSassStyleScss2 = _interopRequireDefault(_styleCssSassStyleScss); - - var _controllersControllerFactory = __webpack_require__(217); + var _controllersControllerFactory = __webpack_require__(212); var _controllersControllerFactory2 = _interopRequireDefault(_controllersControllerFactory); @@ -8042,7 +7914,7 @@ return /******/ (function(modules) { // webpackBootstrap var _controllersBooleanController2 = _interopRequireDefault(_controllersBooleanController); - var _controllersFunctionController = __webpack_require__(210); + var _controllersFunctionController = __webpack_require__(207); var _controllersFunctionController2 = _interopRequireDefault(_controllersFunctionController); @@ -8054,15 +7926,15 @@ return /******/ (function(modules) { // webpackBootstrap var _controllersNumberControllerSlider2 = _interopRequireDefault(_controllersNumberControllerSlider); - var _controllersColorController = __webpack_require__(211); + var _controllersColorController = __webpack_require__(208); var _controllersColorController2 = _interopRequireDefault(_controllersColorController); - var _utilsRequestAnimationFrame = __webpack_require__(218); + var _utilsRequestAnimationFrame = __webpack_require__(213); var _utilsRequestAnimationFrame2 = _interopRequireDefault(_utilsRequestAnimationFrame); - var _domCenteredDiv = __webpack_require__(219); + var _domCenteredDiv = __webpack_require__(214); var _domCenteredDiv2 = _interopRequireDefault(_domCenteredDiv); @@ -8074,7 +7946,19 @@ return /******/ (function(modules) { // webpackBootstrap var _utilsCommon2 = _interopRequireDefault(_utilsCommon); - _utilsCss2['default'].inject(_styleCssSassStyleScss2['default']); + var _cssSassStyleScss = __webpack_require__(215); + + var _cssSassStyleScss2 = _interopRequireDefault(_cssSassStyleScss); + + // CSS to embed in build + + var _fileNameDatGuiCssExtractCssSassStyleScss = __webpack_require__(217); + + var _fileNameDatGuiCssExtractCssSassStyleScss2 = _interopRequireDefault(_fileNameDatGuiCssExtractCssSassStyleScss); + + // CSS as external file + + _utilsCss2['default'].inject(_cssSassStyleScss2['default'], _fileNameDatGuiCssExtractCssSassStyleScss2['default']); /** Outer-most className for GUI's */ var CSS_NAMESPACE = 'dg'; @@ -9262,278 +9146,55 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = GUI; /***/ }, -/* 213 */ +/* 210 */ +/***/ function(module, exports) { + + /** + * dat-gui JavaScript Controller Library + * http://code.google.com/p/dat-gui + * + * Copyright 2011 Data Arts Team, Google Creative Lab + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + */ + + 'use strict'; + + module.exports = { + load: function load(url, indoc) { + var doc = indoc || document; + var link = doc.createElement('link'); + link.type = 'text/css'; + link.rel = 'stylesheet'; + link.href = url; + doc.getElementsByTagName('head')[0].appendChild(link); + }, + + inject: function inject(css, externalCssFileName, indoc) { + var doc = indoc || document; + var injected = document.createElement('style'); + injected.type = 'text/css'; + injected.innerHTML = css; + var head = doc.getElementsByTagName('head')[0]; + try { + head.appendChild(injected); + } catch (e) {// Unable to inject CSS, probably because of a Content Security Policy + } + } + }; + +/***/ }, +/* 211 */ /***/ function(module, exports) { module.exports = "
    \n\n Here's the new load parameter for your GUI's constructor:\n\n \n\n
    \n\n Automatically save\n values to localStorage on exit.\n\n
    The values saved to localStorage will\n override those passed to dat.GUI's constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n\n
    \n\n
    \n\n
    "; /***/ }, -/* 214 */ -/***/ function(module, exports, __webpack_require__) { - - // style-loader: Adds some css to the DOM by adding a