ember-dialog       

A lightweight and powerful Ember Addon that allows you to easily create routable dialog windows and control their closing. It consists of a service that is available from any object and a component which is a dialog-window itself.

With ember-dialog you can create any popups like dialogs, modals, notices, bubbles etc. We have decided do not include realization of all this features to the library for minification reasons. Instead of it we have written absolute documentation how you can make it your own (see cookbook and tutorial with examples). You can look the library's code on github and get surprised how much code on aboard to realize all features, presented on this site.

Installation

Installing the library is as easy as:

``shell
ember install ember-dialog
`

About

The principle of work is simple. Service is instructed to display a modal window (show, alert, confirm or blank methods), creates a component instance with required layout and template, then renders it, and attaches it to the body. At this point, it also creates a Promise, "handles" of which puts into the component and returns it. The component has 2 actions on aboard: one for resolved closing, another one for rejected closing. Actions available within the template and can be called, for instance by clicking on the button (in the layout or in the template). When you call an action, one of the Promise's method is executed and triggered independent "accepted" or "declined" event. The dialog service when gets the event destroys component object and detaches it from the DOM.

Let's say you want to ask user confirm an action. You should call show method of the dialog service with a layout path (you needed dialog window with two buttons - confirm layout what you need) and a path to template that you want to show the user in the modal window. Method creates and shows dialog window and returns a Promise, that will become resolved or rejected when window closed (it's depend on which button user has clicked).

`javascript
// The dialog/confirm - predefined layout template
// The messages/hello - template that you'd like to show.
// Notice: this template should be found in your project by path app/templates/messages/hello
const layoutName = "dialog/confirm";
const templateName = "messages/hello";
const promise = this.get("dialog").show(layoutName, templateName);

const yes = () => { console.log(yes pressed); };
const no = () => { console.log(no pressed); };

promise.then(yes, no);
`

For more information and demos, visit the site.

Dialog types (predefined layouts)

ember-dialog has next layouts on aboard: alert, confirm and blank.

$3

This layout has only 'yes' - button clicking on which the modal window closes as resolved. It also has X-button which closes modal window as resolved. The promise object always resolved on modal closing. May be used for showing an information to the user. See docs.

$3

In practice, the most widely used layout. It has 2 buttons, which closes dialog window. One of them closes window as resolved, another one closes as rejected. It also has X-button which closes window as rejected (for obvious reasons). See docs.

$3

The most simple layout. It has nothing on aboard. May be used for creating custom dialog windows with its own logic of showing elements and closing. In practice often used for showing forms, in this cases accept closing carried on submit action. Convenient to use in conjunction with ember-validation (TBD:Usecase). See docs.

Styles

Styles were written on sass language, you're able to include them into you project.

Add path to sassOptions.includePaths in your ember-cli-build.js (example below).

`javascript
var app = new EmberApp(defaults, {
sassOptions: {
includePaths: [ 'node_modules/ember-dialog/addon/styles' ]
}
});
`

Include them in your app/styles/app.scss:

`sass
@import "ember-dialog";
`

If you have your own style of the dialog windows you may use just structure styles:

`sass
@import "ember-dialog/structure";
`

Usage

$3

`javascript
export default Ember.Controller({

showDialog() {
// Will be used app/templates/error-message.hbs
this.get("dialog").alert("error-message");
}

});
`

$3

`hbs
Delete record
`

$3

`javascript
export default Ember.Controller({

showDialog() {

const yes = () => { console.log("Yes"); };
const no = () => { console.log("No"); };

// Will be used app/templates/messages/are-you-sure.hbs
this.get("dialog").confirm("messages/are-you-sure").then(yes, no);

}

});
`

$3

Controller:
`javascript
export default Ember.Controller({

now: now Date(),

model: { username: "ajile" },

showDialog() {

// Will be used app/templates/messages/hello.hbs
this.get("dialog").alert("messages/hello", this);

}

});
`

Template messages/hello.hbs:
`hbs


`javascript
export default Ember.Controller({

count: 0,

showDialog() {
// Will be used app/templates/messages/click-counter.hbs
this.get("dialog").alert("messages/click-counter", null, {
acceptHandler: "yesHandler"
});
},

actions: {
yesHandler(presenter) {
const count = this.get("count");
if (count < 5) {
console.log("Count less then five");
this.set("count", ++count);
} else {
presenter.accept();
}
}
}

});
`

$3

`javascript
export default Ember.Controller({

showDialog() {

// Any created dialog will be closed in 1s
this.get("dialog").on("created", (presenter) => {
Ember.run.later(presenter, presenter.accept, 1000);
});

// Will be used app/templates/messages/something.hbs
this.get("dialog").alert("messages/something");

}

});
`

$3

Controller:

`javascript
export default Ember.Controller({

showDialog() {
// Will be used app/templates/dialog-layouts/delete.hbs as layout and
// app/templates/messages/are-you-sure.hbs as template.
this.get("dialog").show("dialog-layouts/delete", "messages/delete-user");
}

});
`

Template dialog-layouts/delete.hbs:
`hbs


Confirm Deletion

Template messages/delete-user.hbs:
`hbs
Really?
`

The result:
`html


Confirm Deletion

Execute ember g service dialog.

File app/services/dialog.js:
`javascript
import Dialog from "ember-dialog/services/dialog";

export default Dialog.extend({

confirmDelete() {
const args = Array.prototype.slice.apply(arguments);
args.unshift("dialog-layouts/delete");
this.show(...args);
}

});
``

Contributing

The library is under constant develoment. We stick to concept of Ember releases - every 6 monthes we release new version. We do so to sync with new Ember features.

If you find something lacking in the library functions - add issue on github, we shall process it. We are open to any cooperation. Feel free to send us Pull Requests.

Also you may send all incoming issues to slack.