Bootstrap Sticky Notifications AngularJS Service

Standard
Bootstrap 3.0 Sticky Alerts using Angular JS service

Introduction

Let’s face it, your users need sweet little notifications to keep them all warm and fuzzy inside. Below angualrJs code snippet allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders. This AngularJS directive which handles notifications that makes it easy to create alert – success – error – warning – information – confirmation messages as an alternative the standard alert dialogue. Each notification is added to a queue. (Optional). The notifications can be positioned anywhere with ease through CSS

Using the code

Html Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/
     bootstrap.min.css" />
    <script src="Content/jquery-1.8.2.js"></script>
    <script src="Content/angular.js"></script>
    <script src="Content/angular-route.js"></script>
    <script src="Content/App/Controller.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="Content/site.css" rel="stylesheet" />
</head>
<body ng-app="notifyApp">
    <div ng-controller="notifyController">
        <input type="button" ng-click="info()" value="info" />
        <input type="button" ng-click="success()" value="success" />
        <input type="button" ng-click="warning()" value="warning" />
        <input type="button" ng-click="error()" value="error" />
   
        <div>
            <div class="alerts" ng-shw="notify.queue.length > 0">
                <div class="alert alert-{{(m.type)||'info'}} alert-dismissable fade in pull-right"
                 ng-repeat="m in notify.queue">
                    <button type="button" class="close" ng-click="closeAlert(m.body)" 
                     data-dismiss="alert">&times;</button>
                    <label>{{m.title}}</label>
                    <div>{{m.body}}</div>
                </div>
            </div>
        </div>
    
    </div>
</body>
</html>

Controller Code:

(function () {
    //Module
    var sample = angular.module('notifyApp', ['ngRoute']);
    
    sample.service('notifications', ['$rootScope', function ($rootScope) {
            var queue = [];
            return {
                queue: queue,
                add: function (item) {
                    var index = -1;
                    //check alert with same body not active in dom
                    for (var i = 0; i < this.queue.length; i++) {
                        if (queue[i].body == item.body) {
                            index = i;
                            break;
                        }
                    }
                    if (index != -1)
                        return;
                    queue.push(item);
                    setTimeout(function () {
                        $('.alerts .alert').eq(0).remove();
                        queue.shift();
                    }, 3000);
                },
                pop: function (item) {
                    var index = -1;
                    //to find alert from queue of active alerts in dom
                    for (var i = 0; i < this.queue.length; i++) {
                        if (queue[i].body == item) {
                            index = i;
                            break;
                        }
                    }
                    if (index != -1)
                        queue.splice(index, 1);
                    return this.queue;
                }
            };
        }
    ]);
    
    //Controller
    sample.controller('notifyController', function ($scope, notifications) {
    
        $scope.notify = notifications;
        $scope.closeAlert = function (item) {
            notifications.pop(item);
        }
        
        $scope.info = function()
        {
            setNotification(notifications, 'info', 'Info Header', 'Info Body');
        }
        
        $scope.success = function()
        {
            setNotification(notifications, 'success', 'Success Header', 'Success Body');
        }
        
        $scope.warning = function()
        {
            setNotification(notifications, 'warning', 'Warning Header', 'Warning Body');
        }
        
        $scope.error = function()
        {
            setNotification(notifications, 'danger', 'Error Header', 'Error Body');
        }
    });
    
    function setNotification(notifications, type, title, body) {
        notifications.add({
            type: type,
            title: title,
            body: body
        });
    }
})();

 

Points of Interest

1. Same type of notifications is only active on screen once in case if multiple clicks.
2. Close button result in removal of notification from queue.
3. Timeout value can be increased or decreased as per need.

For the complete source code, please see https://github.com/m-hassan-tariq/BootstrapStickyAlertAngularJsService

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s