229 lines
9 KiB
JavaScript
229 lines
9 KiB
JavaScript
// ============================================================
|
|
// admin-docs.js — admin-only docs viewer.
|
|
//
|
|
// Lazy-loads /api/admin/docs/tree once on first tab activation,
|
|
// renders a collapsible file tree in the sidebar. Clicking a .md
|
|
// node fetches /api/admin/docs/file?path=X and renders the
|
|
// pre-sanitised HTML returned by the server (server uses `marked`).
|
|
//
|
|
// The route is gated to role=admin server-side. The sidebar tab
|
|
// button (#docs-tab-btn) is hidden by default and revealed by
|
|
// auth.js after login when user.role === 'admin'.
|
|
// ============================================================
|
|
|
|
var _inited = false;
|
|
var _treeLoaded = false;
|
|
var _tree = [];
|
|
var _flatFiles = []; // flat list of {name, path, parent} for filter
|
|
var _expanded = {}; // map of dir-path → bool, persisted in UIState
|
|
|
|
function $(id) { return document.getElementById(id); }
|
|
function escHtml(s) { return String(s == null ? '' : s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); }
|
|
|
|
// Pretty label from a file/dir basename. Drops .md, replaces dashes
|
|
// with spaces, title-cases the first letter of each word. README is
|
|
// shown as "Index" so the entry-point doc is more obvious in the tree.
|
|
function prettyName(name, isDir) {
|
|
if (!isDir && /^readme\.md$/i.test(name)) return 'Index';
|
|
var base = name.replace(/\.md$/i, '');
|
|
return base.replace(/-/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
|
|
}
|
|
|
|
// Recursively render the tree into HTML.
|
|
function renderNode(node, depth) {
|
|
if (node.type === 'dir') {
|
|
var open = _expanded[node.path] !== false; // default open
|
|
var arrow = open ? 'fa-chevron-down' : 'fa-chevron-right';
|
|
var label = prettyName(node.name, true);
|
|
var html =
|
|
'<div class="docs-node docs-dir" data-path="' + escHtml(node.path) + '" style="--depth:' + depth + ';">' +
|
|
'<button type="button" class="docs-dir-toggle" data-toggle="' + escHtml(node.path) + '">' +
|
|
'<i class="fas ' + arrow + ' docs-arrow"></i>' +
|
|
'<i class="fas fa-folder docs-icon"></i>' +
|
|
'<span class="docs-label">' + escHtml(label) + '</span>' +
|
|
'</button>' +
|
|
'<div class="docs-children" ' + (open ? '' : 'hidden') + '>' +
|
|
(node.children || []).map(function (c) { return renderNode(c, depth + 1); }).join('') +
|
|
'</div>' +
|
|
'</div>';
|
|
return html;
|
|
}
|
|
// File node
|
|
return '<div class="docs-node docs-file" data-path="' + escHtml(node.path) + '" style="--depth:' + depth + ';">' +
|
|
'<button type="button" class="docs-file-btn" data-file="' + escHtml(node.path) + '" title="' + escHtml(node.path) + '">' +
|
|
'<i class="fas fa-file-lines docs-icon"></i>' +
|
|
'<span class="docs-label">' + escHtml(prettyName(node.name, false)) + '</span>' +
|
|
'</button>' +
|
|
'</div>';
|
|
}
|
|
|
|
// Flatten the tree into _flatFiles for the filter to search across.
|
|
function flatten(nodes, parentLabel) {
|
|
nodes.forEach(function (n) {
|
|
if (n.type === 'dir') {
|
|
flatten(n.children || [], (parentLabel ? parentLabel + ' / ' : '') + prettyName(n.name, true));
|
|
} else {
|
|
_flatFiles.push({
|
|
name: prettyName(n.name, false),
|
|
path: n.path,
|
|
parent: parentLabel || ''
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderTree() {
|
|
var host = $('docs-tree');
|
|
if (!host) return;
|
|
if (!_tree.length) {
|
|
host.innerHTML = '<div class="docs-empty">No docs found.</div>';
|
|
return;
|
|
}
|
|
host.innerHTML = _tree.map(function (n) { return renderNode(n, 0); }).join('');
|
|
}
|
|
|
|
function renderFilterResults(q) {
|
|
var host = $('docs-tree');
|
|
if (!host) return;
|
|
var lc = q.toLowerCase();
|
|
var matches = _flatFiles.filter(function (f) {
|
|
return f.name.toLowerCase().indexOf(lc) !== -1
|
|
|| f.path.toLowerCase().indexOf(lc) !== -1
|
|
|| f.parent.toLowerCase().indexOf(lc) !== -1;
|
|
});
|
|
if (matches.length === 0) {
|
|
host.innerHTML = '<div class="docs-empty">No matches for "' + escHtml(q) + '".</div>';
|
|
return;
|
|
}
|
|
host.innerHTML = matches.map(function (f) {
|
|
var parent = f.parent ? '<span class="docs-file-parent">' + escHtml(f.parent) + '</span>' : '';
|
|
return '<div class="docs-node docs-file" data-path="' + escHtml(f.path) + '" style="--depth:0;">' +
|
|
'<button type="button" class="docs-file-btn" data-file="' + escHtml(f.path) + '" title="' + escHtml(f.path) + '">' +
|
|
'<i class="fas fa-file-lines docs-icon"></i>' +
|
|
'<span class="docs-label">' + escHtml(f.name) + '</span>' +
|
|
parent +
|
|
'</button>' +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
function loadTree() {
|
|
if (_treeLoaded) return;
|
|
fetch('/api/admin/docs/tree', { headers: getAuthHeaders() })
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
if (!data || !data.success) {
|
|
$('docs-tree').innerHTML = '<div class="docs-empty">' + escHtml((data && data.error) || 'Tree load failed') + '</div>';
|
|
return;
|
|
}
|
|
_tree = data.tree || [];
|
|
_flatFiles = [];
|
|
flatten(_tree, '');
|
|
// Restore expanded state from UIState before render
|
|
try {
|
|
var saved = window.UIState && window.UIState.get('docs.expanded');
|
|
if (saved) _expanded = JSON.parse(saved);
|
|
} catch (e) {}
|
|
renderTree();
|
|
_treeLoaded = true;
|
|
// Auto-load the top README if available, else the first file
|
|
var first = _flatFiles[0];
|
|
if (first) {
|
|
var savedPath = (window.UIState && window.UIState.get('docs.lastPath')) || first.path;
|
|
loadFile(savedPath);
|
|
markActive(savedPath);
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
$('docs-tree').innerHTML = '<div class="docs-empty">Tree load failed: ' + escHtml(err.message || String(err)) + '</div>';
|
|
});
|
|
}
|
|
|
|
function loadFile(relPath) {
|
|
var body = $('docs-reader-body');
|
|
var meta = $('docs-reader-meta');
|
|
if (!body) return;
|
|
body.innerHTML = '<div class="docs-loading">Loading…</div>';
|
|
fetch('/api/admin/docs/file?path=' + encodeURIComponent(relPath), { headers: getAuthHeaders() })
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
if (!data || !data.success) {
|
|
body.innerHTML = '<p style="color:var(--red);">' + escHtml((data && data.error) || 'Load failed') + '</p>';
|
|
return;
|
|
}
|
|
body.innerHTML = data.html || '';
|
|
if (meta) {
|
|
meta.textContent = relPath + ' • ' + (data.bytes != null ? (data.bytes + ' bytes') : '');
|
|
}
|
|
// Persist last opened
|
|
if (window.UIState) window.UIState.set('docs.lastPath', relPath);
|
|
// Scroll content area to top so deep-link readers don't land mid-doc
|
|
var reader = $('docs-reader');
|
|
if (reader) reader.scrollTop = 0;
|
|
})
|
|
.catch(function (err) {
|
|
body.innerHTML = '<p style="color:var(--red);">' + escHtml(err.message || String(err)) + '</p>';
|
|
});
|
|
}
|
|
|
|
function markActive(relPath) {
|
|
document.querySelectorAll('.docs-file-btn').forEach(function (b) {
|
|
b.classList.toggle('active', b.dataset.file === relPath);
|
|
});
|
|
}
|
|
|
|
function persistExpanded() {
|
|
if (!window.UIState) return;
|
|
try { window.UIState.set('docs.expanded', JSON.stringify(_expanded)); } catch (e) {}
|
|
}
|
|
|
|
// ── Wire events ────────────────────────────────────────────────────
|
|
function init() {
|
|
document.addEventListener('click', function (e) {
|
|
var fileBtn = e.target.closest('.docs-file-btn');
|
|
if (fileBtn) {
|
|
var p = fileBtn.dataset.file;
|
|
if (p) { loadFile(p); markActive(p); }
|
|
return;
|
|
}
|
|
var dirToggle = e.target.closest('.docs-dir-toggle');
|
|
if (dirToggle) {
|
|
var dir = dirToggle.dataset.toggle;
|
|
var node = dirToggle.closest('.docs-dir');
|
|
var children = node && node.querySelector('.docs-children');
|
|
var arrow = dirToggle.querySelector('.docs-arrow');
|
|
var willOpen = !(_expanded[dir] !== false); // toggle
|
|
_expanded[dir] = willOpen;
|
|
if (children) {
|
|
if (willOpen) children.removeAttribute('hidden');
|
|
else children.setAttribute('hidden', '');
|
|
}
|
|
if (arrow) {
|
|
arrow.classList.toggle('fa-chevron-down', willOpen);
|
|
arrow.classList.toggle('fa-chevron-right', !willOpen);
|
|
}
|
|
persistExpanded();
|
|
}
|
|
});
|
|
|
|
var filter = $('docs-filter');
|
|
if (filter) {
|
|
var t = null;
|
|
filter.addEventListener('input', function () {
|
|
clearTimeout(t);
|
|
t = setTimeout(function () {
|
|
var q = filter.value.trim();
|
|
if (!q) renderTree();
|
|
else renderFilterResults(q);
|
|
}, 120);
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener('tabChanged', function (e) {
|
|
if (!e.detail || e.detail.tab !== 'docs') return;
|
|
if (!_inited) { _inited = true; init(); }
|
|
loadTree();
|
|
});
|
|
|
|
console.log('Admin docs viewer loaded');
|