Angular Overhead Alert Dialog

dialogs.js

angular.module('dialogs',[])
.factory('alerts', ['$document', '$timeout', function($document, $timeout){
  return {
    /* Pops an alert to the top of the page. Be careful, they will stack on each other if called often (use the callback for chains)
     * @param html HTML to display in the alert
     * @param delay (optional) time in ms to display the alert for
     * @param cssClass (optional) Bootstrap css alert- class (alert-success, alert-info, etc.) or a class that models off of it.
     * @param callback (optional) Function to call once the alert is no longer displayed
     */
    slideAlert : function(html, delay, cssClass, callback) {


      // Defaults
      if(typeof delay !== 'number')
        delay = 4000;
      if(typeof cssClass !== 'string')
        cssClass = 'alert-info';
      if(typeof callback !== 'function')
        callback = null;

      // Hides the alert and calls the callback. Use this to close the alert.
      var completeFn = function(){
        if(typeof alert !== 'undefined') {
          alert.slideUp(400, function(){
            alert.remove();
            alert = null;

            if(callback !== null)
              callback();
          });
        } else {
          if(callback !== null)
              callback();
        }
      };

      var body = angular.element($document[0].body);

      // Create our alert
      var alert = angular.element('<div class="alert alert-dismissable"></div>');
      alert.addClass(cssClass);
      alert.css('position', 'fixed');
      alert.css('top', '0px');
      alert.css('width', '100%');
      alert.css('display', 'none');


      var dismiss = angular.element('<button type="button" class="close" aria-hidden="true">&times;</button>');
      // Removes the alert
      dismiss.on('click', (function(){
        completeFn();
      }));
      alert.append(dismiss);

      var content = angular.element('<div class="container"></div>');
      content.html(html);

      // scan content for any anchor tags, clicking these will close the dialog
      content.find('a').on('click', function(){ alert.remove(); });
      alert.append(content);

      // Add the alert to the body
      body.append(alert);

      // show it
      alert.slideDown();

      // hide it in 'delay' seconds
      $timeout(function(){
        // If we're hovered, don't hide anything until we're not
        if( alert.is(':hover') ) {
          alert.one('mouseout', function(){
            completeFn();
          });
        } else {
          completeFn();
        }
      }, delay);


    }
  };
}]);