modals.js

gistfile1.txt

Namespace('window.core.modals');

(function($, self) {

  self.extend({

    initialize: function() {
      bindCloseButton();
      bindEscapeButton();
      bindResizeEvent();
      bindHideEvent();
    },

    selectors: {
      modalWindowContainer: '#modal-windows',
      closeBtn: '#modal-windows .close a, #modal-windows a.close'
    },

    render: function(id) {
      $modal = $('#' + id);
      $(self.selectors.modalWindowContainer).children().hide();
      $(self.selectors.modalWindowContainer).show().bind('keydown click', function (e) {
        // prevent quicklook to be closed when clicking on a modal window
        e.stopPropagation();
      });
      $(self.selectors.modalWindowContainer).children('#' + id).show();
 
      self.checkScrollable();

      if ($modal.attr('data-on-show-fn')) {
        eval($modal.attr('data-on-show-fn'));
      }
    },

    show: function(id,options) {
      if( $('#' + id).length < 1 ) {
        self.fetchAndInsert(id,options);
      } else {
        self.render(id);
      }
    },
    hide: function() {
      $(self).trigger('hideModal');
    }, 
    
    checkScrollable:  function() {
        var $modal = $(self.getVisibleModal()),
            modalHeight = $modal.height(),
            $windowHeight = $(window).height();
            calculatedPadding = Math.floor(($windowHeight - modalHeight) / 2) - 120; // auto-resizing top padding

        if ( (modalHeight + 250) > $windowHeight && $modal.is(':visible') ) {
          // modal window fits in display pane
          $('body').addClass('not-scrollable');
          $(self.selectors.modalWindowContainer).css('padding-top','50px');
        } else {
          // modal window doesn't fit in display pane
          $('body').removeClass('not-scrollable');
          var appliedPadding = (calculatedPadding > 50) ? calculatedPadding : 50;
          $(self.selectors.modalWindowContainer).css('padding-top', appliedPadding + 'px');
        }
    },

    isShowing: function() {
      return $(self.selectors.modalWindowContainer).is(':visible');
    },

    getVisibleModal:function() {
      return $(self.selectors.modalWindowContainer).children(':visible');
    },

    fetchAndInsert: function(id, options) {
      options = options || {};

      _.defaults(options,{
        data: {},
        url: '',
        callback: function(){}
      });

      $.ajax({
        url:options.url,
        data: options.data,
        success:function (data) {
          $(self.selectors.modalWindowContainer).append(data.html);
          self.render(id);
          if (typeof(options.callback) == 'function') {
            options.callback();
          }

        }
      })
    },

    insert:function (modal_json) {

    }

  });


  function bindCloseButton() {
    $(self.selectors.modalWindowContainer).delegate(self.selectors.closeBtn, 'click',function(e) {
      $(self).trigger('hideModal');
      e.stopPropagation();
      return false;
    });

    $(self.selectors.modalWindowContainer).click(function(e) {
      if (e.target == this) {
        $(self).trigger('hideModal');
        e.stopPropagation();
        return false;
      }
    });
  }


  function bindEscapeButton() {
    $('body').live('keydown', function(event) {
      // Catch ESC keypress:
      if (event.which == 27) {
        $(self).trigger('hideModal');
      }
    });
  }

  function bindHideEvent() {
    $(self).bind('hideModal', function() {
      $(self.selectors.modalWindowContainer).hide();
      $('body').removeClass('not-scrollable');
    })
  }

  function bindResizeEvent() {
    $(window).resize(function(){ self.checkScrollable(); });
    $('#modal-windows').bind('DOMNodeInserted DOMNodeRemoved', function() {
      self.checkScrollable();
    });
  }

})(jQuery, window.core.modals);