library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add property to specify if open/close button shows on top or bottom of the menu

Browse Source 
Adds the 'closeOnTop'  property to the GUI constructor params to specify if open/close button shows on top or bottom of the menu (bottom by default)
This commit is contained in:
Bruno Quintela 2016-12-07 16:42:55 +00:00
parent d5b6178e33
commit 9540dd1c2f
3 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/dat/gui/GUI.js
View File

@ -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 <code>GUI</code>'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;

7
src/dat/gui/_structure.scss
View File

@ -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;
}

12
tests/index.html
View File

@ -1051,9 +1051,21 @@ 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();
});