Created live-renderer as an example project

f90cf4bc · Commander-lol · 25cd5874 · f90cf4bc
Commit f90cf4bc authored 9 years ago by Commander-lol
--- a/test/live.html
+++ b/test/live.html
+<!DOCTYPE html>
+
+<html>
+
+    <head>
+        <meta charset="utf-8">
+        <title>Sideburns Live Renderer</title>
+
+        <style>
+            * {
+                font-family: sans-serif;
+                margin: 0;
+                padding: 0;
+            }
+
+            body, html {
+                width: 100%;
+                height: 100%;
+                position: relative;
+            }
+
+            .column {
+                display: inline-block;
+                box-sizing: border-box;
+                width: 33%;
+                height: calc(100% - 4em);
+                position: relative;
+                vertical-align: top;
+            }
+
+            .pad {
+                padding: 1em;
+            }
+            .pad p {
+                padding: 1em;
+            }
+            .column .sub {
+                height: calc(50% - 0.25em);
+                width: 100%;
+                padding: 0;
+                margin-bottom: 0.25em;
+            }
+
+            .row {
+                width: 100%;
+                padding: 1em;
+                box-sizing: border-box;
+            }
+
+            #header {
+                text-align: center;
+                height: 4em;
+            }
+
+            .txt-display {
+                width: 95%;
+                max-width: 95%;
+                min-height: 50%;
+                position: relative;
+                margin: 1em auto;
+                font-family: monospace;
+            }
+
+            #output {
+                background-color: white;
+                font-family: sans-serif;
+            }
+
+        </style>
+    </head>
+
+    <body>
+    <div class="row" id="header">
+        <h1>Sideburns Live Renderer</h1>
+    </div>
+    <div id="t" class="column pad" style="background-color:blue;">
+        <h2>Input Template</h2>
+        <textarea id="inp-template" class="txt-display"></textarea>
+        <p class="error"></p>
+    </div>
+    <div class="column">
+        <div id="d" class="sub pad" style="background-color:red;">
+        <h2>Input Data</h2>
+        <textarea id="inp-data" class="txt-display">{
+
+}</textarea>
+            <p class="error"></p>
+            </div>
+        <div id="o" class="sub pad" style="background-color:red;">
+        <h2>Input Options</h2>
+        <textarea id="inp-options" class="txt-display">{
+
+}</textarea>
+            <p class="error"></p>
+            </div>
+    </div>
+    <div id="out" class="column pad" style="background-color:green;">
+        <h2>Output</h2>
+        <pre id="output" class="txt-display"></pre>
+    </div>
+
+
+        <script src="td.js"></script>
+        <script src="../dist/tinyDOM-Sideburns.min.js"></script>
+        <script>
+        var afterTimeout = function() {
+            validateAndRender(mu("#" + this.id));
+            times[this.id] = null;
+        }, times = {
+            "inp-template": null,
+            "inp-data": null,
+            "inp-options": null
+        },
+            d = mu.byID("inp-data"),
+            t = mu.byID("inp-template"),
+            o = mu.byID("inp-options"),
+
+            validateAndRender = function(e){
+                var valid = true, data, options;
+
+                try{
+                    data = JSON.parse(d[0].value.trim())
+                    d[0].value = JSON.stringify(data, null, 2);
+                    mu("#d *:last-child")[0].innerHTML = "VALID JSON";
+                } catch (e) {
+                    mu("#d *:last-child")[0].innerHTML = "INVALID JSON<br>" + e;
+                    valid = false;
+                }
+
+                try{
+                    options = JSON.parse(options = o[0].value.trim());
+                    o[0].value = JSON.stringify(options, null, 2);
+                    mu("#o *:last-child")[0].innerHTML = "VALID JSON";
+                } catch (e) {
+                    mu("#o *:last-child")[0].innerHTML = "INVALID JSON<br>" + e;
+                    valid = false;
+                }
+
+                if(valid) {
+                    mu.byID("output")[0].style.color = "black";
+                    mu.byID("output")[0].style.whiteSpace = "pre-wrap";
+                    try{
+                        mu.byID("output").render(t[0].value, data, options);
+                    } catch (e) {
+                        mu.byID("output")[0].innerHTML = e.message;
+                        mu.byID("output")[0].style.color = "red";
+                    }
+                }
+
+        };
+        mu.ready(function(){
+            mu(".pad textarea").on("input", function(e){
+                if (times[this.id] !== null) {
+                    window.clearTimeout(times[this.id]);
+                }
+                times[this.id] = window.setTimeout(afterTimeout.bind(this), 250);
+            });
+        });
+        </script>
+    </body>
+
+</html>