From 9a178c05b2c182d033c2982c93ba04d8d0f8a848 Mon Sep 17 00:00:00 2001 From: Mottie Date: Sat, 25 Apr 2015 20:27:57 -0500 Subject: [PATCH] Editable: modify trimContent option & use html to modify text. Fixes #886 --- dist/js/widgets/widget-editable.min.js | 2 +- docs/example-widget-editable.html | 3 ++- js/widgets/widget-editable.js | 33 ++++++++++++++++---------- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/dist/js/widgets/widget-editable.min.js b/dist/js/widgets/widget-editable.min.js index a55d3962..ec189775 100644 --- a/dist/js/widgets/widget-editable.min.js +++ b/dist/js/widgets/widget-editable.min.js @@ -1,2 +1,2 @@ /*! Widget: editable - updated 2/9/2015 (v2.19.1) */ -!function(a){"use strict";var b=a.tablesorter.editable={editComplete:function(a,b,c,d){c.removeClass("tseditable-last-edited-cell").trigger(b.editable_editComplete,[a]),d&&setTimeout(function(){c.focus()},50)},selectAll:function(a){setTimeout(function(){var b,c=document.createRange();c.selectNodeContents(a),b=window.getSelection(),b.removeAllRanges(),b.addRange(c)},100)},update:function(b,c){var d,e,f,g=[],h=[];if(!c.editable_columnsArray&&"string"===a.type(c.editable_columns)&&c.editable_columns.indexOf("-")>=0)for(e=c.editable_columns.split(/\s*-\s*/),d=parseInt(e[0],10)||0,e=parseInt(e[1],10)||b.columns-1,e>b.columns&&(e=b.columns-1);e>=d;d++)g.push(d),h.push("td:nth-child("+(d+1)+")");else a.isArray(c.editable_columns)&&a.each(c.editable_columnsArray||c.editable_columns,function(a,c){c").wrapInner(c.editable_wrapContent).children().length||a.isFunction(c.editable_wrapContent),b.$tbodies.find(h.join(",")).not("."+c.editable_noEdit).each(function(){f=a(this),e&&0===f.children().length&&f.wrapInner(c.editable_wrapContent),f.children().length?f.children().not("."+c.editable_noEdit).each(function(){var b=a(this);c.editable_trimContent&&b.text(function(b,c){return a.trim(c)}),b.prop("contenteditable",!0)}):(c.editable_trimContent&&f.text(function(b,c){return a.trim(c)}),f.prop("contenteditable",!0))})},bindEvents:function(c,d){c.$table.off("updateComplete pagerComplete ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("updateComplete pagerComplete ".split(" ").join(".tseditable "),function(){b.update(c,c.widgetOptions)}),c.$tbodies.off("mouseleave focus blur focusout keydown ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("mouseleave.tseditable",function(){c.$table.data("contentFocused")&&(c.$table.data("contentFocused",!0),a(":focus").trigger("focusout"))}).on("focus.tseditable","[contenteditable]",function(e){clearTimeout(a(this).data("timer")),c.$table.data("contentFocused",e.target);var f=a(this),g=d.editable_selectAll,h=f.closest("td").index(),i=a.trim(f.text());d.editable_enterToAccept&&f.on("keydown.tseditable",function(a){13===a.which&&a.preventDefault()}),f.data({before:i,original:i}),"function"==typeof d.editable_focused&&d.editable_focused(i,h,f),g&&("function"==typeof g?g(i,h,f)&&b.selectAll(f[0]):b.selectAll(f[0]))}).on("blur focusout keydown ".split(" ").join(".tseditable "),"[contenteditable]",function(e){if(c.$table.data("contentFocused")){var f,g,h=!1,i=a(e.target),j=a.trim(i.text()),k=i.closest("td").index();if(27===e.which)return i.html(a.trim(i.data("original"))).trigger("blur.tseditable"),c.$table.data("contentFocused",!1),!1;if(f=13===e.which&&(d.editable_enterToAccept||e.altKey)||d.editable_autoAccept&&"keydown"!==e.type,f&&i.data("before")!==j){if(g=d.editable_validate,h=j,"function"==typeof g?h=g(j,i.data("original"),k,i):"function"==typeof(g=a.tablesorter.getColumnData(c.table,g,k))&&(h=g(j,i.data("original"),k,i)),f&&h!==!1)return c.$table.find(".tseditable-last-edited-cell").removeClass("tseditable-last-edited-cell"),i.addClass("tseditable-last-edited-cell").html(a.trim(h)).data("before",h).data("original",h).trigger("change"),c.$table.trigger("updateCell",[i.closest("td"),!1,function(){d.editable_autoResort?setTimeout(function(){c.$table.trigger("sorton",[c.sortList,function(){b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"),!0)},!0])},10):b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"))}]),!1}else h||"keydown"===e.type||(clearTimeout(i.data("timer")),i.data("timer",setTimeout(function(){a.isFunction(d.editable_blur)&&d.editable_blur(a.trim(i.text()),k,i)},100)),i.html(a.trim(i.data("original"))))}})}};a.tablesorter.addWidget({id:"editable",options:{editable_columns:[],editable_enterToAccept:!0,editable_autoAccept:!0,editable_autoResort:!1,editable_wrapContent:"
",editable_trimContent:!0,editable_validate:null,editable_focused:null,editable_blur:null,editable_selectAll:!1,editable_noEdit:"no-edit",editable_editComplete:"editComplete"},init:function(a,c,d,e){e.editable_columns.length&&(b.update(d,e),b.bindEvents(d,e))}})}(jQuery); \ No newline at end of file +!function(a){"use strict";var b=a.tablesorter.editable={editComplete:function(a,b,c,d){c.removeClass("tseditable-last-edited-cell").trigger(b.editable_editComplete,[a]),d&&setTimeout(function(){c.focus()},50)},selectAll:function(a){setTimeout(function(){var b,c=document.createRange();c.selectNodeContents(a),b=window.getSelection(),b.removeAllRanges(),b.addRange(c)},100)},update:function(b,c){var d,e,f,g=[],h=[];if(!c.editable_columnsArray&&"string"===a.type(c.editable_columns)&&c.editable_columns.indexOf("-")>=0)for(e=c.editable_columns.split(/\s*-\s*/),d=parseInt(e[0],10)||0,e=parseInt(e[1],10)||b.columns-1,e>b.columns&&(e=b.columns-1);e>=d;d++)g.push(d),h.push("td:nth-child("+(d+1)+")");else a.isArray(c.editable_columns)&&a.each(c.editable_columnsArray||c.editable_columns,function(a,c){c").wrapInner(c.editable_wrapContent).children().length||a.isFunction(c.editable_wrapContent),b.$tbodies.find(h.join(",")).not("."+c.editable_noEdit).each(function(){f=a(this),e&&0===f.children().length&&f.wrapInner(c.editable_wrapContent),f.children().length?f.children().not("."+c.editable_noEdit).each(function(){var b=a(this);c.editable_trimContent&&b.html(function(b,c){return a.trim(c)}),b.prop("contenteditable",!0)}):(c.editable_trimContent&&f.html(function(b,c){return a.trim(c)}),f.prop("contenteditable",!0))})},bindEvents:function(c,d){c.$table.off("updateComplete pagerComplete ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("updateComplete pagerComplete ".split(" ").join(".tseditable "),function(){b.update(c,c.widgetOptions)}),c.$tbodies.off("mouseleave focus blur focusout keydown ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("mouseleave.tseditable",function(){c.$table.data("contentFocused")&&(c.$table.data("contentFocused",!0),a(":focus").trigger("focusout"))}).on("focus.tseditable","[contenteditable]",function(e){clearTimeout(a(this).data("timer")),c.$table.data("contentFocused",e.target);var f=a(this),g=d.editable_selectAll,h=f.closest("td").index(),i=f.html();d.editable_trimContent&&(i=a.trim(i)),f.off("keydown.tseditable").on("keydown.tseditable",function(a){d.editable_enterToAccept&&13===a.which&&a.preventDefault()}),f.data({before:i,original:i}),"function"==typeof d.editable_focused&&d.editable_focused(i,h,f),g&&("function"==typeof g?g(i,h,f)&&b.selectAll(f[0]):b.selectAll(f[0]))}).on("blur focusout keydown ".split(" ").join(".tseditable "),"[contenteditable]",function(e){if(c.$table.data("contentFocused")){var f,g,h=!1,i=a(e.target),j=i.html(),k=i.closest("td").index();if(d.editable_trimContent&&(j=a.trim(j)),27===e.which)return i.html(i.data("original")).trigger("blur.tseditable"),c.$table.data("contentFocused",!1),!1;if(f=13===e.which&&(d.editable_enterToAccept||e.altKey)||d.editable_autoAccept&&"keydown"!==e.type,f&&i.data("before")!==j){if(g=d.editable_validate,h=j,"function"==typeof g?h=g(j,i.data("original"),k,i):"function"==typeof(g=a.tablesorter.getColumnData(c.table,g,k))&&(h=g(j,i.data("original"),k,i)),f&&h!==!1)return c.$table.find(".tseditable-last-edited-cell").removeClass("tseditable-last-edited-cell"),i.addClass("tseditable-last-edited-cell").html(h).data("before",h).data("original",h).trigger("change"),c.$table.trigger("updateCell",[i.closest("td"),!1,function(){d.editable_autoResort?setTimeout(function(){c.$table.trigger("sorton",[c.sortList,function(){b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"),!0)},!0])},10):b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"))}]),!1}else h||"keydown"===e.type||(clearTimeout(i.data("timer")),i.data("timer",setTimeout(function(){a.isFunction(d.editable_blur)&&(j=i.html(),d.editable_blur(d.editable_trimContent?a.trim(j):j,k,i))},100)),i.html(i.data("original")))}})}};a.tablesorter.addWidget({id:"editable",options:{editable_columns:[],editable_enterToAccept:!0,editable_autoAccept:!0,editable_autoResort:!1,editable_wrapContent:"
",editable_trimContent:!0,editable_validate:null,editable_focused:null,editable_blur:null,editable_selectAll:!1,editable_noEdit:"no-edit",editable_editComplete:"editComplete"},init:function(a,c,d,e){e.editable_columns.length&&(b.update(d,e),b.bindEvents(d,e))}})}(jQuery); \ No newline at end of file diff --git a/docs/example-widget-editable.html b/docs/example-widget-editable.html index a36562c6..3a1ffc10 100644 --- a/docs/example-widget-editable.html +++ b/docs/example-widget-editable.html @@ -71,6 +71,7 @@ td.no-edit, span.no-edit { return /^b/i.test(txt) && columnIndex === 0; }, editable_wrapContent : '
', // wrap all editable cell content... makes this widget work in IE, and with autocomplete + editable_trimContent : true, // trim content ( removes outer tabs & carriage returns ) editable_noEdit : 'no-edit', // class name of cell that is not editable editable_editComplete : 'editComplete' // event fired after the table content has been edited } @@ -420,7 +421,7 @@ td.no-edit, span.no-edit { When a table cell is formatted as follows: 
<td>
 	John
-</td>
All carriage returns and tab(s) within the table cell would be included before editing. Once the contenteditable element has focus, the content is cleaned up.
+</td>Carriage returns and tab(s) at the beginning & end of the contenteditable table cells will be removed initially and after editing.

If this option is true, this widget will trim content upon initialization; this is necessary if you need cleaned it up content before editing, like with an autocomplete script.

diff --git a/js/widgets/widget-editable.js b/js/widgets/widget-editable.js index f967aedb..a1808ff4 100644 --- a/js/widgets/widget-editable.js +++ b/js/widgets/widget-editable.js @@ -76,7 +76,7 @@ var tse = $.tablesorter.editable = { $t.children().not( '.' + wo.editable_noEdit ).each( function() { var $this = $( this ); if ( wo.editable_trimContent ) { - $this.text( function( i, txt ) { + $this.html( function( i, txt ) { return $.trim( txt ); }); } @@ -84,7 +84,7 @@ var tse = $.tablesorter.editable = { }); } else { if ( wo.editable_trimContent ) { - $t.text( function( i, txt ) { + $t.html( function( i, txt ) { return $.trim( txt ); }); } @@ -115,15 +115,18 @@ var tse = $.tablesorter.editable = { 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 ) { + txt = $this.html(); + if ( wo.editable_trimContent ) { + txt = $.trim( txt ); + } + // prevent enter from adding into the content + $this + .off( 'keydown.tseditable' ) + .on( 'keydown.tseditable', function( e ){ + if ( wo.editable_enterToAccept && e.which === 13 ) { e.preventDefault(); } }); - } $this.data({ before : txt, original: txt }); if ( typeof wo.editable_focused === 'function' ) { @@ -145,11 +148,14 @@ var tse = $.tablesorter.editable = { var t, validate, valid = false, $this = $( e.target ), - txt = $.trim( $this.text() ), + txt = $this.html(), column = $this.closest( 'td' ).index(); + if ( wo.editable_trimContent ) { + txt = $.trim( txt ); + } if ( e.which === 27 ) { // user cancelled - $this.html( $.trim( $this.data( 'original' ) ) ).trigger( 'blur.tseditable' ); + $this.html( $this.data( 'original' ) ).trigger( 'blur.tseditable' ); c.$table.data( 'contentFocused', false ); return false; } @@ -171,7 +177,7 @@ var tse = $.tablesorter.editable = { c.$table.find( '.tseditable-last-edited-cell' ).removeClass( 'tseditable-last-edited-cell' ); $this .addClass( 'tseditable-last-edited-cell' ) - .html( $.trim( valid ) ) + .html( valid ) .data( 'before', valid ) .data( 'original', valid ) .trigger( 'change' ); @@ -192,11 +198,12 @@ var tse = $.tablesorter.editable = { clearTimeout( $this.data( 'timer' ) ); $this.data( 'timer', setTimeout( function() { if ( $.isFunction( wo.editable_blur ) ) { - wo.editable_blur( $.trim( $this.text() ), column, $this ); + txt = $this.html(); + wo.editable_blur( wo.editable_trimContent ? $.trim( txt ) : txt, column, $this ); } }, 100 ) ); // restore original content on blur - $this.html( $.trim( $this.data( 'original' ) ) ); + $this.html( $this.data( 'original' ) ); } }); }