How to execute Javascript in admin preview after element change

[dssjoblom]

I didn't find any documentation on how to run Javascript in the preview pane after an element has changed. Our use case is for example a custom slider using the picture essences (see screenshot), but this applies to any previewable element using custom JS. I figured out how to get the slider working in the preview pane, but it requires pressing the reload button when adding a slide to trigger e.g. DOMContentLoaded so that the code can be run again. It seems like adding a slide will directly modify the DOM in the preview instead of reloading it. Is there some other event we could listen to, e.g. "alchemy-element-changed" or something like that? The same applies to e.g. changing the preview size. Does this trigger an event? Another way to solve this would be for Alchemy to allow automatic reloading of the preview after any change using a configuration setting. This is for version 6 if it makes any difference.

[tvdeyen]

It seems like adding a slide will directly modify the DOM in the preview instead of reloading it.

We are not modifying the DOM in the preview frame. We reload it.

alchemy_cms/app/views/alchemy/admin/elements/update.js.erb

Lines 8 to 13 in a4397f2

	$errors.hide();
	$el.trigger('SaveElement.Alchemy', {previewText: '<%= j sanitize(@element.preview_text) %>'});
	Alchemy.growl('<%= Alchemy.t(:element_saved) %>');
	Alchemy.PreviewWindow.refresh(function() {
	Alchemy.ElementEditors.focusElementPreview(<%= @element.id %>);
	});

Not sure where your impression we modify the DOM comes from.

Is there some other event we could listen to, e.g. "alchemy-element-changed" or something like that?

Yes, we trigger a custom event, but we do not send this to the Preview iFrame. We could, but since we also reload the frame this would not make any sense, because the DOM will change with the reload.

The same applies to e.g. changing the preview size. Does this trigger an event?

Yes, your browser will trigger a normal window resize event, since we just resize the iFrame. You could listen to that, if @preview_mode is set to true.

But I strongly recommend to use @media queries in your CSS instead of using Javascript.

Another way to solve this would be for Alchemy to allow automatic reloading of the preview after any change using a configuration setting.

We already do that (see above)

[dssjoblom]

@tvdeyen ok, thanks for this, much appreciated 🙏. It is probable that the behavior I observed is not related to the reloading or lack thereof after all, sorry for the false alarm.

[tvdeyen]

Don't be. It is great to have this documented some where. Would be great to have your findings and your solution documented here as well. Other users might also have this question.