search

janzheng / svelte-masonry

Masonry for Svelte
https://svelte-masonry-one.vercel.app/
23 stars 7 forks source link

Work around for not working before resize with pictures #1

Closed ambrt closed 4 years ago

ambrt commented 4 years ago

In short, this repo doesn't work when i load it first time, or at least after hot reloading.

bug-svel-mason

When i fired 'resize' event,manually tiles got sorted in correct way.

So quick work around is to add <svelte:window on:load={()=>{window.dispatchEvent(new Event('resize'))}} />

Adding resize event in onMount didn't work, event was fired too early.

Im not sure if initial layout is fired on first load at all,is it fired too early or is there other thing: https://github.com/janzheng/svelte-masonry/blob/master/Masonry.svelte#L107

For now on:load is quick fix.

janzheng commented 4 years ago

Hi and thanks for your feedback!

I wasn't recalculating on new items, so that was an oversight. I added an items prop that you can set to your data array object, which will instruct the masonry to update if the data changed items={yourDataArray}

The problem with event firing was solved by awaiting for the tick to trigger before the grid gets recalculated.

Please take a look at the REPL: https://svelte.dev/repl/d5ff70834832498882d1570b9355561e?version=3.24.1 and let me know if I've solved your problem! I added a dynamic item adder to the REPL for easier testing.

ambrt commented 4 years ago

This seems to be working now. Thanks!