Added width property to selection plugin.

dom/selection/selection.html

@@ -32,24 +32,29 @@
 				id='multi'>Select Across Multiple Elements</a></td>
 		<td><div id='2'>012<div>3<span>4</span>5</div></div></td>
 	</tr>
-</table>		
+</table>
+<p>Selection width: <span id="selectionwidth">0</span></p>
 		<script type='text/javascript' 
                 src='../../../steal/steal.js'></script>
 		<script type='text/javascript'>
 steal('jquery/dom/selection', function(){
 
 	$('#textarea').click(function(){
-		$('textarea').selection(1,5);
+		$('textarea').selection(1,5).mouseup();
 	})
 	$('#input').click(function(){
-		$('input').selection(1,5);
+		$('input').selection(1,5).mouseup();
 	})
 	$('#p').click(function(){
-		$('#1').selection(1,5);
+		$('#1').selection(1,5).mouseup();
 	})
 	$('#multi').click(function(){
-		$('#2').selection(1,5);
+		$('#2').selection(1,5).mouseup();
 	})
+
+	$('textarea,input,#1,#2').mouseup(function(){
+		$('#selectionwidth').text($(this).selection().width);
+	});
 });
 		</script>
 	</body>

dom/selection/selection.js

@@ -40,7 +40,8 @@ getElementsSelection = function(el, win){
 	}
 	return {
 		start: startPos,
-		end : endPos
+		end : endPos,
+		width : endPos - startPos
 	};
 },
 // Text selection works differently for selection in an input vs
@@ -56,9 +57,9 @@ getSelection = function(el){
 		 	&& document.activeElement != el 
 			&& el.selectionStart == el.selectionEnd 
 			&& el.selectionStart == 0){
-			return {start: el.value.length, end: el.value.length};
+			return {start: el.value.length, end: el.value.length, width: 0};
 		}
-		return  {start: el.selectionStart, end: el.selectionEnd}
+		return  {start: el.selectionStart, end: el.selectionEnd, width: el.selectionEnd - el.selectionStart};
 	} 
 	// getSelection means a 'normal' element in a standards browser.
 	else if(win.getSelection){
@@ -75,7 +76,8 @@ getSelection = function(el){
 				var start = r.text.length
 				return {
 					start: start,
-					end: start + real.text.length
+					end: start + real.text.length,
+					width: real.text.length
 				}
 			}
 			// This works on textareas and other elements
@@ -104,7 +106,7 @@ getSelection = function(el){
 				return res
 			}
 		}catch(e){
-			return {start: el.value.length, end: el.value.length};
+			return {start: el.value.length, end: el.value.length, width: 0};
 		}
 	} 
 },
@@ -199,7 +201,7 @@ getCharElement = function( elems , range, len ) {
  * Set or retrieve the currently selected text range. It works on all elements:
  *
  *      $('#text').selection(8, 12)
- *      $('#text').selection() // -> { start : 8, end : 12 }
+ *      $('#text').selection() // -> { start : 8, end : 12, width: 4 }
  *
  * @param {Number} [start] Start position of the selection range
  * @param {Number} [end] End position of the selection range
@@ -208,6 +210,7 @@ getCharElement = function( elems , range, len ) {
  *
  * - __start__ - The number of characters from the start of the element to the start of the selection.
  * - __end__ - The number of characters from the start of the element to the end of the selection.
+ * - __width__ - The width of the selection range.
  *
  * when no arguments are passed.
  */

dom/selection/selection.md

@@ -17,12 +17,13 @@ Using `jQuery.fn.selection` by providing a start and end offset:
 
 A call without any parameters will return the current selection:
 
-	  $('#text').selection() // -> { start : 8, end : 12 }
+	  $('#text').selection() // -> { start : 8, end : 12, width : 4 }
 
 Where the returned object contains:
 
 - __start__ - The number of characters from the start of the element to the start of the selection.
 - __end__ - The number of characters from the start of the element to the end of the selection.
+- __width__ - The width of the selection range.
 
 The selected text can be retrieved like this:
 

dom/selection/selection_test.js

@@ -11,25 +11,15 @@ test("getCharElement", function(){
 	stop();
 	setTimeout(function(){
 		var types = ['textarea','#inp','#1','#2'];
-		for(var i =0; i< types.length; i++){
-			//console.log(types[i])
-			$(types[i]).selection(1,5);
-		}
 		/*
 		$('textarea').selection(1,5);
 		$('input').selection(1,5);
 		$('#1').selection(1,5);
 		$('#2').selection(1,5);
 		*/
-		var res = [];
-		for(var i =0; i< types.length; i++){
-			res.push( $(types[i]).selection() );
-		}
-
-
-
-		for(var i =0; i< res.length; i++){
-			same(res[i],{start: 1, end: 5},types[i])
+		for(var i = 0; i < types.length; i++){
+			$(types[i]).selection(1, 5);
+			same($(types[i]).selection(), {start: 1, end: 5, width: 4}, types[i]);
 		}
 
 		start();