1
00:00:02,020 --> 00:00:04,180
Now in open player config,

2
00:00:04,180 --> 00:00:07,320
I want to open that overlay.

3
00:00:07,320 --> 00:00:09,860
So this aside, with that ID,

4
00:00:09,860 --> 00:00:11,860
and this class of modal here,

5
00:00:11,860 --> 00:00:14,300
and I want to open that overlays so

6
00:00:14,300 --> 00:00:18,440
that we can then edit our player with that.

7
00:00:18,440 --> 00:00:19,600
Now to make that work,

8
00:00:19,600 --> 00:00:20,433
we first of all,

9
00:00:20,433 --> 00:00:23,160
need to get access to that overlay

10
00:00:23,160 --> 00:00:24,990
and to the backdrop.

11
00:00:24,990 --> 00:00:29,990
And change the display CSS property from none,

12
00:00:30,140 --> 00:00:32,460
which we have there at the moment.

13
00:00:32,460 --> 00:00:35,220
We have display none on the modal

14
00:00:35,220 --> 00:00:36,560
and on the backdrop,

15
00:00:36,560 --> 00:00:37,700
and we need to change this

16
00:00:37,700 --> 00:00:39,520
with help of JavaScript,

17
00:00:39,520 --> 00:00:41,380
to block,

18
00:00:41,380 --> 00:00:43,510
so that it's not hidden anymore,

19
00:00:43,510 --> 00:00:44,993
but that it is visible.

20
00:00:45,890 --> 00:00:46,723
Now for this,

21
00:00:46,723 --> 00:00:48,500
we need to get access to

22
00:00:48,500 --> 00:00:51,120
this overlay and backdrop.

23
00:00:51,120 --> 00:00:52,960
And for this back in app.js,

24
00:00:52,960 --> 00:00:55,680
where I want to do all my core management

25
00:00:55,680 --> 00:00:59,330
of all the different HTML elements we have access to,

26
00:00:59,330 --> 00:01:01,350
I will add new constants,

27
00:01:01,350 --> 00:01:03,480
maybe here at the top.

28
00:01:03,480 --> 00:01:06,280
And the first constant I'll add here

29
00:01:06,280 --> 00:01:10,703
is the player config overlay element.

30
00:01:11,610 --> 00:01:14,210
I'm using very long descriptive names here.

31
00:01:14,210 --> 00:01:17,600
You could also use shorter names if you want to.

32
00:01:17,600 --> 00:01:20,900
And here, I want to select an element by ID again,

33
00:01:20,900 --> 00:01:23,720
and the element I want to select is the aside element

34
00:01:23,720 --> 00:01:27,403
with that config overly ID, which I have here.

35
00:01:28,900 --> 00:01:30,550
So in app.js,

36
00:01:30,550 --> 00:01:33,633
I'll pass this ID to get element by ID.

37
00:01:34,780 --> 00:01:36,830
I also want to get hold of the backdrop

38
00:01:36,830 --> 00:01:41,193
and for this I'll add my backdrop element constant here,

39
00:01:42,050 --> 00:01:43,830
and then here use document,

40
00:01:43,830 --> 00:01:46,453
get element by ID backdrop.

41
00:01:47,770 --> 00:01:51,260
Because on that backdrop dif here,

42
00:01:51,260 --> 00:01:53,393
I did add the ID backdrop.

43
00:01:54,350 --> 00:01:55,350
So in app.js,

44
00:01:55,350 --> 00:01:57,453
we can select that element by that ID.

45
00:01:58,680 --> 00:02:00,980
Now we can use these two elements

46
00:02:00,980 --> 00:02:03,840
inside of open player config,

47
00:02:03,840 --> 00:02:06,500
but wait a second, does this work?

48
00:02:06,500 --> 00:02:08,740
And if yes, why does that work?

49
00:02:08,740 --> 00:02:12,630
Can I define a constant here in app.js?

50
00:02:12,630 --> 00:02:16,460
Even though that is the last file to be executed

51
00:02:16,460 --> 00:02:19,080
and then use it in config.js.

52
00:02:19,080 --> 00:02:22,080
So use it inside of open player config.

53
00:02:22,080 --> 00:02:25,500
Yes, if the order of execution is correct.

54
00:02:25,500 --> 00:02:27,000
This function,

55
00:02:27,000 --> 00:02:30,000
open player config, will only execute

56
00:02:30,000 --> 00:02:33,270
if one of the added buttons here is clicked.

57
00:02:33,270 --> 00:02:35,210
Now we add these event listeners here

58
00:02:35,210 --> 00:02:37,460
at the bottom of app.js.

59
00:02:37,460 --> 00:02:40,400
So the earliest point of those buttons being clicked

60
00:02:40,400 --> 00:02:42,200
and that click being handled

61
00:02:42,200 --> 00:02:44,810
is after all of that code executed.

62
00:02:44,810 --> 00:02:47,430
All that code in app.js because only

63
00:02:47,430 --> 00:02:49,620
then these click listeners were added

