mirror of
https://github.com/zadam/trilium.git
synced 2025-06-05 01:18:44 +02:00
note list renderer WIP
This commit is contained in:
zadam
parent
79431d8b4b
commit
1369603ed9
5413
package-lock.json
generated
5413
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@ -32,7 +32,7 @@
|
||||
"commonmark": "0.29.2",
|
||||
"cookie-parser": "1.4.5",
|
||||
"csurf": "1.11.0",
|
||||
"dayjs": "1.9.1",
|
||||
"dayjs": "1.9.3",
|
||||
"ejs": "3.1.5",
|
||||
"electron-debug": "3.1.0",
|
||||
"electron-dl": "3.0.2",
|
||||
@ -40,7 +40,7 @@
|
||||
"electron-window-state": "5.0.3",
|
||||
"express": "4.17.1",
|
||||
"express-session": "1.17.1",
|
||||
"file-type": "15.0.1",
|
||||
"file-type": "16.0.0",
|
||||
"fs-extra": "9.0.1",
|
||||
"helmet": "4.1.1",
|
||||
"html": "1.0.0",
|
||||
@ -61,14 +61,14 @@
|
||||
"request": "^2.88.2",
|
||||
"rimraf": "3.0.2",
|
||||
"sanitize-filename": "1.6.3",
|
||||
"sanitize-html": "2.1.0",
|
||||
"sanitize-html": "2.1.1",
|
||||
"sax": "1.2.4",
|
||||
"semver": "7.3.2",
|
||||
"serve-favicon": "2.5.0",
|
||||
"session-file-store": "1.5.0",
|
||||
"striptags": "3.1.1",
|
||||
"tmp": "^0.2.1",
|
||||
"turndown": "6.0.0",
|
||||
"turndown": "7.0.0",
|
||||
"turndown-plugin-gfm": "1.0.2",
|
||||
"unescape": "1.0.1",
|
||||
"ws": "7.3.1",
|
||||
@ -78,16 +78,16 @@
|
||||
"devDependencies": {
|
||||
"cross-env": "7.0.2",
|
||||
"electron": "9.3.2",
|
||||
"electron-builder": "22.8.1",
|
||||
"electron-builder": "22.9.1",
|
||||
"electron-packager": "15.1.0",
|
||||
"electron-rebuild": "2.2.0",
|
||||
"electron-rebuild": "2.3.2",
|
||||
"esm": "3.2.25",
|
||||
"jasmine": "3.6.1",
|
||||
"jasmine": "3.6.2",
|
||||
"jsdoc": "3.6.6",
|
||||
"lorem-ipsum": "2.0.3",
|
||||
"rcedit": "2.2.0",
|
||||
"webpack": "5.1.0",
|
||||
"webpack-cli": "4.0.0"
|
||||
"webpack": "5.2.0",
|
||||
"webpack-cli": "4.1.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"electron-installer-debian": "2.0.1"
|
||||
|
||||
@ -43,21 +43,32 @@ const TPL = `
|
||||
.note-book-card {
|
||||
border-radius: 10px;
|
||||
background-color: var(--accented-background-color);
|
||||
padding: 15px;
|
||||
padding-bottom: 5px;
|
||||
margin: 5px;
|
||||
margin-left: 0;
|
||||
padding: 10px 15px 15px 8px;
|
||||
margin: 5px 5px 5px 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-book-card .note-book-content {
|
||||
display: none;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.note-book-card.expanded .note-book-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.note-book-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.note-book-card .note-book-card {
|
||||
border: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
|
||||
.note-book-content.type-image, .note-book-content.type-file, .note-book-content.type-protected-session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -81,7 +92,8 @@ const TPL = `
|
||||
.note-expander {
|
||||
font-size: x-large;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
top: 3px;
|
||||
padding-right: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -129,12 +141,6 @@ async function renderList(notes, parentNote = null) {
|
||||
// }
|
||||
// });
|
||||
|
||||
$noteList.on('click', '.note-book-open-children-button', async ev => {
|
||||
const $card = $(ev.target).closest('.note-book-card');
|
||||
|
||||
await expandCard($card);
|
||||
});
|
||||
|
||||
$noteList.on('click', '.note-book-hide-children-button', async ev => {
|
||||
const $card = $(ev.target).closest('.note-book-card');
|
||||
|
||||
@ -162,63 +168,73 @@ async function renderList(notes, parentNote = null) {
|
||||
return $noteList;
|
||||
}
|
||||
|
||||
async function renderNoteContent(note) {
|
||||
const $content = $('<div class="note-book-content">');
|
||||
|
||||
try {
|
||||
const {renderedContent, type} = await noteContentRenderer.getRenderedContent(note);
|
||||
|
||||
$content.append(renderedContent);
|
||||
$content.addClass("type-" + type);
|
||||
} catch (e) {
|
||||
console.log(`Caught error while rendering note ${note.noteId} of type ${note.type}: ${e.message}, stack: ${e.stack}`);
|
||||
|
||||
$content.append("rendering error");
|
||||
}
|
||||
|
||||
const imageLinks = note.getRelations('imageLink');
|
||||
|
||||
const childNotes = (await note.getChildNotes())
|
||||
.filter(childNote => !imageLinks.find(rel => rel.value === childNote.noteId));
|
||||
|
||||
for (const childNote of childNotes) {
|
||||
$content.append(await renderNote(childNote, false));
|
||||
}
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
// TODO: we should also render (promoted) attributes
|
||||
async function renderNote(note, renderContent) {
|
||||
async function renderNote(note, expand) {
|
||||
const notePath = /*this.notePath + '/' + */ note.noteId;
|
||||
|
||||
const $content = $('<div class="note-book-content">')
|
||||
.css("max-height", ZOOMS[zoomLevel].height);
|
||||
const $expander = $('<span class="note-expander bx bx-chevron-right" href="javascript:"></span>');
|
||||
|
||||
const $card = $('<div class="note-book-card">')
|
||||
.attr('data-note-id', note.noteId)
|
||||
.css("flex-basis", ZOOMS[zoomLevel].width)
|
||||
.append(
|
||||
$('<h5 class="note-book-title">')
|
||||
.append('<span class="note-expander bx bx-chevron-right"></span>')
|
||||
.append($expander)
|
||||
.append(await linkService.createNoteLink(notePath, {showTooltip: false}))
|
||||
)
|
||||
.append($content);
|
||||
);
|
||||
|
||||
if (renderContent) {
|
||||
try {
|
||||
const {type, renderedContent} = await noteContentRenderer.getRenderedContent(note);
|
||||
$expander.on('click', async () => await toggleContent($card, note, !$expander.hasClass("expanded")));
|
||||
|
||||
$card.addClass("type-" + type);
|
||||
$content.append(renderedContent);
|
||||
} catch (e) {
|
||||
console.log(`Caught error while rendering note ${note.noteId} of type ${note.type}: ${e.message}, stack: ${e.stack}`);
|
||||
|
||||
$content.append("rendering error");
|
||||
}
|
||||
|
||||
const imageLinks = note.getRelations('imageLink');
|
||||
|
||||
const childCount = note.getChildNoteIds()
|
||||
.filter(childNoteId => !imageLinks.find(rel => rel.value === childNoteId))
|
||||
.length;
|
||||
|
||||
if (childCount > 0) {
|
||||
const label = `${childCount} child${childCount > 1 ? 'ren' : ''}`;
|
||||
|
||||
$card.append($('<div class="note-book-children">')
|
||||
.append($(`<a class="note-book-open-children-button no-print" href="javascript:">+ Show ${label}</a>`))
|
||||
.append($(`<a class="note-book-hide-children-button no-print" href="javascript:">- Hide ${label}</a>`).hide())
|
||||
.append($('<div class="note-book-children-content">'))
|
||||
);
|
||||
}
|
||||
}
|
||||
await toggleContent($card, note, expand);
|
||||
|
||||
return $card;
|
||||
}
|
||||
|
||||
async function expandCard($card) {
|
||||
const noteId = $card.attr('data-note-id');
|
||||
const note = await treeCache.getNote(noteId);
|
||||
async function toggleContent($card, note, expand) {
|
||||
if ((expand && $card.hasClass("expanded")) || (!expand && !$card.hasClass("expanded"))) {
|
||||
return;
|
||||
}
|
||||
|
||||
$card.find('.note-book-open-children-button').hide();
|
||||
$card.find('.note-book-hide-children-button').show();
|
||||
const $expander = $card.find('> .note-book-title .note-expander');
|
||||
|
||||
$card.find('.note-book-children-content').append(await renderList(await note.getChildNotes(), note));
|
||||
if (expand) {
|
||||
$card.addClass("expanded");
|
||||
$expander.addClass("bx-chevron-down").removeClass("bx-chevron-right");
|
||||
}
|
||||
else {
|
||||
$card.removeClass("expanded");
|
||||
$expander.addClass("bx-chevron-right").removeClass("bx-chevron-down");
|
||||
}
|
||||
|
||||
if (expand && $card.find('.note-book-content').length === 0) {
|
||||
$card.append(await renderNoteContent(note));
|
||||
}
|
||||
}
|
||||
|
||||
function setZoom(zoomLevel) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user