app/jquery/jquery-editable-1.3.3.js
author Mario Ferraro <fadinlight@gmail.com>
Sun, 15 Nov 2009 22:12:20 +0100
changeset 3093 d1be59b6b627
parent 2420 645f4de26f99
permissions -rw-r--r--
GMaps related JS changed to use new google namespace. Google is going to change permanently in the future the way to load its services, so better stay safe. Also this commit shows uses of the new melange.js module. Fixes Issue 634.

(function($){
/*
 * Editable 1.3.3
 *
 * Copyright (c) 2009 Arash Karimzadeh (arashkarimzadeh.com)
 * Licensed under the MIT (MIT-LICENSE.txt)
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Date: Mar 02 2009
 */
$.fn.editable = function(options){
  var defaults = {
    onEdit: null,
    onSubmit: null,
    onCancel: null,
    editClass: null,
    submit: null,
    cancel: null,
    type: 'text', //text, textarea or select
    submitBy: 'blur', //blur,change,dblclick,click
    editBy: 'click',
    options: null
}
  if(options=='disable')
    return this.unbind(this.data('editable.options').editBy,this.data('editable.options').toEditable);
  if(options=='enable')
    return this.bind(this.data('editable.options').editBy,this.data('editable.options').toEditable);
  if(options=='destroy')
    return  this.unbind(this.data('editable.options').editBy,this.data('editable.options').toEditable)
          .data('editable.previous',null)
          .data('editable.current',null)
          .data('editable.options',null);
  
  var options = $.extend(defaults, options);
  
  options.toEditable = function(){
    $this = $(this);
    $this.data('editable.current',$this.html());
    opts = $this.data('editable.options');
    $.editableFactory[opts.type].toEditable($this.empty(),opts);
    // Configure events,styles for changed content
    $this.data('editable.previous',$this.data('editable.current'))
       .children()
         .focus()
         .addClass(opts.editClass);
    // Submit Event
    if(opts.submit){
      $('<button/>').appendTo($this)
            .html(opts.submit)
            .one('mouseup',function(){opts.toNonEditable($(this).parent(),true)});
}else
      $this.one(opts.submitBy,function(){opts.toNonEditable($(this),true)})
         .children()
           .one(opts.submitBy,function(){opts.toNonEditable($(this).parent(),true)});
    // Cancel Event
    if(opts.cancel)
      $('<button/>').appendTo($this)
            .html(opts.cancel)
            .one('mouseup',function(){opts.toNonEditable($(this).parent(),false)});
    // Call User Function
    if($.isFunction(opts.onEdit))
      opts.onEdit.apply(  $this,
                  [{
                    current:$this.data('editable.current'),
                    previous:$this.data('editable.previous')
}]
                );
}
  options.toNonEditable = function($this,change){
    opts = $this.data('editable.options');
    // Configure events,styles for changed content
    $this.one(opts.editBy,opts.toEditable)
       .data( 'editable.current',
            change
            ?$.editableFactory[opts.type].getValue($this,opts)
  :$this.data('editable.current')
          )
       .html(
            opts.type=='password'
               ?'*****'
  :$this.data('editable.current')
          );
    // Call User Function
    var func = null;
    if($.isFunction(opts.onSubmit)&&change==true)
      func = opts.onSubmit;
    else if($.isFunction(opts.onCancel)&&change==false)
      func = opts.onCancel;
    if(func!=null)
      func.apply($this,
            [{
              current:$this.data('editable.current'),
              previous:$this.data('editable.previous')
}]
          );
}
  this.data('editable.options',options);
  return  this.one(options.editBy,options.toEditable);
}
$.editableFactory = {
  'text': {
    toEditable: function($this,options){
      $('<input/>').appendTo($this)
             .val($this.data('editable.current'));
},
    getValue: function($this,options){
      return $this.children().val();
}
},
  'password': {
    toEditable: function($this,options){
      $this.data('editable.current',$this.data('editable.password'));
      $this.data('editable.previous',$this.data('editable.password'));
      $('<input type="password"/>').appendTo($this)
                     .val($this.data('editable.current'));
},
    getValue: function($this,options){
      $this.data('editable.password',$this.children().val());
      return $this.children().val();
}
},
  'textarea': {
    toEditable: function($this,options){
      $('<textarea/>').appendTo($this)
              .val($this.data('editable.current'));
},
    getValue: function($this,options){
      return $this.children().val();
}
},
  'select': {
    toEditable: function($this,options){
      $select = $('<select/>').appendTo($this);
      $.each( options.options,
          function(key,value){
            $('<option/>').appendTo($select)
                  .html(value)
                  .attr('value',key);
}
           )
      $select.children().each(
        function(){
          var opt = $(this);
          if(opt.text()==$this.data('editable.current'))
            return opt.attr('selected', 'selected').text();
}
      )
},
    getValue: function($this,options){
      var item = null;
      $('select', $this).children().each(
        function(){
          if($(this).attr('selected'))
            return item = $(this).text();
}
      )
      return item;
}
}
}
})(jQuery);