Follow editor's cursor

1 files changed, 28 insertions, 4 deletions

diff --git a/html/whiteboard.js b/html/whiteboard.js
index ae20c5b..7777d4e 100644
--- a/html/whiteboard.js
+++ b/html/whiteboard.js
@@ -99,10 +99,17 @@ function init_board() {
 				reader = new FileReader();
 				reader.onload = function() {
 					var board = document.getElementById("board");
-					board.innerHTML = reader.result;
+					var pos = reader.result.indexOf('\x01');
+					if (pos == -1) { // not found
+					 board.value = reader.result;
+					} else {
+					 board.value = reader.result.substr(0, pos) + reader.result.substr(pos + 1);
+					}
+					textAreaSetPos("board", pos);
 
 					// Initialization done. Now we can start modifying.
 					board.addEventListener("input", function() {on_modify(); });
+					board.addEventListener("selectionchange", function() {on_modify(); });
 
 					// Initialization done. Now we can start modifying.
 					document.addEventListener("mousemove", function() {timer.reset(); });
@@ -243,7 +250,7 @@ function on_modify()
 	requestElement.appendChild(idElement);
 
 	var dataElement = xmlDocument.createElement("data");
-	dataElement.appendChild(document.createTextNode(document.getElementById("board").value));
+	dataElement.appendChild(document.createTextNode(addPos(document.getElementById("board").value, document.getElementById("board").selectionStart)));
 	requestElement.appendChild(dataElement);
 
 	xhr.open("POST", "whiteboard.fcgi", true);
@@ -263,6 +270,17 @@ function checksum32(s) {
 	return (result & 0x7FFFFFFF) | 0;
 }
 
+function textAreaSetPos(id, pos)
+{
+	document.getElementById(id).selectionStart = pos;
+	document.getElementById(id).selectionEnd = pos;
+}
+
+function addPos(s, pos)
+{
+	return s.substr(0, pos) + '\x01' + s.substr(pos);
+}
+
 // gets called by regular polling
 function checkupdate() {
 	var xhr = new XMLHttpRequest();
@@ -288,7 +306,13 @@ function checkupdate() {
 					reader = new FileReader();
 					reader.onload = function() {
 						var board = document.getElementById("board");
-						board.value = reader.result;
+						var pos = reader.result.indexOf('\x01');
+						if (pos == -1) { // not found
+						 board.value = reader.result;
+						} else {
+						 board.value = reader.result.substr(0, pos) + reader.result.substr(pos + 1);
+						}
+						textAreaSetPos("board", pos);
 					}
 					
 					reader.readAsBinaryString(file);
@@ -311,7 +335,7 @@ function checkupdate() {
 	requestElement.appendChild(idElement);
 
 	var checksumElement = xmlDocument.createElement("checksum");
-	checksumElement.appendChild(document.createTextNode(checksum32(document.getElementById("board").value)));
+	checksumElement.appendChild(document.createTextNode(checksum32(addPos(document.getElementById("board").value, document.getElementById("board").selectionStart))));
 	requestElement.appendChild(checksumElement);
 
 	xhr.open("POST", "whiteboard.fcgi", true);