Running JS after theme customizer finished initialization

So, far the problem was with the initial loading of the JS file. As i couldn’t find any solution using the JS. The problem was not about the script loading rather then the execution timing.

Anyways, The theme customizer looks into the global variable for which Panel/Section/Control it will show as active when it loads.

How to Make Sections/Controls/Panels Active/Deactive on initial loading

After spending hours into the core files I have found solution.

1. For Panels use customize_panel_active filter. Passes two parameter $active boolean and $panel object.
2. For Sections use customize_section_active filter. Passes two parameter $active boolean and $section object.
3. For Controls use customize_control_active filter. Passes two parameter $active boolean and $control object.

Example: If I assume I have a panel and its id is my_panel. And I want to hide it if certain theme option is not set.

add_filter('customize_panel_active', 'maybe_panel_active', 10, 2);

function maybe_panel_active($active, $panel){

    if($panel->id == 'my_panel' && !theme_option('certain_theme_option') ){
        $active = false;
    }

    return $active;
}

That’s about it! Pretty straight forward 🙂

Note: The solution is purely php. If anyone able to make it work by listening to the customizers JS events. I would be very interested on it as the question was initially intended for a JS solutions.