How to control checkbox in dat.gui?

Question

I am using dat.gui to provide an interface for an application to control the scene similar to the following example:

http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

Problem:

I need to add an action to the checkbox and another action to the text (display Outline) next to the checkbox.

For example, there is a text in the scene. When I click the checkbox, it must show/Hide the text and when I click the "displayOutline" it must zoom in to the text. However, in the above link, when you click the text or the checkbox, one action is happened. I cannot add different actions to the text and checkbox.

Code:

var folder1 = gui.addFolder('Basement');
folder1.add( parameters, 'visible' ).name('Lot 1');
var spans = document.getElementsByTagName('span');
for (var i = 0, l = spans.length; i < l; i++){
    var text = spans[i].textContent || spans[i].innerText;
    if (text == "displayOutline")
        {
        var checkbox = spans[i].nextSibling.firstChild;
        checkbox.addEventListener('click', function(event){
        // Do something with the checkbox
        alert("checked");
        });
    }
} 

Question:

How can I add different actions to the checkbox and the text next to the checkbox?

Thank you for your help.

Answer 1

Well, you want to hack dat.gui so you should, um, hack it. Look at the generated tags. There is a tag that looks like this:

<span class="property-name">displayOutline</span>

So retrieve that element, and add a click handler to it. This is in addition to the handler you already added. Your handler will still be called when the label is clicked, but the new handler will only be called when the label is clicked. So you'll need to add some sort of flag to prevent your checkBox click handler from executing when only the label is clicked.

var spans = document.getElementsByTagName('span');
var _labelClickHandlerCalled = false;
for (var i = 0, l = spans.length; i < l; i++){
    var text = spans[i].textContent || spans[i].innerText;
    if (text == "displayOutline")
    {
        spans[i].addEventListener('click', function(event){
          _labelClickHandlerCalled = true;
          console.log("label checked");
        });      
        var checkbox = spans[i].nextSibling.firstChild;
        checkbox.addEventListener('click', function(event){
          if (_labelClickHandlerCalled) {
            _labelClickHandlerCalled = false;
            return;
          }
          console.log("checkbox checked");
        });
    }
} 

It ain't pretty, but it works.