From f8bd55374f2de397b12554367d931a019ec30714 Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 7 Apr 2020 21:28:40 +0200 Subject: [PATCH] support for included notes and reference links also in read only text views --- .../type_widgets/abstract_text_type_widget.js | 57 ++++++++++++++++++ .../widgets/type_widgets/editable_text.js | 35 ++--------- .../widgets/type_widgets/read_only_text.js | 60 +++++++++---------- 3 files changed, 91 insertions(+), 61 deletions(-) create mode 100644 src/public/javascripts/widgets/type_widgets/abstract_text_type_widget.js diff --git a/src/public/javascripts/widgets/type_widgets/abstract_text_type_widget.js b/src/public/javascripts/widgets/type_widgets/abstract_text_type_widget.js new file mode 100644 index 000000000..9ab1cab56 --- /dev/null +++ b/src/public/javascripts/widgets/type_widgets/abstract_text_type_widget.js @@ -0,0 +1,57 @@ +import TypeWidget from "./type_widget.js"; +import appContext from "../../services/app_context.js"; +import treeCache from "../../services/tree_cache.js"; +import linkService from "../../services/link.js"; +import noteContentRenderer from "../../services/note_content_renderer.js"; + +export default class AbstractTextTypeWidget extends TypeWidget { + doRender() { + this.$widget.on("dblclick", "img", e => { + const $img = $(e.target); + const src = $img.prop("src"); + + const match = src.match(/\/api\/images\/([A-Za-z0-9]+)\//); + + if (match) { + const noteId = match[1]; + + appContext.tabManager.getActiveTabContext().setNote(noteId); + } + else { + window.open(src, '_blank'); + } + }); + } + + async loadIncludedNote(noteId, $el) { + const note = await treeCache.getNote(noteId); + + if (note) { + $el.empty().append($("

").append(await linkService.createNoteLink(note.noteId, { + showTooltip: false + }))); + + const {renderedContent} = await noteContentRenderer.getRenderedContent(note); + + $el.append(renderedContent); + } + } + + async loadReferenceLinkTitle(noteId, $el) { + const note = await treeCache.getNote(noteId, true); + + let title; + + if (!note) { + title = '[missing]'; + } + else if (!note.isDeleted) { + title = note.title; + } + else { + title = note.isErased ? '[erased]' : `${note.title} (deleted)`; + } + + $el.text(title); + } +} \ No newline at end of file diff --git a/src/public/javascripts/widgets/type_widgets/editable_text.js b/src/public/javascripts/widgets/type_widgets/editable_text.js index c2d4ed643..0854b1e64 100644 --- a/src/public/javascripts/widgets/type_widgets/editable_text.js +++ b/src/public/javascripts/widgets/type_widgets/editable_text.js @@ -8,6 +8,7 @@ import keyboardActionService from "../../services/keyboard_actions.js"; import treeCache from "../../services/tree_cache.js"; import linkService from "../../services/link.js"; import noteContentRenderer from "../../services/note_content_renderer.js"; +import AbstractTextTypeWidget from "./abstract_text_type_widget.js"; const ENABLE_INSPECTOR = false; @@ -78,33 +79,19 @@ const TPL = ` `; -export default class EditableTextTypeWidget extends TypeWidget { +export default class EditableTextTypeWidget extends AbstractTextTypeWidget { static getType() { return "editable-text"; } doRender() { this.$widget = $(TPL); this.$editor = this.$widget.find('.note-detail-text-editor'); - this.$widget.on("dblclick", "img", e => { - const $img = $(e.target); - const src = $img.prop("src"); - - const match = src.match(/\/api\/images\/([A-Za-z0-9]+)\//); - - if (match) { - const noteId = match[1]; - - appContext.tabManager.getActiveTabContext().setNote(noteId); - } - else { - window.open(src, '_blank'); - } - }); - this.initialized = this.initEditor(); keyboardActionService.setupActionsForElement('text-detail', this.$widget, this); + super.doRender(); + return this.$widget; } @@ -250,20 +237,6 @@ export default class EditableTextTypeWidget extends TypeWidget { import("../../dialogs/include_note.js").then(d => d.showDialog(this)); } - async loadIncludedNote(noteId, el) { - const note = await treeCache.getNote(noteId); - - if (note) { - $(el).empty().append($("

").append(await linkService.createNoteLink(note.noteId, { - showTooltip: false - }))); - - const {renderedContent} = await noteContentRenderer.getRenderedContent(note); - - $(el).append(renderedContent); - } - } - addIncludeNote(noteId) { this.textEditor.model.change( writer => { // Insert * at the current selection position diff --git a/src/public/javascripts/widgets/type_widgets/read_only_text.js b/src/public/javascripts/widgets/type_widgets/read_only_text.js index 28dce7051..da5b247dd 100644 --- a/src/public/javascripts/widgets/type_widgets/read_only_text.js +++ b/src/public/javascripts/widgets/type_widgets/read_only_text.js @@ -1,25 +1,25 @@ -import TypeWidget from "./type_widget.js"; -import appContext from "../../services/app_context.js"; import treeCache from "../../services/tree_cache.js"; +import AbstractTextTypeWidget from "./abstract_text_type_widget.js"; +import treeService from "../../services/tree.js"; const TPL = ` -
+
@@ -28,32 +28,17 @@ const TPL = ` Read only text view is shown. Click here to edit the note.
-
+
`; -export default class ReadOnlyTextTypeWidget extends TypeWidget { +export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget { static getType() { return "read-only-text"; } doRender() { this.$widget = $(TPL); - this.$content = this.$widget.find('.note-detail-text-preview-content'); - this.$widget.on("dblclick", "img", e => { - const $img = $(e.target); - const src = $img.prop("src"); - - const match = src.match(/\/api\/images\/([A-Za-z0-9]+)\//); - - if (match) { - const noteId = match[1]; - - appContext.tabManager.getActiveTabContext().setNote(noteId); - } - else { - window.open(src, '_blank'); - } - }); + this.$content = this.$widget.find('.note-detail-readonly-text-content'); this.$widget.find('a.edit-note').on('click', () => { this.tabContext.textPreviewDisabled = true; @@ -61,6 +46,8 @@ export default class ReadOnlyTextTypeWidget extends TypeWidget { this.triggerEvent('textPreviewDisabled', {tabContext: this.tabContext}); }); + super.doRender(); + return this.$widget; } @@ -76,5 +63,18 @@ export default class ReadOnlyTextTypeWidget extends TypeWidget { const noteComplement = await treeCache.getNoteComplement(note.noteId); this.$content.html(noteComplement.content); + + this.$content.find("a.reference-link").each(async (_, el) => { + const notePath = $(el).attr('href'); + const noteId = treeService.getNoteIdFromNotePath(notePath); + + this.loadReferenceLinkTitle(noteId, $(el)); + }); + + this.$content.find("section").each(async (_, el) => { + const noteId = $(el).attr('data-note-id'); + + this.loadIncludedNote(noteId, $(el)); + }); } } \ No newline at end of file