npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-ui-notification

v0.3.6

Published

Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating

Downloads

22,905

Readme

angular-ui-notification

Dependency Status devDependency Status Build Status Dependency Status Code Climate

Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations

Features

  • No dependencies except of angular.js.
  • CSS3 Animations.
  • Small size.
  • 5 message types.
  • Use HTML in your messages.
  • Configure options globally py the provider
  • Use custom options by the message
  • Use custom template

Install

To install the package using bower and save as a dependency use...

bower install angular-ui-notification --save

To install via NPM:

npm install angular-ui-notification --save

Usage

Heres a plunker demo

In your html/template add

...
  <link rel="stylesheet" href="angular-ui-notification.min.css">
...
  <script src="angular-ui-notification.min.js"></script>
...

In your application, declare dependency injection like so..

  angular.module('notificationTest', ['ui-notification']);
...

You can configure module by the provider

angular.module('notificationTest', ['ui-notification'])
    .config(function(NotificationProvider) {
        NotificationProvider.setOptions({
            delay: 10000,
            startTop: 20,
            startRight: 10,
            verticalSpacing: 20,
            horizontalSpacing: 20,
            positionX: 'left',
            positionY: 'bottom'
        });
    });
...

And when you need to show notifications, inject service and call it!

angular.module('notificationTest').controller('notificationController', function($scope, Notification) {
 
  Notification.primary('Primary notification');
  // or simply..
  Notification('Primary notification');
  
  // Other Options
  // Success
  Notification.success('Success notification');
  
  // Message with custom type
  Notification({message: 'Warning notification'}, 'warning');

  // With Title
  Notification({message: 'Primary notification', title: 'Primary notification'});
  
  // Message with custom delay
  Notification.error({message: 'Error notification 1s', delay: 1000});
  
  // Embed HTML within your message.....
  Notification.success({message: 'Success notification<br>Some other <b>content</b><br><a href="https://github.com/alexcrack/angular-ui-notification">This is a link</a><br><img src="https://angularjs.org/img/AngularJS-small.png">', title: 'Html content'});

  // Change position notification
  Notification.error({message: 'Error Bottom Right', positionY: 'bottom', positionX: 'right'});
  
  // Replace message
  Notification.error({message: 'Error notification 1s', replaceMessage: true});
}

Service

Module name: "ui-notification"

Service: "Notification"

Configuration provider: "NotificationProvider"

Options

Options can be passed to configuration provider globally or used in the current message.

The options list:

| Option | Possible values | Default value | Description | | ----------------- | ------------------------- | ------------------------------ | ------------------------------------------------------------------------ | | delay | Any integer value | 5000 | The time in ms the message is showing before start fading out | | startTop | Any integer value | 10 | Vertical padding between messages and vertical border of the browser | | startRight | Any integer value | 10 | Horizontal padding between messages and horizontal border of the browser | | verticalSpacing | Any integer value | 10 | Vertical spacing between messages | | horizontalSpacing | Any integer value | 10 | Horizontal spacing between messages | | positionX | "right", "left", "center" | "right" | Horizontal position of the message | | positionY | "top", "bottom" | "top" | Vertical position of the message | | replaceMessage | true, false | false | If true every next appearing message replace old messages | | templateUrl | Any string | "angular-ui-notification.html" | Custom template filename (URL) | | onClose | Any function | undefined | Callback to execute when a notification element is closed. Callback receives the element as its argument. | | closeOnClick | true, false | true | If true, messages are closed on click | | maxCount | Any integer | 0 | Show only [maxCount] last messages. Old messages will be killed. 0 - do not kill | | priority | Any integer | 10 | The highier the priority is, the higher the notification will be |

Also you can pass the "scope" option. This is an angular scope option Notification scope will be inherited from. This option can be passed only in the methods. The default value is $rootScope

Methods

Notification service methods

| Method name | Description | |----------------------------------------|-------------------------------------------------| | Notification(), Notification.primary() | Show the message with bootstrap's primary class | | Notification.info() | Show the message with bootstrap's info class | | Notification.success() | Show the message with bootstrap's success class | | Notification.warning() | Show the message with bootstrap's warn class | | Notification.error() | Show the message with bootstrap's danger class | | Notification.clearAll() | Remove all shown messages |

Notification service options

| Option | Possible values | Default value | Description | | -------------- | ------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | | title | String | "" | Title to appear at the top of the notification | | message | String | "" | Message to appear in the notification | | templateUrl | String | "angular-ui-notification.html" | URL of template to be used for notification | | delay | Int (?) | 5000 or configured global delay | Number of ms before notification fades out. If not an integer, notification will persist until killed. | | type | "primary", "info", "success", "warning", "error" | "primary" | Bootstrap flavoring | | positionY | "top", "bottom" | "top" | | | positionX | "right", "left", "center" | "right" | | | replaceMessage | *Boolean* | false` | If true this message will replace old(er) message(s) | | closeOnClick | true, false | true | If true, the message is closed on click |

Returning value

Every "show" method returns a promise that resolves a notification scope with these methods:

| Method name | Description | |--------------------------------|------------------------------------------------------------------------------------------------------------------| | notificationScope.kill(isHard) | Remove the specific messageisHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message|

Custom Templates

Custom template can be provided.

<div class="ui-notification">
    <h3 ng-show="title" ng-bind-html="title"></h3>
    <div class="message" ng-bind-html="message"></div>
</div>

Default existing scope values is "title" - the title of the message and "message". Also any custom scope's properties can be used.