diff --git a/lib/jquery.flip_fields.js b/lib/jquery.flip_fields.js index d22ff7d..4e9afd2 100644 --- a/lib/jquery.flip_fields.js +++ b/lib/jquery.flip_fields.js @@ -1,18 +1,38 @@ (function($) { + //key code for Carriage Return var ENTER_KEY = 13; + //key code for Escape var ESC_KEY = 27; + /** + * flipFields definition + * @param options Configuration for customizing this plugin + */ $.fn.flipFields = function(options) { options = options || {}; + //alias of THIS context var flipFields = this; flipFields.data('currentlyFlipped', false); flipFields.each(function() { + //alias of jQuery representation for current DOM element var flipField = $(this); + /*Not eligible if the element is not an element of type text or associated data named isflipField is evaluated to be True + *the second evaluation can prevent one would-be 'isflipField' field from processing multiple times + */ if (flipField.attr('type') != "text" || flipField.data('isflipField')) return; - + //variable to hold the original value var originalValue = flipField.val(); + //hide the element to give space for a that acts as render of the element flipField.hide(); + //create the with the value of the input element, and add css style to it var span = $("").text(flipField.val()).addClass(options.spanClass); + //hook 'click' event handler to the element span.click(function(e) { + ////////////////////////////////////////////////////////////////////////////////////////////// + //if there is another Flip Field in edit state currently, blur it at first + //set currentlyFlipped to the current iterated element (Closure Is Used Here) + //save the current value to variable originalValue + //hide the , show the element, and focus on it + /////////////////////////////////////////////////////////////////////////////////////////////// if (flipFields.data('currentlyFlipped')) { flipFields.data('currentlyFlipped').blur(); } @@ -42,12 +62,13 @@ e.preventDefault(); } }; - + /*hook 'onblur' and 'onkeypress' handler to the current iterated element*/ flipField.blur(onBlur); flipField.keypress(onKeyPress); - + flipField.before(span); - flipField.data('isflipField', true) + //mark current iterated element as a 'flipField' + flipField.data('isflipField', true); }); };