├── .gitignore
├── .npmignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── demo
    ├── app.js
    ├── assets
    │   ├── letter-j-32.ico
    │   └── sample.png
    ├── index.html
    └── message
    │   ├── message.html
    │   └── message.js
├── dist
    ├── angular-desktop-notification.js
    └── angular-desktop-notification.min.js
├── karma.conf.js
├── package.json
├── src
    ├── angular-desktop-notification.js
    └── module.js
└── tests
    └── angular-desktop-notification.spec.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /demo
2 | .gitignore
3 | /Gruntfile.js
4 | karma.conf.js
5 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 |     grunt.initConfig({
 3 |         browserify: {
 4 |             dev: {
 5 |                 src: ['src/module.js'],
 6 |                 dest: 'dist/angular-desktop-notification.js'
 7 |             }
 8 |         },
 9 |         uglify: {
10 |             prod: {
11 |                 options: { mangle: true, compress: true },
12 |                 src: 'dist/angular-desktop-notification.js',
13 |                 dest: 'dist/angular-desktop-notification.min.js'
14 |             }
15 |         }
16 |     });
17 | 
18 |     grunt.loadNpmTasks('grunt-browserify');
19 |     grunt.loadNpmTasks('grunt-contrib-uglify');
20 |     grunt.registerTask('default', ['browserify', 'uglify']);
21 | };
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Jhom San Pascual
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Angular Desktop Notification
  2 | A simple HTML5 notification for Angular 1
  3 | [DEMO](https://jmsanpascual.github.io/angular-desktop-notification/)
  4 | 
  5 | ## Getting Started
  6 | 1. Go to your project directory using your command line tool then install the project using npm
  7 | 
  8 |   ```shell
  9 |   npm install angular-desktop-notification
 10 |   ```
 11 | 2. Include angular.js and angular-desktop-notification.js to your index page.
 12 | 
 13 |   ```html
 14 |   <script type="text/javascript" src="angular.js"></script>
 15 |   <script type="text/javascript" src="angular-desktop-notification.js"></script>
 16 |   ```
 17 | 3. Add the ngDesktopNotification module to you application.
 18 | 
 19 |   ```javascript
 20 |   angular.module('myApp', ['ngDesktopNotification']);
 21 |   ```
 22 | 4. You can now use the injectable service 'desktopNotification'.
 23 | 
 24 |   ```javascript
 25 |   angular.module('myApp').controller(function (desktopNotification) {
 26 |     desktopNotification.show('My Notification');
 27 |   });
 28 |   ```
 29 | 5. You can also set the default app-wide configuration for desktopNotification
 30 | 
 31 |   ```javascript
 32 |   angular.module('myApp').config(function (desktopNotificationProvider) {
 33 |     desktopNotificationProvider.config({
 34 |       autoClose: false,
 35 |       showOnPageHidden: true
 36 |     });
 37 |   });
 38 |   ```
 39 | 
 40 | ## How to use
 41 | A simple usage would be, request the permission and display the notification in the success callback
 42 | ```javascript
 43 | desktopNotification.requestPermission().then(function (permission) {
 44 |   // User allowed the notification
 45 |   desktopNotification.show('Hello', {
 46 |     body: 'I am an HTML5 notification',
 47 |     onClick: function () {
 48 |       // Handle click event
 49 |     }
 50 |   });
 51 | }, function (permission) {
 52 |   // User denied the notification
 53 | });
 54 | ```
 55 | 
 56 | ## API Documentation
 57 | 
 58 | This method returns true if the browser supports the Notification API, false otherwise
 59 | ```javascript
 60 | desktopNotification.isSupported();
 61 | ```
 62 | 
 63 | This method will get the current permission set in the browser which could be one of the ff.
 64 | - desktopNotification.permissions.default
 65 | - desktopNotification.permissions.denied
 66 | - desktopNotification.permissions.granted
 67 | ```javascript
 68 | desktopNotification.currentPermission();
 69 | ```
 70 | 
 71 | This method returns a $q promise, if the user allowed the notification the successCallback will be executed, errorCallback will be executed otherwise
 72 | ```javascript
 73 | desktopNotification.requestPermission().then(successCallback, errorCallback);
 74 | ```
 75 | 
 76 | This method will display the notification using the parameter values
 77 | - title - should be a string
 78 | - options - should be an object with the ff. properties
 79 |   - options.body - the message of the notification
 80 |   - options.icon - a string path of an icon, jpg and etc.
 81 |   - options.autoClose - a boolean property that will close the notification after the duration specified (Defaults to true)
 82 |   - options.duration - an integer that will set the seconds before the notification is automatically closed (Defaults to 5)
 83 |   - options.showOnPageHidden - a boolean property that will only show the notification if the page is hidden (Defaults to false)
 84 |   - options.onClick - a function that will trigger when the notification is clicked (Defaults to none)
 85 | ```javascript
 86 | desktopNotification.show(title, options);
 87 | ```
 88 | > Note: Please see all the available parameters here at the [official documentation](https://developer.mozilla.org/en/docs/Web/API/notification#Instance_properties)
 89 | 
 90 | ## Limitations
 91 | Angular Desktop Notification is not supported in all browsers.  
 92 | Please see [supported browser versions](http://caniuse.com/#feat=notifications) for more information on the official support specification.
 93 | 
 94 | Also, only Chrome allows the desktop notification to persist, if and only if, the user hovers on it. Please check the [other browsers closing behavior](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API#Closing_notifications).
 95 | 
 96 | ## Inspirations and Motivations
 97 | - https://github.com/sagiegurari/angular-web-notification
 98 | - https://github.com/ttsvetko/HTML5-Desktop-Notifications
 99 | 
100 | ## License
101 | This project is licensed under the MIT License - see the [LICENSE](https://github.com/jmsanpascual/angular-desktop-notification/blob/master/LICENSE) file for details
102 | 
103 | ## TODO
104 | - [x] Build tools for concatenation and minification
105 | - [x] Unit tests (Incomplete)
106 | - [ ] Support for older browser versions and IE
107 | 


--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |     'use strict';
  3 | 
  4 |     angular
  5 |         .module('demo', ['ngDesktopNotification'])
  6 |         .controller('DemoController', DemoController);
  7 | 
  8 |     DemoController.$inject = ['$scope', 'desktopNotification'];
  9 | 
 10 |     function DemoController($scope, desktopNotification) {
 11 |         var vm = this,
 12 |             popup;
 13 | 
 14 |         vm.permission = undefined;
 15 |         vm.checkiFSupported = checkiFSupported;
 16 |         vm.requestPermission = requestPermission;
 17 |         vm.showNotification = showNotification;
 18 |         vm.showNotificationWithIcon = showNotificationWithIcon;
 19 |         vm.showNotificationWithClick = showNotificationWithClick;
 20 |         vm.openPopupWindow = openPopupWindow;
 21 |         vm.sendMessage = sendMessage;
 22 | 
 23 |         activate();
 24 | 
 25 |         function activate() {
 26 |             vm.isSupported = desktopNotification.isSupported();
 27 |             vm.permission = desktopNotification.currentPermission();
 28 |             vm.autoClose = true;
 29 |         }
 30 | 
 31 |         function checkiFSupported() {
 32 |             vm.isSupported = desktopNotification.isSupported();
 33 |             alert('Supported: ' + (vm.isSupported ? 'true' : 'false'));
 34 |         }
 35 | 
 36 |         function requestPermission() {
 37 |             desktopNotification.requestPermission().then(function (permission) {
 38 |                 vm.permission = permission;
 39 |                 alert('Permission: true');
 40 |             }, function (permission) {
 41 |                 vm.permission = permission;
 42 | 
 43 |                 if (vm.permission === 'denied') {
 44 |                     alert('Requesting permission again when the user has once blocked' +
 45 |                      ' the notification is not possible');
 46 |                 } else {
 47 |                     alert('Permission: false');
 48 |                 }
 49 |             });
 50 |         }
 51 | 
 52 |         function showNotification() {
 53 |             var notif = desktopNotification.show('1234', {
 54 |                 body: 'I am a simple notification',
 55 |                 autoClose: vm.autoClose
 56 |             });
 57 | 
 58 |             if (!notif) {
 59 |                 alert('Desktop notification is either not supported or blocked.');
 60 |             }
 61 |         }
 62 | 
 63 |         function showNotificationWithIcon() {
 64 |             var notif = desktopNotification.show('Notification with Icon', {
 65 |                 icon: 'assets/letter-j-32.ico',
 66 |                 body: 'I have an icon!',
 67 |                 autoClose: vm.autoClose
 68 |             });
 69 | 
 70 |             if (!notif) {
 71 |                 alert('Desktop notification is either not supported or blocked.');
 72 |             }
 73 |         }
 74 | 
 75 |         function showNotificationWithClick() {
 76 |             var notif = desktopNotification.show('Notification with Click Event', {
 77 |                 icon: 'assets/letter-j-32.ico',
 78 |                 body: 'Click me!',
 79 |                 autoClose: vm.autoClose,
 80 |                 onClick: function (event) {
 81 |                     alert('Notification is clicked!');
 82 |                 }
 83 |             });
 84 | 
 85 |             if (!notif) {
 86 |                 alert('Desktop notification is either not supported or blocked.');
 87 |             }
 88 |         }
 89 | 
 90 |         function openPopupWindow() {
 91 |             if (popup) {
 92 |                 alert('Popup is already open');
 93 |                 return;
 94 |             }
 95 | 
 96 |             popup = window.open('message/message.html');
 97 |         }
 98 | 
 99 |         function sendMessage(message) {
100 |             if (popup) {
101 |                 popup.postMessage(message, '*');
102 |             }
103 |         }
104 |     }
105 | 
106 | })();
107 | 


--------------------------------------------------------------------------------
/demo/assets/letter-j-32.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmsanpascual/angular-desktop-notification/106f1373d5a6a857489b36aae6f53b7f41c10923/demo/assets/letter-j-32.ico


--------------------------------------------------------------------------------
/demo/assets/sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmsanpascual/angular-desktop-notification/106f1373d5a6a857489b36aae6f53b7f41c10923/demo/assets/sample.png


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Angular Desktop Notification Demo</title>
 5 |     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 6 |   </head>
 7 |   <body ng-app="demo" ng-controller="DemoController as vm">
 8 |     <div class="container">
 9 |       <div class="row">
10 |         <h1>Angular HTML5 Desktop Notification Demo</h1><hr />
11 | 
12 |         <div class="col-md-12">
13 |           <h4>Utility Functions</h4>
14 |           <p>
15 |             Supported: {{ vm.isSupported }} <br>
16 |             Permission: {{ vm.permission }}
17 |           </p>
18 |           <button class="btn btn-info" ng-click="vm.checkiFSupported()">Check for browser support</button>
19 |           <button class="btn btn-info" ng-click="vm.requestPermission()">Request for permission</button>
20 |         </div><br>
21 | 
22 |         <div class="col-md-12">
23 |           <h4>Displaying Notifications</h4>
24 |           <div class="col-md-12">
25 |             autoClose: <input type="checkbox" ng-model="vm.autoClose" />
26 |           </div>
27 |           <button class="btn btn-info" ng-click="vm.showNotification()">Simple Notification</button>
28 |           <button class="btn btn-info" ng-click="vm.showNotificationWithIcon()">Notification with Icon</button>
29 |           <button class="btn btn-info" ng-click="vm.showNotificationWithClick()">Notification with Click Event</button>
30 |         </div><br>
31 | 
32 |         <div class="col-md-12">
33 |           <h4>Displaying Notifications Only When Page is Hidden</h4>
34 |           <i>(Open the popup window first, that page will receive the message that you will send)</i>
35 |           <input class="form-control" type="text" placeholder="Your message here" ng-model="vm.message" />
36 |           <br>
37 |           <button class="btn btn-info" ng-click="vm.openPopupWindow()">Open Popup Window</button>
38 |           <button class="btn btn-info" ng-click="vm.sendMessage(vm.message)">Send Message</button>
39 |         </div><br>
40 |       </div>
41 |     </div>
42 | 
43 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
44 |     <script src="app.js"></script>
45 |     <script src="../dist/angular-desktop-notification.min.js"></script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/demo/message/message.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Angular Desktop Notification Demo</title>
 6 |     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 7 |   </head>
 8 |   <body ng-app="message" ng-controller="MessageController as vm">
 9 |     <div class="container">
10 |       <div class="row">
11 |         <h1>1.) Return to main page and send a message</h1>
12 |         <p style="font-size:20px;">
13 |           Notification should work
14 |         </p>
15 |         <h1>2.) Move this page side by side with the main page then send a message</h1>
16 |         <p style="font-size:20px;">
17 |           <strong>Just like the image below:</strong> (Notification should not work)
18 |         </p>
19 |         <img src="../assets/sample.png" style="width:700px;"/>
20 |       </div>
21 |     </div>
22 | 
23 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
24 |     <script src="message.js"></script>
25 |     <script src="../../dist/angular-desktop-notification.min.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/demo/message/message.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |     'use strict';
 3 | 
 4 |     angular
 5 |         .module('message', ['ngDesktopNotification'])
 6 |         .controller('MessageController', MessageController);
 7 | 
 8 |     MessageController.$inject = ['desktopNotification'];
 9 | 
10 |     /* @ngInject */
11 |     function MessageController(desktopNotification) {
12 |         var vm = this;
13 | 
14 |         window.addEventListener('message', receiveMessage, false);
15 | 
16 |         function receiveMessage(event) {
17 |             var message = event.data;
18 | 
19 |             desktopNotification.show('Im at message.html (Click to focus)', {
20 |                 body: message,
21 |                 showOnPageHidden: true,
22 |                 onClick: function (event) {
23 |                     window.focus();
24 |                 }
25 |             });
26 |         }
27 |     }
28 | })();
29 | 


