mirror of https://github.com/ae-utbm/sith3.git
Merge branch 'rework-front' into 'master'
Markdown widget follows the required attribute See merge request ae/Sith!249
This commit is contained in:
commit
6d0eba6bcf
|
|
@ -5,168 +5,199 @@
|
||||||
{# The easymde script can be included twice, it's safe in the code #}
|
{# The easymde script can be included twice, it's safe in the code #}
|
||||||
<script src="{{ statics.js }}"> </script>
|
<script src="{{ statics.js }}"> </script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var css = "{{ statics.css }}";
|
$(function() {
|
||||||
var lastAPICall;
|
const css = "{{ statics.css }}";
|
||||||
|
let lastAPICall;
|
||||||
|
|
||||||
// Only import the css once
|
// Only import the css once
|
||||||
if (!document.head.innerHTML.includes(css)){
|
if (!document.head.innerHTML.includes(css)) {
|
||||||
document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">';
|
document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Custom markdown parser
|
// Custom markdown parser
|
||||||
function customMarkdownParser(plainText, preview) {
|
function customMarkdownParser(plainText, cb) {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "{{ markdown_api_url }}",
|
url: "{{ markdown_api_url }}",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
|
data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
|
||||||
}).done(function (msg) {
|
}).done(cb);
|
||||||
preview.innerHTML = msg;
|
}
|
||||||
|
|
||||||
|
// Pretty markdown input
|
||||||
|
const easymde = new EasyMDE({
|
||||||
|
element: document.getElementById("{{ widget.attrs.id }}"),
|
||||||
|
spellChecker: false,
|
||||||
|
autoDownloadFontAwesome: false,
|
||||||
|
previewRender: function(plainText, preview) { // Async method
|
||||||
|
clearTimeout(lastAPICall);
|
||||||
|
lastAPICall = setTimeout(() => {
|
||||||
|
customMarkdownParser(plainText, (msg) => preview.innerHTML = msg);
|
||||||
|
}, 300);
|
||||||
|
return preview.innerHTML;
|
||||||
|
},
|
||||||
|
forceSync: true, // Avoid validation error on generic create view
|
||||||
|
toolbar: [
|
||||||
|
{
|
||||||
|
name: "heading-smaller",
|
||||||
|
action: EasyMDE.toggleHeadingSmaller,
|
||||||
|
className: "fa fa-header",
|
||||||
|
title: "{{ translations.heading_smaller }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "italic",
|
||||||
|
action: EasyMDE.toggleItalic,
|
||||||
|
className: "fa fa-italic",
|
||||||
|
title: "{{ translations.italic }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bold",
|
||||||
|
action: EasyMDE.toggleBold,
|
||||||
|
className: "fa fa-bold",
|
||||||
|
title: "{{ translations.bold }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "strikethrough",
|
||||||
|
action: EasyMDE.toggleStrikethrough,
|
||||||
|
className: "fa fa-strikethrough",
|
||||||
|
title: "{{ translations.strikethrough }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "underline",
|
||||||
|
action: function customFunction(editor){
|
||||||
|
let cm = editor.codemirror;
|
||||||
|
cm.replaceSelection('__' + cm.getSelection() + '__');
|
||||||
|
},
|
||||||
|
className: "fa fa-underline",
|
||||||
|
title: "{{ translations.underline }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "superscript",
|
||||||
|
action: function customFunction(editor){
|
||||||
|
let cm = editor.codemirror;
|
||||||
|
cm.replaceSelection('<sup>' + cm.getSelection() + '</sup>');
|
||||||
|
},
|
||||||
|
className: "fa fa-superscript",
|
||||||
|
title: "{{ translations.superscript }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "subscript",
|
||||||
|
action: function customFunction(editor){
|
||||||
|
let cm = editor.codemirror;
|
||||||
|
cm.replaceSelection('<sub>' + cm.getSelection() + '</sub>');
|
||||||
|
},
|
||||||
|
className: "fa fa-subscript",
|
||||||
|
title: "{{ translations.subscript }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "code",
|
||||||
|
action: EasyMDE.toggleCodeBlock,
|
||||||
|
className: "fa fa-code",
|
||||||
|
title: "{{ translations.code }}"
|
||||||
|
},
|
||||||
|
"|",
|
||||||
|
{
|
||||||
|
name: "quote",
|
||||||
|
action: EasyMDE.toggleBlockquote,
|
||||||
|
className: "fa fa-quote-left",
|
||||||
|
title: "{{ translations.quote }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "unordered-list",
|
||||||
|
action: EasyMDE.toggleUnorderedList,
|
||||||
|
className: "fa fa-list-ul",
|
||||||
|
title: "{{ translations.unordered_list }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ordered-list",
|
||||||
|
action: EasyMDE.toggleOrderedList,
|
||||||
|
className: "fa fa-list-ol",
|
||||||
|
title: "{{ translations.ordered_list }}"
|
||||||
|
},
|
||||||
|
"|",
|
||||||
|
{
|
||||||
|
name: "link",
|
||||||
|
action: EasyMDE.drawLink,
|
||||||
|
className: "fa fa-link",
|
||||||
|
title: "{{ translations.link }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "image",
|
||||||
|
action: EasyMDE.drawImage,
|
||||||
|
className: "fa fa-picture-o",
|
||||||
|
title: "{{ translations.image }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "table",
|
||||||
|
action: EasyMDE.drawTable,
|
||||||
|
className: "fa fa-table",
|
||||||
|
title: "{{ translations.table }}"
|
||||||
|
},
|
||||||
|
"|",
|
||||||
|
{
|
||||||
|
name: "clean-block",
|
||||||
|
action: EasyMDE.cleanBlock,
|
||||||
|
className: "fa fa-eraser fa-clean-block",
|
||||||
|
title: "{{ translations.clean_block }}"
|
||||||
|
},
|
||||||
|
"|",
|
||||||
|
{
|
||||||
|
name: "preview",
|
||||||
|
action: EasyMDE.togglePreview,
|
||||||
|
className: "fa fa-eye no-disable",
|
||||||
|
title: "{{ translations.preview }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "side-by-side",
|
||||||
|
action: EasyMDE.toggleSideBySide,
|
||||||
|
className: "fa fa-columns no-disable no-mobile",
|
||||||
|
title: "{{ translations.side_by_side }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "fullscreen",
|
||||||
|
action: EasyMDE.toggleFullScreen,
|
||||||
|
className: "fa fa-arrows-alt no-disable no-mobile",
|
||||||
|
title: "{{ translations.fullscreen }}"
|
||||||
|
},
|
||||||
|
"|",
|
||||||
|
{
|
||||||
|
name: "guide",
|
||||||
|
action: "/page/Aide_sur_la_syntaxe",
|
||||||
|
className: "fa fa-question-circle",
|
||||||
|
title: "{{ translations.guide }}"
|
||||||
|
},
|
||||||
|
]
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// Pretty markdown input
|
const textarea = document.getElementById('{{ widget.attrs.id }}');
|
||||||
var easymde = new EasyMDE({
|
const submits = textarea
|
||||||
element: document.getElementById("{{ widget.attrs.id }}"),
|
.closest('form')
|
||||||
spellChecker: false,
|
.querySelectorAll('input[type="submit"]');
|
||||||
autoDownloadFontAwesome: false,
|
const parentDiv = textarea.parentElement;
|
||||||
previewRender: function(plainText, preview){ // Async method
|
let submitPressed = false;
|
||||||
clearTimeout(lastAPICall);
|
|
||||||
lastAPICall = setTimeout(function (plainText, preview){
|
function checkMarkdownInput(e) {
|
||||||
customMarkdownParser(plainText, preview);
|
// an attribute is null if it does not exist, else a string
|
||||||
}, 300, plainText, preview);
|
const required = textarea.getAttribute('required') != null;
|
||||||
return preview.innerHTML;
|
const length = textarea.value.trim().length;
|
||||||
},
|
|
||||||
forceSync: true, // Avoid validation error on generic create view
|
if (required && length == 0) {
|
||||||
toolbar: [
|
parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px';
|
||||||
{
|
} else {
|
||||||
name: "heading-smaller",
|
parentDiv.style.boxShadow = '';
|
||||||
action: EasyMDE.toggleHeadingSmaller,
|
}
|
||||||
className: "fa fa-header",
|
}
|
||||||
title: "{{ translations.heading_smaller }}"
|
|
||||||
},
|
function onSubmitClick(e) {
|
||||||
{
|
if (!submitPressed) {
|
||||||
name: "italic",
|
easymde.codemirror.on('change', checkMarkdownInput);
|
||||||
action: EasyMDE.toggleItalic,
|
}
|
||||||
className: "fa fa-italic",
|
submitPressed = true;
|
||||||
title: "{{ translations.italic }}"
|
checkMarkdownInput(e);
|
||||||
},
|
}
|
||||||
{
|
|
||||||
name: "bold",
|
submits.forEach((submit) => {
|
||||||
action: EasyMDE.toggleBold,
|
submit.addEventListener('click', onSubmitClick);
|
||||||
className: "fa fa-bold",
|
})
|
||||||
title: "{{ translations.bold }}"
|
})
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "strikethrough",
|
|
||||||
action: EasyMDE.toggleStrikethrough,
|
|
||||||
className: "fa fa-strikethrough",
|
|
||||||
title: "{{ translations.strikethrough }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "underline",
|
|
||||||
action: function customFunction(editor){
|
|
||||||
var cm = editor.codemirror;
|
|
||||||
cm.replaceSelection('__' + cm.getSelection() + '__');
|
|
||||||
},
|
|
||||||
className: "fa fa-underline",
|
|
||||||
title: "{{ translations.underline }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "superscript",
|
|
||||||
action: function customFunction(editor){
|
|
||||||
var cm = editor.codemirror;
|
|
||||||
cm.replaceSelection('<sup>' + cm.getSelection() + '</sup>');
|
|
||||||
},
|
|
||||||
className: "fa fa-superscript",
|
|
||||||
title: "{{ translations.superscript }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "subscript",
|
|
||||||
action: function customFunction(editor){
|
|
||||||
var cm = editor.codemirror;
|
|
||||||
cm.replaceSelection('<sub>' + cm.getSelection() + '</sub>');
|
|
||||||
},
|
|
||||||
className: "fa fa-subscript",
|
|
||||||
title: "{{ translations.subscript }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "code",
|
|
||||||
action: EasyMDE.toggleCodeBlock,
|
|
||||||
className: "fa fa-code",
|
|
||||||
title: "{{ translations.code }}"
|
|
||||||
},
|
|
||||||
"|",
|
|
||||||
{
|
|
||||||
name: "quote",
|
|
||||||
action: EasyMDE.toggleBlockquote,
|
|
||||||
className: "fa fa-quote-left",
|
|
||||||
title: "{{ translations.quote }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "unordered-list",
|
|
||||||
action: EasyMDE.toggleUnorderedList,
|
|
||||||
className: "fa fa-list-ul",
|
|
||||||
title: "{{ translations.unordered_list }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ordered-list",
|
|
||||||
action: EasyMDE.toggleOrderedList,
|
|
||||||
className: "fa fa-list-ol",
|
|
||||||
title: "{{ translations.ordered_list }}"
|
|
||||||
},
|
|
||||||
"|",
|
|
||||||
{
|
|
||||||
name: "link",
|
|
||||||
action: EasyMDE.drawLink,
|
|
||||||
className: "fa fa-link",
|
|
||||||
title: "{{ translations.link }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "image",
|
|
||||||
action: EasyMDE.drawImage,
|
|
||||||
className: "fa fa-picture-o",
|
|
||||||
title: "{{ translations.image }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "table",
|
|
||||||
action: EasyMDE.drawTable,
|
|
||||||
className: "fa fa-table",
|
|
||||||
title: "{{ translations.table }}"
|
|
||||||
},
|
|
||||||
"|",
|
|
||||||
{
|
|
||||||
name: "clean-block",
|
|
||||||
action: EasyMDE.cleanBlock,
|
|
||||||
className: "fa fa-eraser fa-clean-block",
|
|
||||||
title: "{{ translations.clean_block }}"
|
|
||||||
},
|
|
||||||
"|",
|
|
||||||
{
|
|
||||||
name: "preview",
|
|
||||||
action: EasyMDE.togglePreview,
|
|
||||||
className: "fa fa-eye no-disable",
|
|
||||||
title: "{{ translations.preview }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "side-by-side",
|
|
||||||
action: EasyMDE.toggleSideBySide,
|
|
||||||
className: "fa fa-columns no-disable no-mobile",
|
|
||||||
title: "{{ translations.side_by_side }}"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "fullscreen",
|
|
||||||
action: EasyMDE.toggleFullScreen,
|
|
||||||
className: "fa fa-arrows-alt no-disable no-mobile",
|
|
||||||
title: "{{ translations.fullscreen }}"
|
|
||||||
},
|
|
||||||
"|",
|
|
||||||
{
|
|
||||||
name: "guide",
|
|
||||||
action: "/page/Aide_sur_la_syntaxe",
|
|
||||||
className: "fa fa-question-circle",
|
|
||||||
title: "{{ translations.guide }}"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue