Original subtitles

1 1

And this lecture, 2

2

we're gonna implement a feature 3

3

that will basically move the map 4

4

to the position of the workout 5

5

that was clicked in the sidebar. 6

6

So the feature that I'm in is this one. 7

7

So when I click one of these, then as I said, 8

8

the map will move to the position of that workout. 9

9

And so this is a very nice touch to the user interface 10

10

and so let's now do that. 11

11

And let's say that we're starting 12

12

with a blank page like this. 13

13

So the initial stage of our application 14

14

and so of course, right now, 15

15

there are no workouts on which we could click 16

16

and so in this case, 17

17

where should we actually attach the event handler? 18

18

So this is the situation 19

19

that I actually had mentioned already earlier. 20

20

So again, 21

21

the situation in which we don't have the element 22

22

on which we actually want to attach the event listener 23

23

because it hasn't been created yet 24

24

and so what we have to do here is one more time, 25

25

basically, event delegation. 26

26

So what we're gonna do is to add the event handler 27

27

to the parent element. 28

28

And so in our HTML, 29

29

we can see that that is this workout's 30

30

and element here. 31

31

So basically the element with the class of workouts 32

32

and so let's see here in the code, which one that is. 33

33

Alright, so it's called container workouts. 34

34

So let's add an event listener to that element there. 35

35

And remember one more time we do that in the constructor 36

36

so that event listener is added right in the beginning. 37

37

So containerworkout.addEventListener on click, 38

38

and then we're gonna create a method called 39

39

moveToPopup just like this. 40

40

So that's a copy it, 41

41

and then add it here at the end. 42

42

Now this methods that we have here, 43

43

they are not really ordered in any particular way. 44

44

So I'm just adding them as I go here. 45

45

Now, anyway, 46

46

here we are going to need the event 47

47

because now we will have to match the object 48

48

or actually the element that we're actually looking for. 49

49

So what I will do here is to create the workout element 50

50

and basically all that I'm gonna do 51

51

is to look at e.target 52

52

So that's the element that is actually clicked 53

53

and then I will look for the closest workout parent, 54

54

so closest, which is again, 55

55

essentially the opposite of a query selector. 56

56

And so, the element that I'm looking for 57

57

is the one with the class workout. 58

58

So like this, 59

59

wherever the click happens 60

60

here in the element. 61

61

So no matter if it's in one of these divs or the spans, 62

62

it doesn't matter. 63

63

All of it will then basically end up 64

64

in this Li element with the workout class, 65

65

because from the element that is clicked, 66

66

we will move up to this exact element here 67

67

using the closest method. 68

68

All right, so once again closest 69

69

is a real life saver here. 70

70

It is really, really helpful. 71

71

And so now let's start by logging 72

72

this element to the console. 73

73

Now right, 74

74

so let's wait for it 75

75

as always any values here work. 76

76

So of course we first need to have something here 77

77

and now as I click it, let's see what happens, 78

78

and indeed we get the entire element here 79

79

and that works no matter if I click out here 80

80

or here or on this emoji 81

81

or really anywhere. 82

82

So the closest method takes care of really 83

83

then selecting this entire element. 84

84

Now, why is that actually so important? 85

85

Well it's because it is right there 86

86

where I have this ID 87

87

and it is this ID 88

88

that I will now use to actually find the workout 89

89

in the workouts array 90

90

and so once again, we put this here, 91

91

because with this, we can then basically build a bridge 92

92

between the user interface 93

93

and the data that we have actually in our application. 94

94

So in this case our data in the workout's array, 95

95

because if we didn't have this ID here 96

96

stored in the user interface, 97

97

then how would we know which is the objects in the workouts 98

98

array that we need to scroll to? 99

99

And so we need this ID here 100

100

so that we can now read it 101

101

and basically then select the element 102

102

out of the workouts array using this ID. 103

103

Now let's just happen when we click outside here 104

104

in the same container. 105

105

So you see that this here is still a container outside 106

106

and so when we click this, 107

107

now we of course get null 108

108

because there is no closest parent with a workout class. 109

109

All right, and so we will actually have to 110

110

basically ignore that. 111

111

And so this is the next step. 112

112

So if basically there is no a workout element 113

113

then simply return. 114

114

And so again, this is a guard clause here 115

115

so of course we could have done also 116

116

if there is a workout element 117

117

and then the if block, but this is a bit nicer. 118

118

And so now it's time to actually get the workout data 119

119

out of the workouts array. 120

120

So workout=this.workouts 121

121

and actually that's like this 122

122

and now how do you think we will find this workout? 123

123

Well, that's right , just like in the blank list application 124

124

that we built before we are going to use the find method 125

125

to, well, essentially find an element of the array. 126

126

So that's create our callback function here 127

127

and so each element in the workouts array, 128

128

I will simply call work. 129

129

And then I want the one which has work.id equal to that ID 130

130

that I just showed you before in the dum. 131

131

and so debts workoutEL.dataset.id 132

132

so this is again, nothing new at this point 133

133

we used this technique a couple of times before, 134

134

but this is yet another really great use case of it. 135

135

And so let's take a look now, 136

136

if we are able to actually get the correct one, 137

137

so any random data here works just fine, 138

138

then I'm gonna click it 139

139

and now we get this same error 140

140

that we already had before 141

141

and we actually could have predicted this already, 142

142

couldn't we? 143

143

Because remember that this method here 144

144

is called by, "addEventListener() method," 145

145

and so therefore the, "this" keyword in here 146

146

is not what we want it to be. 147

147

So let's move up there. 148

148

So to the place where we had the event listener, 149

149

so right here. 150

150

