An Ember-CLI addon for modal components.

This library wraps ember-modal-dialog (@v1.0.0 for compatibility with Ember 1.12+). The resulting modal retains the same structure as the Addepar/ember-widgets modal component but leverages the pre-existing and powerful ember-modal-dialog, which uses ember-wormhole under the hood. Any option that can be passed into ember-modal-dialog can similarly be used on this modal.

The largest disparity between ember-widgets modal and this new adde-modal is the means in which it is displayed. Rather than calling .popup() inside javascript, the templating stays where it makes the most logical sense... in the template. Modals should be conditionally shown and hidden using {{#if}} blocks. This simplifies the interface between the JavaScript and HTML to be controlled by a single boolean variable.

Example usage:

*.hbs

{{#if showModal}}
  {{#adde-modal
    headerText='Are you sure?'
    confirmText='Continue'
    onCancel='cancelModal'
    onConfirm='confirmModal'
  }}
    Are you sure you want to do this?
  {{/adde-modal}}
{{/if}}

<button {{action 'doTheThing'}}>Do the thing?</button>

*.js

export default Component.extend({
  showModal: false,

  _closeModal() {
    this.set('showModal', false);
  },

  actions: {
    doTheThing() {
      this.set('showModal', true);
    },

    closeModal() {
      this._closeModal();
    },

    confirmModal() {
      this._closeModal();
      this.doTheThing();
    }
  }
})

adde-modal uses ember-wormhole to teleport the modal to the root of the application regardless of where its parent component / template exists.

Full list of options that can be passed into the adde-modal component:

• git clone [email protected]:Addepar/addepar-modal.git this repository
• cd addepar-modal
• yarn

• ember serve
• Visit your app at http://localhost:4200.

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.