mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
converted include note dialog to new pattern
This commit is contained in:
zadam
parent
73574ac890
commit
ebd715ca1b
@ -1,56 +0,0 @@
|
|||||||
import treeService from '../services/tree.js';
|
|
||||||
import noteAutocompleteService from '../services/note_autocomplete.js';
|
|
||||||
import utils from "../services/utils.js";
|
|
||||||
import froca from "../services/froca.js";
|
|
||||||
|
|
||||||
const $dialog = $("#include-note-dialog");
|
|
||||||
const $form = $("#include-note-form");
|
|
||||||
const $autoComplete = $("#include-note-autocomplete");
|
|
||||||
|
|
||||||
/** @var TextTypeWidget */
|
|
||||||
let textTypeWidget;
|
|
||||||
|
|
||||||
export async function showDialog(widget) {
|
|
||||||
textTypeWidget = widget;
|
|
||||||
|
|
||||||
$autoComplete.val('');
|
|
||||||
|
|
||||||
utils.openDialog($dialog);
|
|
||||||
|
|
||||||
noteAutocompleteService.initNoteAutocomplete($autoComplete, {
|
|
||||||
hideGoToSelectedNoteButton: true,
|
|
||||||
allowCreatingNotes: true
|
|
||||||
});
|
|
||||||
noteAutocompleteService.showRecentNotes($autoComplete);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function includeNote(notePath) {
|
|
||||||
const noteId = treeService.getNoteIdFromNotePath(notePath);
|
|
||||||
const note = await froca.getNote(noteId);
|
|
||||||
|
|
||||||
const boxSize = $("input[name='include-note-box-size']:checked").val();
|
|
||||||
|
|
||||||
if (note.type === 'image') {
|
|
||||||
// there's no benefit to use insert note functionlity for images
|
|
||||||
// so we'll just add an IMG tag
|
|
||||||
textTypeWidget.addImage(noteId);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
textTypeWidget.addIncludeNote(noteId, boxSize);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$form.on('submit', () => {
|
|
||||||
const notePath = $autoComplete.getSelectedNotePath();
|
|
||||||
|
|
||||||
if (notePath) {
|
|
||||||
$dialog.modal('hide');
|
|
||||||
|
|
||||||
includeNote(notePath);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
logError("No noteId to include.");
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
@ -52,13 +52,14 @@ import FindWidget from "../widgets/find.js";
|
|||||||
import TocWidget from "../widgets/toc.js";
|
import TocWidget from "../widgets/toc.js";
|
||||||
import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
|
import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
|
||||||
import AboutDialog from "../widgets/dialogs/about.js";
|
import AboutDialog from "../widgets/dialogs/about.js";
|
||||||
import NoteSourceDialog from "../dialogs/note_source.js";
|
import NoteSourceDialog from "../widgets/dialogs/note_source.js";
|
||||||
import HelpDialog from "../widgets/dialogs/help.js";
|
import HelpDialog from "../widgets/dialogs/help.js";
|
||||||
import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
|
import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
|
||||||
import BackendLogDialog from "../widgets/dialogs/backend_log.js";
|
import BackendLogDialog from "../widgets/dialogs/backend_log.js";
|
||||||
import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
|
import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
|
||||||
import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
|
import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
|
||||||
import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
|
import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
|
||||||
|
import IncludeNoteDialog from "../widgets/dialogs/include_note.js";
|
||||||
|
|
||||||
export default class DesktopLayout {
|
export default class DesktopLayout {
|
||||||
constructor(customWidgets) {
|
constructor(customWidgets) {
|
||||||
@ -192,6 +193,7 @@ export default class DesktopLayout {
|
|||||||
.child(new BackendLogDialog())
|
.child(new BackendLogDialog())
|
||||||
.child(new BranchPrefixDialog())
|
.child(new BranchPrefixDialog())
|
||||||
.child(new SortChildNotesDialog())
|
.child(new SortChildNotesDialog())
|
||||||
.child(new PasswordNoteSetDialog());
|
.child(new PasswordNoteSetDialog())
|
||||||
|
.child(new IncludeNoteDialog());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
109
src/public/app/widgets/dialogs/include_note.js
Normal file
109
src/public/app/widgets/dialogs/include_note.js
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
import treeService from '../../services/tree.js';
|
||||||
|
import noteAutocompleteService from '../../services/note_autocomplete.js';
|
||||||
|
import utils from "../../services/utils.js";
|
||||||
|
import froca from "../../services/froca.js";
|
||||||
|
import BasicWidget from "../basic_widget.js";
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<div class="include-note-dialog modal 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">Include note</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<form class="include-note-form">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="include-note-autocomplete">Note</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="include-note-autocomplete form-control" placeholder="search for note by its name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Box size of the included note:
|
||||||
|
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="radio" name="include-note-box-size" value="small">
|
||||||
|
small (~ 10 lines)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="radio" name="include-note-box-size" value="medium" checked>
|
||||||
|
medium (~ 30 lines)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input class="form-check-input" type="radio" name="include-note-box-size" value="full">
|
||||||
|
full (box shows complete text)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="submit" class="btn btn-primary">Include note <kbd>enter</kbd></button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
export default class IncludeNoteDialog extends BasicWidget {
|
||||||
|
doRender() {
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
this.$form = this.$widget.find(".include-note-form");
|
||||||
|
this.$autoComplete = this.$widget.find(".include-note-autocomplete");
|
||||||
|
this.$form.on('submit', () => {
|
||||||
|
const notePath = this.$autoComplete.getSelectedNotePath();
|
||||||
|
|
||||||
|
if (notePath) {
|
||||||
|
this.$widget.modal('hide');
|
||||||
|
|
||||||
|
this.includeNote(notePath);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
logError("No noteId to include.");
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async showIncludeNoteDialogEvent({textTypeWidget}) {
|
||||||
|
this.textTypeWidget = textTypeWidget;
|
||||||
|
|
||||||
|
await this.refresh();
|
||||||
|
|
||||||
|
utils.openDialog(this.$widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
async refresh(widget) {
|
||||||
|
this.$autoComplete.val('');
|
||||||
|
|
||||||
|
noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
|
||||||
|
hideGoToSelectedNoteButton: true,
|
||||||
|
allowCreatingNotes: true
|
||||||
|
});
|
||||||
|
noteAutocompleteService.showRecentNotes(this.$autoComplete);
|
||||||
|
}
|
||||||
|
|
||||||
|
async includeNote(notePath) {
|
||||||
|
const noteId = treeService.getNoteIdFromNotePath(notePath);
|
||||||
|
const note = await froca.getNote(noteId);
|
||||||
|
|
||||||
|
const boxSize = $("input[name='include-note-box-size']:checked").val();
|
||||||
|
|
||||||
|
if (note.type === 'image') {
|
||||||
|
// there's no benefit to use insert note functionlity for images
|
||||||
|
// so we'll just add an IMG tag
|
||||||
|
this.textTypeWidget.addImage(noteId);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.textTypeWidget.addIncludeNote(noteId, boxSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import appContext from "../services/app_context.js";
|
import appContext from "../../services/app_context.js";
|
||||||
import BasicWidget from "../widgets/basic_widget.js";
|
import BasicWidget from "../basic_widget.js";
|
||||||
import utils from "../services/utils.js";
|
import utils from "../../services/utils.js";
|
||||||
|
|
||||||
const TPL = `
|
const TPL = `
|
||||||
<div class="note-source-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
<div class="note-source-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||||
@ -278,7 +278,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
addIncludeNoteToTextCommand() {
|
addIncludeNoteToTextCommand() {
|
||||||
import("../../dialogs/include_note.js").then(d => d.showDialog(this));
|
this.triggerCommand("showIncludeNoteDialog", {textTypeWidget: this});
|
||||||
}
|
}
|
||||||
|
|
||||||
addIncludeNote(noteId, boxSize) {
|
addIncludeNote(noteId, boxSize) {
|
||||||
|
|||||||
@ -30,7 +30,6 @@
|
|||||||
<%- include('dialogs/confirm.ejs') %>
|
<%- include('dialogs/confirm.ejs') %>
|
||||||
<%- include('dialogs/clone_to.ejs') %>
|
<%- include('dialogs/clone_to.ejs') %>
|
||||||
<%- include('dialogs/move_to.ejs') %>
|
<%- include('dialogs/move_to.ejs') %>
|
||||||
<%- include('dialogs/include_note.ejs') %>
|
|
||||||
<%- include('dialogs/delete_notes.ejs') %>
|
<%- include('dialogs/delete_notes.ejs') %>
|
||||||
<%- include('dialogs/note_type_chooser.ejs') %>
|
<%- include('dialogs/note_type_chooser.ejs') %>
|
||||||
|
|
||||||
|
|||||||
@ -1,46 +0,0 @@
|
|||||||
<div id="include-note-dialog" class="modal 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">Include note</h5>
|
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form id="include-note-form">
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="include-note-autocomplete">Note</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="include-note-autocomplete" class="form-control" placeholder="search for note by its name">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
Box size of the included note:
|
|
||||||
|
|
||||||
<div class="form-check">
|
|
||||||
<input class="form-check-input" type="radio" name="include-note-box-size" value="small" id="include-note-box-size-small">
|
|
||||||
<label class="form-check-label" for="include-note-box-size-small">
|
|
||||||
small (~ 10 lines)
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input class="form-check-input" type="radio" name="include-note-box-size" value="medium" id="include-note-box-size-medium" checked>
|
|
||||||
<label class="form-check-label" for="include-note-box-size-medium">
|
|
||||||
medium (~ 30 lines)
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-check">
|
|
||||||
<input class="form-check-input" type="radio" name="include-note-box-size" value="full" id="include-note-box-size-full">
|
|
||||||
<label class="form-check-label" for="include-note-box-size-full">
|
|
||||||
full (box shows complete text)
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="submit" class="btn btn-primary">Include note <kbd>enter</kbd></button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user