Fix some Markdown and add basic textarea helper

Signed-off-by: Skia <skia@libskia.so>

core/static/core/style.scss

@@ -326,7 +326,21 @@ tbody > tr {
   }
 }
 
-em {
+sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+b, strong {
+  font-weight: bold;
+}
+
+i, em {
   font-style: italic;
 }
 
@@ -335,7 +349,7 @@ em {
   font-weight: bold;
 }
 
-.underline {
+u, .underline {
   text-decoration: underline;
 }
 
@@ -470,21 +484,6 @@ em {
   border: solid #333 2px;
 }
 
-/*-------------------------------MARKDOWN------------------------------*/
-
-.markdown {
-  margin: 0px;
-  padding: 0px;
-  code {
-    font-family: monospace;
-    color: $white-color;
-    background: $black-color;
-    display: inline-block;
-    padding: 4px;
-    line-height: 120%;
-  }
-}
-
 /*---------------------------------PAGE--------------------------------*/
 
 .page_content {
@@ -508,15 +507,6 @@ textarea {
 /*------------------------------FORUM----------------------------------*/
 
 #forum {
-  a {
-    color: $black-color;
-  }
-
-  a:hover {
-    color: #424242;
-    text-decoration: underline;
-  }
-
   .topic {
     border: solid $primary-neutral-color 1px;
     padding: 1px;
@@ -750,3 +740,45 @@ label {
     vertical-align: middle;
   }
 }
+
+/*-------------------------------MARKDOWN------------------------------*/
+
+.markdown {
+  margin: 0px;
+  padding: 0px;
+  code {
+    font-family: monospace;
+    color: $white-color;
+    background: $black-color;
+    display: inline-block;
+    padding: 4px;
+    line-height: 120%;
+  }
+  a {
+    color: $primary-light-color;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.markdown_editor {
+  margin-top: 5px;
+}
+
+.markdown_editor a {
+  border: solid 1px $black-color;
+  padding: 2px;
+  min-width: 1em;
+  display: inline-block;
+  text-align: center;
+  margin: 0px 1px;
+}
+
+.markdown_editor a:hover {
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: 0px 0px 1px 1px $secondary-light-color;
+  transition: all 0.1s linear;
+}
+

core/templates/core/base.jinja

@@ -192,6 +192,74 @@ jQuery.datetimepicker.setLocale('{{ request.LANGUAGE_CODE|lower }}');
 $('.select_datetime').datetimepicker({
         format: 'Y-m-d H:i:s',
         });
+
+function add_syntax(e, choice) {
+    ta = $(e).parent().children('textarea')[0];
+    ta.focus();
+    var start = ta.selectionStart;
+    var end = ta.selectionEnd;
+    var before = ta.value.substring(0, start);
+    var after = ta.value.substring(end);
+    var between = ta.value.substring(start, end);
+    switch (choice) {
+        case "bold":
+            ta.value = before + "**" + between + "**" + after;
+            ta.selectionEnd = end + 2;
+            break;
+        case "italic":
+            ta.value = before + "*" + between + "*" + after;
+            ta.selectionEnd = end + 1;
+            break;
+        case "underline":
+            ta.value = before + "__" + between + "__" + after;
+            ta.selectionEnd = end + 2;
+            break;
+        case "strike":
+            ta.value = before + "~~" + between + "~~" + after;
+            ta.selectionEnd = end + 2;
+            break;
+        case "sub":
+            ta.value = before + "_" + between + "_" + after;
+            ta.selectionEnd = end + 1;
+            break;
+        case "sup":
+            ta.value = before + "^" + between + "^" + after;
+            ta.selectionEnd = end + 1;
+            break;
+        case "link":
+            if (between === "") {
+                between = "https://";
+            }
+            name = "{% trans %}name{% endtrans %}";
+            ta.value = before + "[" + name + "](" + between + ")" + after;
+            ta.selectionStart = start + 1;
+            ta.selectionEnd = start + 1 + name.length;
+            break;
+        case "image":
+            if (between === "") {
+                between = "{% trans %}https://path/to/image.gif{% endtrans %}";
+            }
+            alt = "{% trans %}alternative text{% endtrans %}";
+            ta.value = before + "![" + alt + "](" + between + "?42% \"{% trans %}Title{% endtrans %}\")" + after;
+            ta.selectionStart = start + 2;
+            ta.selectionEnd = start + 2 + alt.length;
+            break;
+    }
+}
+
+$(document).ready(function() {
+    textarea = $('.markdown_editor textarea');
+    editor = textarea.parent();
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'image\')">{% trans %}Image{% endtrans %}</a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'link\')">{% trans %}Link{% endtrans %}</a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'sup\')"><sup>{% trans %}sup{% endtrans %}</sup></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'sub\')"><sub>{% trans %}sub{% endtrans %}</sub></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'strike\')"><del>{% trans %}S{% endtrans %}</del></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'underline\')"><u>{% trans %}U{% endtrans %}</u></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'italic\')"><i>{% trans %}I{% endtrans %}</i></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'bold\')"><b>{% trans %}B{% endtrans %}</b></a>');
+    console.log(textarea.parent());
+});
         </script>
         {% endblock %}
     </body>

forum/templates/forum/reply.jinja

@@ -29,8 +29,10 @@
         {% csrf_token %}
         <p>{{ form.title.errors }}<label for="{{ form.title.name }}">{{ form.title.label }}</label> {{ form.title }}</p>
         <p>{{ form.message.errors }}<label for="{{ form.message.name }}">{{ form.message.label }}</label> </p>
-        <p class="markdown_editor"><a href="{{ syntax_help_page.get_absolute_url() }}">{% trans %}Help on the syntax{% endtrans %}</a>
+        <p><a href="{{ syntax_help_page.get_absolute_url() }}">{% trans %}Help on the syntax{% endtrans %}</a>
+        <div class="markdown_editor">
         {{ form.message }}
+        </div>
         </p>
         <p><input type="button" value="{% trans %}Preview{% endtrans %}" onclick="javascript:make_preview();" /></p>
         <p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>

locale/fr/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-06-10 16:53+0200\n"
+"POT-Creation-Date: 2017-06-10 19:05+0200\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Skia <skia@libskia.so>\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -17,7 +17,8 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
 #: accounting/models.py:60 accounting/models.py:108 accounting/models.py:135
-#: accounting/models.py:194 club/models.py:43 counter/models.py:100
+#: accounting/models.py:194 club/models.py:43
+#: core/templates/core/base.jinja:233 counter/models.py:100
 #: counter/models.py:125 counter/models.py:160 forum/models.py:50
 #: launderette/models.py:37 launderette/models.py:82 launderette/models.py:107
 #: stock/models.py:38 stock/models.py:54 stock/models.py:77 stock/models.py:97
@@ -697,7 +698,7 @@ msgstr "Opération liée : "
 #: core/templates/core/user_preferences.jinja:12
 #: core/templates/core/user_preferences.jinja:19
 #: counter/templates/counter/cash_register_summary.jinja:22
-#: forum/templates/forum/reply.jinja:36
+#: forum/templates/forum/reply.jinja:38
 #: subscription/templates/subscription/subscription.jinja:24
 #: trombi/templates/trombi/comment.jinja:26
 #: trombi/templates/trombi/user_tools.jinja:13
@@ -1210,8 +1211,9 @@ msgstr "Type"
 #: com/templates/com/news_admin_list.jinja:15
 #: com/templates/com/news_admin_list.jinja:50
 #: com/templates/com/weekmail.jinja:19 com/templates/com/weekmail.jinja:48
-#: forum/templates/forum/forum.jinja:27 forum/templates/forum/forum.jinja:46
+#: core/templates/core/base.jinja:243 forum/templates/forum/forum.jinja:27
-#: forum/templates/forum/main.jinja:25 forum/views.py:145
+#: forum/templates/forum/forum.jinja:46 forum/templates/forum/main.jinja:25
+#: forum/views.py:145
 msgid "Title"
 msgstr "Titre"
 
@@ -1297,7 +1299,7 @@ msgstr ""
 
 #: com/templates/com/news_edit.jinja:55 com/templates/com/weekmail.jinja:10
 #: core/templates/core/pagerev_edit.jinja:25
-#: forum/templates/forum/reply.jinja:35
+#: forum/templates/forum/reply.jinja:37
 msgid "Preview"
 msgstr "Prévisualiser"
 
@@ -1580,7 +1582,7 @@ msgstr "-"
 msgid "XS"
 msgstr "XS"
 
-#: core/models.py:162
+#: core/models.py:162 core/templates/core/base.jinja:257
 msgid "S"
 msgstr "S"
 
@@ -1686,7 +1688,7 @@ msgstr "Un utilisateur de ce nom d'utilisateur existe déjà"
 #: core/templates/core/user_edit.jinja:17
 #: election/templates/election/election_detail.jinja:317
 #: forum/templates/forum/macros.jinja:93 forum/templates/forum/macros.jinja:95
-#: forum/templates/forum/reply.jinja:41 forum/templates/forum/reply.jinja:43
+#: forum/templates/forum/reply.jinja:43 forum/templates/forum/reply.jinja:45
 #: trombi/templates/trombi/user_tools.jinja:43
 msgid "Profile"
 msgstr "Profil"
@@ -1958,6 +1960,42 @@ msgstr "R&D"
 msgid "Site made by good people"
 msgstr "Site réalisé par des gens bons"
 
+#: core/templates/core/base.jinja:240
+msgid "https://path/to/image.gif"
+msgstr "https://chemin/vers/image.gif"
+
+#: core/templates/core/base.jinja:242
+msgid "alternative text"
+msgstr "texte alternatif"
+
+#: core/templates/core/base.jinja:253
+msgid "Image"
+msgstr "Image"
+
+#: core/templates/core/base.jinja:254
+msgid "Link"
+msgstr "Lien"
+
+#: core/templates/core/base.jinja:255
+msgid "sup"
+msgstr "exp"
+
+#: core/templates/core/base.jinja:256
+msgid "sub"
+msgstr "ind"
+
+#: core/templates/core/base.jinja:258
+msgid "U"
+msgstr "S"
+
+#: core/templates/core/base.jinja:259
+msgid "I"
+msgstr "I"
+
+#: core/templates/core/base.jinja:260
+msgid "B"
+msgstr "G"
+
 #: core/templates/core/create.jinja:4 core/templates/core/create.jinja.py:8
 #, python-format
 msgid "Create %(name)s"