angularjs-notify

<html ng-app="examples">

  <head>
    <title>Angular Notifications Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="angularjs-notify.css" />
    <script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="angular-animate@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>
    <script data-require="lodash.js@3.8.0" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
    <script src="angularjs-notify.min.js"></script>
    <script src="angular-notifications-example-controller.js"></script>
  </head>

  <body>
    <angularjs-notify></angularjs-notify>
    
    <div ng-controller="angularjsNotifyExampleController">
      <button type="button" class="btn btn-success" ng-click="addNotification('success', 'message')">Success</button>
      <button type="button" class="btn btn-info" ng-click="addNotification('info', 'message')">Info</button>
      <button type="button" class="btn btn-warning" ng-click="addNotification('warning', 'message')">Warning</button>
      <button type="button" class="btn btn-danger" ng-click="addNotification('danger', 'message')">Danger</button>
    </div>
  </body>

</html>

angular.

  module('examples', [
    'angularjsNotify',
    'ngAnimate'
  ]).

  config(['NotifyProvider', function (NotifyProvider) {
    NotifyProvider.config.displayTime = 3000;
  }]).

  controller('angularjsNotifyExampleController', [
    '$scope', 'Notify',
    function ($scope, Notify) {
      $scope.addNotification = function (msgType, msg) {
        Notify.addMessage(msg, msgType);
      };
    }
  ]);

.ng-enter,
.ng-leave,
.ng-move {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.ng-enter,
.ng-move {
  opacity: 0;
  /*height: 0;*/
  /*overflow: hidden;*/
}

.ng-move.ng-move-active,
.ng-enter.ng-enter-active {
  opacity: 1;
  /*height: 60px;*/
}

.ng-leave {
  opacity: 1;
  overflow: hidden;
}

.ng-leave.ng-leave-active {
  opacity: 0;
  /*height: 0;*/
  /*padding-top: 0;*/
  /*padding-bottom: 0;*/
}

/**
 * angularjs-notify - AngularJS plugin to show notifications. Has a directive for positioning the notifications and works out of the box with Rails
 * @author Cristian Stănescu
 * @version v1.0.0
 * @link https://github.com/cristianstanescu/angularjs-notify
 * @license MIT
 */
angular.module("angularjsNotify",[]).provider("Notify",function(){function e(e){var t=e.contexts,s=e.keysToSkip,n=[];this.displayTime=e.displayTime,this.addMessage=function(e,t){function i(e){return!e||s.indexOf(e.toLowerCase())>-1?"":e.replace("_"," ")+" "}function a(e,s){n.push({context:t||"info",text:_.trim(_.capitalize(i(e)+s))}),n.length>=10&&(n=_.slice(n,0,10))}function o(e){_.each(e,function(e,t,s){if(e instanceof Array)_.each(e,function(e){a(t,e)});else{var n="string"==typeof t?t:null;a(n,e)}})}"string"==typeof e?a(null,e):o(e)},this.getMessages=function(){return n},this.removeFirstMessage=function(){n=_.rest(n)},this.removeMessage=function(e){n=_.without(n,e)},this.removeAllMessages=function(){n=[]},this.lastMessage=function(){return _.last(n)},_.reduce(t,function(e,t){return e[t]=function(e){this.addMessage(e,t)},e},this,this)}var t={contexts:["danger","warning","info","success"],keysToSkip:["base","error"],displayTime:7e3};this.config=t,this.$get=function(){return new e(t)}}).directive("angularjsNotify",["Notify","$templateCache","$timeout",function(e,t,s){function n(t,n,i){function a(t){s(function(){e.removeMessage(t)},o)}var o=e.displayTime;t.$watch(e.getMessages,function(s,n){t.messages=s,s.length>n.length&&a(e.lastMessage())},!0),t.removeNotificationMessage=function(t){e.removeMessage(t)}}return{restrict:"EA",link:n,template:t.get("notifications.html"),scope:{}}}]),angular.module("angularjsNotify").run(["$templateCache",function(e){e.put("notifications.html",'<div class="alert alert-{{ message.context }} alert-dismissible fade in animate-hide" message="message" ng-repeat="message in messages.slice().reverse()"><button type="button" class="close" ng-click="removeNotificationMessage(message)"><span aria-hidden="true">&times;</span> <span class="sr-only">Close</span></button> {{ message.text }}</div>')}]);