jam-cloud/web/app/assets/javascripts/banner.js

// this is not a dialog, and isn't meant to be.  It is 'special' in that it will be higher in z-order than all other dialos
// it's for one-off alerts
(function (context, $) {

  "use strict";

  context.JK = context.JK || {};
  context.JK.Banner = (function () {
    var self = this;
    var logger = context.JK.logger;
    var $banner = null;
    var $closeBtn = null;
    var $yesBtn = null;
    var $noBtn = null;

    // you can also do
    // * showAlert('title', 'text')
    // * showAlert('text')
    function showAlert(options) {
      if (typeof options == 'string' || options instanceof String) {
        if(arguments.length == 2) {
          options = {title: options, html:arguments[1]}
        }
        else {
          options = {html:options};
        }
      }
      options.type = 'alert'
      return show(options);
    }

    function showYesNo(options) {
      if (typeof options == 'string' || options instanceof String) {
        if(arguments.length == 2) {
          options = {title: options, html:arguments[1]}
        }
        else {
          options = {html:options};
        }
      }
      options.type = 'yes_no'
      return show(options);
    }

    // responsible for updating the contents of the update dialog
    // as well as registering for any event handlers
    function show(options) {
      var text = options.text;
      var html = options.html;

      if(!options.title) {
        if(options.type == 'alert') {
          options.title = 'alert'
        }
        else if(options.type == 'yes_no') {
          options.title = 'please confirm';
        }
      }

      logger.debug("opening banner:" + options.title);

      var $h1 = $banner.find('h1');
      $h1.html(options.title);

      var newContent = null;
      if (html) {
        newContent = $('#banner .dialog-inner').html(html);
      }
      else if (text) {
        newContent = $('#banner .dialog-inner').html(text);
      }
      else {
        throw "unable to show banner for empty message";
      }


      if((options.type == "alert" && !options.buttons) || options.close) {

        var closeButtonText = 'CLOSE';
        if(options.close !== null && typeof options.close == 'object') {
          // extra styling options for close button
          if(options.close.name) {
            closeButtonText = options.close.name;
          }
        }

        $closeBtn.show().text(closeButtonText).unbind('click').click(function() {
          hide();
          return false;
        });
      }
      else {
        $closeBtn.hide();
      }

      if(options.type == "yes_no") {
        $yesBtn.show().unbind('click').click(function() {
          if(options.yes) {
            options.yes();
          }
          hide();
          return false;
        })
        $noBtn.show().unbind('click').click(function() {
          if(options.no) {
            options.no();
          }
          hide();
          return false;
        })
      }
      else {
        $yesBtn.hide();
        $noBtn.hide();
      }

      if(options.buttons) {
        var $buttons = $banner.find('.buttons')
        context._.each(options.buttons, function(button, i) {
          if(!button.name) throw "button.name must be specified";
          if(!button.click) throw "button.click must be specified";

          var buttonStyle = options.buttons.length == i + 1 ? 'button-orange' : 'button-grey';

          var $btn = $('<a class="' + buttonStyle + ' user-btn">' + button.name + '</a>');
          $btn.click(function() {
            button.click();
            hide();
            return false;
          });
          $buttons.append($btn);
        });
      }

      $('#banner').attr('data-type', options.type).show()
      $('#banner_overlay').show()

      // return the core of the banner so that caller can attach event handlers to newly created HTML
      return newContent;
    }


    function hide() {
      $banner.hide();
      $banner.find('.user-btn').remove();
      $('#banner_overlay .dialog-inner').html("");
      $('#banner_overlay').hide();
    }

    function initialize() {

      $banner = $('#banner');

      $closeBtn = $banner.find('.close-btn');
      $yesBtn = $banner.find('.yes-btn');
      $noBtn = $banner.find('.no-btn');
      return self;
    }

    // Expose publics
    var me = {
      initialize: initialize,
      show: show,
      showAlert: showAlert,
      showYesNo: showYesNo,// shows Yes and Cancel button (confirmation dialog)
      hide: hide
    }

    return me;
  })();

})(window, jQuery);