mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-01 11:58:04 +00:00
Make easymde compatible with safari
This commit is contained in:
parent
74a506c48b
commit
645b8a543e
@ -8,7 +8,7 @@ import EasyMDE from "easymde";
|
|||||||
import { markdownRenderMarkdown } from "#openapi";
|
import { markdownRenderMarkdown } from "#openapi";
|
||||||
|
|
||||||
const loadEasyMde = (textarea: HTMLTextAreaElement) => {
|
const loadEasyMde = (textarea: HTMLTextAreaElement) => {
|
||||||
new EasyMDE({
|
const easyMde = new EasyMDE({
|
||||||
element: textarea,
|
element: textarea,
|
||||||
spellChecker: false,
|
spellChecker: false,
|
||||||
autoDownloadFontAwesome: false,
|
autoDownloadFontAwesome: false,
|
||||||
@ -158,26 +158,22 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
|
|||||||
const submits: HTMLInputElement[] = Array.from(
|
const submits: HTMLInputElement[] = Array.from(
|
||||||
textarea.closest("form").querySelectorAll('input[type="submit"]'),
|
textarea.closest("form").querySelectorAll('input[type="submit"]'),
|
||||||
);
|
);
|
||||||
const parentDiv = textarea.parentElement;
|
const parentDiv = textarea.parentElement.parentElement;
|
||||||
let submitPressed = false;
|
|
||||||
|
|
||||||
function checkMarkdownInput(_event: Event) {
|
function checkMarkdownInput(event: Event) {
|
||||||
// an attribute is null if it does not exist, else a string
|
// an attribute is null if it does not exist, else a string
|
||||||
const required = this.getAttribute("required") != null;
|
const required = textarea.getAttribute("required") != null;
|
||||||
const length = this.value.trim().length;
|
const length = textarea.value.trim().length;
|
||||||
|
|
||||||
if (required && length === 0) {
|
if (required && length === 0) {
|
||||||
parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px";
|
parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px";
|
||||||
|
event.preventDefault();
|
||||||
} else {
|
} else {
|
||||||
parentDiv.style.boxShadow = "";
|
parentDiv.style.boxShadow = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSubmitClick(e: Event) {
|
function onSubmitClick(e: Event) {
|
||||||
if (!submitPressed) {
|
|
||||||
this.codemirror.on("change", checkMarkdownInput);
|
|
||||||
}
|
|
||||||
submitPressed = true;
|
|
||||||
checkMarkdownInput(e);
|
checkMarkdownInput(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -186,11 +182,25 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
class MarkdownInput extends HTMLTextAreaElement {
|
class MarkdownInput extends HTMLElement {
|
||||||
|
widget: HTMLTextAreaElement;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this));
|
this.widget = document.createElement("textarea");
|
||||||
|
|
||||||
|
const attributes: Attr[] = []; // We need to make a copy to delete while iterating
|
||||||
|
for (const attr of this.attributes) {
|
||||||
|
attributes.push(attr);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const attr of attributes) {
|
||||||
|
this.removeAttributeNode(attr);
|
||||||
|
this.widget.setAttributeNode(attr);
|
||||||
|
}
|
||||||
|
this.appendChild(this.widget);
|
||||||
|
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.widget));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define("markdown-input", MarkdownInput, { extends: "textarea" });
|
window.customElements.define("markdown-input", MarkdownInput);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<div>
|
<div>
|
||||||
<textarea is="markdown-input" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
|
<markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
|
||||||
|
|
||||||
{# 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 }}" defer> </script>
|
<script src="{{ statics.js }}" defer> </script>
|
||||||
|
Loading…
Reference in New Issue
Block a user