*

Feature/web sockets

lib/socketmanager/socketmanager.go

@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"net/http"
 
 	"github.com/JustKato/FreePad/lib/objects"
 	"github.com/gin-gonic/gin"
@@ -34,13 +33,14 @@ func BindSocket(router *gin.RouterGroup) {
 		// Get the name of the pad to assign to this socket
 		padName := ctx.Param("pad")
 		// Upgrade the socket connection
-		webSocketUpgrade(ctx.Writer, ctx.Request, padName)
+		webSocketUpgrade(ctx, padName)
 	})
 
 }
 
-func webSocketUpgrade(w http.ResponseWriter, r *http.Request, padName string) {
-	conn, err := wsUpgrader.Upgrade(w, r, nil)
+func webSocketUpgrade(ctx *gin.Context, padName string) {
+
+	conn, err := wsUpgrader.Upgrade(ctx.Writer, ctx.Request, ctx.Request.Header)
 	if err != nil {
 		fmt.Printf("Failed to set websocket upgrade: %v\n", err)
 		return

static/css/main.css

@@ -45,6 +45,24 @@ main#main-card {
     tab-size: 2;
 
     font-family: 'Roboto Mono', monospace !important;
+
+    padding-top: 2rem;
+}
+
+#padTitle {
+    padding: .3rem .75rem !important;
+    border-radius: .25rem;
+    display: inline-block;
+}
+
+.dark #padTitle {
+    color: #db3384;
+    background-color: rgba(0, 0, 0, 0.10);
+}
+
+.light #padTitle {
+    color: #555273;
+    border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 #pad-content-area {
@@ -54,11 +72,16 @@ main#main-card {
     flex-flow: column;
 }
 
+.light .edit-content-text {
+    color: white !important;
+}
+
 .edit-content-text {
     display: none;
 }
 
 .read-only-content .edit-content-text {
+    margin-top: 1rem;
     display: block !important;
 }
 
@@ -78,6 +101,9 @@ main#main-card {
     max-height: calc(17rem + 30vh);
     min-height: 17rem;
     overflow: auto;
+
+    padding-top: 2rem;
+    margin-top: 1rem;
 }
 
 textarea:focus,

static/js/pad-scripts.js

@@ -138,7 +138,10 @@ function renderArchivesSelection() {
             let resp = confirm("Load contents of pad from memory? This will overwrite the current pad for everyone.");
 
             if (!!resp) {
-                document.getElementById(`pad-content`).value = a.content;
+                // Update visually for the client
+                updatePadContent(a.content);
+                // Send the update
+                window.socket.sendPadUpdate();
             }
         })
 
@@ -210,6 +213,8 @@ function setTextareaPreview(t = true) {
 
         padContentArea.classList.add(`read-only-content`);
 
+        prev.scrollTop = prev.scrollHeight;
+
         textarea.classList.add(`hidden`);
     } else {
         // Toggle edit mode

static/js/ws.js

@@ -31,8 +31,14 @@ class PadSocket {
 
         // Check if a connection URL was mentioned
         if ( connUrl == null ) {
+
+            let connProtocol = `ws://`;
+            if ( window.location.protocol == `https:` ) {
+                connProtocol = `wss://`;
+            }
+
             // Try and connect to the local websocket
-            connUrl = `ws://` + window.location.host + `/ws/get/${padName}`;
+            connUrl = connProtocol + window.location.host + `/ws/get/${padName}`;
         }
 
         // Connect to the websocket
@@ -45,9 +51,13 @@ class PadSocket {
             updateStatus(`Established`, `text-success`);
         }
 
+        function onFail() {
+            updateStatus(`Connection Failed`, `text-dangerous`);
+        }
+
         // Try and reconnect on failure
-        ws.onclose = connectSocket;
-        ws.onerror = connectSocket;
+        ws.onclose = onFail;
+        ws.onerror = onFail;
         
         // Assign the websocket
         this.ws = ws;
@@ -176,10 +186,34 @@ class PadSocket {
  */
 function updatePadContent(newContent, textArea = true) {
     // Update the textarea
-    if ( textArea ) document.getElementById(`pad-content`).value = newContent;
+    if ( textArea ) {
+        document.getElementById(`pad-content`).value = newContent;
+    }
+    
     // Update the preview
-    document.getElementById(`textarea-preview`).innerHTML = newContent;
-    // TODO: Re-run the syntax highlight
+    const prev = document.getElementById(`textarea-preview`);
+    const shouldScroll = prev.scrollTop >= (prev.scrollHeight - Number(getComputedStyle(prev).height.replace(/px/g, ''))) * 0.98;
+
+    prev.innerHTML = escapeHtml(newContent);
+
+    prev.classList.remove(`language-undefined`);
+
+    prev.classList.forEach( c => {
+        if ( c.indexOf(`language-`) != -1 ) {
+            prev.classList.remove(c);
+        }
+    })
+
+    try { // highlights
+        hljs.highlightElement(document.getElementById(`textarea-preview`));
+    } catch ( err ) {
+        console.err(err);
+    }
+
+    // Check if we should follow the bottom scrolling
+    if (shouldScroll) {
+        prev.scrollTop = prev.scrollHeight;
+    }
 
 }
 
@@ -211,4 +245,17 @@ function connectSocket() {
 // wait for the whole window to load
 window.addEventListener(`load`, e => {
     connectSocket()
-})
+})
+
+
+// lol
+function escapeHtml(html){
+    const text = document.createTextNode(html);
+    const p = document.createElement('p');
+
+    p.appendChild(text);
+    const content = p.innerHTML;
+    p.remove();
+
+    return content;
+  }

templates/pages/page.html

@@ -35,7 +35,9 @@
 
         </div>
 
-        <h2 class="mb-4">{{.title}}</h2>
+        <h2 class="mb-4" id="padTitle">
+            {{.title}}
+        </h2>
 
         <div id="pad-content-area">
             <div class="btn-sm btn" id="pad-content-toggler" onclick="toggleTextareaPreview()">