From 1347d3fcc2502ac57f3337ace2f0c2e1bb1ccf92 Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 15 Jun 2022 00:10:32 +0200 Subject: [PATCH] converted note type chooser dialog to new pattern --- src/public/app/dialogs/note_type_chooser.js | 94 ------------ src/public/app/layouts/desktop_layout.js | 4 +- src/public/app/services/note_autocomplete.js | 3 +- src/public/app/services/note_create.js | 12 +- .../app/widgets/dialogs/note_type_chooser.js | 138 ++++++++++++++++++ src/views/desktop.ejs | 1 - src/views/dialogs/note_type_chooser.ejs | 34 ----- 7 files changed, 151 insertions(+), 135 deletions(-) delete mode 100644 src/public/app/dialogs/note_type_chooser.js create mode 100644 src/public/app/widgets/dialogs/note_type_chooser.js delete mode 100644 src/views/dialogs/note_type_chooser.ejs diff --git a/src/public/app/dialogs/note_type_chooser.js b/src/public/app/dialogs/note_type_chooser.js deleted file mode 100644 index e8c7120251..0000000000 --- a/src/public/app/dialogs/note_type_chooser.js +++ /dev/null @@ -1,94 +0,0 @@ -import noteTypesService from "../services/note_types.js"; - -const $dialog = $("#note-type-chooser-dialog"); -const $noteTypeDropdown = $("#note-type-dropdown"); -const $noteTypeDropdownTrigger = $("#note-type-dropdown-trigger"); -$noteTypeDropdownTrigger.dropdown(); - -let resolve; -let $originalFocused; // element focused before the dialog was opened, so we can return to it afterwards -let $originalDialog; - -export async function chooseNoteType() { - $originalFocused = $(':focus'); - - const noteTypes = await noteTypesService.getNoteTypeItems(); - - $noteTypeDropdown.empty(); - - for (const noteType of noteTypes) { - if (noteType.title === '----') { - $noteTypeDropdown.append($('
').append("Templates:")); - } - else { - $noteTypeDropdown.append( - $('') - .attr("data-note-type", noteType.type) - .attr("data-template-note-id", noteType.templateNoteId) - .append($("").addClass(noteType.uiIcon)) - .append(" " + noteType.title) - ); - } - } - - $noteTypeDropdownTrigger.dropdown('show'); - - $originalDialog = glob.activeDialog; - glob.activeDialog = $dialog; - $dialog.modal(); - - $noteTypeDropdown.find(".dropdown-item:first").focus(); - - return new Promise((res, rej) => { resolve = res; }); -} - -$dialog.on("hidden.bs.modal", () => { - if (resolve) { - resolve({success: false}); - } - - if ($originalFocused) { - $originalFocused.trigger('focus'); - $originalFocused = null; - } - - glob.activeDialog = $originalDialog; -}); - -function doResolve(e) { - const $item = $(e.target).closest(".dropdown-item"); - const noteType = $item.attr("data-note-type"); - const templateNoteId = $item.attr("data-template-note-id"); - - resolve({ - success: true, - noteType, - templateNoteId - }); - resolve = null; - - $dialog.modal("hide"); -} - -$noteTypeDropdown.on('click', '.dropdown-item', e => doResolve(e)); - -$noteTypeDropdown.on('focus', '.dropdown-item', e => { - $noteTypeDropdown.find('.dropdown-item').each((i, el) => { - $(el).toggleClass('active', el === e.target); - }); -}); - -$noteTypeDropdown.on('keydown', '.dropdown-item', e => { - if (e.key === 'Enter') { - doResolve(e); - e.preventDefault(); - return false; - } -}); - -$noteTypeDropdown.parent().on('hide.bs.dropdown', e => { - // prevent closing dropdown by clicking outside - if (e.clickEvent) { - e.preventDefault(); - } -}); diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 445c073ced..38f41f2c27 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -60,6 +60,7 @@ import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js"; import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js"; import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js"; import IncludeNoteDialog from "../widgets/dialogs/include_note.js"; +import NoteTypeChooserDialog from "../widgets/dialogs/note_type_chooser.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -194,6 +195,7 @@ export default class DesktopLayout { .child(new BranchPrefixDialog()) .child(new SortChildNotesDialog()) .child(new PasswordNoteSetDialog()) - .child(new IncludeNoteDialog()); + .child(new IncludeNoteDialog()) + .child(new NoteTypeChooserDialog()); } } diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js index 8c365c516f..d7b27f4f32 100644 --- a/src/public/app/services/note_autocomplete.js +++ b/src/public/app/services/note_autocomplete.js @@ -172,8 +172,7 @@ function initNoteAutocomplete($el, options) { } if (suggestion.action === 'create-note') { - const noteTypeChooserDialog = await import('../dialogs/note_type_chooser.js'); - const {success, noteType, templateNoteId} = await noteTypeChooserDialog.chooseNoteType(); + const {success, noteType, templateNoteId} = await noteCreateService.chooseNoteType(); if (!success) { return; diff --git a/src/public/app/services/note_create.js b/src/public/app/services/note_create.js index 4e6a0421a9..39eced7f49 100644 --- a/src/public/app/services/note_create.js +++ b/src/public/app/services/note_create.js @@ -75,9 +75,14 @@ async function createNote(parentNotePath, options = {}) { }; } +async function chooseNoteType() { + return new Promise(res => { + appContext.triggerCommand("chooseNoteType", {callback: res}); + }); +} + async function createNoteWithTypePrompt(parentNotePath, options = {}) { - const noteTypeChooserDialog = await import('../dialogs/note_type_chooser.js'); - const {success, noteType, templateNoteId} = await noteTypeChooserDialog.chooseNoteType(); + const {success, noteType, templateNoteId} = await chooseNoteType(); if (!success) { return; @@ -121,5 +126,6 @@ async function duplicateSubtree(noteId, parentNotePath) { export default { createNote, createNoteWithTypePrompt, - duplicateSubtree + duplicateSubtree, + chooseNoteType }; diff --git a/src/public/app/widgets/dialogs/note_type_chooser.js b/src/public/app/widgets/dialogs/note_type_chooser.js new file mode 100644 index 0000000000..1aebc07cae --- /dev/null +++ b/src/public/app/widgets/dialogs/note_type_chooser.js @@ -0,0 +1,138 @@ +import noteTypesService from "../../services/note_types.js"; +import BasicWidget from "../basic_widget.js"; + +const TPL = ` +`; + +export default class NoteTypeChooserDialog extends BasicWidget { + constructor(props) { + super(props); + + this.resolve = null; + this.$originalFocused = null; // element focused before the dialog was opened, so we can return to it afterwards + this.$originalDialog = null; + } + + doRender() { + this.$widget = $(TPL); + this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown"); + this.$noteTypeDropdownTrigger = this.$widget.find(".note-type-dropdown-trigger"); + this.$noteTypeDropdownTrigger.dropdown(); + + this.$widget.on("hidden.bs.modal", () => { + if (this.resolve) { + this.resolve({success: false}); + } + + if (this.$originalFocused) { + this.$originalFocused.trigger('focus'); + this.$originalFocused = null; + } + + glob.activeDialog = this.$originalDialog; + }); + + this.$noteTypeDropdown.on('click', '.dropdown-item', e => this.doResolve(e)); + + this.$noteTypeDropdown.on('focus', '.dropdown-item', e => { + this.$noteTypeDropdown.find('.dropdown-item').each((i, el) => { + $(el).toggleClass('active', el === e.target); + }); + }); + + this.$noteTypeDropdown.on('keydown', '.dropdown-item', e => { + if (e.key === 'Enter') { + this.doResolve(e); + e.preventDefault(); + return false; + } + }); + + this.$noteTypeDropdown.parent().on('hide.bs.dropdown', e => { + // prevent closing dropdown by clicking outside + if (e.clickEvent) { + e.preventDefault(); + } + }); + } + + async chooseNoteTypeEvent({callback}) { + this.$originalFocused = $(':focus'); + + const noteTypes = await noteTypesService.getNoteTypeItems(); + + this.$noteTypeDropdown.empty(); + + for (const noteType of noteTypes) { + if (noteType.title === '----') { + this.$noteTypeDropdown.append($('
').append("Templates:")); + } + else { + this.$noteTypeDropdown.append( + $('') + .attr("data-note-type", noteType.type) + .attr("data-template-note-id", noteType.templateNoteId) + .append($("").addClass(noteType.uiIcon)) + .append(" " + noteType.title) + ); + } + } + + this.$noteTypeDropdownTrigger.dropdown('show'); + + this.$originalDialog = glob.activeDialog; + glob.activeDialog = this.$widget; + this.$widget.modal(); + + this.$noteTypeDropdown.find(".dropdown-item:first").focus(); + + this.resolve = callback; + } + + doResolve(e) { + const $item = $(e.target).closest(".dropdown-item"); + const noteType = $item.attr("data-note-type"); + const templateNoteId = $item.attr("data-template-note-id"); + + this.resolve({ + success: true, + noteType, + templateNoteId + }); + this.resolve = null; + + this.$widget.modal("hide"); + } +} diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 45b29ee0b3..b74be0d5d4 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -31,7 +31,6 @@ <%- include('dialogs/clone_to.ejs') %> <%- include('dialogs/move_to.ejs') %> <%- include('dialogs/delete_notes.ejs') %> -<%- include('dialogs/note_type_chooser.ejs') %>