New Public js event should be added.

[rsepierre]

https://laytheme.com/documentation/custom-javascript.html

The only event disclosed in the documentation is newpageshown. Which is good to modify behaviour on the page on existing elements.

The only issue is that laytheme completely reprints the page every time the browser's size reaches a breakpoint. So all javascript changes / event listeners you could have made / bound to existing elements are gone.

We should get one public event that announces that a layout has been finalized. Whether it's from a page load or from a sizechange.

There is already a sizechanged event but it actually fires before the layout is changed. (I assume that it's the event used to trigger the layout change)

window.laytheme.on("sizechanged", function () {
    console.log('sizechanged');
});

Those two events do not fire at all if you don't have a custom phone layout and I have not tested if it is fire before/after the new grid is fully printed :

window.laytheme.on("switched_customphonelayout_to_desktoplayout", function () {
    console.log('switched_customphonelayout_to_desktoplayout');
});

window.laytheme.on("switched_desktoplayout_to_customphonelayout", function () {
    console.log('switched_desktoplayout_to_customphonelayout');
});

And I could not get those to fire either :

window.laytheme.on("gridshown", function () {
    console.log('gridshown');
});

window.laytheme.on("overlayshown", function () {
    console.log('overlayshown');
});

window.laytheme.on("overlayhidden", function () {
    console.log('overlayhidden');
});

window.laytheme.on("transition_in", function () {
    console.log('transition_in');
});

window.laytheme.on("transition_navigation_out_completed", function () {
    console.log('transition_navigation_out_completed');
});

window.laytheme.on("before_content_replacement_for_project_overlay", function () {
    console.log('before_content_replacement_for_project_overlay');
});

window.laytheme.on("before_content_replacement", function () {
    console.log('before_content_replacement');
});

window.laytheme.on("transition_out", function () {
    console.log('transition_out');
});

window.laytheme.on("popstate", function () {
    console.log('popstate');
});

I think we should have one public event, in the documentation, that fires every time a new grid layout is fully printed, in all situations, not dependent on the reason of that change (whether it's a new page or a size change, custom layout or default layout, etc).

[arminunruh]

can you try

window.laytheme.on('content_ready', typeOfContentThatIsReady, $target, isProjectOverlayObj){

}

typeOfContentThatIsReady
will be desktop or phone

$target will be any containers that include gridder grids

So all javascript changes / event listeners you could have made / bound to existing elements are gone.

If you bind event listeners in a delegated way to document like described here:
https://laytheme.com/documentation/custom-javascript.html#binding-click-events

<script>
jQuery(document).on("click", ".clickme", function(event) {
	console.log("yay!");
});
</script>

then no dom changes will alter these binds