Merge pull request #610 from ejplatform/i589_send_comment_bug

[REVIEW] Página dando refresh ao enviar um comentário

lib/assets/js/comment-form-animation.js

@@ -8,6 +8,8 @@ function showForm(button) {
             commentform.className = "show";
             buttonicon.className = buttonicon.className.replace("plus", "times")
        }
+       $('#id_content').keyup(updateCharactersCount);
+       $('#id_content').keydown(updateCharactersCount);
   }
 
 
@@ -21,10 +23,7 @@ $(document).click(function(event) {
   }
 });
 
-$('#id_content').keyup(updateCount);
-$('#id_content').keydown(updateCount);
-
-function updateCount() {
+function updateCharactersCount() {
     var cs = $(this).val().length;
     $('#characters-count').text(cs + ' / 252');
 }

lib/scss/6_components/_conversations.scss

@@ -694,7 +694,7 @@ $profile-label-clear-color: #30BFD3 !default;
         z-index: 3;
         width: 100vw;
         left: 0;
-        bottom: $header-top-nav-height;
+        bottom: 0;//$header-top-nav-height;
         > div {
             padding: $spacing-padding;
             max-width: 660px;
@@ -737,8 +737,8 @@ $profile-label-clear-color: #30BFD3 !default;
 
     #toast.show {
         visibility: visible;
-        -webkit-animation: fade 8s;
-        animation: fade 8s;
+        // -webkit-animation: fade 8s;
+        animation: fade 8s both;
     }
 
 

src/ej/templates/jinja2/base.jinja2

@@ -56,6 +56,7 @@
             <script src="/static/js/utils.js"></script>
             <script src="/static/js/web-share.js"></script>
             <script src="/static/js/fontScale.js" defer></script>
+            <script src="/static/js/comment-form-animation.js" defer></script>
             <script src="/static/js/bundle.js" defer></script>
         {% endblock javascript %}
 

src/ej/templates/jinja2/components/generic/toast.jinja2

@@ -1,17 +1,18 @@
 {% macro toast(title, content) %}
     <div id="toast">
         <div>
-                <img style="float: left; " src="/static/img/icons/attention.svg" width="100"/>
-                <h3>{{title}}</h3>
-                <p>{{content}}</p>
-
+            <img style="float: left; " src="/static/img/icons/attention.svg" width="100"/>
+            <h3>{{title}}</h3>
+            <p>{{content}}</p>
         </div>
     </div>
-     <script>
+    <script>
         function showToaster() {
             var x = document.getElementById("toast");
-            x.className = "show";
-            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 8000);
+            if (x && x.querySelector('p').innerHTML) {
+                x.className = "show";
+                setTimeout(function(){ x.className = x.className.replace("show", ""); }, 8000);
+            }
         }
     </script>
 {% endmacro %}

src/ej_conversations/jinja2/ej/role/comment-form.jinja2

@@ -1,19 +1,19 @@
 {% from 'components/generic/toast.jinja2' import toast with context %}
 
 {% macro comment_form(csrf_input, comment_content) %}
-    <form method="post" up-restore-scroll="true">
+    <form method="post" up-target=".ConversationDetail" up-restore-scroll="true">
         {{ csrf_input }}
         <input type="hidden" name="action" value="comment">
-            {{comment_content.content}}
-            <span id="characters-count">0 / 252</span>
+        {{comment_content.content}}
+        <span id="characters-count">0 / 252</span>
         <input type="submit" name="submit" value="{{ _('Comment') }}" primary>
-        {% if comment_content.errors %}
-            {{toast("OPS!", comment_content.content.errors|striptags)}}
-            <script>
-                showToaster()
-            </script>
-        {% endif %}
+        {{toast("OPS!", comment_content.content.errors|striptags)}}
     </form>
+    <script>
+        document.body.addEventListener('DOMSubtreeModified', function () {
+            showToaster()
+        }, false);
+    </script>
 {% endmacro %}
 
 

src/ej_conversations/jinja2/ej_conversations/detail.jinja2

@@ -40,6 +40,4 @@
             <p>{{ _("{} waiting moderation.").format(comments_under_moderation)}}</p>
         </div>
     </div>
-    <script src="/static/js/comment-form-animation.js" defer></script>
-
 {% endblock %}