Last active
February 16, 2016 17:25
-
-
Save csasbach/8c6104cce016783832ce to your computer and use it in GitHub Desktop.
An Angular Service for Queueing Alerts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* An angular service for managing alerts. | |
* Alerts reference the action from which they were generated | |
* via an actionID. Alerts can be closed individualy, in | |
* groups by action ID, or all of them can be cleared at once. | |
* | |
* Designed primarily to work with Bootrstrap UI alerts but | |
* could easily be used with other alert paradigms. | |
*/ | |
app.factory("alertService", function () { | |
// stores arrays of alerts indexed by action ID | |
var alertGroups = {}; | |
return { | |
// Get a reference to the alertGroups object | |
getAlerts: function () { | |
return alertGroups; | |
}, | |
// generic method for adding an alert | |
addAlert: function (type, actionID, message) { | |
if (alertGroups[actionID] == undefined) | |
alertGroups[actionID] = []; | |
alertGroups[actionID].push({ type: type, message: message }); | |
}, | |
// adds an info alert | |
addInfo : function (actionID, message) { | |
this.addAlert('info',actionID,message); | |
}, | |
// adds a success alert | |
addSuccess: function (actionID, message) { | |
this.addAlert('success', actionID, message); | |
}, | |
// adds a warning alert | |
addWarning: function (actionID, message) { | |
this.addAlert('warning', actionID, message); | |
}, | |
// adds an error alert | |
addError: function (actionID,message) { | |
this.addAlert('danger', actionID, message); | |
}, | |
// closes an alert | |
closeAlert : function (actionID,index) { | |
alertGroups[actionID].splice(index, 1); | |
}, | |
// clear all alerts for one action ID | |
clearActionAlerts: function (actionID) { | |
alertGroups[actionID] = []; | |
}, | |
// clears absolutely all alerts | |
clearAllAlerts : function () { | |
alertGroups = {} | |
}, | |
// generates an action ID | |
getGuid : function(){ | |
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { | |
var v = new Uint8Array(1); | |
if (window.crypto == undefined) { | |
window.msCrypto.getRandomValues(v); | |
} | |
else { | |
window.crypto.getRandomValues(v); | |
} | |
v = v[0]/255; | |
var r = v*16|0, v = c == 'x' ? r : (r&0x3|0x8); | |
return v.toString(16); | |
}); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
app.controller('myController',['$scope','alertService',function($scope,alertService){ | |
// add a reference to the alerts in the alerts service to this scope | |
$scope.alerts = alertService.getAlerts(), | |
// close an alert using the alerts service | |
$scope.closeAlert = alertService.closeAlert, | |
$scope.doSomething = function(){ | |
var actionID = alertService.getGuid(); | |
alertService.addInfo(actionID,"We're doing something!"); | |
} | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- snippet /--> | |
<div id="alerts" ng-repeat="(actionID,alertGroup) in alerts"> | |
<uib-alert ng-repeat="alert in alertGroup" | |
type="{{alert.type}}" close="closeAlert(actionID,$index)" | |
dismiss-on-timeout="{{alert.type == 'info'?99999:5000;}}"> | |
{{alert.message}} | |
</uib-alert> | |
</div> | |
<!-- snippet /--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment