Is there a JavaScript event available for when the parent tab of a custom field is shown?

Question

I need to have a JavaScript event that is triggered when the parent tab of my field type instance is shown on the entry form. So if the field is on the second tab, the div is hidden on instantiation. The div is obviously shown once the parent tab is clicked. I need this event to reset the map in my field type. If a map is instantiated with a hidden div, it must be redrawn before it can be displayed properly. So when the div displays (after the parent tab click) I need to trigger the method to redraw the map. Is there a JavaScript event available for this and if so, how would I use it?

If no such event exists and if one can't be added, I guess the only other way would be to try to traverse the DOM and add click events to the respective tabs. This feels kind of like a hack though and would break if the DOM changes.

Answer 1

There is not, however if you have a Javascript class that extends Garnish.Base, you will be able to listen for a custom resize event on your container div using Garnish.Base::addListener(), which will trigger when the element first gets a height.

window.MyClass = Garnish.Base.extend(
{
    container: null,

    init: function(container)
    {
        this.$container = $(container);

        // Is the container already visible?
        if (this.$container.height())
        {
            this.doStuff();
        }
        else
        {
            // Hold off until it is
            this.addListener(this.$container, 'resize', function(ev)
            {
                this.removeListener(this.$container, 'resize');
                this.doStuff();
            }
        }
    },

    doStuff: function()
    {
        // this.$container is visible now
        // ...
    }
});

Off-topic, but worth noting: one of the benefits of using Garnish.Base::addListener() rather than jQuery.on() or jQuery.bind() is that it will maintain the scope for you in the callback function. So you don’t need to worry about doing that yourself with jQuery.proxy(), e.g.

this.$container.bind('click', $.proxy(function(ev)
{
    // `this` would refer to the container element here, if it weren’t for $.proxy().
}, this);