137 lines
3.7 KiB
JavaScript
137 lines
3.7 KiB
JavaScript
// Main Application
|
|
import { ThemeToggle } from './components/ThemeToggle.js';
|
|
import { Sidebar } from './components/Sidebar.js';
|
|
import { SearchForm } from './components/SearchForm.js';
|
|
import { SearchBar } from './components/SearchBar.js';
|
|
import { LanguageSelector } from './components/LanguageSelector.js';
|
|
import { ModuleList } from './components/ModuleList.js';
|
|
import { CourseList } from './components/CourseList.js';
|
|
import { Results } from './components/Results.js';
|
|
import { Tabs } from './components/Tabs.js';
|
|
|
|
class App {
|
|
constructor() {
|
|
this.results = new Results();
|
|
this.searchBar = null;
|
|
this.languageSelector = null;
|
|
this.moduleList = null;
|
|
this.courseList = null;
|
|
this.currentObject = '';
|
|
this.currentLang = '';
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
// Initialize components
|
|
new ThemeToggle();
|
|
new Sidebar();
|
|
new SearchForm();
|
|
|
|
// Initialize language selector
|
|
this.languageSelector = new LanguageSelector((langCode) => {
|
|
this.currentLang = langCode;
|
|
if (this.currentObject) {
|
|
this.fetchDocumentation(this.currentObject, langCode);
|
|
}
|
|
});
|
|
|
|
// Initialize search bar
|
|
this.searchBar = new SearchBar(
|
|
(query) => {
|
|
this.currentObject = query;
|
|
this.fetchDocumentation(query, this.languageSelector.getCurrentLanguage());
|
|
},
|
|
(fullName) => {
|
|
this.currentObject = fullName;
|
|
}
|
|
);
|
|
|
|
this.moduleList = new ModuleList((fullName) => {
|
|
this.searchBar.setValue(fullName);
|
|
this.currentObject = fullName;
|
|
this.fetchDocumentation(fullName, this.languageSelector.getCurrentLanguage());
|
|
});
|
|
|
|
this.courseList = new CourseList((section) => {
|
|
this.results.scrollToSection(section);
|
|
});
|
|
|
|
new Tabs((tabName) => {
|
|
if (tabName === 'course') {
|
|
this.loadCourseContent();
|
|
}
|
|
});
|
|
}
|
|
|
|
async fetchDocumentation(objectName, targetLang) {
|
|
if (!objectName || objectName.trim().length === 0) {
|
|
return;
|
|
}
|
|
|
|
// Show loading with progress bar
|
|
const loadingMessage = targetLang
|
|
? `Translating documentation to ${this.getLanguageName(targetLang)}...`
|
|
: 'Loading documentation...';
|
|
this.results.showLoading(loadingMessage, true);
|
|
|
|
try {
|
|
const params = new URLSearchParams({ object: objectName.trim() });
|
|
if (targetLang) {
|
|
params.append('lang', targetLang);
|
|
}
|
|
|
|
const response = await fetch(`/docs?${params}`);
|
|
const data = await response.json();
|
|
|
|
// Complete progress animation
|
|
if (this.results.loadingProgress) {
|
|
this.results.loadingProgress.complete();
|
|
}
|
|
|
|
// Small delay for smooth transition
|
|
await new Promise(resolve => setTimeout(resolve, 200));
|
|
|
|
if (data.error) {
|
|
this.results.showError(`Error: ${data.error}`);
|
|
return;
|
|
}
|
|
|
|
this.results.displayDocumentation(data);
|
|
|
|
} catch (error) {
|
|
if (this.results.loadingProgress) {
|
|
this.results.loadingProgress.hide();
|
|
}
|
|
this.results.showError(`Network error: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
getLanguageName(langCode) {
|
|
const langMap = {
|
|
'de': 'German',
|
|
'fr': 'French',
|
|
'es': 'Spanish',
|
|
'it': 'Italian',
|
|
'pt': 'Portuguese',
|
|
'ru': 'Russian'
|
|
};
|
|
return langMap[langCode] || langCode;
|
|
}
|
|
|
|
async loadCourseContent() {
|
|
await this.courseList.loadCourseContent();
|
|
const courseData = this.courseList.getCourseData();
|
|
if (courseData) {
|
|
this.results.displayCourse(courseData);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize app when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => new App());
|
|
} else {
|
|
new App();
|
|
}
|
|
|