1 00:00:02,110 --> 00:00:04,870 How can we show some feedback to our users? 2 00:00:04,870 --> 00:00:10,930 Well if you go into the root index.html file here, you'll see that there I prepared two templates - one 3 00:00:10,930 --> 00:00:16,570 for a modal in general with a backdrop we can display and with a modal container and then one for the 4 00:00:16,570 --> 00:00:18,960 content of such a modal we could display 5 00:00:19,060 --> 00:00:24,040 and I'm splitting this up so that theoretically, we could display a modal with any content to have the 6 00:00:24,040 --> 00:00:27,790 general container and look and then insert different pieces of content. 7 00:00:27,790 --> 00:00:33,580 Now here I only need one specific piece of content, I want to show a modal so an overlay on the screen 8 00:00:33,850 --> 00:00:35,290 which shows a loading spinner 9 00:00:35,290 --> 00:00:40,240 and this will display a loading spinner because I also give you the extra CSS code which you'll 10 00:00:40,240 --> 00:00:46,480 find in here in app.js to generate such a loading spinner, all with CSS. 11 00:00:46,480 --> 00:00:53,950 So this is something we can utilize here and for that, I want to be able to display a modal, so such an overlay 12 00:00:54,240 --> 00:01:00,160 and I'll do this in a new class, I'll even do it in a new file, in a new subfolder in my source folder, 13 00:01:00,250 --> 00:01:03,040 I'll name the folder UI for user interface, 14 00:01:03,040 --> 00:01:07,220 so these should be some general user interface components if you want to call them like this 15 00:01:07,330 --> 00:01:10,020 and in there I want to add a modal.js file. 16 00:01:10,070 --> 00:01:14,860 Now this is a Javascript file which should be responsible for displaying a modal and rendering content 17 00:01:14,950 --> 00:01:15,610 in there. 18 00:01:15,610 --> 00:01:20,710 Now of course there are different ways of creating such a modal but here, I will create a class, modal 19 00:01:21,000 --> 00:01:27,100 and in there, I want to have a couple of methods that help us control this modal, to be precise there should 20 00:01:27,100 --> 00:01:34,210 be two methods, a show method and a hide method and a modal is simply an overlay on the screen and with 21 00:01:34,330 --> 00:01:39,270 show, I want to be able to show such an overlay, with hide I want to be able to hide it. 22 00:01:40,350 --> 00:01:47,460 Now I also need a constructor and in there, I want to be able to get the information, which content should 23 00:01:47,460 --> 00:01:52,620 be shown and then we can create different instances of this modal class with different content we're 24 00:01:52,620 --> 00:01:59,460 passing into the constructor so that we always will use the same frame here, the same backdrop but we 25 00:01:59,460 --> 00:02:05,400 can pass in different content. Now for that in modal.js here in the constructor, we could expect a 26 00:02:05,400 --> 00:02:08,550 content ID argument here for example, 27 00:02:08,580 --> 00:02:15,840 so the ID of the template or of the HTML tag that holds our content and then in here, in the constructor, 28 00:02:16,260 --> 00:02:18,480 I want to create two new properties, 29 00:02:18,780 --> 00:02:21,890 a content template element, 30 00:02:21,990 --> 00:02:27,630 again this is a property because we store it with the help of the this keyword where I get my element 31 00:02:27,630 --> 00:02:30,300 by ID, the content ID. 32 00:02:30,390 --> 00:02:36,060 So this will give me access to the template element in the DOM that has this ID, 33 00:02:36,060 --> 00:02:40,920 so for example if we want to show the loading spinner, the template ID would be this ID, we pass 34 00:02:40,920 --> 00:02:45,450 this to the modal class and we would get access to this template DOM element. 35 00:02:45,450 --> 00:02:47,130 Now we also need to modal itself, 36 00:02:47,130 --> 00:02:49,400 so the backdrop and the container and for that, 37 00:02:49,410 --> 00:02:54,260 I'll get my modal template element with document get element by ID 38 00:02:54,420 --> 00:03:01,010 and there I want to get this ID, modal template is the ID and that's therefore the ID 39 00:03:01,080 --> 00:03:06,570 I will fetch here and of course my mistake, content ID here should not be a string, I instead want to use 40 00:03:06,570 --> 00:03:09,030 this argument here which in turn should hold a string 41 00:03:09,030 --> 00:03:12,510 but I want to use the argument here so that this is really dynamic. 42 00:03:12,630 --> 00:03:16,380 So with that we get access to these elements we need to render the modal, 43 00:03:16,410 --> 00:03:22,050 now when show is getting called, I want to use these elements to bring them on the screen and show 44 00:03:22,050 --> 00:03:23,140 them there. 45 00:03:23,220 --> 00:03:31,350 Now for that, we can use our template tag here and before we do so, let's search for MDN template 46 00:03:31,380 --> 00:03:36,570 to find the documentation on this template tag and there if we scroll down to the bottom, we see it's actually 47 00:03:36,570 --> 00:03:38,440 not supported in Internet Explorer, 48 00:03:38,520 --> 00:03:41,760 so there this might not work. Hence there, 49 00:03:41,760 --> 00:03:47,880 I actually want to be able to have a little fallback or at least something on the screen, so we 50 00:03:47,880 --> 00:03:49,780 can't use our template there and 51 00:03:49,840 --> 00:03:54,630 therefore you actually might want to implement a bigger workaround around this issue, here 52 00:03:54,630 --> 00:04:02,490 I want to check if the template tag is available and if it's not, well then I want to do something which 53 00:04:02,490 --> 00:04:04,930 could replace this modal here. 54 00:04:05,070 --> 00:04:10,740 We can check if the template is available by checking if the content property is available in document 55 00:04:11,040 --> 00:04:14,850 create element template. 56 00:04:14,910 --> 00:04:17,650 Now this is a weird syntax, what am I doing here? 57 00:04:17,660 --> 00:04:23,380 Document create element creates a new DOM element and I create a template element. Now on Internet Explorer, 58 00:04:23,390 --> 00:04:28,220 this will fail because Internet Explorer doesn't know that, therefore in Internet Explorer this is basically 59 00:04:28,220 --> 00:04:35,630 undefined and with the in keyword, we can check if this object here on the right and every element, every 60 00:04:35,630 --> 00:04:39,560 DOM element is just an object as you learned, if it has this property 61 00:04:39,560 --> 00:04:44,570 and if this is undefined as it would be on Internet Explorer, then this here would of course not exist 62 00:04:44,600 --> 00:04:47,820 as a property and therefore this would yield false, 63 00:04:47,840 --> 00:04:49,770 so we would not make it into this if block. 64 00:04:50,270 --> 00:04:56,090 So if we don't support the template tag and this is simply a little trick for checking if we do, well 65 00:04:56,120 --> 00:04:58,080 then we make it into the else block 66 00:04:58,160 --> 00:05:05,230 and here you want to have some fallback code to do something else instead of showing this overlay here, 67 00:05:05,240 --> 00:05:09,280 you could for example show an alert. So you could show an alert 68 00:05:09,290 --> 00:05:17,000 and here you could get some fallback text here and then store this here, this fallback text is fallback 69 00:05:17,030 --> 00:05:19,690 text so that we store this in a property 70 00:05:19,760 --> 00:05:26,660 and here we could show our fallback text, this would be a very basic workaround but it would be a workaround 71 00:05:26,660 --> 00:05:32,000 where we at least show something to the user in case our template is not supported. 72 00:05:32,000 --> 00:05:36,950 Now depending on which kind of application you're building and what you plan on doing in the modal if 73 00:05:36,950 --> 00:05:41,660 it's more than just showing a loading spinner, then you might need a bigger workaround, you might need 74 00:05:41,660 --> 00:05:46,280 to be more flexible and build your application in a totally different way. 75 00:05:46,280 --> 00:05:51,440 Here, this fallback text should be all we need and therefore this is the approach I'll go for if the 76 00:05:51,440 --> 00:05:55,400 template tag is not supported which we check with this approach. 77 00:05:55,400 --> 00:05:59,330 If we do make it into this if block, we know the template tag is available, 78 00:05:59,330 --> 00:06:06,680 so selecting the template tag here in the DOM, here in the DOM will work and we can use that to render 79 00:06:06,680 --> 00:06:14,180 our modal, our overlay onto the screen. For that I can first of all get my modal content by calling document 80 00:06:14,480 --> 00:06:15,720 import node, 81 00:06:15,800 --> 00:06:20,090 this is how you use the content of a template and create a node based on it 82 00:06:20,090 --> 00:06:24,000 and here I want to point at the modal template element, 83 00:06:24,020 --> 00:06:31,520 so for the modal and the backdrop itself and there, the content property which exists there and pass 84 00:06:31,520 --> 00:06:34,350 in true so that we make a deep clone in the end. 85 00:06:35,000 --> 00:06:41,600 So what this will do is this will give us access to these two divs here in the end and they are in the 86 00:06:41,600 --> 00:06:46,020 end stored in our modal content now, 87 00:06:46,070 --> 00:06:48,040 so not the content we want to display in there, 88 00:06:48,050 --> 00:06:49,790 maybe that's a bit deceiving, 89 00:06:49,790 --> 00:06:56,730 let's say name it modal elements instead. That's what we have access to here, 90 00:06:56,750 --> 00:07:01,390 it's one object which in the end gives us access to the backdrop div and the modal div. 91 00:07:01,460 --> 00:07:07,430 Now of course I need access to specifically the modal div or the backdrop div and for that, we can build 92 00:07:07,430 --> 00:07:09,210 up on modal elements there. 93 00:07:09,470 --> 00:07:14,030 So I can get my modal element here by using modal elements, 94 00:07:14,030 --> 00:07:22,680 so this constant we just created here and there, we can use query selector and then .modal to get 95 00:07:22,680 --> 00:07:27,960 access to the element with the class, the CSS class modal which is this div here 96 00:07:27,960 --> 00:07:31,240 and for the backdrop we can do the same with the backdrop class. 97 00:07:31,380 --> 00:07:39,170 So here we can duplicate this and have our backdrop element here with the backdrop class we're selecting, 98 00:07:39,180 --> 00:07:46,780 so now we got access to the two elements that we need as a frame and as a background for our modal overlay. 99 00:07:46,830 --> 00:07:50,610 Now we just need to get access to the actual content we want to display in there, 100 00:07:50,640 --> 00:07:57,000 so here I'll create a new content now, content element and we can get this with document import node 101 00:07:57,600 --> 00:08:03,840 and then this content template element.content and also create a true deep clone here with true 102 00:08:03,840 --> 00:08:04,940 as a second argument 103 00:08:05,040 --> 00:08:11,250 and this gives us access to the actual content we want to display based on the content ID we got here 104 00:08:11,250 --> 00:08:12,930 in our constructor. 105 00:08:12,930 --> 00:08:18,540 So now we got all the pieces together, now we just need to add it to the page. 106 00:08:18,590 --> 00:08:28,430 So first of all on the modal element itself, I will append or append child if you want to have best cross 107 00:08:28,430 --> 00:08:29,810 browser support 108 00:08:30,170 --> 00:08:38,020 my content element and then we need to add the modal element and the backdrop element into our DOM, for 109 00:08:38,020 --> 00:08:44,110 that we can use document body and use insert adjacent element which you learned about and then after 110 00:08:44,110 --> 00:08:50,870 begin to basically add it inside of the body but right at the beginning of the body, the modal 111 00:08:50,870 --> 00:08:54,620 element and then repeat that for the backdrop element 112 00:08:54,740 --> 00:08:58,640 and now when we call show here on that modal, we should be able to show it. 113 00:08:59,690 --> 00:09:03,570 Let's test this and let's go back to share place, the SharePlace.js 114 00:09:03,670 --> 00:09:10,260 file and in there, we now need access to the modal which we create, to the modal class here which we create 115 00:09:10,270 --> 00:09:13,580 in modal.js. Well actually, to have that access, 116 00:09:13,580 --> 00:09:15,480 we should export it here first, 117 00:09:15,500 --> 00:09:21,710 so in modal.js export the modal class and in SharePlace.js, we can now import it. 118 00:09:21,710 --> 00:09:29,930 So here we can import something from ./ui/modal, without .js, webpack will add that 119 00:09:29,930 --> 00:09:31,810 for us, so just like this 120 00:09:31,970 --> 00:09:37,610 and now here, the something I import is the modal class, so we're using a named import here because we have 121 00:09:37,610 --> 00:09:40,820 a named export here in the modal.js file. 122 00:09:41,030 --> 00:09:45,980 So now we import that here into place finder and we're next to the place finder class I should say, 123 00:09:45,980 --> 00:09:51,770 therefore we can use it in the place finder class here when we actually start getting the user location, 124 00:09:52,340 --> 00:09:53,030 at this point 125 00:09:53,030 --> 00:09:58,340 I want to create the modal and I want to get rid of it when we were successful or when we failed, even 126 00:09:58,340 --> 00:09:59,380 if we failed 127 00:09:59,420 --> 00:10:04,850 I want to get rid of the modal because we're done trying to get the user location at least. 128 00:10:04,850 --> 00:10:10,740 So here I get my modal with new modal and now there we need to pass in two arguments, 129 00:10:10,800 --> 00:10:17,040 the first argument is the ID of our content which is loading modal/content, so let's copy that 130 00:10:17,040 --> 00:10:20,010 string here and pass this as a first argument, 131 00:10:20,010 --> 00:10:25,740 second argument is the fallback text, loading location please wait 132 00:10:25,890 --> 00:10:30,650 and that would be the text for the alert we show if the template tag is not supported 133 00:10:30,960 --> 00:10:38,220 and then we can call modal show and now in success result, I want to call modal hide and this will 134 00:10:38,220 --> 00:10:43,620 of course only execute once this anonymous function executes which only happens once we got the user 135 00:10:43,620 --> 00:10:49,760 location or if we failed I'll of course do the same so that in this case, we also hide the modal. 136 00:10:49,980 --> 00:10:55,440 And with all of that, if we go back and we click on get current location, you should see that overlay 137 00:10:55,860 --> 00:11:02,130 and that should stay there until we get the user location but right now it's not getting hidden because 138 00:11:02,400 --> 00:11:06,510 at the moment in our modal, the hide method is not doing anything. 139 00:11:06,510 --> 00:11:08,340 So that will be the next thing we do 140 00:11:08,370 --> 00:11:14,070 and of course feel free to first try that on your own before we now implement this functionality together.