www: comment form refactoring

4 files changed, 72 insertions, 106 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 1fec803e..0660a34c 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -318,71 +318,52 @@ function showMoreReplies(el, id) {
     return false;
 }
 
-function replyForm(mid, rid) {
-    let form = document.createElement('form');
-    form.setAttribute('action', '/comment');
-    form.setAttribute('method', 'POST');
-    form.setAttribute('enctype', 'multipart/form-data');
-    let input = document.createElement('input');
-    input.setAttribute('type', 'hidden');
-    input.setAttribute('name', 'mid');
-    input.setAttribute('value', mid);
-    form.appendChild(input);
-    if (rid) {
-        let inputRid = document.createElement('input');
-        inputRid.setAttribute('type', 'hidden');
-        inputRid.setAttribute('name', 'rid');
-        inputRid.setAttribute('value', rid);
-        form.appendChild(inputRid);
-    }
-    return form;
-}
-
-function taWrapper() {
-    let txtarea = document.createElement('textarea');
-    txtarea.setAttribute('name', 'body');
-    txtarea.setAttribute('rows', 1);
-    txtarea.setAttribute('class', 'reply narrow');
-    txtarea.setAttribute('placeholder', i18n('comment.writeComment'));
-    let txtKeypress = function (e) {
-        postformListener(e.target, e);
-    };
-    txtarea.addEventListener('keypress', txtKeypress);
-    let wrapper = document.createElement('div');
-    wrapper.setAttribute('class', 'ta-wrapper');
-    wrapper.appendChild(txtarea);
-    let att = document.createElement('div');
-    att.setAttribute('class', 'attach-photo');
-    att.addEventListener('click', function () {
-        attachCommentPhoto(this);
-    });
-    wrapper.appendChild(att);
-    return wrapper;
-}
-
 function showCommentForm(mid, rid) {
     let reply = document.getElementById(rid);
-    if (reply && !reply.querySelector('textarea')) {
-        let c = reply.querySelector('div.msg-cont > .msg-comment');
-        let newNode = c.cloneNode(true);
-        let form = replyForm(mid, rid);
-        form.appendChild(newNode);
-        newNode.appendChild(taWrapper());
-        let subm = document.createElement('input');
-        subm.setAttribute('type', 'submit');
-        subm.setAttribute('value', 'OK');
-        newNode.appendChild(subm);
-        c.parentNode.insertBefore(form, c);
-        c.remove();
-    }
-
-    let commentBlock = reply.querySelector('div.msg-cont > form > div.msg-comment');
-    commentBlock.classList.remove('msg-comment-hidden');
-    let commentText = commentBlock.querySelector('textarea');
-    if (commentText) {
-        autosize(commentText);
-        commentText.focus();
+    let formTarget = reply.querySelector('div.msg-cont .msg-comment-target');
+    if (formTarget) {
+        let formHtml = `
+            <form action="/comment" method="POST" enctype="multipart/form-data">
+                <input type="hidden" name="mid" value="${mid}">
+                <input type="hidden" name="rid" value="${rid}">
+                <div class="msg-comment">
+                    <div class="ta-wrapper">
+                        <textarea name="body" rows="1" class="reply" placeholder="${i18n('comment.writeComment')}"></textarea>
+                        <div class="attach-photo"></div>
+                    </div>
+                    <input type="submit" value="OK">
+                </div>
+            </form>`;
+        formTarget.insertAdjacentHTML('afterend', formHtml);
+        formTarget.remove();
+
+        let form = reply.querySelector('form');
+        let submitButton = form.querySelector('input[type="submit"]');
+
+        let attachButton = form.querySelector('.msg-comment .attach-photo');
+        attachButton.addEventListener('click', e => attachCommentPhoto(e.target));
+
+        let textarea = form.querySelector('.msg-comment textarea');
+        textarea.addEventListener('keypress', e => postformListener(e.target, e));
+        autosize(textarea);
+
+        let validateMessage = () => {
+            let len = textarea.value.length;
+            if (len < 1) { return 'Empty message'; }
+            if (len > 4096) { return 'Message is too long'; }
+            return '';
+        };
+        form.addEventListener('submit', e => {
+            let validationResult = validateMessage();
+            if (validationResult) {
+                e.preventDefault();
+                alert(validationResult);
+                return false;
+            }
+            submitButton.disabled = true;
+        });
     }
+    reply.querySelector('.msg-comment textarea').focus();
 }
 
 function attachInput() {
@@ -638,25 +619,6 @@ ready(function () {
         autosize(ta);
     });
 
-    let insertButtons = function (e) {
-        let textarea = e.target;
-        let att = document.createElement('div');
-        att.classList.add('attach-photo');
-        att.addEventListener('click', function (e) {
-            attachCommentPhoto(e.target);
-        });
-        textarea.parentNode.insertBefore(att, textarea.nextSibling);
-        textarea.parentNode.insertAdjacentHTML('afterend', '<input type="submit" value="OK"/>');
-        textarea.removeEventListener('focus', insertButtons);
-        e.preventDefault();
-    };
-    document.querySelectorAll('textarea.reply').forEach(function (ta) {
-        ta.addEventListener('focus', insertButtons);
-        ta.addEventListener('keypress', function (e) {
-            postformListener(e.target, e);
-        });
-    });
-
     var insertPMButtons = function (e) {
         e.target.classList.add('narrowpm');
         e.target.parentNode.insertAdjacentHTML('afterend', '<input type="submit" value="OK"/>');
@@ -674,20 +636,33 @@ ready(function () {
     if (content) {
         var pageMID = content.getAttribute('data-mid');
         if (pageMID > 0) {
-            document.querySelectorAll('.msg-comments').forEach(function (e) {
-                e.addEventListener('click', function (e) {
-                    var rid = e.target.closest('li').id;
-                    showMoreReplies(e.target, rid);
-                    e.preventDefault();
-                });
-            });
-            document.querySelectorAll('.a-thread-comment').forEach(function (e) {
-                e.addEventListener('click', function (e) {
-                    var rid = e.target.closest('li').id;
-                    showCommentForm(pageMID, rid);
-                    e.preventDefault();
-                });
+            document.querySelectorAll('li.msg').forEach(li => {
+                let showMoreBtn = li.querySelector('.msg-comments');
+                if (showMoreBtn) {
+                    showMoreBtn.addEventListener('click', function (e) {
+                        showMoreReplies(e.target, li.id);
+                        e.preventDefault();
+                    });
+                }
+                let showReplyFormBtn = li.querySelector('.a-thread-comment');
+                if (showReplyFormBtn) {
+                    showReplyFormBtn.addEventListener('click', function (e) {
+                        showCommentForm(pageMID, li.id);
+                        e.preventDefault();
+                    });
+                }
             });
+            let opMessage = document.querySelector('.msgthread');
+            if (opMessage) {
+                let replyTextarea = opMessage.querySelector('textarea.reply');
+                if (replyTextarea) {
+                    replyTextarea.addEventListener('focus', e => showCommentForm(pageMID, 0));
+                    replyTextarea.addEventListener('keypress', e => postformListener(e.target, e));
+                    if (!window.location.hash) {
+                        replyTextarea.focus();
+                    }
+                }
+            }
         }
     }
 
@@ -701,10 +676,6 @@ ready(function () {
             e.preventDefault();
         });
     });
-    let threadTextarea = document.querySelector('.msgthread .ta-wrapper textarea');
-    if (threadTextarea && !window.location.hash) {
-        threadTextarea.focus();
-    }
     document.querySelectorAll('.l .a-privacy').forEach(function (e) {
         e.addEventListener('click', function (e) {
             setPrivacy(
@@ -775,11 +746,6 @@ ready(function () {
             e.preventDefault();
         });
     });
-    document.querySelectorAll('.attach-photo').forEach(function (el) {
-        el.addEventListener('click', function (e) {
-            attachCommentPhoto(e.target);
-        });
-    });
     var unfoldall = document.getElementById('unfoldall');
     if (unfoldall) {
         unfoldall.addEventListener('click', function (e) {
diff --git a/juick-www/src/main/webapp/WEB-INF/views/macros/tree.html b/juick-www/src/main/webapp/WEB-INF/views/macros/tree.html
index 380b3130..71ffd74b 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/macros/tree.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/macros/tree.html
@@ -38,7 +38,7 @@
 {% endif %}
 {% if msg.VisitorCanComment %}
             &middot; <a href="/post?body=%23{{ msg.mid }}/{{ msg.rid }}%20" class="a-thread-comment">{{ i18n("messages","reply.reply") }}</a></div>
-            <div class="msg-comment msg-comment-hidden"></div>
+            <div class="msg-comment-target msg-comment-hidden"></div>
 {% elseif visitor.uid == 0 %}
             &middot; <a href="#" class="a-login">{{ i18n("messages","reply.reply") }}</a></div>
 {% endif %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/thread_list.html b/juick-www/src/main/webapp/WEB-INF/views/partial/thread_list.html
index a6e4522e..f273dec7 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/thread_list.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/thread_list.html
@@ -37,7 +37,7 @@
             {% if msg.VisitorCanComment %}
             &middot; <a href="/post?body=%23{{ msg.mid }}/{{ msg.rid }}%20" class="a-thread-comment">{{ i18n("messages","reply.reply") }}</a>
         </div>
-        <div class="msg-comment msg-comment-hidden"></div>
+        <div class="msg-comment-target msg-comment-hidden"></div>
             {% elseif visitor.uid == 0 %}
             &middot; <a href="#" class="a-login">{{ i18n("messages","reply.reply") }}</a>
         </div>
diff --git a/juick-www/src/main/webapp/WEB-INF/views/thread.html b/juick-www/src/main/webapp/WEB-INF/views/thread.html
index 747d7959..8e30fafa 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/thread.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/thread.html
@@ -77,7 +77,7 @@
                 {% endif %}
             </nav>
             {% if msg.VisitorCanComment %}
-            <form action="/comment" method="POST" enctype="multipart/form-data">
+            <form action="/comment" method="POST" enctype="multipart/form-data" class="msg-comment-target">
                 <input type="hidden" name="mid" value="{{ msg.mid }}"/>
                 <div class="msg-comment">
                     <div class="ta-wrapper">