use relations to pick note to render, fixes #141

src/public/javascripts/services/note_detail.js

@@ -38,6 +38,8 @@ let noteChangeDisabled = false;
 
 let isNoteChanged = false;
 
+let attributePromise;
+
 const components = {
     'code': noteDetailCode,
     'text': noteDetailText,
@@ -147,6 +149,7 @@ async function handleProtectedSession() {
 
 async function loadNoteDetail(noteId) {
     currentNote = await loadNote(noteId);
+    refreshAttributes(); // needs to happend after loading the note itself because it references current noteId
 
     if (isNewNoteCreated) {
         isNewNoteCreated = false;
@@ -191,13 +194,15 @@ async function loadNoteDetail(noteId) {
 
     await bundleService.executeRelationBundles(getCurrentNote(), 'runOnNoteView');
 
-    const attributes = await loadAttributes();
+    await showAttributes();
 
-    const hideChildrenOverview = attributes.some(attr => attr.type === 'label' && attr.name === 'hideChildrenOverview');
-    await showChildrenOverview(hideChildrenOverview);
+    await showChildrenOverview();
 }
 
-async function showChildrenOverview(hideChildrenOverview) {
+async function showChildrenOverview() {
+    const attributes = await attributePromise;
+    const hideChildrenOverview = attributes.some(attr => attr.type === 'label' && attr.name === 'hideChildrenOverview');
+
     if (hideChildrenOverview) {
         $childrenOverview.hide();
         return;
@@ -222,13 +227,23 @@ async function showChildrenOverview(hideChildrenOverview) {
     $childrenOverview.show();
 }
 
-async function loadAttributes() {
+async function refreshAttributes() {
+    attributePromise = server.get('notes/' + getCurrentNoteId() + '/attributes');
+
+    await showAttributes();
+}
+
+async function getAttributes() {
+    return await attributePromise;
+}
+
+async function showAttributes() {
     $promotedAttributesContainer.empty();
     $attributeList.hide();
 
     const noteId = getCurrentNoteId();
 
-    const attributes = await server.get('notes/' + noteId + '/attributes');
+    const attributes = await attributePromise;
 
     const promoted = attributes.filter(attr =>
         (attr.type === 'label-definition' || attr.type === 'relation-definition')
@@ -525,7 +540,9 @@ export default {
     getCurrentNoteId,
     newNoteCreated,
     focus,
-    loadAttributes,
+    getAttributes,
+    showAttributes,
+    refreshAttributes,
     saveNote,
     saveNoteIfChanged,
     noteChanged

src/public/javascripts/services/note_detail_render.js

@@ -1,73 +1,38 @@
 import bundleService from "./bundle.js";
 import server from "./server.js";
 import noteDetailService from "./note_detail.js";
-import noteDetailCodeService from "./note_detail_code.js";
 
-const $noteDetailCode = $('#note-detail-code');
 const $noteDetailRender = $('#note-detail-render');
-const $toggleEditButton = $('#toggle-edit-button');
+const $noteDetailRenderHelp = $('#note-detail-render-help');
+const $noteDetailRenderContent = $('#note-detail-render-content');
 const $renderButton = $('#render-button');
 
-let codeEditorInitialized;
+async function render() {
+    const attributes = await noteDetailService.getAttributes();
+    const renderNotes = attributes.filter(attr =>
+        attr.type === 'relation'
+        && attr.name === 'renderNote'
+        && !!attr.value);
 
-async function show() {
-    codeEditorInitialized = false;
+    $noteDetailRender.show();
 
-    $noteDetailRender.empty().show();
+    $noteDetailRenderContent.empty();
+    $noteDetailRenderContent.toggle(renderNotes.length > 0);
+    $noteDetailRenderHelp.toggle(renderNotes.length === 0);
 
-    await render();
-}
+    for (const renderNote of renderNotes) {
+        const bundle = await server.get('script/bundle/' + renderNote.value);
 
-async function toggleEdit() {
-    if ($noteDetailCode.is(":visible")) {
-        $noteDetailCode.hide();
-    }
-    else {
-        if (!codeEditorInitialized) {
-            await noteDetailCodeService.show();
+        $noteDetailRenderContent.append(bundle.html);
 
-            // because we can't properly scroll only the editor without scrolling the rendering
-            // we limit its height
-            $noteDetailCode.find('.CodeMirror').css('height', '300');
-
-            codeEditorInitialized = true;
-        }
-        else {
-            $noteDetailCode.show();
-        }
+        await bundleService.executeBundle(bundle);
     }
 }
 
-$toggleEditButton.click(toggleEdit);
-
 $renderButton.click(render);
 
-async function render() {
-    // ctrl+enter is also used elsewhere so make sure we're running only when appropriate
-    if (noteDetailService.getCurrentNoteType() !== 'render') {
-        return;
-    }
-
-    if (codeEditorInitialized) {
-        await noteDetailService.saveNoteIfChanged();
-    }
-
-    const bundle = await server.get('script/bundle/' + noteDetailService.getCurrentNoteId());
-
-    $noteDetailRender.html(bundle.html);
-
-    // if the note is empty, it doesn't make sense to do render-only since nothing will be rendered
-    if (!bundle.html.trim()) {
-        toggleEdit();
-    }
-
-    await bundleService.executeBundle(bundle);
-}
-
-$(document).bind('keydown', "ctrl+return", render);
-
 export default {
-    show,
-    getContent: noteDetailCodeService.getContent,
+    show: render,
+    getContent: () => "",
     focus: () => null
 }