mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
converted add link dialog to new pattern
This commit is contained in:
zadam
parent
6ebf7ae94e
commit
0468ca6814
@ -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;
|
||||
});
|
||||
@ -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());
|
||||
}
|
||||
}
|
||||
|
||||
191
src/public/app/widgets/dialogs/add_link.js
Normal file
191
src/public/app/widgets/dialogs/add_link.js
Normal file
@ -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 = `
|
||||
<div class="add-link-dialog modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">Add link</h5>
|
||||
|
||||
<button type="button" class="help-button" title="Help on links" data-help-page="Links">?</button>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form class="add-link-form">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="add-link-note-autocomplete">Note</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input class="add-link-note-autocomplete form-control" placeholder="search for note by its name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-link-title-settings">
|
||||
<div class="add-link-title-radios form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="link-type" value="reference-link" checked>
|
||||
link title mirrors the note's current title
|
||||
</label>
|
||||
</div>
|
||||
<div class="add-link-title-radios form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="link-type" value="hyper-link">
|
||||
link title can be changed arbitrarily
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="add-link-title-form-group form-group">
|
||||
<br/>
|
||||
<label>
|
||||
Link title
|
||||
|
||||
<input class="link-title form-control" style="width: 100%;">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Add link <kbd>enter</kbd></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
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')
|
||||
}
|
||||
}
|
||||
@ -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() {
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
|
||||
<%- include('dialogs/add_link.ejs') %>
|
||||
<%- include('dialogs/export.ejs') %>
|
||||
<%- include('dialogs/import.ejs') %>
|
||||
<%- include('dialogs/markdown_import.ejs') %>
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
<div id="add-link-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title mr-auto">Add link</h5>
|
||||
|
||||
<button type="button" class="help-button" title="Help on links" data-help-page="Links">?</button>
|
||||
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="add-link-form">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="add-link-note-autocomplete">Note</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input id="add-link-note-autocomplete" class="form-control" placeholder="search for note by its name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add-link-title-settings">
|
||||
<div class="form-check add-link-title-radios">
|
||||
<input class="form-check-input" type="radio" name="link-type" value="reference-link" id="add-link-reference-link" checked>
|
||||
<label class="form-check-label" for="add-link-reference-link">
|
||||
link title mirrors the note's current title
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check add-link-title-radios">
|
||||
<input class="form-check-input" type="radio" name="link-type" value="hyper-link" id="add-link-hyper-link">
|
||||
<label class="form-check-label" for="add-link-hyper-link">
|
||||
link title can be changed arbitrarily
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="add-link-title-form-group">
|
||||
<br/>
|
||||
<label for="link-title">Link title</label>
|
||||
<input id="link-title" class="form-control" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Add link <kbd>enter</kbd></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user