Transcript

Hi, and welcome back to Ember Screencasts. Today we’ll be covering the ember-modal-dialog add-on. I’m covering this add-on for three reasons. First and most important to anyone watching in the future, is because it’s an awesome add-on that lets you easily implement a common feature. Second, is because that feature works well with the action sequence that we’ve been doing, and we can make it replace the alert boxes. Third, because it’s delaying a tactic that lets me have an extra week to properly figure out closure actions, because those are a big change. I want to make sure I get it right for you guys.

So currently when we’re wanting to send a message to the user, we use an alert box.

But that’s ugly. We want something better. That’s where the ember-modal-dialog add-on comes in. It allows us to easily create beautiful modals. Let’s get started.

First, we’ll install the ember-modal-dialog add-on. Then, we’ll install the ember-cli-sass add-on, since it relies on it.

Then we’ll copy these two lines, we’ll change our app.css to app.scss,

so we’re using sass now, and then we’ll paste these two lines in there. So we’re importing the styles from the add-on.

Then, in our actions template, we’ll put in a modal-dialog box.

So when we restart the server and reload the page, we get this modal-dialog box.

Now you’ll notice that this modal is missing some of the features that you might normally expect from a modal. For example, greying out the rest of the screen, and being able to close it. So let’s add those in.

If we go to the read me for the add-on, we see that there is some configurable properties, one of which is translucentOverlay.

So we’ll set that to true.

Now it grays out the rest of the screen, like we would expect.

We would also expect the modal-dialog to be a little bit larger. So what we’ll do is we’ll find the class there, ember-modal-dialog,

and then we’ll increase the size through css.

There, we have a nice, larger ember-modal-dialog.

Now we use the ember-modal-dialog' css, and here we have the modal overlays and the ember-modal-overlay.

If you want to add different classes, you can use overlay-class and overlayClassNames and container-class and containerClassNames,

and you can use those to add different class names to different modals, if you’re using multiple modals and you want to style them differently.

So now our modal is looking nice, but we can’t close it, and we want to be able to do that. So we’ll do that by putting an action on the close property.

So we’ll have the close property, and we’ll attach this to the closeModalDialog action. As we’ll see in this week’s pro-video, this is how we attach actions to components.

So to make our close action mean something, we’ll first wrap this modal-dialog in an if statement, so it only shows up if the isShowingModal Boolean is true.

In controller, we’ll temporarily set the isShowingModal default to true, and then we’ll create the closeModalDialog action. In this action, we will set the isShowingModal property to false,

and we’ll see that when we click outside, it closes that modal dialog.

So now we’ll need a way to open up that modal-dialog box. We’ll start by putting the default of isShowing dialog as false, so that it will start from where we want to be normally. And then we’ll create an action called showModalDialog. This action will take a parameter, and then that parameter will be set to the modalMessage property. And then, we’ll set the isShowingModal to true.

Now that modalMessage property, we’ll be having that in the middle of the modal-dialog, and that’s going to replace the "thank you for using hats".

And how we’ll use this is by taking the places where we’re showing an alert, and we’ll replace that with showModalDialog.

So then when we try to trigger that, it will show our modal dialog instead of an alert.

So this is great. We have our modal dialog, it’s showing when you click something, and it’s disappearing when you click away. But our other things are still alerts, and the way we have this set up, it’ll be difficult to make them not alerts, because those alerts are called in the route.

So what we need to do is take all this and move it up the action bubbling chain.

We could move it to the route, however, let’s keep on bubbling up until we get to the application route.

So we’ve taken out these two actions from the controller, then we’ll take this from the template

and paste it into the application template.

But unfortunately, it doesn’t work quite right out of the box like that. The reason is because we’re setting the modalMessage and isShowingModal on the router.

What we need to do is set them on controller. So we’ll grab the controllerFor('application'), and then we’ll set it on there.

With that done, we’ll see that it’s working like we expect. It should be noted that controllerFor is a private property, so it might change. However, I don’t know a better way to do this at the moment.

So with these actions set on the application route and the modal-dialog set on our application template, we can go back to our actions route here and we can start changing these over.


And with those changed, then we’ll be seeing that for all of these actions, we’re using the modal-dialog instead of the alert. This is much better.

If you want to learn more about ember-modal-dialog, you can go to the read me on github.

It contains lots of information, including some live demos, it includes several configurable properties, and also shows how to position it, if you want it to not be on the center of your screen. It also shows you how to change the styles more than we did and do keyboard shortcuts and create custom modals. So if you want to have a type of modal that shows up in several places but not all places, custom modals will be your thing.

So I hope you’ll be able to find ember-modal-dialog useful, and we should be soon getting back to our regular scheduled screencasts on ‘Actions and Components’.