mirror of https://github.com/shadowfacts/type.git
First pass at switching to ace
This commit is contained in:
parent
8ad95c907a
commit
07d8adaeae
21
index.html
21
index.html
|
@ -1,17 +1,24 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>typing4</title>
|
<title>type</title>
|
||||||
<link rel="stylesheet" href="codemirror/codemirror.css">
|
<style type="text/css" media="screen">
|
||||||
<link rel="stylesheet" href="main.css">
|
#editor {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<textarea id="editor"></textarea>
|
<div id="editor"></div>
|
||||||
|
|
||||||
<script src="codemirror/codemirror.js"></script>
|
<script src="https://cdn.jsdelivr.net/ace/1.2.4/min/ace.js"></script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/ace/1.2.4/min/theme-monokai.js"></script>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
14
main.css
14
main.css
|
@ -1,14 +0,0 @@
|
||||||
.invalid {
|
|
||||||
background-color: red;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.incomplete {
|
|
||||||
color: gray !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editor {
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
201
main.js
201
main.js
|
@ -1,181 +1,36 @@
|
||||||
// global vars
|
var editor = ace.edit("editor");
|
||||||
var editor; // code mirror instance
|
editor.setReadOnly(true);
|
||||||
var incompleteMark;
|
editor.setTheme("ace/theme/monokai");
|
||||||
var focused = false;
|
editor.getSession().setMode("ace/mode/javascript");
|
||||||
let invalids = [];
|
editor.getSession().setValue("function foo(items) {\n\tvar x = \"All this is syntax highlighted\";\n\treturn x;\n}");
|
||||||
|
|
||||||
let extensions = {
|
// disable all keybindings
|
||||||
js: "javascript",
|
editor.commands.commandKeyBinding = {};
|
||||||
kt: "kotlin"
|
|
||||||
};
|
|
||||||
|
|
||||||
// fetch file and setup
|
// prevent mouse interaction
|
||||||
let file = window.location.hash.substring(1);
|
editor.on("mousedown", (event) => {
|
||||||
$.get({
|
event.preventDefault();
|
||||||
url: `https://raw.githubusercontent.com/${file}`,
|
});
|
||||||
success: (code) => {
|
|
||||||
let parts = file.split(".");
|
// handle text typing
|
||||||
let fileExtension = parts[parts.length - 1];
|
editor.on("keydown", (event) => {
|
||||||
let mode = extensions.hasOwnProperty(fileExtension) ? extensions[fileExtension] : fileExtension;
|
console.log(`Key pressed (focused: ${editor.isFocused()}, char: ${String.fromCharCode(event.charCode)}`);
|
||||||
$.get({
|
if (editor.isFocused()) {
|
||||||
url: `/codemirror/mode/${mode}/${mode}.js`,
|
event.preventDefault();
|
||||||
success: (data) => {
|
|
||||||
eval(data);
|
let pos = editor.getCursorPosition();
|
||||||
setup(code, mode);
|
let line = editor.getLine(pos.row);
|
||||||
|
let char = line.charCodeAt(pos.column);
|
||||||
|
|
||||||
|
if (event.charCode != char) {
|
||||||
|
// TODO: mark as invalid
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
editor.moveCursorTo(pos.row, pos.column + 1);
|
||||||
|
// TODO: update incomplete mark
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// setup
|
|
||||||
function setup(data, mode) {
|
|
||||||
let el = document.getElementById("editor");
|
|
||||||
el.value = data;
|
|
||||||
editor = CodeMirror.fromTextArea(el, {
|
|
||||||
mode: mode,
|
|
||||||
readOnly: true,
|
|
||||||
autofocus: true,
|
|
||||||
extraKeys: {
|
|
||||||
Up: () => {},
|
|
||||||
Down: () => {},
|
|
||||||
Left: () => {},
|
|
||||||
Right: () => {}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.setSize("100%", "100%");
|
|
||||||
|
|
||||||
incompleteMark = editor.doc.markText({ line: 0, ch: 0 }, getEndPos(), {
|
|
||||||
className: "incomplete"
|
|
||||||
});
|
|
||||||
|
|
||||||
focused = true;
|
|
||||||
|
|
||||||
editor.on("focus", (instance, event) => {
|
|
||||||
focused = true;
|
|
||||||
});
|
|
||||||
editor.on("blur", (instance, event) => {
|
|
||||||
focused = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on("mousedown", (instance, event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
editor.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("keypress", (event) => {
|
|
||||||
if (focused) {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
let pos = editor.getCursor();
|
|
||||||
let line = editor.doc.getLine(pos.line);
|
|
||||||
let char = line.charCodeAt(pos.ch);
|
|
||||||
if (event.charCode != char) {
|
|
||||||
let mark = editor.doc.markText(pos, {line: pos.line, ch: pos.ch + 1}, {
|
|
||||||
className: "invalid"
|
|
||||||
});
|
|
||||||
if (!invalids[pos.line]) invalids[pos.line] = [];
|
|
||||||
invalids[pos.line][pos.ch] = mark;
|
|
||||||
}
|
|
||||||
editor.setCursor({ line: pos.line, ch: pos.ch + 1 });
|
|
||||||
updateIncompleteMark();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("keydown", (event) => {
|
|
||||||
if (focused) {
|
|
||||||
var result = false;
|
|
||||||
|
|
||||||
if (event.keyCode == 8) { // delete
|
|
||||||
result = true;
|
|
||||||
|
|
||||||
let pos = editor.getCursor();
|
|
||||||
if (pos.ch == 0) { // move up 1 line {
|
|
||||||
moveToEndOfPreviousLine();
|
|
||||||
} else { // move back 1 char
|
|
||||||
let line = editor.doc.getLine(pos.line);
|
|
||||||
if (line.hasOnlyWhiteSpaceBeforeIndex(pos.ch)) {
|
|
||||||
moveToEndOfPreviousLine();
|
|
||||||
} else {
|
|
||||||
editor.setCursor({ line: pos.line, ch: pos.ch - 1 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let newPos = editor.getCursor();
|
|
||||||
let lineInvalids = invalids[newPos.line];
|
|
||||||
if (lineInvalids) {
|
|
||||||
let mark = lineInvalids[newPos.ch];
|
|
||||||
if (mark) {
|
|
||||||
mark.clear();
|
|
||||||
lineInvalids.splice(newPos.ch, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateIncompleteMark();
|
|
||||||
} else if (event.keyCode == 13) { // enter
|
|
||||||
result = true;
|
|
||||||
|
|
||||||
let pos = editor.getCursor();
|
|
||||||
if (pos.line != editor.doc.size - 1) {
|
|
||||||
let currentLine = editor.doc.getLine(pos.line);
|
|
||||||
let trimmed = currentLine.trim();
|
|
||||||
if (editor.getCursor().ch >= currentLine.indexOf(trimmed) + trimmed.length) {
|
|
||||||
let newLine = pos.line + 1;
|
|
||||||
let text = editor.doc.getLine(newLine);
|
|
||||||
let ch = text.indexOf(text.trim());
|
|
||||||
editor.setCursor({ line: newLine, ch: ch });
|
|
||||||
updateIncompleteMark();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveToEndOfPreviousLine() {
|
|
||||||
let pos = editor.getCursor();
|
|
||||||
if (pos.line > 0) {
|
|
||||||
let newLine = pos.line - 1;
|
|
||||||
let text = editor.doc.getLine(newLine);
|
|
||||||
let trimmed = text.trim();
|
|
||||||
let ch = text.indexOf(trimmed) + trimmed.length;
|
|
||||||
editor.setCursor({ line: newLine, ch: ch });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isComplete() {
|
|
||||||
if (incompleteMark.lines.length != 0) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0; i < invalids.length; i++) {
|
|
||||||
let arr = invalids[i];
|
|
||||||
if (arr) {
|
|
||||||
for (var j = 0; j < arr.length; j++) {
|
|
||||||
if (arr[j]) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEndPos() {
|
|
||||||
return { line: editor.doc.size, ch: editor.doc.getLine(editor.doc.size - 1).length };
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateIncompleteMark() {
|
|
||||||
incompleteMark.clear();
|
|
||||||
incompleteMark = editor.doc.markText(editor.getCursor(), getEndPos(), {
|
|
||||||
className: "incomplete"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
String.prototype.hasOnlyWhiteSpaceBeforeIndex = function(index) {
|
String.prototype.hasOnlyWhiteSpaceBeforeIndex = function(index) {
|
||||||
return this.substring(index) == this.trim();
|
return this.substring(index) == this.trim();
|
||||||
};
|
}
|
||||||
|
|
Loading…
Reference in New Issue