Skip to content

Commit

Permalink
Merge pull request #187 from Stabzs/master
Browse files Browse the repository at this point in the history
Updated version to 1.0.0 and added additional documentation
  • Loading branch information
Stabzs committed Jan 19, 2016
2 parents 96763be + 4cb9ca1 commit c469a03
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 10 deletions.
55 changes: 51 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
AngularJS-Toaster
=================

**AngularJS Toaster** is an AngularJS port of the **toastr** non-blocking notification jQuery library. It requires AngularJS v1.2.6 or higher and angular-animate for the CSS3 transformations.
(I would suggest to use /1.2.8/angular-animate.js, there is a weird blinking in newer versions.)
**AngularJS Toaster** is an AngularJS port of the **toastr** non-blocking notification jQuery library. It requires AngularJS v1.2.6 or higher and angular-animate for the CSS3 transformations.

[![Build Status](https://travis-ci.org/jirikavi/AngularJS-Toaster.svg)](https://travis-ci.org/jirikavi/AngularJS-Toaster)
[![Coverage Status](https://coveralls.io/repos/jirikavi/AngularJS-Toaster/badge.svg?branch=master&service=github&cachebust=1)](https://coveralls.io/github/jirikavi/AngularJS-Toaster?branch=master)

### Current Version 0.4.18
### Current Version 1.0.0

## Demo
- Simple demo is at http://plnkr.co/edit/HKTC1a
Expand Down Expand Up @@ -130,6 +129,8 @@ There are four types of body renderings: trustedHtml', 'template', 'templateWith

- directive
- Will use the `toast.body` argument to represent the name of a directive that you want to render as the toast's body, else it will fallback to the template bound to the `'body-template': 'toasterBodyTmpl.html'` configuration option.
The directive name being passed to the `body` argument should be normalized as it exists in the markup,
not camelCased as it would appear in the directive declaration (`cool-directive-name` instead of `coolDirectiveName`).

```js
// The toast pop call, passing in a directive name to be rendered
Expand All @@ -148,7 +149,7 @@ There are four types of body renderings: trustedHtml', 'template', 'templateWith
};
}])
```
- Will use the `toast.directiveData` argument to accept data that will be bound to the directive's scope.
- Will use the `toast.directiveData` argument to accept data that will be bound to the directive's scope.

```js
// The toast pop call, passing in a directive name to be rendered
Expand Down Expand Up @@ -206,6 +207,37 @@ toaster.pop({
});
```

### Multiple Toaster Containers
If desired, you can include multiple `<toaster-container></toaster-container>`
elements in your DOM. The library will register an event handler for every instance
of the container that it identifies. By default, when there are multiple registered
containers, each container will receive a toast notification and display it when a toast
is popped.

To target a specific container, you need to register that container with a unique `toaster-id`.

```html
<toaster-container toaster-options="{'toaster-id': 1,
'animation-class': 'toast-top-left'}"></toaster-container>
<toaster-container toaster-options="{'toaster-id': 2}"></toaster-container>
```

This gives you the ability to specifically target a unique container rather than broadcasting
new toast events to any containers that are currently registered.

```js
vm.popContainerOne = function () {
toaster.pop({ type: 'info', body: 'One', toasterId: 1 });
}

vm.popContainerTwo = function () {
toaster.pop({ type: 'info', body: 'Two', toasterId: 2 });
}
```

[This plnkr](http://plnkr.co/edit/4ICtcrpTSoAB9Vo5bRvN?p=preview) demonstrates this behavior
and it is documented in these [tests](test/toasterContainerSpec.js#L430).


### Other Options

Expand All @@ -223,6 +255,21 @@ angular.module('main', ['toaster', 'ngAnimate']);
```
If you do not want to use animations, you can safely remove the angular-animate.min.js reference as well as the injection of ngAnimate. Toasts will be displayed without animations.


### Common Issues
- Toaster always shows up as "info"
- Your `<toaster-container></toaster-container` might be placed inside of your routing directive.
- You have multiple `<toaster-container></toaster-container` elements without unqiue `toaster-id` configuration arguments.
- [$sce:itype] Attempted to trust a non-string value in a content requiring a string
- You have not specified: `bodyOutputType: 'trustedHtml'` when passing html as a body argument.
- My toasts do not show up when I pop them, but after I perform another action.
- You are calling `toaster.pop()` outside of AngularJS scope and a digest cycle is not being triggered.
Wrap your `toaster.pop()` call in `$timeout` to force a digest cycle.
```js
$timeout(function () {
toaster.pop();
}, 0);
```

## Author
**Jiri Kavulak**
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "AngularJS-Toaster",
"version": "0.4.18",
"version": "1.0.0",
"main": [
"toaster.js",
"toaster.css"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angularjs-toaster",
"version": "0.4.18",
"version": "1.0.0",
"description": "AngularJS Toaster is a customized version of toastr non-blocking notification javascript library",
"scripts": {
"test": "gulp test"
Expand Down
4 changes: 2 additions & 2 deletions toaster.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

/*
* AngularJS Toaster
* Version: 0.4.18
* Version: 1.0.0
*
* Copyright 2013-2015 Jiri Kavulak.
* Copyright 2013-2016 Jiri Kavulak.
* All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
Expand Down
4 changes: 2 additions & 2 deletions toaster.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit c469a03

Please sign in to comment.