diff --git a/jquery.jeditable.js b/jquery.jeditable.js index 1d066d4..d14774b 100644 --- a/jquery.jeditable.js +++ b/jquery.jeditable.js @@ -12,24 +12,26 @@ * Based on editable by Dylan Verheul : * http://www.dyve.net/jquery/?editable * + * Brian Agbay: + * 1/3/2014 - Added options[ev_constraints] */ /** * Version 1.7.3 * - * ** means there is basic unit tests for this parameter. + * ** means there is basic unit tests for this parameter. * * @name Jeditable * @type jQuery * @param String target (POST) URL or function to send edited content to ** - * @param Hash options additional options + * @param Hash options additional options * @param String options[method] method to use to send edited content (POST or PUT) ** * @param Function options[callback] Function to run after submitting edited content ** * @param String options[name] POST parameter name of edited content * @param String options[id] POST parameter name of edited div id * @param Hash options[submitdata] Extra parameters to send when submitting edited content. * @param String options[type] text, textarea or select (or any 3rd party input type) ** - * @param Integer options[rows] number of rows if using textarea ** + * @param Integer options[rows] number of rows if using textarea ** * @param Integer options[cols] number of columns if using textarea ** * @param Mixed options[height] 'auto', 'none' or height in pixels ** * @param Mixed options[width] 'auto', 'none' or width in pixels ** @@ -41,6 +43,7 @@ * @param String options[indicator] indicator html to show when saving * @param String options[tooltip] optional tooltip text via title attribute ** * @param String options[event] jQuery event such as 'click' of 'dblclick' ** + * @param Function options[ev_constraints] Function to allow/deny event action * @param String options[submit] submit button value, empty means no button ** * @param String options[cancel] cancel button value, empty means no button ** * @param String options[cssclass] CSS class to apply to input form. 'inherit' to copy from parent. ** @@ -48,19 +51,19 @@ * @param String options[select] true or false, when true text is highlighted ?? * @param String options[placeholder] Placeholder text or html to insert when element is empty. ** * @param String options[onblur] 'cancel', 'submit', 'ignore' or function ?? - * + * * @param Function options[onsubmit] function(settings, original) { ... } called before submit * @param Function options[onreset] function(settings, original) { ... } called before reset * @param Function options[onerror] function(settings, original, xhr) { ... } called on error - * + * * @param Hash options[ajaxoptions] jQuery Ajax options. See docs.jquery.com. - * + * */ (function($) { $.fn.editable = function(target, options) { - + if ('disable' == target) { $(this).data('disabled.editable', true); return; @@ -76,39 +79,39 @@ .removeData('event.editable'); return; } - + var settings = $.extend({}, $.fn.editable.defaults, {target:target}, options); - + /* setup some functions */ var plugin = $.editable.types[settings.type].plugin || function() { }; var submit = $.editable.types[settings.type].submit || function() { }; - var buttons = $.editable.types[settings.type].buttons + var buttons = $.editable.types[settings.type].buttons || $.editable.types['defaults'].buttons; - var content = $.editable.types[settings.type].content + var content = $.editable.types[settings.type].content || $.editable.types['defaults'].content; - var element = $.editable.types[settings.type].element + var element = $.editable.types[settings.type].element || $.editable.types['defaults'].element; - var reset = $.editable.types[settings.type].reset + var reset = $.editable.types[settings.type].reset || $.editable.types['defaults'].reset; var callback = settings.callback || function() { }; - var onedit = settings.onedit || function() { }; + var onedit = settings.onedit || function() { }; var onsubmit = settings.onsubmit || function() { }; var onreset = settings.onreset || function() { }; var onerror = settings.onerror || reset; - + /* Show tooltip. */ if (settings.tooltip) { $(this).attr('title', settings.tooltip); } - + settings.autowidth = 'auto' == settings.width; settings.autoheight = 'auto' == settings.height; - + return this.each(function() { - + /* Save this to self because this changes when scope changes. */ - var self = this; - + var self = this; + /* Inlined block elements lose their width and height after first edit. */ /* Save them for later use as workaround. */ var savedwidth = $(self).width(); @@ -116,38 +119,43 @@ /* Save so it can be later used by $.editable('destroy') */ $(this).data('event.editable', settings.event); - + /* If element is empty add something clickable (if requested) */ if (!$.trim($(this).html())) { $(this).html(settings.placeholder); } - + $(this).bind(settings.event, function(e) { - + /* Abort if element is disabled. */ if (true === $(this).data('disabled.editable')) { return; } - + + /* Check constraints function */ + if(settings.ev_constraints) { + if(!settings.ev_constraints(e)) {return;} + } + /* Prevent throwing an exeption if edit field is clicked again. */ if (self.editing) { return; } - + /* Abort if onedit hook returns false. */ if (false === onedit.apply(this, [settings, self])) { return; } - + /* Prevent default action and bubbling. */ e.preventDefault(); e.stopPropagation(); - + /* Remove tooltip. */ if (settings.tooltip) { $(self).removeAttr('title'); } - + /* Figure out how wide and tall we are, saved width and height. */ /* Workaround for http://dev.jquery.com/ticket/2190 */ if (0 == $(self).width()) { @@ -155,28 +163,28 @@ settings.height = savedheight; } else { if (settings.width != 'none') { - settings.width = + settings.width = settings.autowidth ? $(self).width() : settings.width; } if (settings.height != 'none') { - settings.height = + settings.height = settings.autoheight ? $(self).height() : settings.height; } } - + /* Remove placeholder text, replace is here because of IE. */ - if ($(this).html().toLowerCase().replace(/(;|"|\/)/g, '') == + if ($(this).html().toLowerCase().replace(/(;|"|\/)/g, '') == settings.placeholder.toLowerCase().replace(/(;|"|\/)/g, '')) { $(this).html(''); } - + self.editing = true; self.revert = $(self).html(); $(self).html(''); /* Create the form object. */ var form = $('
'); - + /* Apply css or style or both. */ if (settings.cssclass) { if ('inherit' == settings.cssclass) { @@ -190,7 +198,7 @@ if ('inherit' == settings.style) { form.attr('style', $(self).attr('style')); /* IE needs the second line or display wont be inherited. */ - form.css('display', $(self).css('display')); + form.css('display', $(self).css('display')); } else { form.attr('style', settings.style); } @@ -201,7 +209,7 @@ /* Set input content via POST, GET, given data or existing value. */ var input_content; - + if (settings.loadurl) { var t = setTimeout(function() { input.disabled = true; @@ -232,18 +240,18 @@ input_content = settings.data.apply(self, [self.revert, settings]); } } else { - input_content = self.revert; + input_content = self.revert; } content.apply(form, [input_content, settings, self]); input.attr('name', settings.name); - + /* Add buttons to the form. */ buttons.apply(form, [settings, self]); - + /* Add created form to self. */ $(self).append(form); - + /* Attach 3rd party plugin if requested. */ plugin.apply(form, [settings, self]); @@ -254,7 +262,7 @@ if (settings.select) { input.select(); } - + /* discard changes if pressing esc */ input.keydown(function(e) { if (e.keyCode == 27) { @@ -292,19 +300,19 @@ form.submit(function(e) { - if (t) { + if (t) { clearTimeout(t); } /* Do no submit. */ - e.preventDefault(); - + e.preventDefault(); + /* Call before submit hook. */ - /* If it returns false abort submitting. */ - if (false !== onsubmit.apply(form, [settings, self])) { + /* If it returns false abort submitting. */ + if (false !== onsubmit.apply(form, [settings, self])) { /* Custom inputs call before submit hook. */ /* If it returns false abort submitting. */ - if (false !== submit.apply(form, [settings, self])) { + if (false !== submit.apply(form, [settings, self])) { /* Check if given target is function */ if ($.isFunction(settings.target)) { @@ -312,7 +320,7 @@ $(self).html(str); self.editing = false; callback.apply(self, [self.innerHTML, settings]); - /* TODO: this is not dry */ + /* TODO: this is not dry */ if (!$.trim($(self).html())) { $(self).html(settings.placeholder); } @@ -335,7 +343,7 @@ /* Show the saving indicator. */ $(self).html(settings.indicator); - + /* Defaults for ajaxoptions. */ var ajaxoptions = { type : 'POST', @@ -356,28 +364,28 @@ onerror.apply(form, [settings, self, xhr]); } }; - + /* Override with what is given in settings.ajaxoptions. */ - $.extend(ajaxoptions, settings.ajaxoptions); - $.ajax(ajaxoptions); - + $.extend(ajaxoptions, settings.ajaxoptions); + $.ajax(ajaxoptions); + } } } - + /* Show tooltip again. */ $(self).attr('title', settings.tooltip); - + return false; }); }); - + /* Privileged methods */ this.reset = function(form) { /* Prevent calling reset twice when blurring. */ if (this.editing) { /* Before reset hook, if it returns false abort reseting. */ - if (false !== onreset.apply(form, [settings, self])) { + if (false !== onreset.apply(form, [settings, self])) { $(self).html(self.revert); self.editing = false; if (!$.trim($(self).html())) { @@ -385,11 +393,11 @@ } /* Show tooltip again. */ if (settings.tooltip) { - $(self).attr('title', settings.tooltip); + $(self).attr('title', settings.tooltip); } - } + } } - }; + }; }); }; @@ -399,7 +407,7 @@ types: { defaults: { element : function(settings, original) { - var input = $(''); + var input = $(''); $(this).append(input); return(input); }, @@ -422,7 +430,7 @@ /* Otherwise use button with given string as text. */ } else { var submit = $('