spoonx / aurelia-notification Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 7.0 267 KB

A simple notification service utilizing humane.js

License: MIT License

JavaScript 100.00%

aurelia-notification's People

Contributors

Stargazers

Watchers

Forkers

doktordirk egeland rwoverdijk apawsey bas080 sflanker americanpowerandgas

aurelia-notification's Issues

closeOnClick not working

Hi guys.

I create a notification with notification, setting the config defaults to include clickOnClose:true.

However, stepping through the code, I can see humane add the click handler, but when everything's actually finished, the handler has disappeared, and clicking on the element calls the aurelia-binding's handleDelegatedEvent method, which finds nothing. I haven't been able to find anywhere where the click handler is removed, so I've got no idea where it's disappearing to.

Support for i18n parameters

First of all, let me thank you for your library.

I'd like to see a new feature which should not be too hard, I guess. I'm using Aurelia-i18N to translate my notifications but I can't add parameters to the translations. Currently, this is the way I'm using your library:

this.notification.success('myKey', { user: 'John Doe' });

And my translation file is

{
    "myKey": "Thanks, {{user}}"
}

And of course the user doesn't get translated due to the way you call i18n.tr function without options parameter. Would you please add support for this ?
BTW, I don't get why you use this.__i18n in line 186 and you use this.i18n in line 184. Should they be the same ?

Aurelia-Notification no longer working in webpack after recent Aurelia update

I'll try to give as much context as possible, but I don't have time to hunt down the exact cause of the issue myself right now. We are using Webpack, our project is based on the aurelia-skeleton navigation project, webpack-es2016 from around a month and a half ago to two months ago. Doing an npm update renders my application broken due to the following error:

