diff options
| -rw-r--r-- | main/app/sprinkles/core/asset-bundles.json | 1 | ||||
| -rw-r--r-- | main/app/sprinkles/core/assets/SiteAssets/js/chat.js (renamed from main/app/sprinkles/core/templates/pages/partials/chat.js.twig) | 117 | ||||
| -rw-r--r-- | main/app/sprinkles/core/templates/pages/index.html.twig | 14 |
3 files changed, 60 insertions, 72 deletions
diff --git a/main/app/sprinkles/core/asset-bundles.json b/main/app/sprinkles/core/asset-bundles.json index 0d714e8..fd75027 100644 --- a/main/app/sprinkles/core/asset-bundles.json +++ b/main/app/sprinkles/core/asset-bundles.json @@ -51,6 +51,7 @@ "SiteAssets/js/encryption.js", "SiteAssets/js/swiper.js", "SiteAssets/js/console.image.js", + "SiteAssets/js/chat.js", "SiteAssets/js/main.js" ], "options": { diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js index d32ed5d..82cae93 100644 --- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig +++ b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js @@ -1,33 +1,3 @@ -{% autoescape 'js' %} - -/************ - GENERATE KEYS - ************ - if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('KeysGenerated') !== "true") { - // GENERATE -- LATER ON LOGIN! - var EncryptionPhrase = "PASSWORD 123"; // THE USERS PASSWORD -- needs to generate on login! - var RSABitLength = 1024; - var PrivateKeyString = cryptico.generateRSAKey(EncryptionPhrase, RSABitLength); - var PublicKeyString = cryptico.publicKeyString(PrivateKeyString); - // SAVE TO DATABASE - $.ajax({ - type: "POST", - url: "assets/php/SavePublicKey.php", - data: { - UserID: "1", // TEMPORARY - PublicKeyString: PublicKeyString - }, - async: true, - error: function () { - console.error("Error while saving public key to database!"); - }, - success: function () { - localStorage.setItem('KeysGenerated', "true"); - } - }); -} - - /****** GENERAL ******/ @@ -45,19 +15,29 @@ function InitializeChatServer() { }, 5000); }; ChatSocket.onopen = function () { + // CONNECTION SUCCESSFUL! console.log("[WEBSOCKET LOGGER] Chat connection established!"); - // GOT MESSAGE ChatSocket.onmessage = function (e) { + console.log("[WEBSOCKET LOGGER] Received a message from server!"); + // DECLARATIONS var TypingIndicatorMessage = $(".TypingIndicatorMessage").parent(); var LastMessage = $(".MessageWrapper.Normal:last .ChatMessage"); var MessageObject = JSON.parse(e.data); - if (MessageObject.ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER - if (MessageObject.WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF + var Message = MessageObject.Message; + var Username = MessageObject.Username; + var GroupName = MessageObject.GroupName; + var State = MessageObject.State; + var ServerMessage = MessageObject.ServerMessage; + var WasHimself = MessageObject.WasHimself; + var ServerMessageType = MessageObject.ServerMessageType; + + if (ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER + if (WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF if (!LastMessage.hasClass("MessageSent")) { // CHECK IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE - ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>"); + ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + Message + "</div></div>"); } else if (LastMessage.hasClass("MessageSent")) { // IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN - ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>"); + ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + Message + "</div></div>"); if (LastMessage.hasClass("AloneMessage")) { LastMessage.removeClass("AloneMessage"); LastMessage.addClass("TopMessage"); @@ -66,15 +46,11 @@ function InitializeChatServer() { LastMessage.addClass("MiddleMessage"); } } - // CONVERT LINKS TO LINKS - $('.MessageSent').linkify({ - target: "_blank" - }); - } else if (MessageObject.WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER + } else if (WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER if (!LastMessage.hasClass("MessageReceived")) { // CHECK IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE - ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>"); + ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + Message + "</div></div>"); } else if (LastMessage.hasClass("MessageReceived")) { // IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN - ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>"); + ChatMessages.append("<div class='MessageWrapper Normal'><div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + Message + "</div></div>"); if (LastMessage.hasClass("AloneMessage")) { LastMessage.removeClass("AloneMessage"); LastMessage.addClass("TopMessage"); @@ -83,38 +59,39 @@ function InitializeChatServer() { LastMessage.addClass("MiddleMessage"); } } - // CONVERT LINKS TO LINKS - $('.MessageReceived').linkify({ - target: "_blank" - }); } - } else if (MessageObject.ServerMessage === true) { // SERVER MESSAGE - if (MessageObject.ServerMessageType === "GroupJoin") { // TYPE: USER JOINED A GROUP - if (MessageObject.WasHimself === true) { // HIMSELF JOINED A GROUP -> NOTIFY - ChatMessages.empty(); - var Message = "{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + MessageObject.GroupName + '"'); - } else if (MessageObject.WasHimself === false) { // OTHER USER JOINED A GROUP -> NOTIFY - var Message = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username); + // CONVERT LINKS TO LINKS + $('.MessageReceived').linkify({ + target: "_blank" + }); + } else if (ServerMessage === true) { // SERVER MESSAGE + if (ServerMessageType === "GroupJoin") { // TYPE: USER JOINED A GROUP + if (WasHimself === true) { // HIMSELF JOINED A GROUP -> NOTIFY + ChatMessages.empty(); // -> EMPTY MESSAGES ON NEW GROUP JOIN + ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + GroupName + "</span></div></div><br>"); + ReplaceServerMessage("YouGroupJoin"); // FOR TRANSLATION + } else if (WasHimself === false) { // OTHER USER JOINED A GROUP -> NOTIFY + ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + Username + "</span></div></div><br>"); + ReplaceServerMessage("UserGroupJoin"); // FOR TRANSLATION } - ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + Message + "</span>.</div></div><br>"); - } else if (MessageObject.ServerMessageType === "UserDisconnect") { // TYPE: USER DISCONNECTED -> NOTIFY - var TranslatedDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username); - ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + TranslatedDisconnectMessage + ".</div></div><br>"); - } else if (MessageObject.ServerMessageType === "TypingState") { // SOMEBODY'S TYPING STATE CHANGED! - if (MessageObject.State === true) { // IF 'SOMEBODY' STARTED TYPING - if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?) + } else if (ServerMessageType === "UserDisconnect") { // TYPE: USER DISCONNECTED -> NOTIFY + ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + Username + "</span></div></div><br>"); + ReplaceServerMessage("UserDisconnect"); // FOR TRANSLATION + } else if (ServerMessageType === "TypingState") { // SOMEBODY'S TYPING STATE CHANGED! + if (State === true) { // IF 'SOMEBODY' STARTED TYPING + if (WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?) // NOTHING - } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE + } else if (WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage TypingIndicatorMessage AloneMessage'>" + TypingIndicatorAnimationElement + "</div></div>"); - console.log("[SERVER REPORT] " + MessageObject.Username + " STARTED TYPING"); + console.log("[SERVER REPORT] " + Username + " STARTED TYPING"); } - } else if (MessageObject.State === false) { // IF 'SOMEBODY' STOPPED TYPING - if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STOPS TYPING?) + } else if (State === false) { // IF 'SOMEBODY' STOPPED TYPING + if (WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STOPS TYPING?) // NOTHING - } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> REMOVE TYPING ANIMATION + } else if (WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> REMOVE TYPING ANIMATION //TypingIndicatorMessage.fadeOut("fast"); TypingIndicatorMessage.remove(); - console.log("[SERVER REPORT] " + MessageObject.Username + " STOPPED TYPING"); + console.log("[SERVER REPORT] " + Username + " STOPPED TYPING"); } } } @@ -138,7 +115,7 @@ function InitializeChatServer() { typingTimer = setTimeout(function () { sendStopTyping() }, 2500) - }) + }); function sendStartTyping() { if (isTyping === false) { @@ -160,7 +137,7 @@ function InitializeChatServer() { $(window).unload(function () { sendStopTyping(); // USER STOPS TYPING ON PAGE CLOSE ETC - }) + }); // SUBSCRIBE TO CHAT SubscribeTextInput.keyup(function (e) { @@ -191,6 +168,4 @@ function InitializeChatServer() { }; } -InitializeChatServer(); - -{% endautoescape %}
\ No newline at end of file +InitializeChatServer();
\ No newline at end of file diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig index 3ef8240..c395765 100644 --- a/main/app/sprinkles/core/templates/pages/index.html.twig +++ b/main/app/sprinkles/core/templates/pages/index.html.twig @@ -150,6 +150,18 @@ </div> </script> <script> - {% include "pages/partials/chat.js.twig" %} + function ReplaceServerMessage(Type) { // translation service + var LastServerMessage = $(".MessageWrapper:last .ServerChatMessage"); + if (Type === "YouGroupJoin") { + var GroupName = LastServerMessage.text(); + LastServerMessage.text("{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + GroupName + '"') + "."); + } else if (Type === "UserGroupJoin") { + var Username = LastServerMessage.text(); + LastServerMessage.text("{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", Username) + "."); + } else if (Type === "UserDisconnect") { + var Username = LastServerMessage.text(); + LastServerMessage.text("{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", Username) + "."); + } + } </script> {% endblock %} |