ember-modal-service

An ember-cli addon to manage modals as promises.

Information

Install in ember-cli application

In your application's directory:

ember install ember-modal-service

Usage

Register the modal container

All the modals are shown inside the modal container once opened.

{{! templates/application.hbs }}
<ModalContainer />

Create a modal component

In order to register a new modal, you need to register the modal object in the application container using the preffix modal-*.

// app/components/modal-foo.js
import ModalComponent from 'ember-modal-service/components/modal';

export default class FooModal extends ModalComponent {
   data = this.model.options.data; 
}

{{! app/templates/modal-foo.hbs }}

<div>
  <p>{{data}}</p>
</div>

Opening the modal

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class Controller extends Controller {
  // Inject the service
  @service modal;

  @action
  async doSomething() {
    // To open a modal use the method `open` with the modal name and the options for the modal.
    try {
      const result = await this.modal.open('foo', { bar: 'bar' });

      // Modal have been resolved
    } catch(e) {
      // Modal have been rejected
    }
  }

Other useful things

You can close all modals by using the close method.

this.modal.close();

Or just some of them.

this.modal.close((modal) => {
  return modal.name === 'foo';
});

this.modal.close('name', 'foo');

Base modal component provides resolve & reject actions so you can implement basic closing behaviour directly on the template. You can pass any arguments you want the modal to be resolved / rejected with

<button {{fn this.reject "foo" "bar"}}>Resolve modal with two args</button>

<button {{fn this.reject "foo" "bar"}}>Reject modal with two args</button>

Contribute

If you want to contribute to this addon, please read the CONTRIBUTING.md.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

bbvaengineering / ember-modal-service Goto Github PK