ember-dialog

Module: ember-dialog/services/dialog

Extends

  • Ember.Service
  • Ember.Evented

Members

<protected, inner> dialogs :Array

Type:
  • Array

<inner> rootElement :String

The DOM selector that used to append dialogs to.

Type:
  • String

<protected, inner> defaults

Properties:
Name Type Description
className String

CSS class name

Methods

<inner> add(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter

<inner> remove(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter

<inner> created(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter

<inner> destroyed(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter

<inner> accepted(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter
Listens to Events:

<inner> declined(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter
Listens to Events:

<inner> destroyAllPresenter()

Fires:
  • module:ember-dialog/services/dialog~event:destroyAllPresenter

<inner> destroyPresenter(presenter)

Parameters:
Name Type Description
presenter module:ember-dialog/components/presenter
Fires:

<inner> show(layout, template [, context] [, options] [, componentName])

Parameters:
Name Type Argument Default Description
layout String | HTMLBarTemplate

Path to layout that used to showing message. Predefined layouts: dialog/alert, dialog/confirm and dialog/blank. Alert layout has only one button and can be closed as accepted only. Confirm layout has two buttons and can be close as accepted or declined. The blank layout hasn't any buttons at all and can be closed as accepted or declined. In any layouts available actions: 'accept' and 'decline'.
template String | HTMLBarTemplate

Path to template that will be shown in the dialog window. In the template is available presenter object as this and context that passed on creation as contextObject.
context Object <optional>

An onject available in the template as contextObject.
options Object <optional>
 {}

An object pass to presenter on creating.
componentName String <optional>
 "presenter"

The dialog component name
Fires:
Returns:
Type
external:Ember/RSVP/Promise
Examples

Simple usage - post factum handling. It's the common case when you needed just get result of the dialog closing. For example show user an inform message or ask him to confirm an action. 

export default Ember.Controller({

  success() {
    // Showing user modal with message that record was successfully deleted.
    // Showing template `app/templates/messages/success-deletion.hbs`.
    this.get("dialog").show("dialog/alert", "messages/success-deletion");
  },

  deleteRecord(record) {
    // Showing user a dialog window to confirm act. Template to show the
    // user `app/templates/messages/areyousure.hbs`. The template
    // should have few buttons: "Ok" and "Cancel". "Ok" button evaluates
    // `accept` action, "Cancel" evaluates `decline` action.
    const promise = this.get("dialog").show("dialog/confirm", "messages/areyousure");

    // User pressed "Ok" button - promise resolved in this case
    promise.then(() => { record.deleteRecord(); return record.deleteRecord(); });

    // Record was successfully deleted
    promise.then(() => { this.success(); });

    return promise;
  }

});

Passing a context to the template that will be shown to user in the dialog.

export default Ember.Controller({

  username: Ember.computed.alias("session.username"),

  hello() {
    const username = this.get("username");

    // Showing user simple personal greeting. The username passed in
    // context object. This object's put into the `contextObject`
    // presenter's property and become available in the template.
    this.get("dialog").show("dialog/alert", "messages/hello", { username });
  }

});

The template in this case will look like.

Hello, {{contextObject.username}}!

With context you're able to pass an action names of the context that will be executed at first, before executing `accept` and `decline` handlers of the dialog (presenter).

export default Ember.Controller({

  showForm() {
    const options = { actionName: "save" };

    // Passing current controller as context and the name of it's action
    // on `accept`.
    const promise = this.get("dialog").show("dialog/confirm", "messages/user-form", this, options);

    promise.then(() => {
      console.log("Model saved");
    });
  },

  actions: {

    save(presenter) {
      const model = this.get("model");

      if ( Ember.isBlank(model.get("username")) ) {
        this.get("dialog").show("dialog/alert", "messages/error");
        return;
      }

      // "Manually" closing `presenter`
      model.save(() => presenter.accept());
    }

  }

});

<inner> alert(template [, context] [, options] [, componentName])

Parameters:
Name Type Argument Default Description
template String
context Object <optional>
options Object <optional>
componentName String <optional>
 "presenter"

The dialog component name
Returns:
Type
external:Ember/RSVP/Promise
Example

It is sugar. The show method with predefined layout. 

export default Ember.Controller({

  expired() {
    try { 1/0 } catch (e) {
      this.get("dialog").alert("messages/fatal-error", { text: e.message });
    }
  }

});

<inner> confirm(template [, context] [, options] [, componentName])

Parameters:
Name Type Argument Default Description
template String
context Object <optional>
options Object <optional>
componentName String <optional>
 "presenter"

The dialog component name
Returns:
Type
external:Ember/RSVP/Promise
Example

It is sugar. The show method with predefined layout. 

export default Ember.Controller({

  remove() {
    const yes = () => { console.log("yes"); },
          no = () => { console.log("no"); }
    this.get("dialog").confirm("messages/yousure").then(yes, no);
  }

});

<inner> blank(template [, context] [, options] [, componentName])

Parameters:
Name Type Argument Default Description
template String
context Object <optional>
options Object <optional>
componentName String <optional>
 "presenter"

The dialog component name
Returns:
Type
external:Ember/RSVP/Promise
Example

It is sugar. The show method with predefined layout. 

export default Ember.Controller({

  showForm() {
    this.get("dialog").blank("forms/edit-user", this);
  }

});

Events

destroyed

Triggered when presenter destroyed. You may subscribe on this event to make additional operations.

Type: module:ember-dialog/components/presenter
Example
export default Ember.Component.extend({

  dialog: Ember.inject.service(),

  didRender() {
    this.get("dialog").on("created", { className } => {
      this.$().addClass("__freeze-content");
      className && this.$().addClass(className);
    });
    this.get("dialog").on("destroyed", { className } => {
      this.$().removeClass("__freeze-content");
      className && this.$().removeClass(className);
    });
  }

});

created

Triggered when presenter instance created. May be used to control presenters outside the class.

Type: module:ember-dialog/components/presenter
Example
export default Ember.Component.extend({

  dialog: Ember.inject.service(),

  didRender() {
    this.get("dialog").on("created", { className } => {
      this.$().addClass("__freeze-content");
      className && this.$().addClass(className);
    });
    this.get("dialog").on("destroyed", { className } => {
      this.$().removeClass("__freeze-content");
      className && this.$().removeClass(className);
    });
  }

});