/*! tablesorter Editable Content widget - updated 8/1/2014 (core v2.17.6)
* Requires tablesorter v2.8+ and jQuery 1.7+
* by Rob Garrison
*/
/*jshint browser:true, jquery:true, unused:false */
/*global jQuery: false */
;(function($){
"use strict";
$.tablesorter.addWidget({
id: 'editable',
options : {
editable_columns : [],
editable_enterToAccept : true,
editable_autoAccept : true,
editable_autoResort : false,
editable_wrapContent : '
', // 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; }
var indx, tmp, $t,
cols = [],
editComplete = function($cell, refocus){
$cell
.removeClass('tseditable-last-edited-cell')
.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
var range = document.createRange();
range.selectNodeContents(cell);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}, 100);
};
if ( $.type(wo.editable_columns) === "string" && wo.editable_columns.indexOf('-') >= 0 ) {
// editable_columns can contain a range string (i.e. "2-4" )
tmp = wo.editable_columns.split('-');
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++ ) {
cols.push('td:nth-child(' + (indx + 1) + ')');
}
} else if ( $.isArray(wo.editable_columns) ) {
$.each(wo.editable_columns, function(i, col){
if ( col < c.columns ) {
cols.push('td:nth-child(' + (col + 1) + ')');
}
});
}
tmp = $('
').wrapInner(wo.editable_wrapContent).children().length || $.isFunction(wo.editable_wrapContent);
// 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() )
c.$tbodies.find( cols.join(',') ).not( '.' + wo.editable_noEdit ).each(function(){
// test for children, if they exist, then make the children editable
$t = $(this);
if (tmp && $t.children().length === 0) {
$t.wrapInner( wo.editable_wrapContent );
}
if ($t.children().length) {
// make all children content editable
$t.children().not('.' + wo.editable_noEdit).each(function(){
var $this = $(this);
if (wo.editable_trimContent) {
$this.text(function(i, txt){
return $.trim(txt);
});
}
$this.prop( 'contenteditable', true );
});
} else {
if (wo.editable_trimContent) {
$t.text(function(i, txt){
return $.trim(txt);
});
}
$t.prop( 'contenteditable', true );
}
});
c.$tbodies
.on('mouseleave.tseditable', function(){
if ( c.$table.data('contentFocused') ) {
// change to "true" instead of element to allow focusout to process
c.$table.data( 'contentFocused', true );
$(':focus').trigger('focusout');
}
})
.on('focus.tseditable', '[contenteditable]', function(e){
clearTimeout( $(this).data('timer') );
c.$table.data( 'contentFocused', e.target );
var $this = $(this),
selAll = wo.editable_selectAll,
column = $this.closest('td').index(),
txt = $.trim( $this.text() );
if (wo.editable_enterToAccept) {
// prevent enter from adding into the content
$this.on('keydown.tseditable', function(e){
if ( e.which === 13 ) {
e.preventDefault();
}
});
}
$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 ) ) {
selectAll($this[0]);
}
} else {
selectAll($this[0]);
}
}
})
.on('blur focusout keydown '.split(' ').join('.tseditable '), '[contenteditable]', function(e){
if ( !c.$table.data('contentFocused') ) { return; }
var t, validate,
valid = false,
$this = $(e.target),
txt = $.trim( $this.text() ),
column = $this.closest('td').index();
if ( e.which === 27 ) {
// user cancelled
$this.html( $.trim( $this.data('original') ) ).trigger('blur.tseditable');
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 ) {
validate = wo.editable_validate;
valid = txt;
if (typeof(validate) === "function") {
valid = validate( txt, $this.data('original'), column, $this );
} else if (typeof (validate = $.tablesorter.getColumnData( table, validate, column )) === 'function') {
valid = validate( txt, $this.data('original'), column, $this );
}
if ( t && valid !== false ) {
c.$table.find('.tseditable-last-edited-cell').removeClass('tseditable-last-edited-cell');
$this
.addClass('tseditable-last-edited-cell')
.html( $.trim( valid ) )
.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(){
editComplete(c.$table.find('.tseditable-last-edited-cell'), true);
}, true ]);
}, 10);
} else {
editComplete(c.$table.find('.tseditable-last-edited-cell'));
}
} ]);
return false;
}
} else if ( !valid && e.type !== 'keydown' ) {
clearTimeout( $this.data('timer') );
$this.data('timer', setTimeout(function(){
if ($.isFunction(wo.editable_blur)) {
wo.editable_blur( $.trim( $this.text() ), column, $this );
}
}, 100));
// restore original content on blur
$this.html( $.trim( $this.data('original') ) );
}
});
}
});
})(jQuery);