3.0.1 • Published 1 year ago

ember-toastr v3.0.1

Weekly downloads
4,409
License
MIT
Repository
github
Last release
1 year ago

ember-toastr

A service wrapper for toastr.js with auto injection into routes, components, and controllers.

npm version Build Status Ember Observer Score

Compatibility

Usage

ember install ember-toastr

You can now access the notifications service as toast. You can inject it in routes, controllers or components using the following syntax:

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

export default class SomeController extends Controller {
  @service toast;

  @action
  test() {
    let title = 'Test';
    let message = 'A test happened';

    this.toast.info(message, title, {
      // options here
    });
  }
}

If using newer versions of Ember you can inject using the decorator syntax, see the Ember documentation for @ember/service#inject decorator.

You can also use toast.clear() and toast.remove() to remove all toasts. For example:

<button {{on "click" this.toast.clear}}>Clear</button>

See the toastr.js demo for other possible uses, and the toastr.js documentation for explanation of options.

API

toast Service

success(msg = '', title = '', options = {})

A method with the above default values for displaying a success toast.

info(msg = '', title = '', options = {})

A method with the above default values for displaying a info toast.

warning(msg = '', title = '', options = {})

A method with the above default values for displaying a warning toast.

error(msg = '', title = '', options = {})

A method with the above default values for displaying an error toast.

clear() or clear(toast)

A method to clear all toasts, or the individual toast.

remove() or remove(toast)

A method to remove all toasts, or the individual toast.

toasts

A property to access all toasts that are added.

Configuration

These are the default options:

ENV['ember-toastr'] = {
  toastrOptions: {
    closeButton: true,
    debug: false,
    newestOnTop: true,
    progressBar: true,
    positionClass: 'toast-top-right',
    preventDuplicates: true,
    onclick: null,
    showDuration: '300',
    hideDuration: '1000',
    timeOut: '4000',
    extendedTimeOut: '1000',
    showEasing: 'swing',
    hideEasing: 'linear',
    showMethod: 'fadeIn',
    hideMethod: 'fadeOut',
  },
};

All options in toastrOptions are direct options for toastr.js.

Testing Toasts in Acceptance Tests

Toastr messages are rendered inside a div#toast-container, but outside of div#ember-testing-container, where all of the testing action takes place. Therefore, you need to supply a second scope parameter of document to your assert.dom(...) calls.

For example: assert.dom('#toast-container', document).includesText('ERROR: Invalid username or password');

Contributing

See the Contributing guide for details.

3.0.1

1 year ago

3.0.0

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.7.2

6 years ago

1.7.1

6 years ago

1.7.0

7 years ago

1.6.2

7 years ago

1.6.1

7 years ago

1.6.0

7 years ago

1.5.0

7 years ago

1.4.1

8 years ago

1.4.0

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.0

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.0

9 years ago

0.2.4

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago