<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.3.6" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
<script src="notifier.js" defer></script>
</head>
<body ng-controller="myController">
<h1>Migrating from Flash to notifier</h1>
<p>Basically, you cannot inject <var>flash</var> as a dependency. You must inject <var>notifer</var>.</p>
<code>
<pre>
app.controller('myController',function( $scope, otherThing, <strong>notifier</strong> ){
<strong>notifier</strong>.notice('Hey there, person!');
});
</pre>
</code>
<p>examples:</p>
<button class="bad" ng-click="doSomethingShitty()">error</button>
<button class="ok" ng-click="doSomethingNeutral()">notice</button>
<button class="good" ng-click="doSomethingGood()">sucess</button>
</body>
</html>
// Code goes here
var app = angular.module('myApp', []);
app.controller('myController',function($scope, notifier){
$scope.doSomethingShitty = function(){
notifier.error('Aw dude, that really sux');
};
$scope.doSomethingGood = function(){
notifier.success('Fantastic! that really is wonderful');
};
$scope.doSomethingNeutral = function(){
notifier.notice('Meh, whatever.');
};
});
/* Styles go here */
.bad {
background-color: rgba(254,0,0,.5);
}
.good {
background-color: rgba(0,254,0,.5);
}
.ok {
background-color: rgba(100,100,100,.5);
}
pre {
background-color: rgba(0,0,254,.1);
padding: 1em;
}
This is a simple wrapper around Desktop Notifications as an Angular service.
"use strict";
app.factory('notifier',function(){
var uid = function(){
return Math.random().toString(16);
};
var pepper = '_v1.0.1';
var severities = [
'success',
'info',
'notice',
'warning',
'alert',
'error',
'note',
'thankyou',
'conversation'
];
/**
* Send an HTML5 desktop notification
* @requires (or at least wants) polyill.desktopNotification.js
* @param {String} body - The body of the message
* @param {String} title - The title of the message
* @param {String} severity - used to determine what icon to show
*/
var notify = function(envelope){
var r;
var severity = envelope.severity || "notice";
var icon = 'http://55125876.ngrok.com/images/ui/handdrawn/' + severity + '.png';
var tag = envelope.messageId || uid();
var title = envelope.payload.title;
var body = envelope.payload.body;
var cb = function(status){
// For old browsers that don't support this property natively
if (Notification.permission !== status) {
Notification.permission = status;
}
switch (status) {
case 'granted':
new Notification(title,{
tag: tag,
body: body,
icon: icon
});
r = envelope;
break;
default:
alert(title + "\n" + body);
envelope.notificationType = 'alert';
r = envelope;
}
};
if (window.document.hidden) {
// if we are notifying an inactive browser session
// we want to provide more context by using the megaloid logo
icon = '/images/megaloid.logo.02.png';
}
if (Notification.permission === 'default') {
Notification.requestPermission(cb);
} else {
cb(Notification.permission);
}
return r;
};
var notifier = {};
/**
* attach 1 convenience function for each severity type
* @call it like this: notifier.info("this is my info message"), or notifier.error("this is my error message")
*/
var convencience_function = function(severity,message){
if (typeof message !== 'string' || !message.length) {
throw new Error('You must include a message when calling notifer.notify()');
}
var envelope = {
severity: severity,
payload: {
title: severity,
body: message
}
};
return notify.call(null,envelope);
};
severities.forEach(function(severity){
notifier[severity] = convencience_function.bind(null,severity);
});
return notifier;
});