1564 lines
50 KiB
JavaScript
Executable File
1564 lines
50 KiB
JavaScript
Executable File
/* =========================================================
|
|
ZETTELKASTEN GARDEN script.js
|
|
========================================================= */
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
rearrangeDOM();
|
|
buildSidebar();
|
|
initNoteSystem();
|
|
initSidebarRail();
|
|
initBacklinkPanel();
|
|
initLinkPreviews();
|
|
initCopyButtons();
|
|
initFootnoteSidenotes();
|
|
initThemeToggle();
|
|
initCountdowns();
|
|
initTOCHighlighting();
|
|
initMediaFixes(document);
|
|
initReadingProgress();
|
|
hookSearchResults();
|
|
initHomeDashboard();
|
|
});
|
|
|
|
/* =========================================================
|
|
DOM REARRANGEMENT
|
|
========================================================= */
|
|
|
|
function rearrangeDOM() {
|
|
const body = document.body;
|
|
const preamble = document.getElementById('preamble');
|
|
const stackRoot = document.getElementById('stack-root');
|
|
const postamble = document.getElementById('postamble');
|
|
|
|
if (!stackRoot) return;
|
|
|
|
const content = stackRoot.querySelector('#content');
|
|
|
|
// Inject breadcrumb trail into header
|
|
const bannerHeader = preamble?.querySelector('.banner-header');
|
|
if (bannerHeader) {
|
|
const bannerLeft = bannerHeader.querySelector('.banner-left');
|
|
const bannerSearch = bannerHeader.querySelector('.banner-search');
|
|
const crumbTrail = el('div', { id: 'breadcrumb-trail', 'aria-label': 'Navigation history' });
|
|
if (bannerLeft && bannerSearch) {
|
|
bannerHeader.insertBefore(crumbTrail, bannerSearch);
|
|
} else {
|
|
bannerHeader.appendChild(crumbTrail);
|
|
}
|
|
}
|
|
|
|
const layoutBody = el('div', { id: 'layout-body' });
|
|
const sidebar = el('nav', { id: 'sidebar', 'aria-label': 'Navigation' });
|
|
const main = el('div', { id: 'main' });
|
|
const noteToolbar = el('div', { id: 'note-toolbar' });
|
|
const mainInner = el('div', { id: 'main-inner' });
|
|
const contentArea = el('div', { id: 'content-area' });
|
|
const backlinkPnl = el('div', { id: 'backlink-panel', role: 'complementary', 'aria-label': 'Backlinks' });
|
|
|
|
buildNoteToolbar(noteToolbar);
|
|
|
|
backlinkPnl.innerHTML = `
|
|
<div class="bp-header">
|
|
<span class="bp-label">backlinks</span>
|
|
<button class="bp-close" id="bp-close" title="Close backlinks" aria-label="Close backlinks">\u00D7</button>
|
|
</div>
|
|
<div class="bp-list" id="bp-list">
|
|
<p class="bp-empty">No backlinks to this note.</p>
|
|
</div>
|
|
`;
|
|
|
|
if (content) {
|
|
const rootPane = el('div', { class: 'tab-content active', 'data-tab-id': 'tab-root' });
|
|
rootPane.appendChild(content);
|
|
contentArea.appendChild(rootPane);
|
|
}
|
|
|
|
mainInner.appendChild(contentArea);
|
|
mainInner.appendChild(backlinkPnl);
|
|
main.appendChild(noteToolbar);
|
|
main.appendChild(mainInner);
|
|
layoutBody.appendChild(sidebar);
|
|
layoutBody.appendChild(main);
|
|
stackRoot.remove();
|
|
|
|
const progress = el('div', { id: 'reading-progress' });
|
|
body.appendChild(progress);
|
|
|
|
if (preamble?.nextSibling) {
|
|
body.insertBefore(layoutBody, preamble.nextSibling);
|
|
} else {
|
|
body.appendChild(layoutBody);
|
|
}
|
|
if (postamble) body.appendChild(postamble);
|
|
}
|
|
|
|
function buildNoteToolbar(toolbar) {
|
|
toolbar.innerHTML = `
|
|
<button class="toolbar-btn toolbar-btn-icon" id="tb-back" title="Go back" aria-label="Go back">\u2190</button>
|
|
<button class="toolbar-btn toolbar-btn-icon" id="tb-forward" title="Go forward" aria-label="Go forward">\u2192</button>
|
|
<div class="toolbar-sep"></div>
|
|
<button class="toolbar-btn toolbar-btn-icon" id="tb-toc" title="Toggle table of contents" aria-label="Toggle table of contents">\u2261</button>
|
|
<button class="toolbar-btn toolbar-btn-icon" id="tb-backlinks" title="Toggle backlinks panel" aria-label="Toggle backlinks panel">\u29C9</button>
|
|
<div class="toolbar-spacer"></div>
|
|
<span class="note-graph-pos" id="note-graph-pos"></span>
|
|
<button class="toolbar-btn toolbar-btn-icon" id="tb-close-all" title="Close all notes" aria-label="Close all notes">\u2715</button>
|
|
`;
|
|
}
|
|
|
|
/* =========================================================
|
|
SIDEBAR RAIL
|
|
========================================================= */
|
|
|
|
const RECENT_KEY = 'zg-recent-notes';
|
|
const RECENT_MAX = 12;
|
|
const FOLDER_STATE_KEY = 'zg-folder-state';
|
|
|
|
let sidebarDataCache = null;
|
|
|
|
async function fetchSidebarData() {
|
|
if (sidebarDataCache) return sidebarDataCache;
|
|
try {
|
|
const res = await fetch(`/assets/sidebar-tree.json?v=${Date.now()}`, { cache: 'no-store' });
|
|
if (res.ok) sidebarDataCache = await res.json();
|
|
} catch (_) {}
|
|
return sidebarDataCache || { mocs: [], tree: [] };
|
|
}
|
|
|
|
function closeSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
if (!sidebar) return;
|
|
sidebar.classList.remove('expanded', 'mobile-open');
|
|
sidebar.dataset.activePanel = '';
|
|
sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
|
|
document.getElementById('sidebar-backdrop')?.classList.remove('visible');
|
|
}
|
|
|
|
function initSidebarRail() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
if (!sidebar) return;
|
|
|
|
const rail = el('div', { id: 'sidebar-rail', class: 'sidebar-rail' });
|
|
const body = el('div', { id: 'sidebar-body', class: 'sidebar-body' });
|
|
sidebar.append(rail, body);
|
|
|
|
const railBtns = [
|
|
{ label: '\u2B21', title: 'Atlas', id: 'rail-atlas', panel: 'atlas' },
|
|
{ label: '\u25F7', title: 'Recent', id: 'rail-recent', panel: 'recent' },
|
|
{ label: '\u2630', title: 'Browse', id: 'rail-browse', panel: 'browse' },
|
|
{ label: '\u2315', title: 'Search', id: 'rail-search', action: 'search' },
|
|
];
|
|
|
|
railBtns.forEach(({ label, title, id, panel, action }) => {
|
|
const btn = el('button', { class: 'rail-btn', id, title, 'aria-label': title });
|
|
btn.textContent = label;
|
|
rail.appendChild(btn);
|
|
|
|
btn.addEventListener('click', () => {
|
|
if (action === 'search') {
|
|
if (typeof window.openSearchModal === 'function') {
|
|
window.openSearchModal();
|
|
} else {
|
|
document.getElementById('search-box')?.focus();
|
|
}
|
|
return;
|
|
}
|
|
|
|
const isExpanded = sidebar.classList.contains('expanded');
|
|
const samePanel = sidebar.dataset.activePanel === panel;
|
|
|
|
if (isExpanded && samePanel) {
|
|
closeSidebar();
|
|
} else {
|
|
sidebar.classList.add('expanded');
|
|
sidebar.dataset.activePanel = panel;
|
|
sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
showSidebarPanel(panel);
|
|
}
|
|
});
|
|
});
|
|
|
|
let backdrop = document.getElementById('sidebar-backdrop');
|
|
if (!backdrop) {
|
|
backdrop = el('div', { id: 'sidebar-backdrop' });
|
|
document.body.appendChild(backdrop);
|
|
}
|
|
backdrop.addEventListener('click', closeSidebar);
|
|
|
|
initSidebarToggle();
|
|
}
|
|
|
|
function showSidebarPanel(panel) {
|
|
const body = document.getElementById('sidebar-body');
|
|
if (!body) return;
|
|
body.innerHTML = '';
|
|
|
|
const panelEl = el('div', { class: 'sidebar-panel', 'data-panel': panel });
|
|
panelEl.innerHTML = `
|
|
<div class="sidebar-header">
|
|
<span class="sidebar-header-label">${panel}</span>
|
|
<button class="sidebar-close-btn" aria-label="Close sidebar">\u00D7</button>
|
|
</div>
|
|
<div class="sidebar-panel-body" id="sidebar-panel-body"></div>
|
|
`;
|
|
body.appendChild(panelEl);
|
|
|
|
panelEl.querySelector('.sidebar-close-btn').addEventListener('click', closeSidebar);
|
|
|
|
const container = panelEl.querySelector('#sidebar-panel-body');
|
|
if (panel === 'atlas') buildAtlasPanel(container);
|
|
else if (panel === 'recent') buildRecentPanel(container);
|
|
else if (panel === 'browse') buildBrowsePanel(container);
|
|
}
|
|
|
|
async function buildAtlasPanel(container) {
|
|
const data = await fetchSidebarData();
|
|
const mocs = data.mocs || [];
|
|
|
|
if (!mocs.length) {
|
|
container.innerHTML = '<p class="sidebar-empty">No MOC hubs found.</p>';
|
|
return;
|
|
}
|
|
|
|
const grid = el('div', { class: 'moc-grid' });
|
|
mocs.forEach(moc => {
|
|
const card = el('button', {
|
|
class: 'moc-card' + (moc.pinned ? ' moc-card-pinned' : ''),
|
|
type: 'button',
|
|
});
|
|
card.innerHTML = `
|
|
<span class="moc-card-title">${escHtml(moc.title)}</span>
|
|
${moc.pinned ? '<span class="moc-card-badge">start</span>' : ''}
|
|
`;
|
|
card.addEventListener('click', () => {
|
|
closeSidebar();
|
|
openNote(normalisePathname(moc.url), moc.title);
|
|
});
|
|
grid.appendChild(card);
|
|
});
|
|
container.appendChild(grid);
|
|
}
|
|
|
|
function getRecentNotes() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(RECENT_KEY) || '[]');
|
|
} catch (_) {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function trackRecentNote(pathname, title) {
|
|
if (!pathname) return;
|
|
const entry = { pathname, title, visitedAt: Date.now() };
|
|
let recent = getRecentNotes().filter(r => r.pathname !== pathname);
|
|
recent.unshift(entry);
|
|
localStorage.setItem(RECENT_KEY, JSON.stringify(recent.slice(0, RECENT_MAX)));
|
|
const panel = document.querySelector('.sidebar-panel[data-panel="recent"] #sidebar-panel-body');
|
|
if (panel) buildRecentPanel(panel);
|
|
}
|
|
|
|
function formatRelativeTime(ts) {
|
|
const diff = Date.now() - ts;
|
|
const mins = Math.floor(diff / 60000);
|
|
if (mins < 1) return 'just now';
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
const days = Math.floor(hrs / 24);
|
|
if (days < 7) return `${days}d ago`;
|
|
return new Date(ts).toLocaleDateString();
|
|
}
|
|
|
|
function buildRecentPanel(container) {
|
|
const recent = getRecentNotes();
|
|
container.innerHTML = '';
|
|
|
|
if (!recent.length) {
|
|
container.innerHTML = '<p class="sidebar-empty">No notes visited yet.</p>';
|
|
return;
|
|
}
|
|
|
|
const list = el('div', { class: 'recent-list' });
|
|
recent.forEach(item => {
|
|
const row = el('button', { class: 'recent-item', type: 'button' });
|
|
row.innerHTML = `
|
|
<span class="recent-item-title">${escHtml(item.title)}</span>
|
|
<span class="recent-item-time">${formatRelativeTime(item.visitedAt)}</span>
|
|
`;
|
|
row.addEventListener('click', () => {
|
|
closeSidebar();
|
|
openNote(item.pathname, item.title);
|
|
});
|
|
list.appendChild(row);
|
|
});
|
|
container.appendChild(list);
|
|
}
|
|
|
|
function buildBrowsePanel(container) {
|
|
container.innerHTML = `
|
|
<div class="tree-filter-wrap">
|
|
<input type="search" class="tree-filter" placeholder="Filter notes\u2026" aria-label="Filter notes" />
|
|
</div>
|
|
<div id="file-tree"></div>
|
|
`;
|
|
|
|
const filterInput = container.querySelector('.tree-filter');
|
|
const treeRoot = container.querySelector('#file-tree');
|
|
|
|
filterInput.addEventListener('input', () => filterTree(treeRoot, filterInput.value.trim()));
|
|
|
|
buildFileTree(treeRoot);
|
|
}
|
|
|
|
async function buildFileTree(container) {
|
|
const currentPath = location.pathname;
|
|
const data = await fetchSidebarData();
|
|
let treeData = Array.isArray(data.tree) ? data.tree : null;
|
|
|
|
if (treeData) {
|
|
renderTree(treeData, container, currentPath);
|
|
return;
|
|
}
|
|
|
|
const groups = await buildGroupsFromSearchIndex();
|
|
if (!groups?.length) {
|
|
container.innerHTML = '<p class="sidebar-empty">No notes found.</p>';
|
|
return;
|
|
}
|
|
const fallbackTree = groups.map(g => ({ label: g.label, children: [], files: g.files }));
|
|
renderTree(fallbackTree, container, currentPath);
|
|
}
|
|
|
|
function getFolderState() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(FOLDER_STATE_KEY) || '{}');
|
|
} catch (_) {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function setFolderState(key, isOpen) {
|
|
const state = getFolderState();
|
|
state[key] = isOpen;
|
|
localStorage.setItem(FOLDER_STATE_KEY, JSON.stringify(state));
|
|
}
|
|
|
|
function countFilesInNode(node) {
|
|
let count = (node.files || []).length;
|
|
for (const child of node.children || []) {
|
|
count += countFilesInNode(child);
|
|
}
|
|
return count;
|
|
}
|
|
|
|
function nodeContainsPath(node, pathname, prefix = '') {
|
|
const folderKey = prefix ? `${prefix}/${node.label}` : node.label;
|
|
for (const f of node.files || []) {
|
|
if (normalisePathname(f.url) === pathname) return true;
|
|
}
|
|
for (const child of node.children || []) {
|
|
if (nodeContainsPath(child, pathname, folderKey)) return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function renderTree(nodes, container, currentPath, prefix = '') {
|
|
nodes.forEach(node => {
|
|
const folderKey = prefix ? `${prefix}/${node.label}` : node.label;
|
|
const fileCount = countFilesInNode(node);
|
|
const containsActive = nodeContainsPath(node, currentPath, prefix);
|
|
const folderState = getFolderState();
|
|
const defaultOpen = containsActive || folderState[folderKey] === true;
|
|
const isOpen = defaultOpen;
|
|
|
|
const folderEl = el('div', {
|
|
class: 'tree-folder',
|
|
'data-folder': node.label,
|
|
'data-folder-key': folderKey,
|
|
});
|
|
const icon = el('span', { class: 'tree-icon' });
|
|
icon.textContent = isOpen ? '\u25BE ' : '\u25B8 ';
|
|
const labelSpan = el('span', { class: 'tree-folder-label' });
|
|
labelSpan.textContent = node.label;
|
|
const badge = el('span', { class: 'tree-folder-count' });
|
|
badge.textContent = String(fileCount);
|
|
folderEl.append(icon, labelSpan, badge);
|
|
|
|
const childrenWrap = el('div', { class: 'tree-children' });
|
|
if (!isOpen) childrenWrap.style.display = 'none';
|
|
|
|
const searchTerms = [node.label.toLowerCase()];
|
|
(node.files || []).forEach(f => {
|
|
const pathname = normalisePathname(f.url);
|
|
searchTerms.push(f.title.toLowerCase());
|
|
childrenWrap.appendChild(makeFileItem({ title: f.title, pathname }, currentPath));
|
|
});
|
|
|
|
if (node.children?.length) {
|
|
renderTree(node.children, childrenWrap, currentPath, folderKey);
|
|
}
|
|
|
|
folderEl.addEventListener('click', () => {
|
|
const nowOpen = childrenWrap.style.display === 'none';
|
|
childrenWrap.style.display = nowOpen ? '' : 'none';
|
|
icon.textContent = nowOpen ? '\u25BE ' : '\u25B8 ';
|
|
setFolderState(folderKey, nowOpen);
|
|
});
|
|
|
|
folderEl.dataset.searchText = searchTerms.join(' ');
|
|
childrenWrap.dataset.searchText = searchTerms.join(' ');
|
|
|
|
container.appendChild(folderEl);
|
|
container.appendChild(childrenWrap);
|
|
});
|
|
}
|
|
|
|
function filterTree(container, query) {
|
|
const q = query.toLowerCase();
|
|
container.querySelectorAll('.tree-folder, .tree-children, .tree-file').forEach(el => {
|
|
if (!q) {
|
|
el.classList.remove('tree-filtered-out');
|
|
return;
|
|
}
|
|
const text = (el.dataset.searchText || el.textContent || '').toLowerCase();
|
|
el.classList.toggle('tree-filtered-out', !text.includes(q));
|
|
});
|
|
|
|
if (q) {
|
|
container.querySelectorAll('.tree-children').forEach(wrap => {
|
|
wrap.style.display = '';
|
|
const folder = wrap.previousElementSibling;
|
|
if (folder?.classList.contains('tree-folder')) {
|
|
const icon = folder.querySelector('.tree-icon');
|
|
if (icon) icon.textContent = '\u25BE ';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function buildGroupsFromSearchIndex() {
|
|
try {
|
|
const res = await fetch('/search-index.json');
|
|
if (!res.ok) return null;
|
|
const raw = await res.json();
|
|
const all = Array.isArray(raw) ? raw : raw.entries || raw.notes || [];
|
|
const files = all
|
|
.filter(e => e && (e.url || e.path || e.pathname))
|
|
.map(e => ({
|
|
title: e.title || filenameToTitle(e.url || e.path || e.pathname),
|
|
url: e.url || e.path || e.pathname,
|
|
}))
|
|
.sort((a, b) => a.title.localeCompare(b.title));
|
|
return files.length ? [{ label: 'all notes', files }] : null;
|
|
} catch (_) { return null; }
|
|
}
|
|
|
|
function makeFileItem({ title, pathname }, currentPath) {
|
|
const fileEl = el('div', {
|
|
class: 'tree-file' + (pathname === currentPath ? ' active' : ''),
|
|
'data-pathname': pathname,
|
|
'data-search-text': title.toLowerCase(),
|
|
});
|
|
const iconSpan = el('span', { class: 'tree-icon' });
|
|
iconSpan.textContent = '\u00B7 ';
|
|
const titleSpan = el('span', { class: 'tree-file-title' });
|
|
titleSpan.textContent = title;
|
|
fileEl.appendChild(iconSpan);
|
|
fileEl.appendChild(titleSpan);
|
|
fileEl.title = title;
|
|
fileEl.addEventListener('click', () => {
|
|
closeSidebar();
|
|
openNote(pathname, title);
|
|
});
|
|
return fileEl;
|
|
}
|
|
|
|
/* =========================================================
|
|
NOTE SYSTEM
|
|
========================================================= */
|
|
|
|
const noteHistory = [];
|
|
let historyIndex = -1;
|
|
let activeNoteId = null;
|
|
|
|
function makeHistoryState(entry, hash = '') {
|
|
return {
|
|
notePathname: entry.pathname,
|
|
noteLabel: entry.label,
|
|
noteHash: hash || '',
|
|
isRoot: !!entry.isRoot,
|
|
};
|
|
}
|
|
|
|
function historyUrlFor(entry, hash = '') {
|
|
if (entry.isRoot) {
|
|
return location.pathname + location.search;
|
|
}
|
|
return entry.pathname + (hash || '');
|
|
}
|
|
|
|
function readHashState() {
|
|
const hash = location.hash.slice(1);
|
|
const state = { active: null };
|
|
if (!hash) return state;
|
|
hash.split('&').forEach(part => {
|
|
const [key, val] = part.split('=');
|
|
if (!val) return;
|
|
if (key === 'active') state.active = decodeURIComponent(val);
|
|
});
|
|
return state;
|
|
}
|
|
|
|
function writeHashState() {
|
|
const current = noteHistory[historyIndex];
|
|
if (!current || current.isRoot) {
|
|
history.replaceState(null, '', location.pathname + location.search);
|
|
return;
|
|
}
|
|
const newHash = '#active=' + encodeURIComponent(current.pathname);
|
|
history.replaceState(null, '', location.pathname + location.search + newHash);
|
|
}
|
|
|
|
function initNoteSystem() {
|
|
const rootPane = document.querySelector(".tab-content[data-tab-id='tab-root']");
|
|
if (!rootPane) return;
|
|
|
|
const titleEl = rootPane.querySelector('.title-section .title, h1.title, h1');
|
|
const label = titleEl?.textContent.trim() || document.title || 'Home';
|
|
|
|
const rootEntry = { id: 'tab-root', label, pathname: location.pathname, paneEl: rootPane, isRoot: true };
|
|
noteHistory.push(rootEntry);
|
|
historyIndex = 0;
|
|
activeNoteId = 'tab-root';
|
|
|
|
updateBreadcrumb();
|
|
updateToolbar();
|
|
initMediaFixes(rootPane);
|
|
if (window._gallerySetupVideo) window._gallerySetupVideo(rootPane);
|
|
if (window._gallerySetupAudio) window._gallerySetupAudio(rootPane);
|
|
|
|
// Register the initial entry with browser history
|
|
history.replaceState(
|
|
makeHistoryState(rootEntry),
|
|
'',
|
|
historyUrlFor(rootEntry)
|
|
);
|
|
|
|
// Intercept internal .html link clicks only
|
|
document.addEventListener('click', e => {
|
|
const link = e.target.closest('a');
|
|
if (!link) return;
|
|
const href = link.getAttribute('href');
|
|
if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) return;
|
|
let url;
|
|
try { url = new URL(href, location.href); } catch { return; }
|
|
if (url.origin !== location.origin) return;
|
|
// Only intercept .html pages — let assets, PDFs, etc. through
|
|
if (!url.pathname.endsWith('.html')) return;
|
|
|
|
e.preventDefault();
|
|
|
|
const pathname = normalisePathname(url.pathname);
|
|
const hash = url.hash || '';
|
|
|
|
const label = link.textContent.trim() || filenameToTitle(pathname);
|
|
|
|
openNote(pathname, label, hash);
|
|
});
|
|
|
|
// Toolbar buttons
|
|
document.getElementById('tb-back')?.addEventListener('click', goBack);
|
|
document.getElementById('tb-forward')?.addEventListener('click', goForward);
|
|
document.getElementById('tb-backlinks')?.addEventListener('click', toggleBacklinkPanel);
|
|
document.getElementById('tb-toc')?.addEventListener('click', toggleTOC);
|
|
document.getElementById('tb-close-all')?.addEventListener('click', closeAllNotes);
|
|
|
|
// Backlink panel close
|
|
document.getElementById('bp-close')?.addEventListener('click', () => {
|
|
document.getElementById('backlink-panel')?.classList.remove('open');
|
|
document.getElementById('tb-backlinks')?.classList.remove('active');
|
|
});
|
|
|
|
window.addEventListener('popstate', async (e) => {
|
|
const state = e.state;
|
|
|
|
// No state: fall back to root
|
|
if (!state || !state.notePathname) {
|
|
if (noteHistory[0]) activateNote(noteHistory[0].id, true);
|
|
return;
|
|
}
|
|
|
|
const pathname = normalisePathname(state.notePathname);
|
|
const label = state.noteLabel || filenameToTitle(pathname);
|
|
const hash = state.noteHash || '';
|
|
|
|
const existing = noteHistory.find(n => n.pathname === pathname);
|
|
|
|
if (existing) {
|
|
activateNote(existing.id, true);
|
|
if (hash) scrollToHash(existing.paneEl, hash);
|
|
return;
|
|
}
|
|
|
|
await openNote(pathname, label, hash, true, false);
|
|
});
|
|
|
|
}
|
|
|
|
async function openNote(pathname, label, hash = '', silent = false, pushBrowserState = true) {
|
|
console.log('Opening note:', pathname, { label, hash, silent });
|
|
// Normalise
|
|
pathname = normalisePathname(pathname);
|
|
|
|
// Already at this note?
|
|
const current = noteHistory[historyIndex];
|
|
if (current?.pathname === pathname) {
|
|
if (hash) scrollToHash(current.paneEl, hash);
|
|
return;
|
|
}
|
|
|
|
// Already exists in history?
|
|
const existing = noteHistory.find(n => n.pathname === pathname);
|
|
if (existing) {
|
|
historyIndex = noteHistory.indexOf(existing);
|
|
activateNote(existing.id, true);
|
|
if (hash) scrollToHash(existing.paneEl, hash);
|
|
|
|
if (pushBrowserState) {
|
|
history.pushState(
|
|
makeHistoryState(existing, hash),
|
|
'',
|
|
historyUrlFor(existing, hash)
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Show loading indicator
|
|
const contentArea = document.getElementById('content-area');
|
|
const loadingPane = el('div', { class: 'tab-content active', 'data-loading': '1' });
|
|
loadingPane.innerHTML = '<div class="note-loading">Loading\u2026</div>';
|
|
contentArea?.appendChild(loadingPane);
|
|
// Hide all other panes while loading
|
|
noteHistory.forEach(n => n.paneEl.classList.remove('active'));
|
|
|
|
let contentEl;
|
|
let resolvedLabel = label || filenameToTitle(pathname);
|
|
|
|
try {
|
|
const res = await fetch(pathname);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
|
|
|
|
const titleEl = doc.querySelector('.title-section .title, h1.title, h1');
|
|
if (titleEl) resolvedLabel = titleEl.textContent.trim();
|
|
|
|
// Prefer #content, else fall back gracefully
|
|
contentEl = doc.getElementById('content')
|
|
|| doc.querySelector('.stack-pane')
|
|
|| (() => {
|
|
const d = document.createElement('div');
|
|
d.id = 'content';
|
|
d.innerHTML = '<p>Note loaded but content element not found.</p>';
|
|
return d;
|
|
})();
|
|
|
|
// Decode mermaid entities
|
|
contentEl.querySelectorAll('.mermaid').forEach(m => {
|
|
m.innerHTML = m.innerHTML
|
|
.replace(/>/g, '>').replace(/</g, '<').replace(/&/g, '&');
|
|
});
|
|
|
|
fixRelativeSrcs(contentEl, pathname);
|
|
|
|
} catch (err) {
|
|
console.error('Note fetch error:', err);
|
|
contentEl = document.createElement('div');
|
|
contentEl.id = 'content';
|
|
contentEl.innerHTML =
|
|
`<p style="color:var(--fg-faint);padding:2rem 0">` +
|
|
`Could not load <code>${escHtml(pathname)}</code>: ${escHtml(err.message)}</p>`;
|
|
}
|
|
|
|
// Remove the temporary loading pane
|
|
loadingPane.remove();
|
|
|
|
const id = 'tab-' + Date.now();
|
|
const paneEl = el('div', { class: 'tab-content', 'data-tab-id': id });
|
|
paneEl.appendChild(contentEl);
|
|
|
|
contentArea?.appendChild(paneEl);
|
|
|
|
const entry = { id, label: resolvedLabel, pathname, paneEl, isRoot: false };
|
|
|
|
// Truncate forward history when branching
|
|
if (historyIndex < noteHistory.length - 1) {
|
|
noteHistory.slice(historyIndex + 1).forEach(n => {
|
|
if (!n.isRoot) n.paneEl.remove();
|
|
});
|
|
noteHistory.splice(historyIndex + 1);
|
|
}
|
|
|
|
noteHistory.push(entry);
|
|
historyIndex = noteHistory.length - 1;
|
|
|
|
activateNote(id, true);
|
|
if (hash) scrollToHash(paneEl, hash);
|
|
|
|
if (pushBrowserState) {
|
|
history.pushState(
|
|
makeHistoryState(entry, hash),
|
|
'',
|
|
historyUrlFor(entry, hash)
|
|
);
|
|
}
|
|
// Run mermaid on newly loaded diagrams
|
|
if (typeof mermaid !== 'undefined') {
|
|
const diagrams = paneEl.querySelectorAll('.mermaid:not([data-processed])');
|
|
if (diagrams.length) mermaid.run({ nodes: diagrams });
|
|
}
|
|
|
|
initCopyButtonsIn(paneEl);
|
|
initFootnoteSidenotesIn(paneEl);
|
|
initMediaFixes(paneEl);
|
|
initLinkPreviewsIn(paneEl);
|
|
|
|
const trySetup = () => {
|
|
if (window._gallerySetupVideo) window._gallerySetupVideo(paneEl);
|
|
if (window._gallerySetupAudio) window._gallerySetupAudio(paneEl);
|
|
};
|
|
if (window._gallerySetupVideo) { trySetup(); } else { setTimeout(trySetup, 200); }
|
|
|
|
updateSidebarActive(pathname);
|
|
}
|
|
|
|
function activateNote(id, skipBrowserWrite = true) {
|
|
activeNoteId = id;
|
|
const idx = noteHistory.findIndex(n => n.id === id);
|
|
if (idx !== -1) historyIndex = idx;
|
|
|
|
noteHistory.forEach(n => n.paneEl.classList.toggle('active', n.id === id));
|
|
|
|
const area = document.getElementById('content-area');
|
|
if (area) area.scrollTop = 0;
|
|
|
|
const current = noteHistory[historyIndex];
|
|
if (current) {
|
|
trackRecentNote(current.pathname, current.label);
|
|
}
|
|
|
|
updateBreadcrumb();
|
|
updateToolbar();
|
|
|
|
// Refresh backlink panel if open
|
|
const panel = document.getElementById('backlink-panel');
|
|
if (panel?.classList.contains('open')) refreshBacklinkPanel();
|
|
|
|
updateSidebarActive(noteHistory[historyIndex]?.pathname);
|
|
|
|
}
|
|
|
|
function goBack() {
|
|
window.history.back();
|
|
}
|
|
|
|
function goForward() {
|
|
window.history.forward();
|
|
}
|
|
|
|
function closeAllNotes() {
|
|
if (noteHistory.length <= 1) return;
|
|
const root = noteHistory[0];
|
|
noteHistory.slice(1).forEach(n => {
|
|
if (!n.isRoot) n.paneEl.remove();
|
|
});
|
|
noteHistory.splice(1);
|
|
historyIndex = 0;
|
|
activateNote(root.id, true);
|
|
history.replaceState(makeHistoryState(root), '', historyUrlFor(root));
|
|
}
|
|
|
|
function updateBreadcrumb() {
|
|
const trail = document.getElementById('breadcrumb-trail');
|
|
if (!trail) return;
|
|
trail.innerHTML = '';
|
|
|
|
const start = Math.max(0, historyIndex - 2);
|
|
const slice = noteHistory.slice(start, historyIndex + 1);
|
|
|
|
slice.forEach((entry, i) => {
|
|
if (i > 0) {
|
|
const sep = el('span', { class: 'crumb-sep', 'aria-hidden': 'true' });
|
|
sep.textContent = '/';
|
|
trail.appendChild(sep);
|
|
}
|
|
|
|
const isActive = i === slice.length - 1;
|
|
const crumb = el('span', { class: 'crumb' + (isActive ? ' active' : '') });
|
|
if (isActive) crumb.setAttribute('aria-current', 'page');
|
|
crumb.textContent = entry.label;
|
|
crumb.title = entry.pathname;
|
|
|
|
if (!isActive) {
|
|
const targetIdx = start + i;
|
|
crumb.addEventListener('click', () => {
|
|
historyIndex = targetIdx;
|
|
activateNote(entry.id);
|
|
});
|
|
}
|
|
|
|
trail.appendChild(crumb);
|
|
});
|
|
}
|
|
|
|
function updateToolbar() {
|
|
const backBtn = document.getElementById('tb-back');
|
|
if (backBtn) {
|
|
const canGoBack = historyIndex > 0;
|
|
backBtn.disabled = !canGoBack;
|
|
backBtn.style.opacity = canGoBack ? '1' : '0.35';
|
|
}
|
|
|
|
const fwdBtn = document.getElementById('tb-forward');
|
|
if (fwdBtn) {
|
|
const canGoFwd = historyIndex < noteHistory.length - 1;
|
|
fwdBtn.disabled = !canGoFwd;
|
|
fwdBtn.style.opacity = canGoFwd ? '1' : '0.35';
|
|
}
|
|
|
|
const pos = document.getElementById('note-graph-pos');
|
|
if (pos) {
|
|
const current = noteHistory[historyIndex];
|
|
if (current) {
|
|
const name = current.pathname.split('/').pop().replace('.html', '');
|
|
// Strip the timestamp prefix from Org-Roam filenames
|
|
const clean = name.replace(/^\d{14}-/, '');
|
|
pos.textContent = clean.length > 24 ? clean.slice(0, 22) + '\u2026' : clean;
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleTOC() {
|
|
const active = noteHistory[historyIndex];
|
|
if (!active) return;
|
|
const toc = active.paneEl.querySelector('#table-of-contents');
|
|
if (!toc) return;
|
|
const hidden = toc.style.display === 'none';
|
|
toc.style.display = hidden ? '' : 'none';
|
|
document.getElementById('tb-toc')?.classList.toggle('active', hidden);
|
|
}
|
|
|
|
/* =========================================================
|
|
BACKLINK PANEL
|
|
========================================================= */
|
|
|
|
function initBacklinkPanel() {
|
|
// Panel built in rearrangeDOM; nothing else needed here
|
|
}
|
|
|
|
function toggleBacklinkPanel() {
|
|
const panel = document.getElementById('backlink-panel');
|
|
const btn = document.getElementById('tb-backlinks');
|
|
if (!panel) return;
|
|
const isOpen = panel.classList.toggle('open');
|
|
btn?.classList.toggle('active', isOpen);
|
|
if (isOpen) refreshBacklinkPanel();
|
|
}
|
|
|
|
async function refreshBacklinkPanel() {
|
|
const panel = document.getElementById('backlink-panel');
|
|
if (!panel?.classList.contains('open')) return;
|
|
|
|
const list = document.getElementById('bp-list');
|
|
const countEl = document.getElementById('bp-count');
|
|
const current = noteHistory[historyIndex];
|
|
if (!list || !current) return;
|
|
|
|
list.innerHTML = '<p class="bp-empty" style="opacity:.5;font-style:italic">Loading\u2026</p>';
|
|
if (countEl) countEl.textContent = '\u2026';
|
|
|
|
try {
|
|
const res = await fetch('/search-index.json');
|
|
if (!res.ok) throw new Error('no index');
|
|
const raw = await res.json();
|
|
const all = Array.isArray(raw) ? raw : raw.entries || raw.notes || [];
|
|
|
|
// Match by both the bare filename and the full pathname
|
|
const currentFile = current.pathname.split('/').pop().replace(/\.html$/, '');
|
|
const currentPath = normalisePathname(decodeURIComponent(current.pathname));
|
|
|
|
const backlinks = all.filter(e => {
|
|
if (!e) return false;
|
|
|
|
const entryUrl = normalisePathname(decodeURIComponent(e.url || ''));
|
|
if (entryUrl === currentPath) return false;
|
|
|
|
const links = (e.links || []).map(l =>
|
|
normalisePathname(decodeURIComponent(l))
|
|
);
|
|
|
|
return links.some(l => l === currentPath);
|
|
});
|
|
|
|
if (countEl) countEl.textContent = String(backlinks.length);
|
|
|
|
if (!backlinks.length) {
|
|
list.innerHTML = '<p class="bp-empty">No backlinks found for this note.</p>';
|
|
return;
|
|
}
|
|
|
|
console.log("Have backlinks for",{
|
|
currentPath,
|
|
currentFile,
|
|
sampleEntry: all[0]
|
|
});
|
|
|
|
list.innerHTML = '';
|
|
backlinks.forEach(bl => {
|
|
const pathname = normalisePathname(bl.url || bl.path || bl.pathname || '');
|
|
const title = bl.title || filenameToTitle(pathname);
|
|
const excerpt = (bl.content || bl.body || bl.text || '').slice(0, 140).trim();
|
|
|
|
const item = el('div', { class: 'bp-item' });
|
|
|
|
const titleDiv = el('div', { class: 'bp-item-title' });
|
|
titleDiv.textContent = title;
|
|
item.appendChild(titleDiv);
|
|
|
|
if (excerpt) {
|
|
const excDiv = el('div', { class: 'bp-item-excerpt' });
|
|
excDiv.textContent = excerpt + '\u2026';
|
|
item.appendChild(excDiv);
|
|
}
|
|
|
|
item.addEventListener('click', () => openNote(pathname, title));
|
|
list.appendChild(item);
|
|
});
|
|
|
|
} catch (_) {
|
|
list.innerHTML = '<p class="bp-empty">Could not load backlinks.</p>';
|
|
if (countEl) countEl.textContent = '!';
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
LINK HOVER PREVIEWS
|
|
========================================================= */
|
|
|
|
let previewTimer = null;
|
|
const previewCache = {};
|
|
|
|
function initLinkPreviews() {
|
|
if (!document.getElementById('link-preview')) {
|
|
const card = el('div', { id: 'link-preview', role: 'tooltip', 'aria-hidden': 'true' });
|
|
card.innerHTML = `
|
|
<div class="preview-inner">
|
|
<div class="preview-title" id="preview-title">Note title</div>
|
|
<div class="preview-body" id="preview-body">Loading\u2026</div>
|
|
</div>
|
|
<div class="preview-footer">click to open</div>
|
|
`;
|
|
document.body.appendChild(card);
|
|
}
|
|
initLinkPreviewsIn(document);
|
|
}
|
|
|
|
function initLinkPreviewsIn(root) {
|
|
// Only attach previews to internal .html links, not external or asset links
|
|
root.querySelectorAll('a[href*=".html"]').forEach(link => {
|
|
if (link.dataset.previewInited) return;
|
|
// Skip links to external origins
|
|
try {
|
|
const url = new URL(link.getAttribute('href'), location.href);
|
|
if (url.origin !== location.origin) return;
|
|
} catch { return; }
|
|
|
|
link.dataset.previewInited = '1';
|
|
|
|
link.addEventListener('mouseenter', e => {
|
|
clearTimeout(previewTimer);
|
|
previewTimer = setTimeout(() => showPreview(link, e), 300);
|
|
});
|
|
link.addEventListener('mouseleave', () => {
|
|
clearTimeout(previewTimer);
|
|
hidePreview();
|
|
});
|
|
link.addEventListener('mousemove', e => {
|
|
const card = document.getElementById('link-preview');
|
|
if (card?.classList.contains('visible')) positionPreview(card, e);
|
|
});
|
|
});
|
|
}
|
|
|
|
async function showPreview(link, evt) {
|
|
const card = document.getElementById('link-preview');
|
|
if (!card) return;
|
|
|
|
const href = link.getAttribute('href');
|
|
let url;
|
|
try { url = new URL(href, location.href); } catch { return; }
|
|
if (url.origin !== location.origin) return;
|
|
|
|
const pathname = normalisePathname(url.pathname);
|
|
const titleEl = document.getElementById('preview-title');
|
|
const bodyEl = document.getElementById('preview-body');
|
|
|
|
titleEl.textContent = link.textContent.trim() || filenameToTitle(pathname);
|
|
bodyEl.textContent = 'Loading\u2026';
|
|
|
|
positionPreview(card, evt);
|
|
card.classList.add('visible');
|
|
card.setAttribute('aria-hidden', 'false');
|
|
|
|
if (previewCache[pathname]) {
|
|
const { title, body } = previewCache[pathname];
|
|
titleEl.textContent = title;
|
|
bodyEl.textContent = body || 'No preview available.';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(pathname);
|
|
if (!res.ok) throw new Error('fetch failed');
|
|
const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
|
|
const h1 = doc.querySelector('.title-section .title, h1.title, h1');
|
|
const paras = [...doc.querySelectorAll('#content p')];
|
|
const title = h1?.textContent.trim() || filenameToTitle(pathname);
|
|
const body = paras.slice(0, 3).map(p => p.textContent.trim()).join(' ').slice(0, 280);
|
|
|
|
previewCache[pathname] = { title, body };
|
|
|
|
if (card.classList.contains('visible')) {
|
|
titleEl.textContent = title;
|
|
bodyEl.textContent = body || 'No preview available.';
|
|
}
|
|
} catch (_) {
|
|
if (card.classList.contains('visible')) bodyEl.textContent = 'Preview unavailable.';
|
|
}
|
|
}
|
|
|
|
function positionPreview(card, evt) {
|
|
const margin = 14;
|
|
const cw = card.offsetWidth || 300;
|
|
const ch = card.offsetHeight || 200;
|
|
let x = evt.clientX + margin;
|
|
let y = evt.clientY + margin;
|
|
if (x + cw > window.innerWidth - margin) x = evt.clientX - cw - margin;
|
|
if (y + ch > window.innerHeight - margin) y = evt.clientY - ch - margin;
|
|
card.style.left = x + 'px';
|
|
card.style.top = y + 'px';
|
|
}
|
|
|
|
function hidePreview() {
|
|
const card = document.getElementById('link-preview');
|
|
card?.classList.remove('visible');
|
|
card?.setAttribute('aria-hidden', 'true');
|
|
}
|
|
|
|
/* =========================================================
|
|
READING PROGRESS BAR
|
|
========================================================= */
|
|
|
|
function initReadingProgress() {
|
|
const bar = document.getElementById('reading-progress');
|
|
const area = document.getElementById('content-area');
|
|
if (!bar || !area) return;
|
|
|
|
area.addEventListener('scroll', () => {
|
|
const { scrollTop, scrollHeight, clientHeight } = area;
|
|
const pct = scrollHeight <= clientHeight
|
|
? 0
|
|
: (scrollTop / (scrollHeight - clientHeight)) * 100;
|
|
bar.style.width = pct + '%';
|
|
}, { passive: true });
|
|
}
|
|
|
|
/* =========================================================
|
|
SEARCH RESULTS HOOK
|
|
========================================================= */
|
|
|
|
function hookSearchResults() {
|
|
const resultsBox = document.getElementById('search-results');
|
|
const searchBox = document.getElementById('search-box');
|
|
if (!resultsBox) return;
|
|
|
|
resultsBox.addEventListener('mousedown', e => {
|
|
let item = e.target;
|
|
while (item && item !== resultsBox) {
|
|
const url =
|
|
item.dataset.url ||
|
|
item.dataset.href ||
|
|
item.dataset.path ||
|
|
item.querySelector?.('a')?.getAttribute('href') ||
|
|
(item.tagName === 'A' ? item.getAttribute('href') : null);
|
|
|
|
if (url) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
resultsBox.innerHTML = '';
|
|
if (searchBox) searchBox.value = '';
|
|
window.closeSearchModal?.();
|
|
|
|
let resolved;
|
|
try { resolved = new URL(url, location.href); } catch { return; }
|
|
if (resolved.origin !== location.origin) { window.open(url, '_blank'); return; }
|
|
if (!resolved.pathname.endsWith('.html')) return;
|
|
|
|
const label = item.textContent.trim() || filenameToTitle(resolved.pathname);
|
|
openNote(resolved.pathname, label, resolved.hash);
|
|
return;
|
|
}
|
|
item = item.parentElement;
|
|
}
|
|
});
|
|
|
|
if (searchBox) {
|
|
searchBox.addEventListener('keydown', e => {
|
|
if (e.key !== 'Enter') return;
|
|
const active = resultsBox.querySelector('.active, li:first-child, div:first-child');
|
|
if (!active) return;
|
|
const url =
|
|
active.dataset.url || active.dataset.href ||
|
|
active.querySelector?.('a')?.getAttribute('href');
|
|
if (!url) return;
|
|
resultsBox.innerHTML = '';
|
|
searchBox.value = '';
|
|
window.closeSearchModal?.();
|
|
let resolved;
|
|
try { resolved = new URL(url, location.href); } catch { return; }
|
|
openNote(resolved.pathname, active.textContent.trim(), resolved.hash);
|
|
});
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
SIDEBAR TOGGLE
|
|
========================================================= */
|
|
|
|
function initSidebarToggle() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
if (!sidebar) return;
|
|
|
|
// Keyboard shortcut: Ctrl+\ toggles sidebar
|
|
document.addEventListener('keydown', e => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key === '\\') {
|
|
e.preventDefault();
|
|
const nowExpanded = sidebar.classList.toggle('expanded');
|
|
if (nowExpanded && !sidebar.dataset.activePanel) {
|
|
sidebar.dataset.activePanel = 'atlas';
|
|
showSidebarPanel('atlas');
|
|
sidebar.querySelector('#rail-atlas')?.classList.add('active');
|
|
}
|
|
if (!nowExpanded) {
|
|
sidebar.dataset.activePanel = '';
|
|
sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
|
|
}
|
|
}
|
|
});
|
|
|
|
// Touch swipe-to-open
|
|
let touchStartX = null;
|
|
document.addEventListener('touchstart', e => {
|
|
if (e.touches[0].clientX < 20) touchStartX = e.touches[0].clientX;
|
|
}, { passive: true });
|
|
document.addEventListener('touchend', e => {
|
|
if (touchStartX === null) return;
|
|
const dx = e.changedTouches[0].clientX - touchStartX;
|
|
touchStartX = null;
|
|
if (dx > 40) {
|
|
sidebar.classList.add('expanded', 'mobile-open');
|
|
document.getElementById('sidebar-backdrop')?.classList.add('visible');
|
|
}
|
|
}, { passive: true });
|
|
|
|
sidebar.addEventListener('touchstart', e => {
|
|
touchStartX = e.touches[0].clientX;
|
|
}, { passive: true });
|
|
sidebar.addEventListener('touchend', e => {
|
|
if (touchStartX === null) return;
|
|
const dx = e.changedTouches[0].clientX - touchStartX;
|
|
touchStartX = null;
|
|
if (dx < -40) {
|
|
sidebar.classList.remove('expanded', 'mobile-open');
|
|
document.getElementById('sidebar-backdrop')?.classList.remove('visible');
|
|
}
|
|
}, { passive: true });
|
|
}
|
|
|
|
/* =========================================================
|
|
SIDEBAR ACTIVE STATE
|
|
========================================================= */
|
|
|
|
function updateSidebarActive(pathname) {
|
|
document.querySelectorAll('.tree-file').forEach(f => {
|
|
f.classList.toggle('active', f.dataset.pathname === pathname);
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
MEDIA FIXES
|
|
========================================================= */
|
|
|
|
function initMediaFixes(root) {
|
|
root.querySelectorAll('audio').forEach(audio => {
|
|
audio.controls = true;
|
|
if (!audio.closest('.audio-player')) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'audio-player';
|
|
const src = audio.src || audio.querySelector?.('source')?.src || '';
|
|
const labelText = audio.dataset.label || audio.title
|
|
|| src.split('/').pop().replace(/\.[^.]+$/, '') || 'audio';
|
|
const labelEl = document.createElement('div');
|
|
labelEl.className = 'audio-label';
|
|
labelEl.textContent = labelText;
|
|
audio.parentNode.insertBefore(wrapper, audio);
|
|
wrapper.append(labelEl, audio);
|
|
}
|
|
});
|
|
|
|
root.querySelectorAll('video').forEach(video => {
|
|
video.controls = true;
|
|
video.style.cssText = 'max-width:100%;width:100%;height:auto;display:block;border-radius:6px;';
|
|
if (!video.closest('.video-container')) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'video-container';
|
|
video.parentNode.insertBefore(wrapper, video);
|
|
wrapper.appendChild(video);
|
|
}
|
|
if (!video.currentSrc) video.load();
|
|
});
|
|
}
|
|
|
|
function fixRelativeSrcs(root, fromPathname) {
|
|
const base = new URL(fromPathname, location.href).href.split('/').slice(0, -1).join('/') + '/';
|
|
const fix = (elmt, attr) => {
|
|
const val = elmt.getAttribute(attr);
|
|
if (!val || val.startsWith('http') || val.startsWith('//')
|
|
|| val.startsWith('data:') || val.startsWith('#') || val.startsWith('/')) return;
|
|
try { elmt.setAttribute(attr, new URL(val, base).href); } catch {}
|
|
};
|
|
root.querySelectorAll('img').forEach(e => fix(e, 'src'));
|
|
root.querySelectorAll('video').forEach(e => fix(e, 'src'));
|
|
root.querySelectorAll('audio').forEach(e => fix(e, 'src'));
|
|
root.querySelectorAll('source').forEach(e => fix(e, 'src'));
|
|
root.querySelectorAll('a').forEach(e => fix(e, 'href'));
|
|
}
|
|
|
|
/* =========================================================
|
|
COPY BUTTONS
|
|
========================================================= */
|
|
|
|
function initCopyButtons() { initCopyButtonsIn(document); }
|
|
|
|
function initCopyButtonsIn(root) {
|
|
root.querySelectorAll('pre.src').forEach(block => {
|
|
if (block.querySelector('.copy-btn')) return;
|
|
block.style.position = 'relative';
|
|
const btn = document.createElement('button');
|
|
btn.className = 'copy-btn';
|
|
btn.textContent = 'copy';
|
|
block.appendChild(btn);
|
|
btn.addEventListener('click', async () => {
|
|
const text = block.innerText.replace(btn.innerText, '').trim();
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
btn.textContent = 'copied';
|
|
} catch {
|
|
btn.textContent = 'failed';
|
|
}
|
|
setTimeout(() => { btn.textContent = 'copy'; }, 1600);
|
|
});
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
FOOTNOTE SIDENOTES
|
|
========================================================= */
|
|
|
|
function initFootnoteSidenotes() { initFootnoteSidenotesIn(document); }
|
|
|
|
function initFootnoteSidenotesIn(root) {
|
|
root.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
|
|
const sup = ref.closest('sup') || ref;
|
|
if (sup.nextElementSibling?.classList.contains('footnote-sidenote')) return;
|
|
|
|
const targetId = ref.getAttribute('href').slice(1);
|
|
const anchor = document.getElementById(targetId)
|
|
|| root.querySelector?.(`#${CSS.escape(targetId)}`);
|
|
if (!anchor) return;
|
|
|
|
const footdef = anchor.closest('.footdef') || anchor.parentElement;
|
|
if (!footdef) return;
|
|
|
|
let paras = footdef.querySelectorAll('p.footpara');
|
|
if (!paras.length) paras = footdef.querySelectorAll('.footpara');
|
|
|
|
let parts = [];
|
|
if (paras.length) {
|
|
const seen = new Set();
|
|
parts = [...paras].map(p => {
|
|
const txt = p.textContent.trim().replace(/\s+/g, ' ');
|
|
if (seen.has(txt)) return '';
|
|
seen.add(txt);
|
|
return p.innerHTML.trim();
|
|
}).filter(Boolean);
|
|
}
|
|
if (!parts.length) {
|
|
const clone = footdef.cloneNode(true);
|
|
clone.querySelectorAll('sup.footnum, a[role="doc-backlink"]').forEach(n => n.remove());
|
|
parts = [clone.innerHTML.trim()];
|
|
}
|
|
|
|
const sidenote = document.createElement('span');
|
|
sidenote.className = 'sidenote footnote-sidenote';
|
|
sidenote.dataset.fn = ref.textContent.trim();
|
|
sidenote.innerHTML = parts.join(' ');
|
|
sup.insertAdjacentElement('afterend', sidenote);
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
THEME TOGGLE
|
|
========================================================= */
|
|
|
|
function initThemeToggle() {
|
|
const root = document.documentElement;
|
|
const key = 'theme';
|
|
const saved = localStorage.getItem(key);
|
|
const initial = (saved === 'dark' || saved === 'light') ? saved : 'dark';
|
|
root.setAttribute('data-theme', initial);
|
|
|
|
const btn = document.getElementById('theme-toggle');
|
|
if (!btn) return;
|
|
|
|
const updateIcon = theme => {
|
|
// Moon for dark mode, sun for light mode
|
|
btn.textContent = theme === 'dark' ? '\u263D' : '\u2600';
|
|
btn.setAttribute('aria-label',
|
|
theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
|
|
};
|
|
updateIcon(initial);
|
|
|
|
btn.addEventListener('click', () => {
|
|
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
|
root.setAttribute('data-theme', next);
|
|
localStorage.setItem(key, next);
|
|
updateIcon(next);
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
COUNTDOWNS
|
|
========================================================= */
|
|
|
|
function initCountdowns() {
|
|
const els = document.querySelectorAll('time.countdown');
|
|
if (!els.length) return;
|
|
const plural = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`;
|
|
const render = el => {
|
|
const target = new Date(el.getAttribute('datetime'));
|
|
const label = el.dataset.label || '';
|
|
if (isNaN(target)) { el.textContent = ''; return; }
|
|
let diff = target - new Date();
|
|
if (diff <= 0) {
|
|
el.textContent = `${label ? label + ' ' : ''}today`;
|
|
el.classList.add('expired');
|
|
return;
|
|
}
|
|
const d = Math.floor(diff / 86400000); diff %= 86400000;
|
|
const h = Math.floor(diff / 3600000); diff %= 3600000;
|
|
const m = Math.floor(diff / 60000); diff %= 60000;
|
|
const s = Math.floor(diff / 1000);
|
|
const parts = [];
|
|
if (d) parts.push(plural(d, 'day'));
|
|
parts.push(`${h}h ${m}m ${s}s`);
|
|
el.textContent = `${label ? label + ' in: ' : ''}${parts.join(' ')}`;
|
|
};
|
|
const tick = () => els.forEach(render);
|
|
tick();
|
|
setInterval(tick, 1000);
|
|
}
|
|
|
|
/* =========================================================
|
|
TOC HIGHLIGHTING
|
|
========================================================= */
|
|
|
|
function initTOCHighlighting() {
|
|
// Scoped to the currently active pane
|
|
const getActiveTOC = () => {
|
|
const active = noteHistory[historyIndex];
|
|
if (!active) return null;
|
|
return active.paneEl.querySelector('#text-table-of-contents');
|
|
};
|
|
|
|
const toc = getActiveTOC() || document.querySelector('#text-table-of-contents');
|
|
if (!toc) return;
|
|
|
|
const links = [...toc.querySelectorAll('a[href^="#"]')];
|
|
if (!links.length) return;
|
|
|
|
const linkById = new Map();
|
|
links.forEach(a => {
|
|
const id = decodeURIComponent(a.hash.slice(1));
|
|
const elmt = document.getElementById(id);
|
|
if (elmt) linkById.set(id, a);
|
|
});
|
|
|
|
const headings = [...document.querySelectorAll('h2[id], h3[id], h4[id]')]
|
|
.filter(h => linkById.has(h.id));
|
|
|
|
const setActive = id => {
|
|
links.forEach(a => {
|
|
const active = a.hash === `#${id}`;
|
|
a.classList.toggle('is-active', active);
|
|
if (active) a.setAttribute('aria-current', 'true');
|
|
else a.removeAttribute('aria-current');
|
|
});
|
|
};
|
|
|
|
const headerOffset = 6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
const visible = new Map();
|
|
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
const id = entry.target.id;
|
|
if (entry.isIntersecting) {
|
|
visible.set(id, entry.target.getBoundingClientRect().top - headerOffset);
|
|
} else {
|
|
visible.delete(id);
|
|
}
|
|
});
|
|
if (visible.size) {
|
|
const [id] = [...visible.entries()].sort((a, b) => Math.abs(a[1]) - Math.abs(b[1]))[0];
|
|
setActive(id);
|
|
}
|
|
}, { rootMargin: `-${headerOffset}px 0px -70% 0px`, threshold: [0, 0.01, 0.1] });
|
|
|
|
headings.forEach(h => observer.observe(h));
|
|
|
|
toc.addEventListener('click', e => {
|
|
const a = e.target.closest('a[href^="#"]');
|
|
if (!a) return;
|
|
const id = decodeURIComponent(a.hash.slice(1));
|
|
const elmt = document.getElementById(id);
|
|
if (!elmt) return;
|
|
e.preventDefault();
|
|
elmt.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
elmt.setAttribute('tabindex', '-1');
|
|
elmt.focus({ preventScroll: true });
|
|
history.pushState(null, '', `#${id}`);
|
|
});
|
|
}
|
|
|
|
/* =========================================================
|
|
HELPERS
|
|
========================================================= */
|
|
|
|
function scrollToHash(paneEl, hash) {
|
|
if (!hash) return;
|
|
requestAnimationFrame(() => {
|
|
const id = hash.replace(/^#/, '');
|
|
const target = paneEl.querySelector(`#${CSS.escape(id)}`);
|
|
const area = document.getElementById('content-area');
|
|
if (target && area) area.scrollTop = target.offsetTop;
|
|
});
|
|
}
|
|
|
|
function el(tag, attrs = {}) {
|
|
const e = document.createElement(tag);
|
|
Object.entries(attrs).forEach(([k, v]) => {
|
|
if (v !== undefined) e.setAttribute(k, v);
|
|
});
|
|
return e;
|
|
}
|
|
|
|
function escHtml(str) {
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
function filenameToTitle(pathname) {
|
|
const base = (pathname || '').split('/').pop().replace(/\.html$/, '');
|
|
// Strip Org-Roam timestamp prefix (14 digits)
|
|
const clean = base.replace(/^\d{14}-/, '');
|
|
return clean.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
|
|
}
|
|
|
|
function normalisePathname(p) {
|
|
if (!p) return '';
|
|
if (p.startsWith('/')) return p;
|
|
try { return new URL(p, location.href).pathname; } catch { return '/' + p; }
|
|
}
|
|
|
|
// Lazy sidebar builder stub (built on demand)
|
|
async function buildSidebar() {}
|
|
|
|
async function initHomeDashboard() {
|
|
const pathname = normalisePathname(location.pathname);
|
|
if (pathname !== '/' && !pathname.endsWith('/index.html')) return;
|
|
|
|
const content = document.querySelector('#content');
|
|
if (!content || content.querySelector('.home-dashboard')) return;
|
|
|
|
const data = await fetchSidebarData();
|
|
const mocs = data.mocs || [];
|
|
if (!mocs.length) return;
|
|
|
|
const dash = el('div', { class: 'home-dashboard' });
|
|
dash.innerHTML = `
|
|
<header class="home-hero">
|
|
<h2 class="home-hero-title">Zettelgarten</h2>
|
|
<p class="home-hero-sub">A private library of notes, maps, and wandering thoughts.</p>
|
|
</header>
|
|
<div class="home-quick-links">
|
|
<button type="button" class="home-quick-link" data-action="search">Search <kbd>/</kbd></button>
|
|
<a class="home-quick-link" href="/all-files.html">All files</a>
|
|
</div>
|
|
<h3 class="home-section-label">Start here</h3>
|
|
<div class="home-moc-grid"></div>
|
|
`;
|
|
|
|
const grid = dash.querySelector('.home-moc-grid');
|
|
mocs.forEach(moc => {
|
|
const card = el('a', {
|
|
class: 'moc-card home-moc-card' + (moc.pinned ? ' moc-card-pinned' : ''),
|
|
href: moc.url,
|
|
});
|
|
card.innerHTML = `
|
|
<span class="moc-card-title">${escHtml(moc.title)}</span>
|
|
${moc.pinned ? '<span class="moc-card-badge">start</span>' : ''}
|
|
`;
|
|
grid.appendChild(card);
|
|
});
|
|
|
|
dash.querySelector('[data-action="search"]')?.addEventListener('click', () => {
|
|
window.openSearchModal?.();
|
|
});
|
|
|
|
content.insertBefore(dash, content.firstChild);
|
|
}
|
|
|
|
// Pane-out animation keyframe
|
|
const _s = document.createElement('style');
|
|
_s.textContent = `
|
|
@keyframes pane-out {
|
|
from { opacity:1; transform:translateX(0); }
|
|
to { opacity:0; transform:translateX(16px); }
|
|
}
|
|
.note-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 40vh;
|
|
color: var(--fg-faint);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.06em;
|
|
opacity: 0.6;
|
|
}
|
|
`;
|
|
document.head.appendChild(_s);
|