Browse Source

Change comment reply to use template element

merge-requests/68/head
wirelyre 6 years ago
committed by Deimos
parent
commit
f6ae3b6a98
  1. 54
      tildes/static/js/behaviors/comment-reply-button.js
  2. 2
      tildes/tildes/templates/base.jinja2
  3. 19
      tildes/tildes/templates/topic.jinja2

54
tildes/static/js/behaviors/comment-reply-button.js

@ -30,56 +30,22 @@ $.onmount('[data-js-comment-reply-button]', function() {
return;
}
var replyForm = document.createElement('form');
replyForm.setAttribute('method', 'post');
replyForm.setAttribute('autocomplete', 'off');
replyForm.setAttribute('data-ic-post-to', postURL);
replyForm.setAttribute('data-ic-replace-target', 'true');
replyForm.setAttribute('data-js-confirm-cancel', 'Discard your reply?');
replyForm.setAttribute('data-js-prevent-double-submit', '');
replyForm.setAttribute('data-js-confirm-leave-page-unsaved', '');
// clone and populate the 'comment-reply' template
var template = document.getElementById('comment-reply');
var clone = document.importNode(template.content, true);
var label = document.createElement('label');
label.setAttribute('class', 'form-label');
label.setAttribute('for', markdownID);
label.innerHTML = '<span>Replying to ' + parentCommentAuthor + '</span>' +
'<a href="https://docs.tildes.net/text-formatting" target="_blank">' +
'Formatting help</a>';
var textarea = document.createElement('textarea');
textarea.setAttribute('id', markdownID);
textarea.setAttribute('name', 'markdown');
textarea.setAttribute('class', 'form-input');
textarea.setAttribute('placeholder', 'Comment text (Markdown)');
textarea.setAttribute('data-js-ctrl-enter-submit-form', '');
textarea.setAttribute('data-js-auto-focus', '');
var buttonDiv = document.createElement('div');
buttonDiv.setAttribute('class', 'form-buttons');
var postButton = document.createElement('button');
postButton.setAttribute('type', 'submit');
postButton.setAttribute('class', 'btn btn-primary');
postButton.innerHTML = 'Post comment';
buttonDiv.appendChild(postButton);
var cancelButton = document.createElement('button');
cancelButton.setAttribute('type', 'button');
cancelButton.setAttribute('class', 'btn btn-link');
cancelButton.setAttribute('data-js-cancel-button', '');
cancelButton.innerHTML = 'Cancel';
clone.querySelector('form').setAttribute('data-ic-post-to', postURL);
clone.querySelector('label').setAttribute('for', markdownID);
clone.querySelector('span').innerHTML = 'Replying to ' + parentCommentAuthor;
clone.querySelector('textarea').setAttribute('id', markdownID);
var cancelButton = clone.querySelector('[data-js-cancel-button]');
$(cancelButton).on('click', function (event) {
// re-enable click/hover events on the reply button
$(this).parents('.comment').first()
.find('.btn-post-action[name=reply]').first()
.css('pointer-events', 'auto');
});
buttonDiv.appendChild(cancelButton);
replyForm.appendChild(label);
replyForm.appendChild(textarea);
replyForm.appendChild(buttonDiv);
// If the user has text selected inside a comment when they click the reply
// button, start the comment form off with that text inside a blockquote
@ -103,9 +69,9 @@ $.onmount('[data-js-comment-reply-button]', function() {
}
// update Intercooler so it knows about this new form
Intercooler.processNodes(replyForm);
Intercooler.processNodes(clone);
$replies.prepend(replyForm);
$replies.prepend(clone);
$.onmount();
});
});

2
tildes/tildes/templates/base.jinja2

@ -46,6 +46,8 @@
<meta name="msapplication-TileColor" content="#002b36">
<title>{% block title_full %}{% block title %}{% endblock %} - Tildes{% endblock %}</title>
{% block templates %}{% endblock %}
</head>
{% block body_tag %}

19
tildes/tildes/templates/topic.jinja2

@ -11,6 +11,25 @@
{% block title %}{{ topic.title }} - ~{{ topic.group.path }}{% endblock %}
{% block templates %}
<template id="comment-reply">
<form
method="post"
autocomplete="off"
data-js-confirm-cancel="Discard your reply?"
data-js-prevent-double-submit
data-js-confirm-leave-page-unsaved
data-ic-replace-target="true"
>
{{ markdown_textarea(auto_focus=True) }}
<div class="form-buttons">
<button type="submit" class="btn btn-primary">Post comment</button>
<button type="button" class="btn btn-link" data-js-cancel-button>Cancel</button>
</div>
</form>
</template>
{% endblock %}
{% block header_context_link %}
<a class="site-header-context" href="/~{{ topic.group.path }}">~{{ topic.group.path }}</a>
{% endblock %}

Loading…
Cancel
Save