Merge pull request #46 from nathancyam/markdown_preview

Adds a client-side markdown preview for upload.html and edit.html

nyaa/static/css/main.css

@@ -87,6 +87,11 @@ table.torrent-list thead th.sorting_desc:after {
 .panel-deleted > .panel-footer + .panel-collapse > .panel-body {
 	border-bottom-color:#757575;
 }
+
+.markdown-editor label {
+	padding: 1em 0;
+}
+
 @media (max-width: 991px){
 	.col-md-5 {
 	    margin-left: 20px;

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

@@ -24,6 +24,40 @@
 	</div>
 {% endmacro %}
 
+
+{% macro render_markdown_editor(field, field_name='') %}
+{% if field.errors %}
+    <div class="form-group has-error">
+{% else %}
+    <div class="form-group">
+{% endif %}
+    <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">
+                <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 class="well" id="{{ field_name }}-markdown-target"></div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endmacro %}
+
+
 {% macro render_upload(field) %}
 {% if field.errors %}
 	<div class="form-group has-error">

nyaa/templates/edit.html

@@ -2,6 +2,7 @@
 {% block title %}Edit {{ torrent.display_name }} :: {{ config.SITE_NAME }}{% endblock %}
 {% block body %}
 {% from "_formhelpers.html" import render_field %}
+{% from "_formhelpers.html" import render_markdown_editor %}
 
 <h1>Edit Torrent</h1>
 
@@ -28,7 +29,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>
 

nyaa/templates/upload.html

@@ -3,6 +3,7 @@
 {% block body %}
 {% from "_formhelpers.html" import render_field %}
 {% from "_formhelpers.html" import render_upload %}
+{% from "_formhelpers.html" import render_markdown_editor %}
 
 <h1>Upload Torrent</h1>
 
@@ -39,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>