a3x/nyaa
1
0
Fork 0
mirror of https://gitlab.com/SIGBUS/nyaa.git synced 2024-12-22 08:10:03 +00:00
Code Issues Projects Releases Wiki Activity

Issue #10 Add markdown preview editor

Browse source 
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.
This commit is contained in:
Nathan Yam 2017-05-14 15:29:55 +10:00
parent d3ad2503ae
commit fabe0f6fec
3 changed files with 38 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
nyaa/static/js/main.js
View file

@ -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 // This is the unminified version of the theme changer script in the layout.html @ line: 21
// =========================================================== // ===========================================================

16
nyaa/templates/_formhelpers.html
View file

@ -31,20 +31,30 @@
{% else %} {% else %}
<div class="form-group"> <div class="form-group">
{% endif %} {% 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"> <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> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="{{ field_name }}-tab" data-markdown-target="#{{ field_name }}-markdown-target"> <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') }} {{ render_field(field, class_='form-control markdown-source') }}
</div> </div>
<div role="tabpanel" class="tab-pane" id="{{ field_name }}-preview"> <div role="tabpanel" class="tab-pane" id="{{ field_name }}-preview">
{{ field.label(class='control-label') }}
<div id="{{ field_name }}-markdown-target"></div> <div id="{{ field_name }}-markdown-target"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
{% endmacro %} {% endmacro %}

10
nyaa/templates/upload.html
View file

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