Dark Modal Exercise

[00:00:00]
>> All right, time for a quick win, I think. We all need a few more W's in the day, right? So our mission, should we choose to accept it, is to have a dialogue. I don't mean just a chat, although we will be chatting, of course, with each other about dialogues.

[00:00:23]
But dialogues in the web [LAUGH] world, in HTML, are a way that we can essentially create kind of sub [LAUGH] not windows, but sub interfaces, not in the object oriented sense, but in the user interface sense. Which, for example, we've all seen a million times, the little thing pops up, the rest of the background is blurred, and we have to say no, thank you, I don't wanna subscribe to your newsletter, or whatever it is, right?

[00:00:56]
We've been there, and now we make it our mission to do that so that other people can have that experience. No, but dialogues are very useful for a lot of things. And they come in two varieties, modal and non-modal. If there is a fancier word for non-modal, please let me know, cuz I don't know.

[00:01:15]
But [LAUGH] so a modal dialog is that kind that I just mentioned, where nothing else on the page works until you have dismissed the dialogue, yeah?
>> A nodal, if you will.
>> A nodal?
>> [LAUGH]
>> Amodal, [LAUGH] I don't know, like it, exactly. A nodal, okay, [LAUGH] love it.

[00:01:43]
So we are given in JavaScript a nice interface for talking to dialogue elements. So HTML dialogue element would be the type of HTML element that we get back from, let's say, running this query selector that's looking for the dialogue tag. And pretend, in our page, we just have that one.

[00:02:08]
And if we call.show, what we get is a non-modal dialogue, which means you can still do all the other stuff on the page that you wanna do, but this thing is sort of popped up. So maybe like a little, these days, it seems to be all AI chat boxes or whatever.

[00:02:25]
[LAUGH] But modals, again, where we say, okay, right now you're in this land of this little dialogue where we need you to make some decisions or do something. Or maybe you just really wanna read the privacy policy or whatever it is, right? So we have two methods on dialog elements.

[00:02:47]
There's a show for the amodal nodals, the non-modal [LAUGH] dialogs, and a show modal for, shockingly, the modal dialogs. All right, so, this is essentially [LAUGH] what users experience when we've called showModal and your user wants to click on something. The page is Marge Simpson saying, but we've opened up a dialogue, you can't click on the other stuff.

[00:03:20]
So this is just a note about different ways to interact with dialogues. But in this case, we're gonna be focusing on modals. And our mission, should we choose to accept it, is to use our newfound classy JavaScript to basically take that dark mode toggle that we built earlier and turn it into a modal dialogue.

[00:03:47]
So a settings panel, something like that, which then we can open as a modal and change our dark mode there. And the nice thing about dialog element is, if you have a form inside of your dialog, then when the form is submitted, or you can also call.close on the dialog element.

[00:04:12]
But even automatically, even without in your JavaScript calling .close, which is sort of the counterpart to .show or showModal. Once this form is submitted, so once someone clicks the submit button, the browser will close the dialog for you. So thanks, browser, for all you do for us. All right, so we're gonna start essentially with where we left off with our dark mode, and we are going to turn it into dark-modal [LAUGH].

[00:04:52]
So this is where we left off. We have this amazing feat of engineering where we now are able to look at websites in dark mode. And is it just me, or every app, when they're like, we have dark mode now, it gets so excited. Google Maps, just today, was like, I have dark mode.

[00:05:15]
So we should be excited too cuz from the get-go, we've had dark mode. We've had it before it was cool. Well, not really, but [LAUGH]. So, anyway, we're gonna start here, and you can start from your own finished version. There's also, you can find this darkmodal/index.html file, and download that.

[00:05:44]
And if you look at this, well, if you run it, you'll notice you get some errors in your console. Making sure you haven't disabled the [LAUGH] error logging. And these are some errors complaining about, the form constructor's not implemented, the modal constructor's not implemented, and the render method is not implemented.

[00:06:04]
So what's going on here is I've kind of started us out with, that's not helpful. So this is essentially the same as our finished dark mode, /index.html. We've got basically the same HTML and the same theme.js script. I've called it theme.js for reasons that will become clearer later.

[00:06:34]
[LAUGH] And we've got that toggled, all set up, and all taken care of here, same as before, that's not new. However, now I've sort of kicked us off with a little helper, but feel free to re-implement this on your own from your finished dark mode file. I'm setting us up with a couple of classes.

[00:06:55]
So we're gonna want a Form class. We've got a Form class that essentially is going to construct for us the type of dialog form that we would have within our dialog element, which then can be submitted to close the dialog, and so on and so forth. And it can contain whatever controls we want the user to have.

[00:07:21]
So whatever inputs, like our input checkbox. So this form class is essentially gonna create objects that represent this HTML form. And do the interaction with the DOM that we need to do, like creating a form element, maybe giving it a heading, creating a close button, etc. And the constructor should accept a type for the form, a title, which is just gonna be in this heading, and an element with the contents, whatever else should be children of the form.

[00:07:57]
Your job is to implement that constructor to satisfy that API. And that class is gonna be instantiated by another class that we need to work on, which is the modal class. So let's read through this, and this is just to accelerate us a little bit, get us going a little bit.

[00:08:19]
We have a modal class that's similar to the form class is going to do the DOM stuff for us. But this is gonna be responsible for actually creating the dialogue and for making sure that we show it in the modal version. So started us off with a couple of properties that we're gonna have, like we're gonna have a new button element.

[00:08:44]
We're gonna have a dialogue element. And the constructor is going to accept a name for this modal, a parent element that's going to be where it's kind of contained, and a content element that's gonna be whatever is inside of it. And so, in the constructor, we have some work to do.

[00:09:09]
But what I've already set up for you is an internal private method that is using this Form class, which again, needs to be implemented, to essentially create the Form element with whatever contents you passed in to the constructor of the modal. So this is all just in the interest of jumpstarting, but I do recommend after we do this, if you'd like to on your own, start from scratch, start with dark mode/index.html.

[00:09:40]
And try to elaborate your own interface, when I say interface, your own sort of API for dealing with these modal and form objects, or create maybe different objects. It is essentially, now we're in the world of just high-level, how do we want users to be able to program with this nice developer API that we're exposing through our modal objects?

[00:10:05]
And so do feel free to redo this with your own ideas, but just to get us going and to make the win a little quicker. We're also going to have a render method on the modal, which is going to actually attach all these little elements that we've been creating that are all nicely encapsulated in these objects to the DOM and put them actually into the page.

[00:10:32]
So the idea is that, pretend we've gotten this edict from on high from our boss that we need the modal object to work like this. There's gonna be some parent. In this case, it's gonna be the nav of our page, just from how it was set up before.

[00:10:51]
There's gonna be some content. And in this case, we're grabbing the dark-mode [LAUGH] label, which is gonna be our content. But you know what, rename things, do whatever you need to do. But the idea is, whatever, we have some content. In this case, it's gonna be the toggle that we already set up.

[00:11:10]
And, you know what? Is this where? No, okay. What's going on? Then, importantly, we want our users to be able to call a new modal, pass in whatever name they want, settings in this case, pass in whatever parent where they want this dialogue to live within. And pass in whatever content they want to be inside of the form, and be able to render that modal with two lines of code, right?

[00:11:42]
So we wanna do all of the work for our users, other devs, perhaps, or ourselves in the future, or our teammate that works on a different part of the project or what have you. We want to make their life a super easy, lovely situation by giving them these nice form and modal objects that they can use to not have to worry about all of this appending children, etc.

[00:12:12]
Okay, so this is the sort of starting point. Have at it, try to implement these missing constructors and methods, and we will regroup and see what we have found.