diff --git a/src/public/app/dialogs/add_link.js b/src/public/app/dialogs/add_link.js deleted file mode 100644 index 047ef73a9..000000000 --- a/src/public/app/dialogs/add_link.js +++ /dev/null @@ -1,131 +0,0 @@ -import treeService from '../services/tree.js'; -import noteAutocompleteService from "../services/note_autocomplete.js"; -import utils from "../services/utils.js"; - -const $dialog = $("#add-link-dialog"); -const $form = $("#add-link-form"); -const $autoComplete = $("#add-link-note-autocomplete"); -const $linkTitle = $("#link-title"); -const $addLinkTitleSettings = $("#add-link-title-settings"); -const $addLinkTitleRadios = $(".add-link-title-radios"); -const $addLinkTitleFormGroup = $("#add-link-title-form-group"); - -/** @var TextTypeWidget */ -let textTypeWidget; - -export async function showDialog(widget, text = '') { - textTypeWidget = widget; - - $addLinkTitleSettings.toggle(!textTypeWidget.hasSelection()); - - $addLinkTitleSettings.find('input[type=radio]').on('change', updateTitleSettingsVisibility); - - // with selection hyper link is implied - if (textTypeWidget.hasSelection()) { - $addLinkTitleSettings.find("input[value='hyper-link']").prop("checked", true); - } - else { - $addLinkTitleSettings.find("input[value='reference-link']").prop("checked", true); - } - - updateTitleSettingsVisibility(); - - utils.openDialog($dialog); - - $autoComplete.val(''); - $linkTitle.val(''); - - async function setDefaultLinkTitle(noteId) { - const noteTitle = await treeService.getNoteTitle(noteId); - - $linkTitle.val(noteTitle); - } - - noteAutocompleteService.initNoteAutocomplete($autoComplete, { - allowExternalLinks: true, - allowCreatingNotes: true - }); - - $autoComplete.on('autocomplete:noteselected', (event, suggestion, dataset) => { - if (!suggestion.notePath) { - return false; - } - - updateTitleSettingsVisibility(); - - const noteId = treeService.getNoteIdFromNotePath(suggestion.notePath); - - if (noteId) { - setDefaultLinkTitle(noteId); - } - }); - - $autoComplete.on('autocomplete:externallinkselected', (event, suggestion, dataset) => { - if (!suggestion.externalLink) { - return false; - } - - updateTitleSettingsVisibility(); - - $linkTitle.val(suggestion.externalLink); - }); - - $autoComplete.on('autocomplete:cursorchanged', function(event, suggestion, dataset) { - if (suggestion.externalLink) { - $linkTitle.val(suggestion.externalLink) - } - else { - const noteId = treeService.getNoteIdFromNotePath(suggestion.notePath); - - if (noteId) { - setDefaultLinkTitle(noteId); - } - } - }); - - if (text && text.trim()) { - noteAutocompleteService.setText($autoComplete, text); - } - else { - noteAutocompleteService.showRecentNotes($autoComplete); - } - - $autoComplete - .trigger('focus') - .trigger('select'); // to be able to quickly remove entered text -} - -function getLinkType() { - if ($autoComplete.getSelectedExternalLink()) { - return 'external-link'; - } - - return $addLinkTitleSettings.find('input[type=radio]:checked').val(); -} - -function updateTitleSettingsVisibility() { - const linkType = getLinkType(); - - $addLinkTitleFormGroup.toggle(linkType !== 'reference-link'); - $addLinkTitleRadios.toggle(linkType !== 'external-link') -} - -$form.on('submit', () => { - if ($autoComplete.getSelectedNotePath()) { - $dialog.modal('hide'); - - const linkTitle = getLinkType() === 'reference-link' ? null : $linkTitle.val(); - - textTypeWidget.addLink($autoComplete.getSelectedNotePath(), linkTitle); - } - else if ($autoComplete.getSelectedExternalLink()) { - $dialog.modal('hide'); - - textTypeWidget.addLink($autoComplete.getSelectedExternalLink(), $linkTitle.val()); - } - else { - logError("No link to add."); - } - - return false; -}); diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 99df11756..fa696fb76 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -62,6 +62,7 @@ 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"; import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js"; +import AddLinkDialog from "../widgets/dialogs/add_link.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -198,6 +199,7 @@ export default class DesktopLayout { .child(new PasswordNoteSetDialog()) .child(new IncludeNoteDialog()) .child(new NoteTypeChooserDialog()) - .child(new JumpToNoteDialog()); + .child(new JumpToNoteDialog()) + .child(new AddLinkDialog()); } } diff --git a/src/public/app/widgets/dialogs/add_link.js b/src/public/app/widgets/dialogs/add_link.js new file mode 100644 index 000000000..76d1181e9 --- /dev/null +++ b/src/public/app/widgets/dialogs/add_link.js @@ -0,0 +1,191 @@ +import treeService from '../../services/tree.js'; +import noteAutocompleteService from "../../services/note_autocomplete.js"; +import utils from "../../services/utils.js"; +import BasicWidget from "../basic_widget.js"; + +const TPL = ` +`; + +export default class AddLinkDialog extends BasicWidget { + doRender() { + this.$widget = $(TPL); + this.$form = this.$widget.find(".add-link-form"); + this.$autoComplete = this.$widget.find(".add-link-note-autocomplete"); + this.$linkTitle = this.$widget.find(".link-title"); + this.$addLinkTitleSettings = this.$widget.find(".add-link-title-settings"); + this.$addLinkTitleRadios = this.$widget.find(".add-link-title-radios"); + this.$addLinkTitleFormGroup = this.$widget.find(".add-link-title-form-group"); + + /** @var TextTypeWidget */ + this.textTypeWidget = null; + + this.$form.on('submit', () => { + if (this.$autoComplete.getSelectedNotePath()) { + this.$widget.modal('hide'); + + const linkTitle = this.getLinkType() === 'reference-link' ? null : this.$linkTitle.val(); + + this.textTypeWidget.addLink(this.$autoComplete.getSelectedNotePath(), linkTitle); + } + else if (this.$autoComplete.getSelectedExternalLink()) { + this.$widget.modal('hide'); + + this.textTypeWidget.addLink(this.$autoComplete.getSelectedExternalLink(), this.$linkTitle.val()); + } + else { + logError("No link to add."); + } + + return false; + }); + } + + async showAddLinkDialogEvent({textTypeWidget, text = ''}) { + this.textTypeWidget = textTypeWidget; + + this.$addLinkTitleSettings.toggle(!this.textTypeWidget.hasSelection()); + + this.$addLinkTitleSettings.find('input[type=radio]').on('change', e => this.updateTitleSettingsVisibility(e)); + + // with selection hyper link is implied + if (this.textTypeWidget.hasSelection()) { + this.$addLinkTitleSettings.find("input[value='hyper-link']").prop("checked", true); + } + else { + this.$addLinkTitleSettings.find("input[value='reference-link']").prop("checked", true); + } + + this.updateTitleSettingsVisibility(); + + utils.openDialog(this.$widget); + + this.$autoComplete.val(''); + this.$linkTitle.val(''); + + const setDefaultLinkTitle = async noteId => { + const noteTitle = await treeService.getNoteTitle(noteId); + + this.$linkTitle.val(noteTitle); + }; + + noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, { + allowExternalLinks: true, + allowCreatingNotes: true + }); + + this.$autoComplete.on('autocomplete:noteselected', (event, suggestion, dataset) => { + if (!suggestion.notePath) { + return false; + } + + this.updateTitleSettingsVisibility(); + + const noteId = treeService.getNoteIdFromNotePath(suggestion.notePath); + + if (noteId) { + setDefaultLinkTitle(noteId); + } + }); + + this.$autoComplete.on('autocomplete:externallinkselected', (event, suggestion, dataset) => { + if (!suggestion.externalLink) { + return false; + } + + this.updateTitleSettingsVisibility(); + + this.$linkTitle.val(suggestion.externalLink); + }); + + this.$autoComplete.on('autocomplete:cursorchanged', (event, suggestion, dataset) => { + if (suggestion.externalLink) { + this.$linkTitle.val(suggestion.externalLink) + } + else { + const noteId = treeService.getNoteIdFromNotePath(suggestion.notePath); + + if (noteId) { + setDefaultLinkTitle(noteId); + } + } + }); + + if (text && text.trim()) { + noteAutocompleteService.setText(this.$autoComplete, text); + } + else { + noteAutocompleteService.showRecentNotes(this.$autoComplete); + } + + this.$autoComplete + .trigger('focus') + .trigger('select'); // to be able to quickly remove entered text + } + + getLinkType() { + if (this.$autoComplete.getSelectedExternalLink()) { + return 'external-link'; + } + + return this.$addLinkTitleSettings.find('input[type=radio]:checked').val(); + } + + updateTitleSettingsVisibility() { + const linkType = this.getLinkType(); + + this.$addLinkTitleFormGroup.toggle(linkType !== 'reference-link'); + this.$addLinkTitleRadios.toggle(linkType !== 'external-link') + } +} diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index aad91afeb..b36048611 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -246,7 +246,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { addLinkToTextCommand() { const selectedText = this.getSelectedText(); - import("../../dialogs/add_link.js").then(d => d.showDialog(this, selectedText)); + this.triggerCommand('showAddLinkDialog', {textTypeWidget: this, text: selectedText}) } getSelectedText() { diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index f80e460c6..797bae1b8 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -17,7 +17,6 @@ -<%- include('dialogs/add_link.ejs') %> <%- include('dialogs/export.ejs') %> <%- include('dialogs/import.ejs') %> <%- include('dialogs/markdown_import.ejs') %> diff --git a/src/views/dialogs/add_link.ejs b/src/views/dialogs/add_link.ejs deleted file mode 100644 index 02c62df5c..000000000 --- a/src/views/dialogs/add_link.ejs +++ /dev/null @@ -1,50 +0,0 @@ -