1.0.5 • Published 7 years ago

win10-notif v1.0.5

Weekly downloads
4
License
ISC
Repository
github
Last release
7 years ago

win10-notif bower npm downloads preview(https://img.shields.io/badge/preview-click here-green.svg?style=flat-square)

Windows 10 style sticky notification for angular.js

preview


Install

bower install --save win10-notif

include angular.min.js, angular-animate.min.js, win10-notif.min.js and win10-notif.min.css in head section of your page.

Add thatisuday.win10-notif in your app's dependencies list.


Options

keyvaluesdefaultrole
title{String}'Windows!''Notification title
msg{String}'Welcome to Windows 10. We have...''Notification message
hasImg{Boolean}trueWhether to show image icon along with notification
imgUrlvalid image url'windows10.png'image to show with notification
bgColorhex, rgba'#333'background color of notification
timeouttime in milliseconds, null5000hide notification after {timeout} milliseconds. Use null for non-auto-hiding notification.
hasButtons{Boolean}falseShow action buttons in notification
hasAccept{Boolean}trueShow accept button
hasDecline{Boolean}trueShow 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);
});
1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

8 years ago

1.0.2

8 years ago