Skip to content

Instantly share code, notes, and snippets.

@ccfiel
Created June 28, 2013 02:24
Show Gist options
  • Save ccfiel/5882006 to your computer and use it in GitHub Desktop.
Save ccfiel/5882006 to your computer and use it in GitHub Desktop.
Angular-Notifications
angular.module('notifications', []).factory('$notification', [
'$timeout',
function ($timeout) {
console.log('notification service online');
var notifications = JSON.parse(localStorage.getItem('$notifications')) || [], queue = [];
var settings = {
info: {
duration: 5000,
enabled: true
},
warning: {
duration: 5000,
enabled: true
},
error: {
duration: 5000,
enabled: true
},
success: {
duration: 5000,
enabled: true
},
progress: {
duration: 0,
enabled: true
},
custom: {
duration: 35000,
enabled: true
},
details: true,
localStorage: false,
html5Mode: false,
html5DefaultIcon: 'icon.png'
};
function html5Notify(icon, title, content, ondisplay, onclose) {
if (window.webkitNotifications.checkPermission() === 0) {
if (!icon) {
icon = 'favicon.ico';
}
var noti = window.webkitNotifications.createNotification(icon, title, content);
if (typeof ondisplay === 'function') {
noti.ondisplay = ondisplay;
}
if (typeof onclose === 'function') {
noti.onclose = onclose;
}
noti.show();
} else {
settings.html5Mode = false;
}
}
return {
disableHtml5Mode: function () {
settings.html5Mode = false;
},
disableType: function (notificationType) {
settings[notificationType].enabled = false;
},
enableHtml5Mode: function () {
settings.html5Mode = this.requestHtml5ModePermissions();
},
enableType: function (notificationType) {
settings[notificationType].enabled = true;
},
getSettings: function () {
return settings;
},
toggleType: function (notificationType) {
settings[notificationType].enabled = !settings[notificationType].enabled;
},
toggleHtml5Mode: function () {
settings.html5Mode = !settings.html5Mode;
},
requestHtml5ModePermissions: function () {
if (window.webkitNotifications) {
console.log('notifications are available');
if (window.webkitNotifications.checkPermission() === 0) {
return true;
} else {
window.webkitNotifications.requestPermission(function () {
if (window.webkitNotifications.checkPermission() === 0) {
settings.html5Mode = true;
} else {
settings.html5Mode = false;
}
});
return false;
}
} else {
console.log('notifications are not supported');
return false;
}
},
getAll: function () {
return notifications;
},
getQueue: function () {
return queue;
},
info: function (title, content, userData) {
console.log(title, content);
return this.awesomeNotify('info', 'info', title, content, userData);
},
error: function (title, content, userData) {
return this.awesomeNotify('error', 'remove', title, content, userData);
},
success: function (title, content, userData) {
return this.awesomeNotify('success', 'ok', title, content, userData);
},
warning: function (title, content, userData) {
return this.awesomeNotify('warning', 'exclamation', title, content, userData);
},
awesomeNotify: function (type, icon, title, content, userData) {
return this.makeNotification(type, false, icon, title, content, userData);
},
notify: function (image, title, content, userData) {
return this.makeNotification('custom', image, true, title, content, userData);
},
makeNotification: function (type, image, icon, title, content, userData) {
var notification = {
'type': type,
'image': image,
'icon': icon,
'title': title,
'content': content,
'timestamp': +new Date(),
'userData': userData
};
notifications.push(notification);
if (settings.html5Mode) {
html5Notify(image, title, content, function () {
console.log('inner on display function');
}, function () {
console.log('inner on close function');
});
} else {
queue.push(notification);
$timeout(function removeFromQueueTimeout() {
queue.splice(queue.indexOf(notification), 1);
}, settings[type].duration);
}
this.save();
return notification;
},
save: function () {
if (settings.localStorage) {
localStorage.setItem('$notifications', JSON.stringify(notifications));
}
},
restore: function () {
},
clear: function () {
notifications = [];
this.save();
}
};
}
]).directive('notifications', [
'$notification',
'$compile',
function ($notification, $compile) {
console.log('this is a new directive');
var html = '<div class="dr-notification-wrapper" ng-repeat="noti in queue">' + '<div class="dr-notification-close-btn" ng-click="removeNotification(noti)">' + '<i class="icon-remove"></i>' + '</div>' + '<div class="dr-notification">' + '<div class="dr-notification-image dr-notification-type-{{noti.type}}" ng-switch on="noti.image">' + '<i class="icon-{{noti.icon}}" ng-switch-when="false"></i>' + '<img ng-src="{{noti.image}}" ng-switch-default />' + '</div>' + '<div class="dr-notification-content">' + '<h3 class="dr-notification-title">{{noti.title}}</h3>' + '<p class="dr-notification-text">{{noti.content}}</p>' + '</div>' + '</div>' + '</div>';
function NotificationsCtrl($scope) {
$scope.queue = $notification.getQueue();
$scope.removeNotification = function (noti) {
$scope.queue.splice($scope.queue.indexOf(noti), 1);
};
}
function link(scope, element, attrs) {
var position = attrs.notifications;
position = position.split(' ');
element.addClass('dr-notification-container');
for (var i = 0; i < position.length; i++) {
element.addClass(position[i]);
}
}
return {
restrict: 'A',
scope: {},
template: html,
link: link,
controller: NotificationsCtrl
};
}
]);
@bmomani1
Copy link

bmomani1 commented Oct 2, 2017

how to use it?

@BMomani
Copy link

BMomani commented Oct 2, 2017

how to use it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment