convert more note details to new style

This commit is contained in:
zadam
2019-05-04 00:16:41 +02:00
parent 39093cbc4c
commit ff41904d72
8 changed files with 687 additions and 645 deletions

View File

@@ -5,109 +5,112 @@ import server from "./server.js";
import noteDetailService from "./note_detail.js";
import utils from "./utils.js";
let codeEditor = null;
class NoteDetailCode {
const $component = $('#note-detail-code');
const $executeScriptButton = $("#execute-script-button");
/**
* @param {NoteContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.codeEditor = null;
this.$component = ctx.$noteTabContent.find('.note-detail-code');
this.$executeScriptButton = ctx.$noteTabContent.find(".execute-script-button");
async function show() {
await libraryLoader.requireLibrary(libraryLoader.CODE_MIRROR);
utils.bindShortcut("ctrl+return", this.executeCurrentNote);
if (!codeEditor) {
CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
CodeMirror.keyMap.default["Tab"] = "indentMore";
// these conflict with backward/forward navigation shortcuts
delete CodeMirror.keyMap.default["Alt-Left"];
delete CodeMirror.keyMap.default["Alt-Right"];
CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
codeEditor = CodeMirror($component[0], {
value: "",
viewportMargin: Infinity,
indentUnit: 4,
matchBrackets: true,
matchTags: {bothTags: true},
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
lint: true,
gutters: ["CodeMirror-lint-markers"],
lineNumbers: true,
tabindex: 100,
// we linewrap partly also because without it horizontal scrollbar displays only when you scroll
// all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
lineWrapping: true
});
onNoteChange(noteDetailService.noteChanged);
this.$executeScriptButton.click(this.executeCurrentNote);
}
$component.show();
async show() {
await libraryLoader.requireLibrary(libraryLoader.CODE_MIRROR);
const activeNote = noteDetailService.getActiveNote();
if (!this.codeEditor) {
CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
CodeMirror.keyMap.default["Tab"] = "indentMore";
// this needs to happen after the element is shown, otherwise the editor won't be refreshed
// CodeMirror breaks pretty badly on null so even though it shouldn't happen (guarded by consistency check)
// we provide fallback
codeEditor.setValue(activeNote.content || "");
// these conflict with backward/forward navigation shortcuts
delete CodeMirror.keyMap.default["Alt-Left"];
delete CodeMirror.keyMap.default["Alt-Right"];
const info = CodeMirror.findModeByMIME(activeNote.mime);
CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
if (info) {
codeEditor.setOption("mode", info.mime);
CodeMirror.autoLoadMode(codeEditor, info.mode);
}
this.codeEditor = CodeMirror(this.$component[0], {
value: "",
viewportMargin: Infinity,
indentUnit: 4,
matchBrackets: true,
matchTags: {bothTags: true},
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
lint: true,
gutters: ["CodeMirror-lint-markers"],
lineNumbers: true,
tabindex: 100,
// we linewrap partly also because without it horizontal scrollbar displays only when you scroll
// all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
lineWrapping: true
});
codeEditor.refresh();
}
function getContent() {
return codeEditor.getValue();
}
function focus() {
codeEditor.focus();
}
async function executeCurrentNote() {
// ctrl+enter is also used elsewhere so make sure we're running only when appropriate
if (noteDetailService.getActiveNoteType() !== 'code') {
return;
}
// make sure note is saved so we load latest changes
await noteDetailService.saveNotesIfChanged();
const activeNote = noteDetailService.getActiveNote();
if (activeNote.mime.endsWith("env=frontend")) {
await bundleService.getAndExecuteBundle(noteDetailService.getActiveNoteId());
}
if (activeNote.mime.endsWith("env=backend")) {
await server.post('script/run/' + noteDetailService.getActiveNoteId());
}
infoService.showMessage("Note executed");
}
function onNoteChange(func) {
codeEditor.on('change', func);
}
utils.bindShortcut("ctrl+return", executeCurrentNote);
$executeScriptButton.click(executeCurrentNote);
export default {
show,
getContent,
focus,
onNoteChange,
cleanup: () => {
if (codeEditor) {
codeEditor.setValue('');
this.onNoteChange(noteDetailService.noteChanged);
}
},
scrollToTop: () => $component.scrollTop(0)
this.$component.show();
// this needs to happen after the element is shown, otherwise the editor won't be refreshed
// CodeMirror breaks pretty badly on null so even though it shouldn't happen (guarded by consistency check)
// we provide fallback
this.codeEditor.setValue(this.ctx.note.content || "");
const info = CodeMirror.findModeByMIME(this.ctx.note.mime);
if (info) {
this.codeEditor.setOption("mode", info.mime);
CodeMirror.autoLoadMode(this.codeEditor, info.mode);
}
this.codeEditor.refresh();
}
getContent() {
return this.codeEditor.getValue();
}
focus() {
this.codeEditor.focus();
}
async executeCurrentNote() {
// ctrl+enter is also used elsewhere so make sure we're running only when appropriate
if (this.ctx.note.type !== 'code') {
return;
}
// make sure note is saved so we load latest changes
await noteDetailService.saveNotesIfChanged();
if (this.ctx.note.mime.endsWith("env=frontend")) {
await bundleService.getAndExecuteBundle(this.ctx.note.noteId);
}
if (this.ctx.note.mime.endsWith("env=backend")) {
await server.post('script/run/' + this.ctx.note.noteId);
}
infoService.showMessage("Note executed");
}
onNoteChange(func) {
this.codeEditor.on('change', func);
}
cleanup() {
if (this.codeEditor) {
this.codeEditor.setValue('');
}
}
scrollToTop() {
this.$component.scrollTop(0);
}
}
export default NoteDetailCode;