<!DOCTYPE html> <html lang="en"> <head> <!-- Basic Page Needs --> <meta charset="utf-8" /> <title>Your page title here :)</title> <meta name="description" content="" /> <meta name="author" content="" /> <!-- Mobile Specific Metas --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- FONT --> <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" /> <!-- CSS --> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/skeleton.css" /> <!-- Favicon --> <link rel="icon" type="image/png" href="images/favicon.png" /> <style type="text/css" media="screen"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <!-- Primary Page Layout --> <div class="container-fluid"> <div class="row"> <div class="one-half column"> <button id="compile">Compile Script</button> <div class="u-full-width" placeholder="Try Recital Here." id="recital-box" style="height: 60vh" ></div> </div> <div class="one-half column"> <div class="tab-links"> <button data-tab="output">Output</button> <button data-tab="flat">Flattened</button> </div> <div class="tab-contents"> <div id="output"> <pre id="output-codebox"></pre> </div> <div id="flat"> <pre id="flat-codebox"></pre> </div> </div> </div> </div> </div> <!-- End Document --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script> <script src="js/tabs.js"></script> <script type="module"> import parser, { genFlattenedObject } from '../dist/stage-parser.module.js' // setup tabs /////////////// createTabs(document.querySelector('.tab-links'), document.querySelector('.tab-contents')) // setup editor /////////////// const editor = ace.edit('recital-box') editor.setAutoScrollEditorIntoView(true) window.onload = () => { editor.resize() } // setup compile button //////////////////////// const compileButton = document.querySelector('#compile') const textArea = document.querySelector('#recital-box') compileButton.onclick = () => { // const text = textArea.value const text = editor.getValue() const obj = parser(text) const flatObj = genFlattenedObject(obj) document.querySelector('#output-codebox').innerText = JSON.stringify(obj, null, 2) document.querySelector('#flat-codebox').innerText = JSON.stringify(flatObj, null, 2) } </script> </body> </html>