--------------------------------------------------------------------------------
/dist/angular-desktop-notification.js:
--------------------------------------------------------------------------------
  1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | 'use strict';
  3 | 
  4 | desktopNotification.$inject = [];
  5 | 
  6 | /* @ngInject */
  7 | function desktopNotification() {
  8 |     var settings = {
  9 |         autoClose: true,
 10 |         duration: 5,
 11 |         showOnPageHidden: false
 12 |     };
 13 | 
 14 |     return {
 15 |         config: config,
 16 |         $get: ['$q', '$timeout', '$window', 'PERMISSIONS', factory]
 17 |     };
 18 | 
 19 |     function config(options) {
 20 |         for (var key in options) {
 21 |             if (settings.hasOwnProperty(key) && options[key] != undefined) {
 22 |                 settings[key] = options[key];
 23 |             }
 24 |         }
 25 |     }
 26 | 
 27 |     function factory($q, $timeout, $window, PERMISSIONS) {
 28 |         var Notification = $window.Notification
 29 |                 || $window.mozNotification
 30 |                 || $window.webkitNotification;
 31 |         var service = {
 32 |             isSupported: isSupported,
 33 |             currentPermission: currentPermission,
 34 |             requestPermission: requestPermission,
 35 |             show: showNotification,
 36 |             permissions: {
 37 |                 'default': PERMISSIONS.DEFAULT,
 38 |                 'granted': PERMISSIONS.GRANTED,
 39 |                 'denied': PERMISSIONS.DENIED
 40 |             }
 41 |         };
 42 | 
 43 |         return service;
 44 | 
 45 |         // Public API
 46 | 
 47 |         function isSupported() {
 48 |             return !(typeof Notification === 'undefined');
 49 |         }
 50 | 
 51 |         function currentPermission() {
 52 |             // Wrap with a function, so that we can extend this easily to
 53 |             // support getting permissions using older API versions
 54 |             return (Notification || {}).permission;
 55 |         }
 56 | 
 57 |         function requestPermission() {
 58 |             if (!isSupported()) return $q.reject('Notification API not supported');
 59 | 
 60 |             var deferred = $q.defer();
 61 | 
 62 |             // Convert the ES6 promise to angular's $q promise
 63 |             Notification.requestPermission().then(function (permission) {
 64 |                 if (PERMISSIONS.GRANTED === permission) {
 65 |                     deferred.resolve(permission);
 66 |                 } else {
 67 |                     deferred.reject(permission);
 68 |                 }
 69 |             });
 70 | 
 71 |             return deferred.promise;
 72 |         }
 73 | 
 74 |         function showNotification(title, options) {
 75 |             // Ensures that options is always an object
 76 |             options = options || {};
 77 | 
 78 |             // Check first if supported, validate arguments, then check if
 79 |             // showOnPageHidden property is set to true, if yes then proceed
 80 |             // on checking if page is visible, lastly check if
 81 |             // notification is disabled by the client
 82 |             if (!isSupported() || !_isArgsValid(title, options) ||
 83 |                     _isPageVisible(options.showOnPageHidden) ||
 84 |                     currentPermission() !== PERMISSIONS.GRANTED) return;
 85 | 
 86 |             var notification = new Notification(title, options);
 87 |             var duration = options.duration || settings.duration;
 88 |             var autoClose = (options.autoClose === undefined)
 89 |                     ? settings.autoClose : options.autoClose;
 90 | 
 91 |             notification.onclick = options.onClick;
 92 | 
 93 |             // If autoClose is set to true, close the notification using the duration
 94 |             if (autoClose) _autoCloseAfter(notification, duration);
 95 | 
 96 |             return notification;
 97 |         }
 98 | 
 99 |         // Private functions
100 | 
101 |         function _isArgsValid(title, options) {
102 |             var isTitleString = angular.isString(title),
103 |                 isOnClickFunction = (!options.onClick || angular.isFunction(options.onClick));
104 | 
105 |             return (isTitleString && isOnClickFunction);
106 |         }
107 | 
108 |         function _isPageVisible(showOnPageHidden) {
109 |             // Check both showOnPageHidden parameter and default
110 |             if (!showOnPageHidden && !settings.showOnPageHidden) return;
111 | 
112 |             return !(
113 |                 window.document.hidden ||
114 |                 // Uncomment when MS support is added
115 |                 // window.document.msHidden ||
116 |                 window.document.mozHidden ||
117 |                 window.document.webkitHidden
118 |             );
119 |         }
120 | 
121 |         function _autoCloseAfter(notification, duration) {
122 |             var durationInMs = duration * 1000;
123 |             $timeout(notification.close.bind(notification), durationInMs, false);
124 |         }
125 |     }
126 | }
127 | 
128 | module.exports = desktopNotification;
129 | 
130 | },{}],2:[function(require,module,exports){
131 | 'use strict';
132 | 
133 | var desktopNotification = require('./angular-desktop-notification');
134 | 
135 | angular
136 |     .module('ngDesktopNotification', [])
137 |     .provider('desktopNotification', desktopNotification)
138 |     .constant('PERMISSIONS', {
139 |         DEFAULT: 'default',
140 |         GRANTED: 'granted',
141 |         DENIED: 'denied'
142 |     });
143 | 
144 | },{"./angular-desktop-notification":1}]},{},[2]);
145 | 


