app/jquery/jquery-editable-1.3.3.js
author Mario Ferraro <fadinlight@gmail.com>
Thu, 09 Jul 2009 10:16:29 +0200
changeset 2575 e319fd52cbc4
parent 2420 645f4de26f99
permissions -rw-r--r--
Extended tooltip timeout to 10 seconds for all fields. This is because the tooltip currently timesout to fast for people to read the whole stories they can contain. Especially because Surveys can have custom tooltips. Reviewed by: Lennard de Rijk

(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);