Merge branch 'rework-front' into 'master'

Markdown widget follows the required attribute

See merge request ae/Sith!249

core/templates/core/markdown_textarea.jinja

@@ -5,35 +5,34 @@
 	{# The easymde script can be included twice, it's safe in the code #}
 	<script src="{{ statics.js }}"> </script>
 	<script type="text/javascript">
-		var css = "{{ statics.css }}";
-		var lastAPICall;
+		$(function() {
+			const css = "{{ statics.css }}";
+			let lastAPICall;
 
 			// 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 + '">';
 			}
 
 			// Custom markdown parser
-		function customMarkdownParser(plainText, preview) {
+			function customMarkdownParser(plainText, cb) {
 				$.ajax({
 					url: "{{ markdown_api_url }}",
 					method: "POST",
 					data: { text: plainText, csrfmiddlewaretoken: getCSRFToken() },
-			}).done(function (msg) {
-				preview.innerHTML = msg;
-			});
+				}).done(cb);
 			}
 
 			// Pretty markdown input
-		var easymde = new EasyMDE({
+			const easymde = new EasyMDE({
 				element: document.getElementById("{{ widget.attrs.id }}"),
 				spellChecker: false,
 				autoDownloadFontAwesome: false,
-			previewRender: function(plainText, preview){ // Async method
+				previewRender: function(plainText, preview) { // Async method
 					clearTimeout(lastAPICall);
-				lastAPICall = setTimeout(function (plainText, preview){
-					customMarkdownParser(plainText, preview);
-				}, 300, plainText, preview);
+					lastAPICall = setTimeout(() => {
+						customMarkdownParser(plainText, (msg) => preview.innerHTML = msg);
+					}, 300);
 					return preview.innerHTML;
 				},
 				forceSync: true, // Avoid validation error on generic create view
@@ -65,7 +64,7 @@
 					{
 						name: "underline",
 						action: function customFunction(editor){
-						var cm = editor.codemirror;
+							let cm = editor.codemirror;
 							cm.replaceSelection('__' + cm.getSelection() + '__');
 						},
 						className: "fa fa-underline",
@@ -74,7 +73,7 @@
 					{
 						name: "superscript",
 						action: function customFunction(editor){
-						var cm = editor.codemirror;
+							let cm = editor.codemirror;
 							cm.replaceSelection('<sup>' + cm.getSelection() + '</sup>');
 						},
 						className: "fa fa-superscript",
@@ -83,7 +82,7 @@
 					{
 						name: "subscript",
 						action: function customFunction(editor){
-						var cm = editor.codemirror;
+							let cm = editor.codemirror;
 							cm.replaceSelection('<sub>' + cm.getSelection() + '</sub>');
 						},
 						className: "fa fa-subscript",
@@ -168,5 +167,37 @@
 					},
 				]
 			});
+
+			const textarea = document.getElementById('{{ widget.attrs.id }}');
+			const submits = textarea
+				.closest('form')
+				.querySelectorAll('input[type="submit"]');
+			const parentDiv = textarea.parentElement;
+			let submitPressed = false;
+
+			function checkMarkdownInput(e) {
+				// an attribute is null if it does not exist, else a string
+				const required = textarea.getAttribute('required') != null;
+				const length = textarea.value.trim().length;
+
+				if (required && length == 0) {
+					parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px';
+				} else {
+					parentDiv.style.boxShadow = '';
+				}
+			}
+
+			function onSubmitClick(e) {
+				if (!submitPressed) {
+					easymde.codemirror.on('change', checkMarkdownInput);
+				}
+				submitPressed = true;
+				checkMarkdownInput(e);
+			}
+
+			submits.forEach((submit) => {
+				submit.addEventListener('click', onSubmitClick);
+			})
+		})
 	</script>
 </div>