gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

code and file note types now sort of work now as well

Browse Source
This commit is contained in:
zadam 2020-01-19 09:02:18 +01:00
parent 4fdea77c57
commit e355b449c4
6 changed files with 122 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/public/javascripts/services/attributes.js
View File

@ -21,7 +21,12 @@ class Attributes extends Component {
} }
reloadAttributes() { reloadAttributes() {
this.attributePromise = server.get(`notes/${this.tabContext.note.noteId}/attributes`); if (this.tabContext.note) {
this.attributePromise = server.get(`notes/${this.tabContext.note.noteId}/attributes`);
}
else {
this.invalidateAttributes();
}
} }
async refreshAttributes() { async refreshAttributes() {

2
src/public/javascripts/widgets/basic_widget.js
View File

@ -14,7 +14,7 @@ class BasicWidget extends Component {
/** /**
* for overriding * for overriding
*/ */
async doRender() {} doRender() {}
toggle(show) { toggle(show) {
this.$widget.toggle(show); this.$widget.toggle(show);

99
src/public/javascripts/widgets/detail/note_detail_code.js
View File

@ -4,69 +4,68 @@ import toastService from "../../services/toast.js";
import server from "../../services/server.js"; import server from "../../services/server.js";
import noteDetailService from "../../services/note_detail.js"; import noteDetailService from "../../services/note_detail.js";
import keyboardActionService from "../../services/keyboard_actions.js"; import keyboardActionService from "../../services/keyboard_actions.js";
import TabAwareWidget from "../tab_aware_widget.js";
const TPL = ` const TPL = `
<div class="note-detail-code note-detail-component"> <div class="note-detail-code note-detail-component">
<div class="note-detail-code-editor"></div> <div class="note-detail-code-editor"></div>
</div>`; </div>`;
class NoteDetailCode { class NoteDetailCode extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$editor = this.$widget.find('.note-detail-code-editor');
this.$executeScriptButton = this.$widget.find(".execute-script-button");
/** keyboardActionService.setElementActionHandler(this.$widget, 'RunActiveNote', () => this.executeCurrentNote());
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
this.codeEditor = null;
this.$component = ctx.$tabContent.find('.note-detail-code');
this.$editorEl = this.$component.find('.note-detail-code-editor');
this.$executeScriptButton = ctx.$tabContent.find(".execute-script-button");
keyboardActionService.setElementActionHandler(ctx.$tabContent, 'RunActiveNote', () => this.executeCurrentNote());
this.$executeScriptButton.on('click', () => this.executeCurrentNote()); this.$executeScriptButton.on('click', () => this.executeCurrentNote());
this.initialized = this.initEditor();
return this.$widget;
} }
async render() { async initEditor() {
await libraryLoader.requireLibrary(libraryLoader.CODE_MIRROR); await libraryLoader.requireLibrary(libraryLoader.CODE_MIRROR);
CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
CodeMirror.keyMap.default["Tab"] = "indentMore";
if (!this.codeEditor) { // these conflict with backward/forward navigation shortcuts
CodeMirror.keyMap.default["Shift-Tab"] = "indentLess"; delete CodeMirror.keyMap.default["Alt-Left"];
CodeMirror.keyMap.default["Tab"] = "indentMore"; delete CodeMirror.keyMap.default["Alt-Right"];
// these conflict with backward/forward navigation shortcuts CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
delete CodeMirror.keyMap.default["Alt-Left"];
delete CodeMirror.keyMap.default["Alt-Right"];
CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js'; this.codeEditor = CodeMirror(this.$editor[0], {
value: "",
this.codeEditor = CodeMirror(this.$editorEl[0], { viewportMargin: Infinity,
value: "", indentUnit: 4,
viewportMargin: Infinity, matchBrackets: true,
indentUnit: 4, matchTags: {bothTags: true},
matchBrackets: true, highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
matchTags: {bothTags: true}, lint: true,
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false}, gutters: ["CodeMirror-lint-markers"],
lint: true, lineNumbers: true,
gutters: ["CodeMirror-lint-markers"], tabindex: 100,
lineNumbers: true, // we linewrap partly also because without it horizontal scrollbar displays only when you scroll
tabindex: 100, // all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
// we linewrap partly also because without it horizontal scrollbar displays only when you scroll lineWrapping: true,
// all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem dragDrop: false // with true the editor inlines dropped files which is not what we expect
lineWrapping: true, });
dragDrop: false // with true the editor inlines dropped files which is not what we expect
});
this.onNoteChange(() => this.ctx.noteChanged());
}
//this.onNoteChange(() => this.tabContext.noteChanged());
}
refresh() {
// lazy loading above can take time and tab might have been already switched to another note // lazy loading above can take time and tab might have been already switched to another note
if (this.ctx.note && this.ctx.note.type === 'code') { if (this.tabContext.note && this.tabContext.note.type === 'code') {
// CodeMirror breaks pretty badly on null so even though it shouldn't happen (guarded by consistency check) // CodeMirror breaks pretty badly on null so even though it shouldn't happen (guarded by consistency check)
// we provide fallback // we provide fallback
this.codeEditor.setValue(this.ctx.note.content || ""); this.codeEditor.setValue(this.tabContext.note.content || "");
const info = CodeMirror.findModeByMIME(this.ctx.note.mime); const info = CodeMirror.findModeByMIME(this.tabContext.note.mime);
if (info) { if (info) {
this.codeEditor.setOption("mode", info.mime); this.codeEditor.setOption("mode", info.mime);
@ -78,7 +77,7 @@ class NoteDetailCode {
} }
show() { show() {
this.$component.show(); this.$widget.show();
if (this.codeEditor) { // show can be called before render if (this.codeEditor) { // show can be called before render
this.codeEditor.refresh(); this.codeEditor.refresh();
@ -95,19 +94,19 @@ class NoteDetailCode {
async executeCurrentNote() { async executeCurrentNote() {
// ctrl+enter is also used elsewhere so make sure we're running only when appropriate // ctrl+enter is also used elsewhere so make sure we're running only when appropriate
if (this.ctx.note.type !== 'code') { if (this.tabContext.note.type !== 'code') {
return; return;
} }
// make sure note is saved so we load latest changes // make sure note is saved so we load latest changes
await noteDetailService.saveNotesIfChanged(); await noteDetailService.saveNotesIfChanged();
if (this.ctx.note.mime.endsWith("env=frontend")) { if (this.tabContext.note.mime.endsWith("env=frontend")) {
await bundleService.getAndExecuteBundle(this.ctx.note.noteId); await bundleService.getAndExecuteBundle(this.tabContext.note.noteId);
} }
if (this.ctx.note.mime.endsWith("env=backend")) { if (this.tabContext.note.mime.endsWith("env=backend")) {
await server.post('script/run/' + this.ctx.note.noteId); await server.post('script/run/' + this.tabContext.note.noteId);
} }
toastService.showMessage("Note executed"); toastService.showMessage("Note executed");
@ -124,7 +123,7 @@ class NoteDetailCode {
} }
scrollToTop() { scrollToTop() {
this.$component.scrollTop(0); this.$widget.scrollTop(0);
} }
} }

94
src/public/javascripts/widgets/detail/note_detail_file.js
View File

@ -2,24 +2,60 @@ import utils from "../../services/utils.js";
import server from "../../services/server.js"; import server from "../../services/server.js";
import toastService from "../../services/toast.js"; import toastService from "../../services/toast.js";
import noteDetailService from "../../services/note_detail.js"; import noteDetailService from "../../services/note_detail.js";
import TabAwareWidget from "../tab_aware_widget.js";
class NoteDetailFile { const TPL = `
/** <div class="note-detail-file note-detail-component">
* @param {TabContext} ctx <table class="file-table">
*/ <tr>
constructor(ctx) { <th>Note ID:</th>
this.ctx = ctx; <td class="file-note-id"></td>
this.$component = ctx.$tabContent.find('.note-detail-file'); </tr>
this.$fileNoteId = ctx.$tabContent.find(".file-note-id"); <tr>
this.$fileName = ctx.$tabContent.find(".file-filename"); <th>Original file name:</th>
this.$fileType = ctx.$tabContent.find(".file-filetype"); <td class="file-filename"></td>
this.$fileSize = ctx.$tabContent.find(".file-filesize"); </tr>
this.$previewRow = ctx.$tabContent.find(".file-preview-row"); <tr>
this.$previewContent = ctx.$tabContent.find(".file-preview-content"); <th>File type:</th>
this.$downloadButton = ctx.$tabContent.find(".file-download"); <td class="file-filetype"></td>
this.$openButton = ctx.$tabContent.find(".file-open"); </tr>
this.$uploadNewRevisionButton = ctx.$tabContent.find(".file-upload-new-revision"); <tr>
this.$uploadNewRevisionInput = ctx.$tabContent.find(".file-upload-new-revision-input"); <th>File size:</th>
<td class="file-filesize"></td>
</tr>
<tr class="file-preview-row">
<th>Preview:</th>
<td>
<pre class="file-preview-content"></pre>
</td>
</tr>
<tr>
<td colspan="2">
<button class="file-download btn btn-sm btn-primary" type="button">Download</button>
&nbsp;
<button class="file-open btn btn-sm btn-primary" type="button">Open</button>
&nbsp;
<button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
</td>
</tr>
</table>
<input type="file" class="file-upload-new-revision-input" style="display: none">
</div>`;
class NoteDetailFile extends TabAwareWidget{
doRender() {
this.$widget = $(TPL);
this.$fileNoteId = this.$widget.find(".file-note-id");
this.$fileName = this.$widget.find(".file-filename");
this.$fileType = this.$widget.find(".file-filetype");
this.$fileSize = this.$widget.find(".file-filesize");
this.$previewRow = this.$widget.find(".file-preview-row");
this.$previewContent = this.$widget.find(".file-preview-content");
this.$downloadButton = this.$widget.find(".file-download");
this.$openButton = this.$widget.find(".file-open");
this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision");
this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input");
this.$downloadButton.on('click', () => utils.download(this.getFileUrl())); this.$downloadButton.on('click', () => utils.download(this.getFileUrl()));
@ -46,7 +82,7 @@ class NoteDetailFile {
formData.append('upload', fileToUpload); formData.append('upload', fileToUpload);
const result = await $.ajax({ const result = await $.ajax({
url: baseApiUrl + 'notes/' + this.ctx.note.noteId + '/file', url: baseApiUrl + 'notes/' + this.tabContext.note.noteId + '/file',
headers: server.getHeaders(), headers: server.getHeaders(),
data: formData, data: formData,
type: 'PUT', type: 'PUT',
@ -64,33 +100,35 @@ class NoteDetailFile {
toastService.showError("Upload of a new file revision failed."); toastService.showError("Upload of a new file revision failed.");
} }
}); });
return this.$widget;
} }
async render() { async refresh() {
const attributes = await server.get('notes/' + this.ctx.note.noteId + '/attributes'); const attributes = await server.get('notes/' + this.tabContext.note.noteId + '/attributes');
const attributeMap = utils.toObject(attributes, l => [l.name, l.value]); const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);
this.$component.show(); this.$widget.show();
this.$fileNoteId.text(this.ctx.note.noteId); this.$fileNoteId.text(this.tabContext.note.noteId);
this.$fileName.text(attributeMap.originalFileName || "?"); this.$fileName.text(attributeMap.originalFileName || "?");
this.$fileSize.text(this.ctx.note.contentLength + " bytes"); this.$fileSize.text(this.tabContext.note.contentLength + " bytes");
this.$fileType.text(this.ctx.note.mime); this.$fileType.text(this.tabContext.note.mime);
if (this.ctx.note.content) { if (this.tabContext.note.content) {
this.$previewRow.show(); this.$previewRow.show();
this.$previewContent.text(this.ctx.note.content); this.$previewContent.text(this.tabContext.note.content);
} }
else { else {
this.$previewRow.hide(); this.$previewRow.hide();
} }
// open doesn't work for protected notes since it works through browser which isn't in protected session // open doesn't work for protected notes since it works through browser which isn't in protected session
this.$openButton.toggle(!this.ctx.note.isProtected); this.$openButton.toggle(!this.tabContext.note.isProtected);
} }
getFileUrl() { getFileUrl() {
return utils.getUrlForDownload("api/notes/" + this.ctx.note.noteId + "/download"); return utils.getUrlForDownload("api/notes/" + this.tabContext.note.noteId + "/download");
} }
show() {} show() {}

37
src/views/details/file.ejs
View File

@ -1,37 +0,0 @@
<div class="note-detail-file note-detail-component">
<table class="file-table">
<tr>
<th>Note ID:</th>
<td class="file-note-id"></td>
</tr>
<tr>
<th>Original file name:</th>
<td class="file-filename"></td>
</tr>
<tr>
<th>File type:</th>
<td class="file-filetype"></td>
</tr>
<tr>
<th>File size:</th>
<td class="file-filesize"></td>
</tr>
<tr class="file-preview-row">
<th>Preview:</th>
<td>
<pre class="file-preview-content"></pre>
</td>
</tr>
<tr>
<td colspan="2">
<button class="file-download btn btn-sm btn-primary" type="button">Download</button>
&nbsp;
<button class="file-open btn btn-sm btn-primary" type="button">Open</button>
&nbsp;
<button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
</td>
</tr>
</table>
<input type="file" class="file-upload-new-revision-input" style="display: none">
</div>

2
src/views/mobile.ejs
View File

@ -66,8 +66,6 @@
<% include details/render.ejs %> <% include details/render.ejs %>
<% include details/file.ejs %>
<% include details/image.ejs %> <% include details/image.ejs %>
<% include details/relation_map.ejs %> <% include details/relation_map.ejs %>