1
00:00:02,190 --> 00:00:05,700
The implementation we're currently using is absolutely fine,

2
00:00:05,700 --> 00:00:11,960
it opens the modal but we could also add another way of using our modal.

3
00:00:12,120 --> 00:00:18,660
We get access to it here in code, in our Javascript code and it's always important to remember that what

4
00:00:18,660 --> 00:00:27,630
you get here is a full Javascript object, the Javascript object representing this DOM node and this object

5
00:00:27,840 --> 00:00:30,310
can be used to set the attribute,

6
00:00:30,330 --> 00:00:32,480
we could also set the classes there,

7
00:00:32,550 --> 00:00:40,290
we could even remove it from the DOM and since it is an object, it is an object based on our class here.

8
00:00:40,290 --> 00:00:44,180
This is in the end the object that was generated for us by the browser,

9
00:00:44,250 --> 00:00:50,550
it has all the default properties of HTML element which we extend here and it has its default

10
00:00:50,580 --> 00:00:57,960
methods and actually set attribute is just a default method of every HTML element

11
00:00:58,140 --> 00:01:04,850
and since we extend HTML element here, our own modal object also has set attribute available

12
00:01:05,190 --> 00:01:12,030
but this means that if we add any new properties or methods in our class, we can also access these from

13
00:01:12,030 --> 00:01:18,920
outside and therefore one thing we could add here is an open method.

14
00:01:18,940 --> 00:01:23,810
Now please note that I did not add an underscore at the beginning here because I don't want to mark

15
00:01:23,810 --> 00:01:25,210
this as private,

16
00:01:25,210 --> 00:01:32,680
it should indeed be accessible from outside and what I do in here is here, I add some code to show my

17
00:01:32,680 --> 00:01:33,350
modal

18
00:01:33,490 --> 00:01:38,620
and again this could be the code we use here before or I set my attribute

19
00:01:42,480 --> 00:01:49,850
inside here.

20
00:01:49,880 --> 00:01:55,640
Now what this allows me to do with this open method added is that I go back to my index.html file

21
00:01:56,240 --> 00:02:02,960
and instead of setting the attribute here, which I absolutely can do, I can call open here on my modal

22
00:02:02,960 --> 00:02:05,910
object because I just added this open method

23
00:02:06,470 --> 00:02:09,050
and if you're wondering why I would do it like this,

24
00:02:09,110 --> 00:02:17,180
well I can abstract complexity away from my main document, from me as a component user and manage it

25
00:02:17,210 --> 00:02:18,950
inside of my component.

26
00:02:18,950 --> 00:02:24,770
Now obviously, the complexity is not very large here but if we were adding different elements or anything

27
00:02:24,770 --> 00:02:31,910
like that, then all we have to do outside is call open and we do all the magic inside of this open method,

28
00:02:32,090 --> 00:02:33,900
inside of our component.

29
00:02:33,920 --> 00:02:39,740
So this is not a strictly better approach than setting the attribute manually as we did before outside

30
00:02:39,740 --> 00:02:40,910
of the component,

31
00:02:40,940 --> 00:02:45,060
it's just an alternative, an alternative of which you should be aware

32
00:02:45,200 --> 00:02:48,410
and actually it's perfectly fine to handle both cases,

33
00:02:48,410 --> 00:02:56,030
the case that we add opened manually from outside or that we call open and you do find built-in elements

34
00:02:56,300 --> 00:03:03,740
where you can call a method to something or where you can call a method from outside to do something.

35
00:03:03,740 --> 00:03:11,840
Now with this adjusted, I can reload my page and still open a modal because it has still the same mechanism,

36
00:03:11,870 --> 00:03:17,380
still the opened attribute gets added but now we're not doing this manually with our own code,

37
00:03:17,510 --> 00:03:20,450
we're calling open outside instead

38
00:03:20,570 --> 00:03:22,910
and this is just one alternative

