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> <form>
<div> <div>
<label>Script:</label> <label class="header-center"><b>Input</b></label>
<br> <br>
<textarea rows="10" cols="70" id="script"></textarea> <textarea rows="10" cols="70" id="script"></textarea>
<br><br> <div class="button-group">
<button onclick="clearInput(); return false;"> <button class="demo-button negative" style="margin: 8px 8px" onclick="clearInput(); return false;">
Clear Input Clear Input
</button> </button>
<button onclick="executeScript(); return false;"> <button class="demo-button positive" onclick="executeScript(); return false;">
Run Run
</button> </button>
</div>
</div> </div>
<br><br>
<div> <div>
<label>Output:</label> <!-- centered header saying Output -->
<label class="header-center"><b>Output</b></label>
<br> <br>
<textarea readonly rows="10" cols="70" id="output"></textarea> <textarea readonly rows="10" cols="70" id="output"></textarea>
<br><br> <div class="button-group">
<button onclick="clearOutput(); return false;"> <button class="demo-button negative" onclick="clearOutput(); return false;">
Clear Output Clear Output
</button> </button>
</div>
</div> </div>
</form> </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) --> <!-- Luau WASM (async fetch) -->
<script async src="https://github.com/Roblox/luau/releases/download/0.505/Luau.Web.js"></script> <script async src="https://github.com/Roblox/luau/releases/download/0.505/Luau.Web.js"></script>
<!-- CodeMirror --> <!-- CodeMirror -->
@ -30,7 +66,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
<!-- Luau Parser for CodeMirror --> <!-- Luau Parser for CodeMirror -->
<script src="assets/js/luau_mode.js"></script> <script src="assets/js/luau_mode.js"></script>
<!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) --> <!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) -->
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("script"), { var editor = CodeMirror.fromTextArea(document.getElementById("script"), {
@ -44,6 +79,9 @@
}); });
editor.setValue("print(\"Hello World!\")\n"); editor.setValue("print(\"Hello World!\")\n");
editor.addKeyMap({ editor.addKeyMap({
"Ctrl-Enter": function(cm) {
executeScript();
},
"Shift-Tab": function (cm) { "Shift-Tab": function (cm) {
// dedent functionality // dedent functionality
cm.execCommand("indentLess"); cm.execCommand("indentLess");
@ -52,7 +90,10 @@
// Misc Functions // Misc Functions
function output(text) { 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 = { var Module = {
@ -60,7 +101,7 @@
}; };
function clearInput() { function clearInput() {
document.getElementById("script").value = ""; editor.setValue("");
} }
function clearOutput() { function clearOutput() {