diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js index d9955ca..dbb3e04 100644 --- a/src/dat/gui/GUI.js +++ b/src/dat/gui/GUI.js @@ -75,6 +75,7 @@ const hideableGuis = []; * @param {Boolean} [params.auto=true] * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in. * @param {Boolean} [params.closed] If true, starts closed + * @param {Boolean} [params.closeOnTop] If true, close/open button shows on top of the GUI */ const GUI = function(pars) { const _this = this; @@ -129,6 +130,7 @@ const GUI = function(pars) { // Default parameters params = common.defaults(params, { + closeOnTop: false, autoPlace: true, width: GUI.DEFAULT_WIDTH }); @@ -196,6 +198,16 @@ const GUI = function(pars) { } }, + /** + * Handles GUI's position of open/close button + * @type Boolean + */ + closeOnTop: { + get: function() { + return params.closeOnTop; + } + }, + /** * The identifier for a set of saved values * @type String @@ -335,7 +347,13 @@ const GUI = function(pars) { this.__closeButton = document.createElement('div'); this.__closeButton.innerHTML = GUI.TEXT_CLOSED; dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON); - this.domElement.appendChild(this.__closeButton); + if (params.closeOnTop) { + dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_TOP); + this.domElement.insertBefore(this.__closeButton, this.domElement.childNodes[0]); + } else { + dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BOTTOM); + this.domElement.appendChild(this.__closeButton); + } dom.bind(this.__closeButton, 'click', function() { _this.closed = !_this.closed; @@ -441,6 +459,8 @@ GUI.CLASS_CONTROLLER_ROW = 'cr'; GUI.CLASS_TOO_TALL = 'taller-than-window'; GUI.CLASS_CLOSED = 'closed'; GUI.CLASS_CLOSE_BUTTON = 'close-button'; +GUI.CLASS_CLOSE_TOP = 'close-top'; +GUI.CLASS_CLOSE_BOTTOM = 'close-bottom'; GUI.CLASS_DRAG = 'drag'; GUI.DEFAULT_WIDTH = 245; diff --git a/src/dat/gui/_structure.scss b/src/dat/gui/_structure.scss index 9bea2a1..f497434 100644 --- a/src/dat/gui/_structure.scss +++ b/src/dat/gui/_structure.scss @@ -62,7 +62,6 @@ $button-height: 20px; /*opacity: 0;*/ @include transition(opacity, 0.1s, linear); border: 0; - position: absolute; line-height: $button-height - 1; height: $button-height; @@ -71,6 +70,12 @@ $button-height: 20px; cursor: pointer; text-align: center; background-color: #000; + &.close-top { + position: relative; + } + &.close-bottom { + position: absolute; + } &:hover { background-color: #111; } @@ -87,16 +92,30 @@ $button-height: 20px; overflow-x: hidden; &.has-save > ul { - margin-top: $row-height; + + &.close-top { + margin-top: 0; + } + &.close-bottom { + margin-top: $row-height; + } + &.closed { margin-top: 0; } } .save-row { - position: fixed; top: 0; z-index: 1002; + + &.close-top { + position: relative; + } + &.close-bottom { + position: fixed; + } + } } diff --git a/tests/index.html b/tests/index.html index 8f2880d..c5b13ca 100644 --- a/tests/index.html +++ b/tests/index.html @@ -1051,11 +1051,23 @@ console.log(c2.__checkbox.getAttribute('checked')); gui.destroy(); }, 0); - - - - }); + + test('close/open button position', function() { + + var gui = new GUI({closeOnTop:true}); + var gui2 = new GUI({closeOnTop:false}); + var gui3 = new GUI(); + + ok($(gui.domElement).find('ul').prev().hasClass(GUI.CLASS_CLOSE_BUTTON) && $(gui.domElement).find('ul').prev().hasClass(GUI.CLASS_CLOSE_TOP), 'GUI has close/open button on top'); + ok($(gui2.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BUTTON) && $(gui2.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BOTTOM), 'GUI has close/open button on bottom'); + ok($(gui3.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BUTTON) && $(gui3.domElement).find('ul').next().hasClass(GUI.CLASS_CLOSE_BOTTOM), 'GUI has close/open button on bottom by default'); + + gui.destroy(); + gui2.destroy(); + gui3.destroy(); + + }); test('Folders', function() {