app/jquery/jquery-in-place-edit.js
author Madhusudan.C.S <madhusudancs@gmail.com>
Mon, 05 Oct 2009 22:43:30 +0200
changeset 3017 6689a4c8f02e
parent 2892 d7a19ac73f22
permissions -rw-r--r--
Separated the publish and approve button on the Task list page for Org members. Also ensured that only tasks from the right org with the right status can be changed. And that we do not make unneccesary loops over values in the POST dict by grouping all the keys in the POST data under "task_id". The list entries also no longer redirect a user when clicking on the checkbox. Patch by: Madhusudan.C.S and Lennard de Rijk

/*
* jquery-in-place-edit plugin
*
* Copyright (c) 2008 Christian Hellsten
*
* Plugin homepage:
*  http://aktagon.com/projects/jquery/in-place-edit/
*  http://github.com/christianhellsten/jquery-in-place-edit/
*
* Examples:
*  http://aktagon.com/projects/jquery/in-place-edit/examples/
*
* Repository:
*  git://github.com/christianhellsten/jquery-in-place-edit.git
*
* Version 1.0.2
*
* Tested with:
*  Windows:  Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7
*  Linux:    Firefox 2, Firefox 3, Opera
*  Mac:      Firefox 2, Firefox 3, Opera
*
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($) {
 
  $.fn.inPlaceEdit = function(options) {
 
    // Add click handler to all matching elements
    return this.each(function() {
      // Use default options, if necessary
      var settings = $.extend({}, $.fn.inPlaceEdit.defaults, options);
 
      var element = $(this);
 
      element.click(function() {
        element.data('skipBlur', false)
 
        // Prevent multiple clicks, and check if inplace editing is disabled
        if (element.hasClass("editing") || element.hasClass("disabled")) {
            return;
        }
 
        element.addClass("editing");
 
        element.old_value = element.html();          // Store old HTML so we can revert to it later
 
        if(typeof(settings.html) == 'string') {     // There are two types of form templates: strings and DOM elements
          element.html(settings.html);              // Replace current HTML with given HTML
        }
        else {
          element.html('');                         // Replace current HTML with given object's HTML
          var form_template = settings.html.children(':first').clone(true);
          form_template.appendTo(element);          // Clone event handlers too
        }
 
        $('.field', element).val(element.old_value); // Set field value to old HTML
        $('.field', element).focus();               // Set focus to input field
        $('.field', element).select();              // Select all text in field
 
        // On blur: cancel action
        if(settings.onBlurDisabled == false) {
          $('.field', element).blur(function() {
            // Prevent cancel from being triggered when clicking Save & Cancel button
            var skipBlur = element.data('skipBlur')
 
            if(skipBlur != true) {
              element.timeout = setTimeout(cancel, 50);
            }
 
            element.data('skipBlur', false)
          });
        }
 
        // On save: revert to old HTML and submit
        $('.save-button', element).click(function() {
          return submit();
        });
 
        $('.save-button', element).mousedown(function() {
          element.data('skipBlur', true)
        });
 
        $('.cancel-button', element).mousedown(function() {
          element.data('skipBlur', true)
        });
 
        // On cancel: revert to old HTML
        $('.cancel-button', element).click(function() {
          return cancel();
        });
 
        // On keyup: submit (ESC) or cancel (enter)
        if(settings.onKeyupDisabled == false) {
          $('.field', element).keyup(function(event) {
            var keycode = event.which;
            var type = this.tagName.toLowerCase();
 
            if(keycode == 27 && settings.escapeKeyDisabled == false)  {      // escape
              return cancel();
            }
            else if(keycode == 13) { // enter
              // Don't submit on enter if this is a textarea
              if(type != "textarea") {
                return submit();
              }
            }
            return true;
          });
        }
      });
 
      // Add hover class on mouseover
      element.mouseover(function() {
        element.addClass("hover");
      });
 
      // Remove hover class on mouseout
      element.mouseout(function() {
        element.removeClass("hover");
      });
 
      function cancel() {
        element.html(element.old_value);
 
        element.removeClass("hover editing");
 
        if(options.cancel) {
          options.cancel.apply(element, [element]);
        }
        return false; // Stop propagation
      };
 
      function submit() {
        clearTimeout(element.timeout);
 
        var id = element.attr('id');
        var value = $('.field', element).val();
 
        if(options.submit) {
          options.submit.apply(element, [element, id, value, element.old_value]);
        }
 
        element.removeClass("hover editing");
 
        element.html(value);
 
        return false; // Stop propagation
      };
    });
 
  };
 
  // Default (overridable) settings
  $.fn.inPlaceEdit.defaults = {
    onBlurDisabled  : false,
    onKeyupDisabled : false,
    escapeKeyDisabled : false,
    html : ' \
          <div class="inplace-edit"> \
            <input type="text" value="" class="field" /> \
            <div class="buttons"> \
              <input type="button" value="Save" class="save-button" /> \
              <input type="button" value="Cancel" class="cancel-button" /> \
            </div> \
          </div>'
  };
})(jQuery);