diff --git a/docs/example-widget-editable.html b/docs/example-widget-editable.html index 63e7568a..c4fc9464 100644 --- a/docs/example-widget-editable.html +++ b/docs/example-widget-editable.html @@ -52,6 +52,9 @@ td.no-edit, span.no-edit { editable_autoAccept : true, // accepts any changes made to the table cell automatically (v2.17.6) editable_autoResort : false, // auto resort after the content has changed. editable_validate : null, // return a valid string: function(text, original){ return text; } + editable_focused : null, // function(txt, columnIndex, $element) { } + editable_blur : null, // function(txt, columnIndex, $element) { } + editable_selectAll : null, // function(txt, columnIndex, $element) { return true; } editable_noEdit : 'no-edit', // class name of cell that is not editable editable_editComplete : 'editComplete' // event fired after the table content has been edited } @@ -241,6 +244,90 @@ td.no-edit, span.no-edit { + + + Callback function that is executeed when the contenteditable cell is focused (v2.17.8) +
+
+ Set this function to manipulate or adjust the content when the content editable is focused + 
$(function(){
+
+  $('#table').tablesorter({
+    widgets : ['editable'],
+    widgetOptions : {
+      editable_focused : function(txt, columnIndex, $element){
+        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
+        $element.closest('td').addClass('focused');
+      },
+      editable_blur : function(txt, columnIndex, $element){
+        $element.closest('td').removeClass('focused');
+      }
+    }
+  });
+
+});
+ Default value: null +
+ + + + + + Callback function that is executeed when the contenteditable cell is no longer focused (v2.17.8) +
+
+ Set this function to manipulate or adjust the content when the content editable is blurred + 
$(function(){
+
+  $('#table').tablesorter({
+    widgets : ['editable'],
+    widgetOptions : {
+      editable_focused : function(txt, columnIndex, $element){
+        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
+        $element.closest('td').addClass('focused');
+      },
+      editable_blur : function(txt, columnIndex, $element){
+        $element.closest('td').removeClass('focused');
+      }
+    }
+  });
+
+});
+ Default value: null +
+ + + + + + Set to automatically select all content when the contenteditable cell is focused (v2.17.8) +
+
+ Set this option to a boolean, or a function that returns a boolean: + + 
$(function(){
+
+  $('#table').tablesorter({
+    widgets : ['editable'],
+    widgetOptions : {
+      editable_selectAll : function(txt, columnIndex, $element){
+        // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
+        // only select everthing within the element when the content starts with the letter "B"
+        return /^b/i.test(txt) && columnIndex === 0;
+      }
+    }
+  });
+
+});
+ Default value: null +
+ + + Validate the content change (v2.17.8) diff --git a/js/widgets/widget-editable.js b/js/widgets/widget-editable.js index 387b26df..2d805fdd 100644 --- a/js/widgets/widget-editable.js +++ b/js/widgets/widget-editable.js @@ -14,7 +14,10 @@ editable_enterToAccept : true, editable_autoAccept : true, editable_autoResort : false, - editable_validate : null, // function(text, originalText){ return text; } + 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' }, @@ -30,6 +33,17 @@ 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 ) { @@ -64,9 +78,12 @@ } }) .on('focus.tseditable', '[contenteditable]', function(e){ + clearTimeout( $(this).data('timer') ); c.$table.data( 'contentFocused', e.target ); var $this = $(this), - v = $this.html(); + selAll = wo.editable_selectAll, + column = $this.closest('td').index(), + txt = $this.html(); if (wo.editable_enterToAccept) { // prevent enter from adding into the content $this.on('keydown.tseditable', function(e){ @@ -75,7 +92,21 @@ } }); } - $this.data({ before : v, original: v }); + $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; } @@ -124,6 +155,12 @@ 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( $this.text(), column, $this ); + } + }, 100)); // restore original content on blur $this.html( $this.data('original') ); }