Skip to content

Commit

Permalink
Merge ea539e4 into dc29a6c
Browse files Browse the repository at this point in the history
  • Loading branch information
@Radi85
Radi85 committed May 23, 2021
2 parents dc29a6c + ea539e4 commit 8d26ac6
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 34 deletions.
107 changes: 78 additions & 29 deletions comment/static/js/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
let flagModal = document.getElementById('flagModal');
let followModal = document.getElementById('followModal');
let blockModal = document.getElementById('blockModal');
let createAnonymousCommentModal = document.getElementById('createAnonymousCommentModal');
let headers = {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRFToken': csrfToken,
Expand Down Expand Up @@ -41,6 +42,14 @@ document.addEventListener('DOMContentLoaded', () => {
modalElement.style.display = 'none';
};

let hideCreateAnonymousCommentModal = () => {
let form = createAnonymousCommentModal.querySelector('.modal-body').querySelector('form');
if (form) {
createAnonymousCommentModal.querySelector('.modal-body').removeChild(form);
}
hideModal(createAnonymousCommentModal);
};

// show and hide child comments
let replyLink = replyLinkElement => {
getNthParent(replyLinkElement, 4).nextElementSibling.classList.toggle('d-none');
Expand Down Expand Up @@ -111,6 +120,47 @@ document.addEventListener('DOMContentLoaded', () => {
}).join('&');
};

let loadAnonymousModalForm = _form => {
let form = _form.cloneNode(true);
let textareaElement = form.querySelector('textarea');
textareaElement.hidden = true;
form.querySelector('button').setAttribute('data-email-required', 'false');
let emailElementData = `
<div class="row">
<div class="col-2">
<label for="email">Email:</label>
</div>
<div class="col-10">
<input id="email" class="form-control mr-2 w-100" type="email" name="email" required>
<div class="error text-danger small mt-1"></div>
</div>
</div>`;
let emailElement = stringToDom(emailElementData, '.row');
let inputPlaceholder = form.querySelector('#inputPlaceholder');
inputPlaceholder.classList.remove('col-sm-9');
inputPlaceholder.classList.remove('col-md-10');
inputPlaceholder.classList.add('col-sm-8');
inputPlaceholder.appendChild(emailElement);
let buttonPlaceholder = form.querySelector('#buttonPlaceholder');
buttonPlaceholder.classList.remove('col-sm-3');
buttonPlaceholder.classList.remove('col-md-2');
buttonPlaceholder.classList.add('col-sm-4');
createAnonymousCommentModal.querySelector('.modal-body').appendChild(form);
showModal(createAnonymousCommentModal);
};

let resetCreateForms = () => {
let buttons = document.getElementsByClassName('js-comment-btn');
Array.prototype.forEach.call(buttons, element => {
element.setAttribute('disabled', 'disabled');
});
let inputs = document.getElementsByClassName("js-comment-input");
Array.prototype.forEach.call(inputs, element => {
element.setAttribute("style", "height: 31px;");
element.value = '';
});
};

// create new comment
let submitCommentCreateForm = form => {
let errorElement = form.querySelector('.error');
Expand All @@ -122,39 +172,42 @@ document.addEventListener('DOMContentLoaded', () => {
formData.page = urlParams.get('page');
// this step is needed to append the form data to request.POST
let formDataQuery = convertFormDataToURLQuery(formData);
let emailRequired = formButton.getAttribute('data-email-required') === 'true';
if (emailRequired) {
loadAnonymousModalForm(form);
return;
}
fetch(url, {
method: 'POST',
headers: headers,
body: formDataQuery
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
else if (result.error) {
// alert(result.error);
} else if (result.error) {
form.querySelector('.error').innerHTML = result.error;
form.querySelector('.error').classList.remove('d-none');
return;
}
// reset form
resetCreateForms();
if (result.anonymous) {
createInfoElement(document.querySelector('.js-comment'), 'success', result.msg, 3);
form.reset();
hideModal(createAnonymousCommentModal);
createAnonymousCommentModal.querySelector('.modal-body').removeChild(form);
return;
}

// parent comment
if (formButton.getAttribute('value') === 'parent') {
// reload all comments only when posting parent comment
if (result.anonymous) {
createInfoElement(form.closest('.js-comment'), 'success', result.msg, 3);
form.reset();
return;
}
document.getElementById("comments").outerHTML = result.data;
} else {
// child comment
if (result.anonymous) {
createInfoElement(form.closest('.js-parent-comment'), 'success', result.msg, 3);
form.reset();
return;
}
let childComment = stringToDom(result.data, '.js-child-comment');
form.parentNode.insertBefore(childComment, form);
// update number of replies
Expand All @@ -175,12 +228,6 @@ document.addEventListener('DOMContentLoaded', () => {
followButton.querySelector('span').setAttribute('title', 'Unfollow this thread');
}
}
formButton.setAttribute('disabled', 'disabled');
let elements = document.getElementsByClassName("js-comment-input");
Array.prototype.forEach.call(elements, element => {
element.setAttribute("style", "height: 31px;");
element.value = '';
});
// remove pagination query when posting a new comment
let uri = window.location.toString();
if (uri.indexOf("?") > 0) {
Expand All @@ -200,7 +247,7 @@ document.addEventListener('DOMContentLoaded', () => {
fetch(url, {headers: headers}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -235,7 +282,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -283,7 +330,7 @@ document.addEventListener('DOMContentLoaded', () => {
fetch(url, {headers: headers}).then(response => {
return response.json()
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -314,7 +361,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -390,7 +437,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -423,7 +470,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -487,7 +534,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -596,7 +643,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -684,7 +731,7 @@ document.addEventListener('DOMContentLoaded', () => {
}).then(response => {
return response.json();
}).then(result => {
if (result.status === 403){
if (result.status === 403) {
alert(result.reason);
return;
}
Expand Down Expand Up @@ -734,11 +781,13 @@ document.addEventListener('DOMContentLoaded', () => {
removeTargetElement();
if (event.target && event.target !== event.currentTarget) {
if (event.target === deleteModal || event.target === flagModal || event.target === followModal || event.target === blockModal ||
event.target === createAnonymousCommentModal ||
event.target.closest('.modal-close-btn') || event.target.closest('.modal-cancel-btn')) {
hideModal(deleteModal);
hideModal(flagModal);
hideModal(followModal);
hideModal(blockModal);
hideCreateAnonymousCommentModal();
} else if (event.target.closest('.js-reply-link')) {
event.preventDefault();
replyLink(event.target);
Expand Down
3 changes: 3 additions & 0 deletions comment/templates/comment/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,6 @@
{% if is_blocking_allowed %}
{% include 'comment/block/block_modal.html' %}
{% endif %}
{% if user.is_anonymous and is_anonymous_allowed %}
{% include 'comment/comments/anonymous_create_modal.html' %}
{% endif %}
17 changes: 17 additions & 0 deletions comment/templates/comment/comments/anonymous_create_modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% load i18n %}
{% load comment_tags %}
<div id="createAnonymousCommentModal" class="comment-modal">
<div class="comment-modal-dialog" role="document">
<div class="comment-modal-content">
<div class="modal-header">
<h5 class="modal-title">{% block title %}
{% trans "Please insert your email to post a comment" %}{% endblock title %}</h5>
<button class="modal-close-btn" aria-label="{% trans "Close" %}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
2 changes: 0 additions & 2 deletions comment/templates/comment/comments/comment_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
{% for field in comment_form.visible_fields %}
{% if field.field.label == 'Content' %}
{% render_field field placeholder=placeholder class='js-comment-input form-control form-control-sm rounded-0' %}
{% else %}
{% render_field field class='js-comment-input form-control form-control-sm rounded-0' %}
{% endif %}
{% endfor %}
<p class="error small text-danger mt-2 d-none"></p>
6 changes: 3 additions & 3 deletions comment/templates/comment/comments/create_comment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<form class="js-comment-form" method="post" data-url="{% url 'comment:create' %}">
{% csrf_token %}
<div class="row">
<div class="{% block text_area_wrapper_cls %}col-sm-9 col-md-10 px-2 m-2 m-sm-0{% endblock text_area_wrapper_cls %}">
<div id="inputPlaceholder" class="{% block text_area_wrapper_cls %}col-sm-9 col-md-10 px-2 m-2 m-sm-0{% endblock text_area_wrapper_cls %}">
{% include 'comment/comments/comment_form.html' with placeholder=placeholder %}
</div>
<input name="model_name" value="{% get_model_name model_object %}" hidden>
Expand All @@ -14,9 +14,9 @@
{% if comment %}
<input name="parent_id" value="{{ comment.id }}" type="hidden"/>
{% endif %}
<div class="{% block submit_button_wrapper_cls %}col-sm-3 col-md-2 px-2 m-3 m-sm-0{% endblock submit_button_wrapper_cls %}">
<div id="buttonPlaceholder" class="{% block submit_button_wrapper_cls %}col-sm-3 col-md-2 px-2 m-3 m-sm-0{% endblock submit_button_wrapper_cls %}">
<button disabled class="js-comment-btn {% block submit_button_cls %}btn btn-outline-success btn-block btn-sm{% endblock submit_button_cls %}"
type="submit" name="form_type" value="{% if comment %}child{% else %}parent{% endif %}">
type="submit" name="form_type" value="{% if comment %}child{% else %}parent{% endif %}" data-email-required="{% if user.is_anonymous and is_anonymous_allowed %}true{% endif %}">
{% if comment %}{% trans "Reply" %}{% else %}{% trans "Comment" %}{% endif %}
</button>
</div>
Expand Down

0 comments on commit 8d26ac6

Please sign in to comment.