1 00:00:00,630 --> 00:00:06,360 OK, so we're going to look at another kind of notification so far, we have this one, which is kind 2 00:00:06,360 --> 00:00:12,600 of cool Nottie, and that's great for nonintrusive notifications that you want to get to your user. 3 00:00:12,600 --> 00:00:15,590 But sometimes you really need to get your user's attention. 4 00:00:16,110 --> 00:00:18,000 And we want to do a modal alert. 5 00:00:18,090 --> 00:00:25,860 Now, as you probably know, if we go over to get bootstrap and we look at documentation and we go to 6 00:00:25,860 --> 00:00:31,430 component's, it has a modem so we can actually use bootstraps Motal if we want to. 7 00:00:31,440 --> 00:00:32,370 And it's pretty straightforward. 8 00:00:32,370 --> 00:00:33,300 It looks like this. 9 00:00:33,510 --> 00:00:35,520 It can pop that up if you want to. 10 00:00:36,150 --> 00:00:41,880 The reason I'm not going to use it right now is because like pretty much everything else in bootstrap, 11 00:00:42,780 --> 00:00:48,960 all the interactive stuff anyway, it depends upon query and I'm not really a big fan of. 12 00:00:49,620 --> 00:00:50,490 This looks great. 13 00:00:50,490 --> 00:00:51,300 Don't get me wrong. 14 00:00:51,870 --> 00:00:53,610 And it's pretty easy to do. 15 00:00:53,970 --> 00:00:59,100 But we're going to use something else and we'll the one I want to use is called Sweedler. 16 00:00:59,100 --> 00:01:01,110 And Sweedler is really, really good. 17 00:01:01,440 --> 00:01:04,830 So we can look at this, for example, a very basic message. 18 00:01:05,010 --> 00:01:07,020 There is any fool can use a computer. 19 00:01:07,030 --> 00:01:09,570 That's true, but not entirely in my experience. 20 00:01:09,570 --> 00:01:10,740 But that's neither here nor there. 21 00:01:11,250 --> 00:01:15,310 You can put a title in an icon and it's really pretty easy to use. 22 00:01:15,750 --> 00:01:17,720 So let's install it to start with. 23 00:01:17,910 --> 00:01:24,920 So we'll go to installation and we will grab the source from a CTM and we will put that. 24 00:01:24,930 --> 00:01:28,770 This one is a script, so I'll put that at the bottom of my page. 25 00:01:28,770 --> 00:01:32,430 So go to my I'm doing everything on reservations each HTML. 26 00:01:33,030 --> 00:01:36,900 And when we cut this up into goaland templates, we'll make it a little more organized. 27 00:01:37,290 --> 00:01:38,620 But I'm going to save that there. 28 00:01:38,670 --> 00:01:39,750 And how do we use this thing? 29 00:01:39,760 --> 00:01:43,070 So let's go back to the documentation and use it. 30 00:01:43,260 --> 00:01:44,450 So we put that in there. 31 00:01:44,460 --> 00:01:44,880 Good. 32 00:01:44,880 --> 00:01:48,090 We put that in there and let's call a sweet alert. 33 00:01:48,120 --> 00:01:49,680 So I'll take this. 34 00:01:49,680 --> 00:01:56,490 And what I'll do is I'm going to reprogram my button over here, which currently shows a nodi notification, 35 00:01:57,150 --> 00:02:00,180 and I will instead have that fire, the Sweedler. 36 00:02:00,180 --> 00:02:05,580 So that's right here in my JavaScript, where I'm adding my listener to the element with the idea of 37 00:02:05,580 --> 00:02:08,340 color button when it's clicked, do whatever is in here. 38 00:02:08,340 --> 00:02:13,260 So accommodate Sweedler, the notify and I'll put in Sweedler and save this. 39 00:02:13,260 --> 00:02:16,410 Go back, reload my page in the mail, look at it in more detail. 40 00:02:16,740 --> 00:02:19,710 Let's just make sure it works and it does error. 41 00:02:19,710 --> 00:02:20,840 Do you want to continue? 42 00:02:20,850 --> 00:02:21,300 Cool. 43 00:02:21,880 --> 00:02:22,410 All right. 44 00:02:22,530 --> 00:02:28,620 So the way that this actually works is it's calling swoll and then it's calling a method on swoll. 45 00:02:28,620 --> 00:02:33,150 Small must stand for Sweetland and then it fires in some parameters. 46 00:02:33,150 --> 00:02:33,990 And that's pretty good. 47 00:02:33,990 --> 00:02:35,610 I mean, that's actually pretty useful. 48 00:02:36,030 --> 00:02:47,220 And I could if I wanted to come down here and add a function saying function, notify Motal and we'll 49 00:02:47,340 --> 00:02:48,810 add some arguments there in a moment. 50 00:02:48,810 --> 00:02:51,480 So let's go up here and copy this and see what we should put in. 51 00:02:52,140 --> 00:02:56,700 So I'll copy that, paste it down here and say swoll file fire. 52 00:02:56,700 --> 00:02:59,190 So it has a title so I could put in title. 53 00:02:59,760 --> 00:03:01,680 It has some text I couldn't text. 54 00:03:02,070 --> 00:03:05,610 It has an icon icon and it has a confirmation button. 55 00:03:07,510 --> 00:03:10,170 OK, now let's get a look at the documentation. 56 00:03:10,170 --> 00:03:14,880 Well, of course, to make this work, I would have to go title title, which matches my parameter up 57 00:03:14,880 --> 00:03:26,820 there, text text which matches my parameter here and icon, icon, confirmation button confirmation 58 00:03:27,090 --> 00:03:28,290 button text. 59 00:03:29,880 --> 00:03:30,780 And those don't match. 60 00:03:30,780 --> 00:03:34,830 So let's make the match and that will work. 61 00:03:34,830 --> 00:03:36,180 There's no question that I could do that. 62 00:03:36,180 --> 00:03:45,540 So I come up here and delete this and just call, notify Moodle and pass in a title. 63 00:03:45,540 --> 00:03:48,150 So I'll put it in title and text. 64 00:03:48,990 --> 00:03:49,620 I'll make it. 65 00:03:50,460 --> 00:03:54,510 Hello world italicized. 66 00:03:55,170 --> 00:03:57,090 Just because I can, I can. 67 00:03:57,720 --> 00:04:00,690 I don't know what my icons are, so let's see what my icons are. 68 00:04:01,260 --> 00:04:07,470 Back to my documentation for sweet alert and look for icons. 69 00:04:07,830 --> 00:04:09,510 Success, error, warning in info. 70 00:04:09,510 --> 00:04:10,680 Let's make it a success. 71 00:04:14,390 --> 00:04:21,710 And confirmation button, text my text for the button, doesn't matter what I put in there, I'm just 72 00:04:21,710 --> 00:04:22,280 testing this. 73 00:04:22,310 --> 00:04:23,510 I don't want to duplicate that. 74 00:04:23,960 --> 00:04:25,130 Let's save this. 75 00:04:25,490 --> 00:04:28,070 Go back and preview it and see how it works. 76 00:04:31,100 --> 00:04:38,780 OK, so everything seemed to work except this part, which says ETM Hello, World M, I thought when 77 00:04:38,780 --> 00:04:44,020 I looked at the documentation that you could put some HTML in there. 78 00:04:46,220 --> 00:04:47,690 So why didn't that work? 79 00:04:49,310 --> 00:04:56,900 You are because rather than text, it should be HTML, so I can make this HTML save that go back, I 80 00:04:56,900 --> 00:05:03,140 should be able to reload this and that should be italicize this time it's the wrong button and there 81 00:05:03,140 --> 00:05:03,440 it is. 82 00:05:03,470 --> 00:05:04,800 OK, so that worked pretty well. 83 00:05:04,820 --> 00:05:06,900 I really like the animation of the checkmark. 84 00:05:06,920 --> 00:05:07,740 That's a nice feature. 85 00:05:08,150 --> 00:05:10,160 So this is clearly going to do what I want. 86 00:05:10,160 --> 00:05:11,990 But let's look at this in a little more detail. 87 00:05:12,650 --> 00:05:14,900 What we can do here are all sorts of things. 88 00:05:14,900 --> 00:05:16,310 We can have the basic message. 89 00:05:16,940 --> 00:05:18,710 We can have one with some text under it. 90 00:05:19,310 --> 00:05:26,750 We can have a model with a footer and it gets more complex, long content inside so we can scroll all 91 00:05:26,750 --> 00:05:27,150 of that. 92 00:05:27,170 --> 00:05:29,090 OK, that's so, so far, so good. 93 00:05:30,380 --> 00:05:34,880 When we get down here, a little bit more custom buttons with Ariah labels, we can do that. 94 00:05:35,270 --> 00:05:36,920 A dialogue with three buttons. 95 00:05:36,920 --> 00:05:37,790 We can do that. 96 00:05:38,240 --> 00:05:40,340 We can have a custom position dialog. 97 00:05:40,670 --> 00:05:43,370 We can have a custom animated dialogue. 98 00:05:43,580 --> 00:05:45,200 There's a lot of functionality here. 99 00:05:45,470 --> 00:05:46,880 A confirmed dialogue with. 100 00:05:46,880 --> 00:05:47,210 Yes. 101 00:05:47,360 --> 00:05:54,080 So there's a here we can we can also even change the styling of the buttons. 102 00:05:54,080 --> 00:05:55,000 Pretty straightforward. 103 00:05:55,700 --> 00:06:01,670 Let's go down to Ajax request example. 104 00:06:01,820 --> 00:06:02,660 What is Ajax? 105 00:06:02,660 --> 00:06:07,820 Ajax stands for asynchronous JavaScript and XML that nobody uses XML anymore. 106 00:06:07,820 --> 00:06:11,080 We use Jason, but we still call it Ajax because it was used for a long time. 107 00:06:11,570 --> 00:06:19,130 This allows me if I click on this, submit my GitHub username TESOL to look up and it finds my picture. 108 00:06:19,370 --> 00:06:22,550 So clearly we can do way more with something like this. 109 00:06:22,550 --> 00:06:25,550 I mean, even just the fact that I can type something in is kind of cool. 110 00:06:26,750 --> 00:06:33,710 I can chain modals so I can say a or whatever, something else, something else. 111 00:06:33,950 --> 00:06:40,850 So clearly there's a lot more I can do with this than I can with just a standard dialog box, even the 112 00:06:40,850 --> 00:06:41,580 bootstrap one. 113 00:06:42,110 --> 00:06:47,420 The problem is, if I want to do that, all I'm doing here is calling something Hello world. 114 00:06:47,660 --> 00:06:52,310 What if I want to write JavaScript that allows me to do all sorts of things? 115 00:06:52,310 --> 00:07:00,850 Well, I can do that just by copying and pasting examples from the GitHub, the documentation for a 116 00:07:00,860 --> 00:07:01,490 sweet alert. 117 00:07:01,910 --> 00:07:05,480 But it would be more useful if I could actually do what I did with With Nottie. 118 00:07:05,780 --> 00:07:08,060 Just simplify it with a simple command. 119 00:07:08,300 --> 00:07:13,730 So what I could do, I suppose, is write one function for notification, one function for a prompt 120 00:07:13,730 --> 00:07:19,610 input, one function for an Ajax request, one function to run some custom javascript of all these different 121 00:07:19,610 --> 00:07:20,120 functions. 122 00:07:20,240 --> 00:07:24,740 And every time I want to use them, I'm going to be writing, as you can see in the examples here, 123 00:07:25,640 --> 00:07:28,910 some pretty long scripts. 124 00:07:29,420 --> 00:07:31,190 That seems like a lot of work. 125 00:07:31,460 --> 00:07:32,900 There's got to be a better way to do this. 126 00:07:33,050 --> 00:07:37,760 Well, what we're going to do is we're going to actually write not in this lecture, but in the next 127 00:07:37,760 --> 00:07:38,210 lecture. 128 00:07:38,810 --> 00:07:44,420 We're going to take one of the functions available to us in JavaScript called modules. 129 00:07:44,420 --> 00:07:50,570 And we will write a JavaScript module which allows us to simplify calling Sweedler. 130 00:07:51,140 --> 00:07:51,590 So sweet. 131 00:07:51,590 --> 00:07:54,950 Alert is pretty, pretty impressive, actually. 132 00:07:54,950 --> 00:07:56,000 It even has Tostes. 133 00:07:56,000 --> 00:07:57,170 I don't know if I showed you those. 134 00:07:57,560 --> 00:07:58,640 Let's look for toast. 135 00:07:59,630 --> 00:08:00,590 There's no example here. 136 00:08:00,590 --> 00:08:00,980 There it is. 137 00:08:00,980 --> 00:08:01,870 Is just an example. 138 00:08:02,150 --> 00:08:02,660 Yes. 139 00:08:02,660 --> 00:08:06,950 See, it puts the message up here, a little message that pops up in a corner and I can specify what 140 00:08:06,950 --> 00:08:12,170 corner we're going to write a module that allows us to simplify our calls to Sweetland. 141 00:08:13,100 --> 00:08:18,680 So we'll do that in the next lecture, because I want to keep this one some fairly complex concepts 142 00:08:18,680 --> 00:08:20,240 I'll be throwing at you for the next little bit. 143 00:08:20,630 --> 00:08:22,400 So I'll keep the lectures relatively short. 144 00:08:22,880 --> 00:08:28,340 In the next lecture will go through what a JavaScript module is and how we can write one and we'll do 145 00:08:28,340 --> 00:08:31,160 it using suite alert for our functionality. 146 00:08:31,700 --> 00:08:31,970 All right. 147 00:08:31,970 --> 00:08:33,020 That's enough for this time around. 148 00:08:33,020 --> 00:08:34,880 We'll pick it up in the next lecture.