Dark Modal: Form Constructor

[00:00:00]
>> All right, so why don't we put our heads together and work through a solution? And again, this is not the only way one could do it. This whole API, if you will, of this is how we expect our colleague across the way, who doesn't wanna have to worry about how to implement modal dialogues with JavaScript, let them just have this nice interface.

[00:00:30]
And again, we're just sort of pretending I've given you this edict that this is how the modal object should work, but it's the web, it's the free-for-all. So [LAUGH] if you want to redo this with a totally different way to break down these objects, these classes, if you wanna try doing it again without classes, with functional programming, what have you, have at it.

[00:00:54]
But right now, to practice our class syntax, we're gonna go for it, and we're gonna fill in the blanks here on our modal and form classes. So why don't we start with the form? Because that way, we can, at least, [LAUGH] help the modal get started. And what we want to do with the form is satisfy this interaction here, where we can call new form, pass in the type.

[00:01:27]
In this case, it's gonna be a dialog. That's what the modal wants to do. But maybe somebody else wants to create a different type of form, and give it a name and some content. And what we get back is something with an element that then is the actual HTML form element reference that I can use to later attach to the DOM.

[00:01:49]
So we've got a jumpstart here with some pre default valued properties for form objects. They're gonna have an element, which is created by this create element with a form. That's gonna be that form element that we can later use in the modal. And they'll have a little heading and a button to submit the form which closes the modal dialog.

[00:02:27]
Okay, so any ideas how we can proceed with this constructor?
>> Be element.appendChild closeButton.
>> Okay, now, since we're talking about the, we want this to happen on the actual instance of the object.
>> So we wanna throw it in the dom not create.
>> Well, so we've got, okay, so what happens up here is when I create, so I can declare a variable sort of instance, properties up here, and I can also assign default values to them.

[00:03:04]
So that, for example, in here, I don't have any, I'm not asking the user to, give me their own form element. I'm gonna make a form element for my user that's gonna be on the instance object as the element property. And so the way that we access properties of an instance within the constructor and within any other methods that we might be using is with my least favorite keyword in JavaScript.

[00:03:35]
>> This.
>> This, exactly, so what we can do is this element to access the new form element that is going to run here. And we're going to assign, sorry, we're going to pick up with your suggestion.
>> Append, yeah, I was, yeah, I was referring to-
>> Append.

[00:04:02]
>> Incorrectly, I forgot about this part, yes. But yeah, this.element.appendChild, this.closeButton.
>> This.closeButton, okay. So now, when this runs, this.closeButton is going to resolve to this new element that I created here. And then the constructor is going to find element which is gonna resolve to this new form element that's created here.

[00:04:35]
And these are HTML elements so they have the appendChild, thanks VS Code. [LAUGH] They have an appendChild method, so I can nest the button inside of the form, okay.
>> Shall we put [COUGH] the heading before that?
>> We could also put a heading in the form, and probably, it makes sense for the heading to be near the top of the form, so let's do that.

[00:05:00]
Would you like to walk me through it?
>> Sure, this.element.appendChild open current this.heading.
>> Okay, same vibe, same energy, [LAUGH] great. Okay, so we've got now a heading appended to the form, a button appended to the form, but we haven't really taken in any of the information that the user is passing in to this particular instance.

[00:05:35]
So what can we do about that? For example, I want whatever the user passes in as the type, maybe it'll be dialogue, to be the type attribute of the form. So now we have type coming in as an argument to our constructor. We can use that data to mess with our form element and set the type of this form, so that the browser knows this is a dialogue form inside of a dialog.

[00:06:15]
So when you submit, close the dialog. Okay, so to set an attribute [LAUGH], we have the handy method, set attribute. Okay, so we want to call set attribute on the-
>> Element.
>> Elements.
>> Element and again, we're gonna this.element.setAttribute [SOUND] attribute, type, and then the type string that the user passed in.

[00:06:53]
Cool, okay. Now how about the title? Probably, a good place to put that is in the heading. So in this case, we're not setting it as an element, we would have an h2, my title sort of thing. What we can do with another handy little property, on HTML elements, anybody know?

[00:07:27]
>> Text content?
>> Text content, that'll work. I mean, again, there's lots of different ways that we can do this. So we want to set the text content of the-
>> Heading.
>> Heading to whatever the title is that's passed in and now, okay, so content. What is content gonna be?

[00:07:47]
Well, again, passed down from on high, this is gonna be some kind of content element that has its own children and has its own like subtree of elements. So we want that to be within the form. Essentially, we don't want the form to just have a heading and a button and no information that the user passed in of what they need to do in this form or what they need the user to do in this form.

[00:08:14]
So all of their inputs and field sets and so on and so forth, so where can we put that?
>> Can you do this.element.appendChildContent?
>> We sure can, do we wanna do that down here?
>> Nope.
>> Nope.
>> Nope?
>> Well, I think you would want it before the button.

[00:08:38]
>> We might wanna put the close button at the bottom. We might not, we might have other ideas in mind, but let's say we do so we wanna make sure that we're appending it in the right order. Cuz append is pushing onto an array, it's gonna go at the end.

[00:08:53]
So this element appendChild, this.content ought to work. Again, expecting this.content to be a HTML element. Now, exercise for the reader [LAUGH] is how could we make sure that the form isn't being instantiated with some random thing that appendChild isn't gonna like. So that's a later exploration we can take on our own.

[00:09:25]
>> We want to append content, not this.content, right?
>> Sorry.
>> Yeah.
>> Yes, the catch.
>> That's what I was gonna say.
>> Excellent catch.
>> Yep, cuz-
>> Some of those are, I thought, and some of them are not, yeah.
>> It's a function parameter, not a member.

[00:09:40]
>> Exactly, totally did that to point this out to you. [LAUGH] Yeah, so keep in mind that we're not actually storing the content as a property on this object, could we? Sure, we could also in our constructor, we can add new properties to the instance. So we could do this.content equals content, we could do that.

[00:10:09]
We could also, let's say, since I declared here, these objects are gonna have titles, we could do the same with the title. But depending on what we want, what the experiences we want other developers to have as they're using this object. And by other developers, I also mean us in the future or what have you.

[00:10:26]
We can decide what we want to expose as properties of this object versus what we just want to know about so that we can put it where it needs to go and then expose like the just the element, let's say. So in this case, let's see. I think the only thing we're really gonna need to refer to here is an element of the form.

[00:10:54]
We could definitely expose things like title. We could have a two-string that prints a pretty summary of what's going on in this form or what have you. In the interest of time, we're not gonna do that. And right now, since we're all in this, right, constrained environment where we know that our only user is us, and nobody's gonna be kind of switching out stuff under us because we're writing this entire program here.

[00:11:21]
We're gonna, for the interest of time, blow past that. But it would be a good thing to think about for later is how could you make sure, how could you expose ways to change out some of this underlying stuff in the form? And how could you make sure that it's difficult to mess up [LAUGH] for your users?