Home Explore Help
Sign In
vornam
/
chat
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

Kleinere Design- und Layout-Fixes, Code Cleaning
Alexander Vornam 3 years ago
parent
ff315af0c4
commit
f194299c0c
4 changed files with 46 additions and 9 deletions
Split View Show Diff Stats
  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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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);