2008-11-08 09:28:11 +00:00
2009-01-24 20:29:24 +00:00
( function ( $ ) { $ . fn . editable = function ( target , options ) { var settings = { target : target , name : 'value' , id : 'id' , type : 'text' , width : 'auto' , height : 'auto' , event : 'click' , onblur : 'cancel' , loadtype : 'GET' , loadtext : 'Loading...' , placeholder : 'Click to edit' , loaddata : { } , submitdata : { } , ajaxoptions : { } } ; if ( options ) { $ . extend ( settings , options ) ; }
var plugin = $ . editable . types [ settings . type ] . plugin || function ( ) { } ; var submit = $ . editable . types [ settings . type ] . submit || function ( ) { } ; var buttons = $ . editable . types [ settings . type ] . buttons || $ . editable . types [ 'defaults' ] . buttons ; var content = $ . editable . types [ settings . type ] . content || $ . editable . types [ 'defaults' ] . content ; var element = $ . editable . types [ settings . type ] . element || $ . editable . types [ 'defaults' ] . element ; var reset = $ . editable . types [ settings . type ] . reset || $ . editable . types [ 'defaults' ] . reset ; var callback = settings . callback || function ( ) { } ; var onsubmit = settings . onsubmit || function ( ) { } ; var onreset = settings . onreset || function ( ) { } ; var onerror = settings . onerror || reset ; if ( ! $ . isFunction ( $ ( this ) [ settings . event ] ) ) { $ . fn [ settings . event ] = function ( fn ) { return fn ? this . bind ( settings . event , fn ) : this . trigger ( settings . event ) ; } }
2008-11-08 09:28:11 +00:00
$ ( this ) . attr ( 'title' , settings . tooltip ) ; settings . autowidth = 'auto' == settings . width ; settings . autoheight = 'auto' == settings . height ; return this . each ( function ( ) { var self = this ; var savedwidth = $ ( self ) . width ( ) ; var savedheight = $ ( self ) . height ( ) ; if ( ! $ . trim ( $ ( this ) . html ( ) ) ) { $ ( this ) . html ( settings . placeholder ) ; }
$ ( this ) [ settings . event ] ( function ( e ) { if ( self . editing ) { return ; }
2009-01-24 20:29:24 +00:00
$ ( self ) . removeAttr ( 'title' ) ; if ( 0 == $ ( self ) . width ( ) ) { settings . width = savedwidth ; settings . height = savedheight ; } else { if ( settings . width != 'none' ) { settings . width = settings . autowidth ? $ ( self ) . width ( ) : settings . width ; }
2008-11-08 09:28:11 +00:00
if ( settings . height != 'none' ) { settings . height = settings . autoheight ? $ ( self ) . height ( ) : settings . height ; } }
if ( $ ( this ) . html ( ) . toLowerCase ( ) . replace ( /;/ , '' ) == settings . placeholder . toLowerCase ( ) . replace ( /;/ , '' ) ) { $ ( this ) . html ( '' ) ; }
2009-01-24 20:29:24 +00:00
self . editing = true ; self . revert = $ ( self ) . html ( ) ; $ ( self ) . html ( '' ) ; var form = $ ( '<form />' ) ; if ( settings . cssclass ) { if ( 'inherit' == settings . cssclass ) { form . attr ( 'class' , $ ( self ) . attr ( 'class' ) ) ; } else { form . attr ( 'class' , settings . cssclass ) ; } }
2008-11-08 09:28:11 +00:00
if ( settings . style ) { if ( 'inherit' == settings . style ) { form . attr ( 'style' , $ ( self ) . attr ( 'style' ) ) ; form . css ( 'display' , $ ( self ) . css ( 'display' ) ) ; } else { form . attr ( 'style' , settings . style ) ; } }
var input = element . apply ( form , [ settings , self ] ) ; var input _content ; if ( settings . loadurl ) { var t = setTimeout ( function ( ) { input . disabled = true ; content . apply ( form , [ settings . loadtext , settings , self ] ) ; } , 100 ) ; var loaddata = { } ; loaddata [ settings . id ] = self . id ; if ( $ . isFunction ( settings . loaddata ) ) { $ . extend ( loaddata , settings . loaddata . apply ( self , [ self . revert , settings ] ) ) ; } else { $ . extend ( loaddata , settings . loaddata ) ; }
$ . ajax ( { type : settings . loadtype , url : settings . loadurl , data : loaddata , async : false , success : function ( result ) { window . clearTimeout ( t ) ; input _content = result ; input . disabled = false ; } } ) ; } else if ( settings . data ) { input _content = settings . data ; if ( $ . isFunction ( settings . data ) ) { input _content = settings . data . apply ( self , [ self . revert , settings ] ) ; } } else { input _content = self . revert ; }
content . apply ( form , [ input _content , settings , self ] ) ; input . attr ( 'name' , settings . name ) ; buttons . apply ( form , [ settings , self ] ) ; $ ( self ) . append ( form ) ; plugin . apply ( form , [ settings , self ] ) ; $ ( ':input:visible:enabled:first' , form ) . focus ( ) ; if ( settings . select ) { input . select ( ) ; }
2009-01-24 20:29:24 +00:00
input . keydown ( function ( e ) { if ( e . keyCode == 27 ) { e . preventDefault ( ) ; reset . apply ( form , [ settings , self ] ) ; } } ) ; var t ; if ( 'cancel' == settings . onblur ) { input . blur ( function ( e ) { t = setTimeout ( function ( ) { reset . apply ( form , [ settings , self ] ) ; } , 500 ) ; } ) ; } else if ( 'submit' == settings . onblur ) { input . blur ( function ( e ) { t = setTimeout ( function ( ) { form . submit ( ) ; } , 200 ) ; } ) ; } else if ( $ . isFunction ( settings . onblur ) ) { input . blur ( function ( e ) { settings . onblur . apply ( self , [ input . val ( ) , settings ] ) ; } ) ; } else { input . blur ( function ( e ) { } ) ; }
2008-11-08 09:28:11 +00:00
form . submit ( function ( e ) { if ( t ) { clearTimeout ( t ) ; }
2009-01-24 20:29:24 +00:00
e . preventDefault ( ) ; if ( false !== onsubmit . apply ( form , [ settings , self ] ) ) { if ( false !== submit . apply ( form , [ settings , self ] ) ) { if ( $ . isFunction ( settings . target ) ) { var str = settings . target . apply ( self , [ input . val ( ) , settings ] ) ; $ ( self ) . html ( str ) ; self . editing = false ; callback . apply ( self , [ self . innerHTML , settings ] ) ; if ( ! $ . trim ( $ ( self ) . html ( ) ) ) { $ ( self ) . html ( settings . placeholder ) ; } } else { var submitdata = { } ; submitdata [ settings . name ] = input . val ( ) ; submitdata [ settings . id ] = self . id ; if ( $ . isFunction ( settings . submitdata ) ) { $ . extend ( submitdata , settings . submitdata . apply ( self , [ self . revert , settings ] ) ) ; } else { $ . extend ( submitdata , settings . submitdata ) ; }
2008-11-08 09:28:11 +00:00
if ( 'PUT' == settings . method ) { submitdata [ '_method' ] = 'put' ; }
2009-01-24 20:29:24 +00:00
$ ( self ) . html ( settings . indicator ) ; var ajaxoptions = { type : 'POST' , data : submitdata , url : settings . target , success : function ( result , status ) { $ ( self ) . html ( result ) ; self . editing = false ; callback . apply ( self , [ self . innerHTML , settings ] ) ; if ( ! $ . trim ( $ ( self ) . html ( ) ) ) { $ ( self ) . html ( settings . placeholder ) ; } } , error : function ( xhr , status , error ) { onerror . apply ( form , [ settings , self , xhr ] ) ; } }
$ . extend ( ajaxoptions , settings . ajaxoptions ) ; $ . ajax ( ajaxoptions ) ; } } }
$ ( self ) . attr ( 'title' , settings . tooltip ) ; return false ; } ) ; } ) ; this . reset = function ( form ) { if ( this . editing ) { if ( false !== onreset . apply ( form , [ settings , self ] ) ) { $ ( self ) . html ( self . revert ) ; self . editing = false ; if ( ! $ . trim ( $ ( self ) . html ( ) ) ) { $ ( self ) . html ( settings . placeholder ) ; }
$ ( self ) . attr ( 'title' , settings . tooltip ) ; } } } } ) ; } ; $ . editable = { types : { defaults : { element : function ( settings , original ) { var input = $ ( '<input type="hidden"></input>' ) ; $ ( this ) . append ( input ) ; return ( input ) ; } , content : function ( string , settings , original ) { $ ( ':input:first' , this ) . val ( string ) ; } , reset : function ( settings , original ) { original . reset ( this ) ; } , buttons : function ( settings , original ) { var form = this ; if ( settings . submit ) { if ( settings . submit . match ( />$/ ) ) { var submit = $ ( settings . submit ) . click ( function ( ) { if ( submit . attr ( "type" ) != "submit" ) { form . submit ( ) ; } } ) ; } else { var submit = $ ( '<button type="submit" />' ) ; submit . html ( settings . submit ) ; }
2008-11-08 09:28:11 +00:00
$ ( this ) . append ( submit ) ; }
2009-01-24 20:29:24 +00:00
if ( settings . cancel ) { if ( settings . cancel . match ( />$/ ) ) { var cancel = $ ( settings . cancel ) ; } else { var cancel = $ ( '<button type="cancel" />' ) ; cancel . html ( settings . cancel ) ; }
2008-11-08 09:28:11 +00:00
$ ( this ) . append ( cancel ) ; $ ( cancel ) . click ( function ( event ) { if ( $ . isFunction ( $ . editable . types [ settings . type ] . reset ) ) { var reset = $ . editable . types [ settings . type ] . reset ; } else { var reset = $ . editable . types [ 'defaults' ] . reset ; }
2009-01-24 20:29:24 +00:00
reset . apply ( form , [ settings , original ] ) ; return false ; } ) ; } } } , text : { element : function ( settings , original ) { var input = $ ( '<input />' ) ; if ( settings . width != 'none' ) { input . width ( settings . width ) ; }
2008-11-08 09:28:11 +00:00
if ( settings . height != 'none' ) { input . height ( settings . height ) ; }
2009-01-24 20:29:24 +00:00
input . attr ( 'autocomplete' , 'off' ) ; $ ( this ) . append ( input ) ; return ( input ) ; } } , textarea : { element : function ( settings , original ) { var textarea = $ ( '<textarea />' ) ; if ( settings . rows ) { textarea . attr ( 'rows' , settings . rows ) ; } else { textarea . height ( settings . height ) ; }
2008-11-08 09:28:11 +00:00
if ( settings . cols ) { textarea . attr ( 'cols' , settings . cols ) ; } else { textarea . width ( settings . width ) ; }
2009-01-24 20:29:24 +00:00
$ ( this ) . append ( textarea ) ; return ( textarea ) ; } } , select : { element : function ( settings , original ) { var select = $ ( '<select />' ) ; $ ( this ) . append ( select ) ; return ( select ) ; } , content : function ( string , settings , original ) { if ( String == string . constructor ) { eval ( 'var json = ' + string ) ; for ( var key in json ) { if ( ! json . hasOwnProperty ( key ) ) { continue ; }
2008-11-08 09:28:11 +00:00
if ( 'selected' == key ) { continue ; }
2009-01-24 20:29:24 +00:00
var option = $ ( '<option />' ) . val ( key ) . append ( json [ key ] ) ; $ ( 'select' , this ) . append ( option ) ; } }
2008-11-08 09:28:11 +00:00
$ ( 'select' , this ) . children ( ) . each ( function ( ) { if ( $ ( this ) . val ( ) == json [ 'selected' ] || $ ( this ) . text ( ) == original . revert ) { $ ( this ) . attr ( 'selected' , 'selected' ) ; } ; } ) ; } } } , addInputType : function ( name , input ) { $ . editable . types [ name ] = input ; } } ; } ) ( jQuery ) ;