Manually fix #17 (Made code more object oriented)

kylefox · Feb 22, 2012 · bd4331c · bd4331c
1 parent 33a06fa
commit bd4331c
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -37,7 +37,16 @@ Basic usage is to embed your modal's HTML (with the 'modal' class) directly into
 and then invoke `modal()` on the element.
 
  $('#login-form').modal();
-
+
+You can also invoke `modal()` on links.
+
+ <a href="#ex5"> Open modal by getting the dom id from href</a>
+ <a href="ajax.html"> Open modal by making an AJAX call</a>
+
+ $(a).click(function(event) {
+  event.preventDefault();
+  $(this).modal();
+ });
 
 **Method 2: Automatically attaching to links**
 

diff --git a/examples/index.html b/examples/index.html
@@ -181,13 +181,13 @@ <h2>Example 5: the un-closable window</h2>
  return false;
  });
 
- $('a[href="#ex5"]').click(function() {
- $($(this).attr('href')).modal({
+ $('a[href="#ex5"]').click(function(event) {
+ event.preventDefault();
+ $(this).modal({
  escapeClose: false,
  clickClose: false,
  showClose: false
  });
- return false;
  });
 
  });

diff --git a/jquery.modal.js b/jquery.modal.js
@@ -4,82 +4,122 @@
 */
 (function($) {
 
- var current_modal = null;
+ var current = null;
 
- var open_modal_from_link = function(event) {
- event.preventDefault();
- var target = $(this).attr('href');
- if(/^#/.test(target)) { // DOM id
- $(target).modal();
- } else { // AJAX
- $.get(target, function(html) {
- $('<div/>')
- .html(html)
- .appendTo('body')
- .on($.modal.CLOSE, function(event, modal) { modal.elm.remove(); })
- .modal();
- });
+ $.modal = function(el, options) {
+ var remove, target;
+ this.options = $.extend({}, $.modal.defaults, options);
+ if (el.is('a')) {
+ target = el.attr('href');
+ //Select element by id from href
+ if (/^#/.test(target)) {
+ this.$elm = $(target);
+ if (this.$elm.length !== 1) return null;
+ this.open();
+ //AJAX
+ } else {
+ this.$elm = $('<div>');
+ remove = function(event, modal) { modal.elm.remove(); };
+ $.get(target, function(html) {
+ if (!current) return;
+ current.$elm.html(html).appendTo('body').on($.modal.CLOSE, remove);
+ current.open();
+ });
+ }
+ } else {
+ this.$elm = el;
+ this.open();
  }
  };
 
- var center_modal = function(modal) {
- modal.elm.css({
- position: 'fixed',
- top: "50%",
- left: "50%",
- marginTop: - (modal.elm.outerHeight() / 2),
- marginLeft: - (modal.elm.outerWidth() / 2),
- zIndex: modal.options.zIndex + 1
- });
- };
+ $.modal.prototype = {
+ constructor: $.modal,
 
- $.modal = function(el, options){
- this.$elm = el;
- this.options = $.extend({},$.modal.defaults, options);
-
- if(this.$elm.attr('href')) {
- this.$elm.click(open_modal_from_link);
- return;
- }
+ open: function() {
+ this.block();
+ this.show();
+ if (this.options.escapeClose) {
+ $(document).on('keydown.modal', function(event) {
+ if (event.which == 27) $.modal.close();
+ });
+ }
+ if (this.options.clickClose) this.blocker.click($.modal.close);
+ },
+
+ close: function() {
+ this.unblock();
+ this.hide();
+ $(document).off('keydown.modal');
+ },
 
- this.block = function() {
- current_modal.blocker = $('<div class="jquery-modal blocker"></div>').css({
+ block: function() {
+ this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
+ this.blocker = $('<div class="jquery-modal blocker"></div>').css({
  top: 0, right: 0, bottom: 0, left: 0,
  width: "100%", height: "100%",
  position: "fixed",
  zIndex: this.options.zIndex,
  background: this.options.overlay,
  opacity: this.options.opacity
  });
- if(this.options.escapeClose) {
- $(document).on('keydown.modal', function(event) {
- if(event.which == 27) { $.modal.close(); }
- });
- }
- if(this.options.clickClose) {
- current_modal.blocker.click($.modal.close);
- }
- $('body').append(current_modal.blocker);
- this.$elm.trigger($.modal.BLOCK, [current_modal]);
- };
-
- this.show = function() {
- if(this.options.showClose) {
- current_modal.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal">' + this.options.closeText + '</a>');
- current_modal.elm.append(current_modal.closeButton);
+ $('body').append(this.blocker);
+ this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
+ },
+
+ unblock: function() {
+ this.blocker.remove();
+ },
+
+ show: function() {
+ this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
+ if (this.options.showClose) {
+ this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal">' + this.options.closeText + '</a>');
+ this.$elm.append(this.closeButton);
  }
  this.$elm.addClass(this.options.modalClass + ' current');
- center_modal(current_modal);
- this.$elm.show().trigger($.modal.OPEN, [current_modal]);
- };
-
- current_modal = {elm: this.$elm, options: this.options};
- this.$elm.trigger($.modal.BEFORE_BLOCK, [current_modal]);
- this.block();
- this.$elm.trigger($.modal.BEFORE_OPEN, [current_modal]);
- this.show();
+ this.center();
+ this.$elm.show().trigger($.modal.OPEN, [this._ctx()]);
+ },
+
+ hide: function() {
+ this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
+ if (this.closeButton) this.closeButton.remove();
+ this.$elm.removeClass('current').hide();
+ this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
+ },
+
+ center: function() {
+ this.$elm.css({
+ position: 'fixed',
+ top: "50%",
+ left: "50%",
+ marginTop: - (this.$elm.outerHeight() / 2),
+ marginLeft: - (this.$elm.outerWidth() / 2),
+ zIndex: this.options.zIndex + 1
+ });
+ },
+
+ //Return context for custom events
+ _ctx: function() {
+ return { elm: this.$elm, blocker: this.blocker, options: this.options };
+ }
+ };
+
+ //resize is alias for center for now
+ $.modal.prototype.resize = $.modal.prototype.center;
+
+ $.modal.close = function(event) {
+ if (!current) return;
+ if (event) event.preventDefault();
+ current.close();
+ current = null;
+ };
+
+ $.modal.resize = function() {
+ if (!current) return;
+ current.resize();
  };
- 
+
  $.modal.defaults = {
  overlay: "#000",
  opacity: 0.75,
@@ -91,38 +131,25 @@
  showClose: true
  };
 
- // Event constants:
+ // Event constants
  $.modal.BEFORE_BLOCK = 'modal:before-block';
  $.modal.BLOCK = 'modal:block';
  $.modal.BEFORE_OPEN = 'modal:before-open';
  $.modal.OPEN = 'modal:open';
  $.modal.BEFORE_CLOSE = 'modal:before-close';
  $.modal.CLOSE = 'modal:close';
 
- $.modal.close = function(event) {
- if(event) { event.preventDefault(); }
- if(!current_modal) { return; }
- current_modal.elm.trigger($.modal.BEFORE_CLOSE, [current_modal]);
- if(current_modal.closeButton) { current_modal.closeButton.remove(); }
- current_modal.blocker.remove();
- current_modal.elm.removeClass('current').hide();
- current_modal.elm.trigger($.modal.CLOSE, [current_modal]);
- current_modal = null;
-
- $(document).off('keydown.modal');
- };
-
- $.modal.resize = function() {
- if(!current_modal) { return; }
- center_modal(current_modal);
- };
-
  $.fn.modal = function(options){
- if(this.length === 1) { new $.modal(this, options); }
+ if (this.length === 1) {
+ current = new $.modal(this, options);
+ }
  return this;
  };
 
  // Automatically bind links with rel="modal:close" to, well, close the modal.
- $(document).on('click', 'a[rel="modal:open"]', open_modal_from_link);
  $(document).on('click', 'a[rel="modal:close"]', $.modal.close);
+ $(document).on('click', 'a[rel="modal:open"]', function(event) {
+ event.preventDefault();
+ $(this).modal();
+ });
 })(jQuery);