litruv/Docs-Viewer
1
0
Fork 0
mirror of https://github.com/litruv/Docs-Viewer.git synced 2026-07-24 02:36:07 +10:00
Code Issues Packages Projects Releases Wiki Activity

Enhance README and UI for documentation viewer; improve navigation, styling, and folder organization, added folder pages

Browse Source
This commit is contained in:
Litruv
2025-02-09 01:50:26 +11:00
parent 50064853bc
commit 95005d05f6
4 changed files with 119 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.js
View File

@@ -55,12 +55,23 @@ function createFileIndexItem(doc, container, level = 0) {
const folderHeader = document.createElement('div');
folderHeader.className = 'folder-header';
// Use custom icon if provided, otherwise use default folder icon
const iconClass = doc.icon || `fas fa-folder${doc.defaultOpen !== false ? '-open' : ''}`;
folderHeader.innerHTML = `
<i class="${iconClass} folder-icon"></i>
<span>${doc.title}</span>
`;
// Put file icon before folder icon
const headerContent = doc.path ?
`<div class="folder-icons">
<a href="?${doc.slug}" class="folder-link" title="View folder page">
<i class="fas fa-file-alt"></i>
</a>
<i class="${iconClass} folder-icon"></i>
</div>
<span>${doc.title}</span>` :
`<div class="folder-icons">
<i class="${iconClass} folder-icon"></i>
</div>
<span>${doc.title}</span>`;
folderHeader.innerHTML = headerContent;
folderDiv.appendChild(folderHeader);
const folderContent = document.createElement('div');
@@ -68,9 +79,21 @@ function createFileIndexItem(doc, container, level = 0) {
doc.items.forEach(item => createFileIndexItem(item, folderContent, level + 1));
folderDiv.appendChild(folderContent);
folderHeader.addEventListener('click', () => {
// Make entire header toggle folder
folderHeader.addEventListener('click', (e) => {
// Don't toggle if clicking the folder link
if (e.target.closest('.folder-link')) {
e.preventDefault();
loadDocument(doc.path);
history.pushState(null, '', `?${doc.slug}`);
if (window.innerWidth <= 1000) {
document.querySelector('.left-sidebar').classList.remove('show');
}
return;
}
folderDiv.classList.toggle('open');
if (!doc.icon) { // Only toggle folder icon if using default
if (!doc.icon) {
folderHeader.querySelector('.folder-icon').classList.toggle('fa-folder-closed');
folderHeader.querySelector('.folder-icon').classList.toggle('fa-folder-open');
}