39
00:03:22,910 --> 00:03:24,720
I wanted to show you here.

40
00:03:24,860 --> 00:03:28,550
Also be aware that you can not just call methods from outside,

41
00:03:28,760 --> 00:03:38,940
if you had some public properties, so any other properties like let's say this is open and you set this

42
00:03:38,940 --> 00:03:43,200
to false initially and we change this to true here,

43
00:03:47,030 --> 00:03:49,390
then you can access this from outside too.

44
00:03:49,400 --> 00:03:57,560
So now we have is open here and now after calling modal open, if I console log modal is open here from

45
00:03:57,620 --> 00:04:04,490
outside my component, you will see that if I open the console and I reload and I click this button, we

46
00:04:04,490 --> 00:04:11,870
see false here because I should set it to true in open and not leave it as false,

47
00:04:11,940 --> 00:04:12,390
so

48
00:04:12,400 --> 00:04:13,540
let's give this another try,

49
00:04:14,820 --> 00:04:15,700
reload,

50
00:04:15,720 --> 00:04:16,860
now we see true here.

51
00:04:16,860 --> 00:04:22,670
So we can also access properties from outside our component and we might have some useful information in

52
00:04:22,680 --> 00:04:28,890
there which we now can extract and use programmatically from our main document, from our main application

53
00:04:28,890 --> 00:04:34,450
logic which would be this one and which we still manage inside of our modal.

54
00:04:34,650 --> 00:04:39,210
Now a little side note, if we do expose this is open formation,

55
00:04:39,210 --> 00:04:46,050
then we all of a sudden need to readd our attribute changed callback, not change the styles here but

56
00:04:46,050 --> 00:04:47,400
certainly change

57
00:04:47,400 --> 00:04:59,050
this is open to true here and on the other hand, if we don't have that opened attribute, we want to change

58
00:04:59,110 --> 00:05:01,070
is open to false here.

59
00:05:01,120 --> 00:05:04,370
By the way we can get rid of that outer check,

60
00:05:04,570 --> 00:05:07,250
we can always check for the existence of this attribute,

61
00:05:07,540 --> 00:05:13,750
even if this attribute change callback was triggered due to the change in some totally different attribute.

62
00:05:13,750 --> 00:05:19,140
So now, this is totally optional, just to show you that you can access properties from outside too

63
00:05:19,360 --> 00:05:26,020
but now we have this extra functionality added, where we can always access this information too through

64
00:05:26,080 --> 00:05:28,300
this public property.

65
00:05:28,300 --> 00:05:35,810
Now with this is open property exposed, we can actually enhance our logic out here and we can check that

66
00:05:35,810 --> 00:05:42,610
if this button gets clicked, we only want to open a modal if modal is open is not true,

67
00:05:42,620 --> 00:05:46,160
so if this is not true hence an exclamation mark at the beginning,

68
00:05:46,160 --> 00:05:51,010
otherwise we don't have to call open because it already seems to be open.

69
00:05:51,020 --> 00:05:55,910
Not sure how we could click this but if we did something fishy, then we would block this.

70
00:05:55,910 --> 00:05:59,300
So here I can show console log opening

71
00:06:02,880 --> 00:06:04,890
and now if I reload, we see opening here

72
00:06:05,130 --> 00:06:10,950
but now if I hack this and I manually remove the backdrop, now I all of a sudden can click this button

73
00:06:10,950 --> 00:06:11,700
again

74
00:06:11,700 --> 00:06:17,540
but now you will see if I do so, we don't see opening again because of this extra check.

75
00:06:17,550 --> 00:06:23,940
So now we have this extra check which is a little bit useful here but it's easy to imagine other components

76
00:06:24,120 --> 00:06:30,030
where you would need to get some information from inside to prevent strange logic from running outside,

77
00:06:30,090 --> 00:06:35,400
so in your main application and then public properties like is open can be very helpful.