And so just like before we need to bind the, "this" keyword 151

151

to actually make it correct. 152

152

Right, so I already explained before 153

153

why that is necessary. 154

154

So let's just try again now I'm clicking it 155

155

and yeah, here it is actually. 156

156

So you see that this one has exactly the same ID. 157

157

Let's just add another one here 158

158

and now we get this one here, but again, 159

159

as I click this one, of course, 160

160

we still find the correct workout from the array. 161

161

And so now we can basically take the coordinates 162

162

from this element 163

163

and then move to map to that position. 164

164

So in leaflet, there is actually a method 165

165

to do exactly that 166

166

and the method is available on all map objects. 167

167

So we can take our map object 168

168

that we already have, which is this one. 169

169

And then we can call the, "setView method," 170

170

and I really encourage you to go check out the documentation 171

171

of this one, but I'm not gonna do that right now. 172

172

So anyway, the setView method needs as a first argument, 173

173

the coordinates 174

174

and so that's at the workout.coords 175

175

then the second one is the zoom level 176

176

and to zoom level, 177

177

we actually have already used before somewhere. 178

178

So I think where we first loaded the map, 179

179

so right here. 180

180

And so it would be a bad practice 181

181

to simply repeat the same number here 182

182

and so instead I will create another field here. 183

183

So basically another object property here. 184

184

So that's gonna be called mapzoomlevel, let's say, 185

185

and I will set it to 13. 186

186

So let's a copy of this one. 187

187

So here we need, "this." and now, 188

188

then here the same thing down here. 189

189

So this.mapzoomlevel, 190

190

and finally we can pass in an object of options as always, 191

191

then here we can set animate to true. 192

192

And then we can also set the duration basically 193

193

of this animation by saying, 194

194

pen should be equal to yet another object 195

195

which should have the duration of 1. 196

196

So this is all a little bit confusing, 197

197

but again, if you want, 198

198

you can read the documentation of leaflet 199

199

and then find out why exactly it works this way. 200

200

So let me give it a save here now, 201

201

and then let's go back here 202

202

so we can get almost rid of the console here. 203

203

Okay, and add another one here, 204

204

just to make this a bit more fun 205

205

and so now let me actually click here 206

206

and yeah, beautiful, it works. 207

207

And a click on this one and of course 208

208

it then moves to that one, 209

209

and of course, if I edit even more than 210

210

that would just work all the same. 211

211

Okay, and now just to finish this, 212

212

I want to just add a very small touch here. 213

213

And that will be to simply count the clicks 214

214

that happen on each of the workouts. 215

215

Now I will not display that number anywhere 216

216

or something like that. 217

217

This, just to show you something basically. 218

218

So essentially it is to make the public interface 219

219

of these classes here a little bit more complete, 220

220

because right now we are actually not calling any of the 221

221

methods outside of the classes themselves, right? 222

222

So we are not really using any public interface 223

223

here on any of these objects 224

224

and so I want to just change that 225

225

just so you can see how that would work. 226

226

So basically here on all the workouts, 227

227

let's add a property called clicks 228

228

and we will start with zero clicks. 229

229

And then we will also have a methods 230

230

which will be called click 231

231

and all it will do is to increase the number of clicks. 232

232

All right, so very simple 233

233

but now every object gets this method 234

234

and so in each of the workouts, 235

235

we can now increase that number of clicks 236

236

and so that's very simple. 237

237

All we have to do now is to well, 238

238

is to take the object that we already have, 239

239

which is the workout, 240

240

and then using that public interface. 241

241

So that's just workout.click. 242

242

And that's actually it 243

243

and let's just test this. 244

244

And also actually, this will be helpful 245

245

to show you something else in the next video. 246

246

All right, 247

247

and so, as I keep clicking here, 248

248

the number of clicks should actually increase 249

249

but for some reason that we get this error here. 250

250

So let's see what happening in line 289. 251

251

So that's right here 252

252

telling us that the workout.click does not exist. 253

253

So why is that? 254

254

Well, let's take a look at the object here, actually. 255

255

And so, in particular at the prototype, 256

256

and so here of course click does not exist, 257

257

but here it actually is. 258

258

So indeed here it's a click method 259

259

and so the workout should have access to this method. 260

260

So that is exactly what we learned in the previous section 261

261

about the prototype chain 262

262

and about how all of this actually works behind the scenes. 263

263

So hopefully you will remember that. 264

264

But now I'm actually not sure why this isn't working. 265

265

Let's go back here 266

266

and bring back 267

267

or fake workouts here basically. 268

268

So these ones, 269

269

so we can play around with them in the console. 270

270

So you see that both of them have the clicks set to zero 271

271

and so let's use run1.click like this 272

272

and then as we look at run 1 again, 273

273

then the clicks is still at zero. 274

274

So something is clearly also wrong there. 275

275

Okay, so here, this needs to be clicks, 276

276

but I'm not sure if that was the actual error. 277

277

Okay, so now the clicks increased to two here. 278

278

So that's now check 279

279

adding something here 280

280

and then clicking it. 281

281

Okay, and you see that it moved there. 282

282

Let's click again. 283

283

Oh, and now it's actually working. 284

284

So now the clicks indeed increased to one. 285

285

So great, that works just fine 286

286

and again, this was just a way of showing you 287

287

that we can of course then interact 288

288

with each of the objects using their public interface. 289

289

And in this case, we use that using the click method here. 290

290

So that's it for this lecture in the next video, 291

291

we will then fix the fact that 292

292

when we reload the page, everything is gone. 293

293

And so actually we want data to persist 294

294

and so that is the missing piece in our application 295

295

and we will fix it in the next lecture.