mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
converted confirm dialog to new pattern
This commit is contained in:
zadam
parent
b45df29937
commit
1d037d3f0f
@ -1,80 +0,0 @@
|
||||
const $dialog = $("#confirm-dialog");
|
||||
const $confirmContent = $("#confirm-dialog-content");
|
||||
const $okButton = $("#confirm-dialog-ok-button");
|
||||
const $cancelButton = $("#confirm-dialog-cancel-button");
|
||||
const $custom = $("#confirm-dialog-custom");
|
||||
|
||||
const DELETE_NOTE_BUTTON_ID = "confirm-dialog-delete-note";
|
||||
|
||||
let resolve;
|
||||
let $originallyFocused; // element focused before the dialog was opened so we can return to it afterwards
|
||||
|
||||
export function confirm(message) {
|
||||
$originallyFocused = $(':focus');
|
||||
|
||||
$custom.hide();
|
||||
|
||||
glob.activeDialog = $dialog;
|
||||
|
||||
if (typeof message === 'string') {
|
||||
message = $("<div>").text(message);
|
||||
}
|
||||
|
||||
$confirmContent.empty().append(message);
|
||||
|
||||
$dialog.modal();
|
||||
|
||||
return new Promise((res, rej) => { resolve = res; });
|
||||
}
|
||||
|
||||
export function confirmDeleteNoteBoxWithNote(title) {
|
||||
glob.activeDialog = $dialog;
|
||||
|
||||
$confirmContent.text(`Are you sure you want to remove the note "${title}" from relation map?`);
|
||||
|
||||
$custom.empty()
|
||||
.append("<br/>")
|
||||
.append($("<div>").addClass("form-check")
|
||||
.append($("<input>")
|
||||
.attr("id", DELETE_NOTE_BUTTON_ID)
|
||||
.attr("type", "checkbox")
|
||||
.addClass("form-check-input"))
|
||||
.append($("<label>")
|
||||
.attr("for", DELETE_NOTE_BUTTON_ID)
|
||||
.addClass("form-check-label")
|
||||
.attr("style", "text-decoration: underline dotted black")
|
||||
.attr("title", "If you don't check this, note will be only removed from relation map, but will stay as a note.")
|
||||
.html("Also delete note")));
|
||||
$custom.show();
|
||||
|
||||
$dialog.modal();
|
||||
|
||||
return new Promise((res, rej) => { resolve = res; });
|
||||
}
|
||||
|
||||
export function isDeleteNoteChecked() {
|
||||
return $("#" + DELETE_NOTE_BUTTON_ID + ":checked").length > 0;
|
||||
}
|
||||
|
||||
$dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
|
||||
|
||||
$dialog.on("hidden.bs.modal", () => {
|
||||
if (resolve) {
|
||||
resolve(false);
|
||||
}
|
||||
|
||||
if ($originallyFocused) {
|
||||
$originallyFocused.trigger('focus');
|
||||
$originallyFocused = null;
|
||||
}
|
||||
});
|
||||
|
||||
function doResolve(ret) {
|
||||
resolve(ret);
|
||||
resolve = null;
|
||||
|
||||
$dialog.modal("hide");
|
||||
}
|
||||
|
||||
$cancelButton.on('click', () => doResolve(false));
|
||||
$okButton.on('click', () => doResolve(true));
|
||||
@ -1,5 +1,6 @@
|
||||
import server from "../../services/server.js";
|
||||
import utils from "../../services/utils.js";
|
||||
import dialogService from "../../widgets/dialog.js";
|
||||
|
||||
const TPL = `
|
||||
<h4>Keyboard shortcuts</h4>
|
||||
@ -87,9 +88,7 @@ export default class KeyboardShortcutsOptions {
|
||||
});
|
||||
|
||||
$("#options-keyboard-shortcuts-set-all-to-default").on('click', async () => {
|
||||
const confirmDialog = await import('../confirm.js');
|
||||
|
||||
if (!await confirmDialog.confirm("Do you really want to reset all keyboard shortcuts to the default?")) {
|
||||
if (!await dialogService.confirm("Do you really want to reset all keyboard shortcuts to the default?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -72,6 +72,7 @@ import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session
|
||||
import NoteRevisionsDialog from "../widgets/dialogs/note_revisions.js";
|
||||
import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
|
||||
import InfoDialog from "../widgets/dialogs/info.js";
|
||||
import ConfirmDialog from "../widgets/dialogs/confirm.js";
|
||||
|
||||
export default class DesktopLayout {
|
||||
constructor(customWidgets) {
|
||||
@ -218,6 +219,7 @@ export default class DesktopLayout {
|
||||
.child(new ProtectedSessionPasswordDialog())
|
||||
.child(new NoteRevisionsDialog())
|
||||
.child(new DeleteNotesDialog())
|
||||
.child(new InfoDialog());
|
||||
.child(new InfoDialog())
|
||||
.child(new ConfirmDialog());
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu
|
||||
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
|
||||
import ScrollingContainer from "../widgets/containers/scrolling_container.js";
|
||||
import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
|
||||
import ConfirmDialog from "../widgets/dialogs/confirm.js";
|
||||
|
||||
const MOBILE_CSS = `
|
||||
<style>
|
||||
@ -129,7 +130,8 @@ export default class MobileLayout {
|
||||
.css('padding', '5px 20px 10px 0')
|
||||
)
|
||||
)
|
||||
.child(new ProtectedSessionPasswordDialog())
|
||||
);
|
||||
)
|
||||
.child(new ProtectedSessionPasswordDialog())
|
||||
.child(new ConfirmDialog());
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import appContext from "./app_context.js";
|
||||
import treeService from "./tree.js";
|
||||
import dialogService from "../widgets/dialog.js";
|
||||
|
||||
function getHoistedNoteId() {
|
||||
const activeNoteContext = appContext.tabManager.getActiveContext();
|
||||
@ -36,9 +37,7 @@ async function checkNoteAccess(notePath, noteContext) {
|
||||
const hoistedNoteId = noteContext.hoistedNoteId;
|
||||
|
||||
if (!resolvedNotePath.includes(hoistedNoteId) && !resolvedNotePath.includes("hidden")) {
|
||||
const confirmDialog = await import('../dialogs/confirm.js');
|
||||
|
||||
if (!await confirmDialog.confirm("Requested note is outside of hoisted note subtree and you must unhoist to access the note. Do you want to proceed with unhoisting?")) {
|
||||
if (!await dialogService.confirm("Requested note is outside of hoisted note subtree and you must unhoist to access the note. Do you want to proceed with unhoisting?")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,12 @@ async function info(message) {
|
||||
appContext.triggerCommand("showInfoDialog", {message, callback: res}));
|
||||
}
|
||||
|
||||
async function confirm(message) {
|
||||
return new Promise(res =>
|
||||
appContext.triggerCommand("showConfirmDialog", {message, callback: res}));
|
||||
}
|
||||
|
||||
export default {
|
||||
info
|
||||
info,
|
||||
confirm
|
||||
};
|
||||
|
||||
116
src/public/app/widgets/dialogs/confirm.js
Normal file
116
src/public/app/widgets/dialogs/confirm.js
Normal file
@ -0,0 +1,116 @@
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
|
||||
const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
|
||||
|
||||
const TPL = `
|
||||
<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">Confirmation</h5>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="confirm-dialog-content"></div>
|
||||
|
||||
<div class="confirm-dialog-custom"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="confirm-dialog-cancel-button btn btn-sm">Cancel</button>
|
||||
|
||||
|
||||
|
||||
<button class="confirm-dialog-ok-button btn btn-primary btn-sm">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class ConfirmDialog extends BasicWidget {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.resolve = null;
|
||||
this.$originallyFocused = null; // element focused before the dialog was opened, so we can return to it afterwards
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$confirmContent = this.$widget.find(".confirm-dialog-content");
|
||||
this.$okButton = this.$widget.find(".confirm-dialog-ok-button");
|
||||
this.$cancelButton = this.$widget.find(".confirm-dialog-cancel-button");
|
||||
this.$custom = this.$widget.find(".confirm-dialog-custom");
|
||||
|
||||
this.$widget.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
|
||||
|
||||
this.$widget.on("hidden.bs.modal", () => {
|
||||
if (this.resolve) {
|
||||
this.resolve(false);
|
||||
}
|
||||
|
||||
if (this.$originallyFocused) {
|
||||
this.$originallyFocused.trigger('focus');
|
||||
this.$originallyFocused = null;
|
||||
}
|
||||
});
|
||||
|
||||
this.$cancelButton.on('click', () => this.doResolve(false));
|
||||
this.$okButton.on('click', () => this.doResolve(true));
|
||||
}
|
||||
|
||||
showConfirmDialogEvent({message, callback}) {
|
||||
this.$originallyFocused = $(':focus');
|
||||
|
||||
this.$custom.hide();
|
||||
|
||||
glob.activeDialog = this.$widget;
|
||||
|
||||
if (typeof message === 'string') {
|
||||
message = $("<div>").text(message);
|
||||
}
|
||||
|
||||
this.$confirmContent.empty().append(message);
|
||||
|
||||
this.$widget.modal();
|
||||
|
||||
this.resolve = callback;
|
||||
}
|
||||
|
||||
confirmDeleteNoteBoxWithNoteEvent({title, callback}) {
|
||||
glob.activeDialog = this.$widget;
|
||||
|
||||
this.$confirmContent.text(`Are you sure you want to remove the note "${title}" from relation map?`);
|
||||
|
||||
this.$custom.empty()
|
||||
.append("<br/>")
|
||||
.append($("<div>").addClass("form-check")
|
||||
.append($("<label>")
|
||||
.addClass("form-check-label")
|
||||
.attr("style", "text-decoration: underline dotted black")
|
||||
.attr("title", "If you don't check this, note will be only removed from relation map, but will stay as a note.")
|
||||
.append($("<input>")
|
||||
.attr("type", "checkbox")
|
||||
.addClass("form-check-input " + DELETE_NOTE_BUTTON_CLASS))
|
||||
.text("Also delete note")));
|
||||
|
||||
this.$custom.show();
|
||||
|
||||
this.$widget.modal();
|
||||
|
||||
this.resolve = callback;
|
||||
}
|
||||
|
||||
isDeleteNoteChecked() {
|
||||
return this.$widget.find("." + DELETE_NOTE_BUTTON_CLASS + ":checked").length > 0;
|
||||
}
|
||||
|
||||
doResolve(ret) {
|
||||
this.resolve(ret);
|
||||
this.resolve = null;
|
||||
|
||||
this.$widget.modal("hide");
|
||||
}
|
||||
}
|
||||
@ -72,7 +72,6 @@ export default class DeleteNotesDialog extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$content = this.$widget.find(".recent-changes-content");
|
||||
this.$dialog = this.$widget.find(".delete-notes-dialog");
|
||||
this.$okButton = this.$widget.find(".delete-notes-dialog-ok-button");
|
||||
this.$cancelButton = this.$widget.find(".delete-notes-dialog-cancel-button");
|
||||
this.$deleteNotesList = this.$widget.find(".delete-notes-list");
|
||||
@ -85,7 +84,7 @@ export default class DeleteNotesDialog extends BasicWidget {
|
||||
this.$deleteAllClones = this.$widget.find(".delete-all-clones");
|
||||
this.$eraseNotes = this.$widget.find(".erase-notes");
|
||||
|
||||
this.$dialog.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
|
||||
this.$widget.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
|
||||
|
||||
this.$cancelButton.on('click', () => {
|
||||
utils.closeActiveDialog();
|
||||
|
||||
@ -49,7 +49,6 @@ export default class MoveToDialog extends BasicWidget {
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$dialog = this.$widget.find(".move-to-dialog");
|
||||
this.$form = this.$widget.find(".move-to-form");
|
||||
this.$noteAutoComplete = this.$widget.find(".move-to-note-autocomplete");
|
||||
this.$noteList = this.$widget.find(".move-to-note-list");
|
||||
|
||||
@ -6,6 +6,7 @@ import libraryLoader from "../../services/library_loader.js";
|
||||
import openService from "../../services/open.js";
|
||||
import protectedSessionHolder from "../../services/protected_session_holder.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
import dialogService from "../dialog.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="note-revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||
@ -104,10 +105,9 @@ export default class NoteRevisionsDialog extends BasicWidget {
|
||||
});
|
||||
|
||||
this.$eraseAllRevisionsButton.on('click', async () => {
|
||||
const confirmDialog = await import('../../dialogs/confirm.js');
|
||||
const text = 'Do you want to delete all revisions of this note? This action will erase revision title and content, but still preserve revision metadata.';
|
||||
|
||||
if (await confirmDialog.confirm(text)) {
|
||||
if (await dialogService.confirm(text)) {
|
||||
await server.remove(`notes/${this.note.noteId}/revisions`);
|
||||
|
||||
this.$widget.modal('hide');
|
||||
@ -180,10 +180,9 @@ export default class NoteRevisionsDialog extends BasicWidget {
|
||||
const $restoreRevisionButton = $('<button class="btn btn-sm" type="button">Restore this revision</button>');
|
||||
|
||||
$restoreRevisionButton.on('click', async () => {
|
||||
const confirmDialog = await import('../../dialogs/confirm.js');
|
||||
const text = 'Do you want to restore this revision? This will overwrite current title/content of the note with this revision.';
|
||||
|
||||
if (await confirmDialog.confirm(text)) {
|
||||
if (await dialogService.confirm(text)) {
|
||||
await server.put(`notes/${revisionItem.noteId}/restore-revision/${revisionItem.noteRevisionId}`);
|
||||
|
||||
this.$widget.modal('hide');
|
||||
@ -195,10 +194,9 @@ export default class NoteRevisionsDialog extends BasicWidget {
|
||||
const $eraseRevisionButton = $('<button class="btn btn-sm" type="button">Delete this revision</button>');
|
||||
|
||||
$eraseRevisionButton.on('click', async () => {
|
||||
const confirmDialog = await import('../../dialogs/confirm.js');
|
||||
const text = 'Do you want to delete this revision? This action will delete revision title and content, but still preserve revision metadata.';
|
||||
|
||||
if (await confirmDialog.confirm(text)) {
|
||||
if (await dialogService.confirm(text)) {
|
||||
await server.remove(`notes/${revisionItem.noteId}/revisions/${revisionItem.noteRevisionId}`);
|
||||
|
||||
this.loadNoteRevisions(revisionItem.noteId);
|
||||
|
||||
@ -9,7 +9,7 @@ const TPL = `
|
||||
z-index: 1100 !important;
|
||||
}
|
||||
|
||||
.note-type-dropdown {
|
||||
.note-type-chooser-dialog .note-type-dropdown {
|
||||
position: relative;
|
||||
font-size: large;
|
||||
padding: 20px;
|
||||
|
||||
@ -6,6 +6,7 @@ import froca from "../../services/froca.js";
|
||||
import appContext from "../../services/app_context.js";
|
||||
import hoistedNoteService from "../../services/hoisted_note.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
import dialogService from "../dialog.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="recent-changes-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||
@ -71,13 +72,12 @@ export default class RecentChangesDialog extends BasicWidget {
|
||||
const $undeleteLink = $(`<a href="javascript:">`)
|
||||
.text("undelete")
|
||||
.on('click', async () => {
|
||||
const confirmDialog = await import('../../dialogs/confirm.js');
|
||||
const text = 'Do you want to undelete this note and its sub-notes?';
|
||||
|
||||
if (await confirmDialog.confirm(text)) {
|
||||
if (await dialogService.confirm(text)) {
|
||||
await server.put(`notes/${change.noteId}/undelete`);
|
||||
|
||||
$dialog.modal('hide');
|
||||
this.$widget.modal('hide');
|
||||
|
||||
await froca.reloadNotes([change.noteId]);
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import server from '../services/server.js';
|
||||
import mimeTypesService from '../services/mime_types.js';
|
||||
import NoteContextAwareWidget from "./note_context_aware_widget.js";
|
||||
import dialogService from "./dialog.js";
|
||||
|
||||
const NOTE_TYPES = [
|
||||
{ type: "file", title: "File", selectable: false },
|
||||
@ -145,8 +146,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
|
||||
return true;
|
||||
}
|
||||
|
||||
const confirmDialog = await import("../dialogs/confirm.js");
|
||||
return await confirmDialog.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
|
||||
return await dialogService.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
|
||||
}
|
||||
|
||||
async entitiesReloadedEvent({loadResults}) {
|
||||
|
||||
@ -3,6 +3,7 @@ import branchService from "../services/branches.js";
|
||||
import server from "../services/server.js";
|
||||
import utils from "../services/utils.js";
|
||||
import syncService from "../services/sync.js";
|
||||
import dialogService from "./dialog.js";
|
||||
|
||||
export default class SharedSwitchWidget extends SwitchWidget {
|
||||
isEnabled() {
|
||||
@ -36,11 +37,9 @@ export default class SharedSwitchWidget extends SwitchWidget {
|
||||
}
|
||||
|
||||
if (this.note.getParentBranches().length === 1) {
|
||||
const confirmDialog = await import('../dialogs/confirm.js');
|
||||
|
||||
const text = "This note exists only as a shared note, unsharing would delete it. Do you want to continue and thus delete this note?";
|
||||
|
||||
if (!await confirmDialog.confirm(text)) {
|
||||
if (!await dialogService.confirm(text)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,9 +197,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
|
||||
appContext.tabManager.openTabWithNoteWithHoisting(noteId);
|
||||
}
|
||||
else if (command === "remove") {
|
||||
const confirmDialog = await import('../../dialogs/confirm.js');
|
||||
|
||||
if (!await confirmDialog.confirmDeleteNoteBoxWithNote($title.text())) {
|
||||
if (!await dialogService.confirmDeleteNoteBoxWithNote($title.text())) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -450,9 +448,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
|
||||
items: [ {title: "Remove relation", command: "remove", uiIcon: "bx bx-trash"} ],
|
||||
selectMenuItemHandler: async ({command}) => {
|
||||
if (command === 'remove') {
|
||||
const confirmDialog = await import('../../dialogs/confirm.js');
|
||||
|
||||
if (!await confirmDialog.confirm("Are you sure you want to remove the relation?")) {
|
||||
if (!await dialogService.confirm("Are you sure you want to remove the relation?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
|
||||
<%- include('dialogs/options.ejs') %>
|
||||
<%- include('dialogs/prompt.ejs') %>
|
||||
<%- include('dialogs/confirm.ejs') %>
|
||||
|
||||
<script type="text/javascript">
|
||||
global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
<div id="confirm-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">Confirmation</h5>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="confirm-dialog-content"></div>
|
||||
|
||||
<div id="confirm-dialog-custom"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-sm" id="confirm-dialog-cancel-button">Cancel</button>
|
||||
|
||||
|
||||
|
||||
<button class="btn btn-primary btn-sm" id="confirm-dialog-ok-button">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -102,8 +102,6 @@
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
|
||||
<%- include('dialogs/confirm.ejs') %>
|
||||
|
||||
<script type="text/javascript">
|
||||
global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user