Spaces:
Running
Running
File size: 2,069 Bytes
5d38218 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My static Space</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="my-form">
<textarea id="inp" rows="5" cols="33"></textarea>
</form>
<button onclick="displayFormOutput()" type="button">Submit & Display Output</button>
<div id="myList"></div>
<div id="test">
<pre id = "test1" class="mermaid">
graph TD
A[Start] --> B[Task 1]
B --> C[Task 2]
C --> D[End]
</pre>
</div>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const merm = urlParams.get("mermaid");
console.log(merm);
//this_id=document.getElementById("test1");
//this_id.innerHTML="graph TD\nA[Start] --> B[Task 1]\nB --> C[Task 7]\nC --> D[End]"
//this_id.innerHTML=merm;
</script>
<script>
function displayFormOutput() {
const form = document.getElementById("my-form");
const inp = form.elements["inp"];
const inpValue = inp.value || "Not specified";
const node = document.createElement("pre");
node.classList.add('mermaid');
//const textnode = document.createTextNode(inp.value);
//node.appendChild(textnode);
node.innerHTML=inp.value;
document.getElementById("myList").appendChild(node);
this_id=document.getElementById("test1")
this_id.innerHTML=inp.value
$('#mermaid').html(node.data.graph).removeAttr('data-processed');
mermaid.init(undefined, $("#mermaid"));
}
</script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>
|