Add custom {more} markdown tag (#595)

rdmo/core/static/core/css/base.scss

@@ -477,3 +477,13 @@ li.has-warning > a.control-label > i {
     text-decoration: underline;
     text-decoration-style: dotted;
 }
+
+.more,
+.show-less {
+    display: none;
+}
+.show-more,
+.show-less {
+    color: $link-color;
+    cursor: pointer;
+}

rdmo/core/static/core/js/utils.js

@@ -0,0 +1,11 @@
+function showMore(element) {
+    $(element).siblings('.more').show();
+    $(element).siblings('.show-less').show();
+    $(element).hide();
+}
+
+function showLess(element) {
+    $(element).siblings('.more').hide();
+    $(element).siblings('.show-more').show();
+    $(element).hide();
+}

rdmo/core/templates/core/base.html

@@ -20,6 +20,9 @@
     {% endblock %}
 
     {% block js %}
+    {% compress js %}
+    <script type="text/javascript" src="{% static 'core/js/utils.js' %}" ></script>
+    {% endcompress %}
     {% endblock %}
 
     {% block head %}{% endblock %}

rdmo/core/utils.py

@@ -384,15 +384,26 @@ def is_truthy(value):
 
 
 def markdown2html(markdown_string):
-    # adoption of the normal markdown function which also converts
-    # `[<string>]{<title>}` to <span title="<title>"><string></span> to
-    # allow for underlined tooltips
-    html = markdown(force_str(markdown_string))
+    # adoption of the normal markdown function
+    html = markdown(force_str(markdown_string)).strip()
+
+    # convert `[<string>]{<title>}` to <span title="<title>"><string></span> to allow for underlined tooltips
     html = re.sub(
         r'\[(.*?)\]\{(.*?)\}',
         r'<span data-toggle="tooltip" data-placement="bottom" data-html="true" title="\2">\1</span>',
         html
     )
+
+    # convert everything after `{more}` to <span class="more"><string></span> to be shown/hidden on user input
+    show_string = _('show more')
+    hide_string = _('show less')
+    html = re.sub(
+        r'(\{more\})(.*?)</p>$',
+        f'<span class="show-more" onclick="showMore(this)">... ({show_string})</span>'
+        r'<span class="more">\2</span>'
+        f'<span class="show-less" onclick="showLess(this)"> ({hide_string})</span></p>',
+        html
+    )
     return html