{"_id":"ng-notify","_rev":"7-c62c90fa03f2395702cf0ce06587784f","name":"ng-notify","description":"A simple, lightweight module for displaying notifications in your AngularJS app.","dist-tags":{"latest":"0.7.1"},"versions":{"0.7.0":{"name":"ng-notify","version":"0.7.0","description":"A simple, lightweight module for displaying notifications in your AngularJS app.","main":"./src/scripts/ng-notify.js","scripts":{"test":"grunt travis"},"repository":{"type":"git","url":"git://github.com/matowens/ng-notify.git"},"keywords":["AngularJS","App","notify","Provider","notification","alert","notice"],"author":{"name":"Mat Owens","email":"mat@peglegg.net"},"license":"MIT","bugs":{"url":"https://github.com/matowens/ng-notify/issues"},"homepage":"https://github.com/matowens/ng-notify","devDependencies":{"grunt":"~0.4.5","grunt-contrib-clean":"~0.5.0","grunt-contrib-cssmin":"~0.10.0","grunt-contrib-htmlmin":"~0.3.0","grunt-contrib-jshint":"~0.10.0","grunt-contrib-sass":"~0.7.3","grunt-contrib-uglify":"~0.5.0","grunt-contrib-watch":"~0.6.1","grunt-karma":"^0.10.1","grunt-processhtml":"~0.3.3","jasmine-core":"^2.3.4","karma":"^0.12.31","karma-coverage":"^0.3.1","karma-jasmine":"^0.3.5","karma-phantomjs-launcher":"^0.1.4"},"gitHead":"d1184ae4779eb9a199a87c394ada7fd8a4a42817","_id":"ng-notify@0.7.0","_shasum":"b0056579e9f2bd16bf55a924444250a3e02909dd","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"matowens","email":"mat@peglegg.net"},"dist":{"shasum":"b0056579e9f2bd16bf55a924444250a3e02909dd","tarball":"https://registry.npmjs.org/ng-notify/-/ng-notify-0.7.0.tgz","integrity":"sha512-zs+q181/l0FOh1lOkSe9xKxrsEh2Wf0iBPniOkFlb+Q6hrb+2SjZ+kL6ZXk16veqnqvCVcXttl6qvOn7HiIxYA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9AiCCccY0B7YFGxg3T/CLKePrWrpImDDZUXNnZeGwnAiAj2SFWMSPwomaK3zSsmWF28B3xYSpUSi3fJhgOz8yRyg=="}]},"maintainers":[{"name":"matowens","email":"mat@peglegg.net"}]},"0.7.1":{"name":"ng-notify","version":"0.7.1","description":"A simple, lightweight module for displaying notifications in your AngularJS app.","main":"./src/scripts/ng-notify.js","scripts":{"test":"grunt travis"},"repository":{"type":"git","url":"git://github.com/matowens/ng-notify.git"},"keywords":["AngularJS","App","notify","Provider","notification","alert","notice"],"author":{"name":"Mat Owens","email":"mat@peglegg.net"},"license":"MIT","bugs":{"url":"https://github.com/matowens/ng-notify/issues"},"homepage":"https://github.com/matowens/ng-notify","devDependencies":{"grunt":"~0.4.5","grunt-contrib-clean":"~0.5.0","grunt-contrib-cssmin":"~0.10.0","grunt-contrib-htmlmin":"~0.3.0","grunt-contrib-jshint":"~0.10.0","grunt-contrib-sass":"~0.7.3","grunt-contrib-uglify":"~0.5.0","grunt-contrib-watch":"~0.6.1","grunt-karma":"^0.10.1","grunt-processhtml":"~0.3.3","jasmine-core":"^2.3.4","karma":"^0.12.31","karma-coverage":"^0.3.1","karma-jasmine":"^0.3.5","karma-phantomjs-launcher":"^0.1.4"},"gitHead":"efa0ab11265e7ddf488108a1975b4fdce48a5896","_id":"ng-notify@0.7.1","_shasum":"11884599fc1743c6f16d5e6b0ccf6bf22e439aa9","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"matowens","email":"mat@peglegg.net"},"dist":{"shasum":"11884599fc1743c6f16d5e6b0ccf6bf22e439aa9","tarball":"https://registry.npmjs.org/ng-notify/-/ng-notify-0.7.1.tgz","integrity":"sha512-uju3NfrOW+Hg4u39yeiBG/kPRGVPX9f9z3dEEoKoBO7GqS0glSIeW78LLy9AEr7CAu8f/RHJGJzrZKMUwDmsew==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSh9Gl0RmvtXeUuUhZdH46SMBxH7ir4Anw6cPWzRZC+wIgOhrwgv0w8j1MD5H/DgwGfgM4RyDRoQOn1bWzxwPCamo="}]},"maintainers":[{"name":"matowens","email":"mat@peglegg.net"}]}},"readme":"ng-notify ([live demo](http://matowens.github.io/ng-notify/#demo)) [![Build Status](https://travis-ci.org/matowens/ng-notify.svg?branch=master)](https://travis-ci.org/matowens/ng-notify) [![Code Climate](https://codeclimate.com/github/matowens/ng-notify/badges/gpa.svg)](https://codeclimate.com/github/matowens/ng-notify)\r\n=========\r\n\r\nA simple, lightweight module for displaying notifications in your AngularJS app.\r\n\r\nBoth JS and CSS files combine for ~4.5 kBs.\r\n\r\nIE9+ (AngularJS v1.3.x no longer supports IE8) and the latest versions of Chrome, FireFox and Safari have been tested and are supported.  If you do run across any issues, please submit a [new issue](https://github.com/matowens/ng-notify/issues) and I'll take a look - or better yet - submit a PR with the bug fix and I'll merge it in.\r\n\r\nYou can check out the vitals and demo here: [http://matowens.github.io/ng-notify](http://matowens.github.io/ng-notify)\r\n\r\nImplementation\r\n==============\r\n\r\n###Requirements\r\n\r\nAngularJS is the only dependency.  Animation is achieved with pure JS, jQuery not necessary.\r\n\r\n###Installation\r\n\r\nYou can install ng-notify with Bower.\r\n\r\n    bower install ng-notify --save\r\n\r\nYou can also install ng-notify with npm.\r\n\r\n    npm install ng-notify --save\r\n\r\nAs of v0.6.0, ng-notify is now available via the jsDelivr CDN if you'd prefer to go down that route.\r\n\r\n    //cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.js\r\n    //cdn.jsdelivr.net/angular.ng-notify/{version.number.here}/ng-notify.min.css\r\n\r\nFor example:\r\n\r\n    //cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.js\r\n    //cdn.jsdelivr.net/angular.ng-notify/0.6.0/ng-notify.min.css\r\n\r\nAnd as always, you can download the source files straight from this repo - they're located in the `dist` dir.  Be sure to include the minified version of both js and css files.\r\n\r\n###Usage\r\n\r\nAfter including *ng-notify.min.js* and *ng-notify.min.css*, inject the ng-notify provider into your project.\r\n\r\n```javascript\r\nvar app = angular.module('demo', ['ngNotify']);\r\n```\r\n\r\nNow you can trigger notifications from anywhere in your app.  To display a notification, just use the `set` method.\r\n\r\n```javascript\r\nngNotify.set('Your notification message goes here!');\r\n```\r\n\r\nTo specify the *type* of notification to display, provide the optional *type* param. (For available types, check the [definitions](#definitions) below.)\r\n\r\n```javascript\r\nngNotify.set('Your error message goes here!', 'error');\r\n```\r\n\r\nAdvanced Usage\r\n==============\r\n\r\n###Default Configuration\r\n\r\nYou can override the default options for all notifications by using the `config` method.  None of these options are required. (For available options, check the [definitions](#definitions) below.)\r\n\r\n```javascript\r\nngNotify.config({\r\n    theme: 'pure',\r\n    position: 'bottom',\r\n    duration: 3000,\r\n    type: 'info',\r\n    sticky: false,\r\n    button: true,\r\n    html: false\r\n});\r\n```\r\n\r\nDefault configuration options can be set during the `run()` block.  If your app utilizes a global controller, the config options could be set there just as well.  For a discussion and working example on this topic, checkout [this comment](https://github.com/matowens/ng-notify/issues/16#issuecomment-104492193).\r\n\r\n###Individual Configurations\r\n\r\nYou can also pass an object of options to individual notifications.  You can pass through any combination of our available options here as well.  (For available options, check the [definitions](#definitions) below.)  For example:\r\n\r\n```javascript\r\nngNotify.set('Your first message.', {\r\n    position: 'top',\r\n    sticky: true\r\n});\r\n\r\nngNotify.set('Your second message.', {\r\n    type: 'error',\r\n    duration: 2000\r\n});\r\n\r\nngNotify.set('Your third message.', 'error'); // Original use case still works, too.\r\n\r\nngNotify.set('Your <i>fourth</i> message.', {\r\n    theme: 'pitchy',\r\n    html: true\r\n});\r\n```\r\n\r\n###Sticky Notifications\r\n\r\nSticky notifications allow you to set a persistent notification that doesn't fade away.  To do this, simply set the `sticky` attribute to true:\r\n\r\n```javascript\r\nngNotify.set('This is sticky.', {\r\n    sticky: true\r\n});\r\n```\r\n\r\nThis will give the user the option of closing the notification themselves.  If you need to dismiss a notification manually, you can do so with the `dismiss` method like this:\r\n\r\n```javascript\r\nngNotify.dismiss();\r\n```\r\n\r\nIf you'd prefer to dismiss the notification programmtically and prevent the user from doing so, you can add an option to remove the button:\r\n\r\n```javascript\r\nngNotify.set('This is sticky without a button.', {\r\n    sticky: true,\r\n    button: false\r\n});\r\n```\r\n\r\n*Any time a notification is set to sticky, the duration attribute will be ignored since the notification will not be automatically fading out.*\r\n\r\n###HTML Notifications\r\n\r\nHTML notifications will allow you to display messages with HTML content in them.  To do this, you'll need to set the `html` attribute to true:\r\n\r\n```javascript\r\nngNotify.set('This has <b>HTML</b> content!', {\r\n    html: true\r\n});\r\n```\r\n\r\nYou can also set HTML notifications to be enabled for all of your notifications by adding it the ngNotify config like so:\r\n\r\n```javascript\r\nngNotify.config({\r\n    html: true\r\n});\r\n```\r\nIn order for HTML notifications to display, you are required to include the [ngSanitize](https://docs.angularjs.org/api/ngSanitize) script in your app (eg, via Google CDN, Bower, or code.angular.org).  There's no need to add it as a dependency to ngNotify.  If ngNotify has found the ngSanitize script, it will add it as a dependency to the ngNotify module dynamically.  Once included, you just need to toggle the `html` attribute to true and the module will handle the rest.\r\n\r\nIf you don't have ngSanitize included and you do set `html` to true, ngNotify will gracefully degrade back to the default message display and print a debug message to remind you in your browser's console.\r\n\r\n###Roll Your Own\r\n\r\nThere are two additional methods that allow you to create your own types and themes.\r\n\r\n#####Custom Notification Types\r\n\r\nCreating a custom type will allow you to add additional types of notifications to use throughout your application.  To create a new type, use the `addType` method.  The first param is the *name* you'll use to reference your new type.  The second param is the *class* you'll use to style your new notification type.\r\n\r\n```javascript\r\nngNotify.addType('notice', 'my-notice-type');\r\n```\r\n\r\nThen you can set any of your notifications up to use that type as you would any other, triggering it by using the name you gave it.\r\n\r\n```javascript\r\nngNotify.set('This notification is using our new type!', 'notice');\r\n```\r\n\r\nTo style your new type, pick a color you'd like to use and set it to the background color of your new style.\r\n\r\n```sass\r\n.my-notice-type\r\n    background-color: #ABC123\r\n```\r\n\r\n#####Custom Themes\r\n\r\nCreating a custom theme will allow you to build an entirely new spectrum of notification messages utilizing the existing notification types.  To create a new theme, use the `addTheme` method.  The first param is the *name* you'll use to reference your new theme.  The second param is the *class* you'll use to style your new theme's notification types.\r\n\r\n```javascript\r\nngNotify.addTheme('newTheme', 'my-new-theme');\r\n```\r\n\r\nNow you can activate your new theme via the config method, using the name you previously assigned to it.\r\n\r\n```javascript\r\nngNotify.config({\r\n    theme: 'newTheme'\r\n});\r\n```\r\n\r\nTo style your new theme, pick a collection of colors you'd like to use for each notification type and set them to each type's background color.\r\n\r\n```sass\r\n.my-new-theme.ngn-info\r\n    background-color: #0033CC\r\n\r\n.my-new-theme.ngn-error\r\n    background-color: #FF0000\r\n\r\n.my-new-theme.ngn-success\r\n    background-color: #00CC00\r\n\r\n.my-new-theme.ngn-warn\r\n    background-color: #FF9900\r\n\r\n.my-new-theme.ngn-grimace\r\n    background-color: #660099\r\n```\r\n\r\n#####Custom Styles\r\n\r\nThe position, size, color, alignment and more are all styled based on the notification's classes and are all specified in the CSS file. See the [style definitions](#styles) below to see which classes can be used to override any of the styles within your own application.\r\n\r\nDefinitions\r\n===========\r\n\r\n###Methods\r\n\r\n####set(message, type)\r\ndisplays a notification message and sets the formatting/behavioral options for this one notification.\r\n- **message**: *string* - *required* - the message to display in your notification.\r\n- **type**: *string* - *optional* - the type of notification to display.\r\n    - info *(default)*\r\n    - error\r\n    - success\r\n    - warn\r\n    - grimace\r\n\r\n####config(options)\r\nsets default settings for all notifications to take into account when displaying.\r\n- **options** - *object* - an object of options that overrides the default settings.\r\n    - **theme**: *string* - *optional* - sets the theme to use, altering the styles for each notification type.\r\n        - pure *(default)*\r\n        - prime\r\n        - pastel\r\n        - pitchy\r\n    - **type**: *string* - *optional* - sets the default notification type when a type isn't explicitly set.\r\n        - info *(default)*\r\n        - error\r\n        - success\r\n        - warn\r\n        - grimace\r\n    - **position**: *string* - *optional* - sets where the notifications will be displayed at in the app.\r\n        - bottom *(default)*\r\n        - top\r\n    - **duration**: *integer* - *optional* - the duration the notification stays visible to the user, in milliseconds.\r\n    - **sticky**: *bool* - *optional* - determines whether or not the message will fade at the end of the duration or if the message will persist until the user dismisses it themselves.  when true, duration will not be set, even if it has a value. *(false by default)*.\r\n\r\n####dismiss()\r\nmanually dismisses any sticky notifications that may still be set.\r\n\r\n####addType(name, class)\r\nallows a dev to create a new type of notification to use in their app.\r\n- **name**: *string* - *required* - the name used to trigger this notification type in the *set* method.\r\n- **class**: *string* - *required* - the class used to target this type in the stylesheet.\r\n\r\n####addTheme(name, class)\r\nallows a dev to create a whole new set of styles for each notification type.\r\n- **name**: *string* - *required* - the name used when setting the theme in the *config* object.\r\n- **class**: *string* - *required* - the class used to target this theme in the stylesheet.\r\n\r\n###Styles\r\n\r\n- **primary**: the class that's present on every notification and controls all of the primary styles.\r\n    - *.ngn*\r\n\r\n- **position**: purely responsible for where notifications are displayed.  *default is set to bottom, one is present on every notification.*\r\n    - *.ngn-top*\r\n    - *.ngn-bottom*\r\n\r\n- **types**: default classes for setting each notification type's background color.  *default is set to info, one is present on every notification.*\r\n    - *.ngn-info*\r\n    - *.ngn-error*\r\n    - *.ngn-success*\r\n    - *.ngn-warn*\r\n    - *.ngn-grimace*\r\n\r\n- **themes**: theme specific classes that are chained together with type classes to override default background colors.  *not always present, default excludes all of these.*\r\n    - *.ngn-prime*\r\n    - *.ngn-pastel*\r\n    - *.ngn-pitchy*\r\n\r\n- **sticky**: styles responsible for displaying the dismissal button for sticky notifications.\r\n    - *.ngn-sticky* - displays the dismissal button when sticky is enabled.\r\n    - *.ngn-dismiss* - styles the dismissal button.\r\n\r\nDevelopment\r\n===========\r\n\r\nIf you've forked or cloned the project and would like to make any sort of adjustments, there are few items to make note of.  First, your system will need to have the following bits in place:\r\n\r\n- Node & NPM\r\n- Grunt\r\n- Ruby\r\n- Sass\r\n\r\nSecond, there are a few grunt tasks that you'll be able to leverage to help validate and prepare your changes for use.\r\n\r\nYou can fire off a `grunt` or `grunt build` command manually at any time to lint, minify, and setup your demo (built in the _gh-pages dir) for testing.\r\n\r\n```console\r\ngrunt (or grunt build)\r\n```\r\n\r\nAlso, you can run `grunt dev` to lint, minify, and prep your demo for testing.  Once the build is complete, it'll also fire off a `watch` so that any changes that are made to the the sass, js, and demo files will automatically trigger the build script to update your project.\r\n\r\n```console\r\ngrunt dev\r\n```\r\n\r\nTo run through the configured unit tests, you can run `grunt test`.  This will fire off a series of tests that check that all default options are set correctly, all configurable options are able to be set correctly, and that all methods carry out the functionality that they're supposed to.  These tests should let you know if any of the updates that you've made have negatively effected any preexisting functionality.  Also, when the tests complete, there will be a test coverage report generated and stored in the `coverage` directory.\r\n\r\n```console\r\ngrunt test\r\n```\r\n\r\nNext, you'll want to do all of your development within three locations.  If you add changes anywhere else, they're likely to be overwritten during the build process.  These locations are:\r\n\r\n`src/scripts/ng-notify.js` - for any script modifications.\r\n\r\n`src/styles/ng-notify.sass` - for any style modifications.\r\n\r\n`demo/*` - for any modifications to the demo.\r\n\r\nLastly, once you've made your changes and run through the appropriate grunt tasks, your changes should be baked and ready for you to consume - located in the `dist` directory as minified js and css files.\r\n","maintainers":[{"name":"matowens","email":"mat@peglegg.net"}],"time":{"modified":"2022-06-21T04:12:14.162Z","created":"2015-11-12T03:47:20.157Z","0.7.0":"2015-11-12T03:47:20.157Z","0.7.1":"2015-11-12T04:58:34.113Z"},"homepage":"https://github.com/matowens/ng-notify","keywords":["AngularJS","App","notify","Provider","notification","alert","notice"],"repository":{"type":"git","url":"git://github.com/matowens/ng-notify.git"},"author":{"name":"Mat Owens","email":"mat@peglegg.net"},"bugs":{"url":"https://github.com/matowens/ng-notify/issues"},"license":"MIT","readmeFilename":"README.md","users":{"matowens":true,"fabionaka":true,"shahyar":true}}