--------------------------------------------------------------------------------
/dist/angular-desktop-notification.min.js:
--------------------------------------------------------------------------------
1 | !function n(i,o,t){function e(u,a){if(!o[u]){if(!i[u]){var c="function"==typeof require&&require;if(!a&&c)return c(u,!0);if(r)return r(u,!0);var d=new Error("Cannot find module '"+u+"'");throw d.code="MODULE_NOT_FOUND",d}var s=o[u]={exports:{}};i[u][0].call(s.exports,function(n){var o=i[u][1][n];return e(o||n)},s,s.exports,n,i,o,t)}return o[u].exports}for(var r="function"==typeof require&&require,u=0;u<t.length;u++)e(t[u]);return e}({1:[function(n,i,o){"use strict";function t(){var n={autoClose:!0,duration:5,showOnPageHidden:!1};return{config:function(i){for(var o in i)n.hasOwnProperty(o)&&void 0!=i[o]&&(n[o]=i[o])},$get:["$q","$timeout","$window","PERMISSIONS",function(i,o,t,e){function r(){return!(void 0===s)}function u(){return(s||{}).permission}function a(n,i){var o=angular.isString(n),t=!i.onClick||angular.isFunction(i.onClick);return o&&t}function c(i){if(i||n.showOnPageHidden)return!(window.document.hidden||window.document.mozHidden||window.document.webkitHidden)}function d(n,i){var t=1e3*i;o(n.close.bind(n),t,!1)}var s=t.Notification||t.mozNotification||t.webkitNotification;return{isSupported:r,currentPermission:u,requestPermission:function(){if(!r())return i.reject("Notification API not supported");var n=i.defer();return s.requestPermission().then(function(i){e.GRANTED===i?n.resolve(i):n.reject(i)}),n.promise},show:function(i,o){if(o=o||{},r()&&a(i,o)&&!c(o.showOnPageHidden)&&u()===e.GRANTED){var t=new s(i,o),f=o.duration||n.duration,l=void 0===o.autoClose?n.autoClose:o.autoClose;return t.onclick=o.onClick,l&&d(t,f),t}},permissions:{default:e.DEFAULT,granted:e.GRANTED,denied:e.DENIED}}}]}}t.$inject=[],i.exports=t},{}],2:[function(n,i,o){"use strict";var t=n("./angular-desktop-notification");angular.module("ngDesktopNotification",[]).provider("desktopNotification",t).constant("PERMISSIONS",{DEFAULT:"default",GRANTED:"granted",DENIED:"denied"})},{"./angular-desktop-notification":1}]},{},[2]);


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | // Generated on Sat Sep 16 2017 12:47:12 GMT+0800 (Malay Peninsula Standard Time)
 3 | 
 4 | module.exports = function(config) {
 5 |     config.set({
 6 | 
 7 |         // base path that will be used to resolve all patterns (eg. files, exclude)
 8 |         basePath: '',
 9 | 
10 | 
11 |         // frameworks to use
12 |         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 |         frameworks: ['jasmine'],
14 | 
15 | 
16 |         // list of files / patterns to load in the browser
17 |         files: [
18 |             'node_modules/angular/angular.js',
19 |             'node_modules/angular-mocks/angular-mocks.js',
20 |             'dist/angular-desktop-notification.js',
21 |             'tests/angular-desktop-notification.spec.js'
22 |         ],
23 | 
24 | 
25 |         // list of files to exclude
26 |         exclude: [
27 |         ],
28 | 
29 | 
30 |         // preprocess matching files before serving them to the browser
31 |         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
32 |         preprocessors: {
33 |         },
34 | 
35 | 
36 |         // test results reporter to use
37 |         // possible values: 'dots', 'progress'
38 |         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
39 |         reporters: ['spec'],
40 | 
41 | 
42 |         // web server port
43 |         port: 9876,
44 | 
45 | 
46 |         // enable / disable colors in the output (reporters and logs)
47 |         colors: true,
48 | 
49 | 
50 |         // level of logging
51 |         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
52 |         logLevel: config.LOG_INFO,
53 | 
54 | 
55 |         // enable / disable watching file and executing tests whenever any file changes
56 |         autoWatch: true,
57 | 
58 | 
59 |         // start these browsers
60 |         // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
61 |         browsers: ['Chrome'],
62 | 
63 | 
64 |         // Continuous Integration mode
65 |         // if true, Karma captures browsers, runs the tests and exits
66 |         singleRun: false,
67 | 
68 |         // Concurrency level
69 |         // how many browser should be started simultaneous
70 |         concurrency: Infinity
71 |     })
72 | }
73 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-desktop-notification",
 3 |   "version": "1.1.6",
 4 |   "description": "A simple HTML5 notification for Angular 1",
 5 |   "main": "dist/angular-desktop-notification.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "angular",
