Editable: Add editable_focus, editable_blur, and editable_selectAll options. See #708

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 {
 						</td>
 					</tr>
 
+					<tr id="editable-focused">
+						<td><a href="#" class="permalink">editable_focused</a></td>
+						<td>Callback function that is executeed when the contenteditable cell is focused (<span class="version">v2.17.8</span>)
+							<div class="collapsible">
+							<br>
+							Set this function to manipulate or adjust the content when the content editable is focused
+							<pre class="prettyprint lang-js">$(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');
+      }
+    }
+  });
+
+});</pre>
+							Default value: <code>null</code>
+							</div>
+						</td>
+					</tr>
+
+					<tr id="editable-blur">
+						<td><a href="#" class="permalink">editable_blur</a></td>
+						<td>Callback function that is executeed when the contenteditable cell is no longer focused (<span class="version">v2.17.8</span>)
+							<div class="collapsible">
+							<br>
+							Set this function to manipulate or adjust the content when the content editable is blurred
+							<pre class="prettyprint lang-js">$(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');
+      }
+    }
+  });
+
+});</pre>
+							Default value: <code>null</code>
+							</div>
+						</td>
+					</tr>
+
+					<tr id="editable-selectall">
+						<td><a href="#" class="permalink">editable_selectAll</a></td>
+						<td>Set to automatically select all content when the contenteditable cell is focused (<span class="version">v2.17.8</span>)
+							<div class="collapsible">
+							<br>
+							Set this option to a boolean, or a function that returns a boolean:
+							<ul>
+								<li>When <code>true</code>, all of the text within the current contenteditable element will be selected.</li>
+								<li>When <code>false</code>, no selection is made.</li>
+								<li>When this option contains a function, return either <code>true</code> to select all of the text within the element, or <code>false</code> to not select any text.</li>
+							</ul>
+							<pre class="prettyprint lang-js">$(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;
+      }
+    }
+  });
+
+});</pre>
+							Default value: <code>null</code>
+							</div>
+						</td>
+					</tr>
+
 					<tr id="editable-validate">
 						<td><a href="#" class="permalink">editable_validate</a></td>
 						<td>Validate the content change (<span class="version updated">v2.17.8</span>)

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') );
 					}