Monday, 3 November 2014

Create a angular notification service using notification-rg.js, which will notify the user information in the corner's of the webpage including push mechanism

In this article we are going to see how to create a notification container which will notify the user information in the corner of the webpage like in facebook notification.



To do this first we have to follow few steps

1. Link to notification-rg.css <link href="notification-rg.css" rel="stylesheet"/>

2. Link to notification-rg.js <script src="notification-rg.js"></script>

3. Inject the angularNotification in the angular module and use the service $notification in controller, and use the method open to notify

use options as input parameter to display a required notification type, if options are doesnt mention then
default will be set as options. notification returns an object which is used to addtional opertaions.

 var result= $notification.open(
            {
                position:"bottom-left",
                title:'Document Approve',
                message:mess,
                notificationType:$notification.notificationType.success,
                color:'white',
                closebutton:true,
                showspeed:1000,
                hidespeed:20000
            });

result: {messageScope: k, containerId: "#notifycontainer", notificationId: "notificationid1", 
closeId: "closenotid1", messageId: "notifymsgid1"…} including angular container object 
and jquery container object

To do the simple version of call Just call the $notification.open with few parameters like

 var result= $notification.open(
            {               
                message:'Hi Message',
                notificationType:$notification.notificationType.success,             
            });

Above sample is simple version remaining parameters are taken from default.Now we see how to create a demo project .

First download the notification-rg.js and notification-rg.css from the following links.
Download link notification-rg    including the sample demo project.

Or from the Github copy paste the code in new file
notification-rg.js
notification-rg.css
demo.html
controller.js

After download the files , add the notification-rg.js and notification-rg.css in your project.
then inject the in your module "angularNotification" and use the service like $notification in your service by injecting it.

<link href="css/notification-rg.css" rel="stylesheet">

<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="application/javascript" src="js/angular.min.js"></script>

<script type="application/javascript" src="ang/notification-rg.js"></script>

then inject in the angular module

var notificationmodule = angular.module('notificationmodule',['angularNotification']);

notificationmodule.controller('nController', function ($scope,$rootScope,$notification) {



 });

now $notification.open method will trigger the notification in the web page , send the message we have to use the option parameter.

now we are going to see a different kind of samples to notify the message in webpage.

Simple Notification:
In simple notification we are going to see how to notify a simple message with some settings




sample code:
*****************
$scope.launch = function () {
       var result=  $notification.open(
            {
                position:"bottom-left",
                title:'',
                message:'Data is update correctly sampel code testi sas aggh .',
                notificationType:$notification.notificationType.warning,
                color:'white',
                closebutton:false,
                showspeed:200,
                hidespeed:400000,
                showeasing:'linear'
            });
        console.log(result);
    }

});



Advance Notification:
In advance notification we are going to set a some additional attributes as settings



sample code:
*****************
    var mess = '<div>Password :- <input type="password" id="pswd"                                           style="color:#000000;margin-bottom:4px;margin-top:5px"/></div>' +
                '<div style="margin-left:70px;"><button id="acceptbtn" type="button"                                 class="btn btn-primary">Accept</button>' +

                '<button type="button" class="btn btn-info" id="rejectbtn" style="margin: 0                  8px 0 8px">Reject</button></div>';



 $scope.advancelaunch = function () {
       
       var result= $notification.open(
            {
                position:"bottom-left",
                title:'Document Approve',
                message:mess,
                notificationType:$notification.notificationType.success,
                color:'white',
                closebutton:true,
                showspeed:1000,
                hidespeed:20000
            });

        var jobj = result.jObjectContainer;

        jobj.find('#acceptbtn').click(function () {
            var password = $('#pswd').val();
            console.log('Password is : '+password);
            console.log('Accepted');

        });

        jobj.find('#rejectbtn').click(function () {
            var password = $('#pswd').val();
            console.log('Password is :'+password);
            console.log('Rejected');
        });

        console.log(result);
    };


In this sample click event are called by assign the click event in the result of create notification method result using jObjectcontainer

Event Notification:
In event notification we are going to trigger an click event from the messages. using the angular and jquery





sample code:
*****************


    var ent = '<div>&nbsp; Document send for Review' +
                '<div style="float:left">Approve :- </div>' +
                '<div style="margin-left:70px">' +
                    '<div class="btn btn-xs btn-primary" ng-click="approve(\'yes\')"                                 style="margin-right:10px;margin-left:10px">Yes</div>' +
                    '<div class="btn btn-xs btn-warning" ng-                                                         click="approve(\'no\')">No</div>' +
                '</div>' +

              '</div>';

$scope.eventlaunch = function () {
        var result = $notification.open(
            {
                position:"bottom-right",
                title:'Verification',
                message:ent,
                notificationType:$notification.notificationType.information,
                color:'white',
                closebutton:true,
                hidespeed:40000
            });

        var $retscope = result.messageScope;

        $retscope.approve = function (data) {
            console.log(result);
            console.log(data);
        };

    };

In this sample click event is bind to the button by using the return object $scope value


No close button:
A notification with out close button




sample code:
*****************
   $scope.noclosebtn = function () {
        var result=  $notification.open(
            {
                position:"bottom-left",
                title:'No Close Button',
                message:'There is no correct way of declaring a object',
                notificationType:$notification.notificationType.dark,
                color:'white',
                closebutton:false,
                showspeed:2000,
                hidespeed:40000,
                showeasing:'linear'
            });

    };



No Title message
A notification with our title



Parameters in Options:

sample code:
*****************

    $scope.notitle  = function () {
        var result=  $notification.open(
            {
                position:"bottom-left",
                title:'',
                message:'Sample text to show the message of user',
                notificationType:$notification.notificationType.error,
                color:'white',
                closebutton:true,
                showspeed:500,
                hidespeed:40000,
                showeasing:'linear'
            });
    };


