1 (function($){

     2 /*

     3  * Editable 1.3.3

     4  *

     5  * Copyright (c) 2009 Arash Karimzadeh (arashkarimzadeh.com)

     6  * Licensed under the MIT (MIT-LICENSE.txt)

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

     8  *

     9  * Date: Mar 02 2009

    10  */

    11 $.fn.editable = function(options){

    12   var defaults = {

    13     onEdit: null,

    14     onSubmit: null,

    15     onCancel: null,

    16     editClass: null,

    17     submit: null,

    18     cancel: null,

    19     type: 'text', //text, textarea or select

    20     submitBy: 'blur', //blur,change,dblclick,click

    21     editBy: 'click',

    22     options: null

    23 }

    24   if(options=='disable')

    25     return this.unbind(this.data('editable.options').editBy,this.data('editable.options').toEditable);

    26   if(options=='enable')

    27     return this.bind(this.data('editable.options').editBy,this.data('editable.options').toEditable);

    28   if(options=='destroy')

    29     return  this.unbind(this.data('editable.options').editBy,this.data('editable.options').toEditable)

    30           .data('editable.previous',null)

    31           .data('editable.current',null)

    32           .data('editable.options',null);

    33   

    34   var options = $.extend(defaults, options);

    35   

    36   options.toEditable = function(){

    37     $this = $(this);

    38     $this.data('editable.current',$this.html());

    39     opts = $this.data('editable.options');

    40     $.editableFactory[opts.type].toEditable($this.empty(),opts);

    41     // Configure events,styles for changed content

    42     $this.data('editable.previous',$this.data('editable.current'))

    43        .children()

    44          .focus()

    45          .addClass(opts.editClass);

    46     // Submit Event

    47     if(opts.submit){

    48       $('<button/>').appendTo($this)

    49             .html(opts.submit)

    50             .one('mouseup',function(){opts.toNonEditable($(this).parent(),true)});

    51 }else

    52       $this.one(opts.submitBy,function(){opts.toNonEditable($(this),true)})

    53          .children()

    54            .one(opts.submitBy,function(){opts.toNonEditable($(this).parent(),true)});

    55     // Cancel Event

    56     if(opts.cancel)

    57       $('<button/>').appendTo($this)

    58             .html(opts.cancel)

    59             .one('mouseup',function(){opts.toNonEditable($(this).parent(),false)});

    60     // Call User Function

    61     if($.isFunction(opts.onEdit))

    62       opts.onEdit.apply(  $this,

    63                   [{

    64                     current:$this.data('editable.current'),

    65                     previous:$this.data('editable.previous')

    66 }]

    67                 );

    68 }

    69   options.toNonEditable = function($this,change){

    70     opts = $this.data('editable.options');

    71     // Configure events,styles for changed content

    72     $this.one(opts.editBy,opts.toEditable)

    73        .data( 'editable.current',

    74             change

    75             ?$.editableFactory[opts.type].getValue($this,opts)

    76   :$this.data('editable.current')

    77           )

    78        .html(

    79             opts.type=='password'

    80                ?'*****'

    81   :$this.data('editable.current')

    82           );

    83     // Call User Function

    84     var func = null;

    85     if($.isFunction(opts.onSubmit)&&change==true)

    86       func = opts.onSubmit;

    87     else if($.isFunction(opts.onCancel)&&change==false)

    88       func = opts.onCancel;

    89     if(func!=null)

    90       func.apply($this,

    91             [{

    92               current:$this.data('editable.current'),

    93               previous:$this.data('editable.previous')

    94 }]

    95           );

    96 }

    97   this.data('editable.options',options);

    98   return  this.one(options.editBy,options.toEditable);

    99 }

   100 $.editableFactory = {

   101   'text': {

   102     toEditable: function($this,options){

   103       $('<input/>').appendTo($this)

   104              .val($this.data('editable.current'));

   105 },

   106     getValue: function($this,options){

   107       return $this.children().val();

   108 }

   109 },

   110   'password': {

   111     toEditable: function($this,options){

   112       $this.data('editable.current',$this.data('editable.password'));

   113       $this.data('editable.previous',$this.data('editable.password'));

   114       $('<input type="password"/>').appendTo($this)

   115                      .val($this.data('editable.current'));

   116 },

   117     getValue: function($this,options){

   118       $this.data('editable.password',$this.children().val());

   119       return $this.children().val();

   120 }

   121 },

   122   'textarea': {

   123     toEditable: function($this,options){

   124       $('<textarea/>').appendTo($this)

   125               .val($this.data('editable.current'));

   126 },

   127     getValue: function($this,options){

   128       return $this.children().val();

   129 }

   130 },

   131   'select': {

   132     toEditable: function($this,options){

   133       $select = $('<select/>').appendTo($this);

   134       $.each( options.options,

   135           function(key,value){

   136             $('<option/>').appendTo($select)

   137                   .html(value)

   138                   .attr('value',key);

   139 }

   140            )

   141       $select.children().each(

   142         function(){

   143           var opt = $(this);

   144           if(opt.text()==$this.data('editable.current'))

   145             return opt.attr('selected', 'selected').text();

   146 }

   147       )

   148 },

   149     getValue: function($this,options){

   150       var item = null;

   151       $('select', $this).children().each(

   152         function(){

   153           if($(this).attr('selected'))

   154             return item = $(this).text();

   155 }

   156       )

   157       return item;

   158 }

   159 }

   160 }

   161 })(jQuery);