From f6ae3b6a98a103685ce14823bd98903986f27246 Mon Sep 17 00:00:00 2001 From: wirelyre Date: Sun, 4 Nov 2018 18:45:09 -0600 Subject: [PATCH] Change comment reply to use template element --- .../js/behaviors/comment-reply-button.js | 54 ++++--------------- tildes/tildes/templates/base.jinja2 | 2 + tildes/tildes/templates/topic.jinja2 | 19 +++++++ 3 files changed, 31 insertions(+), 44 deletions(-) diff --git a/tildes/static/js/behaviors/comment-reply-button.js b/tildes/static/js/behaviors/comment-reply-button.js index becbc52..0fed2ca 100644 --- a/tildes/static/js/behaviors/comment-reply-button.js +++ b/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 = 'Replying to ' + parentCommentAuthor + '' + - '' + - 'Formatting help'; - - 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(); }); }); diff --git a/tildes/tildes/templates/base.jinja2 b/tildes/tildes/templates/base.jinja2 index 99d3ded..d531c7c 100644 --- a/tildes/tildes/templates/base.jinja2 +++ b/tildes/tildes/templates/base.jinja2 @@ -46,6 +46,8 @@ {% block title_full %}{% block title %}{% endblock %} - Tildes{% endblock %} + + {% block templates %}{% endblock %} {% block body_tag %} diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2 index c34a8a2..e3bf03e 100644 --- a/tildes/tildes/templates/topic.jinja2 +++ b/tildes/tildes/templates/topic.jinja2 @@ -11,6 +11,25 @@ {% block title %}{{ topic.title }} - ~{{ topic.group.path }}{% endblock %} +{% block templates %} + +{% endblock %} + {% block header_context_link %} ~{{ topic.group.path }} {% endblock %}