UNPKG

sowstring

Version:
78 lines (71 loc) 2.26 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Playground</title> <style type="text/css"> body { font-family: sans-serif; margin: 10px; display: flex; flex-wrap: wrap; justify-content: center; } .left-panel, .right-panel{ width: 45%; padding: 5px; margin: 0 1%; box-shadow: rgba(0,0,0,.3) 0 0 2px 0; height: 500px; box-sizing: border-box; border: none; font-size: 12px; font-family: monospace; } .full-width { width: 100%; padding: 5px; margin: 5px; } .full-width label { vertical-align: middle; font-size: 12px; } </style> </head> <body> <div class="full-width"> <label><input type="checkbox" id="emptyLinesCheckbox" onclick="ParseTree()"> emptyLines</label> <label><input type="checkbox" id="useHeadingCheckbox" onclick="ParseTree()"> useHeading</label> <label><input type="checkbox" id="fixIndentCheckbox" onclick="ParseTree()"> fixIndent</label> </div> <textarea class="left-panel" id="indentedTextarea" oninput="ParseTree()">Sample Tree Node 1 Subnode 1.1 Subnode 1.2 Node 2 Node 3 End </textarea> <pre class="right-panel" id="resultPre"></pre> <script type="text/javascript" src="../dist/sowstring.js"></script> <script type="text/javascript"> console.log ('SowString is loaded?', !! SowString) var indentedComp = document.getElementById ('indentedTextarea') var resultComp = document.getElementById ('resultPre') function ParseTree () { try { var tree = SowString(indentedComp.value, { emptyLines: emptyLinesCheckbox.checked, useHeading: useHeadingCheckbox.checked, fixIndent: fixIndentCheckbox.checked, }) resultComp.innerText = tree.toString({details:true}) } catch (e) { resultComp.innerText = e.toString () } } ParseTree() </script> </body> </html>