gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

converted prompt dialog to new pattern

Browse Source
This commit is contained in:
zadam 2022-06-16 21:13:09 +02:00
parent 049261a8ee
commit 7ac8dc6785
8 changed files with 110 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/public/app/dialogs/options/etapi.js
View File

@ -1,5 +1,5 @@
import server from "../../services/server.js";
import utils from "../../services/utils.js";
import dialogService from "../../widgets/dialog.js";
const TPL = `
<h4>ETAPI</h4>
@ -42,16 +42,14 @@ const TPL = `
.token-table-button:hover {
border: 1px solid var(--main-border-color);
}
</style>
`;
</style>`;
export default class EtapiOptions {
constructor() {
$("#options-etapi").html(TPL);
$("#create-etapi-token").on("click", async () => {
const promptDialog = await import('../../dialogs/prompt.js');
const tokenName = await promptDialog.ask({
const tokenName = await dialogService.prompt({
title: "New ETAPI token",
message: "Please enter new token's name",
defaultValue: "new token"
@ -64,7 +62,7 @@ export default class EtapiOptions {
const {authToken} = await server.post('etapi-tokens', {tokenName});
await promptDialog.ask({
await dialogService.prompt({
title: "ETAPI token created",
message: 'Copy the created token into clipboard. Trilium stores the token hashed and this is the last time you see it.',
defaultValue: authToken
@ -104,8 +102,7 @@ export default class EtapiOptions {
}
async renameToken(etapiTokenId, oldName) {
const promptDialog = await import('../../dialogs/prompt.js');
const tokenName = await promptDialog.ask({
const tokenName = await dialogService.prompt({
title: "Rename token",
message: "Please enter new token's name",
defaultValue: oldName

59
src/public/app/dialogs/prompt.js
View File

@ -1,59 +0,0 @@
import utils from "../services/utils.js";
const $dialog = $("#prompt-dialog");
const $dialogBody = $dialog.find(".modal-body");
let $question;
let $answer;
const $form = $("#prompt-dialog-form");
let resolve;
let shownCb;
export function ask({ title, message, defaultValue, shown }) {
shownCb = shown;
$("#prompt-title").text(title || "Prompt");
$question = $("<label>")
.prop("for", "prompt-dialog-answer")
.text(message);
$answer = $("<input>")
.prop("type", "text")
.prop("id", "prompt-dialog-answer")
.addClass("form-control")
.val(defaultValue || "");
$dialogBody.empty().append(
$("<div>")
.addClass("form-group")
.append($question)
.append($answer));
utils.openDialog($dialog, false);
return new Promise((res, rej) => { resolve = res; });
}
$dialog.on('shown.bs.modal', () => {
if (shownCb) {
shownCb({ $dialog, $question, $answer, $form });
}
$answer.trigger('focus').select();
});
$dialog.on("hidden.bs.modal", () => {
if (resolve) {
resolve(null);
}
});
$form.on('submit', e => {
e.preventDefault();
resolve($answer.val());
$dialog.modal('hide');
});

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

@ -73,6 +73,7 @@ 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";
import PromptDialog from "../widgets/dialogs/prompt.js";
export default class DesktopLayout {
constructor(customWidgets) {
@ -220,6 +221,7 @@ export default class DesktopLayout {
.child(new NoteRevisionsDialog())
.child(new DeleteNotesDialog())
.child(new InfoDialog())
.child(new ConfirmDialog());
.child(new ConfirmDialog())
.child(new PromptDialog());
}
}

8
src/public/app/widgets/dialog.js
View File

@ -10,7 +10,13 @@ async function confirm(message) {
appContext.triggerCommand("showConfirmDialog", {message, callback: res}));
}
async function prompt(props) {
return new Promise(res =>
appContext.triggerCommand("showPromptDialog", {...props, callback: res}));
}
export default {
info,
confirm
confirm,
prompt
};

92
src/public/app/widgets/dialogs/prompt.js Normal file
View File

@ -0,0 +1,92 @@
import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";
const TPL = `
<div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="prompt-dialog-form">
<div class="modal-header">
<h5 class="prompt-title modal-title mr-auto">Prompt</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="prompt-dialog-ok-button btn btn-primary btn-sm">OK <kbd>enter</kbd></button>
</div>
</form>
</div>
</div>
</div>`;
export default class PromptDialog extends BasicWidget {
constructor() {
super();
this.resolve = null;
this.shownCb = null;
}
doRender() {
this.$widget = $(TPL);
this.$dialogBody = this.$widget.find(".modal-body");
this.$form = this.$widget.find("#prompt-dialog-form");
this.$question = null;
this.$answer = null;
this.$widget.on('shown.bs.modal', () => {
if (this.shownCb) {
this.shownCb({
$dialog: this.$widget,
$question: this.$question,
$answer: this.$answer,
$form: this.$form
});
}
this.$answer.trigger('focus').select();
});
this.$widget.on("hidden.bs.modal", () => {
if (this.resolve) {
this.resolve(null);
}
});
this.$form.on('submit', e => {
e.preventDefault();
this.resolve(this.$answer.val());
this.$widget.modal('hide');
});
}
showPromptDialogEvent({ title, message, defaultValue, shown, callback }) {
this.shownCb = shown;
this.resolve = callback;
this.$widget.find(".prompt-title").text(title || "Prompt");
this.$question = $("<label>")
.prop("for", "prompt-dialog-answer")
.text(message);
this.$answer = $("<input>")
.prop("type", "text")
.prop("id", "prompt-dialog-answer")
.addClass("form-control")
.val(defaultValue || "");
this.$dialogBody.empty().append(
$("<div>")
.addClass("form-group")
.append(this.$question)
.append(this.$answer));
utils.openDialog(this.$widget, false);
}
}

9
src/public/app/widgets/type_widgets/relation_map.js
View File

@ -152,8 +152,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
this.clipboard = null;
this.$createChildNote.on('click', async () => {
const promptDialog = await import('../../dialogs/prompt.js');
const title = await promptDialog.ask({ message: "Enter title of new note", defaultValue: "new note" });
const title = await dialogService.prompt({ message: "Enter title of new note", defaultValue: "new note" });
if (!title.trim()) {
return;
@ -216,8 +215,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
this.saveData();
}
else if (command === "editTitle") {
const promptDialog = await import("../../dialogs/prompt.js");
const title = await promptDialog.ask({
const title = await dialogService.prompt({
title: "Rename note",
message: "Enter new note title:",
defaultValue: $title.text()
@ -470,8 +468,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
return;
}
const promptDialog = await import("../../dialogs/prompt.js");
let name = await promptDialog.ask({
let name = await dialogService.prompt({
message: "Specify new relation name (allowed characters: alphanumeric, colon and underscore):",
shown: ({ $answer }) => {
$answer.on('keyup', () => {

1
src/views/desktop.ejs
View File

@ -18,7 +18,6 @@
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
<%- include('dialogs/options.ejs') %>
<%- include('dialogs/prompt.ejs') %>
<script type="text/javascript">
global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */

20
src/views/dialogs/prompt.ejs
View File

@ -1,20 +0,0 @@
<div id="prompt-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="prompt-dialog-form">
<div class="modal-header">
<h5 class="modal-title mr-auto" id="prompt-title">Prompt</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary btn-sm" id="prompt-dialog-ok-button">OK <kbd>enter</kbd></button>
</div>
</form>
</div>
</div>
</div>