1
00:00:02,290 --> 00:00:03,970
So to also practice inheritance again,

2
00:00:04,000 --> 00:00:07,420
let's add a base class and you can name it however you want, I'll name it component,

3
00:00:07,420 --> 00:00:13,810
I like this name for a class that in the end is related to controlling parts of the DOM

4
00:00:13,810 --> 00:00:15,870
but you can name it however you want.

5
00:00:16,030 --> 00:00:20,170
I'll name it component and I will take detach and attach,

6
00:00:20,230 --> 00:00:25,960
cut it from the tooltip and move it into component, though the attach method here now doesn't really

7
00:00:25,960 --> 00:00:29,780
look the way I want it to look, it should look a bit different,

8
00:00:29,830 --> 00:00:36,640
it should in the end just be concerned about appending something, so we'll actually cut this part here again

9
00:00:36,910 --> 00:00:37,890
from attach,

10
00:00:38,020 --> 00:00:44,200
go back to the tooltip and there, add a create or render or however you want to call it method where I now

11
00:00:44,200 --> 00:00:51,880
add this again and now in the tooltip, I want to call this create from inside the constructor so that

12
00:00:51,880 --> 00:00:57,570
this always runs when this class is instantiated. There I then build my tooltip,

13
00:00:57,580 --> 00:01:02,340
the only thing which I don't do here is I don't attach it but I store it here in this element

14
00:01:02,340 --> 00:01:10,320
property and that's also important because I'll be referring to this element property in attach here

15
00:01:11,350 --> 00:01:17,230
and now I just need to extend component here on my tooltip class so that we have access to these two

16
00:01:17,230 --> 00:01:18,310
methods here

17
00:01:18,430 --> 00:01:23,410
and as you learned, this inside of these methods will then always refer to the subclass,

18
00:01:23,410 --> 00:01:24,730
so that will work fine,

19
00:01:24,730 --> 00:01:27,490
this element will be set there when detach is called,

20
00:01:27,490 --> 00:01:33,550
same for when this method is called. Only adjustment here is of course that we need to append this element

21
00:01:33,970 --> 00:01:36,660
because that's the element we're setting here,

22
00:01:36,670 --> 00:01:42,040
that is our tooltip element and therefore with that, we only have to do one more thing, we have to call

23
00:01:42,040 --> 00:01:46,300
super in here to call the base class in our own constructor,

24
00:01:46,300 --> 00:01:50,770
if you added your own constructor and you're extending another class, you need to call super in your

25
00:01:50,770 --> 00:01:52,150
own constructor

26
00:01:52,150 --> 00:01:57,970
and once you did that, we can reload and click on more info and this should still work as before,

27
00:01:58,150 --> 00:02:03,870
also the prevention of opening multiple tooltips works fine and therefore, this now works

28
00:02:03,880 --> 00:02:10,060
and we have more generic class. Now the generic class right now isn't doing too many useful things arguably,

29
00:02:10,450 --> 00:02:11,980
so we can at least improve this a little bit,

30
00:02:11,980 --> 00:02:18,340
for example we can add an if check here and check if this element is defined and only try to remove

31
00:02:18,340 --> 00:02:22,770
it in that case because otherwise there is nothing to remove, just an extra sanity check

32
00:02:22,780 --> 00:02:28,490
you could say and also be a bit more flexible regarding how elements are attached.

33
00:02:29,230 --> 00:02:36,780
I'll add a constructor here to this component and there, I expect to get my host element ID let's say

34
00:02:37,300 --> 00:02:45,480
and also maybe an insert before argument and set this to false as a default though

35
00:02:45,490 --> 00:02:49,660
and then here, check if host element ID is set,

36
00:02:49,660 --> 00:02:58,620
so if this is passed in or if it is null or any other falsy value then set this host element equal

37
00:02:58,620 --> 00:03:00,970
to document get element by ID,

38
00:03:01,050 --> 00:03:05,810
so for the case that host element ID is not falsy, if it is falsy

39
00:03:05,820 --> 00:03:11,850
however in the else case, I'll add a new property host element as well but then I'll set it to document

