Add support for markdown previews in backend forms

We had basic markdown preview support in /admin/, but not in the newer
and otherwise better backend editor.

diff --git a/postgresqleu/confreg/backendforms.py b/postgresqleu/confreg/backendforms.py
index dd6bea3e05169f8c50f862212ce5b7defcceda89..fc30d1754afde466769152ed6866941355118ebd 100644 (file)
--- a/postgresqleu/confreg/backendforms.py
+++ b/postgresqleu/confreg/backendforms.py
@@ -34,6 +34,7 @@ class _NewFormDataField(django.forms.Field):
 class BackendForm(ConcurrentProtectedModelForm):
        selectize_multiple_fields = None
        json_fields = None
+       markdown_fields = []
        vat_fields = {}
        verbose_field_names = {}
        exclude_date_validators = []
@@ -163,6 +164,7 @@ class BackendConferenceForm(BackendForm):
                                  'asktshirt', 'askfood', 'asknick', 'asktwitter', 'askshareemail', 'askphotoconsent',
                                  'skill_levels', 'additionalintro', 'callforpapersintro', 'sendwelcomemail', 'welcomemail',
                                  'invoice_autocancel_hours', 'attendees_before_waitlist']
+       markdown_fields = ['promotext', ]
        selectize_multiple_fields = {
                'testers': GeneralAccountLookup(),
                'talkvoters': GeneralAccountLookup(),
@@ -211,6 +213,7 @@ class BackendSuperConferenceForm(BackendForm):
 class BackendConferenceSeriesForm(BackendForm):
        helplink = "series"
        list_fields = ['name', 'sortkey', ]
+       markdown_fields = ['intro', ]
        class Meta:
                model = ConferenceSeries
                fields = ['name', 'sortkey', 'intro', ]
@@ -407,6 +410,7 @@ class BackendConferenceSessionForm(BackendForm):
        selectize_multiple_fields = {
                'speaker': SpeakerLookup(),
        }
+       markdown_fields = ['abstract', ]
        allow_copy_previous = True
        copy_transform_form = BackendTransformConferenceDateTimeForm
        auto_cascade_delete_to = ['conferencesession_speaker', 'conferencesessionvote']

diff --git a/postgresqleu/confsponsor/backendforms.py b/postgresqleu/confsponsor/backendforms.py
index e8892568bd58581b0646420d5179a83aec8234b4..9a3dddca22b71d22d1c4233133a8905c11d9aaa9 100644 (file)
--- a/postgresqleu/confsponsor/backendforms.py
+++ b/postgresqleu/confsponsor/backendforms.py
@@ -38,6 +38,7 @@ class BackendSponsorForm(BackendForm):
 class BackendSponsorshipLevelBenefitForm(BackendForm):
        helplink='sponsors#benefit'
        json_fields = ['class_parameters', ]
+       markdown_fields = ['benefitdescription', 'claimprompt', ]
        class Meta:
                model = SponsorshipBenefit
                fields = ['benefitname', 'benefitdescription', 'sortkey', 'benefit_class',

diff --git a/template/confreg/admin_backend_form.html b/template/confreg/admin_backend_form.html
index 8946b0785e39805bf2844f6aa9f6ac8537048d4e..870ac82474dfb0da87489ac9510c6ffd7cdaf0b0 100644 (file)
--- a/template/confreg/admin_backend_form.html
+++ b/template/confreg/admin_backend_form.html
@@ -5,8 +5,41 @@
 <script type="text/javascript" src="/media/ace/ace.js"></script>
 <link rel="stylesheet" href="/media/css/selectize.css" />
 <link rel="stylesheet" href="/media/css/selectize.default.css" />
+{%if form.markdown_fields%}
+<script type="text/javascript" src="/media/showdown/showdown.js"></script>
+{%endif%}
+
+<style>
+div.admin_markdownpreview {
+   border: 1px solid lightgrey;
+   padding: 3px;
+   margin-top: 5px;
+   overflow:scroll;
+   height: 250px;
+}
+</style>
 
 <script language="javascript">
+{%if form.markdown_fields%}
+mdconverter = new Showdown.converter();
+function backend_showdown_preview(id) {
+   var e = $('#' + id);
+
+   var w = $('<div class="admin_markdownpreview"><legend>Markdown preview</legend><div class="admin_markdownpreview_contents"></div></div>').insertAfter(e);
+   var p = w.find('div.admin_markdownpreview_contents');
+   console.log(p);
+
+   function update() {
+      p.html(mdconverter.makeHtml(e.val()));
+   }
+
+   update();
+   e.keyup(function() {
+      update();
+   });
+}
+{%endif%}
+
 $(function() {
 {%for f,lookup in form.selectize_multiple_fields.items%}
    $('#id_{{f}}').selectize({
@@ -30,6 +63,10 @@ $(function() {
    });
 {%endfor%}
 
+{%for f in form.markdown_fields%}
+   backend_showdown_preview('id_{{f}}');
+{%endfor%}
+
 {%for f in form.json_fields%}
 $('#id_{{f}}').addClass('jsoneditor');
 {%endfor%}