From b7545f62d85f0f9826486e6435d3b49fd7784456 Mon Sep 17 00:00:00 2001
From: Killy
Date: Thu, 26 Oct 2017 22:41:25 +0300
Subject: www: comment form refactoring
---
juick-www/src/main/static/scripts.js | 172 +++++++++------------
.../src/main/webapp/WEB-INF/views/macros/tree.html | 2 +-
.../webapp/WEB-INF/views/partial/thread_list.html | 2 +-
.../src/main/webapp/WEB-INF/views/thread.html | 2 +-
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 = `
+ `;
+ 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', '');
- 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', '');
@@ -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 %}
·
-
+
{% elseif visitor.uid == 0 %}
· {{ i18n("messages","reply.reply") }}
{% 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 %}
·
-
+
{% elseif visitor.uid == 0 %}
· {{ i18n("messages","reply.reply") }}
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 %}
{% if msg.VisitorCanComment %}
-