From d3ad2503aeaa71dce507293dadc4b70a7ff2899e Mon Sep 17 00:00:00 2001 From: Nathan Yam Date: Sun, 14 May 2017 14:55:40 +1000 Subject: [PATCH 1/4] Add markdown editor macro --- nyaa/templates/_formhelpers.html | 24 ++++++++++++++++++++++++ nyaa/templates/upload.html | 1 + 2 files changed, 25 insertions(+) diff --git a/nyaa/templates/_formhelpers.html b/nyaa/templates/_formhelpers.html index a0e00ea..5e29a43 100644 --- a/nyaa/templates/_formhelpers.html +++ b/nyaa/templates/_formhelpers.html @@ -24,6 +24,30 @@ {% endmacro %} + +{% macro render_markdown_editor(field, field_name='') %} +{% if field.errors %} +
+{% else %} +
+{% endif %} +
+ +
+
+ {{ render_field(field, class_='form-control markdown-source') }} +
+
+
+
+
+
+{% endmacro %} + + {% macro render_upload(field) %} {% if field.errors %}
diff --git a/nyaa/templates/upload.html b/nyaa/templates/upload.html index 25cbb78..feeb59d 100644 --- a/nyaa/templates/upload.html +++ b/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 %}

Upload Torrent

From fabe0f6fec362d7e32e9975cf76e9dc28bec4285 Mon Sep 17 00:00:00 2001 From: Nathan Yam Date: Sun, 14 May 2017 15:29:55 +1000 Subject: [PATCH 2/4] 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 | 20 ++++++++++++++++++++ nyaa/templates/_formhelpers.html | 16 +++++++++++++--- nyaa/templates/upload.html | 10 +++++----- 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/nyaa/static/js/main.js b/nyaa/static/js/main.js index 96c59f4..99c5355 100644 --- a/nyaa/static/js/main.js +++ b/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 // =========================================================== diff --git a/nyaa/templates/_formhelpers.html b/nyaa/templates/_formhelpers.html index 5e29a43..e7abd4c 100644 --- a/nyaa/templates/_formhelpers.html +++ b/nyaa/templates/_formhelpers.html @@ -31,20 +31,30 @@ {% else %}
{% endif %} -
+
{{ render_field(field, class_='form-control markdown-source') }}
+ {{ field.label(class='control-label') }}
+
{% endmacro %} diff --git a/nyaa/templates/upload.html b/nyaa/templates/upload.html index feeb59d..5119b25 100644 --- a/nyaa/templates/upload.html +++ b/nyaa/templates/upload.html @@ -38,11 +38,11 @@
-
-
- {{ render_field(form.description, class_='form-control') }} -
-
+
+
+ {{ render_markdown_editor(form.description, field_name='description') }} +
+
From de4891dfc6f5680dba4f610d5e0d6c553cef7afc Mon Sep 17 00:00:00 2001 From: Nathan Yam Date: Sun, 14 May 2017 16:14:18 +1000 Subject: [PATCH 3/4] Add well styling to preview content --- nyaa/static/css/main.css | 5 +++++ nyaa/templates/_formhelpers.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css index ee01f9b..83ca0ea 100644 --- a/nyaa/static/css/main.css +++ b/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; diff --git a/nyaa/templates/_formhelpers.html b/nyaa/templates/_formhelpers.html index e7abd4c..2ae1d4d 100644 --- a/nyaa/templates/_formhelpers.html +++ b/nyaa/templates/_formhelpers.html @@ -50,7 +50,7 @@
{{ field.label(class='control-label') }} -
+
From d45c9dca43303219c0c0dc438a5d47b03acdc295 Mon Sep 17 00:00:00 2001 From: Nathan Yam Date: Sun, 14 May 2017 16:21:20 +1000 Subject: [PATCH 4/4] Add markdown editor when editing own torrents --- nyaa/templates/edit.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/nyaa/templates/edit.html b/nyaa/templates/edit.html index 3d505ac..6ea01d4 100644 --- a/nyaa/templates/edit.html +++ b/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 %}

Edit Torrent

@@ -28,7 +29,7 @@
- {{ render_field(form.description, class_='form-control') }} + {{ render_markdown_editor(form.description, field_name='description') }}