Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
angular-toastr
Advanced tools
[![Code Climate](https://codeclimate.com/github/Foxandxss/angular-toastr.png)](https://codeclimate.com/github/Foxandxss/angular-toastr) [![Build Status](https://travis-ci.org/Foxandxss/angular-toastr.svg?branch=master)](https://travis-ci.org/Foxandxss/ang
NOTE: For angular 1.2.x support check angular-1.2
branch or download the 0.4.x
release of angular-toastr
.
angular-toastr was originally a port of CodeSeven/toastr. It could now show some differences with it.
The goal is to provide the same API than the original one but without jQuery and using all the angular power.
Use npm:
$ npm install angular-toastr
If you are not using npm (you should), you can use bower:
$ bower install angular-toastr
To use a CDN, you can include the next two lines:
<script src="https://npmcdn.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/angular-toastr/dist/angular-toastr.css" />
Or you can grab the latest release and add both the css
and javascript
file:
<link rel="stylesheet" type="text/css" href="angular-toastr.css" />
<script type="text/javascript" src="angular-toastr.tpls.js"></script>
Note: If you add a script tag for angular-toastr, keep in mind that you need the tpls
version or the other depending if you want the default template or not (see below).
If you want animations, don't forget to add angular-animate
.
Then add toastr
to your modules dependencies:
angular.module('app', ['ngAnimate', 'toastr'])
Toastr usage is very simple, by default it comes with four types of notification messages:
Success:
app.controller('foo', function($scope, toastr) {
toastr.success('Hello world!', 'Toastr fun!');
});
Info:
app.controller('foo', function($scope, toastr) {
toastr.info('We are open today from 10 to 22', 'Information');
});
Error:
app.controller('foo', function($scope, toastr) {
toastr.error('Your credentials are gone', 'Error');
});
Warning:
app.controller('foo', function($scope, toastr) {
toastr.warning('Your computer is about to explode!', 'Warning');
});
Apart from that you can customize your basic toasts:
No title:
app.controller('foo', function($scope, toastr) {
toastr.success('I don\'t need a title to live');
});
app.controller('foo', function($scope, toastr) {
toastr.clear([toast]);
});
If no toast is passed in, all toasts will be closed.
app.controller('foo', function($scope, toastr) {
toastr.active();
});
app.controller('foo', function($scope, toastr) {
var toast = toastr.error('You are not allowed to do this!');
// after doing something...
toastr.refreshTimer(toast, 5000);
});
The second parameter is optional and will fallback to the configured timeOut.
It return the number of active toasts in screen.
A toast has a isOpened
flag to see whether it is opened or not.
This library has two parts, a container
and the toasts
you put in it.
To configure the container
you need to modify the toastrConfig
, for example:
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
autoDismiss: false,
containerId: 'toast-container',
maxOpened: 0,
newestOnTop: true,
positionClass: 'toast-top-right',
preventDuplicates: false,
preventOpenDuplicates: false,
target: 'body'
});
});
Those are the default values, you can pick what you need from it and override with your values.
maxOpened
toast(s)To customize a toast
you have two options. First, you can set a default option to be applied globally to all toasts
in the same way you modified the container
:
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
allowHtml: false,
closeButton: false,
closeHtml: '<button>×</button>',
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
messageClass: 'toast-message',
onHidden: null,
onShown: null,
onTap: null,
progressBar: false,
tapToDismiss: true,
templates: {
toast: 'directives/toast/toast.html',
progressbar: 'directives/progressbar/progressbar.html'
},
timeOut: 5000,
titleClass: 'toast-title',
toastClass: 'toast'
});
});
Toasts have 3 different callbacks:
The second option is to pass a third parameter (or second if you don't need a title). Let see some examples:
Toast with custom HTML (available in both title and message):
toastr.info('<input type="checkbox" checked> Success!', 'With HTML', {
allowHtml: true
});
Toast with a close button:
toastr.success('What a nice button', 'Button spree', {
closeButton: true
});
Toast with a custom button for apple fans:
toastr.info('What a nice apple button', 'Button spree', {
closeButton: true,
closeHtml: '<button></button>'
});
A pinky custom style (you can also create here new types with $decorate
):
toastr.info('I am totally custom!', 'Happy toast', {
iconClass: 'toast-pink'
});
toast-pink
is a custom class created for the occasion:
.toast-pink {
background-image: url(...) !important;
background-color: #fa39c3;
}
If you want to use the built-in template, you can use the angular-toastr.tpls.js
file.
If you decide that you don't want to use the built-in one, you can always use angular-toastr.js
file and then providing your own template like this:
angular.module('yourApp').run(['$templateCache', function($templateCache) {
$templateCache.put('directives/toast/toast.html',
"<div>Your template here</div>"
);
$templateCache.put('directives/progressbar/progressbar.html',
"<div>Your progressbar here</div>"
);
}]);
The important part here is to have a key named templates/toastr/toastr.html
. The module you run it is not important, you just need to do it after you load toastr
.
NOTE: Due some limitations in Angular, you need to have your custom template cached before trying to use it.
If you want to build from master, you need to:
$ npm install -g gulp
$ npm install
$ gulp production
Grab the compressed files under /dist
and the dev files at /gen
.
Q: Why can't I override the positionClass
in a toast? It gets ignored.
A: The toasts don't have a position, they are attached to a container and is that container who has the position set on the page. This will be changed in a future version.
angular-toastr
All the credits for the guys at CodeSeven/toastr for creating the original implementation.
Mit License: http://www.opensource.org/licenses/mit-license.php
Version 2.1.1
FAQs
[![Code Climate](https://codeclimate.com/github/Foxandxss/angular-toastr.png)](https://codeclimate.com/github/Foxandxss/angular-toastr) [![Build Status](https://travis-ci.org/Foxandxss/angular-toastr.svg?branch=master)](https://travis-ci.org/Foxandxss/ang
The npm package angular-toastr receives a total of 7,727 weekly downloads. As such, angular-toastr popularity was classified as popular.
We found that angular-toastr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.