Ability to post in Forum

ui/site/ws/Connection.js

@@ -4,8 +4,9 @@ class Connection {
     linkCreated;
     wsStatus;
 
-    constructor() {
+    constructor(receiveCB) {
         this.init()
+        this.receiveCB = receiveCB
     }
     
     init() {
@@ -17,41 +18,13 @@ class Connection {
         this.ws.addEventListener('open', () => {
             this.connectionTries = 0
             console.log("Websocket connection established.");
-            this.ws.addEventListener('message', this.onMessage)
+            this.ws.addEventListener('message', this.receiveCB)
         });
         this.ws.addEventListener("close", () => {
             this.checkOpen();
             console.log('Websocket Closed')
         })
     }
-
-    onMessage = (event) => {
-        let message =  event.data;
-        let messageSplit = message.split('|');
-
-        switch(messageSplit[0]) {
-            case 'connected':
-                Forms.connected(messageSplit[1], messageSplit[2])
-                break;
-            case 'disconnected': 
-                Forms.disconnected(messageSplit[1])
-                break;
-            case 'UPDATE-SIZE':
-                updateFileSize(messageSplit[1], messageSplit[2]);
-                break;
-            case 'URL-TITLE-RESPONSE':
-                this.updateLinkTitle(messageSplit[1]);
-                break;
-            default:
-                console.log('Websocket message:', message);
-                break;
-        }
-        
-
-        if (messageSplit[1] == 'CSS-LINK') {
-            this.createCSSLink(message);
-        }
-    }
     
     async checkOpen() {
         if (this.ws.readyState === WebSocket.OPEN) {
@@ -70,65 +43,20 @@ class Connection {
         });
     }
     
-    sendMessage = (msg) => {
+    send = (msg) => {
+        console.log("sending")
         if (this.ws.readyState === WebSocket.OPEN) {
             this.ws.send(msg);
         }
+        else if(this.connectionTries === 0) {
+            setTimeout(() => {
+                this.send(msg)
+            }, 100)
+        }
         else {
-            console.log('No websocket connection: Cannot send message');
+            console.error('No websocket connection: Cannot send message');
         }
     }
-    
-    updateCSS = async (updateStyle, newValue) => {
-        let currentSpace = window.wrapper.getAttribute("name").replace(/ /g,'%20')
-        let currentFolder = window.location.pathname;
-        //create the inital link
-        this.linkCreated = false;
-        let cssIncomingText = ""
-        Array.from(document.styleSheets).forEach(el => {
-            if(el?.href?.includes?.(`.${currentSpace}.css`)) {
-                this.linkCreated = true;
-
-            }
-        })
-        let currentSpaceDataAttr = window.wrapper.getAttribute("name");
-        let cssInit = `parchment-page[name="${currentSpaceDataAttr}"] {background-color: #e9c9a0;} parchment-page[name="${currentSpaceDataAttr}"] > p.text {font-family: ${newValue};} parchment-page[name="${currentSpaceDataAttr}"] > file-::before,  parchment-page[name="${currentSpaceDataAttr}"] > image-::before,  parchment-page[name="${currentSpaceDataAttr}"] > parchment-page::before {font-family: ${newValue};font-weight: 400;} parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > file-::before, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > *, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > image-::before ,parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > parchment-page::before, parchment-page[name="${currentSpaceDataAttr}"] > a,  parchment-page[name="${currentSpaceDataAttr}"] > input-box  {font-family: ${newValue}; font-weight: 400;}`
-        cssIncomingText += cssInit
-        
-        let CSSRawData = `REQUEST|update-css|${currentFolder}|${cssIncomingText}|`
-        await this.checkOpen()
-        this.ws.send(CSSRawData)
-    }
-    
-    createCSSLink = (wsMessage) => {
-        let retrieveHref = wsMessage;
-        var link = document.createElement("link");
-        link.rel = "stylesheet";
-        link.id = window.wrapper.getAttribute('name')+"-css"
-        link.href = retrieveHref;
-        
-        let retrieveStyleLinks = document.querySelectorAll(`[href='${retrieveHref}']`);
-        if (retrieveStyleLinks[0] !== undefined) {
-            retrieveStyleLinks[0].remove();
-        }
-        window.wrapper.prepend(link);
-    }
-
-    scrapeExternalHTMLTitle = async (href) => {
-        let req = `REQUEST|scrape-title|${href}|`
-        await this.checkOpen()
-        this.ws.send(req)
-    }
-
-    updateLinkTitle = (title) => {
-        let link = document.querySelectorAll('.convert-to-title')[0]
-        if (title !=="") {
-            link.innerHTML += title;
-        } else {
-            link.innerHTML += link.getAttribute('href')
-        }
-        link.classList.remove('convert-to-title')
-    }
 }
 
 export default Connection

ui/site/ws/ConnectionHandler.js

@@ -1,22 +0,0 @@
-import Connection from "./Connection.js";
-
-export default class ConnectionHandler {
-    connection;
-    disabled = true;
-
-    constructor() {
-        this.connection = new Connection();
-    }
-
-    isOpen() {
-        if(this.connection.checkOpen()) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    send(msg) {
-        this.connection.sendMessage(msg)
-    }
-}

ui/site/ws/Socket.js

@@ -0,0 +1,46 @@
+import Connection from "./Connection.js";
+
+export default class Socket {
+    connection;
+    disabled = true;
+    requestID = 1;
+    pending = new Map();
+
+    constructor() {
+        this.connection = new Connection(this.receive);
+    }
+
+    isOpen() {
+        if(this.connection.checkOpen()) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    send(msg) {
+        return new Promise(resolve => {
+            const id = (++this.requestID).toString();
+            this.pending.set(id, resolve);
+            this.connection.send(JSON.stringify({ id, ...msg }));
+        });
+    }
+
+    receive = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.id && this.pending.has(msg.id)) {
+            this.pending.get(msg.id)(msg);
+            this.pending.delete(msg.id);
+            return;
+        } else {
+            this.onBroadcast(msg)
+        }
+    }
+
+    onBroadcast(msg) {
+        console.log(msg.msg)
+        window.dispatchEvent(new CustomEvent(msg.event, {
+            detail: msg.msg
+        }));
+    }
+}