From 622c10d13f696b93dc63e48677a87fd5b2371421 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sat, 28 Apr 2018 18:19:14 +0200
Subject: Added animations and fixed several bugs

---
 .../core/templates/pages/abstract/base.html.twig   |  5 --
 .../templates/pages/abstract/mainsite.html.twig    |  7 ++-
 .../sprinkles/core/templates/pages/index.html.twig |  7 +++
 .../core/templates/pages/partials/chat.js.twig     | 59 +++++++++++++++-------
 4 files changed, 54 insertions(+), 24 deletions(-)

(limited to 'main/app/sprinkles/core/templates/pages')

diff --git a/main/app/sprinkles/core/templates/pages/abstract/base.html.twig b/main/app/sprinkles/core/templates/pages/abstract/base.html.twig
index 4d2b7cd..a54375a 100644
--- a/main/app/sprinkles/core/templates/pages/abstract/base.html.twig
+++ b/main/app/sprinkles/core/templates/pages/abstract/base.html.twig
@@ -80,11 +80,6 @@
         {% block scripts %}
             {# Override this block in a child layout template or page template to override site-level scripts. #}
             {% block scripts_site %}
-                <!-- Load jQuery -->
-                <script src="//code.jquery.com/jquery-2.2.4.min.js" ></script>
-                <!-- Fallback if CDN is unavailable -->
-                <script>window.jQuery || document.write('<script src="{{ assets.url('assets://vendor/jquery/dist/jquery.min.js', true) }}"><\/script>')</script>
-
                 {{ assets.js() | raw }}
             {% endblock %}
 
diff --git a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
index 6df674c..fc922bf 100644
--- a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
+++ b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
@@ -22,8 +22,8 @@
                 {# Override this block in a child layout template or page template to override site-level stylesheets. #}
                 {% block stylesheets_site %}
                     <!-- Include main CSS asset bundle -->
+                    {{ assets.css() | raw }}
                     {{ assets.css('css/main-site') | raw }}
-                    {{ assets.css('css/form-widgets') | raw }}
                 {% endblock %}
 
                 {# Override this block in a child layout template or page template to specify or override stylesheets for groups of similar pages. #}
@@ -104,9 +104,14 @@
             {% include "pages/partials/config.js.twig" %}
         </script>
 
+        {% block uf_alerts_template %}
+            {% include "pages/partials/alerts.html.twig" %}
+        {% endblock %}
+
         {% block scripts %}
             {# Override this block in a child layout template or page template to override site-level scripts. #}
             {% block scripts_site %}
+                {{ assets.js('js/main') | raw }}
                 {{ assets.js('js/main-site') | raw }}
             {% endblock %}
 
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index 3421476..3ef8240 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -42,6 +42,7 @@
                            title="{{ translate("EXPLORE_TAB.USER_SEARCH_PH") }}"
                            placeholder="{{ translate("EXPLORE_TAB.USER_SEARCH_PH") }}">
                     <br>
+                    <div id="alerts-page"></div>
                     <div class="SearchResults">
                     </div>
                     <div id="ExploreData">
@@ -142,6 +143,12 @@
 {% endblock %}
 
 {% block scripts_page %}
+    <script id="uf-alert-template" type="text/x-handlebars-template">
+        <div class="alert alert-{{type}} alert-dismissible uf-alert">
+            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+            <i class="icon fa fa-fw {{icon}} pull-left"></i> <div class="uf-alert-message-container">{{message}}</div>
+        </div>
+    </script>
     <script>
         {% include "pages/partials/chat.js.twig" %}
     </script>
diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
index da9d9f5..6c4c673 100644
--- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
+++ b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
@@ -38,7 +38,7 @@ function InitializeChatServer() {
 
     var ChatSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');
     ChatSocket.onerror = function () {
-        setTimeout(function(){
+        setTimeout(function () {
             console.log("Connection failed. Trying again...");
             InitializeChatServer();
         }, 5000);
@@ -49,10 +49,11 @@ function InitializeChatServer() {
             var LastMessage = $(".ChatMessage:last");
             var MessageObject = JSON.parse(e.data);
             if (MessageObject.ServerMessage === false) {
-                if (MessageObject.WasHimself === true) { //MessageObject.Username
+                if (MessageObject.WasHimself === true) { // SENT
                     if (!LastMessage.hasClass("MessageSent")) {
-                        ChatMessages.append("<div class='ChatMessage MessageSent AloneMessage'>" + MessageObject.Message + "</div><br><br>");
+                        ChatMessages.append("<div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div><br><br>");
                     } else if (LastMessage.hasClass("MessageSent")) {
+                        ChatMessages.append("<div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div><br><br>");
                         if (LastMessage.hasClass("AloneMessage")) {
                             LastMessage.removeClass("AloneMessage");
                             LastMessage.addClass("TopMessage");
@@ -60,15 +61,15 @@ function InitializeChatServer() {
                             LastMessage.removeClass("BottomMessage");
                             LastMessage.addClass("MiddleMessage");
                         }
-                        ChatMessages.append("<div class='ChatMessage MessageSent BottomMessage'>" + MessageObject.Message + "</div><br><br>");
                     }
                     $('.MessageSent').linkify({
                         target: "_blank"
                     });
-                } else if (MessageObject.WasHimself === false) {
+                } else if (MessageObject.WasHimself === false) { // RECEIVED
                     if (!LastMessage.hasClass("MessageReceived")) {
-                        ChatMessages.append("<div class='ChatMessage MessageReceived AloneMessage'>" + MessageObject.Message + "</div><br><br>");
+                        ChatMessages.append("<div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div><br><br>");
                     } else if (LastMessage.hasClass("MessageReceived")) {
+                        ChatMessages.append("<div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div><br><br>");
                         if (LastMessage.hasClass("AloneMessage")) {
                             LastMessage.removeClass("AloneMessage");
                             LastMessage.addClass("TopMessage");
@@ -76,7 +77,6 @@ function InitializeChatServer() {
                             LastMessage.removeClass("BottomMessage");
                             LastMessage.addClass("MiddleMessage");
                         }
-                        ChatMessages.append("<div class='ChatMessage MessageReceived BottomMessage'>" + MessageObject.Message + "</div><br><br>");
                     }
                     $('.MessageReceived').linkify({
                         target: "_blank"
@@ -85,30 +85,49 @@ function InitializeChatServer() {
             } else if (MessageObject.ServerMessage === true) {
                 if (MessageObject.ServerMessageType === "GroupJoin") {
                     if (MessageObject.WasHimself === false) {
-                        var TranslatedUserJoinMessage = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
-                        ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedUserJoinMessage + ".</div><br><br>");
+                        var Message = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
                     } else if (MessageObject.WasHimself === true) {
                         ChatMessages.empty();
-                        var TranslatedYouJoinMessage = "{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + MessageObject.GroupName + '"');
-                        ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedYouJoinMessage + "</span>.</div><br><br>");
+                        var Message = "{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + MessageObject.GroupName + '"');
                     }
+                    ChatMessages.append("<div class='ServerChatMessage'>" + Message + "</span>.</div><br><br>");
                 } else if (MessageObject.ServerMessageType === "UserDisconnect") {
                     var TranslatedDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
                     ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedDisconnectMessage + ".</div><br><br>");
                 }
             }
+            ChatMessages.animate({scrollTop: document.querySelector("#ChatMessages").scrollHeight}, "slow");
+            //window.scrollTo(0,document.querySelector("#ChatMessages").scrollHeight);
         };
 
-        ChatTextInput.keyup(function (e) {
-            if (e.keyCode === 13) {
-                sendMessage(ChatTextInput.val());
-                ChatTextInput.val("");
+        SubscribeTextInput.keyup(function (e) {
+            if (e.keyCode === 13 && SubscribeTextInput.val().length > 0) {
+                subscribe(SubscribeTextInput.val());
             }
         });
 
-        SubscribeTextInput.keyup(function (e) {
-            if (e.keyCode === 13) {
-                subscribe(SubscribeTextInput.val());
+        ChatTextInput.keyup(function (e) {
+            // USER TYPES
+            var IsTyping = true;
+            sendStartTyping();
+            var ChatTypeTimeout;
+            if (ChatTypeTimeout != undefined) clearTimeout(ChatTypeTimeout);
+            ChatTypeTimeout = setTimeout(sendStopTyping, 2500);
+
+            function sendStartTyping() {
+                if (IsTyping !== true) sendTypingState(true);
+                IsTyping = true;
+            }
+
+            function sendStopTyping() {
+                if (IsTyping !== false) sendTypingState(false);
+                IsTyping = false;
+            }
+
+            // USER PRESSED ENTER
+            if (e.keyCode === 13 && ChatTextInput.val().length > 0) {
+                sendMessage(ChatTextInput.val());
+                ChatTextInput.val("");
             }
         });
 
@@ -122,6 +141,10 @@ function InitializeChatServer() {
             ChatSocket.send(JSON.stringify({ClientMessageType: "Message", Message: msg}));
             ChatTextInput.val("");
         }
+
+        function sendTypingState(state) {
+            ChatSocket.send(JSON.stringify({ClientMessageType: "TypingState", Message: state}));
+        }
     };
 }
 
-- 
cgit v1.2.3