# ember-notifyme

> Show notifications in your Ember app.

Latest version **3.0.0** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-notifyme
pnpm add ember-notifyme
yarn add ember-notifyme
bun add ember-notifyme
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2021-09-24 |
| First published | 2016-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 12.* \|\| 14.* \|\| >= 16 |
| Dependencies | 5 |
| Unpacked size | 25.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Igor Kvasnicka |
| Maintainers | ikvasnicka |
| Keywords | ember-addon, notifications |

## Links

- npm: https://www.npmjs.com/package/ember-notifyme
- Repository: https://github.com/IgorKvasn/ember-notifyme
- Homepage: https://github.com/IgorKvasn/ember-notifyme#readme
- Issues: https://github.com/IgorKvasn/ember-notifyme/issues
- npm.io page: https://npm.io/package/ember-notifyme

## Dependencies (5)

- [cash-dom](https://npm.io/package/cash-dom.md) ^8.1.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.26.6
- [velocity-animate](https://npm.io/package/velocity-animate.md) ^1.5.2
- [ember-auto-import](https://npm.io/package/ember-auto-import.md) ^2.2.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^5.7.1

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2021-09-24
- 2.0.3 — 2021-02-22
- 2.0.2 — 2021-02-22
- 2.0.1 — 2021-02-22
- 1.14.3 — 2020-12-01
- 1.14.2 — 2020-10-26
- 1.14.1 — 2020-10-15
- 1.14.0 — 2020-10-15
- 1.13.1 — 2020-09-17
- 1.13.0 — 2020-04-03
- 1.12.1 — 2020-03-16
- 1.12.0 — 2019-06-13
- 1.11.2 — 2019-02-05
- 1.11.1 — 2019-02-05
- 1.11.0 — 2019-02-05
- … 23 more at https://npm.io/package/ember-notifyme/versions

## README

# Ember-notifyme

Simple addon that adds ability to show popup notifications.

DEMO: [http://igorkvasn.github.io/ember-notifyme/](http://igorkvasn.github.io/ember-notifyme/)

### Features
- countdown (notification message will disappear after certain timeout) + countdown progress bar
- onClick and onClose callbacks
- animations (VelocityJS)
- full customization of icons (by default *FontAwesome* is supported, but *any* HTML element can be used instead - e.g. Glyphicons, IcoMoon,...)
- supports HTML content

Installation
------------------------------------------------------------------------------

 `ember install ember-notifyme`
 
* Ember.js v3.20 or above
* Ember CLI v3.20 or above
* Node.js v12 or above

## Usage

Add this component anywhere into your hbs file (eg. _application.hbs_)
```
{{notification-panel}}
```

To trigger a notification message you can either:
```
this.notifications.addMessage({
  message: "My message"
  //other options here
});
```

or use convenience methods `success`, `info` or `error`:
```
this.notifications.info("My info message", options);
```

To hide a notification:
```
this.notifications.removeMessage(message);
```


To hide all notifications:
```
 this.notifications.removeAll();
```

**Note:** by default, **FontAwesome** must be included in your project - to use different icon set, see [Global Configuration](https://github.com/IgorKvasn/ember-notifyme/blob/master/README.md#global-configuration) section below for a configuration hints

### Callbacks
You can also use callbacks `onClick` and `onClose` that take a function with one parameter (message that triggered this callback);

```
this.notifications.addMessage({
  message: "My message"
  onClick(message){
    alert('message clicked!');
  },
  onClose(message){
    alert('message closed!');
  }
});
```

Another callback available is `onCloseTimeout` that is called whenever notification's timeout expires and the notification message is auto-closing.
```
this.notifications.addMessage({
  message: "My message"
  onCloseTimeout(message){
    alert('message timeout expired');
  }
});
```

### List of available options:

| Option        | Description           | Default value  |
| ------------- |-------------| -----|
| type      | type of message; possible values: 'info', 'error', 'success'; CSS class of the same name will be added to notification message to allow styling | 'info' |
| message      | text of a message      |    |
| timeout | time before notification disappears      |    based on notification type (errors have no timeout, otherwise 8000 milis) |
| sticky | if true, notification will not disappear      |    based on notification type (errors are sticky=true) |
| htmlContent | enabled/disables HTML content in message (Warning: be sure to properly escape `message` if this option is set to `true`)    |   false |
| closeOnClick | if set to `true`, message is closed when user clicks on it    |   false |
| onClose | callback triggered when user clicks on X button to close the notification    |    |
| onClick | callback triggered when user clicks on the notification    |    |
| onCloseTimeout | callback triggered when message timeout expires and message is automatically closed (see _timeout_ option above)    |false    |
|data | any arbitrary data |

### Global configuration

Some options can be globally configured so you do not have to set the same options over and over. Additionally icons can be configured as well.
In `config/environment.js` you can configure globals such as (every entry is optional, eg. if you do not specify success timeout, default will be used):
```
ENV['ember-notifyme']={
  closeIconHTML: '<i class="fa fa-times"></i>',
  messages:{
    success: {
      timeout: 8000,
      icon: '<span class="fa-stack fa-sm"><i class="fa fa-circle-thin fa-stack-2x"></i>  <i class="fa fa-check fa-stack-1x"></i></span>'
    },
    error: {
      sticky: true,
      icon: '<span class="fa-stack fa-sm"><i class="fa fa-circle-thin fa-stack-2x"></i>  <i class="fa fa-exclamation fa-stack-1x"></i></span>'
    },
    info: {
      timeout: 8000,
      icon: '<span class="fa-stack fa-sm"><i class="fa fa-circle-thin fa-stack-2x"></i>  <i class="fa fa-info fa-stack-1x"></i></span>'
    },
  }
}
```

## Addon Development

* `git clone` this repository
* `npm install`
* `bower install`

### Linting

* `ember server`
* Visit your app at http://localhost:4200.

### Running tests

* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`

### Running the dummy application

* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).

---
_Source: https://npm.io/package/ember-notifyme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._