When does converse.js chatBoxInitialized event actually emit?

Question

I'm trying to configure a few settings in a converse.js chatbox (title, removing avatar, chatbox width) PRIOR to it "rendering" and displaying the chatbox.

While not explicitly saying so, I had figured that the "chatBoxInitialized" event would fire AFTER the chatbox object was created, but prior to rendering and displaying.

What I'm finding is that when my handler function for that event is called, the chatbox is already displayed, so clearly my understanding of "chatboxinitialized" is incomplete. Inside the handler, I have used available methods in chatbox object such as

chatbox.setChatBoxWidth(350);
chatbox.model.attributes.fullname = data;

to set chatbox attributes but while the statements execute and have a momentary effect, as soon as the handler function completes, something is setting those values back, and the box "re-renders" and displays as it was before my function ran.

Is there a more appropriate event to register for so these values can be set prior to chatbox rendering? Are there more appropriate "chatbox set functions" that can be used to properly set such things as size, and turn off avatars, rather than just reaching into DOM directly and manipulating after the fact?

Any help would be appreciated.

Answer 1

If you look at the code, you'll see that chatBoxInitialized gets triggered after the chatbox's HTML has already been rendered.

See here: https://github.com/jcbrand/converse.js/blob/393bbe020e45ccd2abe10683117a8f854dea9145/src/converse-chatview.js#L281

Looking at the code, I don't see any event that's triggered after the chatbox has been created, but before it's rendered.

However, in the current master branch of converse.js (to be released soon), you can set the fullname after the chatbox has been created, and it will then appear properly.

You're however setting it wrong. With Backbone.js you must use get and set and not the attributes property.

So this:

chatbox.model.attributes.fullname = data; 

must be changed to this:

chatbox.model.set({'fullname': data});

Concerning setting the chatbox width, I think the best way to do that is to set the relevant Sass variable, see here:

https://github.com/jcbrand/converse.js/blob/393bbe020e45ccd2abe10683117a8f854dea9145/sass/converse/_variables.scss#L111

Then run make css to generate new CSS.