1 00:00:02,240 --> 00:00:05,360 So now that we covered a lot about slots, 2 00:00:05,390 --> 00:00:10,160 let's finish up this modal by tweaking some of its styling again 3 00:00:10,160 --> 00:00:15,890 but most importantly and first of all, by making these buttons work. Right now I can click cancel and 4 00:00:15,890 --> 00:00:17,900 okay and nothing will happen. 5 00:00:17,900 --> 00:00:25,220 Now I want to close the modal in both cases but I want to dispatch my own events to which I can listen 6 00:00:25,220 --> 00:00:27,090 from outside my component, 7 00:00:27,140 --> 00:00:33,920 so from inside my main application, my main Javascript logic which runs int my main document so that I 8 00:00:33,920 --> 00:00:40,520 know whether the user has confirmed this modal or cancelled it because right now what I want to be able 9 00:00:40,520 --> 00:00:48,680 to do in the end is that I add an event listener here to my modal object and keep in mind, my modal object 10 00:00:48,710 --> 00:00:54,950 is really just my own custom component and there, it would be nice if we had like a confirm listener 11 00:00:55,190 --> 00:00:57,620 and confirm is not a built-in event, 12 00:00:57,620 --> 00:01:07,430 so right now this will never trigger where I can do something, so most of the time in my application 13 00:01:07,430 --> 00:01:12,800 I would probably want to do something like create a payment request which I sent to some backend once 14 00:01:12,800 --> 00:01:16,430 the user confirmed or where I also can do something 15 00:01:16,640 --> 00:01:18,370 if the user declines this, 16 00:01:18,410 --> 00:01:24,050 so if the user cancels this, then maybe I want to reset some state in my application. 17 00:01:24,170 --> 00:01:27,840 Of course here I'll not focus on the application logic, 18 00:01:27,920 --> 00:01:32,990 I want to focus on the component and how we add our own events there 19 00:01:32,990 --> 00:01:37,390 but I just want to give you some ideas of what you could do there in a real application, 20 00:01:37,400 --> 00:01:42,960 so outside of your web component will focus on making these customer events work here now, 21 00:01:43,070 --> 00:01:46,610 so confirm and cancel is the go. For that 22 00:01:46,610 --> 00:01:48,560 let's dive into our modal again 23 00:01:48,560 --> 00:01:52,780 and there we have these buttons. Since these buttons are part of the shadow DOM, 24 00:01:52,880 --> 00:01:56,790 we have to create listeners to these buttons inside of our shadow DOM. 25 00:01:56,840 --> 00:02:05,180 So for that, I'll add another constants here in the constructor below my slots listeners I added 26 00:02:05,180 --> 00:02:11,750 in the last lectures and there I'll have the cancel button and for this, I'll give this button an ID 27 00:02:11,750 --> 00:02:19,500 of cancel button, maybe like this, confirm button 28 00:02:19,690 --> 00:02:24,610 and now I can select by that ID, so I'll access my shadow root, use the query selector, 29 00:02:24,700 --> 00:02:31,540 you could also use get element by ID of course and then select the cancel button ID here and then 30 00:02:31,540 --> 00:02:39,130 I'll duplicate this to also select my confirm button here with the confirm button ID. 31 00:02:39,790 --> 00:02:45,110 So now that I have access to these two buttons, I can register listeners here in my component. 32 00:02:45,400 --> 00:02:53,140 So let's maybe start with the cancel button here and on the cancel button, I want to hide the modal and 33 00:02:53,140 --> 00:03:01,950 I want to dispatch this custom cancel event to which I'm listening from outside. Therefore, I'll first 34 00:03:01,950 --> 00:03:08,610 of all add a new method here and I'll name it hide, I could turn this into a private method by adding 35 00:03:08,610 --> 00:03:12,560 a leading underscore and always keep in mind, it's not really private, 36 00:03:12,570 --> 00:03:14,520 you can still call it from outside, 37 00:03:14,610 --> 00:03:19,010 I just add this to show hey this should only be used from inside, 38 00:03:19,080 --> 00:03:22,210 if you then don't follow that rule, well you can do that 39 00:03:22,320 --> 00:03:28,410 but here I want to keep it as a public method because even though we're not doing it in our app, you 40 00:03:28,410 --> 00:03:33,900 could of course definitely imagine an application where you want to hide a modal from outside, 41 00:03:33,900 --> 00:03:40,470 so from your main application instead from inside of the component. Now how do we hide it? 42 00:03:40,540 --> 00:03:46,800 Well in the end it's all about setting our open attributes to none or to remove it 43 00:03:46,890 --> 00:03:52,230 and we do that not with set attribute but with remove attribute and there, 44 00:03:52,230 --> 00:04:02,650 I want to remove my opened attribute. We can add an extra check here to see if this has the attribute 45 00:04:03,040 --> 00:04:06,640 opened before we then try to remove it of course. 46 00:04:09,390 --> 00:04:17,010 Besides that, I want to set this is open to false of course to update this property as well 47 00:04:17,010 --> 00:04:23,220 and with that, the modal will already be closed because of that opened attribute which we use in our 48 00:04:23,230 --> 00:04:25,590 CSS styles here. 49 00:04:25,680 --> 00:04:28,800 So therefore we have that functionality, the custom event is missing 50 00:04:28,800 --> 00:04:30,480 but I'll come back to that later. 51 00:04:30,480 --> 00:04:35,940 So for now let's continue with the event listener on the cancel button in the constructor, there we want 52 00:04:35,940 --> 00:04:42,870 to listen to an ordinary click which of course is a built-in event, built into core Javascript and the 53 00:04:42,870 --> 00:04:48,380 browser and upon a click, I want to trigger this hide, 54 00:04:48,390 --> 00:04:50,230 so this hide method 55 00:04:50,460 --> 00:04:57,210 and of course I'll bind the this keyword here to ensure that this inside of hide refers to the class 56 00:04:57,450 --> 00:05:05,580 and not to the button which is the event trigger. Now I'll duplicate this to also hook up my confirm 57 00:05:05,670 --> 00:05:07,310 button and there, 58 00:05:07,320 --> 00:05:08,960 I also want to hide this modal. 59 00:05:08,970 --> 00:05:10,440 Now we already see a problem here, 60 00:05:10,650 --> 00:05:13,920 I definitely don't want to run the same logic two times. 61 00:05:13,920 --> 00:05:22,350 So what I will do instead is, I'll add a private method here which I'll name cancel and I'll add one 62 00:05:22,350 --> 00:05:25,670 which I'll name confirm. 63 00:05:25,920 --> 00:05:35,060 Now in both, I will call this open and here we don't need to bind this because if we're calling it like this 64 00:05:35,060 --> 00:05:36,510 from inside the class, 65 00:05:36,710 --> 00:05:41,450 the class itself is calling a method and therefore this in the called method will refer to the class 66 00:05:41,450 --> 00:05:42,410 too, 67 00:05:42,530 --> 00:05:45,560 so I'll also call hide here, 68 00:05:45,680 --> 00:05:46,130 sorry 69 00:05:46,130 --> 00:05:47,190 here it should also be 70 00:05:47,250 --> 00:05:51,170 hide of course, not open. So it should be hide in both 71 00:05:51,170 --> 00:05:58,400 but now we can dispatch different custom events here. So let's tweak that and go up and for the cancel 72 00:05:58,400 --> 00:05:59,320 button, 73 00:05:59,420 --> 00:06:07,100 I will now actually call my private cancel method and for confirm, my private confirm method 74 00:06:07,100 --> 00:06:11,680 and right now, they will both just call hide but that will change soon. 75 00:06:12,620 --> 00:06:19,060 So now with that, we should already have a working modal, such that when I click cancel, it gets hidden 76 00:06:19,580 --> 00:06:24,070 and if I open it again, I can also hide it and close it with 77 00:06:24,100 --> 00:06:25,060 okay 78 00:06:25,120 --> 00:06:32,360 and you can see I can reopen it even though I have an extra check here in my main app, in my index.html file 79 00:06:32,380 --> 00:06:38,470 where I check for whether it is not open yet with the is open property and I can still reopen it after 80 00:06:38,470 --> 00:06:44,620 closing it because I do update this is open property in my modal as well. 81 00:06:46,070 --> 00:06:51,980 So this is the first important step but the more important and more interesting step of course now is 82 00:06:51,980 --> 00:06:54,230 to emit our own custom event, 83 00:06:54,230 --> 00:06:55,610 let's do that next.