Just playing around with Phoenix.LiveView.JS and wondering if there is a way to toggle classes on and off on an element? There is ‘add_class’ and ‘remove_class’ but ‘toggle’ looks like it is just used for showing and hiding. But maybe there is a way but just can’t see it.

I came here to ask this just now trying to make an indicator transform 180 degrees and not disappear. https://github.com/phoenixframework/phoenix_live_view/pull/1721 It looks like its not in master yet. I’m using dispatch for now: js = JS.dispatch(js, "icon:rotate-180", to: "#accordion") window…

I have an updated solution that supports more complexity inspired by some code I found in LiveBeats # app.js const execJS = (selector, attr) => { # this executes rendered JS commands on an element document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr))) …

Is there a reason to not merge the PR? Seems like a really popular request and also something built in to JS/DOM with classList.toggle? Maybe it adds too much complexity? Is the PR bad?

Not sure, I just again came in search of this functionality again two days back so I checked the PR to see why it hadn’t gone forward – just appears abandoned. The updated solution from begleynk worked like a charm for me though. Crossposting suggested solution for future searchers: def toggle_ex…

[image] Dabsy: Not sure, I just again came in search of this functionality again two days back so I checked the PR to see why it hadn’t gone forward – just appears abandoned. More like forgotten by the LV core team I would say. AFAICS they didn’t provide any feedback apart from “we’re aware o…

[image] trisolaran: Aren’t the remove_class and add_class commands executed in order? Technically, yes, but the psuedo class :not selector in the command: [image] Dabsy: #outer-menu:not(.expanded) Only adds the class to the #outer-menu element if it does not have .expanded in its clas…

never used LV.JS, so most likely stupid question: why not just use LV to toggle the class?

If you’re asking why not use the LV server state to render the element with / without a certain class, it’s because there are some UI interactions that don’t require a round-trip to the server which (can) introduce a couple hundred ms delay. Things like user profile menus opening/closing should be i…

[image] JohnnyCurran: [image] trisolaran: Aren’t the remove_class and add_class commands executed in order? Only adds the class to the #outer-menu element if it does not have .expanded in its class list I think it implies a kind of “DOM transaction”, probably the changes are applied to…

[image] JohnnyCurran: Only adds the class to the #outer-menu element if it does not have .expanded in its class list That doesn’t explain why it works. The first operation removes the class if the element has it, the second one adds it if the element doesn’t have it. But after the first opera…

Elixir Programming Language Forum

Toggle classes with Phoenix.LiveView.JS

Questions & Help Questions

soup December 1, 2022, 9:11am 16

That wont survive dom patching, probably.