feat(electron): added docs viewer
This commit is contained in:
370
electron/renderer/docs-handler.js
Normal file
370
electron/renderer/docs-handler.js
Normal file
@@ -0,0 +1,370 @@
|
||||
/**
|
||||
* Documentation Handler Module
|
||||
* Manages documentation viewing functionality for the 4DSTAR Electron app
|
||||
*/
|
||||
|
||||
class DocsHandler {
|
||||
constructor(domManager, stateManager) {
|
||||
this.domManager = domManager;
|
||||
this.stateManager = stateManager;
|
||||
this.docsConfig = null;
|
||||
this.currentDoc = null;
|
||||
this.filteredDocs = [];
|
||||
|
||||
console.log('[DOCS_HANDLER] Documentation handler initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the documentation handler
|
||||
*/
|
||||
async initialize() {
|
||||
try {
|
||||
await this.loadDocsConfig();
|
||||
this.setupEventListeners();
|
||||
this.populateDocsGrid();
|
||||
this.populateDocsList();
|
||||
console.log('[DOCS_HANDLER] Documentation handler ready');
|
||||
} catch (error) {
|
||||
console.error('[DOCS_HANDLER] Failed to initialize:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load documentation configuration from docs.json
|
||||
*/
|
||||
async loadDocsConfig() {
|
||||
try {
|
||||
const response = await fetch('./docs.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load docs.json: ${response.status}`);
|
||||
}
|
||||
this.docsConfig = await response.json();
|
||||
console.log('[DOCS_HANDLER] Loaded documentation config:', Object.keys(this.docsConfig));
|
||||
} catch (error) {
|
||||
console.error('[DOCS_HANDLER] Error loading docs config:', error);
|
||||
// Fallback to empty config
|
||||
this.docsConfig = {};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners for documentation interface
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Search functionality
|
||||
const searchInput = document.getElementById('docs-search');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
this.filterDocs(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Category filter
|
||||
const categoryFilter = document.getElementById('docs-category-filter');
|
||||
if (categoryFilter) {
|
||||
categoryFilter.addEventListener('change', (e) => {
|
||||
this.filterDocsByCategory(e.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Documentation viewer controls
|
||||
const backBtn = document.getElementById('docs-back-btn');
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => {
|
||||
this.showDocsHome();
|
||||
});
|
||||
}
|
||||
|
||||
const externalBtn = document.getElementById('docs-open-external-btn');
|
||||
if (externalBtn) {
|
||||
externalBtn.addEventListener('click', () => {
|
||||
this.openExternalDoc();
|
||||
});
|
||||
}
|
||||
|
||||
const githubBtn = document.getElementById('docs-github-btn');
|
||||
if (githubBtn) {
|
||||
githubBtn.addEventListener('click', () => {
|
||||
this.openGitHub();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the documentation grid on the home screen
|
||||
*/
|
||||
populateDocsGrid() {
|
||||
const docsGrid = document.getElementById('docs-grid');
|
||||
if (!docsGrid || !this.docsConfig) return;
|
||||
|
||||
docsGrid.innerHTML = '';
|
||||
|
||||
Object.entries(this.docsConfig).forEach(([key, doc]) => {
|
||||
const card = this.createDocCard(key, doc);
|
||||
docsGrid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the documentation list in the sidebar
|
||||
*/
|
||||
populateDocsList() {
|
||||
const docsList = document.getElementById('docs-list');
|
||||
if (!docsList || !this.docsConfig) return;
|
||||
|
||||
this.filteredDocs = Object.entries(this.docsConfig);
|
||||
this.renderDocsList();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a documentation card for the grid
|
||||
*/
|
||||
createDocCard(key, doc) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'docs-card';
|
||||
card.dataset.docKey = key;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="docs-card-header">
|
||||
<div class="docs-card-icon">📚</div>
|
||||
<h3 class="docs-card-title">${doc.name}</h3>
|
||||
</div>
|
||||
<p class="docs-card-desc">${doc.desc}</p>
|
||||
<div class="docs-card-meta">
|
||||
<span class="docs-card-version">v${doc.version}</span>
|
||||
<span class="docs-card-category">${doc.category}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.addEventListener('click', () => {
|
||||
this.openDocumentation(key, doc);
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a documentation item for the sidebar list
|
||||
*/
|
||||
createDocItem(key, doc) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'docs-item';
|
||||
item.dataset.docKey = key;
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="docs-item-name">${doc.name}</div>
|
||||
<div class="docs-item-desc">${doc.desc}</div>
|
||||
<div class="docs-item-meta">
|
||||
<span>v${doc.version}</span>
|
||||
<span class="docs-item-category">${doc.category}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
item.addEventListener('click', () => {
|
||||
this.openDocumentation(key, doc);
|
||||
});
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the filtered documentation list
|
||||
*/
|
||||
renderDocsList() {
|
||||
const docsList = document.getElementById('docs-list');
|
||||
if (!docsList) return;
|
||||
|
||||
docsList.innerHTML = '';
|
||||
|
||||
if (this.filteredDocs.length === 0) {
|
||||
docsList.innerHTML = '<div class="empty-state">No documentation found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
this.filteredDocs.forEach(([key, doc]) => {
|
||||
const item = this.createDocItem(key, doc);
|
||||
docsList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter documentation by search term
|
||||
*/
|
||||
filterDocs(searchTerm) {
|
||||
const term = searchTerm.toLowerCase().trim();
|
||||
|
||||
if (!term) {
|
||||
this.filteredDocs = Object.entries(this.docsConfig);
|
||||
} else {
|
||||
this.filteredDocs = Object.entries(this.docsConfig).filter(([key, doc]) => {
|
||||
return doc.name.toLowerCase().includes(term) ||
|
||||
doc.desc.toLowerCase().includes(term) ||
|
||||
doc.category.toLowerCase().includes(term);
|
||||
});
|
||||
}
|
||||
|
||||
this.renderDocsList();
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter documentation by category
|
||||
*/
|
||||
filterDocsByCategory(category) {
|
||||
if (!category) {
|
||||
this.filteredDocs = Object.entries(this.docsConfig);
|
||||
} else {
|
||||
this.filteredDocs = Object.entries(this.docsConfig).filter(([key, doc]) => {
|
||||
return doc.category === category;
|
||||
});
|
||||
}
|
||||
|
||||
this.renderDocsList();
|
||||
}
|
||||
|
||||
/**
|
||||
* Open documentation in the viewer
|
||||
*/
|
||||
async openDocumentation(key, doc) {
|
||||
try {
|
||||
console.log('[DOCS_HANDLER] Opening documentation:', doc.name);
|
||||
|
||||
this.currentDoc = { key, ...doc };
|
||||
|
||||
// Update viewer title and info
|
||||
const titleEl = document.getElementById('docs-viewer-title');
|
||||
if (titleEl) {
|
||||
titleEl.textContent = `${doc.name} Documentation`;
|
||||
}
|
||||
|
||||
const libEl = document.getElementById('docs-current-lib');
|
||||
if (libEl) {
|
||||
libEl.textContent = doc.name;
|
||||
}
|
||||
|
||||
const versionEl = document.getElementById('docs-current-version');
|
||||
if (versionEl) {
|
||||
versionEl.textContent = `v${doc.version}`;
|
||||
}
|
||||
|
||||
// Load documentation in iframe
|
||||
await this.loadDocInIframe(doc);
|
||||
|
||||
// Show the documentation viewer
|
||||
this.domManager.showView('docs-viewer');
|
||||
|
||||
} catch (error) {
|
||||
console.error('[DOCS_HANDLER] Error opening documentation:', error);
|
||||
this.showError('Failed to load documentation');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load documentation in the iframe
|
||||
*/
|
||||
async loadDocInIframe(doc) {
|
||||
const iframe = document.getElementById('docs-iframe');
|
||||
if (!iframe) return;
|
||||
|
||||
// Try to load local documentation first
|
||||
const localPath = `./${doc.path}/index.html`;
|
||||
|
||||
try {
|
||||
// Check if local documentation exists
|
||||
const response = await fetch(localPath, { method: 'HEAD' });
|
||||
if (response.ok) {
|
||||
iframe.src = localPath;
|
||||
console.log('[DOCS_HANDLER] Loaded local documentation:', localPath);
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('[DOCS_HANDLER] Local documentation not found, trying hosted version');
|
||||
}
|
||||
|
||||
// Fallback to hosted documentation
|
||||
if (doc.hostDocURL) {
|
||||
iframe.src = doc.hostDocURL;
|
||||
console.log('[DOCS_HANDLER] Loaded hosted documentation:', doc.hostDocURL);
|
||||
} else {
|
||||
throw new Error('No documentation source available');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the documentation home screen
|
||||
*/
|
||||
showDocsHome() {
|
||||
this.currentDoc = null;
|
||||
this.domManager.showView('docs-home');
|
||||
}
|
||||
|
||||
/**
|
||||
* Open current documentation in external browser
|
||||
*/
|
||||
openExternalDoc() {
|
||||
if (!this.currentDoc) return;
|
||||
|
||||
const url = this.currentDoc.hostDocURL;
|
||||
if (url) {
|
||||
// Use IPC to open in external browser
|
||||
if (window.electronAPI && window.electronAPI.openExternal) {
|
||||
window.electronAPI.openExternal(url);
|
||||
} else {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Open current documentation's GitHub repository
|
||||
*/
|
||||
openGitHub() {
|
||||
if (!this.currentDoc) return;
|
||||
|
||||
const url = this.currentDoc.githubURL;
|
||||
if (url) {
|
||||
// Use IPC to open in external browser
|
||||
if (window.electronAPI && window.electronAPI.openExternal) {
|
||||
window.electronAPI.openExternal(url);
|
||||
} else {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show error message
|
||||
*/
|
||||
showError(message) {
|
||||
console.error('[DOCS_HANDLER] Error:', message);
|
||||
// You could implement a toast notification or modal here
|
||||
alert(`Documentation Error: ${message}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available documentation categories
|
||||
*/
|
||||
getCategories() {
|
||||
if (!this.docsConfig) return [];
|
||||
|
||||
const categories = new Set();
|
||||
Object.values(this.docsConfig).forEach(doc => {
|
||||
categories.add(doc.category);
|
||||
});
|
||||
|
||||
return Array.from(categories).sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh documentation configuration
|
||||
*/
|
||||
async refresh() {
|
||||
await this.loadDocsConfig();
|
||||
this.populateDocsGrid();
|
||||
this.populateDocsList();
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = DocsHandler;
|
||||
}
|
||||
Reference in New Issue
Block a user