Here’s an example where there is a show/hide modal.
def show_modal(js \\ %JS{}, id) when is_binary(id) do
js
|> JS.show(
to: "##{id}",
display: "inline-block",
transition: {"ease-out duration-300", "opacity-0", "opacity-100"}
)
|> JS.show(
to: "##{id}-container",
display: "inline-block",
transition:
{"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
"opacity-100 translate-y-0 sm:scale-100"}
)
|> js_exec("##{id}-confirm", "focus", [])
end
Edit: Also as to the “I thought I don’t need JS in Liveview”
While you can do a great deal without JS I would not recommend trying to avoid JS.
That said, the way you interface with JS is much different if you choose to use the Liveview JS module.
But by no means are you limited to just using the Liveview JS modules.
I would spend a little time reading this JavaScript interoperability — Phoenix LiveView v0.19.5
I would read how they do it in that example I show for live beats.
They also have the modal in the main layout too.
They even did a good job describing the fact this was in the layout and they use send_update as a way to talk with said component.
Honestly just spend a good amount of time just reading and trying to understand how they got the modal to work and it will answer your question.
I apologize but reading code I can barely understand is not productive for me when learning a new technology.
This is mainly why I mostly focus on tutorials, guides and the community to ask guidance.
I understand you are not like me, I am happy for you. I would really appreciate if you could point me in another direction.
My apologizes,
I realize I’m asking you to do the hard longer path.
I will only say it will be just that much more rewarding if you keep with it.
I believe that while it maybe hard to understand at first, I too took a long time and many re readings of this code before I understood it too.
I just would hate to think what you will be missing out on if you don’t try to push past the hard part.
And honestly try and get as far as you can, then come back with more questions. I will be waiting and willing to help and so are others here.
In other words you can’t rush this stuff. There is no easy ticket to learning this.
My best advice, read the Liveview documentation on top of using the LiveBeats as a starting point.
Or even just generate a basic scaffold app, it too has many great and closely resembling examples.
So all that said. #1 you are trying to access a liveview component at the layout level.
You need to take this into consideration as most liveview components are children of a main liveview component. Thus the send_update function maybe a needed thing to learn.
#2 Look at how the LiveView JS module works. It has the transformation options you are looking for.
#3 Embrace vanilla JS and ES6 standards you will still need these and the more you learn the easier it will be to understand what benefits LiveView is giving you.
Will hide the item if it is visible and do nothing if its not (makes sense given the function’s name). Is there a function/way that I am missing that shows/hides the components?
I take from LiveBeats that when showing a dropdown I must add a class that tells me it is expanded:
def show_dropdown(to) do
JS.show(
to: to,
transition:
{"transition ease-out duration-120", "transform opacity-0 scale-95",
"transform opacity-100 scale-100"}
)
|> JS.set_attribute({"aria-expanded", "true"}, to: to)
end
def hide_dropdown(to) do
JS.hide(
to: to,
transition:
{"transition ease-in duration-120", "transform opacity-100 scale-100",
"transform opacity-0 scale-95"}
)
|> JS.remove_attribute("aria-expanded", to: to)
end
But I wonder if there is a another way of doing it.
This will show the item when the button is clicked and hide it when you click away. If you click the button while the item is visible, nothing happens.
I understand that if I want more custom behaviour I can add it in components/core_components like in the Project @polygonpusher suggested.
