Javascript Events when opening settings form

Developers
1

Are there any javascript events is triggered whenever a module-settings panel is opened?

I’m trying to add some custom classes to the fl-lightbox and tabs to provide some extra width when using a custom module. It works when adding the class manually but would be nice to just add them when the form is triggered.

I tried using the

$( '.fl-builder-content' ).on( 'fl-builder.layout-rendered', myCallbackFunction );

and

$( '.fl-builder-content' ).on( 'fl-builder.preview-rendered', myCallbackFunction );

but these are only called once and the form is created this event.

Thanks.

2

I got it working by adding jquery plugin called onMutate:
https://github.com/eclecto/jQuery-onMutate/

In my bb-plugin I enqueue scripts and css

wp_enqueue_script( 'bbjquery_mutate', BBEXTRA_MODULES_URL .'jquery.onmutate.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'bbextra_js', BBEXTRA_MODULES_URL .'add_width.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_style( 'bbextra_css', BBEXTRA_MODULES_URL .'add_width.css', 1, 1, 'all' );

In my add_width.js I check for creation of .fl-lightbox-header element which basically means a new settings window is created. After that I add the class to a few elements and reset position of the fl-lightbox element to the center of the screen.

I can now have a settings-window that accommodates a larger wysiwyg-editor.

Please let me know if I could have done this differently, but it seemed worth the trouble to get this working this way.

3

Hey Didou,

I’m glad to hear you got it working. There’s no good way built-in to hook into a settings lightbox open event, but we can add one if needed. All of our events are delegates, so we’ve never needed that, but let me know if you do.

Thanks!
Justin