Output:
************


So for different kind of output, different input options , now we can see the options in detailed.
{}

position: 
*********
Defines the position of the notificaiton from where the popup will comes, sample values are  "bottom-right", "bottom-left", "top-left","top-right".

title:
*******
Define the Title of the notificatin {title:'sample title'}

message:
********
  Define the user messge to notify {message :'sample mesage'}

notificationType :
******************
  To define this we can use the predefind set of types like $notification.notificationType.error, notificationType have many values like

success,  error,  information, warning, alert, normal, dark,light,primary 

Instead of user set there own background color by sepcifying {notificationType:'#ffce34'}


color:
********
To set the fore color of the notification. {color:'white'}

closebutton:  To set whether the close button needs to visible or not {closebutton:true}
showspeed:  To set the speed , when the notification shows timeinterval
hidespeed:   To set the speed , when the notification hides time interval
showeasing:  Easing style on the showing context


For handling the events now we can see the returned object in detailed and how we can use that.
on creating a notification each one will return a object which consists of following properties
result = {}

       result.messageScope = $scope of that container
        result.containerId =  container id
        result.notificationId = notification id
        result.closeId =  close button id
        result.messageId = message container id
        result.jObjectContainer = container in jobject
        result.angularContainer = container in angular object





Test Html:
****************
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/notification-rg.css" rel="stylesheet">

</head>
<body data-ng-app="notificationmodule">


<div  style="margin-top:100px;margin-left:100px">
    <div data-ng-controller="nController">
        <div class="btn btn-info" ng-click="launch()">Simple notification</div>
        <div class="btn btn-info" ng-click="advancelaunch()">Advance notification</div>
        <div class="btn btn-info" ng-click="eventlaunch()">Event notification</div>
        <div class="btn btn-info" ng-click="noclosebtn()">No Close Button</div>
        <div class="btn btn-info" ng-click="notitle()">No Title</div>
    </div>
</div>

<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="application/javascript" src="js/angular.min.js"></script>
<script type="application/javascript" src="ang/notification-rg.js"></script>

<script type="application/javascript" src="ang/tst.js"></script>

</body>

</html>

Test Controller:
*****************


/**
 * Created by Rajesh on 01-11-2014.
 */

var notificationmodule = angular.module('notificationmodule',['angularNotification']);

notificationmodule.controller('nController', function ($scope,$rootScope,$notification) {


    var mess = '<div>Password :- <input type="password" id="pswd"                                               style="color:#000000;margin-bottom:4px;margin-top:5px"/></div>' +
                '<div style="margin-left:70px;"><button id="acceptbtn" type="button"                          class="btn btn-primary">Accept</button>' +
                '<button type="button" class="btn btn-info" id="rejectbtn" style="margin: 0                     8px 0 8px">Reject</button></div>';

    var ent = '<div>&nbsp; Document send for Review' +
                '<div style="float:left">Approve :- </div>' +
                '<div style="margin-left:70px">' +
                    '<div class="btn btn-xs btn-primary" ng-click="approve(\'yes\')"                                style="margin-right:10px;margin-left:10px">Yes</div>' +
                    '<div class="btn btn-xs btn-warning" ng-                                                        click="approve(\'no\')">No</div>'   +
                '</div>' +
              '</div>';

    $scope.advancelaunch = function () {
       var result= $notification.open(
            {
                position:"bottom-left",
                title:'Document Approve',
                message:mess,
                notificationType:$notification.notificationType.success,
                color:'white',
                closebutton:true,
                showspeed:1000,
                hidespeed:20000
            });

        var jobj = result.jObjectContainer;

        jobj.find('#acceptbtn').click(function () {
            var password = $('#pswd').val();
            console.log('Password is : '+password);
            console.log('Accepted');

        });

        jobj.find('#rejectbtn').click(function () {
            var password = $('#pswd').val();
            console.log('Password is :'+password);
            console.log('Rejected');
        });

        console.log(result);
    };

    $scope.eventlaunch = function () {
        var result = $notification.open(
            {
                position:"bottom-right",
                title:'Verification',
                message:ent,
                notificationType:$notification.notificationType.information,
                color:'white',
                closebutton:true,
                hidespeed:40000
            });

        var $retscope = result.messageScope;

        $retscope.approve = function (data) {
            console.log(result);
            console.log(data);
        };

    };

    $scope.noclosebtn = function () {
        var result=  $notification.open(
            {
                position:"bottom-left",
                title:'No Close Button',
                message:'There is no correct way of declaring a object',
                notificationType:$notification.notificationType.dark,
                color:'white',
                closebutton:false,
                showspeed:2000,
                hidespeed:40000,
                showeasing:'linear'
            });

    };

    $scope.notitle  = function () {
        var result=  $notification.open(
            {
                position:"bottom-left",
                title:'',
                message:'Sample text to show the message of user',
                notificationType:$notification.notificationType.error,
                color:'white',
                closebutton:true,
                showspeed:500,
                hidespeed:40000,
                showeasing:'linear'
            });
    };

    $scope.launch = function () {
       var result=  $notification.open(
            {
                position:"bottom-left",
                title:'',
                message:'Data is update correctly sampel code testi sas aggh .',
                notificationType:$notification.notificationType.warning,
                color:'white',
                closebutton:false,
                showspeed:200,
                hidespeed:400000,
                showeasing:'linear'
            });
        console.log(result);
    }

});




From this post you can see how to trigger an notification in an webpage using notification-rg.js


No comments:

Post a Comment