Laravel Movie App - UI Interactivity w/ Alpine.js - Part 5

what's up guys welcome back and in this video I'd like to add some UI interactivity to our application using Alpine Jas now in the last video we built this search drop-down using livewire and it works great but it's still missing some nice UX additions such as clicking a way to hide it and pressing escape to hide it and little things like that so this doesn't require a full round-trip to the server so we have to make use of JavaScript to manipulate the Dom now we have a few options here we can use vanilla Jas or use view Jas or use Alpine Jas so for me when I'm in the context of a server driven app like we are here and we're just doing some basic toggling of UI components I would choose Alpine overview or vanilla JavaScript it's very simple to use doesn't require a compilation step and it also plays well with livewire since it was created by the same person so if you want to learn more on alpine jf i have a video on that and i also have an entire course on scramble which i will link to below so let's go ahead and get started start off by installing Alpine and this is one of my favorite things about Alpine you can just drop it in and it starts to work without any compilation steps so let's drop this into our application let's go to our main blade layout and let's just drop it in here so I'll put it after the Styles okay and now it's installed and the first thing I want to do is click away from this and I want to hide it so right now that doesn't work so let's go ahead and do that so let's open our search drop down component that we made in the last video using livewire search drop down sorry ok and we have to define some state on some parent tag that houses everything we're going to interact with it so in this case I'm just gonna put it here and we have to specify the state add an object so let's go ahead and do that so I'm gonna do is open is true by default and make sure to put coats on that okay and for the actual drop down which is this div right here we want to use X show on it so X show it's also like V show or VF in view and we just set it to is open so that should still show I think should have changed here so when we open it that should still show but now we can add this click Handler and we can do it on clicking away so we want to put it on the entire container like I'm doing here so once I click off that container then is open is false and then that will hide it so let's see if this works so let's try again so the initial show is handled by livewire but now if I click off of it it's handled by Alpine ok so now I want to do the same thing when we press the escape so let's go ahead and do that so I'm gonna put that on the actual drop down so right here let me just reformat this so each attribute is on its own line okay and we're gonna listen for the Escape key but we want this to happen on the entire window so it doesn't matter what's focused because the window is listening for this key down event so we can just add the dot window modifier and then which set is open to false so now the Escape key should work as well okay let's try that so let's try this again and yours livewire opens it and I'm pressing escape here and it works awesome now another case I want to handle is when we show it initially and then we either press escape or click off of it and then refocus it then I wanted to show up again so let's do that again very easy so I'm gonna put it right here so we're listening for the focus event on the input actually this should be on the input so I'm gonna put it up here instead so let me just reformat this and I'm gonna do at focus so when this input is focused I want to show it so it's open it's true and I'm gonna put this key down escape window on there too just so we have all the event listeners in the same place it doesn't matter where you put it because it's being listened to on the entire window so I'll put it here and let's see if this works if I spell focused right cool refresh its give it a search query let's press escape let's click off of it so it's not focused and let's click on again and now it shows awesome so another case I want to add here to make it a bit more keyboard friendly is to hide it when the input is not focused so there's two cases for that so if the input is focused like it is here and I shift tab off of this I want this to hide so let's take care of lactase first and I just found a bug here so let's just put a z-index on this to be higher so that would be this so let's see if that bug is fixed say is e 50 I think that's the highest z-index until wind is refreshers let's try it again okay cool so let's take care of that case so shift tab on this I want this to hide so let's do that so we can do multiple keys like in view so key down that shift tab and we just said is open to false it's open equals false okay that should take care of that case so let's refresh vengers and shift tab okay cool focus and it still shows awesome and the other case is when I tab on the last item here I wanted to hide because it's no longer focused so let's do that so that would be within the for each we have down here and we only want it to happen on the last item so that would be on this anchor tag let me just reformat this so let's just do this you can do in blade if here and I'm going to put it on its on line and the condition is if we're on the last loop iteration so if loop lasts so I helped her interval so this only happens if it's the last iteration in the loop and we can do keydown dot tab so we hide it so it's open is false okay so that should work one more time and we can tap through this and if I press tab here that should I awesome so there is a bug here so let me show you it so if I tap here and I press the shift tab here this should go back but since it's listening for the tab event it hides it which we don't want let me show you that again so shift tab works on the other ones it goes back no problem but the problem here is it's picking up the tab event on shift tab and in view there is a key data tab that exact modifier so it only listens for the tab press exclusively and not shift tab and I think there is an issue right now with Alpine that looks to fix that so this book should be fixed eventually so I'm just gonna leave it and what would be even nicer for keyboard accessibility which I'm not gonna do here is arrow key support so you can press up and down here and scroll through the items we have here but that is actually quite a bit of work I actually did the same in view so you can take a look at that if you want to see how you would implement that so it might not work because of that exact modifier that doesn't exist yet but I'll leave a link to that video I did in view if you want to check that out so one more nice thing we can add here is transitions so if you look at the documentation there are a few ways to do transitions but the easiest is to just add some modifiers to the show function so so we can just tack these on so I just want a basic fade so if I just add X show transition opacity we can see that happens so wherever my X show is X show right here I can just a transition that opacity and that will give it a basic fade see if that works so it won't happen on the first render because that's being handled by livewire but there is a way to make livewire and Alpine communicate I'm not gonna do that here but now anything we do on the front end say if I press escape well that doesn't work let's try again so I refreshed that's the re-render if I press escape there should be a fade on this and there is okay let's see if it still works so now it's not rerender in after I start typing in again after I hide it so let me fix that so I think if I just add another key down event on here that should fix this so key down and it's for any key is open it is true so try that so there we go hide it and there's a fade there and if I type something else it shows up again also okay let's continue to add more interactive elements here using Alpine's so the next thing I want to do is a model for this play trailer button sorry now all it does is open this up in a window and it just links to the YouTube video trailer but I want this to open in a model with the YouTube video embedded so let's go ahead and do that okay so here I am in my show blade and this is the button for the play trailer right here so I'm gonna paste in some code here and let me just explain it to you so let me uncomment this so this is just the CSS for a model and I don't want to make this video about writing CSS to make a model so I'm just pasting it in so let me just reinvent this okay so this is the parent element and as you see we have this background-color:rgba so the background is dark once the model is opened so let me show you how this looks so this should be in a state where the model is opened okay cool and this is just an absolutely positioned element with a height full so height 100% and a width under percent and that is gonna be our model and all we want to do is toggle this on or off based on if you press that button so might be easier to see if I remove this fixed so right now it's going to be in the document flow because it's not fixed or absolute so you'll see it underneath here so that should be a bit easier to see and all we want to do is toggle this on or off based on if you press this so I put it back to absolute you'll see that it is a model but absolutely doesn't work I mean it works so sort of if you scroll down it doesn't work so we have to make it fixed and that should make our model okay and like I said we have the width full and height full to give it the width and height of the entire page now let me comment this out as well and this is just where the model content goes on sale or 50 or something you'll see that here cool so let's put this YouTube embed back and there's something I want to show you here so to make YouTube embeds responsive you have to do a little trick here so I have an article here you can take a look at and let's see fifty six point two five so here's what you have to do to make a youtube embed responsive you have to have a wrapping element and you have to add these styles to it and then for the iframe you have to add these styles to it so that's exactly what I did here using utilities so I have for the wrapping div overflow:hidden relative and padding top fifty six point twenty five percent so it's a bit different but it's pretty much the same thing so relative it's the same this is padding bottom but padding top works as well which I have here and I guess relative sorry height zero and overflow:hidden are interchangeable and then for the iframe I have absolute top:0 left:0 with full height full so that's all of this stuff right here and that should make the model responsive so if we go back let me just put this back save refresh and you'll see this is responsive whoo so now we just have to toggle this with Alpine and then we just have to replace the embed URL which we already have so let's do that okay so you have to add a piece of state so we want it to be around our model here which I added here and also our plate trailer button so I'm gonna wrap these two things and I live here so that should be this to wrap it in a div and that should still look okay hopefully okay but now we can add some stay here let's do X data equals is open true or say false to begin and on our model this is where we want to X show it based on that piece of state so X show equals is open okay and the button is the thing that toggles it so let's add it to this button here actually it's a link right now so let me just change this to a button so that would be this okay and we'll remove that H ref in a second because we're gonna make use of that but let's set a click handler here so I'd click equals is open equals true so now that should show once I click the one so when i refresh this should be gone okay but if I hit this button it should show awesome so now we just have to add an event to close it here so that would be the close button so that's right here somewhere x yeah right here so we can do the same thing click equals is up in equals false cool and that clothes should work now open closed okay so now we'd have to replace the embed URL with the correct one so let's do that so we'd have to replace this embed key right here with the thing coming back from the API so let me delete that and the thing coming back from the API is this right here in v8 ref so let's grab this let's get rid of the H ref and let's add that to our embed here right here okay see if this works and I have an error with the rendering there's an extra cool here let's remove that okay cool click it and there is the trailer for Joker and just to confirm that it works for other movies it's go different one year say and men they trailer and it works awesome cool so if you want to add a transition to that same deal we can just do transition I just want to fade and that should transition in sorry I put it in the wrong one should be here transition top opacity there we go cool so I want to do one more model for the images here so if I click on an image I want a model to come up with a larger image so let's quickly do that so again I am going to paste that model in right after the images so where are the images here so this is the cast and here are the images so after the for each year I'm gonna paste this in just like what we did for the model we did above okay let me uncomment this and that should show the model by default okay so let's go ahead and define a piece of state on a parent tag so I'm gonna put that right here because this houses everything that we have so there's the model and yeah that should be good within our scope so let's add a piece of state here so X data equals so we need to keep track of the state of the model if it's opened like we've been doing so is open is false and we also need to keep track of which image we're currently on and the URL for that image so we're gonna keep another piece of state called image and default of an empty string so let's go ahead and add the X show on our model here so X show equals is open and let's open it if we click on an image so that would be right here for the a tag so right here so let me just put this on its own line okay and it still click prevent because it's an anchor tag and we want to prevent the default and it's set is open to true so this should just opened the model we have and it's just hard code for now see if this works okay cool and it's closely as well let me just copy this and let's put it in our close button here so right here and we can paste that in and we don't need to prevent it cuz there's some button and set to false make sure this works owpain close okay but now we also have to keep track of which one we open and then we want to just display the image in here so when we click on it up here we want to update that image state so I'm gonna do multiple lines here and we just want to set the image here so image equals and it's gonna be a string and we can get this from right here so I'll just copy this but we want a bigger size here so let me just paste this in and to get the bigger size we just have to change this with 500 to original and that should give us a larger image okay and now we just have to go in here we don't need this iframe because this is for YouTube and we just want an image here so we can get rid of all this and we can do image now the source is gonna be dynamic it's gonna be based on the image that we are changing based on the click and just say poster here and let's see if this works so refresh click this and it doesn't work sorry about that you probably saw my typo here let's change that and let's try again there we go there is a need larger image cool and I also want to add the Escape key on this so we can do that as well so let's just add it to the button here so I'm going to placate this it will be key down not escape that window and that should work refresh open this image escape and it closes awesome one more quick thing I want to take a look at is pressing the slash button and having it focus research so you'll see this on documentation pages such as tailwind so if I scroll down here press search I mean slash it will focus this and you can type same with laravel so if I scroll down press this it will focus that and you can search easily so let's go ahead and do that so back to our code so that would be in our search drop down so we need a reference to the search drop down on Dom element and to do that we can make use of refs so you can do this in view as well but in Alpine to define a ref so we want this input because we want to focus it we do X - ref and then give it a name okay and now I want to listen for the key down event and specifically the slash button key pressed so and that's gonna be on the entire window so I can put that wherever so I'll just put it right underneath key down that window and there's no modifier for the slash button so we have to do that manually so I'm gonna do multiple lines here so I'm gonna do if event.keycode and the key code for slash forward slash is 191 so 191 then what do we want to do here we just want to grab the ref so to grab the ref in Alpine we just say ref dollar sign ref the name of it so I needed search and we can do whatever we want with it so in our case we just want to focus it and that should work and see if this works so back to our app if I scrolled let me refresh ok I'm gonna press this last year and that doesn't work sorry I have two closing braces here should only be one stride again so I'm gonna scroll down I'm gonna press slash and it does work cool not sure why I typed in here let's see if I add event dot prevent default maybe that will work okay scroll down past Search or slash and we can search awesome so there you have it guys we've added some UI interactivity to some of our components using Alpine GS as you can see it's very easy with no compilation steps and it's very similar to view without all the overhead please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one Kate thanks bye [Music]

Channel: Andre Madarang

Views: 17,242

Keywords: alpine.js, alpine js, laravel alpine, laravel alpine.js, alpine.js tutorial, laravel alpine demo, alpine.js example, alpine.js demo, andre madarang, drehimself, livewire alpine.js, alpine livewire, livewire alpine

Id: y4Ki5_Q2-gs

Length: 24min 25sec (1465 seconds)

Published: Sat Apr 04 2020