Muuri: Changing options on-the-fly

[bernhardberger]

This is probably the last thing I need to sort out for a while:

How can I change the grid options during runtime? I specifically need to change dragEnabled, probably the autoScroller as well as a few dozens of other options.

Use case:
I use Muuri to layout items on a website. Logged in users however can switch to 'edit mode' and drag and sort items around, even hide whole sections of the page and later on possible even drag whole sections around and stuff grids in grids.. The initial state however is ALWAYS static - I'm hoping for a) some minor performance gains b) I need to disable the ability to drag items based on some user actions. Right now I have to block interaction using the drag start predicate and hardcode the css drag- properties with !important in the stylesheet based on some classes.

I'd like to avoid as much workarounds as possible.. I most likely also need to alter the autoScroll behaviour based on the viewport after resizing the window..

[niklasramo]

I feel you, this is a commonly requested feature: https://github.com/haltu/muuri/issues/297. However, it's not so trivial to implement.

Some options you can just directly change via grid._settings, but some options need a bit more work to change dynamically. I wish I had the time to add this feature to Muuri, but it's a lot of work and not on my priority list atm.

[bernhardberger]

So apart from destroying the grid and re-initializing it there is nothing I can do about it?

I could live with that - if there was any way to keep the layout intact.

I was hoping for a method I could call to reinitialize the grid without losing the layout.

[niklasramo]

Well of course there's always something you can do about it (e.g. build the method into Muuri yourself and make a PR 😉 ). Some of the options accept functions which make them pretty dynamic already, and I did try to build the options in such a way that in most cases you would _not_ need to update the grid options after init. All of the options _can_ be updated dynamically, but you need to dive into the source code and see for yourself how to make that happen, unfortunately. If I'd need to update some of the options dynamically I'd have to also check the source as I don't remember all of the details by heart.

[bernhardberger]

Yeah, I tried to look into it, but I'm actually a backend guy so plain,
hardcore JS just looks kinda like chinese to me and typescript feels like
voodoo 🙈

That being said: if you can point me in the right direction I'd be happy to
at least take a look at it trying to understand what's happening. From my
quick looks of it your lib actually is one of the cleanest pieces of JS
I've seen in quite some time..

On Fri, 14 Aug 2020, 16:20 Niklas Rämö, [e-mail] wrote:

Well of course there's always something you can do about it (e.g. build
the method into Muuri yourself and make a PR 😉 ). Some of the options
accept functions which make them pretty dynamic already, and I did try to
build the options in such a way that in most cases you would not need
to update the grid options after init. All of the options can be
updated dynamically, but you need to five into the source code and see for
yourself how to make that happen, unfortunately.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/haltu/muuri/issues/412#issuecomment-674098339, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAQDFA3TKGPEJSJXGR7QJKLSAVB4HANCNFSM4P63I7LA
.

[niklasramo]

I actually found some inspiration to tackle the updateSettings() method for Muuri's next version last weekend, and the initial version is now testable in dev branch. That should give a good starting point for your own implementation (unless you want to wait for the next version to be released, and no, I don't know yet when that's going to happen 😅 ).

[bernhardberger]

This sounds (and looks) very promising! I'll give it a go sometime this week, but this makes integrating Muuri in reactive JS frameworks a lot easier (A LOT).

[niklasramo]

Yeah, this is the first stumbling block when I've thought about building a React wrapper for Muuri or when I'm building a React app with Muuri in it. Always need to do some hacks to circumvent the non-existence of this feat...