2015-05-17 20:32:53 +00:00
|
|
|
/*! Widget: editable - updated 5/17/2015 (v2.22.0) *//*
|
2013-04-13 01:39:07 +00:00
|
|
|
* Requires tablesorter v2.8+ and jQuery 1.7+
|
|
|
|
* by Rob Garrison
|
|
|
|
*/
|
2013-04-13 02:15:57 +00:00
|
|
|
/*jshint browser:true, jquery:true, unused:false */
|
2013-04-13 01:39:07 +00:00
|
|
|
/*global jQuery: false */
|
2014-09-27 16:04:13 +00:00
|
|
|
;( function( $ ){
|
|
|
|
'use strict';
|
2013-04-13 01:39:07 +00:00
|
|
|
|
2014-09-27 16:04:13 +00:00
|
|
|
var tse = $.tablesorter.editable = {
|
2015-05-16 23:19:12 +00:00
|
|
|
namespace : '.tseditable',
|
|
|
|
// last edited class name
|
|
|
|
lastEdited: 'tseditable-last-edited-cell',
|
2014-09-27 16:04:13 +00:00
|
|
|
|
|
|
|
editComplete: function( c, wo, $cell, refocus ) {
|
|
|
|
$cell
|
2015-05-16 23:19:12 +00:00
|
|
|
.removeClass( tse.lastEdited )
|
2014-09-27 16:04:13 +00:00
|
|
|
.trigger( wo.editable_editComplete, [ c ] );
|
|
|
|
// restore focus last cell after updating
|
|
|
|
if ( refocus ) {
|
|
|
|
setTimeout( function() {
|
|
|
|
$cell.focus();
|
|
|
|
}, 50 );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
selectAll: function( cell ) {
|
|
|
|
setTimeout( function() {
|
|
|
|
// select all text in contenteditable
|
|
|
|
// see http://stackoverflow.com/a/6150060/145346
|
2015-04-26 14:35:06 +00:00
|
|
|
var range, selection;
|
|
|
|
if ( document.body.createTextRange ) {
|
|
|
|
range = document.body.createTextRange();
|
|
|
|
range.moveToElementText( cell );
|
|
|
|
range.select();
|
|
|
|
} else if ( window.getSelection ) {
|
|
|
|
selection = window.getSelection();
|
|
|
|
range = document.createRange();
|
|
|
|
range.selectNodeContents( cell );
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.addRange( range );
|
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
}, 100 );
|
|
|
|
},
|
|
|
|
|
2015-05-16 23:19:12 +00:00
|
|
|
getColumns : function( c, wo ) {
|
|
|
|
var indx, tmp,
|
2015-02-03 18:58:41 +00:00
|
|
|
colIndex = [],
|
2014-09-27 16:04:13 +00:00
|
|
|
cols = [];
|
2015-02-03 18:58:41 +00:00
|
|
|
if ( !wo.editable_columnsArray && $.type( wo.editable_columns ) === 'string' && wo.editable_columns.indexOf( '-' ) >= 0 ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
// editable_columns can contain a range string ( i.e. '2-4' )
|
|
|
|
tmp = wo.editable_columns.split( /\s*-\s*/ );
|
|
|
|
indx = parseInt( tmp[ 0 ], 10 ) || 0;
|
|
|
|
tmp = parseInt( tmp[ 1 ], 10 ) || ( c.columns - 1 );
|
|
|
|
if ( tmp > c.columns ) {
|
|
|
|
tmp = c.columns - 1;
|
|
|
|
}
|
|
|
|
for ( ; indx <= tmp; indx++ ) {
|
2015-02-03 18:58:41 +00:00
|
|
|
colIndex.push( indx );
|
2014-09-27 16:04:13 +00:00
|
|
|
cols.push( 'td:nth-child(' + ( indx + 1 ) + ')' );
|
|
|
|
}
|
|
|
|
} else if ( $.isArray( wo.editable_columns ) ) {
|
2015-02-03 18:58:41 +00:00
|
|
|
$.each( wo.editable_columnsArray || wo.editable_columns, function( i, col ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
if ( col < c.columns ) {
|
2015-02-03 18:58:41 +00:00
|
|
|
colIndex.push( col );
|
2014-09-27 16:04:13 +00:00
|
|
|
cols.push( 'td:nth-child(' + ( col + 1 ) + ')' );
|
2013-11-25 12:20:12 +00:00
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
});
|
|
|
|
}
|
2015-02-03 18:58:41 +00:00
|
|
|
if ( !wo.editable_columnsArray ) {
|
|
|
|
wo.editable_columnsArray = colIndex;
|
|
|
|
wo.editable_columnsArray.sort(function(a,b){ return a - b; });
|
|
|
|
}
|
2015-05-16 23:19:12 +00:00
|
|
|
return cols;
|
|
|
|
},
|
|
|
|
|
|
|
|
update: function( c, wo ) {
|
|
|
|
var $t,
|
|
|
|
tmp = $( '<div>' ).wrapInner( wo.editable_wrapContent ).children().length || $.isFunction( wo.editable_wrapContent ),
|
|
|
|
cols = tse.getColumns( c, wo ).join( ',' );
|
|
|
|
|
|
|
|
// turn off contenteditable to allow dynamically setting the wo.editable_noEdit
|
|
|
|
// class on table cells - see issue #900
|
|
|
|
c.$tbodies.find( cols ).find( '[contenteditable]' ).prop( 'contenteditable', false );
|
|
|
|
|
2014-09-27 16:04:13 +00:00
|
|
|
// IE does not allow making TR/TH/TD cells directly editable ( issue #404 )
|
|
|
|
// so add a div or span inside ( it's faster than using wrapInner() )
|
2015-05-16 23:19:12 +00:00
|
|
|
c.$tbodies.find( cols ).not( '.' + wo.editable_noEdit ).each( function() {
|
2014-09-27 16:04:13 +00:00
|
|
|
// test for children, if they exist, then make the children editable
|
|
|
|
$t = $( this );
|
|
|
|
|
2015-05-06 20:16:43 +00:00
|
|
|
if ( tmp && $t.children( 'div, span' ).length === 0 ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
$t.wrapInner( wo.editable_wrapContent );
|
|
|
|
}
|
2015-05-06 20:16:43 +00:00
|
|
|
if ( $t.children( 'div, span' ).length ) {
|
|
|
|
// make div/span children content editable
|
|
|
|
$t.children( 'div, span' ).not( '.' + wo.editable_noEdit ).each( function() {
|
2014-09-27 16:04:13 +00:00
|
|
|
var $this = $( this );
|
|
|
|
if ( wo.editable_trimContent ) {
|
2015-04-26 01:27:57 +00:00
|
|
|
$this.html( function( i, txt ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
return $.trim( txt );
|
|
|
|
});
|
2014-07-25 12:50:36 +00:00
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
$this.prop( 'contenteditable', true );
|
2013-11-25 12:20:12 +00:00
|
|
|
});
|
2014-09-27 16:04:13 +00:00
|
|
|
} else {
|
|
|
|
if ( wo.editable_trimContent ) {
|
2015-04-26 01:27:57 +00:00
|
|
|
$t.html( function( i, txt ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
return $.trim( txt );
|
|
|
|
});
|
|
|
|
}
|
|
|
|
$t.prop( 'contenteditable', true );
|
2013-11-25 12:20:12 +00:00
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
bindEvents: function( c, wo ) {
|
2015-05-16 23:19:12 +00:00
|
|
|
var namespace = tse.namespace;
|
2014-09-27 16:04:13 +00:00
|
|
|
c.$table
|
2015-05-16 23:19:12 +00:00
|
|
|
.off( ( 'updateComplete pagerComplete '.split( ' ' ).join( namespace + ' ' ) ).replace( /\s+/g, ' ' ) )
|
|
|
|
.on( 'updateComplete pagerComplete '.split( ' ' ).join( namespace + ' ' ), function() {
|
2015-02-03 18:58:41 +00:00
|
|
|
tse.update( c, c.widgetOptions );
|
2015-04-26 14:35:06 +00:00
|
|
|
})
|
|
|
|
// prevent sort initialized by user click on the header from changing the row indexing before
|
|
|
|
// updateCell can finish processing the change
|
|
|
|
.children( 'thead' )
|
|
|
|
.add( $( c.namespace + '_extra_table' ).children( 'thead' ) )
|
2015-05-16 23:19:12 +00:00
|
|
|
.off( 'mouseenter' + namespace )
|
|
|
|
.on( 'mouseenter' + namespace, function() {
|
2014-09-27 16:04:13 +00:00
|
|
|
if ( c.$table.data( 'contentFocused' ) ) {
|
|
|
|
// change to 'true' instead of element to allow focusout to process
|
|
|
|
c.$table.data( 'contentFocused', true );
|
|
|
|
$( ':focus' ).trigger( 'focusout' );
|
2014-08-27 00:24:43 +00:00
|
|
|
}
|
2015-04-26 14:35:06 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
c.$tbodies
|
2015-05-16 23:19:12 +00:00
|
|
|
.off( ( 'focus blur focusout keydown '.split( ' ' ).join( namespace + ' ' ) ).replace( /\s+/g, ' ' ) )
|
|
|
|
.on( 'focus' + namespace, '[contenteditable]', function( e ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
clearTimeout( $( this ).data( 'timer' ) );
|
|
|
|
c.$table.data( 'contentFocused', e.target );
|
|
|
|
var $this = $( this ),
|
|
|
|
selAll = wo.editable_selectAll,
|
|
|
|
column = $this.closest( 'td' ).index(),
|
2015-04-26 01:27:57 +00:00
|
|
|
txt = $this.html();
|
|
|
|
if ( wo.editable_trimContent ) {
|
|
|
|
txt = $.trim( txt );
|
|
|
|
}
|
|
|
|
// prevent enter from adding into the content
|
|
|
|
$this
|
2015-05-16 23:19:12 +00:00
|
|
|
.off( 'keydown' + namespace )
|
|
|
|
.on( 'keydown' + namespace, function( e ){
|
2015-04-26 01:27:57 +00:00
|
|
|
if ( wo.editable_enterToAccept && e.which === 13 ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
e.preventDefault();
|
2014-09-02 20:29:28 +00:00
|
|
|
}
|
|
|
|
});
|
2014-09-27 16:04:13 +00:00
|
|
|
$this.data({ before : txt, original: txt });
|
|
|
|
|
|
|
|
if ( typeof wo.editable_focused === 'function' ) {
|
|
|
|
wo.editable_focused( txt, column, $this );
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( selAll ) {
|
|
|
|
if ( typeof selAll === 'function' ) {
|
|
|
|
if ( selAll( txt, column, $this ) ) {
|
|
|
|
tse.selectAll( $this[0] );
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
tse.selectAll( $this[0] );
|
2013-04-13 01:39:07 +00:00
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
}
|
|
|
|
})
|
2015-05-16 23:19:12 +00:00
|
|
|
.on( 'blur focusout keydown '.split( ' ' ).join( namespace + ' ' ), '[contenteditable]', function( e ) {
|
2014-09-27 16:04:13 +00:00
|
|
|
if ( !c.$table.data( 'contentFocused' ) ) { return; }
|
|
|
|
var t, validate,
|
|
|
|
valid = false,
|
|
|
|
$this = $( e.target ),
|
2015-04-26 01:27:57 +00:00
|
|
|
txt = $this.html(),
|
2014-09-27 16:04:13 +00:00
|
|
|
column = $this.closest( 'td' ).index();
|
2015-04-26 01:27:57 +00:00
|
|
|
if ( wo.editable_trimContent ) {
|
|
|
|
txt = $.trim( txt );
|
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
if ( e.which === 27 ) {
|
|
|
|
// user cancelled
|
2015-05-16 23:19:12 +00:00
|
|
|
$this.html( $this.data( 'original' ) ).trigger( 'blur' + namespace );
|
2014-09-27 16:04:13 +00:00
|
|
|
c.$table.data( 'contentFocused', false );
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
// accept on enter ( if set ), alt-enter ( always ) or if autoAccept is set and element is blurred or unfocused
|
|
|
|
t = e.which === 13 && ( wo.editable_enterToAccept || e.altKey ) || wo.editable_autoAccept && e.type !== 'keydown';
|
|
|
|
// change if new or user hits enter ( if option set )
|
|
|
|
if ( t && $this.data( 'before' ) !== txt ) {
|
2014-08-26 21:19:47 +00:00
|
|
|
|
2014-09-27 16:04:13 +00:00
|
|
|
validate = wo.editable_validate;
|
|
|
|
valid = txt;
|
|
|
|
|
|
|
|
if ( typeof( validate ) === 'function' ) {
|
|
|
|
valid = validate( txt, $this.data( 'original' ), column, $this );
|
|
|
|
} else if ( typeof ( validate = $.tablesorter.getColumnData( c.table, validate, column ) ) === 'function' ) {
|
|
|
|
valid = validate( txt, $this.data( 'original' ), column, $this );
|
2014-08-26 21:19:47 +00:00
|
|
|
}
|
|
|
|
|
2014-09-27 16:04:13 +00:00
|
|
|
if ( t && valid !== false ) {
|
2015-05-16 23:19:12 +00:00
|
|
|
c.$table.find( '.' + tse.lastEdited ).removeClass( tse.lastEdited );
|
2014-09-27 16:04:13 +00:00
|
|
|
$this
|
2015-05-16 23:19:12 +00:00
|
|
|
.addClass( tse.lastEdited )
|
2015-04-26 01:27:57 +00:00
|
|
|
.html( valid )
|
2014-09-27 16:04:13 +00:00
|
|
|
.data( 'before', valid )
|
|
|
|
.data( 'original', valid )
|
|
|
|
.trigger( 'change' );
|
|
|
|
c.$table.trigger( 'updateCell', [ $this.closest( 'td' ), false, function() {
|
|
|
|
if ( wo.editable_autoResort ) {
|
|
|
|
setTimeout( function() {
|
|
|
|
c.$table.trigger( 'sorton', [ c.sortList, function() {
|
2015-05-16 23:19:12 +00:00
|
|
|
tse.editComplete( c, wo, c.$table.find( '.' + tse.lastEdited ), true );
|
2014-09-27 16:04:13 +00:00
|
|
|
}, true ] );
|
|
|
|
}, 10 );
|
|
|
|
} else {
|
2015-05-16 23:19:12 +00:00
|
|
|
tse.editComplete( c, wo, c.$table.find( '.' + tse.lastEdited ) );
|
2014-08-26 21:19:47 +00:00
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
} ] );
|
2013-04-13 01:39:07 +00:00
|
|
|
return false;
|
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
} else if ( !valid && e.type !== 'keydown' ) {
|
|
|
|
clearTimeout( $this.data( 'timer' ) );
|
|
|
|
$this.data( 'timer', setTimeout( function() {
|
|
|
|
if ( $.isFunction( wo.editable_blur ) ) {
|
2015-04-26 01:27:57 +00:00
|
|
|
txt = $this.html();
|
|
|
|
wo.editable_blur( wo.editable_trimContent ? $.trim( txt ) : txt, column, $this );
|
2014-08-26 19:23:13 +00:00
|
|
|
}
|
2014-09-27 16:04:13 +00:00
|
|
|
}, 100 ) );
|
|
|
|
// restore original content on blur
|
2015-04-26 01:27:57 +00:00
|
|
|
$this.html( $this.data( 'original' ) );
|
2014-09-27 16:04:13 +00:00
|
|
|
}
|
|
|
|
});
|
2015-05-16 23:19:12 +00:00
|
|
|
},
|
|
|
|
destroy : function( c, wo ) {
|
|
|
|
var namespace = tse.namespace,
|
|
|
|
cols = tse.getColumns( c, wo ),
|
|
|
|
|
|
|
|
tmp = ( 'updateComplete pagerComplete '.split( ' ' ).join( namespace + ' ' ) ).replace( /\s+/g, ' ' );
|
|
|
|
c.$table.off( tmp );
|
|
|
|
|
|
|
|
tmp = ( 'focus blur focusout keydown '.split( ' ' ).join( namespace + ' ' ) ).replace( /\s+/g, ' ' );
|
|
|
|
c.$tbodies
|
|
|
|
.off( tmp )
|
|
|
|
.find( cols.join( ',' ) )
|
|
|
|
.find( '[contenteditable]' )
|
|
|
|
.prop( 'contenteditable', false );
|
2014-09-27 16:04:13 +00:00
|
|
|
}
|
2014-08-26 19:23:13 +00:00
|
|
|
|
2014-09-27 16:04:13 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
$.tablesorter.addWidget({
|
|
|
|
id: 'editable',
|
|
|
|
options : {
|
|
|
|
editable_columns : [],
|
|
|
|
editable_enterToAccept : true,
|
|
|
|
editable_autoAccept : true,
|
|
|
|
editable_autoResort : false,
|
|
|
|
editable_wrapContent : '<div>', // wrap the cell content... makes this widget work in IE, and with autocomplete
|
|
|
|
editable_trimContent : true, // trim content inside of contenteditable ( remove tabs & carriage returns )
|
|
|
|
editable_validate : null, // function( text, originalText ){ return text; }
|
|
|
|
editable_focused : null, // function( text, columnIndex, $element ) {}
|
|
|
|
editable_blur : null, // function( text, columnIndex, $element ) { }
|
|
|
|
editable_selectAll : false, // true/false or function( text, columnIndex, $element ) { return true; }
|
|
|
|
editable_noEdit : 'no-edit',
|
|
|
|
editable_editComplete : 'editComplete'
|
|
|
|
},
|
|
|
|
init: function( table, thisWidget, c, wo ){
|
|
|
|
if ( !wo.editable_columns.length ) { return; }
|
|
|
|
tse.update( c, wo );
|
|
|
|
tse.bindEvents( c, wo );
|
2015-05-16 23:19:12 +00:00
|
|
|
},
|
|
|
|
remove : function( table, c, wo, refreshing ) {
|
|
|
|
if ( !refreshing ) {
|
|
|
|
tse.destroy( c, wo ) ;
|
|
|
|
}
|
2013-04-13 01:39:07 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-09-27 16:04:13 +00:00
|
|
|
})( jQuery );
|