Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,340 --> 00:00:02,600 And this lecture, 2 2 00:00:02,600 --> 00:00:04,118 we're gonna implement a feature 3 3 00:00:04,118 --> 00:00:06,305 that will basically move the map 4 4 00:00:06,305 --> 00:00:08,754 to the position of the workout 5 5 00:00:08,754 --> 00:00:11,223 that was clicked in the sidebar. 6 6 00:00:12,554 --> 00:00:16,940 So the feature that I'm in is this one. 7 7 00:00:16,940 --> 00:00:20,660 So when I click one of these, then as I said, 8 8 00:00:20,660 --> 00:00:24,340 the map will move to the position of that workout. 9 9 00:00:24,340 --> 00:00:27,924 And so this is a very nice touch to the user interface 10 10 00:00:27,924 --> 00:00:30,163 and so let's now do that. 11 11 00:00:31,470 --> 00:00:33,200 And let's say that we're starting 12 12 00:00:33,200 --> 00:00:35,970 with a blank page like this. 13 13 00:00:35,970 --> 00:00:38,540 So the initial stage of our application 14 14 00:00:38,540 --> 00:00:40,780 and so of course, right now, 15 15 00:00:40,780 --> 00:00:44,450 there are no workouts on which we could click 16 16 00:00:44,450 --> 00:00:45,600 and so in this case, 17 17 00:00:45,600 --> 00:00:48,553 where should we actually attach the event handler? 18 18 00:00:49,557 --> 00:00:51,530 So this is the situation 19 19 00:00:51,530 --> 00:00:54,036 that I actually had mentioned already earlier. 20 20 00:00:54,036 --> 00:00:55,470 So again, 21 21 00:00:55,470 --> 00:00:58,600 the situation in which we don't have the element 22 22 00:00:58,600 --> 00:01:02,080 on which we actually want to attach the event listener 23 23 00:01:02,080 --> 00:01:04,820 because it hasn't been created yet 24 24 00:01:04,820 --> 00:01:07,580 and so what we have to do here is one more time, 25 25 00:01:07,580 --> 00:01:10,220 basically, event delegation. 26 26 00:01:10,220 --> 00:01:13,760 So what we're gonna do is to add the event handler 27 27 00:01:13,760 --> 00:01:15,900 to the parent element. 28 28 00:01:15,900 --> 00:01:17,750 And so in our HTML, 29 29 00:01:17,750 --> 00:01:21,167 we can see that that is this workout's 30 30 00:01:21,167 --> 00:01:23,230 and element here. 31 31 00:01:23,230 --> 00:01:26,430 So basically the element with the class of workouts 32 32 00:01:27,570 --> 00:01:31,373 and so let's see here in the code, which one that is. 33 33 00:01:32,840 --> 00:01:36,270 Alright, so it's called container workouts. 34 34 00:01:36,270 --> 00:01:41,270 So let's add an event listener to that element there. 35 35 00:01:41,600 --> 00:01:44,912 And remember one more time we do that in the constructor 36 36 00:01:44,912 --> 00:01:48,763 so that event listener is added right in the beginning. 37 37 00:01:50,770 --> 00:01:55,770 So containerworkout.addEventListener on click, 38 38 00:01:59,374 --> 00:02:03,482 and then we're gonna create a method called 39 39 00:02:03,482 --> 00:02:05,732 moveToPopup just like this. 40 40 00:02:11,270 --> 00:02:12,103 So that's a copy it, 41 41 00:02:12,103 --> 00:02:14,753 and then add it here at the end. 42 42 00:02:17,780 --> 00:02:19,810 Now this methods that we have here, 43 43 00:02:19,810 --> 00:02:23,220 they are not really ordered in any particular way. 44 44 00:02:23,220 --> 00:02:26,243 So I'm just adding them as I go here. 45 45 00:02:27,330 --> 00:02:28,400 Now, anyway, 46 46 00:02:28,400 --> 00:02:30,730 here we are going to need the event 47 47 00:02:30,730 --> 00:02:33,620 because now we will have to match the object 48 48 00:02:33,620 --> 00:02:37,270 or actually the element that we're actually looking for. 49 49 00:02:37,270 --> 00:02:41,510 So what I will do here is to create the workout element 50 50 00:02:41,510 --> 00:02:43,888 and basically all that I'm gonna do 51 51 00:02:43,888 --> 00:02:46,420 is to look at e.target 52 52 00:02:47,580 --> 00:02:50,460 So that's the element that is actually clicked 53 53 00:02:50,460 --> 00:02:53,863 and then I will look for the closest workout parent, 54 54 00:02:55,290 --> 00:02:58,110 so closest, which is again, 55 55 00:02:58,110 --> 00:03:00,883 essentially the opposite of a query selector. 56 56 00:03:02,350 --> 00:03:04,610 And so, the element that I'm looking for 57 57 00:03:04,610 --> 00:03:07,420 is the one with the class workout. 58 58 00:03:07,420 --> 00:03:08,810 So like this, 59 59 00:03:08,810 --> 00:03:10,940 wherever the click happens 60 60 00:03:10,940 --> 00:03:12,340 here in the element. 61 61 00:03:12,340 --> 00:03:16,080 So no matter if it's in one of these divs or the spans, 62 62 00:03:16,080 --> 00:03:17,230 it doesn't matter. 63 63 00:03:17,230 --> 00:03:19,540 All of it will then basically end up 64 64 00:03:19,540 --> 00:03:23,500 in this Li element with the workout class, 65 65 00:03:23,500 --> 00:03:25,940 because from the element that is clicked, 66 66 00:03:25,940 --> 00:03:29,500 we will move up to this exact element here 67 67 00:03:29,500 --> 00:03:31,653 using the closest method. 68 68 00:03:33,623 --> 00:03:35,730 All right, so once again closest 69 69 00:03:35,730 --> 00:03:37,514 is a real life saver here. 70 70 00:03:37,514 --> 00:03:39,763 It is really, really helpful. 71 71 00:03:40,970 --> 00:03:43,010 And so now let's start by logging 72 72 00:03:43,010 --> 00:03:44,923 this element to the console. 73 73 00:03:47,720 --> 00:03:48,563 Now right, 74 74 00:03:50,340 --> 00:03:51,880 so let's wait for it 75 75 00:03:54,600 --> 00:03:57,043 as always any values here work. 76 76 00:03:59,020 --> 00:04:02,090 So of course we first need to have something here 77 77 00:04:02,090 --> 00:04:05,200 and now as I click it, let's see what happens, 78 78 00:04:05,200 --> 00:04:08,420 and indeed we get the entire element here 79 79 00:04:09,330 --> 00:04:12,320 and that works no matter if I click out here 80 80 00:04:12,320 --> 00:04:15,180 or here or on this emoji 81 81 00:04:15,180 --> 00:04:16,920 or really anywhere. 82 82 00:04:16,920 --> 00:04:19,550 So the closest method takes care of really 83 83 00:04:19,550 --> 00:04:22,560 then selecting this entire element. 84 84 00:04:22,560 --> 00:04:25,544 Now, why is that actually so important? 85 85 00:04:25,544 --> 00:04:28,360 Well it's because it is right there 86 86 00:04:28,360 --> 00:04:30,770 where I have this ID 87 87 00:04:30,770 --> 00:04:32,320 and it is this ID 88 88 00:04:32,320 --> 00:04:35,620 that I will now use to actually find the workout 89 89 00:04:35,620 --> 00:04:37,540 in the workouts array 90 90 00:04:37,540 --> 00:04:40,500 and so once again, we put this here, 91 91 00:04:40,500 --> 00:04:43,760 because with this, we can then basically build a bridge 92 92 00:04:43,760 --> 00:04:45,690 between the user interface 93 93 00:04:45,690 --> 00:04:49,400 and the data that we have actually in our application. 94 94 00:04:49,400 --> 00:04:52,960 So in this case our data in the workout's array, 95 95 00:04:52,960 --> 00:04:55,640 because if we didn't have this ID here 96 96 00:04:55,640 --> 00:04:57,870 stored in the user interface, 97 97 00:04:57,870 --> 00:05:01,250 then how would we know which is the objects in the workouts 98 98 00:05:01,250 --> 00:05:03,830 array that we need to scroll to? 99 99 00:05:03,830 --> 00:05:05,525 And so we need this ID here 100 100 00:05:05,525 --> 00:05:07,580 so that we can now read it 101 101 00:05:07,580 --> 00:05:09,960 and basically then select the element 102 102 00:05:09,960 --> 00:05:12,853 out of the workouts array using this ID. 103 103 00:05:13,700 --> 00:05:16,550 Now let's just happen when we click outside here 104 104 00:05:16,550 --> 00:05:17,833 in the same container. 105 105 00:05:19,160 --> 00:05:23,260 So you see that this here is still a container outside 106 106 00:05:23,260 --> 00:05:24,370 and so when we click this, 107 107 00:05:24,370 --> 00:05:26,570 now we of course get null 108 108 00:05:26,570 --> 00:05:31,200 because there is no closest parent with a workout class. 109 109 00:05:31,200 --> 00:05:35,110 All right, and so we will actually have to 110 110 00:05:35,110 --> 00:05:36,773 basically ignore that. 111 111 00:05:38,217 --> 00:05:40,870 And so this is the next step. 112 112 00:05:40,870 --> 00:05:45,870 So if basically there is no a workout element 113 113 00:05:45,930 --> 00:05:47,773 then simply return. 114 114 00:05:49,290 --> 00:05:52,373 And so again, this is a guard clause here 115 115 00:05:52,373 --> 00:05:55,200 so of course we could have done also 116 116 00:05:55,200 --> 00:05:57,397 if there is a workout element 117 117 00:05:57,397 --> 00:06:02,146 and then the if block, but this is a bit nicer. 118 118 00:06:02,146 --> 00:06:05,361 And so now it's time to actually get the workout data 119 119 00:06:05,361 --> 00:06:07,483 out of the workouts array. 120 120 00:06:08,570 --> 00:06:12,290 So workout=this.workouts 121 121 00:06:14,040 --> 00:06:16,740 and actually that's like this 122 122 00:06:16,740 --> 00:06:20,133 and now how do you think we will find this workout? 123 123 00:06:20,970 --> 00:06:24,540 Well, that's right , just like in the blank list application 124 124 00:06:24,540 --> 00:06:28,790 that we built before we are going to use the find method 125 125 00:06:28,790 --> 00:06:33,620 to, well, essentially find an element of the array. 126 126 00:06:33,620 --> 00:06:36,200 So that's create our callback function here 127 127 00:06:36,200 --> 00:06:38,838 and so each element in the workouts array, 128 128 00:06:38,838 --> 00:06:41,400 I will simply call work. 129 129 00:06:41,400 --> 00:06:46,400 And then I want the one which has work.id equal to that ID 130 130 00:06:48,333 --> 00:06:51,480 that I just showed you before in the dum. 131 131 00:06:51,480 --> 00:06:56,050 and so debts workoutEL.dataset.id 132 132 00:06:58,380 --> 00:07:01,670 so this is again, nothing new at this point 133 133 00:07:01,670 --> 00:07:04,104 we used this technique a couple of times before, 134 134 00:07:04,104 --> 00:07:07,723 but this is yet another really great use case of it. 135 135 00:07:12,000 --> 00:07:13,813 And so let's take a look now, 136 136 00:07:15,020 --> 00:07:18,263 if we are able to actually get the correct one, 137 137 00:07:20,424 --> 00:07:24,280 so any random data here works just fine, 138 138 00:07:24,280 --> 00:07:25,470 then I'm gonna click it 139 139 00:07:26,540 --> 00:07:28,890 and now we get this same error 140 140 00:07:28,890 --> 00:07:30,840 that we already had before 141 141 00:07:30,840 --> 00:07:33,510 and we actually could have predicted this already, 142 142 00:07:33,510 --> 00:07:34,970 couldn't we? 143 143 00:07:34,970 --> 00:07:37,920 Because remember that this method here 144 144 00:07:37,920 --> 00:07:41,310 is called by, "addEventListener() method," 145 145 00:07:41,310 --> 00:07:44,010 and so therefore the, "this" keyword in here 146 146 00:07:44,010 --> 00:07:46,928 is not what we want it to be. 147 147 00:07:46,928 --> 00:07:48,713 So let's move up there. 148 148 00:07:50,650 --> 00:07:54,580 So to the place where we had the event listener, 149 149 00:07:54,580 --> 00:07:56,250 so right here. 150 150 00:07:56,250 --> 00:07:59,900 And so just like before we need to bind the, "this" keyword 151 151 00:07:59,900 --> 00:08:01,483 to actually make it correct. 152 152 00:08:03,020 --> 00:08:05,740 Right, so I already explained before 153 153 00:08:05,740 --> 00:08:07,433 why that is necessary. 154 154 00:08:09,400 --> 00:08:13,540 So let's just try again now I'm clicking it 155 155 00:08:15,330 --> 00:08:18,793 and yeah, here it is actually. 156 156 00:08:20,930 --> 00:08:23,810 So you see that this one has exactly the same ID. 157 157 00:08:23,810 --> 00:08:26,030 Let's just add another one here 158 158 00:08:30,950 --> 00:08:34,580 and now we get this one here, but again, 159 159 00:08:34,580 --> 00:08:36,610 as I click this one, of course, 160 160 00:08:36,610 --> 00:08:40,773 we still find the correct workout from the array. 161 161 00:08:42,710 --> 00:08:46,420 And so now we can basically take the coordinates 162 162 00:08:46,420 --> 00:08:47,950 from this element 163 163 00:08:47,950 --> 00:08:52,040 and then move to map to that position. 164 164 00:08:52,040 --> 00:08:54,890 So in leaflet, there is actually a method 165 165 00:08:54,890 --> 00:08:56,830 to do exactly that 166 166 00:08:56,830 --> 00:09:00,143 and the method is available on all map objects. 167 167 00:09:01,110 --> 00:09:02,770 So we can take our map object 168 168 00:09:02,770 --> 00:09:05,870 that we already have, which is this one. 169 169 00:09:05,870 --> 00:09:10,040 And then we can call the, "setView method," 170 170 00:09:10,040 --> 00:09:13,390 and I really encourage you to go check out the documentation 171 171 00:09:13,390 --> 00:09:16,560 of this one, but I'm not gonna do that right now. 172 172 00:09:16,560 --> 00:09:21,090 So anyway, the setView method needs as a first argument, 173 173 00:09:21,090 --> 00:09:22,080 the coordinates 174 174 00:09:22,960 --> 00:09:26,553 and so that's at the workout.coords 175 175 00:09:29,300 --> 00:09:32,010 then the second one is the zoom level 176 176 00:09:32,010 --> 00:09:33,130 and to zoom level, 177 177 00:09:33,130 --> 00:09:36,845 we actually have already used before somewhere. 178 178 00:09:36,845 --> 00:09:39,623 So I think where we first loaded the map, 179 179 00:09:40,590 --> 00:09:42,370 so right here. 180 180 00:09:42,370 --> 00:09:44,330 And so it would be a bad practice 181 181 00:09:44,330 --> 00:09:46,930 to simply repeat the same number here 182 182 00:09:46,930 --> 00:09:50,223 and so instead I will create another field here. 183 183 00:09:51,300 --> 00:09:54,860 So basically another object property here. 184 184 00:09:54,860 --> 00:09:58,963 So that's gonna be called mapzoomlevel, let's say, 185 185 00:10:01,840 --> 00:10:04,153 and I will set it to 13. 186 186 00:10:05,750 --> 00:10:07,193 So let's a copy of this one. 187 187 00:10:09,380 --> 00:10:11,837 So here we need, "this." and now, 188 188 00:10:16,120 --> 00:10:18,523 then here the same thing down here. 189 189 00:10:21,540 --> 00:10:22,673 So this.mapzoomlevel, 190 190 00:10:24,830 --> 00:10:29,363 and finally we can pass in an object of options as always, 191 191 00:10:30,310 --> 00:10:33,373 then here we can set animate to true. 192 192 00:10:34,600 --> 00:10:37,540 And then we can also set the duration basically 193 193 00:10:37,540 --> 00:10:39,870 of this animation by saying, 194 194 00:10:39,870 --> 00:10:44,730 pen should be equal to yet another object 195 195 00:10:44,730 --> 00:10:47,780 which should have the duration of 1. 196 196 00:10:47,780 --> 00:10:50,910 So this is all a little bit confusing, 197 197 00:10:50,910 --> 00:10:52,290 but again, if you want, 198 198 00:10:52,290 --> 00:10:54,950 you can read the documentation of leaflet 199 199 00:10:54,950 --> 00:10:58,083 and then find out why exactly it works this way. 200 200 00:10:59,160 --> 00:11:01,700 So let me give it a save here now, 201 201 00:11:01,700 --> 00:11:03,450 and then let's go back here 202 202 00:11:05,420 --> 00:11:08,533 so we can get almost rid of the console here. 203 203 00:11:12,200 --> 00:11:14,523 Okay, and add another one here, 204 204 00:11:15,670 --> 00:11:17,270 just to make this a bit more fun 205 205 00:11:18,150 --> 00:11:20,380 and so now let me actually click here 206 206 00:11:21,530 --> 00:11:24,613 and yeah, beautiful, it works. 207 207 00:11:25,936 --> 00:11:28,060 And a click on this one and of course 208 208 00:11:28,060 --> 00:11:30,880 it then moves to that one, 209 209 00:11:30,880 --> 00:11:33,620 and of course, if I edit even more than 210 210 00:11:33,620 --> 00:11:35,683 that would just work all the same. 211 211 00:11:36,520 --> 00:11:39,940 Okay, and now just to finish this, 212 212 00:11:39,940 --> 00:11:43,370 I want to just add a very small touch here. 213 213 00:11:43,370 --> 00:11:46,440 And that will be to simply count the clicks 214 214 00:11:46,440 --> 00:11:49,450 that happen on each of the workouts. 215 215 00:11:49,450 --> 00:11:52,200 Now I will not display that number anywhere 216 216 00:11:52,200 --> 00:11:53,770 or something like that. 217 217 00:11:53,770 --> 00:11:57,405 This, just to show you something basically. 218 218 00:11:57,405 --> 00:12:02,405 So essentially it is to make the public interface 219 219 00:12:02,420 --> 00:12:05,680 of these classes here a little bit more complete, 220 220 00:12:05,680 --> 00:12:09,020 because right now we are actually not calling any of the 221 221 00:12:09,020 --> 00:12:14,020 methods outside of the classes themselves, right? 222 222 00:12:14,120 --> 00:12:17,130 So we are not really using any public interface 223 223 00:12:17,130 --> 00:12:19,270 here on any of these objects 224 224 00:12:19,270 --> 00:12:22,030 and so I want to just change that 225 225 00:12:22,030 --> 00:12:24,840 just so you can see how that would work. 226 226 00:12:24,840 --> 00:12:28,240 So basically here on all the workouts, 227 227 00:12:28,240 --> 00:12:31,240 let's add a property called clicks 228 228 00:12:32,229 --> 00:12:35,710 and we will start with zero clicks. 229 229 00:12:35,710 --> 00:12:38,920 And then we will also have a methods 230 230 00:12:38,920 --> 00:12:40,800 which will be called click 231 231 00:12:43,700 --> 00:12:48,233 and all it will do is to increase the number of clicks. 232 232 00:12:49,420 --> 00:12:52,000 All right, so very simple 233 233 00:12:52,000 --> 00:12:55,100 but now every object gets this method 234 234 00:12:55,100 --> 00:12:57,620 and so in each of the workouts, 235 235 00:12:57,620 --> 00:13:00,420 we can now increase that number of clicks 236 236 00:13:01,300 --> 00:13:03,230 and so that's very simple. 237 237 00:13:03,230 --> 00:13:06,330 All we have to do now is to well, 238 238 00:13:06,330 --> 00:13:08,760 is to take the object that we already have, 239 239 00:13:08,760 --> 00:13:10,420 which is the workout, 240 240 00:13:10,420 --> 00:13:12,513 and then using that public interface. 241 241 00:13:17,699 --> 00:13:20,116 So that's just workout.click. 242 242 00:13:23,380 --> 00:13:24,680 And that's actually it 243 243 00:13:24,680 --> 00:13:27,790 and let's just test this. 244 244 00:13:27,790 --> 00:13:30,320 And also actually, this will be helpful 245 245 00:13:30,320 --> 00:13:33,203 to show you something else in the next video. 246 246 00:13:34,940 --> 00:13:35,773 All right, 247 247 00:13:36,630 --> 00:13:39,011 and so, as I keep clicking here, 248 248 00:13:39,011 --> 00:13:43,100 the number of clicks should actually increase 249 249 00:13:43,100 --> 00:13:46,583 but for some reason that we get this error here. 250 250 00:13:47,740 --> 00:13:50,007 So let's see what happening in line 289. 251 251 00:13:51,980 --> 00:13:53,582 So that's right here 252 252 00:13:53,582 --> 00:13:58,250 telling us that the workout.click does not exist. 253 253 00:13:58,250 --> 00:13:59,603 So why is that? 254 254 00:14:01,390 --> 00:14:04,363 Well, let's take a look at the object here, actually. 255 255 00:14:06,880 --> 00:14:09,573 And so, in particular at the prototype, 256 256 00:14:10,600 --> 00:14:14,000 and so here of course click does not exist, 257 257 00:14:14,000 --> 00:14:16,790 but here it actually is. 258 258 00:14:16,790 --> 00:14:18,970 So indeed here it's a click method 259 259 00:14:18,970 --> 00:14:22,820 and so the workout should have access to this method. 260 260 00:14:22,820 --> 00:14:25,840 So that is exactly what we learned in the previous section 261 261 00:14:25,840 --> 00:14:27,525 about the prototype chain 262 262 00:14:27,525 --> 00:14:31,860 and about how all of this actually works behind the scenes. 263 263 00:14:31,860 --> 00:14:34,690 So hopefully you will remember that. 264 264 00:14:34,690 --> 00:14:38,463 But now I'm actually not sure why this isn't working. 265 265 00:14:39,900 --> 00:14:41,360 Let's go back here 266 266 00:14:41,360 --> 00:14:42,500 and bring back 267 267 00:14:42,500 --> 00:14:46,430 or fake workouts here basically. 268 268 00:14:46,430 --> 00:14:47,870 So these ones, 269 269 00:14:47,870 --> 00:14:50,773 so we can play around with them in the console. 270 270 00:14:52,110 --> 00:14:55,440 So you see that both of them have the clicks set to zero 271 271 00:14:56,450 --> 00:15:01,450 and so let's use run1.click like this 272 272 00:15:02,670 --> 00:15:06,920 and then as we look at run 1 again, 273 273 00:15:06,920 --> 00:15:09,543 then the clicks is still at zero. 274 274 00:15:10,490 --> 00:15:14,283 So something is clearly also wrong there. 275 275 00:15:15,900 --> 00:15:18,693 Okay, so here, this needs to be clicks, 276 276 00:15:19,770 --> 00:15:22,833 but I'm not sure if that was the actual error. 277 277 00:15:27,650 --> 00:15:32,070 Okay, so now the clicks increased to two here. 278 278 00:15:32,070 --> 00:15:33,120 So that's now check 279 279 00:15:35,190 --> 00:15:36,240 adding something here 280 280 00:15:37,680 --> 00:15:38,823 and then clicking it. 281 281 00:15:40,800 --> 00:15:43,380 Okay, and you see that it moved there. 282 282 00:15:43,380 --> 00:15:45,280 Let's click again. 283 283 00:15:45,280 --> 00:15:47,580 Oh, and now it's actually working. 284 284 00:15:47,580 --> 00:15:50,963 So now the clicks indeed increased to one. 285 285 00:15:52,130 --> 00:15:55,390 So great, that works just fine 286 286 00:15:55,390 --> 00:15:57,824 and again, this was just a way of showing you 287 287 00:15:57,824 --> 00:16:00,500 that we can of course then interact 288 288 00:16:00,500 --> 00:16:04,793 with each of the objects using their public interface. 289 289 00:16:06,270 --> 00:16:10,663 And in this case, we use that using the click method here. 290 290 00:16:12,250 --> 00:16:15,570 So that's it for this lecture in the next video, 291 291 00:16:15,570 --> 00:16:17,680 we will then fix the fact that 292 292 00:16:17,680 --> 00:16:21,430 when we reload the page, everything is gone. 293 293 00:16:21,430 --> 00:16:24,550 And so actually we want data to persist 294 294 00:16:24,550 --> 00:16:27,680 and so that is the missing piece in our application 295 295 00:16:27,680 --> 00:16:30,013 and we will fix it in the next lecture. 25054