Skip to content

knownasilya/ember-toastr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f7b7c25 · Jan 6, 2023
Jan 6, 2023
Sep 12, 2020
Sep 12, 2020
Sep 12, 2020
Sep 13, 2020
Oct 5, 2015
Sep 12, 2020
Jul 24, 2015
Sep 30, 2019
Sep 12, 2020
Sep 30, 2019
Sep 30, 2019
Sep 12, 2020
Sep 12, 2020
Sep 12, 2020
Jul 24, 2015
Jan 6, 2023
Sep 12, 2020
Sep 30, 2019
Sep 13, 2020
Sep 12, 2020
Sep 13, 2020
Jan 6, 2023
Sep 13, 2020
Jul 20, 2022

Repository files navigation

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.