diff options
Diffstat (limited to 'juick-www')
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 %} · <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 %} · <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 %} · <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 %} · <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"> |