diff --git a/src/public/javascripts/services/bundle.js b/src/public/javascripts/services/bundle.js index 796c10e6e..15f55cd38 100644 --- a/src/public/javascripts/services/bundle.js +++ b/src/public/javascripts/services/bundle.js @@ -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 () { diff --git a/src/public/javascripts/services/frontend_script_api.js b/src/public/javascripts/services/frontend_script_api.js index be966ee45..f2fc3fb9b 100644 --- a/src/public/javascripts/services/frontend_script_api.js +++ b/src/public/javascripts/services/frontend_script_api.js @@ -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 */ diff --git a/src/public/javascripts/services/note_detail_book.js b/src/public/javascripts/services/note_detail_book.js index 309f40422..c2a8b32b9 100644 --- a/src/public/javascripts/services/note_detail_book.js +++ b/src/public/javascripts/services/note_detail_book.js @@ -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 = $('
') .attr('data-note-id', childNote.noteId) - .css("flex-basis", ZOOMS[this.zoomLevel] + "%") + .css("flex-basis", ZOOMS[this.zoomLevel].width) .addClass("type-" + childNote.type) .append($('
').append(await linkService.createNoteLink(childNote.noteId, null, false))) - .append($('
').append(await this.getNoteContent(childNote))); + .append($('
') + .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($('
') - .append($(`Show ${label}`)) - .append($(`Hide ${label}`).hide()) + .append($(`+ Show ${label}`)) + .append($(`- Hide ${label}`).hide()) .append($('
')) ); } @@ -145,6 +167,13 @@ class NoteDetailBook { .append('   ') .append($openButton); } + else if (note.type === 'render') { + const $el = $('
'); + + await renderService.render(note, $el, this.ctx); + + return $el; + } else { return "Content of this note cannot be displayed in the book format"; } diff --git a/src/public/javascripts/services/note_detail_render.js b/src/public/javascripts/services/note_detail_render.js index acbee2191..49585942f 100644 --- a/src/public/javascripts/services/note_detail_render.js +++ b/src/public/javascripts/services/note_detail_render.js @@ -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() {} diff --git a/src/public/javascripts/services/render.js b/src/public/javascripts/services/render.js new file mode 100644 index 000000000..393876ca5 --- /dev/null +++ b/src/public/javascripts/services/render.js @@ -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 = $('
'); + $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 +} \ No newline at end of file diff --git a/src/public/javascripts/services/script_context.js b/src/public/javascripts/services/script_context.js index 799c10523..86b1c82f1 100644 --- a/src/public/javascripts/services/script_context.js +++ b/src/public/javascripts/services/script_context.js @@ -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)); diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index f1a3e8172..4ad5cd91f 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -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; diff --git a/src/views/details/book.ejs b/src/views/details/book.ejs index 35169052b..d08f82d67 100644 --- a/src/views/details/book.ejs +++ b/src/views/details/book.ejs @@ -1,5 +1,5 @@
-
+