https://github.com/bbvaengineering/ember-modal-service
An ember-cli addon to manage modals as promises
https://github.com/bbvaengineering/ember-modal-service
ember-addon ember-cli-addon modals
Last synced: 10 months ago
JSON representation
An ember-cli addon to manage modals as promises
- Host: GitHub
- URL: https://github.com/bbvaengineering/ember-modal-service
- Owner: BBVAEngineering
- License: mit
- Created: 2017-06-13T09:12:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:29:37.000Z (about 3 years ago)
- Last Synced: 2025-04-08T02:53:37.946Z (10 months ago)
- Topics: ember-addon, ember-cli-addon, modals
- Language: JavaScript
- Homepage:
- Size: 4.9 MB
- Stars: 27
- Watchers: 10
- Forks: 11
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-modal-service
[](https://travis-ci.org/BBVAEngineering/ember-modal-service)
[](https://badge.fury.io/gh/BBVAEngineering%2Fember-modal-service)
[](https://badge.fury.io/js/ember-modal-service)
[](https://david-dm.org/BBVAEngineering/ember-modal-service)
[](https://codecov.io/gh/BBVAEngineering/ember-modal-service)
[](https://greenkeeper.io/)
[](https://emberobserver.com/addons/ember-modal-service)
An [ember-cli addon](http://www.ember-cli.com/) to manage modals as promises.
## Information
[](https://nodei.co/npm/ember-modal-service/)
## Install in ember-cli application
In your application's directory:
```bash
ember install ember-modal-service
```
## Usage
### Register the modal container
All the modals are shown inside the modal container once opened.
```html
{{! templates/application.hbs }}
```
### 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-*`.
```javascript
// app/components/modal-foo.js
import ModalComponent from 'ember-modal-service/components/modal';
export default class FooModal extends ModalComponent {
data = this.model.options.data;
}
```
```html
{{! app/templates/modal-foo.hbs }}
{{data}}
```
### Opening the modal
```javascript
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.
```javascript
this.modal.close();
```
Or just some of them.
```javascript
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
```html
Resolve modal with two args
Reject modal with two args
```
## Contribute
If you want to contribute to this addon, please read the [CONTRIBUTING.md](CONTRIBUTING.md).
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/BBVAEngineering/ember-modal-service/tags).
## Authors
See the list of [contributors](https://github.com/BBVAEngineering/ember-modal-service/graphs/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details