1 /*

     2 * jquery-in-place-edit plugin

     3 *

     4 * Copyright (c) 2008 Christian Hellsten

     5 *

     6 * Plugin homepage:

     7 *  http://aktagon.com/projects/jquery/in-place-edit/

     8 *  http://github.com/christianhellsten/jquery-in-place-edit/

     9 *

    10 * Examples:

    11 *  http://aktagon.com/projects/jquery/in-place-edit/examples/

    12 *

    13 * Repository:

    14 *  git://github.com/christianhellsten/jquery-in-place-edit.git

    15 *

    16 * Version 1.0.2

    17 *

    18 * Tested with:

    19 *  Windows:  Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7

    20 *  Linux:    Firefox 2, Firefox 3, Opera

    21 *  Mac:      Firefox 2, Firefox 3, Opera

    22 *

    23 *

    24 * Licensed under the MIT license:

    25 * http://www.opensource.org/licenses/mit-license.php

    26 *

    27 */

    28 (function($) {

    29  

    30   $.fn.inPlaceEdit = function(options) {

    31  

    32     // Add click handler to all matching elements

    33     return this.each(function() {

    34       // Use default options, if necessary

    35       var settings = $.extend({}, $.fn.inPlaceEdit.defaults, options);

    36  

    37       var element = $(this);

    38  

    39       element.click(function() {

    40         element.data('skipBlur', false)

    41  

    42         // Prevent multiple clicks, and check if inplace editing is disabled

    43         if (element.hasClass("editing") || element.hasClass("disabled")) {

    44             return;

    45         }

    46  

    47         element.addClass("editing");

    48  

    49         element.old_value = element.html();          // Store old HTML so we can revert to it later

    50  

    51         if(typeof(settings.html) == 'string') {     // There are two types of form templates: strings and DOM elements

    52           element.html(settings.html);              // Replace current HTML with given HTML

    53         }

    54         else {

    55           element.html('');                         // Replace current HTML with given object's HTML

    56           var form_template = settings.html.children(':first').clone(true);

    57           form_template.appendTo(element);          // Clone event handlers too

    58         }

    59  

    60         $('.field', element).val(element.old_value); // Set field value to old HTML

    61         $('.field', element).focus();               // Set focus to input field

    62         $('.field', element).select();              // Select all text in field

    63  

    64         // On blur: cancel action

    65         if(settings.onBlurDisabled == false) {

    66           $('.field', element).blur(function() {

    67             // Prevent cancel from being triggered when clicking Save & Cancel button

    68             var skipBlur = element.data('skipBlur')

    69  

    70             if(skipBlur != true) {

    71               element.timeout = setTimeout(cancel, 50);

    72             }

    73  

    74             element.data('skipBlur', false)

    75           });

    76         }

    77  

    78         // On save: revert to old HTML and submit

    79         $('.save-button', element).click(function() {

    80           return submit();

    81         });

    82  

    83         $('.save-button', element).mousedown(function() {

    84           element.data('skipBlur', true)

    85         });

    86  

    87         $('.cancel-button', element).mousedown(function() {

    88           element.data('skipBlur', true)

    89         });

    90  

    91         // On cancel: revert to old HTML

    92         $('.cancel-button', element).click(function() {

    93           return cancel();

    94         });

    95  

    96         // On keyup: submit (ESC) or cancel (enter)

    97         if(settings.onKeyupDisabled == false) {

    98           $('.field', element).keyup(function(event) {

    99             var keycode = event.which;

   100             var type = this.tagName.toLowerCase();

   101  

   102             if(keycode == 27 && settings.escapeKeyDisabled == false)  {      // escape

   103               return cancel();

   104             }

   105             else if(keycode == 13) { // enter

   106               // Don't submit on enter if this is a textarea

   107               if(type != "textarea") {

   108                 return submit();

   109               }

   110             }

   111             return true;

   112           });

   113         }

   114       });

   115  

   116       // Add hover class on mouseover

   117       element.mouseover(function() {

   118         element.addClass("hover");

   119       });

   120  

   121       // Remove hover class on mouseout

   122       element.mouseout(function() {

   123         element.removeClass("hover");

   124       });

   125  

   126       function cancel() {

   127         element.html(element.old_value);

   128  

   129         element.removeClass("hover editing");

   130  

   131         if(options.cancel) {

   132           options.cancel.apply(element, [element]);

   133         }

   134         return false; // Stop propagation

   135       };

   136  

   137       function submit() {

   138         clearTimeout(element.timeout);

   139  

   140         var id = element.attr('id');

   141         var value = $('.field', element).val();

   142  

   143         if(options.submit) {

   144           options.submit.apply(element, [element, id, value, element.old_value]);

   145         }

   146  

   147         element.removeClass("hover editing");

   148  

   149         element.html(value);

   150  

   151         return false; // Stop propagation

   152       };

   153     });

   154  

   155   };

   156  

   157   // Default (overridable) settings

   158   $.fn.inPlaceEdit.defaults = {

   159     onBlurDisabled  : false,

   160     onKeyupDisabled : false,

   161     escapeKeyDisabled : false,

   162     html : ' \

   163           <div class="inplace-edit"> \

   164             <input type="text" value="" class="field" /> \

   165             <div class="buttons"> \

   166               <input type="button" value="Save" class="save-button" /> \

   167               <input type="button" value="Cancel" class="cancel-button" /> \

   168             </div> \

   169           </div>'

   170   };

   171 })(jQuery);