Unhandled rejection Error: Cannot find module './aurelia-notification'.
    at http://localhost:3001/1.bundle.js:164:42
    at webpackContextResolve (http://localhost:3001/1.bundle.js:164:90)
    at webpackContext (http://localhost:3001/1.bundle.js:161:30)
    at http://localhost:3001/bundle.js:25202:81
    at http://localhost:3001/bundle.js:136:24
    at Function.requireEnsure [as e] (http://localhost:3001/bundle.js:597:29)
    at Function.ensure [as e] (http://localhost:3001/bundle.js:134:33)
    at http://localhost:3001/bundle.js:25201:32
    at Promise._execute (http://localhost:3001/bundle.js:18030:10)
    at Promise._resolveFromExecutor (http://localhost:3001/bundle.js:20177:19)
    at new Promise (http://localhost:3001/bundle.js:19780:15)
    at WebpackLoader._import (http://localhost:3001/bundle.js:25196:13)
    at http://localhost:3001/bundle.js:25252:17
    at Promise._execute (http://localhost:3001/bundle.js:18030:10)
    at Promise._resolveFromExecutor (http://localhost:3001/bundle.js:20177:19)
    at new Promise (http://localhost:3001/bundle.js:19780:15)

I know this stack trace is not particularly helpful or useful, but in case it helps at all I figured I would include it. I have not tried downloading the latest aurelia navigation skeleton project (they have released a new one which made a ton of changes)

If there is any more information I can provide, let me know.

No visible element attached to the container

Since version 1.1.0 (with a fix that preserves a custom container element) notification does not work for me at all anymore. The reason is, that in its constructor humane checks if it has a container - it doesn't - and then uses <body> as container and attaches its element to it. Then (for a reason that I don't know) all children of <body> get removed by Aurelia, including humane's element.

In version 1.0.0 a container is set unconditionally as soon as Aurelia is done loading, so that the element is re-attached. In version 1.1.0 this is only done if there is not yet a conatiner element set, which there is - only the element is not attached to it anymore.

Steps to reproduce:

au new foo  # default ESNext
cd foo
npm install --save aurelia-notification

app.js:

import {Notification} from 'aurelia-notification';
import {inject} from 'aurelia-framework';

@inject(Notification)
export class App {
  message = 'Hello World!';
  constructor(notification) {
    notification.error('bla');
  }
}

Configure plugin in main.js:

...
.plugin(PLATFORM.moduleName('aurelia-notification'), config => {
    config.configure({
        translate: false
    });
})
...

au run

Nothing to be seen...

Fix it:

npm install --save [email protected]
au run

See "bla" is displayed

Notifications do not disappear, and cannot be clicked (to close) unless you include at least original css classes from humane

If supported, humane relies on css transitions to remove messages. Therefore if you do not include the minimum necessary classes, the messages never disappear. As the clickToClose functionality uses the same method to make the notification disappear, it also doesn't work.

aurelia-cli: error TS1192: Module ''i18next'' has no default export.

I get an error when aurelia-notification typings are included:

Finished 'processMarkup'
(...)/node_modules/aurelia-i18n/dist/aurelia-i18n.d.ts(1,8): error TS1192: Module ''i18next'' has no default export.
[13:35:32] gulp-notify: [Error running Gulp] Error: (...)/node_modules/aurelia-i18n/dist/aurelia-i18n.d.ts(1,8): error TS1192: Module ''i18next'' has no default export.
[13:35:32] TypeScript: 1 semantic error
[13:35:32] TypeScript: emit succeeded (with errors)
Finished 'buildTypeScript'

When I comment out import {I18N} from 'aurelia-i18n'; in file aurelia-notification.d.ts then au build compiles without errors.

Getting Undefined

Once I call notification.success('success') I am getting the notification but the text instead of success says undefined.

import { Notification } from 'aurelia-notification';
@inject(Notification)
export class Welcome {
  constructor(notification) {
    notification.success('success');
    this.message = '';
  }

main.js:

bootstrap((aurelia) => {
  aurelia.use
  .standardConfiguration()
  .developmentLogging()
  .plugin('aurelia-notification', config => {
    config.configure({
      notifications: {
        'success': 'humane-flatty-success',
        'error': 'humane-flatty-error',
        'info': 'humane-flatty-info'
      }
    });
  });

Like I said I am getting it to show the notification box with it styled right. Just the text says undefined.

improve typings

add 'fake' typings like aurelia

Installation no go

javascript/aurelia-example-client [ jspm i aurelia-notification                       ] 4:34 PM
     Updating registry cache...
     Looking up npm:aurelia-notification
     Downloading npm:[email protected]

warn Error on processPackageConfig
     Package.json dependency aurelia-dependency-injection set to npm:aurelia-dependency-injection@^1.0.0-beta.1.2.0, which is not a valid dependency format for npm.
     It's advisable to publish jspm-style packages to GitHub or another registry so conventions are clear.

err  Error: Error processing package config for npm:aurelia-notification.
         at /Users/rwoverdijk/projects/javascript/aurelia-example-client/node_modules/jspm/node_modules/systemjs-builder/lib/builder.js:27:9
         at Object.lib$rsvp$events$$default.trigger (/Users/rwoverdijk/projects/javascript/aurelia-example-client/node_modules/rsvp/dist/rsvp.js:245:13)
         at null._onTimeout (/Users/rwoverdijk/projects/javascript/aurelia-example-client/node_modules/rsvp/dist/rsvp.js:568:47)
         at Timer.listOnTimeout (timers.js:92:15)

err  Error processing package config for npm:aurelia-notification.

warn Installation changes not saved.

add more tests

on it

Provide base container configuration in plugin config

I would want to set the base notification container globally, when I initialise the plugin, but at the moment, that option isn't available.

Just to note, I intend to submit my first ever public PR for this... so either tell me no now, or go easy on me :)

consider removing js decorators

overhead
no typings

doc.body replaced after eg app contructor

thus attaching to DOM need to move to an 'attached'. seems more work than worth mabye

Add CONTRIBUTING

Currently, not all commits are being made properly. Sort of our own fault, because we didn't specify how to contribute yet.

make npm only ready

add dependency entries as there are for jspm

Must Implement AddPlugin()

Since the latest aurelia build (skeleton) I noticed a weird bug: aurelia-loader.js:145 Uncaught (in promise) Error: Loader must implement addPlugin(pluginName, implementation).(…). This is the JSPM build.

Before the update we never had an issue but I am guessing something changed.

import 'jquery';
import bootstrap from 'bootstrap';
import 'humane-js/themes/flatty.css!';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-notification', config => {
        config.configure({
          translate: false,
          notifications: {
            success: 'humane-flatty-success',
            error: 'humane-flatty-error',
            info: 'humane-flatty-info',
          },
        });
      });
...

I went into the skeleton and only installed this to ensure that this was the problematic plugin and it appears that 'aurelia-notification' is the problem child :(

Can't load theme with new version of Aurelia

I've configured aurelia-notification in aurelia.json using:

    {
            "name": "humane-js",
            "path": "../node_modules/humane-js",
            "main": "humane",
            "resources": [
              "themes/bigbox.css",
              "themes/boldlight.css",
              "themes/flatty.css",
              "themes/jackedup.css",
              "themes/libnotify.css",
              "themes/original.css"
            ]
          }

This seems to work (at least there are no errors). However, when I use a statement like this to import a theme:

    import "node_modules/humane-js/themes/libnotify.css!";

I get this error:

   Error: ENOENT: no such file or directory, open 'C:\Development\UCCSS\Gold-uccss\aurelia-app\src\node_modules\humane-js\themes\libnotify.css.js

I've tried a number of variations on the import statement but I always get the error that it can't find a *.js file. I'd appreciate if someone can point me in the right direction.

Ross