Add event handler as/via prototype?

[Silly-V]

I would like to try and increase my javascript knowledge here.

So, here is what I have got so far, and I would like to make it better. I saw that if you click on the 1 pixel in the border of a dropdown list in CC ScriptUI, it will have the undesired effect of selecting "null", which crashed some of my scripts. Therefore I have made this "prototype" that selects the first item, should someone trigger the effect of selecting null by inadvertently clicking on the border of the dropdownlist.

DropDownList.prototype.selectWell = function(){

  //CC will let you select null

  this.addEventListener('change', function(){

    if(this.selection == null){

      this.selection = this.items[0];

    }

  });

}

The way it would work is like this:

var d = window.add("dropdownlist", undefined, ["Item 1","Item 2"]);

d.selectWell();

Okay, this works, but then you gotta write "d.selectWell();" after every dropdown.

Would it be possible to write such code that every new instance of a dropdownlist already comes with this event listener added?

In browser javascript, they have querySelector(element) to add one listener to every element of the desired kind. I am not sure there is such available in ScriptUI.

I suppose it would be possible to do mass listener assignments via recursive function, but would need to be repeated in windows where new dropdowns are added dynamically.
Also, I could make my own constructor, call it SuperDropDownList and in that constructor add all the necessary listeners and use it to add any dropdown that I want to have the custom functionality in.

However, if this could be done with a simple "DropDownList.prototype", I would like to learn how to do so!

[CarlosCanto · Accepted solution]

where's this 1px? I couldn't click on it...

here's one way to do it

DropDownList.prototype.onChange = function() {
    //CC will let you select null


    alert('on change ' + this.properties.name);
    if (this.selection == null) {
        this.selection = this.items[0];
    }


}


var w = new Window('dialog', '');
var d = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'one'});
var d2 = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'two'});
//d.selectWell();


w.show();

[Silly-V]

This looks like what I am looking for, exactly in fact. However, does adding this named prototype prevent from adding an "onChange" handler later on without overriding this one? And I'll totally experiment as soon as I get a moment, so I may answer my own question soon.

[Qwertyfly___]

adding an onChange later will override.

but you can still add a change Event Listener.

DropDownList.prototype.onChange = function() {  
    //CC will let you select null  
    alert('on change ' + this.properties.name);  
    if (this.selection == null) {  
        this.selection = this.items[0];  
    }  
} 
    //CC will let you select null  


var w = new Window('dialog', ''); 
var d = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'one'});  
var d2 = w.add("dropdownlist", undefined, ["Item 1", "Item 2"], {name: 'two'});  


d2.addEventListener('change',function(){alert('2nd change');});


//d.selectWell();  


w.show(); 

[Silly-V]

Thank you for the information!

[Silly-V]

The null selection occurs when you click right on the border, which is marked in my screenshot. Seems unintended for user selections.

[CarlosCanto]

I think I was able to click on it, since if I did correctly, no selection was made and the drop down wasn't dismissed...no crashing though. win8, estk cc

[Silly-V]

Yes, the crashing would occur if your click/change handler had a reference to selection.text, which would try to get a .text property of null. Of course, every handler could have an if-statement check for null, but in my opinion it is not the expected behavior - so I prefer to nip null selections in the bud.

[Silly-V]

Oh yea, I meant "crashing" as in- script error, not application crash, to be clear.

[Qwertyfly___]

The other option is to just always have a default option selected.

or instead of an if statement you could use an or when getting the text from the dropdown.

var mySelection = myDropdown.selection || "not set";