Using humane.js with aurelia

724 views Asked by At

I'm trying to use humane.js with aurelia however I'm running in a problem.

It appears humane.js adds an element to the DOM when it's created and so far the only way I've found to do it is to force it like this....

showMessage(message) {
    this.notify = humane.create();
    this.notify.log(message);
}

However this creates a new instance of humane every time showMessage() is called. This breaks the queue as each one is rendered separately.

I've tried putting the create() in the activate() method of the view model but that doesn't seem to work either.

Any ideas?

3

There are 3 answers

0
Matt McCabe On BEST ANSWER

This solved the problem, I've created a custom element for humane that is then included in app.html in the same way loading-indicator is in the skeleton app.

import humane from 'humane-js';
import 'humane-js/themes/original.css!';
import {inject, noView} from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';
import { ApiStatus } from 'resources/messages';

@noView
@inject(EventAggregator)
export class StatusIndicator {

  constructor(ea) {
    this.ea = ea;
    ea.subscribe(ApiStatus, msg => this.showMessage(msg.apistatus));
  }

  attached() {
    this.humane = humane.create();
  }

  showMessage(message) {
    this.humane.log(message);
  }
}

The important part was the attached() this allows the setup of humane to work correctly.

2
Richard Hassler On

Here is how I am using humane.js with Aurelia:

1) I load the CSS in the app index.html.

2) In each view model that requires humane, I import humane

import humane from 'humane-js/humane';

I do NOT inject human into the view model.

3) I show notifications like this:

humane.log('Error:, { addnCls: 'humane-libnotify-error' });

I hope this helps you.

0
Roland Quast On

Unfortunately for Aurelia, Humane will attach itself to the DOM automatically as a child of body, which Aurelia then replaces.

There is a really, really, simple fix for this:

Change your:

<body aurelia-app="main">

To this:

<body><div aurelia-app="main">

This way, Aurelia doesn't replace the div which is in body, you don't need to worry about attached() or where the import appears in your code, and humane works perfectly.

I have raised a humane github issue for this. https://github.com/wavded/humane-js/issues/69