CODEWITHSUNDEEP
javascriptaureliatoastr
Sublow
Sublow

Reputation: 149

Set toastr options depending on message type (Aurelia)

Trying to set the error-type messages in this project to have a longer fadeOut time than the other types of messages. I'm using Aurelia as the framework.

I currently have the toastr options set like this:

app.js

@inject(Endpoint.of('api'), Router, FetchConfig, AppRouterConfig, AuthService, EventAggregator)
export class App {
  constructor(api, router, fetchConfig, appRouterConfig, authService, EventAggregator) {
    this.api = api;
    this.router = router;
    this.fetchConfig = fetchConfig;
    this.appRouterConfig = appRouterConfig;
    this.authService = authService;
    this.ea = EventAggregator;

    /* Define the options for the toastr messages */
    toastr.options = {
      "closeButton": true,
      "debug": false,
      "newestOnTop": false,
      "progressBar": false,
      "positionClass": "toast-top-full-width",
      "preventDuplicates": false,
      "onclick": null,
      "showDuration": "500",
      "hideDuration": "1000",
      "timeOut": "5000", // I want this to be 20000 for error-type messages ONLY
      "extendedTimeOut": "1000",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }
  };

I'm using Aurelia's pub/sub in order to generate toastr messages as and when they're required. I've put the toastr subscription within the attached() lifecycle hook of the App class:

app.js

this.toastSubscription = this.ea.subscribe('toast', toast => {
  toastr[toast.type](toast.message);
});

Then, everywhere else in the project where I need a toastr message I use this publish:

example.js

  /* For an error */
  this.ea.publish('toast', {
    type: 'error',
    message: 'Some fancy error message',
  });

  /* For a success */
  this.ea.publish('toast', {
     type: 'success',
     message: 'Much success, very achieved, wow'
  })

How would I set up this system to work with error-type messages having a longer fadeOut? I've tried this which didn't seem to work:

app.js

  /* Modify the subscription to accept timeOut as an override of global options */
  this.toastSubscription = this.ea.subscribe('toast', toast => {
    toastr[toast.type](toast.message, {timeOut: toast.timeout});
  });

example.js

  this.ea.publish('toast', {
    type: 'error',
    message: 'Errors are love, errors are life',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

But the above has been unsuccessful.

Any ideas?

Upvotes: 2

Views: 428

Answers (2)

Sublow
Sublow

Reputation: 149

Ok so Ducker was on to something... turns out it WAS a case of needing to use 3 arguments, but it's not on the publish, it's on the subscription:

app.js

this.toastSubscription = this.ea.subscribe('toast', toast => {
  /* Empty string passed in after toast.message */
  toastr[toast.type](toast.message, '', {timeOut: toast.timeout});
});

example.js

  this.ea.publish('toast', {
    type: 'error',
    message: 'Oh no, an Error!',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

Upvotes: 1

Ducker
Ducker

Reputation: 198

You're close with the last example.

 this.ea.publish('toast', {
    type: 'error',
    message: 'Errors are love, errors are life',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

You've got the options as the second argument, but they are the third.

 this.ea.publish('toast', '', {
    type: 'error',
    message: 'Errors are love, errors are life',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

The second argument is the title, leave that blank if you don't want a title, then have your options as the third

Upvotes: 2

Related Questions