64
00:02:50,520 --> 00:02:52,350
because that's the case, because we know

65
00:02:52,350 --> 00:02:54,300
that this is the earliest point

66
00:02:54,300 --> 00:02:57,260
where open player config may be executed.

67
00:02:57,260 --> 00:03:01,120
We also know that player config overly element

68
00:03:01,120 --> 00:03:04,470
and backdrop element will have been defined because

69
00:03:04,470 --> 00:03:08,040
that happens before the clicker listeners were added.

70
00:03:08,040 --> 00:03:08,873
And therefore,

71
00:03:08,873 --> 00:03:11,950
we can safely access these two constants inside

72
00:03:11,950 --> 00:03:14,113
of the open player config function.

73
00:03:15,210 --> 00:03:16,043
And therefore here,

74
00:03:16,043 --> 00:03:19,050
I'll use player config overlay element,

75
00:03:19,050 --> 00:03:20,660
and access to style,

76
00:03:20,660 --> 00:03:25,100
a property here to get access to all this CSS properties.

77
00:03:25,100 --> 00:03:29,453
And then here set the display style to block.

78
00:03:30,290 --> 00:03:31,630
Remember it was none,

79
00:03:31,630 --> 00:03:32,723
now it's block.

80
00:03:33,680 --> 00:03:37,133
And I'll do the same here for the backdrop element.

81
00:03:38,750 --> 00:03:39,770
And with that,

82
00:03:39,770 --> 00:03:42,010
if I save that and reload,

83
00:03:42,010 --> 00:03:43,340
if we click edit,

84
00:03:43,340 --> 00:03:45,330
this overlay should open.

85
00:03:45,330 --> 00:03:46,200
And if you reload,

86
00:03:46,200 --> 00:03:47,440
the same should be possible

87
00:03:47,440 --> 00:03:49,193
if you click the other edit button.

88
00:03:50,080 --> 00:03:50,913
At the moment,

89
00:03:50,913 --> 00:03:52,470
it never disappears,

90
00:03:52,470 --> 00:03:53,810
no matter what we do,

91
00:03:53,810 --> 00:03:54,750
If you click confirm,

92
00:03:54,750 --> 00:03:55,890
we reload the page.

93
00:03:55,890 --> 00:03:58,280
So then it technically disappears,

94
00:03:58,280 --> 00:04:00,410
but we'll handle this differently later.

95
00:04:00,410 --> 00:04:02,910
But it does not disappear if I click cancel

96
00:04:02,910 --> 00:04:04,750
or on the backdrop.

97
00:04:04,750 --> 00:04:07,330
And that's what we typically would want.

98
00:04:07,330 --> 00:04:09,390
We should be able to close this overlay,

99
00:04:09,390 --> 00:04:10,510
if we click on cancel

100
00:04:10,510 --> 00:04:12,580
or on the backdrop.

101
00:04:12,580 --> 00:04:13,800
And to make this work,

102
00:04:13,800 --> 00:04:16,993
we need to add more click listeners.

103
00:04:17,930 --> 00:04:18,762
So for this,

104
00:04:18,762 --> 00:04:20,060
I'll go back to app.js

105
00:04:20,060 --> 00:04:22,790
and get access to more elements to

106
00:04:22,790 --> 00:04:26,030
which I want to be able to listen to clicks.

107
00:04:26,030 --> 00:04:26,863
For example,

108
00:04:26,863 --> 00:04:30,160
another button I want to listen to,

109
00:04:30,160 --> 00:04:32,500
the button inside of my overlay.

110
00:04:32,500 --> 00:04:34,040
This cancel button.

111
00:04:34,040 --> 00:04:35,460
When this button is clicked,

112
00:04:35,460 --> 00:04:38,500
then the overlay should be closed.

113
00:04:38,500 --> 00:04:40,500
Now to make that happen I'll again,

114
00:04:40,500 --> 00:04:41,770
add an ID here,

115
00:04:41,770 --> 00:04:45,220
simply because selecting by ID is so convenient

116
00:04:45,220 --> 00:04:46,053
and easy.

117
00:04:46,053 --> 00:04:48,993
And named this cancel config button,

118
00:04:50,080 --> 00:04:51,350
copy that.

119
00:04:51,350 --> 00:04:55,050
And then app.js all to get access to this button.

120
00:04:55,050 --> 00:04:57,750
Now it doesn't matter where exactly you create

121
00:04:57,750 --> 00:04:59,190
that constant here.

122
00:04:59,190 --> 00:05:00,210
I'll do it here

123
00:05:00,210 --> 00:05:02,920
where I also get access to my other buttons,

124
00:05:02,920 --> 00:05:05,370
but I'm only doing this because I want to group all

125
00:05:05,370 --> 00:05:06,890
these button elements together

126
00:05:06,890 --> 00:05:09,993
and group all the other elements together, kind of.

127
00:05:10,960 --> 00:05:15,500
So here I'll have my cancel config button element

