Disable dat.GUI folder

1.8k Views Asked by At

My example use 'DAT.GUI.min.js'. I need disable/enable a folder option when another folder option is selected. For example when 'visibleImageX folder' is checked the folder 'fixImageX' must be enable, but when 'visibleImageX folder' is not checked the folder 'fixImageX' must be disabled.

My example is :

function initGUI() {

gui = new dat.GUI({
    height : 5 * 32 - 1
});

parameters = {
    x: 0, y: 0,
    visibleImageX: true,
    visibleImageY: true,
    reset: function() { resetSurvey() }
};

var showPlan = gui.addFolder('Show Plan');
showPlan.add( parameters, 'visibleImageX').name('x').listen().onChange( 
    function(value) {
        if (!value) { 
            parameters.x = 0;
            //disable the folder name: fixImageX
        } 
        else { //enable the folder name: fixImageX}
    });
showPlan.add( parameters, 'visibleImageY').name('y').listen().onChange( 
    function(value) { 
        if (!value) { 
            parameters.y = 0;
            //disable the folder name: fixImageY
        }
    });
showPlan.open();

var fixImage = gui.addFolder('Fix Image');
var fixImageX = fixImage.add( parameters, 'x' ).min(0).max(100).step(1)
.listen().onChange(function(value) {
    // Do somethings
});

var fixImageY = fixImage.add( parameters, 'y' ).min(0).max(100).step(1)
.listen().onChange(function(value) {
    // Do somethings
});
fixImage.open();
}
1

There are 1 best solutions below

0
On BEST ANSWER

First, you only have 2 folders called fixImage and showPlan. Then using JQuery, to hide the folder you can do

$(fixImage.domElement).attr("hidden", true);

And to display it

$(fixImage.domElement).attr("hidden", false);