Working demo with current features

2019-07-16 15:40:27 +02:00
parent 75162b8b79
commit d1c1e149df
14 changed files with 15356 additions and 6197 deletions
@@ -3,10 +3,70 @@
 <head>
    <meta charset="UTF-8">
    <title>fa-diagrams example</title>
+    <script src="jquery-3.4.1.min.js"></script>
    <script src="fa-diagrams-data.min.js"></script>
    <script src="fa-diagrams.min.js"></script>
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+
+        html, body {
+            height: 100vh;
+            background: none;
+        }
+
+        #left {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: calc(30% - 5px);
+            height: 100vh;
+            border-right: 5px solid #333;
+        }
+
+        #right {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 70%;
+            height: 100vh;
+        }
+
+        #input{
+            width:100%;
+            height:100vh;
+            padding:1em;
+        }
+    </style>
 </head>
 <body>
-<h1 id="title">WIP</h1>
+<div id="left">
+    <textarea id="input"></textarea>
+</div>
+<div id="right"></div>
+<script>
+    $.getJSON('sample.json',(data) => {
+      $('#input').val(JSON.stringify(data, null, 4)).trigger('paste');
+    });
+
+    $(document).ready(() => {
+      let timeout;
+        $('#input').on('change keyup paste', () => {
+          clearTimeout(timeout);
+          timeout = setTimeout(() => {
+            try{
+              let data = JSON.parse($('#input').val());
+              $('#right').html(faDiagrams.compute(data));
+            }catch(err){
+              $('#right').html(`<h2>${err.replaceAll('\n','<br>')}</h2>`);
+            }
+
+          }, 500);
+        });
+    });
+</script>
 </body>
 </html>