Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-18 16:32:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove dead code and reorganize slightly

Browse Source
This commit is contained in:
Zack Rauen 2023-09-28 00:24:52 -04:00
parent a8bb2f110b
commit bdfe86ba1a
15 changed files with 12 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/scripts/fixes/activelink.ts
View File

@ -1,27 +0,0 @@
/**
* For some reason Trilium share chooses to have the
* active link be just a <strong> rather than a true
* link with a special style. This fixes that and
* turns the <strong> back into an actual link
* with the correct note id.
*
* TODO: make it fix aliases too
*/
export default function fixActiveLink(aliases: Record<string, string>) {
const active = document.querySelector("#menu strong");
if (!active) return; // Something is really wrong
// Currently active note id is stored on body
const id = document.body.dataset.noteId!;
const href = aliases[id] ?? id;
// Create the new link
const link = document.createElement("a");
link.className = "type-text active";
link.href = ``;
link.textContent = active.textContent;
link.href = `./${href}`;
// Replace the <strong>
active.replaceWith(link);
}

19
src/scripts/fixes/externallinks.ts
View File

@ -1,19 +0,0 @@
/**
* This function just lets us map some note links to be external links.
* This was originally designed to link the Trilium GitHub via a note.
*/
export default function addExternalLinks(mapping: Record<string, string>) {
for (const id in mapping) {
const links = document.querySelectorAll<HTMLAnchorElement>(`a[href*="${id}"]`);
if (!links.length) {
// eslint-disable-next-line no-console
console.warn(`Could not find link to note id ${id}`);
continue;
}
for (const link of links) {
link.href = mapping[id];
link.target = "_blank";
link.rel = "noopener noreferrer";
}
}
}

45
src/scripts/fixes/submenu.ts
View File

@ -1,45 +0,0 @@
/**
* General premise here is to find all submenus/sublists
* and give them a submenu class. Then any list item
* that contains one of these submenus gets a submenu-item
* class. Additionally, any sublist that itself has a
* sublist is given the class hasSubmenu.
*/
export default function fixSubMenu(submenuBlacklist: string[]) {
// Get every list item in the navigation
const items = document.querySelectorAll("#menu ul li");
for (const item of items) {
const sublist = item.querySelector("ul");
// If the list item has no submenu, ignore and move on
if (!sublist) continue;
// There seems to be some weird edge cases where a
// sublist ul is added but has no list items and
// in trilium the corresponding note has no children
if (!sublist.children.length) {
sublist.remove();
continue;
}
// If the submenu is part of our blacklist, then
// give it the hidden class. This is for pages
// that have no subcategories and only a long
// list of subpages.
const ihtml = item.innerHTML;
for (const bl of submenuBlacklist) {
if (!ihtml.includes(bl)) continue;
item.classList.add("hidden");
}
// Finally, add the corresponding classes to the elements
item.classList.add("submenu-item");
sublist.classList.add("submenu");
// Currently, this is only used by the sidebar styles to
// adjust margins. TODO: Might be worth investigating a
// different method.
if (sublist.querySelector("ul")?.children.length) sublist.classList.add("hasSubmenu");
}
}

10
src/scripts/fixes/tableheaders.ts
View File

@ -1,10 +0,0 @@
/**
* This specifically fixes when you have empty corners
* like on tables with column and row headers
*/
export default function fixTableHeaders() {
const headers = document.querySelectorAll("th");
for (const header of headers) {
if (!header.textContent?.trim()) header.classList.add("empty");
}
}

14
src/scripts/index.ts
View File

