Line detection

A good advice from my supervisor was to use line locking for the concurrent editor. This would change radically the point of view on how to program the application but technically uses the same resources as the idea I had about set a pointer image to indicate what line are other users editing. I'll explain what is this common resource and what limitations or obstacles I see in its implementation, mainly cross-browser limitations:

In order to control the editing permissions a user would have in a specific line we need to know in what line is the user at the moment. There is the wrap attribute textarea when it is set to "hard" the text is sent wrapped to the server. I haven't tried a test to see if it helps me to find out at least how many lines currently are in the textarea, though.
Another possibility is to use the textRange object and its methods to find out in which line is our caret. This test has been successful in explorer where the "boundingTop" and "boundingLeft" methods give me the position of the textRange, the caret indeed, in pixels
So, to set a dinamic pointer just above the textarea which indicates the caret position we only need something like:

function start() {
  // The current selection
  var range = document.selection.createRange();
  var tr = document.getElementById("content").createTextRange();
  var bL = tr.boundingLeft;

  var difflb = (range.boundingLeft - bL) > 0 ? range.boundingLeft - talb : 0;
  document.getElementById("contimg").style.padding = "0px 0px 0px " + difflb + "px";

  setTimeout(startIframe,5000);
}
   
...

<body onload="startIframe()">
<div id="contimg"><img src="pointer.gif" /></div>
<textarea id="content"></textarea>

Note that we also get the boundingLeft of the textarea to set the pointer just where the textarea begins
This snippet doesn't bother about possible scroll problems of the site, but there are some snippets that solve such a problem
If we set the line height to a specific value we can do the same with another pointer pointer next to the textarea, on the left or right side
If we send this values to the other users they can show a pointer as the line position of my caret

Unfortunetely, "boundingTop" and "boundingLeft" methods dont exist in firefox. The most you can get with textRange in FF is the position of your caret in characters. Thus, you cannot determine in which line is this caret because, even though the cols parameter of the textarea is set, the last word of a line can be placed into the next line if this word is too long to fit in the current line
I think I saw a snippet to solve this problem but I've been unlucky searching the url again. A weak algorithm could consider a fixed number of characters per line and despite of the limitation I said above the position of the line could have a margin of error of 1 line (above or below) which is ok to show the pointer in other users screens but i think it's not enough to set a strong system of permissions to let the users edit or not specific lines.
However, if we think of a "chunk of text" locking instead of line locking then the idea could be implemented

Thanks Vlado ;)

TextRange reference:
Internet Explorer
Firefox

Comments

Cursor position line number in firefox.

Hi,
I read ur post regarding the line detection. I am new into java programming. Currently I am working on a java application, in which I have a textarea. The user at any moment can change the font size and type in the textarea. Now here I need to get the cursor line position i.e. the line number in which cursor is situated. I am able to get the line number for IE using boundingTop, boundingLeft property. But the same thing if I am not wrong is not supported in Firefox. Can anyone please help me with this, some idea regarding the same.

Thanks & Regards,

Kshetty.

SoC 2006: Collaborative Editor

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week