Okay, let's work on toggling the visibility of this model using Alpine. So into our code, let's make this an Alpine component. So let me just format this real quick. So let's give it some data. So xData equals. And as always, let's put a piece of state called isOpen. And let's set it to true by default. Okay. And let's set an xShow on this. So we want it to show when the variable isOpen is set or when the variable isOpen is true.

And let's set an x-show on this. So we want it to show when the variable is set or when the variable is true. And let's put a escape key listener on this. So when we hit escape, the model closes. So keyDown.escape, and we want it on the entire window. And we can just set the isOpen variable here. So isOpen equals false. And let's also do it for the close button. So this button here. So that would be down here somewhere, this button right here.

So this button here. So that would be down here somewhere, this button right here. So again, let me just reformat this. And let's say, atClick. And set isOpen to false. Okay, so let's see if this works. So it should show. If I close this, it hides. And let's refresh again. And if I hit escape, it hides.

And let's refresh again. And if I hit escape, it hides. Okay. So now we want to be able to show the Idea model when we hit edit Idea. So how do we do that? The components are sibling components. You'll see this is this component here. And then we have a separate one that's a sibling called edit Idea. So we can also make use of events in Alpine the same way we made use of it within Livewire and Alpine.

So we can also make use of events in Alpine the same way we made use of it within Livewire and Alpine. So let's see if we can get that working. So we're going to dispatch the event when we hit the edit Idea button. And then we'll listen for it on the edit Idea Alpine component here. So how do we dispatch events? So if you go into Alpine here, you'll see we can use the dispatch method. And we can do something like this. So let's grab this. And I believe the first word has to be custom for this to work.

So let's grab this. And I believe the first word has to be custom for this to work. So you can see an example here. It's the same component, but it works across global components as long as they're both on the page. So this one dispatches the event and passes through some variables. And then this one listens for it and then console.log whenever it hears it. Okay, so let's do that. Let's go back to our code. Let's go to idea.show.

Let's go back to our code. Let's go to idea show. So this is where the edit idea button is right here. So again, I'm going to format this. Okay, and let's go ahead and paste in what I have here. So let's dispatch an event. And we don't need to pass in data. So let me remove this second param. And like I said, I believe we need custom as the first word. So let's say showEditModal.

And like I said, I believe we need custom as the first word. So let's say showEditModal. Okay, and now we can listen for that event in the EditIdea component here. So let's put it on here. So to listen for that event, let's grab this. And it's pasted in anywhere here. I'll put it right after the key down here. And let's change this name to whatever I named it, which was customShowEditModal. And all we want to do here is set isOpen to true. Okay, and now let's set it to false by default.

And all we want to do here is set isOpen to true. Okay, and now let's set it to false by default. And let's see if this works. So back here, hard refresh. As you see, when we refresh, we can see it for a second. So we can add x-cloak on here. Or you can just set display: none if you want on the CSS directly. Okay, let's try again. Okay, it's gone. And now let's try the event.

Okay, it's gone. And now let's try the event. So edit Idea. Okay, it doesn't seem to work here. We might have to add window on this custom listener here. So let's say window here, see if that fixes it. Hard refresh. Try again. And it does work this time. Cool.

And it does work this time. Cool. So this dialogue over here is still showing. So let's hide that when we click it. So back to Idea show. So we can dispatch the event. And we can also hide the modal. So for this, it has its own isOpen state. Let's just close that here. Okay.

But I'm okay with just the X button or escape. Okay, now let's work on the transition here. If you look at the Alpine component, you'll see that there's comments here from Tailwind UI. And you can definitely do this using Alpine. It has the ability to set those classes on different states or different stages of the elements transition using XTransition. So you would just combine whatever it says in the comments to these states. But like I said, I just want to make use of Alpine's default transitions. So I'm going to delete that.

OK, you definitely can't see the difference there. But I'm just tweaking it to my liking. I think 300 is good for me. Not sure what the default is. I think it's 200 or 250. So yeah, that's it for this video. In the next video, we'll work on actually editing the Idea. So as always, let's git add. This is episode 38. git commit episode 38.

This is episode 38. Git commit episode 38. Edit Idea modal transitions. Oops, as you see, I have a typo in my commit. I have this handy alias called undo commit, which undoes the last commit but keeps the changes. So let's do that. undo commit. And we should have the same changes here. Oops, git status is what I meant.

And we should have the same changes here. Oops, git status is what I meant. So let's do that again with the correct episode number. Edit idea modal transitions 38. Oh, sorry, we have to git add. So git add, git commit. And now you see the git log is still correct.