separated editable code buttons into separate widget which also fixes scrolling issue

This commit is contained in:
zadam 2022-09-04 23:09:42 +02:00
parent e8b8198eb8
commit b091e2222e
3 changed files with 92 additions and 53 deletions

View File

@ -78,6 +78,7 @@ import OptionsDialog from "../widgets/dialogs/options.js";
import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_button.js";
import EditableCodeButtonsWidget from "../widgets/type_widgets/editable_code_buttons.js";
export default class DesktopLayout {
constructor(customWidgets) {
@ -195,6 +196,7 @@ export default class DesktopLayout {
.child(new SearchResultWidget())
.child(new SqlResultWidget())
)
.child(new EditableCodeButtonsWidget())
.child(new FindWidget())
.child(
...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC

View File

@ -23,26 +23,6 @@ const TPL = `
</style>
<div class="note-detail-code-editor"></div>
<div style="display: flex; justify-content: space-evenly;">
<button data-trigger-command="runActiveNote"
class="no-print execute-button btn btn-sm">
Execute <kbd data-command="runActiveNote"></kbd>
</button>
<button class="no-print trilium-api-docs-button btn btn-sm"
title="Open Trilium API docs">
<span class="bx bx-help-circle"></span>
API docs
</button>
<button class="no-print save-to-note-button btn btn-sm">
<span class="bx bx-save"></span>
Save to note</kbd>
</button>
</div>
</div>`;
export default class EditableCodeTypeWidget extends TypeWidget {
@ -50,28 +30,7 @@ export default class EditableCodeTypeWidget extends TypeWidget {
doRender() {
this.$widget = $(TPL);
this.$openTriliumApiDocsButton = this.$widget.find(".trilium-api-docs-button");
this.$openTriliumApiDocsButton.on("click", () => {
if (this.note.mime.endsWith("frontend")) {
window.open("https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html", "_blank");
}
else {
window.open("https://zadam.github.io/trilium/backend_api/BackendScriptApi.html", "_blank");
}
});
this.$editor = this.$widget.find('.note-detail-code-editor');
this.$executeButton = this.$widget.find('.execute-button');
this.$saveToNoteButton = this.$widget.find('.save-to-note-button');
this.$saveToNoteButton.on('click', async () => {
const {notePath} = await server.post("special-notes/save-sql-console", {sqlConsoleNoteId: this.noteId});
await ws.waitForMaxKnownEntityChangeId();
await appContext.tabManager.getActiveContext().setNote(notePath);
toastService.showMessage("SQL Console note has been saved into " + await treeService.getNotePathTitle(notePath));
});
keyboardActionService.setupActionsForElement('code-detail', this.$widget, this);
@ -115,18 +74,6 @@ export default class EditableCodeTypeWidget extends TypeWidget {
}
async doRefresh(note) {
this.$executeButton.toggle(
note.mime.startsWith('application/javascript')
|| note.mime === 'text/x-sqlite;schema=trilium'
);
this.$saveToNoteButton.toggle(
note.mime === 'text/x-sqlite;schema=trilium'
&& !note.getAllNotePaths().find(notePathArr => !notePathArr.includes("hidden"))
);
this.$openTriliumApiDocsButton.toggle(note.mime.startsWith('application/javascript;env='));
const noteComplement = await this.noteContext.getNoteComplement();
await this.spacedUpdate.allowUpdateWithoutChange(() => {

View File

@ -0,0 +1,90 @@
import server from "../../services/server.js";
import ws from "../../services/ws.js";
import appContext from "../../services/app_context.js";
import toastService from "../../services/toast.js";
import treeService from "../../services/tree.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import keyboardActionService from "../../services/keyboard_actions.js";
const TPL = `
<div class="editable-code-buttons-widget">
<style>
.editable-code-buttons-widget {
display: flex;
justify-content: space-evenly;
padding: 5px;
height: 45px;
}
</style>
<button data-trigger-command="runActiveNote"
class="no-print execute-button btn btn-sm">
<span class="bx bx-run"></span>
Execute <kbd data-command="runActiveNote"></kbd>
</button>
<button class="no-print trilium-api-docs-button btn btn-sm"
title="Open Trilium API docs">
<span class="bx bx-help-circle"></span>
API docs
</button>
<button class="no-print save-to-note-button btn btn-sm">
<span class="bx bx-save"></span>
Save to note</kbd>
</button>
</div>`;
export default class EditableCodeButtonsWidget extends NoteContextAwareWidget {
isEnabled() {
return super.isEnabled()
&& this.note
&& (this.note.mime.startsWith('application/javascript') || this.note.mime === 'text/x-sqlite;schema=trilium');
}
doRender() {
this.$widget = $(TPL);
this.$openTriliumApiDocsButton = this.$widget.find(".trilium-api-docs-button");
this.$openTriliumApiDocsButton.on("click", () => {
if (this.note.mime.endsWith("frontend")) {
window.open("https://zadam.github.io/trilium/frontend_api/FrontendScriptApi.html", "_blank");
}
else {
window.open("https://zadam.github.io/trilium/backend_api/BackendScriptApi.html", "_blank");
}
});
this.$executeButton = this.$widget.find('.execute-button');
this.$saveToNoteButton = this.$widget.find('.save-to-note-button');
this.$saveToNoteButton.on('click', async () => {
const {notePath} = await server.post("special-notes/save-sql-console", {sqlConsoleNoteId: this.noteId});
await ws.waitForMaxKnownEntityChangeId();
await appContext.tabManager.getActiveContext().setNote(notePath);
toastService.showMessage("SQL Console note has been saved into " + await treeService.getNotePathTitle(notePath));
});
keyboardActionService.setupActionsForElement('code-detail', this.$widget, this);
keyboardActionService.updateDisplayedShortcuts(this.$widget);
super.doRender();
}
refreshWithNote(note) {
this.$executeButton.toggle(
note.mime.startsWith('application/javascript')
|| note.mime === 'text/x-sqlite;schema=trilium'
);
this.$saveToNoteButton.toggle(
note.mime === 'text/x-sqlite;schema=trilium'
&& !note.getAllNotePaths().find(notePathArr => !notePathArr.includes("hidden"))
);
this.$openTriliumApiDocsButton.toggle(note.mime.startsWith('application/javascript;env='));
}
}