summaryrefslogtreecommitdiffhomepage
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/whiteboard.js409
1 files changed, 121 insertions, 288 deletions
diff --git a/html/whiteboard.js b/html/whiteboard.js
index 7777d4e..9610468 100644
--- a/html/whiteboard.js
+++ b/html/whiteboard.js
@@ -3,145 +3,126 @@ function init() {
init_board();
}
-class AdjustingTimer {
- constructor() {
- this.update_counter = 0; // counting seconds since last counter reset
- }
+var revision;
- fast_mode() {
- if (this.update_counter < 5*60)
- return true;
- return false;
- }
+// helper for breaking feedback loop
+var caretpos = 0;
- // private method
- // returns current interval in ms
- current_update_interval()
- {
- if (this.fast_mode())
- return 2000; // 2s
- else
- return 5 * 60000; // 5min
- };
+function showQRWindow()
+{
+ document.getElementById("qrwindow").style.display = 'block';
+}
- // private
- count() {
- this.update_counter += this.current_update_interval() / 1000;
- };
+function hideQRWindow()
+{
+ document.getElementById("qrwindow").style.display = 'none';
+}
- // private
- on_timeout() {
- this.m_fn();
- this.count();
- var _this = this;
- this.update_timer = setTimeout(function(){_this.on_timeout();}, this.current_update_interval());
- };
+var websocket;
- // to be called once on startup
- start(fn) {
- this.m_fn = fn;
- var _this = this;
- this.update_timer = setTimeout(function(){_this.on_timeout();}, this.current_update_interval());
- };
+//
+// Callbacks for websocket data of different types
+//
- // to be called on activity:
- // * changes from remote
- // * changes by ourselves
- // * local activity, e.g. mouse move, or key presses
- reset() {
- if (!this.fast_mode()) {
- this.update_counter = 0;
- clearTimeout(this.update_timer);
- var _this = this;
- this.update_timer = setTimeout(function(){_this.on_timeout();}, this.current_update_interval());
- } else {
- this.update_counter = 0;
- }
- };
+function on_getfile(data, rev, pos)
+{
+ var board = document.getElementById("board");
+ if (board.value != data) {
+ board.value = data;
+ }
+ textAreaSetPos("board", pos);
+ revision = rev;
}
-var timer = new AdjustingTimer();
+function on_newid(id)
+{
+ var new_location = document.location.origin + document.location.pathname + '?id=' + id;
+ window.location.href = new_location;
+}
-function showQRWindow()
+function on_qrcode(png)
{
- document.getElementById("qrwindow").style.display = 'block';
+ var blob = new Blob([png], {type: 'image/png'});
+ var url = URL.createObjectURL(blob);
+ var img = document.getElementById("qrcode");
+ img.src = url;
+ showQRWindow();
}
-function hideQRWindow()
+function on_modify_ack(rev)
{
- document.getElementById("qrwindow").style.display = 'none';
+ revision = rev;
}
-function init_board() {
- var xhr = new XMLHttpRequest();
+function on_message(e) {
+ var parser = new DOMParser();
+ var xmlDocument = parser.parseFromString(e.data, "text/xml");
- const searchParams = (new URL(document.location)).searchParams;
- if (!searchParams.has('id')) {
- redirect_to_new_page();
- return;
- }
-
- // run on data received back
- xhr.onreadystatechange = function() {
- if (this.readyState == 3) {
- //set_status("Please wait while downloading " + filename + " ...");
- return;
- }
- if (this.readyState != 4) {
- return;
- }
- if (this.status != 200) {
- //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
- return;
- }
-
- var file = new Blob([this.response]);
- reader = new FileReader();
- reader.onload = function() {
- var board = document.getElementById("board");
- 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(); });
-
- timer.start(checkupdate);
- }
-
- reader.readAsBinaryString(file);
-
- //set_status(""); // OK
+ var type = xmlDocument.getElementsByTagName("type")[0].textContent;
+
+ if (type == "getfile") {
+ on_getfile(xmlDocument.getElementsByTagName("data")[0].textContent,
+ parseInt(xmlDocument.getElementsByTagName("revision")[0].textContent),
+ parseInt(xmlDocument.getElementsByTagName("cursorpos")[0].textContent));
+ } else if (type == "modify") {
+ on_modify_ack(parseInt(xmlDocument.getElementsByTagName("revision")[0].textContent));
+ } else if (type == "newid") {
+ on_newid(xmlDocument.getElementsByTagName("id")[0].textContent);
+ } else if (type == "qrcode") {
+ on_qrcode(xmlDocument.getElementsByTagName("png")[0].textContent);
+ } else if (type == "error") {
+ alert(xmlDocument.getElementsByTagName("message")[0].textContent);
+ } else {
+ alert("Unhandled message type: " + e.data + "|" + type);
}
+}
- var parser = new DOMParser();
- var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
-
- var requestElement = xmlDocument.getElementsByTagName("request")[0];
+function handleSelection() {
+ const activeElement = document.activeElement
- var commandElement = xmlDocument.createElement("command");
- commandElement.appendChild(document.createTextNode("getfile"));
- requestElement.appendChild(commandElement);
+ if (activeElement && activeElement.id === 'board') {
+ if (caretpos != activeElement.selectionStart) {
+ on_selectionchange(activeElement.selectionStart);
+ caretpos = activeElement.selectionStart;
+ }
+ }
+}
- var idElement = xmlDocument.createElement("id");
- idElement.appendChild(document.createTextNode(get_id()));
- requestElement.appendChild(idElement);
+function init_board() {
+ var newlocation = location.origin + location.pathname;
+ newlocation = newlocation.replace(/^http/, 'ws');
+ if (newlocation.slice(-1) != "/")
+ newlocation += "/";
+ newlocation += "websocket";
+ websocket = new WebSocket(newlocation);
+
+ websocket.onmessage = function(e) { on_message(e); };
+
+ websocket.onopen = function(e) {
+ const searchParams = (new URL(document.location)).searchParams;
+ if (!searchParams.has('id')) {
+ redirect_to_new_page();
+ return;
+ }
- xhr.open("POST", "whiteboard.fcgi", true);
- xhr.setRequestHeader("Content-type", "text/xml");
- xhr.responseType = 'blob';
- xhr.send(xmlDocument);
+ var board = document.getElementById("board");
+ board.addEventListener("input", function() {on_input(); });
+ // Need this workaround (different from direct on_selectionchange) for Chrome.
+ // Otherwise, callback will not be called on Chrome.
+ document.addEventListener("selectionchange", handleSelection);
+ //board.addEventListener("selectionchange", function() {on_selectionchange(); });
+
+ websocket.send("<request><command>getfile</command><id>" + get_id() + "</id></request>");
+ };
+
+ websocket.onclose = function(e) {
+ alert("Server connection closed.");
+ };
+
+ websocket.onerror = function(e) {
+ alert("Error: Server connection closed.");
+ };
- //set_status("Please wait while server prepares " + filename + " ...");
-
document.getElementById("qrwindow").onclick = function() {
hideQRWindow();
}
@@ -161,81 +142,20 @@ function get_id()
return searchParams.get('id');
}
+// from html
function on_new_page()
{
- redirect_to_new_page();
+ redirect_to_new_page();
}
function redirect_to_new_page()
{
- var xhr = new XMLHttpRequest();
-
- // run on data received back
- xhr.onreadystatechange = function() {
- if (this.readyState == 3) {
- //set_status("Please wait while downloading " + filename + " ...");
- return;
- }
- if (this.readyState != 4) {
- return;
- }
- if (this.status != 200) {
- //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
- return;
- }
-
- var id = this.responseText;
- //alert("location=" + document.location.href);
- var new_location = document.location.href;
- var pos = new_location.search("\\?");
- if (pos >= 0)
- new_location = new_location.substring(0, pos);
- new_location += '?id=' + id;
-
- window.location.href = new_location;
- //set_status(""); // OK
- }
-
- var parser = new DOMParser();
- var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
-
- var requestElement = xmlDocument.getElementsByTagName("request")[0];
-
- var commandElement = xmlDocument.createElement("command");
- commandElement.appendChild(document.createTextNode("newid"));
- requestElement.appendChild(commandElement);
-
- xhr.open("POST", "whiteboard.fcgi", true);
- xhr.setRequestHeader("Content-type", "text/xml");
- xhr.send(xmlDocument);
-
- //set_status("Please wait while server prepares " + filename + " ...");
+ websocket.send("<request><command>newid</command></request>");
}
// local change done
-function on_modify()
+function on_input()
{
- timer.reset();
-
- var xhr = new XMLHttpRequest();
-
- // run on data received back
- xhr.onreadystatechange = function() {
- if (this.readyState == 3) {
- //set_status("Please wait while downloading " + filename + " ...");
- return;
- }
- if (this.readyState != 4) {
- return;
- }
- if (this.status != 200) {
- //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
- return;
- }
-
- //set_status(""); // OK
- }
-
var parser = new DOMParser();
var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
@@ -250,131 +170,47 @@ function on_modify()
requestElement.appendChild(idElement);
var dataElement = xmlDocument.createElement("data");
- dataElement.appendChild(document.createTextNode(addPos(document.getElementById("board").value, document.getElementById("board").selectionStart)));
+ dataElement.appendChild(document.createTextNode(document.getElementById("board").value));
requestElement.appendChild(dataElement);
- xhr.open("POST", "whiteboard.fcgi", true);
- xhr.setRequestHeader("Content-type", "text/xml");
- xhr.responseType = 'blob';
- xhr.send(xmlDocument);
-
- //set_status("Please wait while server prepares " + filename + " ...");
-}
-
-// checksum of string
-function checksum32(s) {
- var result = 0;
- for (var i = 0; i < s.length; i++) {
- result = ((((result >>> 1) | ((result & 1) << 31)) | 0) ^ (s.charCodeAt(i) & 0xFF)) | 0;
- }
- return (result & 0x7FFFFFFF) | 0;
+ websocket.send(new XMLSerializer().serializeToString(xmlDocument));
}
-function textAreaSetPos(id, pos)
+// for cursor position
+function on_selectionchange(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();
-
- // run on data received back
- xhr.onreadystatechange = function() {
- if (this.readyState == 3) {
- //set_status("Please wait while downloading " + filename + " ...");
- return;
- }
- if (this.readyState != 4) {
- return;
- }
- if (this.status != 200) {
- //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
- return;
- }
-
- // no change if response is text/plain
- if (this.getResponseHeader("Content-Type") == "application/octet-stream") {
- timer.reset();
- var file = new Blob([this.response]);
- reader = new FileReader();
- reader.onload = function() {
- var board = document.getElementById("board");
- 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);
- }
-
- //set_status(""); // OK
- }
-
var parser = new DOMParser();
var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
var requestElement = xmlDocument.getElementsByTagName("request")[0];
var commandElement = xmlDocument.createElement("command");
- commandElement.appendChild(document.createTextNode("checkupdate"));
+ commandElement.appendChild(document.createTextNode("cursorpos"));
requestElement.appendChild(commandElement);
var idElement = xmlDocument.createElement("id");
idElement.appendChild(document.createTextNode(get_id()));
requestElement.appendChild(idElement);
- var checksumElement = xmlDocument.createElement("checksum");
- checksumElement.appendChild(document.createTextNode(checksum32(addPos(document.getElementById("board").value, document.getElementById("board").selectionStart))));
- requestElement.appendChild(checksumElement);
-
- xhr.open("POST", "whiteboard.fcgi", true);
- xhr.setRequestHeader("Content-type", "text/xml");
- xhr.responseType = 'blob';
- xhr.send(xmlDocument);
+ var dataElement = xmlDocument.createElement("pos");
+ dataElement.appendChild(document.createTextNode(pos));
+ requestElement.appendChild(dataElement);
- //set_status("Please wait while server prepares " + filename + " ...");
+ websocket.send(new XMLSerializer().serializeToString(xmlDocument));
}
-function on_qrcode()
+function textAreaSetPos(id, pos)
{
- var xhr = new XMLHttpRequest();
-
- // run on data received back
- xhr.onreadystatechange = function() {
- if (this.readyState == 3) {
- //set_status("Please wait while downloading " + filename + " ...");
- return;
- }
- if (this.readyState != 4) {
- return;
- }
- if (this.status != 200) {
- //set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
- return;
- }
-
- if (this.getResponseHeader("Content-Type") == "image/png") {
- var blob = new Blob([this.response], {type: 'image/png'});
- var url = URL.createObjectURL(blob);
- var img = document.getElementById("qrcode");
- img.src = url;
- showQRWindow();
- }
-
- //set_status(""); // OK
+ if (document.getElementById(id).selectionStart != pos) {
+ document.getElementById(id).selectionStart = pos;
+ document.getElementById(id).selectionEnd = pos;
+ caretpos = pos;
}
+}
+// HTML button
+function on_qrcode()
+{
var parser = new DOMParser();
var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
@@ -388,9 +224,6 @@ function on_qrcode()
idElement.appendChild(document.createTextNode(document.location));
requestElement.appendChild(idElement);
- xhr.open("POST", "whiteboard.fcgi", true);
- xhr.setRequestHeader("Content-type", "text/xml");
- xhr.responseType = 'blob';
- xhr.send(xmlDocument);
+ websocket.send(new XMLSerializer().serializeToString(xmlDocument));
}