jam-cloud/web/app/assets/javascripts/dialog/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 modUtils = context.JK.ModUtils;
    var self = this;
    var logger = context.JK.logger;
    var $banner = null;
    var $closeBtn = null;
    var $yesBtn = null;
    var $noBtn = null;
    var $noShow = null;
    var $noShowCheckbox = null;
    var $buttons = 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';
        }
      }

      hide();
      
      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 || options.no_show) {

        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;
          }
        }

        if(options.no_show) {
          $buttons.addClass('center')
          $noShowCheckbox.data('no_show', options.no_show)
          $noShow.show()
        }
        $closeBtn.show().text(closeButtonText).unbind('click').click(function() {
          if ($noShowCheckbox.is(':visible') && $noShowCheckbox.is(':checked')) {
            modUtils.updateNoShow($noShowCheckbox.data('no_show'))
          }
          hide();
          return false;
        });
      }
      else {
        $closeBtn.hide();
        $noShow.hide();
      }

      if(options.type == "yes_no") {
        var yesText = options.yes_text || 'YES'
        $yesBtn.text(yesText).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) {
        context._.each(options.buttons, function(button, i) {
          if(!button.name) throw "button.name must be specified";
          if(!button.click && !button.href) throw "button.click or button.href must be specified";

          var buttonStyle = button.buttonStyle;
          if(!buttonStyle) {
            buttonStyle = options.buttons.length == i + 1 ? 'button-orange' : 'button-grey';
          }

          var $btn = $('<a class="' + buttonStyle + ' user-btn">' + button.name + '</a>');

          if(button.href) {
            $btn.attr('href', button.href)
          }
          else {
            $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();
      $buttons.removeClass('center')
      $noShowCheckbox.data('no_show', null).iCheck('uncheck').attr('checked', false)
      $buttons.children().hide();
    }

    function initialize() {

      $banner = $('#banner');

      $closeBtn = $banner.find('.close-btn');
      $yesBtn = $banner.find('.yes-btn');
      $noBtn = $banner.find('.no-btn');
      $noShowCheckbox = $banner.find('.no-more-show-checkbox')
      $noShow = $banner.find('.no-more-show')
      $buttons = $banner.find('.buttons')

      context.JK.checkbox($noShowCheckbox);
      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);