diff options
Diffstat (limited to 'demo/index.html')
| -rw-r--r-- | demo/index.html | 193 |
1 files changed, 46 insertions, 147 deletions
diff --git a/demo/index.html b/demo/index.html index 41e27737..6a08d6fd 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,152 +1,51 @@ -<!DOCTYPE html> -<head> - <script src="libwasm-debug.js"></script> -</head> -<style> - textarea { - width: 100%; - height: 400px; - min-height: 400px; - border: 1px solid #ccc; - border-radius: 5px; - margin: 0; - padding: 5px; - } +<!-- + Copyright 2016 WebAssembly Community Group participants - textarea:focus { - outline: none; - border-color: #777; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); - } + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at - section { - position: relative; - width: 80%; - margin: auto; - box-sizing: border-box; - } + http://www.apache.org/licenses/LICENSE-2.0 -</style> + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + <title>sexpr-wasm demo</title> + <link href="primer.css" rel="stylesheet"> + <link href="custom.css" rel="stylesheet"> +</head> <body> - <section> - <textarea id="input" autofocus autocomplete="off" autocorrect="off" - autocapitalize="off" spellcheck="false"></textarea> - </section> - <pre id="output"> - errors: - </pre> - <script> - var defaultIndent = ' '; - function insertTextAtSelection(input, src) { - var selectionStart = input.selectionStart; - var selectionEnd = input.selectionEnd; - var oldValue = input.value; - input.value = oldValue.slice(0, selectionStart) + src + - oldValue.slice(selectionEnd); - input.selectionStart = input.selectionEnd = selectionStart + src.length; - } - - function onInputKeyDown(e) { - if (e.keyCode == 9) { // tab - insertTextAtSelection(this, defaultIndent); - e.preventDefault(); - } else if (e.keyCode == 13) { // newline - // count nesting depth - var parens = 0; - var lastOpen = -1; - var indent = ''; - for (var i = this.selectionStart - 1; i >= 0; --i) { - var c = this.value[i]; - if (c == '(') { - if (--parens < 0) { - if (lastOpen != -1) - i = lastOpen; - else - indent = defaultIndent; - break; - // find first sibling "(", if any - } else if (parens == 0 && lastOpen == -1) { - lastOpen = i; - } - } else if (c == ')') { - parens++; - } - } - // get column of current nesting - var col = 0; - for (; i > 0; --i) { - var c = this.value[i]; - if (c == '\n') { - col--; // went back too far - break; - } else { - col++; - } - } - // write newline, plus indentation - insertTextAtSelection(this, '\n' + ' '.repeat(col) + indent); - e.preventDefault(); - } - } - - function onError(loc, error, sourceLine, sourceLineColumnOffset) { - var lines = [ - loc.filename + ':' + loc.line + ':' + loc.firstColumn, - error - ]; - if (sourceLine.length > 0) { - var numSpaces = loc.firstColumn - 1 - sourceLineColumnOffset; - var numCarets = loc.lastColumn - loc.firstColumn; - lines.push(sourceLine); - lines.push(' '.repeat(numSpaces) + '^'.repeat(numCarets)); - } - output.textContent += lines.join('\n') + '\n'; - } - - var allocator = wasm.LibcAllocator; - var eh = new wasm.SourceErrorHandler(onError, 80); - - function compile(text) { - output.textContent = ''; - try { - var buf = wasm.Buffer.fromString(text); - var lexer = wasm.Lexer.fromBuffer(allocator, 'test.wast', buf); - var script = wasm.parse(lexer, eh); - wasm.checkAst(lexer, script, eh); - var memoryWriter = new wasm.MemoryWriter(allocator); - var jsWriter = new wasm.JSStringWriter(); - var logStream = new wasm.Stream(jsWriter.writer); - var options = new wasm.WriteBinaryOptions({logStream: logStream}); - wasm.writeBinaryScript(allocator, memoryWriter.base, script, options); - output.textContent = jsWriter.string; - } catch (e) { - output.textContent += e.toString(); - } finally { - if (options) - options.$destroy(); - if (logStream) - logStream.$destroy(); - if (script) - script.$destroy(); - if (jsWriter) - jsWriter.$destroy(); - if (memoryWriter) - memoryWriter.$destroy(); - if (lexer) - lexer.$destroy(); - if (buf) - buf.$destroy(); - } - } - - function onInputInput(e) { - compile(input.value); - } - - var input = document.getElementById('input'); - input.addEventListener('keydown', onInputKeyDown); - input.addEventListener('input', onInputInput); - - var output = document.getElementById('output'); - </script> + <div class="container"> + <h1>sexpr-wasm demo</h1> + <hr> + <p> + Type a .wast file into the textarea on the left. The right side will + either show an error, or will show a log with a description of the + generated .wasm file. + </p> + <div class="columns"> + <div class="two-fifths column"> + <textarea id="input" autofocus autocomplete="off" autocorrect="off" + autocapitalize="off" spellcheck="false"></textarea> + <div class="right"> + <label>example:</label> + <select id="select" class="form-select"></select> + </div> + </div> + <div class="three-fifths column"> + <pre id="output"></pre> + </div> + </div> + </div> + <script src="libwasm.js"></script> + <script src="demo.js"></script> </body> +</html> |