Skip to content

Instantly share code, notes, and snippets.

@rajhseg

rajhseg/demo.html

Created November 3, 2014 03:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rajhseg/a85d16360e1d9bbad8d4 to your computer and use it in GitHub Desktop.
Save rajhseg/a85d16360e1d9bbad8d4 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Notification library , where users can easily raise the notification in the web in all type of mechanism including Push with angular.js as dependency
Raw
demo.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>
Raw
notification-rg.css
/**
* Created by Rajesh on 01-11-2014.
*/
.notifyinnercontainer
{
width: 250px;;
display: none;
word-wrap: break-word;
}
.notifytitle{
float: left;
font-weight: bold;
word-wrap: break-word;
font-size:13px
}
.notifyclosebtn{
cursor:pointer;
background-color:transparent;
float:right;
padding:0px;
border:none;
font-size:16px;
width:10px;
height:0px
}
.notifyinnercontainer > div {
width: 250px;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
box-shadow: 0 0 10px #999999;
-moz-box-shadow: 0 0 10px #999999;
-webkit-box-shadow: 0 0 10px #999999;
margin: 0 0 6px;
padding: 5px 5px 5px 5px;
color: #ffffff;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
.closenotify{
position: relative;
right: -2px;
top: -5px;
font-size: 16px;
font-weight: bolder;
}
Raw
notification-rg.js
/**
* Created by Rajesh on 01-11-2014.
*/
var angularNotification = angular.module('angularNotification',[]);
angularNotification.factory('$notification', function ($timeout,$compile) {
var factory = {};
var template= '<div id="[notifyid]" class="notifyinnercontainer">' +
'<div style="background-color:[notificationbgcolor];color:[color];display: inline-block">'+
'<div class="notifytitle">[title]</div>'+
'<div class="closenotify"><div id="[closeid]" class="notifyclosebtn">&times;</div></div>'+
'<div id="[msgid]" style="float: left;font-size:12px">[message]</div>' +
'</div>' +
'</div>';
var containertemplate = '<div id="notifycontainer" style="z-index:999999;width:250px;position: fixed;">';
var id='notificationid';
var closeid='closenotid';
var msgid = 'notifymsgid';
var i=0;
var height = 0;
function Initoptions(){
return{
position: "bottom-right",
title:'',
message:'',
notificationType:'#285e8e',
color:'white',
closebutton:true,
showspeed:350,
hidespeed:6000,
showeasing:'linear'
};
}
factory.notificationType={
success:'#168824',
error:'#E73114',
information:'#285e8e',
warning:'#fc9503',
alert:'#E04551',
normal:'#ffffff',
dark:'#000000',
light:'#7B8C9D',
primary:'#45BDE0'
};
factory.open= function (overrideoptions) {
var result={};
var options = angular.extend({},Initoptions(),overrideoptions);
var container = null;
var notifytemplate = template;
i=i+1;
if(options.notificationType=='#ffffff' || options.notificationType =='white'){
options.color = 'black';
}
notifytemplate=notifytemplate.replace('[notifyid]',(id+i));
notifytemplate = notifytemplate.replace('[closeid]',(closeid+i));
notifytemplate = notifytemplate.replace('[msgid]',(msgid+i));
notifytemplate = notifytemplate.replace('[notificationbgcolor]',options.notificationType);
notifytemplate = notifytemplate.replace('[color]',options.color);
notifytemplate = notifytemplate.replace('[title]',options.title);
notifytemplate = notifytemplate.replace('[message]',options.message);
var $bodyelement = angular.element('body');
var $scope = $bodyelement.scope();
var tileNotify = $compile(notifytemplate)($scope); //angular.element(notifytemplate);
container = angular.element('#notifycontainer');
if(container.length > 0){
container.prepend(tileNotify);
}
else {
container = $compile(containertemplate)($scope);
container.append(tileNotify);
container.appendTo(angular.element('body'));
}
var xplace = options.position.split('-')[0] !='' ? options.position.split('-')[0] : "bottom";
var yplace = options.position.split('-')[1] != '' ? options.position.split('-')[1] : "right";
container.css(xplace,'12px').css(yplace,'12px');
if(options.title==''){
$('#'+msgid+i).css('padding-right','12px').css('margin-top','3px');
}else{
$('#'+msgid+i).css('margin-top','-2px');
}
if(!options.closebutton){
$('#'+(closeid+i)).parent().css('display','none');
$('#'+msgid+i).css('padding-right','1px')
}
$('#'+(closeid+i)).click(function(){
$(this).parent().parent().parent().hide("slow","linear",function(){
$(this).remove();
});
});
var cid = '#'+(id+i);
var ismouseover = false;
angular.element(cid).bind('mouseover', function (event) {
ismouseover = true;
$(cid).stop();
$(cid).css('opacity','1');
});
angular.element(cid).bind('mouseleave', function (event) {
ismouseover = false;
setTimeout(function(){
fadeoutdiv();
},options.hidespeed);
});
var fadeoutdiv = function () {
if(!ismouseover) {
$(cid).fadeOut("slow",
function () {
$(cid).remove();
});
}
};
$(cid).show(options.showspeed,options.showeasing,function(){
setTimeout(function(){
fadeoutdiv();
},options.hidespeed);
});
angular.element(cid).css('cursor','pointer');
result.messageScope = $scope;
result.containerId = '#notifycontainer';
result.notificationId = (id+i);
result.closeId = (closeid+i);
result.messageId = (msgid+i);
result.jObjectContainer = $(result.containerId);
result.angularContainer = container;
return result;
};
return factory;
});
Raw
sampledemo.js
/**
* Created by Rajesh on 01-11-2014.
Link to notification-rg.css <link href="notification-rg.css" rel="stylesheet"/>
Link to notification-rg.js <script src="notification-rg.js"></script>
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
*/
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment