X-Git-Url: https://jxself.org/git/?p=mudsync.git;a=blobdiff_plain;f=data%2Fweb-static%2Fjs%2Fmudsync.js;h=c5b7dca82d47cd928e351035814fda29b01327e1;hp=631fa89e0f1c6e7ec672f16ca5bd218f61d5aeff;hb=25c34496ce23be265460bc4c95cba6036ff577a2;hpb=e8015ebb1351ace6536cfe04aab1e29c26f22366 diff --git a/data/web-static/js/mudsync.js b/data/web-static/js/mudsync.js index 631fa89..c5b7dca 100644 --- a/data/web-static/js/mudsync.js +++ b/data/web-static/js/mudsync.js @@ -18,27 +18,47 @@ ;;; along with Mudsync. If not, see . */ -function displayMessage(data, self_sent) { - var new_entry = document.createElement("div"); +function scrollDown() { + var stream_metabox = document.getElementById("stream-metabox");o + stream_metabox.scrollTop = stream_metabox.scrollHeight; +} + +function withMaybeScroll(thunk) { var stream_metabox = document.getElementById("stream-metabox"); var should_scroll = false; - if(stream_metabox.scrollTop === (stream_metabox.scrollHeight - - stream_metabox.offsetHeight)) { + // if within a reasonable threshold, we scroll + if((stream_metabox.scrollHeight - stream_metabox.offsetHeight) + - stream_metabox.scrollTop <= 50) { should_scroll = true; } - if (self_sent) { - new_entry.setAttribute("class", "stream-entry self-sent"); - document.getElementById("main-input").value = ""; - } else { - new_entry.setAttribute("class", "stream-entry"); - } - new_entry.innerHTML = data; - document.getElementById("stream").appendChild(new_entry); + thunk(); if (should_scroll) { stream_metabox.scrollTop = stream_metabox.scrollHeight; } } + +function displayMessage(data, self_sent) { + var new_entry = document.createElement("div"); + withMaybeScroll( + function () { + if (self_sent) { + new_entry.setAttribute("class", "stream-entry self-sent"); + document.getElementById("main-input").value = ""; + } else { + new_entry.setAttribute("class", "stream-entry"); + } + new_entry.innerHTML = data; + document.getElementById("stream").appendChild(new_entry); + }); +} + +function setConnectedText(string, to_class) { + var stream_metabox = document.getElementById("connection-status"); + stream_metabox.textContent = "[" + string + "]"; + stream_metabox.setAttribute("class", to_class); +} + function installWebsocket() { // TODO: Don't hardcode the websocket path; pull it from the DOM var address = "ws://".concat(window.location.hostname, ":", window.location.port); @@ -47,9 +67,16 @@ function installWebsocket() { displayMessage(evt.data, false); }; ws.onopen = function() { + setConnectedText("connected", "connected"); console.log("connected"); }; ws.onclose = function () { + setConnectedText("disconnected", "disconnected"); + // kludge, we shouldn't be using self_sent like this because it + // wipes the input + displayMessage( + "* You have been disconnected. Refresh to (hopefully) reconnect.", + true); console.log("closed websocket"); }; installUIHooks(ws); @@ -62,7 +89,10 @@ function installUIHooks(ws) { var keyCode = e.keyCode || e.which; if (keyCode == '13') { var input_val = input.value; - displayMessage("> ".concat(input_val), true); + withMaybeScroll( + function () { + displayMessage("> ".concat(input_val), true); + }); sendMessageToServer(ws, input_val); } } @@ -72,7 +102,7 @@ function sendMessageToServer(ws, data) { ws.send(data); } - window.onload = function () { installWebsocket(); + window.onresize = scrollDown; }