128
00:05:15,500 --> 00:05:18,770
and we get hold of that by using get element by ID

129
00:05:18,770 --> 00:05:19,840
with that ID,

130
00:05:19,840 --> 00:05:21,773
we just add it to this button.

131
00:05:23,100 --> 00:05:25,720
And now we wanna add a click listener

132
00:05:25,720 --> 00:05:27,040
to this button was well,

133
00:05:27,040 --> 00:05:29,530
to the cancel config button element.

134
00:05:29,530 --> 00:05:31,280
And I want to execute a function here

135
00:05:31,280 --> 00:05:34,083
that closes this overlay.

136
00:05:35,100 --> 00:05:36,710
And for this in config.js,

137
00:05:36,710 --> 00:05:38,620
I'll add a number function.

138
00:05:38,620 --> 00:05:41,860
The close player conflict function.

139
00:05:41,860 --> 00:05:43,410
That sounds like a fitting name,

140
00:05:43,410 --> 00:05:45,820
given the fact that I named this function here,

141
00:05:45,820 --> 00:05:47,467
open player config.

142
00:05:48,610 --> 00:05:49,760
And then app.js,

143
00:05:49,760 --> 00:05:51,920
we can now add an event listener here

144
00:05:51,920 --> 00:05:54,920
to the cancel config button element,

145
00:05:54,920 --> 00:05:56,900
listen to a click event

146
00:05:56,900 --> 00:06:00,323
and then trigger the close player config function.

147
00:06:01,470 --> 00:06:02,900
And we also wanna trigger

148
00:06:02,900 --> 00:06:05,330
that function if the backdrop is clicked.

149
00:06:05,330 --> 00:06:09,320
So I'll also use my backdrop element,

150
00:06:09,320 --> 00:06:12,010
which we already selected here,

151
00:06:12,010 --> 00:06:14,210
and also add an event listener to this.

152
00:06:14,210 --> 00:06:16,710
Because as I mentioned earlier in this section,

153
00:06:16,710 --> 00:06:20,120
you're not limited to adding click listeners to buttons

154
00:06:20,120 --> 00:06:20,953
or links.

155
00:06:20,953 --> 00:06:23,230
You can add them to any element.

156
00:06:23,230 --> 00:06:24,850
All HTML elements,

157
00:06:24,850 --> 00:06:28,360
support a broad variety of listening events.

158
00:06:28,360 --> 00:06:30,880
And the click event is the most prominent one

159
00:06:30,880 --> 00:06:32,340
of all these events.

160
00:06:32,340 --> 00:06:33,173
So here,

161
00:06:33,173 --> 00:06:34,440
we also listened to a click

162
00:06:34,440 --> 00:06:36,980
and then we close the modal

163
00:06:36,980 --> 00:06:39,610
by executing close player config.

164
00:06:39,610 --> 00:06:40,960
And just as before,

165
00:06:40,960 --> 00:06:45,050
we just passed a name of the to be executed function here

166
00:06:45,050 --> 00:06:47,460
so that the browser then executes the function

167
00:06:47,460 --> 00:06:49,143
on our behalf later.

168
00:06:50,800 --> 00:06:54,630
Now, inside of close player config,

169
00:06:54,630 --> 00:06:56,350
I now wanna do the opposite of

170
00:06:56,350 --> 00:06:58,983
what I did here in open player config.

171
00:06:59,900 --> 00:07:01,810
Hence, we can copy that code,

172
00:07:01,810 --> 00:07:04,920
add it here and just change it back to none.

173
00:07:04,920 --> 00:07:07,710
So that we hide both the overlay

174
00:07:07,710 --> 00:07:09,003
and the backdrop.

175
00:07:11,030 --> 00:07:13,000
If I do that,

176
00:07:13,000 --> 00:07:14,050
if I now click edit

177
00:07:14,050 --> 00:07:14,883
this opens,

178
00:07:14,883 --> 00:07:16,590
but if I click anywhere on the backdrop,

179
00:07:16,590 --> 00:07:17,630
we can close it

180
00:07:17,630 --> 00:07:20,150
and also if I click the cancel button.

181
00:07:20,150 --> 00:07:22,770
So that is looking good.

182
00:07:22,770 --> 00:07:25,200
With that opening and closing works,

183
00:07:25,200 --> 00:07:26,310
but at the moment, of course,

184
00:07:26,310 --> 00:07:28,220
we can enter whatever we want here.

185
00:07:28,220 --> 00:07:29,590
If I click confirm here,

186
00:07:29,590 --> 00:07:31,460
we will just reload the page

187
00:07:31,460 --> 00:07:35,140
and throw that value away in the end.

188
00:07:35,140 --> 00:07:36,780
So therefore, as a next step,

189
00:07:36,780 --> 00:07:39,230
we want to see how we can actually handle

190
00:07:39,230 --> 00:07:42,670
this form submission with JavaScript.

191
00:07:42,670 --> 00:07:45,063
And that will be a brand new concept.