1
00:00:02,170 --> 00:00:06,760
So let's copy the link into the clipboard and for that of course, we can use the clipboard API.

2
00:00:07,300 --> 00:00:10,990
I briefly touched on this already in earlier modules,

3
00:00:11,080 --> 00:00:15,640
If you search for MDN clipboard API, you can learn more about it and most importantly, you'll learn

4
00:00:15,640 --> 00:00:18,450
that browser support is mixed.

5
00:00:18,520 --> 00:00:23,830
So we should definitely check whether it is supported by the browser we're running our code in before

6
00:00:23,830 --> 00:00:25,760
we just blindly use it.

7
00:00:25,780 --> 00:00:30,880
So first of all, I'll comment in this add event listener code here in the constructor and point at a let's

8
00:00:30,880 --> 00:00:34,210
say share place handler method,

9
00:00:34,210 --> 00:00:36,670
this share place handler.

10
00:00:36,670 --> 00:00:43,470
Now we have to add such a method here, maybe directly below the constructor for that to work and in there,

11
00:00:43,480 --> 00:00:46,600
I now want to use the clipboard API of course.

12
00:00:46,600 --> 00:00:53,950
So I'll first of all check if navigator clipboard is not a thing, which means the browser does not support

13
00:00:53,950 --> 00:00:54,360
it

14
00:00:54,550 --> 00:00:57,160
in which case I want to return and not continue

15
00:00:57,160 --> 00:01:05,290
and instead as a fallback, just select the text, so that at least the user just has to press control

16
00:01:05,290 --> 00:01:11,950
c and doesn't have to select the full URL. Now to select the URL, I need access to the input, for

17
00:01:11,950 --> 00:01:17,620
that we can copy that code here where we get access to that input element, of course we could have also

18
00:01:17,620 --> 00:01:22,280
therefore initialized it here in the constructor and stored it in a property if you wanted to, here

19
00:01:22,280 --> 00:01:29,730
I'll just copy it and then in here in the if statement, set or call shared link input element select. We

20
00:01:29,740 --> 00:01:35,680
trigger the select event here which the end selects the entire content in there and marks it. Just to prove

21
00:01:35,710 --> 00:01:40,990
that it works, let's do it outside of this if check and let's then get the current location so that

22
00:01:40,990 --> 00:01:46,830
such a link gets generated and now if I click share place, you see this is selected. So now I just have to

23
00:01:46,830 --> 00:01:53,130
press control c which is better than nothing but of course if the browser supports it, I want to take

24
00:01:53,130 --> 00:01:58,170
that one step further and not just do this as a fallback in this if check but if we make it past this

25
00:01:58,170 --> 00:02:05,790
if check, we know we have support for the clipboard API, then I want to use navigator clipboard and call

26
00:02:05,850 --> 00:02:07,310
write text, this write

27
00:02:07,320 --> 00:02:13,680
text method on the clipboard object and write my text which is in that input into the clipboard of

28
00:02:13,680 --> 00:02:20,910
the user, so shared link input element.value, that's the link we generated and that's now stored in a

29
00:02:20,910 --> 00:02:23,580
clipboard of the user.

30
00:02:23,610 --> 00:02:29,740
Now this returns a promise and we could use async await, just to mix it up here, I will use then and catch

31
00:02:30,220 --> 00:02:32,710
and in the then block, we know that this succeeded,

32
00:02:32,800 --> 00:02:39,550
so here I'll just throw an alert, copied into clipboard so that we get some feedback

33
00:02:39,550 --> 00:02:45,030
and here we might get an error which I will just log here to the console,

34
00:02:45,130 --> 00:02:50,520
we could then as a fallback since it failed at least mark it again.

35
00:02:51,220 --> 00:02:58,630
So now with that, if we save all of that and I clear my clipboard by copying something else, you see now

36
00:02:58,630 --> 00:03:00,760
I got enabled in my clipboard,

37
00:03:00,800 --> 00:03:04,960
now if I click get current location, still got enabled there,

38
00:03:04,960 --> 00:03:10,090
if I now click share place, it's copied into clipboard and indeed, here it is.

39
00:03:10,090 --> 00:03:10,980
So now this worked,

40
00:03:10,990 --> 00:03:17,050
now I got this in my clipboard and now the only missing thing is that if I visit this page here, we load

41
00:03:17,050 --> 00:03:22,720
a new page as you can tell, we load that other index.html file in the my-place folder, here I want

42
00:03:22,720 --> 00:03:26,800
to show the address here in the header and render the map here,

43
00:03:26,800 --> 00:03:29,410
share a new place always takes us back to this page

44
00:03:29,470 --> 00:03:34,510
so I just want to make these two things work now and we'll be done for this little demo application

45
00:03:34,510 --> 00:03:34,720
here.