Browse Source

Unterstützung für HTML, Links und Bilder-URLs implementiert

Kleinere Design- und Layout-Fixes, Code Cleaning
Alexander Vornam 2 years ago
parent
commit
f194299c0c
4 changed files with 46 additions and 9 deletions
  1. 22 0
      index.js
  2. 21 6
      www/css/app.css
  3. 2 0
      www/index.html
  4. 1 3
      www/js/main.js

+ 22 - 0
index.js

@@ -139,6 +139,28 @@ io.on('connection', (socket) => {
 
         socket.on('message', (msg) => {
             if (msg) {
+                if (!user.admin) {
+                    const regex = /(&nbsp;|<([^>]+)>)/ig;
+                    msg = msg.replace(regex, "");
+                }
+
+                msg = msg.replace(/(?<!href=")(\b[\w]+:\/\/[\w-?&;#~=\.\/\@%]+[\w\/])/g, (url) => {
+                    if (url.toLowerCase().endsWith('.jpg')
+                        || url.toLowerCase().endsWith('.gif')
+                        || url.toLowerCase().endsWith('.png')) {
+                        return '<a href="' + url + '"><img src="' + url + '" alt="" /></a>';
+                    }
+
+                    var faviconUrl;
+                    try {
+                        faviconUrl = new URL(url).origin + '/favicon.ico';
+                    } catch (e) {
+                        log('Error getting favicon for "' + url + '"');
+                    }
+
+                    return '<a href="' + url + '"><img class="favicon" src="' + faviconUrl + '" alt="" />' + url + '</a>';
+                });
+
                 log(user.name + ':', msg, '(' + user.ip + ')');
                 if (history.length >= HISTORY_SIZE) {
                     history = history.slice(1);

+ 21 - 6
www/css/app.css

@@ -62,14 +62,12 @@
 }
 
 #chat-host .login #chat-login-form .inputWrapper label {
+    flex-grow: 1;
+    
     width: 10em;
     margin-right: 1em;
 }
 
-#chat-host .login #chat-login-form .inputWrapper input {
-    flex-grow: 1;
-}
-
 #chat-host .login #chat-login-form button {
     margin-top: 2em;
 }
@@ -80,14 +78,15 @@
     overflow: hidden;
 }
 
-#chat-host .messages, #chat-host .userlistWrapper {
+#chat-host s, #chat-host .userlistWrapper {
     padding: 0.3em;
     flex-grow: 1;
 }
 
 #chat-host .messages {
     flex-basis: 80%;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: scroll;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -132,6 +131,22 @@
 #chat-host .messages .userMsg .message {
     white-space: pre-wrap;
     width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#chat-host .messages .userMsg .message img {
+    max-width: 10em;
+    max-height: 10em;
+}
+
+#chat-host .messages .userMsg .message img.favicon {
+    max-width: 1.2em;
+    max-height: 1.2em;
+    position: relative;
+    top: 0.25em;
+    margin-right: 0.3em;
+    line-height: 2em;
 }
 
 #chat-host .userlistWrapper {

+ 2 - 0
www/index.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
+    <base target="_blank">
+
     <title>Chat</title>
 
     <meta charset="UTF-8">

+ 1 - 3
www/js/main.js

@@ -186,8 +186,6 @@ function appendMessage(element) {
 }
 
 function appendUserMessage(msg, msgUser, timestamp, user) {
-    console.log(msg, msgUser, timestamp);
-
     const messageWrapper = $('<li class="userMsg">');
     if(user.name ==  msgUser.name) {
         messageWrapper.addClass('self');
@@ -214,7 +212,7 @@ function appendUserMessage(msg, msgUser, timestamp, user) {
     messageWrapper.append(userEl);
 
     const messageEl = $('<span class="message">');
-    messageEl.text(msg)
+    messageEl.html(msg)
     messageWrapper.append(messageEl);
 
     appendMessage(messageWrapper);