zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 15:45:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

converted note source dialog to new pattern

Browse source
This commit is contained in:
zadam 2022-06-12 19:38:28 +02:00
parent b678d87c80
commit 7ba619c71d
9 changed files with 74 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
src/public/app/dialogs/note_source.js
View file

@ -1,40 +1,76 @@
import appContext from "../services/app_context.js";
import BasicWidget from "../widgets/basic_widget.js";
import utils from "../services/utils.js";
const $dialog = $("#note-source-dialog");
const $noteSource = $("#note-source");
export async function showDialog() {
utils.openDialog($dialog);
const noteCompletement = await appContext.tabManager.getActiveContext().getNoteComplement();
$noteSource.text(formatHtml(noteCompletement.content));
}
function formatHtml(str) {
const div = document.createElement('div');
div.innerHTML = str.trim();
return formatNode(div, 0).innerHTML.trim();
}
function formatNode(node, level) {
const indentBefore = new Array(level++ + 1).join(' ');
const indentAfter = new Array(level - 1).join(' ');
let textNode;
for (let i = 0; i < node.children.length; i++) {
textNode = document.createTextNode('\n' + indentBefore);
node.insertBefore(textNode, node.children[i]);
formatNode(node.children[i], level);
if (node.lastElementChild === node.children[i]) {
textNode = document.createTextNode('\n' + indentAfter);
node.appendChild(textNode);
const TPL = `
<div class="note-source-dialog modal fade mx-auto" tabindex="-1" role="dialog">
<style>
.note-source-dialog .note-source {
height: 98%;
width: 100%;
min-height: 500px;
overflow: scroll;
line-height: 0.7;
}
</style>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Note source</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<textarea readonly="readonly" class="note-source"></textarea>
</div>
</div>
</div>
</div>`;
export default class NoteSourceDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$noteSource = this.$widget.find(".note-source");
}
return node;
async refresh() {
const noteCompletement = await appContext.tabManager.getActiveContext().getNoteComplement();
this.$noteSource.text(this.formatHtml(noteCompletement.content));
}
formatHtml(str) {
const div = document.createElement('div');
div.innerHTML = str.trim();
return this.formatNode(div, 0).innerHTML.trim();
}
formatNode(node, level) {
const indentBefore = new Array(level++ + 1).join(' ');
const indentAfter = new Array(level - 1).join(' ');
let textNode;
for (let i = 0; i < node.children.length; i++) {
textNode = document.createTextNode('\n' + indentBefore);
node.insertBefore(textNode, node.children[i]);
this.formatNode(node.children[i], level);
if (node.lastElementChild === node.children[i]) {
textNode = document.createTextNode('\n' + indentAfter);
node.appendChild(textNode);
}
}
return node;
}
async openNoteSourceDialogEvent() {
await this.refresh();
utils.openDialog(this.$widget);
}
}

4
src/public/app/layouts/desktop_layout.js
View file

@ -52,6 +52,7 @@ import FindWidget from "../widgets/find.js";
import TocWidget from "../widgets/toc.js";
import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
import AboutDialog from "../widgets/dialogs/about.js";
import NoteSourceDialog from "../dialogs/note_source.js";
export default class DesktopLayout {
constructor(customWidgets) {
@ -178,6 +179,7 @@ export default class DesktopLayout {
)
)
.child(new BulkActionsDialog())
.child(new AboutDialog());
.child(new AboutDialog())
.child(new NoteSourceDialog());
}
}

4
src/public/app/services/root_command_executor.js
View file

@ -20,10 +20,6 @@ export default class RootCommandExecutor extends Component {
import("../dialogs/note_revisions.js").then(d => d.showCurrentNoteRevisions());
}
showNoteSourceCommand() {
import("../dialogs/note_source.js").then(d => d.showDialog());
}
pasteMarkdownIntoTextCommand() {
import("../dialogs/markdown_import.js").then(d => d.importMarkdownInline());
}

2
src/public/app/widgets/buttons/note_actions.js
View file

@ -26,7 +26,7 @@ const TPL = `
<div class="dropdown-menu dropdown-menu-right">
<a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
<a data-trigger-command="findInText" class="dropdown-item find-in-text-button">Search in note <kbd data-command="findInText"></a>
<a data-trigger-command="showNoteSource" class="dropdown-item show-source-button"><kbd data-command="showNoteSource"></kbd> Note source</a>
<a data-trigger-command="openNoteSourceDialog" class="dropdown-item show-source-button"><kbd data-command="showNoteSource"></kbd> Note source</a>
<a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"><kbd data-command="openNoteExternally"></kbd> Open note externally</a>
<a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button">Export note</a>

2
src/public/app/widgets/buttons/show_note_source.js
View file

@ -10,7 +10,7 @@ export default class ShowNoteSourceButton extends ButtonWidget {
this.icon('bx bx-code')
.title("Show Note Source")
.command("showNoteSource")
.command("openNoteSourceDialog")
.titlePlacement("bottom");
}
}

2
src/public/app/widgets/dialogs/about.js
View file

@ -54,8 +54,6 @@ const TPL = `
export default class AboutDialog extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$dialog = this.$widget.find(".about-dialog");
this.$appVersion = this.$widget.find(".app-version");
this.$dbVersion = this.$widget.find(".db-version");
this.$syncVersion = this.$widget.find(".sync-version");

6
src/public/stylesheets/style.css
View file

@ -169,12 +169,6 @@ div.ui-tooltip {
float: right;
}
#note-source {
height: 98%;
width: 100%;
overflow: scroll;
}
.suppressed {
display: none;
}

1
src/views/desktop.ejs
View file

@ -24,7 +24,6 @@
<%- include('dialogs/jump_to_note.ejs') %>
<%- include('dialogs/markdown_import.ejs') %>
<%- include('dialogs/note_revisions.ejs') %>
<%- include('dialogs/note_source.ejs') %>
<%- include('dialogs/options.ejs') %>
<%- include('dialogs/protected_session_password.ejs') %>
<%- include('dialogs/recent_changes.ejs') %>

15
src/views/dialogs/note_source.ejs
View file

@ -1,15 +0,0 @@
<div id="note-source-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Note source</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<textarea id="note-source" readonly="readonly" style="min-height: 500px;"></textarea>
</div>
</div>
</div>
</div>