From 07d8adaeaeacfb0e45fdbb7dd27ceb3d977bcc94 Mon Sep 17 00:00:00 2001 From: Shadowfacts Date: Thu, 29 Sep 2016 21:31:36 -0400 Subject: [PATCH] First pass at switching to ace --- index.html | 25 ++++--- main.css | 14 ---- main.js | 203 ++++++++--------------------------------------------- 3 files changed, 45 insertions(+), 197 deletions(-) diff --git a/index.html b/index.html index 3cb925f..95457bd 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,24 @@ - - typing4 - - + + type + - - - - +
+ + + - \ No newline at end of file + diff --git a/main.css b/main.css index b19ea89..e69de29 100644 --- a/main.css +++ b/main.css @@ -1,14 +0,0 @@ -.invalid { - background-color: red; - color: white !important; -} - -.incomplete { - color: gray !important; -} - -#editor { - display: none; - width: 100%; - height: 100%; -} diff --git a/main.js b/main.js index 29d92de..d99c05a 100644 --- a/main.js +++ b/main.js @@ -1,181 +1,36 @@ -// global vars -var editor; // code mirror instance -var incompleteMark; -var focused = false; -let invalids = []; +var editor = ace.edit("editor"); +editor.setReadOnly(true); +editor.setTheme("ace/theme/monokai"); +editor.getSession().setMode("ace/mode/javascript"); +editor.getSession().setValue("function foo(items) {\n\tvar x = \"All this is syntax highlighted\";\n\treturn x;\n}"); -let extensions = { - js: "javascript", - kt: "kotlin" -}; +// disable all keybindings +editor.commands.commandKeyBinding = {}; -// fetch file and setup -let file = window.location.hash.substring(1); -$.get({ - url: `https://raw.githubusercontent.com/${file}`, - success: (code) => { - let parts = file.split("."); - let fileExtension = parts[parts.length - 1]; - let mode = extensions.hasOwnProperty(fileExtension) ? extensions[fileExtension] : fileExtension; - $.get({ - url: `/codemirror/mode/${mode}/${mode}.js`, - success: (data) => { - eval(data); - setup(code, mode); - } - }); +// prevent mouse interaction +editor.on("mousedown", (event) => { + event.preventDefault(); +}); + +// handle text typing +editor.on("keydown", (event) => { + console.log(`Key pressed (focused: ${editor.isFocused()}, char: ${String.fromCharCode(event.charCode)}`); + if (editor.isFocused()) { + event.preventDefault(); + + let pos = editor.getCursorPosition(); + 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) { return this.substring(index) == this.trim(); -}; +}