vendor/assets/javascripts/jquery.modal.js in jquery-modal-rails-0.0.3 vs vendor/assets/javascripts/jquery.modal.js in jquery-modal-rails-0.0.4
- old
+ new
@@ -1,17 +1,19 @@
/*
A simple jQuery modal (http://github.com/kylefox/jquery-modal)
- Version 0.5
+ Version 0.5.4
*/
(function($) {
var current = null;
$.modal = function(el, options) {
+ $.modal.close(); // Close any open modals.
var remove, target;
this.$body = $('body');
this.options = $.extend({}, $.modal.defaults, options);
+ this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
if (el.is('a')) {
target = el.attr('href');
//Select element by id from href
if (/^#/.test(target)) {
this.$elm = $(target);
@@ -45,12 +47,20 @@
$.modal.prototype = {
constructor: $.modal,
open: function() {
- this.block();
- this.show();
+ var m = this;
+ if(this.options.doFade) {
+ this.block();
+ setTimeout(function() {
+ m.show();
+ }, this.options.fadeDuration * this.options.fadeDelay);
+ } else {
+ this.block();
+ this.show();
+ }
if (this.options.escapeClose) {
$(document).on('keydown.modal', function(event) {
if (event.which == 27) $.modal.close();
});
}
@@ -62,42 +72,63 @@
this.hide();
$(document).off('keydown.modal');
},
block: function() {
+ var initialOpacity = this.options.doFade ? 0 : this.options.opacity;
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
+ opacity: initialOpacity
});
this.$body.append(this.blocker);
+ if(this.options.doFade) {
+ this.blocker.animate({opacity: this.options.opacity}, this.options.fadeDuration);
+ }
this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
},
unblock: function() {
- this.blocker.remove();
+ if(this.options.doFade) {
+ this.blocker.fadeOut(this.options.fadeDuration, function() {
+ this.remove();
+ });
+ } else {
+ 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');
this.center();
- this.$elm.show().trigger($.modal.OPEN, [this._ctx()]);
+ if(this.options.doFade) {
+ this.$elm.fadeIn(this.options.fadeDuration);
+ } else {
+ this.$elm.show();
+ }
+ this.$elm.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.removeClass('current');
+
+ if(this.options.doFade) {
+ this.$elm.fadeOut(this.options.fadeDuration);
+ } else {
+ this.$elm.hide();
+ }
this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
},
showSpinner: function() {
if (!this.options.showSpinner) return;
@@ -133,32 +164,15 @@
$.modal.close = function(event) {
if (!current) return;
if (event) event.preventDefault();
current.close();
+ var that = current.$elm;
current = null;
+ return that;
};
- $.modal.showSpinner = function(event) {
- if (!current) return;
- if (event) event.preventDefault();
- current.showSpinner();
- }
-
- $.modal.hideSpinner = function(event) {
- if (!current) return;
- if (event) event.preventDefault();
- current.hideSpinner();
- }
-
- $.modal.getWidget = function() {
- if (!current)
- return null;
- else
- return current.$elm;
- }
-
$.modal.resize = function() {
if (!current) return;
current.resize();
};
@@ -170,11 +184,13 @@
clickClose: true,
closeText: 'Close',
modalClass: "modal",
spinnerHtml: null,
showSpinner: true,
- showClose: true
+ showClose: true,
+ fadeDuration: null, // Number of milliseconds the fade animation takes.
+ fadeDelay: 1.0 // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
};
// Event constants
$.modal.BEFORE_BLOCK = 'modal:before-block';
$.modal.BLOCK = 'modal:block';
@@ -192,74 +208,12 @@
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:close"]', $.modal.close);
- $(document).on('click', 'a[rel="modal:open"]', function(event) {
- event.preventDefault();
- $(this).modal();
- });
-
- // Automatically bind links with rel="modal:open:ajaxpost" to
- $(document).on('click', 'a[rel="modal:open:ajaxpost"]', function(event)
- {
- //ensure that our custom events will be received
- event.preventDefault();
-
- // show the dialog
- $(this).modal();
-
- // bind the event when the ajax call is completed
- $(this).bind($.modal.AJAX_COMPLETE, function() {
- // configure the submit handler
- $('form').submit(function(){
-
- // save the current form
- current_form = $(this);
-
- // show the spinner again
- $.modal.showSpinner();
-
- // send the ajax call
- $.ajax({
- type: this.method,
- url: this.action + '.json',
- data: $(this).serialize(),
- dataType: 'html',
- success: function(data)
- {
- // hide the sinner
- $.modal.hideSpinner();
-
- // close the dialog
- $.modal.close();
- },
- error: function(data)
- {
- // hide the sinner
- $.modal.hideSpinner();
-
- // remove the older error message
- current_form.find(".error").remove()
-
- // parse the result
- var obj = jQuery.parseJSON(data.responseText);
-
- $.each(obj.errors, function(key, value)
- {
-
- current_form.find("#"+ current_form.attr("id").split('_').pop()+ "_" + key).after('<span class="error">'+ value[0] + '</span>');
- });
- }
- });
- return false;
- });
- });
-
-
- // return false to prevent normal anchor action
- return false;
- });
-
+ // Automatically bind links with rel="modal:close" to, well, close the modal.
+ $(document).on('click.modal', 'a[rel="modal:close"]', $.modal.close);
+ $(document).on('click.modal', 'a[rel="modal:open"]', function(event) {
+ event.preventDefault();
+ $(this).modal();
+ });
})(jQuery);