From e3b1cabdd370b452a77c0a0248c69f0c292a9e72 Mon Sep 17 00:00:00 2001
From: marvin-borner@live.com
Date: Sat, 14 Apr 2018 12:17:22 +0200
Subject: Chat design improvements

---
 assets/js/chat.js     | 35 ++++++++++++++++++++++++++++++-----
 assets/js/language.js |  2 +-
 2 files changed, 31 insertions(+), 6 deletions(-)

(limited to 'assets/js')

diff --git a/assets/js/chat.js b/assets/js/chat.js
index bf13a32..a037115 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -35,27 +35,52 @@ var SubscribeTextInput = $("#SubscribeTextInput");
 var ChatMessages = $("#ChatMessages");
 
 var WebSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');
+
 WebSocket.onopen = function () {
     console.log("Chat connection established!");
 };
+
 WebSocket.onmessage = function (e) {
+    var LastMessage = $(".ChatMessage:last");
     var MessageObject = JSON.parse(e.data);
     if (MessageObject.ServerMessage === false) {
         if (MessageObject.WasHimself === true) { //MessageObject.Username
-            ChatMessages.append("<div class='ChatMessage MessageSent'>" + MessageObject.Message + "</div><br><br>");
+            if (!LastMessage.hasClass("MessageSent")) {
+                ChatMessages.append("<div class='ChatMessage MessageSent AloneMessage'>" + MessageObject.Message + "</div><br><br>");
+            } else if (LastMessage.hasClass("MessageSent")) {
+                if (LastMessage.hasClass("AloneMessage")) {
+                    LastMessage.removeClass("AloneMessage");
+                    LastMessage.addClass("TopMessage");
+                } else if (LastMessage.hasClass("BottomMessage")) {
+                    LastMessage.removeClass("BottomMessage");
+                    LastMessage.addClass("MiddleMessage");
+                }
+                ChatMessages.append("<div class='ChatMessage MessageSent BottomMessage'>" + MessageObject.Message + "</div><br><br>");
+            }
         } else if (MessageObject.WasHimself === false) {
-            ChatMessages.append("<div class='ChatMessage MessageReceived'>" + MessageObject.Message + "</div><br><br>");
+            if (!LastMessage.hasClass("MessageReceived")) {
+                ChatMessages.append("<div class='ChatMessage MessageReceived AloneMessage'>" + MessageObject.Message + "</div><br><br>");
+            } else if (LastMessage.hasClass("MessageReceived")) {
+                if (LastMessage.hasClass("AloneMessage")) {
+                    LastMessage.removeClass("AloneMessage");
+                    LastMessage.addClass("TopMessage");
+                } else if (LastMessage.hasClass("BottomMessage")) {
+                    LastMessage.removeClass("BottomMessage");
+                    LastMessage.addClass("MiddleMessage");
+                }
+                ChatMessages.append("<div class='ChatMessage MessageReceived BottomMessage'>" + MessageObject.Message + "</div><br><br>");
+            }
         }
     } else if (MessageObject.ServerMessage === true) {
         if (MessageObject.ServerMessageType === "GroupJoin") {
             if (MessageObject.WasHimself === false) {
-                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span class='ServerChatMessage' data-lang='joined the group'></span>.</div><br>");
+                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='joined the group'></span>.</div><br><br>");
             } else if (MessageObject.WasHimself === true) {
                 ChatMessages.empty();
-                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br>");
+                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br><br>");
             }
         } else if (MessageObject.ServerMessageType === "UserDisconnect") {
-            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br>");
+            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br><br>");
         }
     }
     initiateLanguage(); // need further work (performance)
diff --git a/assets/js/language.js b/assets/js/language.js
index 9448ae3..abe6a65 100644
--- a/assets/js/language.js
+++ b/assets/js/language.js
@@ -20,7 +20,7 @@ function Translate() {
                         var key = elem.getAttribute(_self.attribute);
 
                         if (key != null) {
-                            console.log("Language initialized with language pack: " + _self.lng);
+                            //console.log("Language initialized with language pack: " + _self.lng);
                             elem.innerHTML = LngObject[_self.lng][key];
                         }
                     }
-- 
cgit v1.2.3