Dark Modal: Final Code

[00:00:00]
>> All right, so, as usual, there is a, hopefully, let's find out, [LAUGH] a finished version here that no longer is throwing errors, we'll look at it in a second, and this is essentially what we want. So we've now got a button that I can click that opens a modal dialog which in this stylesheet that is already included like kind of already makes everything blurry for us and the browser also knows that it's modal so other things are basically don't exist for all intents and purposes for us right now, and it has the content that we already had.

[00:00:40]
That, for example, the elements with the IDs that we had already set up our toggle to work with. And we have this beautiful H2 and this beautiful close button that we can use to close the modal. So let's look at the code because that's what we care about.

[00:01:01]
Okay, so yes, this the form looks pretty similar to what we just had. Let's skip ahead to the modal. Okay, so similarly we just set up some default values for these so that we can get going. We're doing a very similar we're like exposing some of these values like the name of the modal that might be something that the developer might wanna check later or change or what have you, so we'll expose it for them.

[00:01:24]
We're setting some attributes on the buttons like we did before, we're setting the content, no big difference from how we did this with the close button in the form. We're also setting references to the parent and to the content. Again, maybe the user is gonna wanna change this out later in response to something else that happens in the program.

[00:01:45]
And then what we're doing, other than this was already in here that I just sort of declared as the dictator of dark modal HTML file, that we're gonna call this setup form. But another thing that we could have private setup form. Another thing that we could have is like some other internally use private methods that help us work with the setup whatever listeners and things like that that we are gonna need.

[00:02:13]
It might be some other things that we need to do that we don't want the user to care about. We don't want the user to be able to like, mess with the inter Internals of this object. Again, we're in object-oriented land where we want to encapsulate as much as possible and only expose the very necessary things to users.

[00:02:30]
And so for example, we could declare a private method of register the open listener where we're gonna get this Open button, once we've got our dialogue set up, once it has some stuff in it, and it's ready to go, it's ready to be shown, once we've set up the form that's gonna be inside of the dialogue, now we're ready to attach a listener to this Open button.

[00:03:05]
We can grab a reference to dialog because, we'll get into that second. So what I'm doing is I'm grabbing the Open button, adding an event listener. We've done it a million times and what we wanna do in that event listener is to show the modal of this dialogue, sorry, of the dialogue that we care about in this instance.

[00:03:27]
[LAUGH] But why would we go to the trouble of reassigning a const dialogue here instead of using just directly referring to this.dialogue.showModal? Any ideas?
>> Would that return more than one if you had more than one other page? No.
>> I don't think it would return more than one.

[00:03:57]
Is it to do with scopes and what this mean means?
>> It's to avoid my least favorite word in JavaScript. And there are some differences between, for example, what this does inside of an arrow function, versus what this does inside of a function keyword function. And there's various other things to remember about what this is going to evaluate to in a different scope than the one that we're in when we're in our class declaration method land.

[00:04:28]
And so me personally, in any other scopes, the function body scope here, that is different because remember this is gonna be a listener handler that's gonna be just set over there until the click event fires. It gets detected by the browser, the browser pushes this call back to the queue, the event loop picks it up and puts it in a stack when it ready, and it's gonna call this dot dialogue.

[00:04:59]
And if I haven't been totally clear with myself and memorized all of the rules of what this evaluates to in different types of contexts and blah, blah, blah, I might not be doing what I think I'm doing. I might be getting undefined.showmodal. [LAUGH] It's not that sort of thing.

[00:05:18]
So, this is why we wanna be careful when we're doing things like declaring new functions within other scopes with the this keyword, and this is one of the reasons why I personally hate it. [LAUGH] But we're soldiering on. And so then what we want, and okay remember this register open listener this isn't an entire internal thing, it's private it has that hash.

[00:05:46]
And it will only be allowed by JavaScript to be called within these two curly braces of the model definition. So interestingly even if I extend model to a fancy modal, and I tried to access the parent classes, private method, register, open listener, now you can only do it within those two curly braces right there.

[00:06:17]
So fun with classes in JavaScript. Okay. So So the render method here is pretty simple. It's basically taking whatever the parent element is, earlier, Was basically given the content element that we want to have in this modal. But what this is doing, and again, there's multiple different ways to do this, is it's creating that open button and it's putting both of them in the parent.

[00:06:52]
An open button, so that you can open the modal and the non-open. So therefore, not yet visible dialogue form, dialogue and form Form that will then be opened when the button gets clicked. And so what we're doing is we're essentially blowing away the previous contents [LAUGH] of the parent and then we are appending first, so we're replacing the children with the open button, so that comes first, and then we're appending a child of the dialogue.

[00:07:25]
Now, there's a bunch of different ways you could do this. You don't have to be replacing children. You could be appending. You could be doing all kinds of different stuff. And again, this is a note to say, make sure that if you're exposing a public method like this, that it is something that your users can be calling, right?

[00:07:44]
So in this case, I as the user have to decide when it is time to render my modal content into the parent. We could also have automatically rendered the element at construction time, but maybe in this case, we want to give our users a little more control Or control.

[00:08:04]
And another reason that I include this little render method is that we're starting to get in the direction of a lot of the stuff that the bajillion frameworks out there that we know and love, kind of setup for us where we have tooling that hooks in to other layers of tooling that hooks into other layers of tooling where we have frameworks that can do things like manipulate the DOM for us based on content or declarative definitions in some cases, like React that we are making about what we want the DOM to look like.

[00:08:46]
We might have a framework that is creating these objects and render methods and calling them for us.So this is why I forced us to have a render [LAUGH] method here is just to start us thinking about the difference between proposed preparing all of the content, ready to go, and actually modifying the document that is being shown on the page.