luau-lang/luau
1
0
Fork 0
mirror of https://github.com/luau-lang/luau.git synced 2025-05-04 10:33:46 +01:00
Code Issues Projects Releases Packages Wiki Activity

add some style & ctrl-enter to execute

Browse source
This commit is contained in:
Pelanyo Kamara 2021-12-14 18:02:49 +00:00
parent 350254af2b
commit 624cd2d0ee
No known key found for this signature in database
GPG key ID: 1C8B9C40A2527035
1 changed files with 58 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
docs/_includes/repl.html
View file

@ -1,28 +1,64 @@
<form>
<div>
<label>Script:</label>
<label class="header-center"><b>Input</b></label>
<br>
<textarea rows="10" cols="70" id="script"></textarea>
<br><br>
<button onclick="clearInput(); return false;">
Clear Input
</button>
<button onclick="executeScript(); return false;">
Run
</button>
<div class="button-group">
<button class="demo-button negative" style="margin: 8px 8px" onclick="clearInput(); return false;">
Clear Input
</button>
<button class="demo-button positive" onclick="executeScript(); return false;">
Run
</button>
</div>
</div>
<br><br>
<div>
<label>Output:</label>
<!-- centered header saying Output -->
<label class="header-center"><b>Output</b></label>
<br>
<textarea readonly rows="10" cols="70" id="output"></textarea>
<br><br>
<button onclick="clearOutput(); return false;">
Clear Output
</button>
<div class="button-group">
<button class="demo-button negative" onclick="clearOutput(); return false;">
Clear Output
</button>
</div>
</div>
</form>
<!-- Styles for editor -->
<style>
.button-group {
display: flex;
justify-content: right;
}
.header-center {
text-align: center;
}
.demo-button {
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 30%;
display: inline;
}
.demo-button-rightmost {
margin: inherit 2px;
}
.positive {
background-color: #4CAF50;
}
.negative {
background-color: #f44336;
}
</style>
<!-- Luau WASM (async fetch) -->
<script async src="https://github.com/Roblox/luau/releases/download/0.505/Luau.Web.js"></script>
<!-- CodeMirror -->
@ -30,7 +66,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
<!-- Luau Parser for CodeMirror -->
<script src="assets/js/luau_mode.js"></script>
<!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) -->
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("script"), {
@ -44,6 +79,9 @@
});
editor.setValue("print(\"Hello World!\")\n");
editor.addKeyMap({
"Ctrl-Enter": function(cm) {
executeScript();
},
"Shift-Tab": function (cm) {
// dedent functionality
cm.execCommand("indentLess");
@ -52,7 +90,10 @@
// Misc Functions
function output(text) {
document.getElementById("output").value += "[" + new Date().toLocaleTimeString() + "] " + text.replace('stdin:', '') + "\n";
output_box = document.getElementById("output");
output_box.value += "[" + new Date().toLocaleTimeString() + "] " + text.replace('stdin:', '') + "\n";
// scroll to bottom
output_box.scrollTop = output_box.scrollHeight;
}
var Module = {
@ -60,7 +101,7 @@
};
function clearInput() {
document.getElementById("script").value = "";
editor.setValue("");
}
function clearOutput() {