2016-09-29 15:31:59 +00:00
|
|
|
// global vars
|
|
|
|
var editor; // code mirror instance
|
|
|
|
var incompleteMark;
|
|
|
|
var focused = false;
|
|
|
|
let invalids = [];
|
|
|
|
|
|
|
|
// fetch file and setup
|
2016-09-30 23:48:42 +00:00
|
|
|
let hash = window.location.hash.substring(1);
|
|
|
|
let hashBits = hash.split("/");
|
|
|
|
let repo = hashBits.slice(0, 3).join("/");
|
|
|
|
let filePath = hashBits.slice(3, hashBits.length).join("/");
|
2016-09-29 15:31:59 +00:00
|
|
|
$.get({
|
2016-09-30 23:48:42 +00:00
|
|
|
url: `https://raw.githubusercontent.com/${repo}/${filePath}`,
|
2016-09-29 15:43:31 +00:00
|
|
|
success: (code) => {
|
2016-09-30 23:48:42 +00:00
|
|
|
let parts = filePath.split(".");
|
2016-09-29 15:31:59 +00:00
|
|
|
let fileExtension = parts[parts.length - 1];
|
2016-09-30 23:14:03 +00:00
|
|
|
let lang = getLanguageByExtension(fileExtension);
|
2016-09-29 15:43:31 +00:00
|
|
|
$.get({
|
2016-10-01 14:16:34 +00:00
|
|
|
url: `https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file}/${lang.file}.min.js`,
|
2016-09-29 15:43:31 +00:00
|
|
|
success: (data) => {
|
|
|
|
eval(data);
|
2016-09-30 23:14:03 +00:00
|
|
|
setup(code, lang.mime);
|
2016-09-29 15:43:31 +00:00
|
|
|
}
|
|
|
|
});
|
2016-09-29 01:20:57 +00:00
|
|
|
}
|
2016-09-28 22:33:02 +00:00
|
|
|
});
|
|
|
|
|
2016-09-29 15:31:59 +00:00
|
|
|
// setup
|
2016-09-30 23:14:03 +00:00
|
|
|
function setup(data, mime) {
|
2016-09-29 16:24:15 +00:00
|
|
|
let el = document.getElementById("editor");
|
|
|
|
el.value = data;
|
|
|
|
editor = CodeMirror.fromTextArea(el, {
|
2016-09-30 23:14:03 +00:00
|
|
|
mode: mime,
|
2016-09-29 15:31:59 +00:00
|
|
|
readOnly: true,
|
|
|
|
autofocus: true,
|
|
|
|
extraKeys: {
|
|
|
|
Up: () => {},
|
|
|
|
Down: () => {},
|
|
|
|
Left: () => {},
|
|
|
|
Right: () => {}
|
|
|
|
}
|
|
|
|
});
|
2016-09-28 22:33:02 +00:00
|
|
|
|
2016-09-29 16:24:15 +00:00
|
|
|
editor.setSize("100%", "100%");
|
|
|
|
|
2016-10-01 01:32:23 +00:00
|
|
|
load()
|
|
|
|
.then(save)
|
|
|
|
.then(() => {
|
2016-09-30 23:48:42 +00:00
|
|
|
incompleteMark = editor.doc.markText(editor.getCursor(), getEndPos(), {
|
|
|
|
className: "incomplete"
|
|
|
|
});
|
2016-09-29 15:31:59 +00:00
|
|
|
|
2016-09-30 23:48:42 +00:00
|
|
|
focused = true;
|
2016-09-28 22:33:02 +00:00
|
|
|
|
2016-10-01 01:40:44 +00:00
|
|
|
editor.on("focus", handleFocus);
|
|
|
|
editor.on("blur", handleBlur);
|
|
|
|
editor.on("mousedown", handleMouseDown);
|
2016-09-28 22:33:02 +00:00
|
|
|
|
2016-10-01 01:40:44 +00:00
|
|
|
document.addEventListener("keypress", handleKeyPress);
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
2016-09-28 22:33:02 +00:00
|
|
|
|
2016-10-01 01:40:44 +00:00
|
|
|
})
|
|
|
|
.catch((e) => {
|
|
|
|
throw e;
|
|
|
|
});
|
|
|
|
}
|
2016-09-28 22:33:02 +00:00
|
|
|
|
2016-10-01 01:40:44 +00:00
|
|
|
function handleFocus() {
|
|
|
|
focused = true;
|
|
|
|
}
|
2016-09-30 23:48:42 +00:00
|
|
|
|
2016-10-01 01:40:44 +00:00
|
|
|
function handleBlur() {
|
|
|
|
focused = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleMouseDown(instance, event) {
|
|
|
|
event.preventDefault();
|
|
|
|
editor.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleKeyPress(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) {
|
|
|
|
markInvalid(pos);
|
|
|
|
}
|
|
|
|
editor.setCursor({ line: pos.line, ch: pos.ch + 1 });
|
|
|
|
updateIncompleteMark();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleKeyDown(event) {
|
|
|
|
if (focused) {
|
|
|
|
if (event.keyCode == 8) { // delete
|
|
|
|
event.preventDefault();
|
|
|
|
handleDelete(event);
|
|
|
|
} else if (event.keyCode == 13) { // enter
|
|
|
|
event.preventDefault();
|
|
|
|
handleEnter(event);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleDelete(event) {
|
|
|
|
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();
|
|
|
|
}
|
2016-09-30 23:48:42 +00:00
|
|
|
|
2016-10-01 01:40:44 +00:00
|
|
|
function handleEnter(event) {
|
|
|
|
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) {
|
|
|
|
var newLine = pos.line;
|
|
|
|
while (true) {
|
|
|
|
newLine++;
|
|
|
|
if (newLine >= editor.doc.size) { // go to end of last line
|
|
|
|
editor.setCursor(getEndPos());
|
|
|
|
break;
|
|
|
|
} else { // try go to next line
|
|
|
|
let newText = editor.doc.getLine(newLine);
|
|
|
|
let newTrimmed = newText.trim();
|
|
|
|
if (newTrimmed.length != 0) { // line is not empty (whitespace-only)
|
|
|
|
let ch = newText.indexOf(newTrimmed);
|
|
|
|
editor.setCursor({ line: newLine, ch: ch });
|
|
|
|
break;
|
2016-09-29 15:31:59 +00:00
|
|
|
}
|
2016-09-28 22:33:02 +00:00
|
|
|
}
|
2016-10-01 01:40:44 +00:00
|
|
|
}
|
|
|
|
updateIncompleteMark();
|
|
|
|
}
|
|
|
|
}
|
2016-09-29 15:31:59 +00:00
|
|
|
}
|
2016-09-28 22:33:02 +00:00
|
|
|
|
|
|
|
function moveToEndOfPreviousLine() {
|
|
|
|
let pos = editor.getCursor();
|
|
|
|
if (pos.line > 0) {
|
2016-09-30 13:08:07 +00:00
|
|
|
var newLine = pos.line;
|
|
|
|
while (true) {
|
|
|
|
newLine--;
|
|
|
|
let text = editor.doc.getLine(newLine);
|
|
|
|
let trimmed = text.trim();
|
|
|
|
if (trimmed.length != 0) {
|
|
|
|
let ch = text.indexOf(trimmed) + trimmed.length;
|
|
|
|
editor.setCursor({ line: newLine, ch: ch });
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2016-09-28 22:33:02 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function isComplete() {
|
2016-09-30 13:08:07 +00:00
|
|
|
if (!areAllNextLinesEmpty()) {
|
|
|
|
if (incompleteMark.lines.length != 0) {
|
|
|
|
return false;
|
|
|
|
}
|
2016-09-28 22:52:48 +00:00
|
|
|
}
|
|
|
|
|
2016-09-28 22:33:02 +00:00
|
|
|
for (var i = 0; i < invalids.length; i++) {
|
|
|
|
let arr = invalids[i];
|
2016-09-29 15:34:26 +00:00
|
|
|
if (arr) {
|
|
|
|
for (var j = 0; j < arr.length; j++) {
|
|
|
|
if (arr[j]) {
|
|
|
|
return false;
|
|
|
|
}
|
2016-09-28 22:33:02 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2016-09-30 13:08:07 +00:00
|
|
|
function areAllNextLinesEmpty() {
|
|
|
|
let pos = editor.getCursor();
|
|
|
|
for (var i = pos.line + 1; i < editor.doc.size; i++) {
|
|
|
|
let line = editor.doc.getLine(i);
|
|
|
|
if (line.trim().length != 0) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2016-09-28 22:33:02 +00:00
|
|
|
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"
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-10-01 01:32:23 +00:00
|
|
|
function markInvalid(pos) {
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
|
|
function load() {
|
|
|
|
return localforage.getItem(repo)
|
|
|
|
.then((val) => {
|
|
|
|
loadInvalids(val[filePath]);
|
|
|
|
loadCursor(val[filePath]);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function save() {
|
|
|
|
let obj = {};
|
|
|
|
saveInvalids(obj);
|
|
|
|
saveCursor(obj);
|
2016-09-30 23:48:42 +00:00
|
|
|
localforage.getItem(repo)
|
|
|
|
.then((val) => {
|
|
|
|
if (!val) val = {};
|
2016-10-01 01:32:23 +00:00
|
|
|
val[filePath] = obj;
|
2016-09-30 23:48:42 +00:00
|
|
|
localforage.setItem(repo, val)
|
|
|
|
.catch((e) => {
|
|
|
|
throw e;
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch((e) => {
|
|
|
|
throw e;
|
|
|
|
});
|
2016-10-01 01:32:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function loadInvalids(val) {
|
2016-10-01 14:16:08 +00:00
|
|
|
if (val && val.invalids) {
|
2016-10-01 01:32:23 +00:00
|
|
|
editor.operation(() => { // buffer all DOM changes together b/c performance
|
2016-10-01 14:16:08 +00:00
|
|
|
val.invalids.forEach(markInvalid);
|
2016-10-01 01:32:23 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function saveInvalids(obj) {
|
|
|
|
let serialized = [];
|
|
|
|
for (var i = 0; i < invalids.length; i++) {
|
|
|
|
let inner = invalids[i];
|
|
|
|
if (!inner) continue;
|
|
|
|
|
|
|
|
for (var j = 0; j < inner.length; j++) {
|
|
|
|
let mark = inner[j];
|
|
|
|
if (!mark) continue;
|
|
|
|
|
|
|
|
let pos = mark.find();
|
|
|
|
if (pos) {
|
|
|
|
serialized.push(pos.from);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
obj.invalids = serialized;
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadCursor(val) {
|
|
|
|
editor.setCursor(val && val.cursor ? val.cursor : { line: 0, ch: 0 });
|
|
|
|
}
|
|
|
|
|
|
|
|
function saveCursor(obj) {
|
|
|
|
obj.cursor = editor.getCursor();
|
2016-09-30 23:48:42 +00:00
|
|
|
}
|
|
|
|
|
2016-09-28 22:49:24 +00:00
|
|
|
String.prototype.hasOnlyWhiteSpaceBeforeIndex = function(index) {
|
|
|
|
return this.substring(index) == this.trim();
|
2016-09-28 22:33:02 +00:00
|
|
|
};
|