a3x
/
nyaa
mirror of https://gitlab.com/SIGBUS/nyaa.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move to markdown-it, render markdown in DOMContentLoaded 

No more separate <script>s for comments
Adds a link to a GFM cheatsheet on markdown form
Spaces to tabs on "markdownEditors" DOMContentLoaded
This commit is contained in:
TheAMM 2017-05-30 18:56:09 +03:00 committed by Alex Ingram
parent 051f3f38d2
commit 505b4e18bd
5 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
nyaa/forms.py
View File

@ -168,7 +168,7 @@ class EditForm(FlaskForm):
information = StringField('Information', [
Length(max=255, message='Information must be at most %(max)d characters long.')
])
description = TextAreaField('Description (markdown supported)', [
description = TextAreaField('Description', [
Length(max=10 * 1024, message='Description must be at most %(max)d characters long.')
])
@ -222,7 +222,7 @@ class UploadForm(FlaskForm):
information = StringField('Information', [
Length(max=255, message='Information must be at most %(max)d characters long.')
])
description = TextAreaField('Description (markdown supported)', [
description = TextAreaField('Description', [
Length(max=10 * 1024, message='Description must be at most %(max)d characters long.')
])

48
nyaa/static/js/main.js
View File

@ -145,28 +145,46 @@ document.addEventListener("DOMContentLoaded", function(event) {
}
});
var markdownOptions = {
html : false,
breaks : true,
typographer: true
}
var markdown = window.markdownit(markdownOptions);
markdown.renderer.rules.table_open = function (tokens, idx) {
// Format tables nicer (bootstrap). Force auto-width (default is 100%)
return '<table class="table table-striped table-bordered" style="width: auto;">';
}
// Initialise markdown editors on page
document.addEventListener("DOMContentLoaded", function() {
var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
markdownEditors.forEach(function (markdownEditor) {
var fieldName = markdownEditor.getAttribute('data-field-name');
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 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);
var previewTabEl = markdownEditor.querySelector(previewTabSelector);
var targetEl = markdownEditor.querySelector(targetSelector);
var reader = new commonmark.Parser({safe: true});
var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
previewTabEl.addEventListener('click', function () {
var rendered = markdown.render(sourceSelector.value.trim());
targetEl.innerHTML = rendered;
});
});
});
previewTabEl.addEventListener('click', function () {
var parsed = reader.parse(sourceSelector.value.trim());
targetEl.innerHTML = writer.render(parsed);
});
});
// Render markdown from elements with "markdown-text" attribute
document.addEventListener("DOMContentLoaded", function() {
var markdownTargets = document.querySelectorAll('[markdown-text]');
for (var target of markdownTargets) {
var rendered = markdown.render(target.innerHTML);
target.innerHTML = rendered;
}
});
//

1
nyaa/templates/_formhelpers.html
View File

@ -35,6 +35,7 @@
{% endif %}
<div class="markdown-editor" id="{{ field_name }}-markdown-editor" data-field-name="{{ field_name }}">
{{ field.label(class='control-label') }}
<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" class="small">Markdown supported</a>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#{{ field_name }}-tab" role="tab" data-toggle="tab">

2
nyaa/templates/layout.html
View File

@ -43,7 +43,7 @@
<!-- Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.27.0/commonmark.min.js" integrity="sha256-10JreQhQG80GtKuzsioj0K46DlaB/CK/EG+NuG0q97E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.3.1/markdown-it.min.js" integrity="sha256-3WZyZQOe+ql3pLo90lrkRtALrlniGdnf//gRpW0UQks=" crossorigin="anonymous"></script>
<!-- Modified to not apply border-radius to selectpickers and stuff so our navbar looks cool -->
<script src="{{ static_cachebuster('js/bootstrap-select.js') }}"></script>
<script src="{{ static_cachebuster('js/main.js') }}"></script>

30
nyaa/templates/view.html
View File

@ -81,13 +81,13 @@
</div>
<div class="panel panel-default">
<div class="panel-body" id="torrent-description">
{% if torrent.description %}
<div markdown-text class="panel-body" id="torrent-description">
{%- if torrent.description -%}
{# Escape newlines into html entities because CF strips blank newlines #}
{{ torrent.description | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) }}
{% else %}
{{- torrent.description | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) -}}
{%- else -%}
#### No description.
{% endif%}
{%- endif -%}
</div>
</div>
@ -161,19 +161,12 @@
</div>
<div class="row">
{# Escape newlines into html entities because CF strips blank newlines #}
<div class="comment-content" id="torrent-comment{{ comment.id }}">{{ comment.text }}</div>
<div markdown-text class="comment-content" id="torrent-comment{{ comment.id }}">{{ comment.text }}</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var target = document.getElementById('torrent-comment{{ comment.id }}');
var text = target.innerHTML;
var reader = new commonmark.Parser({safe: true});
var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
var parsed = reader.parse(text.trim());
target.innerHTML = writer.render(parsed);
</script>
{% endfor %}
{% if comment_form %}
<form class="comment-box" method="POST">
@ -207,13 +200,4 @@
</div>
</div>
<script>
var target = document.getElementById('torrent-description');
var text = target.innerHTML;
var reader = new commonmark.Parser({safe: true});
var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
var parsed = reader.parse(text.trim());
target.innerHTML = writer.render(parsed);
</script>
{% endblock %}