Issue #10 Add markdown preview editor

These changes add a macro that creates the relevant HTML markup for a
markdown editor. In the main.js file, we bind the relevant elements with
the marked library, so users can see their contents in a HTML format.

nyaa/static/js/main.js

@@ -77,6 +77,26 @@ document.addEventListener("DOMContentLoaded", function(event) {
 	};
 });
 
+// Initialise markdown editors on page
+document.addEventListener("DOMContentLoaded", function() {
+  var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
+
+  markdownEditors.forEach(function (markdownEditor) {
+    var fieldName = markdownEditor.getAttribute('data-field-name');
+
+    var previewTabSelector = '#' + fieldName + '-preview-tab';
+    var targetSelector = '#' + fieldName + '-markdown-target';
+    var sourceSelector = markdownEditor.querySelector('.markdown-source');
+
+    var previewTabEl = markdownEditor.querySelector(previewTabSelector);
+    var targetEl = markdownEditor.querySelector(targetSelector);
+
+    previewTabEl.addEventListener('click', function () {
+      targetEl.innerHTML = marked(sourceSelector.value.trim());
+    });
+  });
+});
+
 // 
 // This is the unminified version of the theme changer script in the layout.html @ line: 21
 // ===========================================================

nyaa/templates/_formhelpers.html

@@ -31,20 +31,30 @@
 {% else %}
     <div class="form-group">
 {% endif %}
-    <div class="markdown-editor" id="{{ field_name }}-markdown-editor">
+    <div class="markdown-editor" id="{{ field_name }}-markdown-editor" data-field-name="{{ field_name }}">
         <ul class="nav nav-tabs" role="tablist">
-            <li role="presentation" class="active"><a href="#{{ field_name }}-tab" aria-controls="" role="tab" data-toggle="tab">Write</a></li>
+            <li role="presentation" class="active">
-            <li role="presentation"><a href="#{{ field_name }}-preview" id="{{ field_name }}-preview-tab" aria-controls="preview" role="tab" data-toggle="tab">Preview</a></li>
+                <a href="#{{ field_name }}-tab" aria-controls="" role="tab" data-toggle="tab">
+                    Write
+                </a>
+            </li>
+            <li role="presentation">
+                <a href="#{{ field_name }}-preview" id="{{ field_name }}-preview-tab" aria-controls="preview" role="tab" data-toggle="tab">
+                    Preview
+                </a>
+            </li>
         </ul>
         <div class="tab-content">
             <div role="tabpanel" class="tab-pane active" id="{{ field_name }}-tab" data-markdown-target="#{{ field_name }}-markdown-target">
                 {{ render_field(field, class_='form-control markdown-source') }}
             </div>
             <div role="tabpanel" class="tab-pane" id="{{ field_name }}-preview">
+                {{ field.label(class='control-label') }}
                 <div id="{{ field_name }}-markdown-target"></div>
             </div>
         </div>
     </div>
+</div>
 {% endmacro %}
 
 

nyaa/templates/upload.html

@@ -40,7 +40,7 @@
 
     <div class="row">
         <div class="form-group col-md-6">
-			{{ render_field(form.description, class_='form-control') }}
+            {{ render_markdown_editor(form.description, field_name='description') }}
         </div>
     </div>