11 |     "html5",
12 |     "notification"
13 |   ],
14 |   "author": {
15 |     "name": "Julius Marvin S. San Pascual",
16 |     "email": "jm.sanpascual@gmail.com"
17 |   },
18 |   "license": "MIT",
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/jmsanpascual/angular-desktop-notification.git"
22 |   },
23 |   "bugs": {
24 |     "url": "https://github.com/jmsanpascual/angular-desktop-notification/issues"
25 |   },
26 |   "homepage": "https://github.com/jmsanpascual/angular-desktop-notification#readme",
27 |   "devDependencies": {
28 |     "angular": "^1.6.6",
29 |     "angular-mocks": "^1.6.6",
30 |     "grunt": "^1.0.1",
31 |     "grunt-browserify": "^5.2.0",
32 |     "grunt-contrib-uglify": "^3.1.0",
33 |     "jasmine-core": "^2.8.0",
34 |     "karma": "^1.7.1",
35 |     "karma-chrome-launcher": "^2.2.0",
36 |     "karma-jasmine": "^1.1.0",
37 |     "karma-spec-reporter": "0.0.31"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/angular-desktop-notification.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | desktopNotification.$inject = [];
  4 | 
  5 | /* @ngInject */
  6 | function desktopNotification() {
  7 |     var settings = {
  8 |         autoClose: true,
  9 |         duration: 5,
 10 |         showOnPageHidden: false
 11 |     };
 12 | 
 13 |     return {
 14 |         config: config,
 15 |         $get: ['$q', '$timeout', '$window', 'PERMISSIONS', factory]
 16 |     };
 17 | 
 18 |     function config(options) {
 19 |         for (var key in options) {
 20 |             if (settings.hasOwnProperty(key) && options[key] != undefined) {
 21 |                 settings[key] = options[key];
 22 |             }
 23 |         }
 24 |     }
 25 | 
 26 |     function factory($q, $timeout, $window, PERMISSIONS) {
 27 |         var Notification = $window.Notification
 28 |                 || $window.mozNotification
 29 |                 || $window.webkitNotification;
 30 |         var service = {
 31 |             isSupported: isSupported,
 32 |             currentPermission: currentPermission,
 33 |             requestPermission: requestPermission,
 34 |             show: showNotification,
 35 |             permissions: {
 36 |                 'default': PERMISSIONS.DEFAULT,
 37 |                 'granted': PERMISSIONS.GRANTED,
 38 |                 'denied': PERMISSIONS.DENIED
 39 |             }
 40 |         };
 41 | 
 42 |         return service;
 43 | 
 44 |         // Public API
 45 | 
 46 |         function isSupported() {
 47 |             return !(typeof Notification === 'undefined');
 48 |         }
 49 | 
 50 |         function currentPermission() {
 51 |             // Wrap with a function, so that we can extend this easily to
 52 |             // support getting permissions using older API versions
 53 |             return (Notification || {}).permission;
 54 |         }
 55 | 
 56 |         function requestPermission() {
 57 |             if (!isSupported()) return $q.reject('Notification API not supported');
 58 | 
 59 |             var deferred = $q.defer();
 60 | 
 61 |             // Convert the ES6 promise to angular's $q promise
 62 |             Notification.requestPermission().then(function (permission) {
 63 |                 if (PERMISSIONS.GRANTED === permission) {
 64 |                     deferred.resolve(permission);
 65 |                 } else {
 66 |                     deferred.reject(permission);
 67 |                 }
 68 |             });
 69 | 
 70 |             return deferred.promise;
 71 |         }
 72 | 
 73 |         function showNotification(title, options) {
 74 |             // Ensures that options is always an object
 75 |             options = options || {};
 76 | 
 77 |             // Check first if supported, validate arguments, then check if
 78 |             // showOnPageHidden property is set to true, if yes then proceed
 79 |             // on checking if page is visible, lastly check if
 80 |             // notification is disabled by the client
 81 |             if (!isSupported() || !_isArgsValid(title, options) ||
 82 |                     _isPageVisible(options.showOnPageHidden) ||
 83 |                     currentPermission() !== PERMISSIONS.GRANTED) return;
 84 | 
 85 |             var notification = new Notification(title, options);
 86 |             var duration = options.duration || settings.duration;
 87 |             var autoClose = (options.autoClose === undefined)
 88 |                     ? settings.autoClose : options.autoClose;
 89 | 
 90 |             notification.onclick = options.onClick;
 91 | 
 92 |             // If autoClose is set to true, close the notification using the duration
 93 |             if (autoClose) _autoCloseAfter(notification, duration);
 94 | 
 95 |             return notification;
 96 |         }
 97 | 
 98 |         // Private functions
 99 | 
100 |         function _isArgsValid(title, options) {
101 |             var isTitleString = angular.isString(title),
102 |                 isOnClickFunction = (!options.onClick || angular.isFunction(options.onClick));
103 | 
104 |             return (isTitleString && isOnClickFunction);
105 |         }
106 | 
107 |         function _isPageVisible(showOnPageHidden) {
108 |             // Check both showOnPageHidden parameter and default
109 |             if (!showOnPageHidden && !settings.showOnPageHidden) return;
110 | 
111 |             return !(
112 |                 window.document.hidden ||
113 |                 // Uncomment when MS support is added
114 |                 // window.document.msHidden ||
115 |                 window.document.mozHidden ||
116 |                 window.document.webkitHidden
117 |             );
118 |         }
119 | 
120 |         function _autoCloseAfter(notification, duration) {
121 |             var durationInMs = duration * 1000;
122 |             $timeout(notification.close.bind(notification), durationInMs, false);
123 |         }
124 |     }
125 | }
126 | 
127 | module.exports = desktopNotification;
128 | 


--------------------------------------------------------------------------------
/src/module.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var desktopNotification = require('./angular-desktop-notification');
 4 | 
 5 | angular
 6 |     .module('ngDesktopNotification', [])
 7 |     .provider('desktopNotification', desktopNotification)
 8 |     .constant('PERMISSIONS', {
 9 |         DEFAULT: 'default',
10 |         GRANTED: 'granted',
11 |         DENIED: 'denied'
12 |     });
13 | 


--------------------------------------------------------------------------------
/tests/angular-desktop-notification.spec.js:
--------------------------------------------------------------------------------
  1 | describe('Angular Desktop Notification', function () {
  2 |     var $q, $rootScope, $window;
  3 | 
  4 |     beforeEach(module('ngDesktopNotification'));
  5 | 
  6 |     beforeEach(module(function ($provide) {
  7 |         var Notification = function (title, options) {
  8 |             this.title = title;
  9 |             this.options = options;
 10 |             this.close = function () {};
 11 |         };
 12 |         Notification.permission = 'default';
 13 |         Notification.requestPermission = function () {};
 14 | 
 15 |         $window = { Notification: Notification };
 16 |         $provide.value('$window', $window);
 17 |     }));
 18 | 
 19 |     beforeEach(inject(function ($injector) {
 20 |         $q = $injector.get('$q');
 21 |         $rootScope = $injector.get('$rootScope');
 22 |         $window = $injector.get('$window');
 23 |         this.desktopNotification = $injector.get('desktopNotification');
 24 |     }));
 25 | 
 26 |     it('should exist', function () {
 27 |         expect(this.desktopNotification).toBeDefined();
 28 |     });
 29 | 
 30 |     describe('when browser supports Notification', function () {
 31 |         describe('.isSupported()', function () {
 32 |             beforeEach(function () {
 33 |                 spyOn(this.desktopNotification, 'isSupported').and.callThrough();
 34 |             });
 35 | 
 36 |             it('should return true', function () {
 37 |                 expect(this.desktopNotification.isSupported()).toBe(true);
 38 |             });
 39 |         });
 40 | 
 41 |         describe('.currentPermission()', function () {
 42 |             beforeEach(function () {
 43 |                 spyOn(this.desktopNotification, 'currentPermission').and.callThrough();
 44 |             });
 45 | 
 46 |             it('should return \'default\' permission', function () {
 47 |                 expect(this.desktopNotification.currentPermission()).toBe('default');
 48 |             });
 49 |         });
 50 | 
 51 |         describe('.requestPermission()', function () {
 52 |             beforeEach(function () {
 53 |                 spyOn(this.desktopNotification, 'requestPermission').and.callThrough();
 54 |             });
 55 | 
 56 |             describe('with default permission', function () {
 57 |                 beforeEach(function () {
 58 |                     spyOn($window.Notification, 'requestPermission').and.callFake(function () {
 59 |                         return $q.when('default');
 60 |                     });
 61 |                 });
 62 | 
 63 |                 it('should return a rejected promise with \'default\' permission', function () {
 64 |                     this.desktopNotification.requestPermission().catch(function (permission) {
 65 |                         expect(permission).toBe('default');
 66 |                     });
 67 | 
 68 |                     $rootScope.$digest(); // Triggers the promise
 69 |                     expect($window.Notification.requestPermission).toHaveBeenCalled();
 70 |                 });
 71 |             });
 72 | 
 73 |             describe('with denied permission', function () {
 74 |                 beforeEach(function () {
 75 |                     spyOn($window.Notification, 'requestPermission').and.callFake(function () {
 76 |                         return $q.when('denied');
 77 |                     });
 78 |                 });
 79 | 
 80 |                 it('should return a rejected promise with \'denied\' permission', function () {
 81 |                     this.desktopNotification.requestPermission().catch(function (permission) {
 82 |                         expect(permission).toBe('denied');
 83 |                     });
 84 | 
 85 |                     $rootScope.$digest(); // Triggers the promise
 86 |                     expect($window.Notification.requestPermission).toHaveBeenCalled();
 87 |                 });
 88 |             });
 89 | 
 90 |             describe('with granted permission', function () {
 91 |                 beforeEach(function () {
 92 |                     spyOn($window.Notification, 'requestPermission').and.callFake(function () {
 93 |                         return $q.when('granted');
 94 |                     });
 95 |                 });
 96 | 
 97 |                 it('should return a resolved promise with \'granted\' permission', function () {
 98 |                     this.desktopNotification.requestPermission().catch(function (permission) {
 99 |                         expect(permission).toBe('granted');
100 |                     });
101 | 
102 |                     $rootScope.$digest(); // Triggers the promise
103 |                     expect($window.Notification.requestPermission).toHaveBeenCalled();
104 |                 });
105 |             });
106 |         });
107 | 
108 |         describe('.showNotification(title, options)', function () {
109 |             beforeEach(function () {
110 |                 this.title = 'Unit Test';
111 |                 this.options = {
112 |                     icon: 'http://google.com/1234123',
113 |                     body: 'I am the body of unit testing',
114 |                     onClick: function () {
115 |                         console.log('I am clicked!');;
116 |                     }
117 |                 };
118 |                 $window.Notification.permission = 'granted';
119 | 
120 |                 spyOn($window, 'Notification').and.callFake(function () {
121 |                     return new $window.Notification(this.title, this.options);
122 |                 });
123 |                 spyOn(this.desktopNotification, 'show').and.callThrough();
124 | 
125 |                 this.notif = this.desktopNotification.show(this.title, this.options);
126 |             });
127 | 
128 |             xit('should instantiate the Notification constructor', function () {
129 |                 expect($window.Notification).toHaveBeenCalledWith(this.title, this.options);
130 |             });
131 | 
132 |             xit('should return an instantiated Notification', function () {
133 |                 expect(this.notif instanceof Notification).toBeTruthy();
134 |             });
135 |         });
136 |     });
137 | });
138 | 


--------------------------------------------------------------------------------