support for included notes and reference links also in read only text views

This commit is contained in:
zadam 2020-04-07 21:28:40 +02:00
parent 3ccb1c6ac1
commit f8bd55374f
3 changed files with 91 additions and 61 deletions

View File

@ -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($("<h3>").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);
}
}

View File

@ -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 = `
</div>
`;
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($("<h3>").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 <includeNote>*</includeNote> at the current selection position

View File

@ -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 = `
<div class="note-detail-text-preview note-detail-printable">
<div class="note-detail-readonly-text note-detail-printable">
<style>
.note-detail-text-preview h1 { font-size: 2.0em; }
.note-detail-text-preview h2 { font-size: 1.8em; }
.note-detail-text-preview h3 { font-size: 1.6em; }
.note-detail-text-preview h4 { font-size: 1.4em; }
.note-detail-text-preview h5 { font-size: 1.2em; }
.note-detail-text-preview h6 { font-size: 1.1em; }
.note-detail-readonly-text h1 { font-size: 2.0em; }
.note-detail-readonly-text h2 { font-size: 1.8em; }
.note-detail-readonly-text h3 { font-size: 1.6em; }
.note-detail-readonly-text h4 { font-size: 1.4em; }
.note-detail-readonly-text h5 { font-size: 1.2em; }
.note-detail-readonly-text h6 { font-size: 1.1em; }
.note-detail-text-preview {
overflow: auto;
.note-detail-readonly-text {
overflow: auto;y
height: 100%;
padding: 10px;
font-family: var(--detail-text-font-family);
}
.note-detail-text-preview p:first-child, .note-detail-text::before {
.note-detail-readonly-text p:first-child, .note-detail-text::before {
margin-top: 0;
}
</style>
@ -28,32 +28,17 @@ const TPL = `
Read only text view is shown. <a href="#" class="edit-note">Click here</a> to edit the note.
</div>
<div class="note-detail-text-preview-content"></div>
<div class="note-detail-readonly-text-content"></div>
</div>
`;
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));
});
}
}