win10-notif v1.0.5
win10-notif
(https://img.shields.io/badge/preview-click here-green.svg?style=flat-square)
Windows 10 style sticky notification for angular.js

Install
bower install --save win10-notifinclude
angular.min.js,angular-animate.min.js,win10-notif.min.jsandwin10-notif.min.cssin head section of your page.Add
thatisuday.win10-notifin your app's dependencies list.
Options
| key | values | default | role |
|---|---|---|---|
| title | {String} | 'Windows!'' | Notification title |
| msg | {String} | 'Welcome to Windows 10. We have...'' | Notification message |
| hasImg | {Boolean} | true | Whether to show image icon along with notification |
| imgUrl | valid image url | 'windows10.png' | image to show with notification |
| bgColor | hex, rgba | '#333' | background color of notification |
| timeout | time in milliseconds, null | 5000 | hide notification after {timeout} milliseconds. Use null for non-auto-hiding notification. |
| hasButtons | {Boolean} | false | Show action buttons in notification |
| hasAccept | {Boolean} | true | Show accept button |
| hasDecline | {Boolean} | true | Show decline button |
| acceptText | {String} | 'Accept' | Button text for accept button |
| declineText | {String} | 'Decline' | Button text for decline button |
You can pass HTML string in
msg. Please do not abuse this feature, use only<b>and<i>.
Global config
You can config win10-notif globally by using winNotifOpsProvider in config block of your app
angular
.module('myApp', ['thatisuday.win10-notif'])
.config(function(winNotifOpsProvider){
winNotifOpsProvider.setOps({
bgColor : '#3f51b5',
acceptText : 'Ok',
declineText : 'Cancel'
});
});show/hide
use $winNotif injectable service in your controller to control notification. You can use $winNotif.show(options) to show notification and $winNotif.hide(callback) to hide notification.
show
You can pass optional options object while calling show like $winNotif.show(options). options are the same as global config options mentioned above. But here you can also pass accept and decline 'key:function' pair which are callback for accept and decline user actions.
hide
Hiding notification is pretty simple. You can pass optional callback function like $winNotif.hide(callback).
.controller('myCtrl', function($rootScope, $scope, $timeout, $winNotif){
$timeout(function(){
$winNotif.show({
timeout : null,
hasButtons : true,
accept : function(){
// Do on accept
$winNotif.hide();
},
decline : function(){
// Do on decline
$winNotif.hide(function(){
// Martha!!! Why did you say that name?
});
}
});
}, 1000);
});