diff options
| author | marvin-borner@live.com | 2018-04-14 12:17:22 +0200 |
|---|---|---|
| committer | marvin-borner@live.com | 2018-04-14 12:17:22 +0200 |
| commit | e3b1cabdd370b452a77c0a0248c69f0c292a9e72 (patch) | |
| tree | fff960d8e15e629def09932e1cabe591fc13b46b /assets/js | |
| parent | 2af483f225ca3c4f9baea3a0c2287fcda2524aa7 (diff) | |
Chat design improvements
Diffstat (limited to 'assets/js')
| -rw-r--r-- | assets/js/chat.js | 35 | ||||
| -rw-r--r-- | assets/js/language.js | 2 |
2 files changed, 31 insertions, 6 deletions
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];
}
}
|