Using custom forms in plugins

[chvelkov]

Hi,
I am building an open source plugin for galleries for grav. The plugin has a drag-n-drop interface for the Admin Panel, which allows users to create galleries, upload images to a central storage, cut & paste images, reorder, etc. I also want to take advantage of the custom forms functionality to allow users to add additional data to individual images. This is how I display forms currently:

• The user clicks clicks on the "Edit image" button. An AJAX request is made to the server to load the form.
• The plugin renders the custom form and sends the HTML back to the client.
• On the client side the received HTML of the form is inserted into a remodal instance and displayed.

The problem is that I need to initialize the form once it's displayed in order for widgets like toggables, arrays, datetime fields and similar to work. Without initialization only simple text inputs work.

Looking through the code of the admin and form plugins I am unable to identify how to properly do it.
Is it possible to initialize custom forms in plugins? If so, what would be the best method to do it?

Thank you.

[flaviocopes]

Assigning to @w00fz as he knows best about the JS forms implementation

[w00fz]

What we use in Grav to deal with this is to rely on mutation events. I added an event listener mutation._grav on the body that kicks in everytime there is a mutation in the DOM which is the perfect place to look for significant changes where you might want to initialize your class.

$('body').on('mutation._grav', this._onAddedNodes.bind(this));

Have a look on how I'm doing this in the fields array, datetime, filepicker, selectize and files.

It is the same approach on all, listen to the mutation event listener, ensure it matches the changes for your field, if it does then initialize.