WEBVTT 1 00:00:01.340 --> 00:00:02.600 And this lecture, 2 00:00:02.600 --> 00:00:04.118 we're gonna implement a feature 3 00:00:04.118 --> 00:00:06.305 that will basically move the map 4 00:00:06.305 --> 00:00:08.754 to the position of the workout 5 00:00:08.754 --> 00:00:11.223 that was clicked in the sidebar. 6 00:00:12.554 --> 00:00:16.940 So the feature that I'm in is this one. 7 00:00:16.940 --> 00:00:20.660 So when I click one of these, then as I said, 8 00:00:20.660 --> 00:00:24.340 the map will move to the position of that workout. 9 00:00:24.340 --> 00:00:27.924 And so this is a very nice touch to the user interface 10 00:00:27.924 --> 00:00:30.163 and so let's now do that. 11 00:00:31.470 --> 00:00:33.200 And let's say that we're starting 12 00:00:33.200 --> 00:00:35.970 with a blank page like this. 13 00:00:35.970 --> 00:00:38.540 So the initial stage of our application 14 00:00:38.540 --> 00:00:40.780 and so of course, right now, 15 00:00:40.780 --> 00:00:44.450 there are no workouts on which we could click 16 00:00:44.450 --> 00:00:45.600 and so in this case, 17 00:00:45.600 --> 00:00:48.553 where should we actually attach the event handler? 18 00:00:49.557 --> 00:00:51.530 So this is the situation 19 00:00:51.530 --> 00:00:54.036 that I actually had mentioned already earlier. 20 00:00:54.036 --> 00:00:55.470 So again, 21 00:00:55.470 --> 00:00:58.600 the situation in which we don't have the element 22 00:00:58.600 --> 00:01:02.080 on which we actually want to attach the event listener 23 00:01:02.080 --> 00:01:04.820 because it hasn't been created yet 24 00:01:04.820 --> 00:01:07.580 and so what we have to do here is one more time, 25 00:01:07.580 --> 00:01:10.220 basically, event delegation. 26 00:01:10.220 --> 00:01:13.760 So what we're gonna do is to add the event handler 27 00:01:13.760 --> 00:01:15.900 to the parent element. 28 00:01:15.900 --> 00:01:17.750 And so in our HTML, 29 00:01:17.750 --> 00:01:21.167 we can see that that is this workout's 30 00:01:21.167 --> 00:01:23.230 and element here. 31 00:01:23.230 --> 00:01:26.430 So basically the element with the class of workouts 32 00:01:27.570 --> 00:01:31.373 and so let's see here in the code, which one that is. 33 00:01:32.840 --> 00:01:36.270 Alright, so it's called container workouts. 34 00:01:36.270 --> 00:01:41.270 So let's add an event listener to that element there. 35 00:01:41.600 --> 00:01:44.912 And remember one more time we do that in the constructor 36 00:01:44.912 --> 00:01:48.763 so that event listener is added right in the beginning. 37 00:01:50.770 --> 00:01:55.770 So containerworkout.addEventListener on click, 38 00:01:59.374 --> 00:02:03.482 and then we're gonna create a method called 39 00:02:03.482 --> 00:02:05.732 moveToPopup just like this. 40 00:02:11.270 --> 00:02:12.103 So that's a copy it, 41 00:02:12.103 --> 00:02:14.753 and then add it here at the end. 42 00:02:17.780 --> 00:02:19.810 Now this methods that we have here, 43 00:02:19.810 --> 00:02:23.220 they are not really ordered in any particular way. 44 00:02:23.220 --> 00:02:26.243 So I'm just adding them as I go here. 45 00:02:27.330 --> 00:02:28.400 Now, anyway, 46 00:02:28.400 --> 00:02:30.730 here we are going to need the event 47 00:02:30.730 --> 00:02:33.620 because now we will have to match the object 48 00:02:33.620 --> 00:02:37.270 or actually the element that we're actually looking for. 49 00:02:37.270 --> 00:02:41.510 So what I will do here is to create the workout element 50 00:02:41.510 --> 00:02:43.888 and basically all that I'm gonna do 51 00:02:43.888 --> 00:02:46.420 is to look at e.target 52 00:02:47.580 --> 00:02:50.460 So that's the element that is actually clicked 53 00:02:50.460 --> 00:02:53.863 and then I will look for the closest workout parent, 54 00:02:55.290 --> 00:02:58.110 so closest, which is again, 55 00:02:58.110 --> 00:03:00.883 essentially the opposite of a query selector. 56 00:03:02.350 --> 00:03:04.610 And so, the element that I'm looking for 57 00:03:04.610 --> 00:03:07.420 is the one with the class workout. 58 00:03:07.420 --> 00:03:08.810 So like this, 59 00:03:08.810 --> 00:03:10.940 wherever the click happens 60 00:03:10.940 --> 00:03:12.340 here in the element. 61 00:03:12.340 --> 00:03:16.080 So no matter if it's in one of these divs or the spans, 62 00:03:16.080 --> 00:03:17.230 it doesn't matter. 63 00:03:17.230 --> 00:03:19.540 All of it will then basically end up 64 00:03:19.540 --> 00:03:23.500 in this Li element with the workout class, 65 00:03:23.500 --> 00:03:25.940 because from the element that is clicked, 66 00:03:25.940 --> 00:03:29.500 we will move up to this exact element here 67 00:03:29.500 --> 00:03:31.653 using the closest method. 68 00:03:33.623 --> 00:03:35.730 All right, so once again closest 69 00:03:35.730 --> 00:03:37.514 is a real life saver here. 70 00:03:37.514 --> 00:03:39.763 It is really, really helpful. 71 00:03:40.970 --> 00:03:43.010 And so now let's start by logging 72 00:03:43.010 --> 00:03:44.923 this element to the console. 73 00:03:47.720 --> 00:03:48.563 Now right, 74 00:03:50.340 --> 00:03:51.880 so let's wait for it 75 00:03:54.600 --> 00:03:57.043 as always any values here work. 76 00:03:59.020 --> 00:04:02.090 So of course we first need to have something here 77 00:04:02.090 --> 00:04:05.200 and now as I click it, let's see what happens, 78 00:04:05.200 --> 00:04:08.420 and indeed we get the entire element here 79 00:04:09.330 --> 00:04:12.320 and that works no matter if I click out here 80 00:04:12.320 --> 00:04:15.180 or here or on this emoji 81 00:04:15.180 --> 00:04:16.920 or really anywhere. 82 00:04:16.920 --> 00:04:19.550 So the closest method takes care of really 83 00:04:19.550 --> 00:04:22.560 then selecting this entire element. 84 00:04:22.560 --> 00:04:25.544 Now, why is that actually so important? 85 00:04:25.544 --> 00:04:28.360 Well it's because it is right there 86 00:04:28.360 --> 00:04:30.770 where I have this ID 87 00:04:30.770 --> 00:04:32.320 and it is this ID 88 00:04:32.320 --> 00:04:35.620 that I will now use to actually find the workout 89 00:04:35.620 --> 00:04:37.540 in the workouts array 90 00:04:37.540 --> 00:04:40.500 and so once again, we put this here, 91 00:04:40.500 --> 00:04:43.760 because with this, we can then basically build a bridge 92 00:04:43.760 --> 00:04:45.690 between the user interface 93 00:04:45.690 --> 00:04:49.400 and the data that we have actually in our application. 94 00:04:49.400 --> 00:04:52.960 So in this case our data in the workout's array, 95 00:04:52.960 --> 00:04:55.640 because if we didn't have this ID here 96 00:04:55.640 --> 00:04:57.870 stored in the user interface, 97 00:04:57.870 --> 00:05:01.250 then how would we know which is the objects in the workouts 98 00:05:01.250 --> 00:05:03.830 array that we need to scroll to? 99 00:05:03.830 --> 00:05:05.525 And so we need this ID here 100 00:05:05.525 --> 00:05:07.580 so that we can now read it 101 00:05:07.580 --> 00:05:09.960 and basically then select the element 102 00:05:09.960 --> 00:05:12.853 out of the workouts array using this ID. 103 00:05:13.700 --> 00:05:16.550 Now let's just happen when we click outside here 104 00:05:16.550 --> 00:05:17.833 in the same container. 105 00:05:19.160 --> 00:05:23.260 So you see that this here is still a container outside 106 00:05:23.260 --> 00:05:24.370 and so when we click this, 107 00:05:24.370 --> 00:05:26.570 now we of course get null 108 00:05:26.570 --> 00:05:31.200 because there is no closest parent with a workout class. 109 00:05:31.200 --> 00:05:35.110 All right, and so we will actually have to 110 00:05:35.110 --> 00:05:36.773 basically ignore that. 111 00:05:38.217 --> 00:05:40.870 And so this is the next step. 112 00:05:40.870 --> 00:05:45.870 So if basically there is no a workout element 113 00:05:45.930 --> 00:05:47.773 then simply return. 114 00:05:49.290 --> 00:05:52.373 And so again, this is a guard clause here 115 00:05:52.373 --> 00:05:55.200 so of course we could have done also 116 00:05:55.200 --> 00:05:57.397 if there is a workout element 117 00:05:57.397 --> 00:06:02.146 and then the if block, but this is a bit nicer. 118 00:06:02.146 --> 00:06:05.361 And so now it's time to actually get the workout data 119 00:06:05.361 --> 00:06:07.483 out of the workouts array. 120 00:06:08.570 --> 00:06:12.290 So workout=this.workouts 121 00:06:14.040 --> 00:06:16.740 and actually that's like this 122 00:06:16.740 --> 00:06:20.133 and now how do you think we will find this workout? 123 00:06:20.970 --> 00:06:24.540 Well, that's right , just like in the blank list application 124 00:06:24.540 --> 00:06:28.790 that we built before we are going to use the find method 125 00:06:28.790 --> 00:06:33.620 to, well, essentially find an element of the array. 126 00:06:33.620 --> 00:06:36.200 So that's create our callback function here 127 00:06:36.200 --> 00:06:38.838 and so each element in the workouts array, 128 00:06:38.838 --> 00:06:41.400 I will simply call work. 129 00:06:41.400 --> 00:06:46.400 And then I want the one which has work.id equal to that ID 130 00:06:48.333 --> 00:06:51.480 that I just showed you before in the dum. 131 00:06:51.480 --> 00:06:56.050 and so debts workoutEL.dataset.id 132 00:06:58.380 --> 00:07:01.670 so this is again, nothing new at this point 133 00:07:01.670 --> 00:07:04.104 we used this technique a couple of times before, 134 00:07:04.104 --> 00:07:07.723 but this is yet another really great use case of it. 135 00:07:12.000 --> 00:07:13.813 And so let's take a look now, 136 00:07:15.020 --> 00:07:18.263 if we are able to actually get the correct one, 137 00:07:20.424 --> 00:07:24.280 so any random data here works just fine, 138 00:07:24.280 --> 00:07:25.470 then I'm gonna click it 139 00:07:26.540 --> 00:07:28.890 and now we get this same error 140 00:07:28.890 --> 00:07:30.840 that we already had before 141 00:07:30.840 --> 00:07:33.510 and we actually could have predicted this already, 142 00:07:33.510 --> 00:07:34.970 couldn't we? 143 00:07:34.970 --> 00:07:37.920 Because remember that this method here 144 00:07:37.920 --> 00:07:41.310 is called by, "addEventListener() method," 145 00:07:41.310 --> 00:07:44.010 and so therefore the, "this" keyword in here 146 00:07:44.010 --> 00:07:46.928 is not what we want it to be. 147 00:07:46.928 --> 00:07:48.713 So let's move up there. 148 00:07:50.650 --> 00:07:54.580 So to the place where we had the event listener, 149 00:07:54.580 --> 00:07:56.250 so right here. 150 00:07:56.250 --> 00:07:59.900 And so just like before we need to bind the, "this" keyword 151 00:07:59.900 --> 00:08:01.483 to actually make it correct. 152 00:08:03.020 --> 00:08:05.740 Right, so I already explained before 153 00:08:05.740 --> 00:08:07.433 why that is necessary. 154 00:08:09.400 --> 00:08:13.540 So let's just try again now I'm clicking it 155 00:08:15.330 --> 00:08:18.793 and yeah, here it is actually. 156 00:08:20.930 --> 00:08:23.810 So you see that this one has exactly the same ID. 157 00:08:23.810 --> 00:08:26.030 Let's just add another one here 158 00:08:30.950 --> 00:08:34.580 and now we get this one here, but again, 159 00:08:34.580 --> 00:08:36.610 as I click this one, of course, 160 00:08:36.610 --> 00:08:40.773 we still find the correct workout from the array. 161 00:08:42.710 --> 00:08:46.420 And so now we can basically take the coordinates 162 00:08:46.420 --> 00:08:47.950 from this element 163 00:08:47.950 --> 00:08:52.040 and then move to map to that position. 164 00:08:52.040 --> 00:08:54.890 So in leaflet, there is actually a method 165 00:08:54.890 --> 00:08:56.830 to do exactly that 166 00:08:56.830 --> 00:09:00.143 and the method is available on all map objects. 167 00:09:01.110 --> 00:09:02.770 So we can take our map object 168 00:09:02.770 --> 00:09:05.870 that we already have, which is this one. 169 00:09:05.870 --> 00:09:10.040 And then we can call the, "setView method," 170 00:09:10.040 --> 00:09:13.390 and I really encourage you to go check out the documentation 171 00:09:13.390 --> 00:09:16.560 of this one, but I'm not gonna do that right now. 172 00:09:16.560 --> 00:09:21.090 So anyway, the setView method needs as a first argument, 173 00:09:21.090 --> 00:09:22.080 the coordinates 174 00:09:22.960 --> 00:09:26.553 and so that's at the workout.coords 175 00:09:29.300 --> 00:09:32.010 then the second one is the zoom level 176 00:09:32.010 --> 00:09:33.130 and to zoom level, 177 00:09:33.130 --> 00:09:36.845 we actually have already used before somewhere. 178 00:09:36.845 --> 00:09:39.623 So I think where we first loaded the map, 179 00:09:40.590 --> 00:09:42.370 so right here. 180 00:09:42.370 --> 00:09:44.330 And so it would be a bad practice 181 00:09:44.330 --> 00:09:46.930 to simply repeat the same number here 182 00:09:46.930 --> 00:09:50.223 and so instead I will create another field here. 183 00:09:51.300 --> 00:09:54.860 So basically another object property here. 184 00:09:54.860 --> 00:09:58.963 So that's gonna be called mapzoomlevel, let's say, 185 00:10:01.840 --> 00:10:04.153 and I will set it to 13. 186 00:10:05.750 --> 00:10:07.193 So let's a copy of this one. 187 00:10:09.380 --> 00:10:11.837 So here we need, "this." and now, 188 00:10:16.120 --> 00:10:18.523 then here the same thing down here. 189 00:10:21.540 --> 00:10:22.673 So this.mapzoomlevel, 190 00:10:24.830 --> 00:10:29.363 and finally we can pass in an object of options as always, 191 00:10:30.310 --> 00:10:33.373 then here we can set animate to true. 192 00:10:34.600 --> 00:10:37.540 And then we can also set the duration basically 193 00:10:37.540 --> 00:10:39.870 of this animation by saying, 194 00:10:39.870 --> 00:10:44.730 pen should be equal to yet another object 195 00:10:44.730 --> 00:10:47.780 which should have the duration of 1. 196 00:10:47.780 --> 00:10:50.910 So this is all a little bit confusing, 197 00:10:50.910 --> 00:10:52.290 but again, if you want, 198 00:10:52.290 --> 00:10:54.950 you can read the documentation of leaflet 199 00:10:54.950 --> 00:10:58.083 and then find out why exactly it works this way. 200 00:10:59.160 --> 00:11:01.700 So let me give it a save here now, 201 00:11:01.700 --> 00:11:03.450 and then let's go back here 202 00:11:05.420 --> 00:11:08.533 so we can get almost rid of the console here. 203 00:11:12.200 --> 00:11:14.523 Okay, and add another one here, 204 00:11:15.670 --> 00:11:17.270 just to make this a bit more fun 205 00:11:18.150 --> 00:11:20.380 and so now let me actually click here 206 00:11:21.530 --> 00:11:24.613 and yeah, beautiful, it works. 207 00:11:25.936 --> 00:11:28.060 And a click on this one and of course 208 00:11:28.060 --> 00:11:30.880 it then moves to that one, 209 00:11:30.880 --> 00:11:33.620 and of course, if I edit even more than 210 00:11:33.620 --> 00:11:35.683 that would just work all the same. 211 00:11:36.520 --> 00:11:39.940 Okay, and now just to finish this, 212 00:11:39.940 --> 00:11:43.370 I want to just add a very small touch here. 213 00:11:43.370 --> 00:11:46.440 And that will be to simply count the clicks 214 00:11:46.440 --> 00:11:49.450 that happen on each of the workouts. 215 00:11:49.450 --> 00:11:52.200 Now I will not display that number anywhere 216 00:11:52.200 --> 00:11:53.770 or something like that. 217 00:11:53.770 --> 00:11:57.405 This, just to show you something basically. 218 00:11:57.405 --> 00:12:02.405 So essentially it is to make the public interface 219 00:12:02.420 --> 00:12:05.680 of these classes here a little bit more complete, 220 00:12:05.680 --> 00:12:09.020 because right now we are actually not calling any of the 221 00:12:09.020 --> 00:12:14.020 methods outside of the classes themselves, right? 222 00:12:14.120 --> 00:12:17.130 So we are not really using any public interface 223 00:12:17.130 --> 00:12:19.270 here on any of these objects 224 00:12:19.270 --> 00:12:22.030 and so I want to just change that 225 00:12:22.030 --> 00:12:24.840 just so you can see how that would work. 226 00:12:24.840 --> 00:12:28.240 So basically here on all the workouts, 227 00:12:28.240 --> 00:12:31.240 let's add a property called clicks 228 00:12:32.229 --> 00:12:35.710 and we will start with zero clicks. 229 00:12:35.710 --> 00:12:38.920 And then we will also have a methods 230 00:12:38.920 --> 00:12:40.800 which will be called click 231 00:12:43.700 --> 00:12:48.233 and all it will do is to increase the number of clicks. 232 00:12:49.420 --> 00:12:52.000 All right, so very simple 233 00:12:52.000 --> 00:12:55.100 but now every object gets this method 234 00:12:55.100 --> 00:12:57.620 and so in each of the workouts, 235 00:12:57.620 --> 00:13:00.420 we can now increase that number of clicks 236 00:13:01.300 --> 00:13:03.230 and so that's very simple. 237 00:13:03.230 --> 00:13:06.330 All we have to do now is to well, 238 00:13:06.330 --> 00:13:08.760 is to take the object that we already have, 239 00:13:08.760 --> 00:13:10.420 which is the workout, 240 00:13:10.420 --> 00:13:12.513 and then using that public interface. 241 00:13:17.699 --> 00:13:20.116 So that's just workout.click. 242 00:13:23.380 --> 00:13:24.680 And that's actually it 243 00:13:24.680 --> 00:13:27.790 and let's just test this. 244 00:13:27.790 --> 00:13:30.320 And also actually, this will be helpful 245 00:13:30.320 --> 00:13:33.203 to show you something else in the next video. 246 00:13:34.940 --> 00:13:35.773 All right, 247 00:13:36.630 --> 00:13:39.011 and so, as I keep clicking here, 248 00:13:39.011 --> 00:13:43.100 the number of clicks should actually increase 249 00:13:43.100 --> 00:13:46.583 but for some reason that we get this error here. 250 00:13:47.740 --> 00:13:50.007 So let's see what happening in line 289. 251 00:13:51.980 --> 00:13:53.582 So that's right here 252 00:13:53.582 --> 00:13:58.250 telling us that the workout.click does not exist. 253 00:13:58.250 --> 00:13:59.603 So why is that? 254 00:14:01.390 --> 00:14:04.363 Well, let's take a look at the object here, actually. 255 00:14:06.880 --> 00:14:09.573 And so, in particular at the prototype, 256 00:14:10.600 --> 00:14:14.000 and so here of course click does not exist, 257 00:14:14.000 --> 00:14:16.790 but here it actually is. 258 00:14:16.790 --> 00:14:18.970 So indeed here it's a click method 259 00:14:18.970 --> 00:14:22.820 and so the workout should have access to this method. 260 00:14:22.820 --> 00:14:25.840 So that is exactly what we learned in the previous section 261 00:14:25.840 --> 00:14:27.525 about the prototype chain 262 00:14:27.525 --> 00:14:31.860 and about how all of this actually works behind the scenes. 263 00:14:31.860 --> 00:14:34.690 So hopefully you will remember that. 264 00:14:34.690 --> 00:14:38.463 But now I'm actually not sure why this isn't working. 265 00:14:39.900 --> 00:14:41.360 Let's go back here 266 00:14:41.360 --> 00:14:42.500 and bring back 267 00:14:42.500 --> 00:14:46.430 or fake workouts here basically. 268 00:14:46.430 --> 00:14:47.870 So these ones, 269 00:14:47.870 --> 00:14:50.773 so we can play around with them in the console. 270 00:14:52.110 --> 00:14:55.440 So you see that both of them have the clicks set to zero 271 00:14:56.450 --> 00:15:01.450 and so let's use run1.click like this 272 00:15:02.670 --> 00:15:06.920 and then as we look at run 1 again, 273 00:15:06.920 --> 00:15:09.543 then the clicks is still at zero. 274 00:15:10.490 --> 00:15:14.283 So something is clearly also wrong there. 275 00:15:15.900 --> 00:15:18.693 Okay, so here, this needs to be clicks, 276 00:15:19.770 --> 00:15:22.833 but I'm not sure if that was the actual error. 277 00:15:27.650 --> 00:15:32.070 Okay, so now the clicks increased to two here. 278 00:15:32.070 --> 00:15:33.120 So that's now check 279 00:15:35.190 --> 00:15:36.240 adding something here 280 00:15:37.680 --> 00:15:38.823 and then clicking it. 281 00:15:40.800 --> 00:15:43.380 Okay, and you see that it moved there. 282 00:15:43.380 --> 00:15:45.280 Let's click again. 283 00:15:45.280 --> 00:15:47.580 Oh, and now it's actually working. 284 00:15:47.580 --> 00:15:50.963 So now the clicks indeed increased to one. 285 00:15:52.130 --> 00:15:55.390 So great, that works just fine 286 00:15:55.390 --> 00:15:57.824 and again, this was just a way of showing you 287 00:15:57.824 --> 00:16:00.500 that we can of course then interact 288 00:16:00.500 --> 00:16:04.793 with each of the objects using their public interface. 289 00:16:06.270 --> 00:16:10.663 And in this case, we use that using the click method here. 290 00:16:12.250 --> 00:16:15.570 So that's it for this lecture in the next video, 291 00:16:15.570 --> 00:16:17.680 we will then fix the fact that 292 00:16:17.680 --> 00:16:21.430 when we reload the page, everything is gone. 293 00:16:21.430 --> 00:16:24.550 And so actually we want data to persist 294 00:16:24.550 --> 00:16:27.680 and so that is the missing piece in our application 295 00:16:27.680 --> 00:16:30.013 and we will fix it in the next lecture.