@ -1,17 +1,17 @@
// import fixActiveLink from "./fixes/activelink";
// import fixTableHeaders from "./fixes/tableheaders";
import highlight from "./other/highlight";
import highlight from "./modules/highlight";
// import buildSidenav from "./navigation/sidenav";
// import buildBreadcrumbs from "./navigation/breadcrumbs";
// import fixSubMenus from "./fixes/submenu";
import generateTOC from "./navigation/toc";
import setupToC from "./modules/toc";
// import addExternalLinks from "./fixes/externallinks";
// import injectSwagger from "./other/swagger";
// import makeMobileMenu from "./other/mobile";
import setupExpanders from "./expanders";
import setupMobileMenu from "./mobile";
import setupSearch from "./search";
import setupThemeSelector from "./theme";
import setupExpanders from "./modules/expanders";
import setupMobileMenu from "./modules/mobile";
import setupSearch from "./modules/search";
import setupThemeSelector from "./modules/theme";
// const ETAPI_REF_NOTE_ID = "pPIXi0uwF5GX";
@ -56,7 +56,7 @@ function $try<T extends (...a: unknown[]) => unknown>(func: T, ...args: Paramete
// Now layout changes
// $try(buildBreadcrumbs);
// $try(buildSidenav);
$try(generateTOC);
$try(setupToC);
// Finally, other features
$try(highlight);

0
src/scripts/expanders.ts → src/scripts/modules/expanders.ts
View File

0
src/scripts/other/highlight.ts → src/scripts/modules/highlight.ts
View File

2
src/scripts/mobile.ts → src/scripts/modules/mobile.ts
View File

@ -1,4 +1,4 @@
import parents from "./common/parents";
import parents from "../common/parents";
export default function setupMobileMenu() {

6
src/scripts/search.ts → src/scripts/modules/search.ts
View File

@ -1,6 +1,6 @@
import debounce from "./common/debounce";
import parents from "./common/parents";
import parseHTML from "./common/parsehtml";
import debounce from "../common/debounce";
import parents from "../common/parents";
import parseHTML from "../common/parsehtml";
interface SearchResults {

0
src/scripts/theme.ts → src/scripts/modules/theme.ts
View File

2
src/scripts/navigation/toc.ts → src/scripts/modules/toc.ts
View File

@ -39,7 +39,7 @@ const buildItem = (heading: Element) => {
* h2 > h4 > h1 but rather h2 > h3 > h2 so you change by 1 and end
* up at the same level as before.
*/
export default function generateTOC() {
export default function setupToC() {
// Get all headings from the page and map them to already built elements
const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"));
if (headings.length <= 1) return; // But if there are none, let's do nothing

53
src/scripts/navigation/breadcrumbs.ts
View File

@ -1,53 +0,0 @@
/**
* This build breadcrumb-style navigation using the existing
* tree menu generated by Trilium. The concept is to find
* the currently active link (fixed by an earlier script)
* and follow that up to the root part of the menu
*/
export default function buildBreadcrumbsFromNav() {
const container = document.createElement("ul");
container.id = "breadcrumbs";
// Find currently active link
const current = document.querySelector("#menu .active");
if (!current) return; // Something went really wrong
// Clone the link and add it to the front of the breadcrumb list
const firstItem = document.createElement("li");
firstItem.append(current.cloneNode(true));
container.prepend(firstItem);
// Walk the sublists upward until the root
let next = current.closest("ul");
while (next) {
const clone = next?.previousElementSibling?.querySelector("a")?.cloneNode(true);
if (!clone) continue; // This also means something went very wrong
// Get the parent of the previous and add to front of breadcrumbs
const ancestorItem = document.createElement("li");
ancestorItem.append(clone);
container.prepend(ancestorItem);
// Get the next sublist upward
next = next?.parentElement?.closest("ul") ?? null;
// We are not yet at root, continue
if (next) continue;
// Since next == null, we are at root, let's ue a pretty logo
clone.textContent = "";
const logo = document.createElement("img");
logo.src = "https://raw.githubusercontent.com/zadam/trilium/master/images/icon-black.svg";
clone.appendChild(logo);
}
// We don't need this at root
if (container.children.length === 1) return;
// Add breadcrumb container to the main layout
const main = document.getElementById("main");
main?.prepend(container);
// Scroll to the active breadcrumb in case of overflow
container.scrollLeft = container.scrollWidth - container.clientWidth;
}

30
src/scripts/navigation/sidenav.ts
View File

@ -1,30 +0,0 @@
/**
* This generates a docs-style sidebar navigation using the Trilium tree
*/
export default function addSideNav() {
// Give all tier 2 list items category class... TODO: should this be done elsewhere?
const categories = document.querySelectorAll("#menu > ul > li > ul > li");
for (const cat of categories) cat.classList.add("category");
// Use the active link as our reference point
const active = document.querySelector("#menu .active");
// From the active link, find the nearest category that is also a submenu item
// If there is none, try to grab the nearest hidden submenu item (for non-
// category style pages)
const treeToClone = active?.closest(".category.submenu-item") ?? active?.closest(".submenu-item.hidden");
if (!treeToClone) return; // If neither exist, 99% chance it's the homepage
// Clone the found node and add it to the sidebar
const sidebar = document.createElement("ul");
sidebar.id = "sidebar";
const clone = treeToClone.cloneNode(true);
sidebar.append(clone);
// If there's only a single item... probably not worth having a sidebar
if (sidebar.querySelectorAll("li").length <= 1) return;
// Add the sidebar to the front of the layout container
const layout = document.querySelector("#layout");
layout?.prepend(sidebar);
}

74
src/scripts/other/mobile.ts
View File

@ -1,74 +0,0 @@
const parseHTML = (html: string, fragment = false) => {
const template = document.createElement("template");
template.innerHTML = html;
const node = template.content.cloneNode(true);
if (fragment) return node;
return node.childNodes.length > 1 ? node.childNodes : node.childNodes[0];
};
const goBackString = `<li id="go-back"><p><a class="type-text" href="#">↩ Back to Main Menu</a></p></li>`;
const menuButtonString = `<button id="menuButton" class="expand left" aria-label="Menu">
<span class="rectangle"></span>
<span class="rectangle"></span>
<span class="rectangle"></span>
</button>`;
const isMobileAgent = /Mobi/.test(navigator.userAgent);
const isMobileSize = window.matchMedia("only screen and (max-width: 760px)").matches;
// TODO: maybe re-work this to have #sidebar be later than #menu
// then use #menu.expanded ~ #sidebar for showing the sidebar
// that way less JS is involved to make mobile work properly
export default function makeMobileMenu() {
if (!isMobileAgent && !isMobileSize) return; // If nothing indicates mobile, bail out
const menuWrap = document.querySelector("#menu");
const mainMenu = document.querySelector("#menu > ul");
if (!menuWrap || !mainMenu) return; // Something went really wrong...
const sidebar = document.querySelector("#sidebar");
const toggleMenu = (event: MouseEvent) => {
event.stopPropagation(); // Don't preventDefault to allow links
const isVisible = menuWrap.classList.contains("expanded");
if (isVisible) {
menuWrap.classList.remove("expanded");
if (sidebar) {
mainMenu.classList.remove("active");
if (!sidebar.classList.contains("active")) sidebar.classList.add("active");
}
}
else {
menuWrap.classList.add("expanded");
}
};
const menuButton = parseHTML(menuButtonString) as HTMLButtonElement;
menuButton.addEventListener("click", toggleMenu);
window.addEventListener("click", e => {
const isVisible = menuWrap.classList.contains("expanded");
if (!isVisible) return; // This is only for when the menu is open
toggleMenu(e);
});
if (sidebar) {
const goBackButton = parseHTML(goBackString) as HTMLLIElement;
goBackButton.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
mainMenu.classList.add("active");
sidebar.classList.remove("active");
});
sidebar.prepend(goBackButton);
}
if (sidebar) sidebar.classList.add("active");
else mainMenu.classList.add("active");
menuWrap.append(menuButton);
if (sidebar) menuWrap.append(sidebar);
}

35
src/scripts/other/swagger.ts
View File

@ -1,35 +0,0 @@
import SwaggerUI, {SwaggerUIOptions} from "swagger-ui";
declare const SwaggerUIBundle: typeof SwaggerUI;
const opts: SwaggerUIOptions = {
url: "https://raw.githubusercontent.com/zadam/trilium/master/src/etapi/etapi.openapi.yaml"
};
/**
* Add swagger to the ETAPI page!
*/
export default function injectSwagger(expectedNoteId: string) {
// Check if it's the ETAPI page, otherwise avoid dependency
const noteId = document.body.dataset.noteId;
if (noteId !== expectedNoteId) return; // TODO: make this a param
const main = document.getElementById("main")!;
main.innerHTML = "";
opts.domNode = main;
// Add the swagger-ui styles from unpkg
// TODO: make this hosted by trilium
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css";
document.head.append(link);
// Add the swagger-ui script too
// TODO: make this hosted by trilium
const script = document.createElement("script");
script.src = "https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js";
script.addEventListener("load", () => {
// This immediately generated the swagger-ui in the main element
SwaggerUIBundle(opts); // eslint-disable-line new-cap
});
document.head.append(script);
}