Ooui-tws-port/Ooui/Client.js

256 lines
6.4 KiB
JavaScript
Raw Normal View History

2017-06-13 01:24:30 +00:00
2017-12-10 03:18:34 +00:00
var debug = false;
2017-06-18 08:17:47 +00:00
const nodes = {};
2017-06-13 01:24:30 +00:00
let socket = null;
2017-06-13 04:50:15 +00:00
2017-07-08 05:54:03 +00:00
const mouseEvents = {
click: true,
dblclick: true,
mousedown: true,
mouseenter: true,
mouseleave: true,
mousemove: true,
mouseout: true,
mouseover: true,
mouseup: true,
wheel: true,
};
// Try to close the socket gracefully
2017-11-16 03:59:01 +00:00
window.onbeforeunload = function() {
if (socket != null) {
socket.close (1001, "Unloading page");
socket = null;
console.log ("Web socket closed");
}
return null;
}
function getSize () {
return {
height: window.innerHeight,
width: window.innerWidth
};
}
// Main entrypoint
function ooui (rootElementPath) {
var initialSize = getSize ();
var wsArgs = (rootElementPath.indexOf("?") >= 0 ? "&" : "?") +
"w=" + initialSize.width + "&h=" + initialSize.height;
var proto = "ws";
if (location.protocol == "https:") {
proto = "wss";
}
socket = new WebSocket (proto + "://" + document.location.host + rootElementPath + wsArgs, "ooui");
socket.addEventListener ("open", function (event) {
console.log ("Web socket opened");
});
socket.addEventListener ("error", function (event) {
console.error ("Web socket error", event);
});
socket.addEventListener ("close", function (event) {
console.error ("Web socket close", event);
});
socket.addEventListener("message", function (event) {
const messages = JSON.parse (event.data);
if (debug) console.log("Messages", messages);
if (Array.isArray (messages)) {
const jqs = []
messages.forEach (function (m) {
// console.log('Raw value from server', m.v);
m.v = fixupValue (m.v);
if (m.k.startsWith ("$.")) {
jqs.push (m);
}
else {
processMessage (m);
}
});
// Run jQuery functions last since they usually require a fully built DOM
jqs.forEach (processMessage);
}
});
console.log("Web socket created");
// Throttled window resize event
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
2017-11-26 17:28:06 +00:00
resizeHandler();
}, 100);
}
}
function resizeHandler() {
const em = {
m: "event",
2017-12-11 03:02:41 +00:00
id: "window",
k: "resize",
v: getSize (),
};
const ems = JSON.stringify (em);
if (socket != null)
socket.send (ems);
if (debug) console.log ("Event", em);
}
}());
}
2017-06-13 04:50:15 +00:00
function getNode (id) {
switch (id) {
case "window": return window;
case "document": return document;
case "document.body":
const bodyNode = document.getElementById ("ooui-body");
return bodyNode || document.body;
2017-06-13 04:50:15 +00:00
default: return nodes[id];
}
}
function msgCreate (m) {
const id = m.id;
2017-06-13 07:03:01 +00:00
const tagName = m.k;
2017-06-15 07:40:08 +00:00
const node = tagName === "#text" ?
2017-06-13 04:50:15 +00:00
document.createTextNode ("") :
document.createElement (tagName);
2017-06-15 07:40:08 +00:00
if (tagName !== "#text")
2017-06-13 04:50:15 +00:00
node.id = id;
nodes[id] = node;
2017-06-18 08:17:47 +00:00
if (debug) console.log ("Created node", node);
2017-06-13 04:50:15 +00:00
}
function msgSet (m) {
const id = m.id;
const node = getNode (id);
if (!node) {
2017-06-13 07:51:24 +00:00
console.error ("Unknown node id", m);
2017-06-13 04:50:15 +00:00
return;
}
2017-06-18 23:50:22 +00:00
const parts = m.k.split(".");
let o = node;
for (let i = 0; i < parts.length - 1; i++) {
o = o[parts[i]];
}
2017-06-24 21:52:34 +00:00
const lastPart = parts[parts.length - 1];
const value = lastPart === "htmlFor" ? m.v.id : m.v;
o[lastPart] = value;
if (debug) console.log ("Set", node, parts, value);
2017-06-13 04:50:15 +00:00
}
2017-11-26 17:28:06 +00:00
function msgSetAttr (m) {
const id = m.id;
const node = getNode (id);
if (!node) {
console.error ("Unknown node id", m);
return;
}
node.setAttribute(m.k, m.v);
if (debug) console.log ("SetAttr", node, m.k, m.v);
}
2017-06-13 04:50:15 +00:00
function msgCall (m) {
const id = m.id;
const node = getNode (id);
if (!node) {
2017-06-13 07:51:24 +00:00
console.error ("Unknown node id", m);
2017-06-13 04:50:15 +00:00
return;
}
const isJQuery = m.k.startsWith ("$.");
const target = isJQuery ? $(node) : node;
const f = isJQuery ? target[m.k.slice(2)] : target[m.k];
2017-06-18 08:17:47 +00:00
if (debug) console.log ("Call", node, f, m.v);
const r = f.apply (target, m.v);
2017-06-19 07:08:33 +00:00
if (typeof m.rid === 'string' || m.rid instanceof String) {
nodes[m.rid] = r;
}
2017-06-13 04:50:15 +00:00
}
2017-06-15 07:40:08 +00:00
function msgListen (m) {
2017-06-15 07:58:55 +00:00
const node = getNode (m.id);
if (!node) {
console.error ("Unknown node id", m);
return;
}
2017-06-18 08:17:47 +00:00
if (debug) console.log ("Listen", node, m.k);
node.addEventListener(m.k, function (e) {
2017-06-15 07:58:55 +00:00
const em = {
m: "event",
id: m.id,
k: m.k,
};
2017-06-19 05:28:14 +00:00
if (m.k === "change" || m.k === "input") {
2017-06-24 22:21:48 +00:00
em.v = (node.tagName === "INPUT" && node.type === "checkbox") ?
node.checked :
node.value;
2017-06-16 06:27:07 +00:00
}
2017-07-08 05:54:03 +00:00
else if (mouseEvents[m.k]) {
em.v = {
offsetX: e.offsetX,
offsetY: e.offsetY,
};
}
2017-06-15 07:58:55 +00:00
const ems = JSON.stringify (em);
2017-11-16 03:59:01 +00:00
if (socket != null)
socket.send (ems);
2017-06-18 08:17:47 +00:00
if (debug) console.log ("Event", em);
if (em.k === "submit")
e.preventDefault ();
2017-06-15 07:58:55 +00:00
});
2017-06-15 07:40:08 +00:00
}
2017-06-13 04:50:15 +00:00
function processMessage (m) {
switch (m.m) {
2017-06-13 07:03:01 +00:00
case "nop":
break;
case "create":
2017-06-13 04:50:15 +00:00
msgCreate (m);
break;
2017-06-13 07:03:01 +00:00
case "set":
2017-06-13 04:50:15 +00:00
msgSet (m);
break;
2017-11-26 17:28:06 +00:00
case "setAttr":
msgSetAttr (m);
break;
2017-06-13 07:03:01 +00:00
case "call":
2017-06-13 04:50:15 +00:00
msgCall (m);
break;
2017-06-15 07:40:08 +00:00
case "listen":
msgListen (m);
break;
2017-06-13 04:50:15 +00:00
default:
console.error ("Unknown message type", m.m, m);
}
}
function fixupValue (v) {
if (Array.isArray (v)) {
for (x in v) {
v[x] = fixupValue (v[x]);
}
return v;
}
else if (typeof v === 'string' || v instanceof String) {
2017-06-15 09:39:19 +00:00
if ((v.length > 1) && (v[0] === "\u2999")) {
2017-06-13 07:03:01 +00:00
// console.log("V", v);
2017-06-15 09:39:19 +00:00
return getNode (v);
2017-06-13 04:50:15 +00:00
}
}
return v;
}