mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
render notes in book
This commit is contained in:
zadam
parent
5892b5b851
commit
7c54ba63ce
@ -8,8 +8,8 @@ async function getAndExecuteBundle(noteId, originEntity = null) {
|
||||
return await executeBundle(bundle, originEntity);
|
||||
}
|
||||
|
||||
async function executeBundle(bundle, originEntity, tabContext) {
|
||||
const apiContext = await ScriptContext(bundle.noteId, bundle.allNoteIds, originEntity, tabContext);
|
||||
async function executeBundle(bundle, originEntity, tabContext, $container) {
|
||||
const apiContext = await ScriptContext(bundle.noteId, bundle.allNoteIds, originEntity, tabContext, $container);
|
||||
|
||||
try {
|
||||
return await (function () {
|
||||
|
||||
@ -16,9 +16,12 @@ import StandardWidget from '../widgets/standard_widget.js';
|
||||
* @constructor
|
||||
* @hideconstructor
|
||||
*/
|
||||
function FrontendScriptApi(startNote, currentNote, originEntity = null, tabContext = null) {
|
||||
function FrontendScriptApi(startNote, currentNote, originEntity = null, tabContext = null, $container = null) {
|
||||
const $pluginButtons = $("#plugin-buttons");
|
||||
|
||||
/** @property {jQuery} container of all the rendered script content */
|
||||
this.$container = $container;
|
||||
|
||||
/** @property {object} note where script started executing */
|
||||
this.startNote = startNote;
|
||||
/** @property {object} note where script is currently executing */
|
||||
|
||||
@ -2,17 +2,36 @@ import server from "./server.js";
|
||||
import linkService from "./link.js";
|
||||
import utils from "./utils.js";
|
||||
import treeCache from "./tree_cache.js";
|
||||
import renderService from "./render.js";
|
||||
|
||||
const MIN_ZOOM_LEVEL = 1;
|
||||
const MAX_ZOOM_LEVEL = 6;
|
||||
|
||||
const ZOOMS = {
|
||||
1: 100,
|
||||
2: 49,
|
||||
3: 32,
|
||||
4: 24,
|
||||
5: 19,
|
||||
6: 16
|
||||
1: {
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
},
|
||||
2: {
|
||||
width: "49%",
|
||||
height: "350px"
|
||||
},
|
||||
3: {
|
||||
width: "32%",
|
||||
height: "250px"
|
||||
},
|
||||
4: {
|
||||
width: "24%",
|
||||
height: "200px"
|
||||
},
|
||||
5: {
|
||||
width: "19%",
|
||||
height: "175px"
|
||||
},
|
||||
6: {
|
||||
width: "16%",
|
||||
height: "150px"
|
||||
}
|
||||
};
|
||||
|
||||
class NoteDetailBook {
|
||||
@ -57,7 +76,8 @@ class NoteDetailBook {
|
||||
this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL);
|
||||
this.$zoomOutButton.prop("disabled", zoomLevel === MAX_ZOOM_LEVEL);
|
||||
|
||||
this.$content.find('.note-book-card').css("flex-basis", ZOOMS[zoomLevel] + "%");
|
||||
this.$content.find('.note-book-card').css("flex-basis", ZOOMS[zoomLevel].width);
|
||||
this.$content.find('.note-book-content').css("max-height", ZOOMS[zoomLevel].height);
|
||||
}
|
||||
|
||||
async render() {
|
||||
@ -70,10 +90,12 @@ class NoteDetailBook {
|
||||
for (const childNote of await note.getChildNotes()) {
|
||||
const $card = $('<div class="note-book-card">')
|
||||
.attr('data-note-id', childNote.noteId)
|
||||
.css("flex-basis", ZOOMS[this.zoomLevel] + "%")
|
||||
.css("flex-basis", ZOOMS[this.zoomLevel].width)
|
||||
.addClass("type-" + childNote.type)
|
||||
.append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNote.noteId, null, false)))
|
||||
.append($('<div class="note-book-content">').append(await this.getNoteContent(childNote)));
|
||||
.append($('<div class="note-book-content">')
|
||||
.css("max-height", ZOOMS[this.zoomLevel].height)
|
||||
.append(await this.getNoteContent(childNote)));
|
||||
|
||||
const childCount = childNote.getChildNoteIds().length;
|
||||
|
||||
@ -81,8 +103,8 @@ class NoteDetailBook {
|
||||
const label = `${childCount} child${childCount > 1 ? 'ren' : ''}`;
|
||||
|
||||
$card.append($('<div class="note-book-children">')
|
||||
.append($(`<a class="note-book-open-children-button" href="javascript:">Show ${label}</a>`))
|
||||
.append($(`<a class="note-book-hide-children-button" href="javascript:">Hide ${label}</a>`).hide())
|
||||
.append($(`<a class="note-book-open-children-button" href="javascript:">+ Show ${label}</a>`))
|
||||
.append($(`<a class="note-book-hide-children-button" href="javascript:">- Hide ${label}</a>`).hide())
|
||||
.append($('<div class="note-book-children-content">'))
|
||||
);
|
||||
}
|
||||
@ -145,6 +167,13 @@ class NoteDetailBook {
|
||||
.append(' ')
|
||||
.append($openButton);
|
||||
}
|
||||
else if (note.type === 'render') {
|
||||
const $el = $('<div>');
|
||||
|
||||
await renderService.render(note, $el, this.ctx);
|
||||
|
||||
return $el;
|
||||
}
|
||||
else {
|
||||
return "<em>Content of this note cannot be displayed in the book format</em>";
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import bundleService from "./bundle.js";
|
||||
import server from "./server.js";
|
||||
import renderService from "./render.js";
|
||||
|
||||
class NoteDetailRender {
|
||||
/**
|
||||
@ -16,29 +15,10 @@ class NoteDetailRender {
|
||||
}
|
||||
|
||||
async render() {
|
||||
const attributes = await this.ctx.attributes.getAttributes();
|
||||
const renderNotes = attributes.filter(attr =>
|
||||
attr.type === 'relation'
|
||||
&& attr.name === 'renderNote'
|
||||
&& !!attr.value);
|
||||
|
||||
this.$component.show();
|
||||
this.$noteDetailRenderHelp.hide();
|
||||
|
||||
this.$noteDetailRenderContent.empty();
|
||||
this.$noteDetailRenderContent.toggle(renderNotes.length > 0);
|
||||
this.$noteDetailRenderHelp.toggle(renderNotes.length === 0);
|
||||
|
||||
for (const renderNote of renderNotes) {
|
||||
const bundle = await server.get('script/bundle/' + renderNote.value);
|
||||
|
||||
this.$noteDetailRenderContent.append(bundle.html);
|
||||
|
||||
const $result = await bundleService.executeBundle(bundle, this.ctx.note, this.ctx);
|
||||
|
||||
if ($result) {
|
||||
this.$noteDetailRenderContent.append($result);
|
||||
}
|
||||
}
|
||||
await renderService.render(this.ctx.note, this.$noteDetailRenderContent, this.ctx);
|
||||
}
|
||||
|
||||
getContent() {}
|
||||
|
||||
33
src/public/javascripts/services/render.js
Normal file
33
src/public/javascripts/services/render.js
Normal file
@ -0,0 +1,33 @@
|
||||
import server from "./server.js";
|
||||
import bundleService from "./bundle.js";
|
||||
|
||||
async function render(note, $el, ctx) {
|
||||
const attributes = await note.getAttributes();
|
||||
const renderNoteIds = attributes.filter(attr =>
|
||||
attr.type === 'relation'
|
||||
&& attr.name === 'renderNote'
|
||||
&& !!attr.value).map(rel => rel.value);
|
||||
|
||||
$el.empty().toggle(renderNoteIds.length > 0);
|
||||
|
||||
for (const renderNoteId of renderNoteIds) {
|
||||
const bundle = await server.get('script/bundle/' + renderNoteId);
|
||||
|
||||
const $scriptContainer = $('<div>');
|
||||
$el.append($scriptContainer);
|
||||
|
||||
$scriptContainer.append(bundle.html);
|
||||
|
||||
const $result = await bundleService.executeBundle(bundle, note, ctx, $scriptContainer);
|
||||
|
||||
if ($result) {
|
||||
$scriptContainer.append($result);
|
||||
}
|
||||
}
|
||||
|
||||
return renderNoteIds.length > 0;
|
||||
}
|
||||
|
||||
export default {
|
||||
render
|
||||
}
|
||||
@ -2,7 +2,7 @@ import FrontendScriptApi from './frontend_script_api.js';
|
||||
import utils from './utils.js';
|
||||
import treeCache from './tree_cache.js';
|
||||
|
||||
async function ScriptContext(startNoteId, allNoteIds, originEntity = null, tabContext = null) {
|
||||
async function ScriptContext(startNoteId, allNoteIds, originEntity = null, tabContext = null, $container = null) {
|
||||
const modules = {};
|
||||
|
||||
const startNote = await treeCache.getNote(startNoteId);
|
||||
@ -11,7 +11,7 @@ async function ScriptContext(startNoteId, allNoteIds, originEntity = null, tabCo
|
||||
return {
|
||||
modules: modules,
|
||||
notes: utils.toObject(allNotes, note => [note.noteId, note]),
|
||||
apis: utils.toObject(allNotes, note => [note.noteId, new FrontendScriptApi(startNote, note, originEntity, tabContext)]),
|
||||
apis: utils.toObject(allNotes, note => [note.noteId, new FrontendScriptApi(startNote, note, originEntity, tabContext, $container)]),
|
||||
require: moduleNoteIds => {
|
||||
return moduleName => {
|
||||
const candidates = allNotes.filter(note => moduleNoteIds.includes(note.noteId));
|
||||
|
||||
@ -848,10 +848,10 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
|
||||
}
|
||||
|
||||
.note-book-content {
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.note-book.type-image .note-book-content, .note-book.type-file .note-book-content {
|
||||
.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="note-detail-book note-detail-component">
|
||||
<div class="btn-group floating-button" style="right: 25px; top: 20px;">
|
||||
<div class="btn-group floating-button" style="right: 10px; top: 20px;">
|
||||
<button type="button"
|
||||
class="book-zoom-in btn icon-button jam jam-search-plus"
|
||||
title="Zoom In"></button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user