115 lines
3.6 KiB
HTML
115 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WF Compiler Demo</title>
|
|
<link rel="stylesheet" href="./default.css">
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<h1 class="content-title">WFC Demo</h1>
|
|
|
|
<div class="content-body">
|
|
<textarea id="wfc-output"
|
|
disabled
|
|
></textarea>
|
|
<input autofocus id="wfc-input"></textarea>
|
|
|
|
<h2>Settings</h2>
|
|
<input type="checkbox" checked id="auto-resize-output">Auto-resize output</input> <br>
|
|
<input type="checkbox" checked id="auto-scroll" >Auto-scroll output to bottom</input>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let ielt = document.getElementById('wfc-input');
|
|
let oelt = document.getElementById('wfc-output');
|
|
let MAX_OELT_HEIGHT = 100;
|
|
|
|
function auto_resize_output() {
|
|
// if the user has manually resized their output, we do nothing
|
|
if (document.getElementById('auto-resize-output').checked) {
|
|
// resize it automagically up to 500px
|
|
if (oelt.scrollHeight < MAX_OELT_HEIGHT) {
|
|
oelt.style.height = String(oelt.scrollHeight) + 'px';
|
|
}
|
|
else {
|
|
oelt.style.height = String(MAX_OELT_HEIGHT) + 'px';
|
|
}
|
|
}
|
|
}
|
|
|
|
function auto_scroll_to_bottom() {
|
|
if (document.getElementById('auto-scroll').checked) {
|
|
// scroll to bottom
|
|
oelt.scrollTop = oelt.scrollHeight;
|
|
}
|
|
}
|
|
|
|
function on_server_return(x) {
|
|
console.log('on_server_return:', x);
|
|
}
|
|
|
|
function on_some_bullshit(x) {
|
|
console.log('on_some_bullshit:', x);
|
|
}
|
|
|
|
function fetch_wfcin(user_line) {
|
|
let req_body_obj = {wfcin: user_line};
|
|
// let req_body_str = JSON.stringify(req_body_obj, undefined, 4);
|
|
let req_body_str = JSON.stringify(req_body_obj);
|
|
|
|
let req_options = {method: 'POST',
|
|
headers: {'content-type': 'application/json'},
|
|
body: req_body_str};
|
|
|
|
let response_promise = fetch('/wfcin', req_options);
|
|
|
|
response_promise.then(on_server_return, on_some_bullshit);
|
|
|
|
// this is a promise for a response
|
|
//console.log(response_promise);
|
|
}
|
|
|
|
// when user hits any key
|
|
function on_input_key(evt) {
|
|
if (evt.key === 'Enter') {
|
|
// don't do default thing
|
|
evt.preventDefault();
|
|
// grab contents
|
|
let contents = ielt.value;
|
|
// if contents are nonempty
|
|
let nonempty_contents = contents.trim().length > 0;
|
|
if (nonempty_contents) {
|
|
// put in output
|
|
// if it's nonempty add a newline
|
|
if (oelt.value.length > 0) {
|
|
oelt.value += '\n';
|
|
}
|
|
oelt.value += '> ' + contents;
|
|
oelt.hidden = false;
|
|
|
|
// query backend for result
|
|
fetch_wfcin(contents.trim());
|
|
|
|
// clear input
|
|
ielt.value = '';
|
|
|
|
// auto-resize
|
|
auto_resize_output();
|
|
auto_scroll_to_bottom();
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function main() {
|
|
ielt.addEventListener('keydown', on_input_key);
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|