Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-25 22:12:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve page performance and rendering

Browse Source 
- Moves expanding the tree navigation to the template so the rendering is already done before page load
- Adds a way to explicitly set the logo size to prevent the page moving after it loads in
This commit is contained in:
Zerebos 2024-06-08 14:31:40 -04:00
parent 2485f20d5c
commit a7ed566645
No known key found for this signature in database
GPG Key ID: 79BE50E3D28D5686
3 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/scripts/modules/expanders.ts
View File

@ -1,15 +1,15 @@
// In case a linked article lead to a new tree
const activeLink = document.querySelector("#menu a.active");
if (activeLink) {
let parent = activeLink.parentElement;
const mainMenu = document.getElementById("#menu");
while (parent && parent !== mainMenu) {
if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) {
parent.classList.add("expanded");
}
parent = parent.parentElement;
}
}
// const activeLink = document.querySelector("#menu a.active");
// if (activeLink) {
// let parent = activeLink.parentElement;
// const mainMenu = document.getElementById("#menu");
// while (parent && parent !== mainMenu) {
// if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) {
// parent.classList.add("expanded");
// }
// parent = parent.parentElement;
// }
// }
export default function setupExpanders() {
const expanders = Array.from(document.querySelectorAll("#menu .submenu-item"));

20
src/templates/page.ejs
View File

@ -67,7 +67,7 @@ const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
let openGraphImage = subRoot.note.getLabelValue("shareOpenGraphImage");
// Relation takes priority and requires some altering
if (subRoot.note.hasRelation("shareOpenGraphImage")) {
openGraphImage = `api/images/${subRoot.note.getRelation("shareOpenGraphImage").value}/download`;
openGraphImage = `api/images/${subRoot.note.getRelation("shareOpenGraphImage").value}/image.png`;
}
%>
<title><%= pageTitle %></title>
@ -90,6 +90,9 @@ const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
<meta name="theme-color" content="<%= openGraphColor %>">
</head>
<%
const logoWidth = subRoot.note.getLabelValue("shareLogoWidth");
const logoHeight = subRoot.note.getLabelValue("shareLogoHeight");
const mobileLogoHeight = logoHeight && logoWidth ? 32 / (logoWidth / logoHeight) : "";
const shareRootLink = subRoot.note.hasLabel("shareRootLink") ? subRoot.note.getLabelValue("shareRootLink") : `./${subRoot.note.noteId}`;
const currentTheme = note.getLabel("shareTheme") === "light" ? "light" : "dark";
const themeClass = currentTheme === "light" ? " theme-light" : " theme-dark";
@ -105,7 +108,7 @@ content = content.replaceAll(headingRe, (...match) => {
<div id="mobile-header">
<a href="<%= shareRootLink %>">
<% if (subRoot.note.hasRelation("shareLogo")) { %>
<img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/download" alt="Logo" />
<img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="<%= logoWidth %>" height="<%= mobileLogoHeight %>" alt="Logo" />
<% } %>
<%= subRoot.note.title %>
</a>
@ -117,7 +120,7 @@ content = content.replaceAll(headingRe, (...match) => {
<div id="site-header">
<a href="<%= shareRootLink %>">
<% if (subRoot.note.hasRelation("shareLogo")) { %>
<img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/download" alt="Logo" />
<img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="<%= logoWidth %>" height="<%= logoHeight %>" alt="Logo" />
<% } %>
<%= subRoot.note.title %>
</a>
@ -137,7 +140,16 @@ content = content.replaceAll(headingRe, (...match) => {
</div>
<% if (subRoot.note.hasVisibleChildren()) { %>
<nav id="menu">
<%- include("tree_item", {note: subRoot.note, activeNote: note, subRoot: subRoot}) %>
<%
const ancestors = [];
let notePointer = note;
while (notePointer.parents[0].noteId !== "_share") {
const pointerParent = notePointer.parents[0];
ancestors.push(pointerParent.noteId);
notePointer = pointerParent;
}
%>
<%- include("tree_item", {note: subRoot.note, activeNote: note, subRoot: subRoot, ancestors: ancestors}) %>
</nav>
<% } %>
</div>

8
src/templates/tree_item.ejs
View File

@ -16,8 +16,12 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
<% if (note.hasVisibleChildren()) { %>
<ul>
<% note.getVisibleChildNotes().forEach(function (childNote) { %>
<% const hasChildren = childNote.hasVisibleChildren(); %>
<li class="<% if (hasChildren) { %>submenu-<% } %>item">
<%
const hasChildren = childNote.hasVisibleChildren();
const isAncestorOfActive = ancestors.some(p => p === childNote.noteId);
const expandedClass = isAncestorOfActive ? " expanded" : "";
%>
<li class="<% if (hasChildren) { %>submenu-<% } %>item<%= expandedClass %>">
<%- include('tree_item', {note: childNote, subRoot: subRoot}) %>
</li>
<% }) %>