liveSocket.connect misses with the page layout

Phoenix Forum Questions / Help
1

When I remove the line liveSocket.connect() the masonry js library works fine, but when I keep it, there are layout problems

this is inside the index.html.heex file:

<script type="text/javascript" src={Routes.static_path(@socket, "/assets/masonry.pkgd.min.js")}></script>

and

 document.addEventListener("DOMContentLoaded", () => {
     var elem = document.querySelector('.grid');
     var msnry = new Masonry( elem, {
	 originLeft: false,
	 itemSelector: '.grid-item',
	 columnWidth: 200
     });
 })

When I run liveSocket.connect() either manually or from app.js some of the style attributes are removed from the elements.

It seems like a matter of order, the sequence should be liveSocket.connect() then new Masonry(...)
not
new Masonry(...) then liveSocket.connect()

2

@alsaraha this question is a bit light on details but you’re probably going to need to read up on Hooks, especially the need to use phx-update="ignore" on elements that are going to be modified by some of your JS.

1 Like
3

Your reply is helpful though not the answer. I can listen to “phx:update” event and reinitialize the library, but still I am looking for event like “phx:mount”

4

Have a look at hooks: JavaScript interoperability — Phoenix LiveView v0.17.11 that should allow you to initialize the library on the right moment.

1 Like
5

Can you provide more information about how you’re masonry js?

1 Like
6

Informative but it seems like mounted() is executed before liveSocket.connect() too

7

I have provided more information above.
Masonry js is at Masonry · Layout

8

You might have more luck if you work with the framework. If you’re changing the DOM outside of liveview, you need to tell liveview to ignore that part with phx-update="ignore" (not what you’re talking about with listening to events).

You might have some success by leaving liveSocket.connect() alone, getting rid of that event listener and creating a hook for Masonry (based on the event listener).