40
00:03:11,850 --> 00:03:12,400
body

41
00:03:12,600 --> 00:03:19,350
so that we say we could also pass in any other element, any other identifier ID for an element in

42
00:03:19,350 --> 00:03:25,350
the DOM but if we don't pass in the host element ID, we just fall back to using the document body to

43
00:03:25,350 --> 00:03:31,440
then append this element which is getting created, which is getting attached and detached. And in addition,

44
00:03:31,440 --> 00:03:39,900
insert before can be used, we can store this also in a property, so store insert before in this insert before

45
00:03:40,300 --> 00:03:46,050
and now we can use this in attach to not always use document body append but instead use this

46
00:03:46,050 --> 00:03:54,240
host element to begin with and then use insert adjacent element actually and check if this insert before

47
00:03:54,240 --> 00:03:57,630
is true, if it is, use before begin here,

48
00:03:57,630 --> 00:04:01,050
otherwise use before end for example

49
00:04:01,260 --> 00:04:05,640
and of course you could also be more flexible regarding what you accept here as an argument,

50
00:04:05,640 --> 00:04:12,100
I'm happy with these two options that I can use here and then add the element there.

51
00:04:12,130 --> 00:04:18,540
So now we have a more flexible attach method here which makes our component more generic and useful

52
00:04:18,570 --> 00:04:23,280
in a couple of use cases, not just in the use case where we want to append something at the end of our

53
00:04:23,280 --> 00:04:28,830
document body because now we can use any element and there in that element, we can add it at the beginning

54
00:04:29,040 --> 00:04:29,670
or the end,

55
00:04:29,790 --> 00:04:31,980
so that's a lot of control we added here.

56
00:04:32,010 --> 00:04:37,540
Now we just have to adjust our tooltip, there I called super and super now expects arguments.

57
00:04:37,560 --> 00:04:42,050
Now if we pass in null here for a host element ID, we'll fall back to document body,

58
00:04:42,540 --> 00:04:48,720
if we pass in null or nothing for insert before, we'll stick to false which means it will be added to

59
00:04:48,720 --> 00:04:49,560
the end

60
00:04:49,620 --> 00:04:53,790
and since this is exactly what I want, I want to add it in the document body and I want to add it at the

61
00:04:53,790 --> 00:04:59,160
end, we can indeed call super like this without any values because I'm fine with the defaults which are

62
00:04:59,160 --> 00:05:00,750
then getting assumed.

63
00:05:00,780 --> 00:05:03,240
So if I now reload here, we click more info again,

64
00:05:03,300 --> 00:05:08,080
it works like before but the cool thing is we could now also add some ID,

65
00:05:08,130 --> 00:05:15,330
for example here add active projects and now you will see if I save that and I reload, now it would be

66
00:05:15,330 --> 00:05:19,410
added here at the bottom of the active projects container.

67
00:05:19,590 --> 00:05:23,220
Of course that's not what I want here but it shows that our generic method works.

68
00:05:23,220 --> 00:05:29,520
In addition if I add true here as a second argument, we would add it at the beginning so if we now reload,

69
00:05:29,850 --> 00:05:33,980
it would be added here before our active projects container

70
00:05:34,320 --> 00:05:41,130
and actually that shows me that it's not entirely what I want, I should change this here to after begin

71
00:05:41,670 --> 00:05:45,540
because I want to add it at the beginning of the container, not outside of that container,

72
00:05:45,540 --> 00:05:47,820
so not before that container but inside of the container

73
00:05:47,850 --> 00:05:51,580
but there, right at the start and that is what after begin will do.

74
00:05:51,660 --> 00:05:54,620
So with that, let's reload and retry,

75
00:05:54,690 --> 00:05:59,130
now this is getting added inside of this active projects container, at the very beginning but inside.

76
00:05:59,790 --> 00:06:01,530
Now again, this is not what I want here,

77
00:06:01,530 --> 00:06:07,200
so I will remove both from my super call but for testing this, it was useful and now we have this more

78
00:06:07,200 --> 00:06:11,250
generic component which also allowed us to practice inheritance again.