Change comment reply to use template element

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();
     });
 });

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 %}

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 %}