CODEWITHSUNDEEP
javascriptthree.jsdat.gui
user3410517
user3410517

Reputation: 295

Disable dat.GUI folder

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();
}

Upvotes: 4

Views: 1853

Answers (1)

sRcBh
sRcBh

Reputation: 286

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);

Upvotes: 1

Related Questions