angular simple alerts

alerts.js

(function () {
  'use strict';
  /* globals _ */
  /*
   * dismissable alert service
   * - purpose
   * this directive and service combo provide a reusable method of popping dismissable
   * notifications for succesful submissions, errors, warnings, ad nauseam.
   *
   * - usage
   * -- html:
   * <custom-alert type="danger" name="loginerror" ttl="2">error text</custom-alert>
   *    type: determines color of alert. Available colors are: success, warning, info, and danger
   *    name: you need to give the alert a name to call. if the directive exists in the DOM, it is callable
   •          from any service, controller, or directive presuming they've injected the alertsService
   *    ttl: time before the alert dismisses itself, in seconds
   *
   * --js:
   * alertService.show('loginerror')
   * alertService.close('loginerror') // note: you do not have to call this manually, but you may.
   *                                  // the directive will automatically close upon click
   *                                  // or when the ttl from the custom-alert directive
   *                                  // expires.
   •
   * - misc:
   * this invokes lodash/underscore two times for trivial collections operations.
   * If neither is included in your project, it should be trivial to rewrite
   * the funcs in the service that rely on _ .
   *
   */
  angular.module('application')
    .directive('customAlert', ['alertService', '$timeout',
      function (alertService, $timeout) {
        return {
          restrict: 'E',
          replace: true,
          transclude: true,
          scope: true,
          template: '<div title="alert" class="alert alert-{{type}} alert-dismissible" hm-tap="dismiss()"><span ng-show="!optMsg" ng-transclude></span><span ng-show="optMsg">{{::optMsg| limitTo: 80}}<span ng-show="optMsg.length > 80">...</span></span></div>',
          link: function (scope, el, attrs) {
            scope.dismiss = function () {
              el.removeClass('shown');
            };
            alertService.register(attrs.name, function (optMsg) {
              $timeout(function () {
                scope.optMsg = optMsg;
                el.addClass('shown');
              });
              if (attrs.ttl) {
                $timeout(function () {
                  el.removeClass('shown');
                }, 1000 * attrs.ttl);
              }
            }, function () {
              el.removeClass('shown');
            });
            scope.type = attrs.type;
            el.on('$destroy', function () {
              alertService.destroy(attrs.name);
            });
          }
        };
      }
    ])
    .service('alertService', ['$timeout',
      function ($timeout) {
        var map = {};
        var stack = [];
        var show = function (name, optMsg) {
          if (map[name]) {
            map[name].show(optMsg);
          } else {
            stack.push({
              name: name,
              msg: optMsg
            });
          }
        };
        var checkStack = function (name) {
          var index = _.findIndex(stack, function (item) {
            return item.name === name;
          });
          if (index !== -1) {
            $timeout(function () {
              show(stack[index].name, stack[index].msg);
              stack.splice(index, 1);
            });
          }
        };
        return {
          register: function (name, shower, hide) {
            map[name] = {
              show: shower,
              hide: hide
            };
            checkStack(name);
          },
          show: show,
          close: function (name) {
            map[name].close();
          },
          destroy: function (name) {
            _.remove(stack, name);
            delete map[name];
          }
        };
      }
    ]);
})();

alerts.less

.alert:not(.inline-alert) {
    position: fixed;
    top: -12vh;
    left: 0;
    border-radius: 0px;
    border-width: 0px;
    height: 12vh;
    // display: block;
    width: 100vw;
    margin: 0;
    padding: 0;
    color: white;
    display: table;
    font-size: 2.75vh;
    transition: transform .5s ease;
    text-overflow: ellipsis;
    z-index: 2005;
    span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        max-width: 90vw;
        span {
            display: inline-block;
            font-weight: 300;
        }
    }
    &.alert-success {
        background-color: #5CB860;
    }
    &.alert-warning {
        background-color: #EAC175;
    }
    &.alert-info {
        background-color: #566E9C;
    }
    &.alert-danger {
        background-color: #EA7875;
    }
    &.shown {
        transform: translate(0, 12vh);
    }
}