${text}
`; }); - this.modals.alert.show({ - title: _('Permissions error'), - body: htmlBody, - contentId: 'error', - }); + if (htmlBody) { + this.modals.alert.show({ + title: _('Permissions error'), + body: htmlBody, + contentId: 'error', + }); + } } } /** * Show LOPDGDD modal if necessary + * Skip LOPD modal when auth is not required (guest access) * */ async showModalLopd() { + // Skip LOPD modal when auth is not required (static/offline mode) + if (!this.capabilities?.auth?.required) { + await this.loadProject(); + this.check(); + return; + } + if (!eXeLearning.user.acceptedLopd) { // Load modals content await this.project.loadModalsContent(); @@ -789,10 +930,25 @@ function __exeInstallBeforeUnloadOnce() { /** * Run eXe client on load + * In static mode, waits for project selection before initializing * */ window.onload = function () { var eXeLearning = window.eXeLearning; eXeLearning.app = new App(eXeLearning); + + // Static mode: wait for project selection (projectId will be set by welcome screen) + // Use RuntimeConfig for early detection (before app.capabilities is available) + const runtimeConfig = RuntimeConfig.fromEnvironment(); + if (runtimeConfig.isStaticMode() && !eXeLearning.projectId) { + console.log('[App] Static mode: waiting for project selection...'); + // Expose a function to start the app after project is selected + window.__startExeApp = function () { + console.log('[App] Starting app with project:', eXeLearning.projectId); + eXeLearning.app.init(); + }; + return; + } + eXeLearning.app.init(); }; diff --git a/public/app/app.test.js b/public/app/app.test.js index 7c72d32e2..0a15e954c 100644 --- a/public/app/app.test.js +++ b/public/app/app.test.js @@ -663,6 +663,9 @@ describe('App utility methods', () => { info: ['Error 1', 'Error 2'], }; + // Mock isStaticMode to return false so we test the normal check flow + vi.spyOn(appInstance, 'isStaticMode').mockReturnValue(false); + await appInstance.check(); expect(showSpy).toHaveBeenCalledWith(expect.objectContaining({ @@ -1070,6 +1073,9 @@ describe('App utility methods', () => { const hideSpy = vi.fn(); const loadModalsContentSpy = vi.fn(); + // Mock isStaticMode to return false so we test the normal LOPD flow + vi.spyOn(appInstance, 'isStaticMode').mockReturnValue(false); + appInstance.project = { loadModalsContent: loadModalsContentSpy }; appInstance.interface = { loadingScreen: { hide: hideSpy } }; appInstance.modals = { @@ -1091,6 +1097,9 @@ describe('App utility methods', () => { const loadSpy = vi.fn(); const checkSpy = vi.spyOn(appInstance, 'check').mockImplementation(() => {}); + // Mock isStaticMode to return false so we test the normal LOPD flow + vi.spyOn(appInstance, 'isStaticMode').mockReturnValue(false); + appInstance.project = { load: loadSpy }; await appInstance.showModalLopd(); @@ -1174,7 +1183,7 @@ describe('App utility methods', () => { it('sets up session monitor for online installation', () => { window.eXeLearning = { user: '{"id":1}', - config: '{"isOfflineInstallation":false,"basePath":""}', + config: '{"isOfflineInstallation":false,"basePath":"","fullURL":"http://localhost:8080"}', }; const app = new App(window.eXeLearning); diff --git a/public/app/common/common.js b/public/app/common/common.js index 1dd489f46..e33bf628f 100644 --- a/public/app/common/common.js +++ b/public/app/common/common.js @@ -88,7 +88,11 @@ window.MathJax = window.MathJax || (function() { load: externalExtensions.map(function(ext) { return '[tex]/' + ext; }) }, options: { - // MathJax Configuration Options + // Exclude navbar dropdown menus from MathJax processing (File, Edit, etc.) + // Note: nav-element is NOT excluded - page titles with LaTeX must be processed + ignoreHtmlClass: 'tex2jax_ignore|dropdown-menu|dropdown-item|modal', + // Skip processing inside these HTML tags + skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] } }; })(); @@ -1498,7 +1502,11 @@ var $exeDevices = { } if (!window.MathJax.loader) window.MathJax.loader = {}; if (!window.MathJax.loader.paths) window.MathJax.loader.paths = {}; - window.MathJax.loader.paths.mathjax = basePath; + // In static mode, keep the pre-configured relative path + var capabilities = window.eXeLearning?.app?.capabilities; + if (capabilities?.storage?.remote) { + window.MathJax.loader.paths.mathjax = basePath; + } var script = document.createElement('script'); script.src = self.engine; script.async = true; diff --git a/public/app/core/Capabilities.js b/public/app/core/Capabilities.js new file mode 100644 index 000000000..676431c35 --- /dev/null +++ b/public/app/core/Capabilities.js @@ -0,0 +1,112 @@ +/** + * Capabilities - Feature flags that UI and business logic should query. + * Instead of checking mode, code should check capabilities. + * + * Example: + * // BAD: if (this.app.isStaticMode()) { ... } + * // GOOD: if (!this.app.capabilities.collaboration.enabled) { ... } + */ +export class Capabilities { + /** + * @param {import('./RuntimeConfig').RuntimeConfig} config + */ + constructor(config) { + const isServer = config.mode === 'server'; + const isStatic = config.mode === 'static'; + const isElectron = config.mode === 'electron'; + + /** + * Collaboration features (presence, real-time sync) + */ + this.collaboration = Object.freeze({ + /** Whether collaboration is available */ + enabled: isServer, + /** Whether real-time sync via WebSocket is available */ + realtime: isServer, + /** Whether presence/cursors are available */ + presence: isServer, + /** Whether concurrent editing is supported */ + concurrent: isServer, + }); + + /** + * Storage capabilities + */ + this.storage = Object.freeze({ + /** Whether remote server storage is available */ + remote: isServer, + /** Whether local storage (IndexedDB) is available */ + local: true, // Always available + /** Whether sync between local and remote is available */ + sync: isServer, + /** Whether projects are persisted to server */ + serverPersistence: isServer, + }); + + /** + * Export capabilities + */ + this.export = Object.freeze({ + /** Whether server-side export is available */ + serverSide: isServer, + /** Whether client-side export (JSZip) is available */ + clientSide: true, // Always available + }); + + /** + * Authentication capabilities + */ + this.auth = Object.freeze({ + /** Whether authentication is required */ + required: isServer, + /** Whether guest/anonymous access is allowed */ + guest: isStatic || isElectron, + /** Whether login/logout is available */ + loginAvailable: isServer, + }); + + /** + * Project management capabilities + */ + this.projects = Object.freeze({ + /** Whether project list is fetched from server */ + remoteList: isServer, + /** Whether projects are stored in IndexedDB */ + localList: isStatic || isElectron, + /** Whether "Recent Projects" uses server API */ + recentFromServer: isServer, + /** Whether "Open from server" is available */ + openFromServer: isServer, + /** Whether "Save to server" is available */ + saveToServer: isServer, + }); + + /** + * Sharing capabilities + */ + this.sharing = Object.freeze({ + /** Whether sharing is available */ + enabled: isServer, + /** Whether visibility settings are available */ + visibility: isServer, + /** Whether link sharing is available */ + links: isServer, + }); + + /** + * File management capabilities + */ + this.fileManager = Object.freeze({ + /** Whether file manager dialog is available */ + enabled: true, // Available in all modes + /** Whether file manager uses server API */ + serverBacked: isServer, + /** Whether files are stored locally */ + localBacked: isStatic || isElectron, + }); + + Object.freeze(this); + } +} + +export default Capabilities; diff --git a/public/app/core/Capabilities.test.js b/public/app/core/Capabilities.test.js new file mode 100644 index 000000000..1c15d9a0b --- /dev/null +++ b/public/app/core/Capabilities.test.js @@ -0,0 +1,150 @@ +import { describe, it, expect } from 'vitest'; +import { Capabilities } from './Capabilities.js'; +import { RuntimeConfig } from './RuntimeConfig.js'; + +describe('Capabilities', () => { + describe('server mode', () => { + const config = new RuntimeConfig({ + mode: 'server', + baseUrl: 'http://localhost:8080', + wsUrl: 'ws://localhost:8080', + staticDataPath: null, + }); + const capabilities = new Capabilities(config); + + it('should be immutable', () => { + expect(Object.isFrozen(capabilities)).toBe(true); + expect(Object.isFrozen(capabilities.collaboration)).toBe(true); + expect(Object.isFrozen(capabilities.storage)).toBe(true); + }); + + it('should enable collaboration features', () => { + expect(capabilities.collaboration.enabled).toBe(true); + expect(capabilities.collaboration.realtime).toBe(true); + expect(capabilities.collaboration.presence).toBe(true); + expect(capabilities.collaboration.concurrent).toBe(true); + }); + + it('should enable remote storage', () => { + expect(capabilities.storage.remote).toBe(true); + expect(capabilities.storage.local).toBe(true); + expect(capabilities.storage.sync).toBe(true); + expect(capabilities.storage.serverPersistence).toBe(true); + }); + + it('should enable both export methods', () => { + expect(capabilities.export.serverSide).toBe(true); + expect(capabilities.export.clientSide).toBe(true); + }); + + it('should require authentication', () => { + expect(capabilities.auth.required).toBe(true); + expect(capabilities.auth.guest).toBe(false); + expect(capabilities.auth.loginAvailable).toBe(true); + }); + + it('should enable remote project features', () => { + expect(capabilities.projects.remoteList).toBe(true); + expect(capabilities.projects.localList).toBe(false); + expect(capabilities.projects.recentFromServer).toBe(true); + expect(capabilities.projects.openFromServer).toBe(true); + expect(capabilities.projects.saveToServer).toBe(true); + }); + + it('should enable sharing', () => { + expect(capabilities.sharing.enabled).toBe(true); + expect(capabilities.sharing.visibility).toBe(true); + expect(capabilities.sharing.links).toBe(true); + }); + + it('should enable server-backed file manager', () => { + expect(capabilities.fileManager.enabled).toBe(true); + expect(capabilities.fileManager.serverBacked).toBe(true); + expect(capabilities.fileManager.localBacked).toBe(false); + }); + }); + + describe('static mode', () => { + const config = new RuntimeConfig({ + mode: 'static', + baseUrl: '.', + wsUrl: null, + staticDataPath: './data/bundle.json', + }); + const capabilities = new Capabilities(config); + + it('should disable collaboration features', () => { + expect(capabilities.collaboration.enabled).toBe(false); + expect(capabilities.collaboration.realtime).toBe(false); + expect(capabilities.collaboration.presence).toBe(false); + expect(capabilities.collaboration.concurrent).toBe(false); + }); + + it('should use local storage only', () => { + expect(capabilities.storage.remote).toBe(false); + expect(capabilities.storage.local).toBe(true); + expect(capabilities.storage.sync).toBe(false); + expect(capabilities.storage.serverPersistence).toBe(false); + }); + + it('should only support client-side export', () => { + expect(capabilities.export.serverSide).toBe(false); + expect(capabilities.export.clientSide).toBe(true); + }); + + it('should allow guest access', () => { + expect(capabilities.auth.required).toBe(false); + expect(capabilities.auth.guest).toBe(true); + expect(capabilities.auth.loginAvailable).toBe(false); + }); + + it('should use local project storage', () => { + expect(capabilities.projects.remoteList).toBe(false); + expect(capabilities.projects.localList).toBe(true); + expect(capabilities.projects.recentFromServer).toBe(false); + expect(capabilities.projects.openFromServer).toBe(false); + expect(capabilities.projects.saveToServer).toBe(false); + }); + + it('should disable sharing', () => { + expect(capabilities.sharing.enabled).toBe(false); + expect(capabilities.sharing.visibility).toBe(false); + expect(capabilities.sharing.links).toBe(false); + }); + + it('should use local-backed file manager', () => { + expect(capabilities.fileManager.enabled).toBe(true); + expect(capabilities.fileManager.serverBacked).toBe(false); + expect(capabilities.fileManager.localBacked).toBe(true); + }); + }); + + describe('electron mode', () => { + const config = new RuntimeConfig({ + mode: 'electron', + baseUrl: 'http://localhost', + wsUrl: null, + staticDataPath: null, + }); + const capabilities = new Capabilities(config); + + it('should disable collaboration (no WebSocket)', () => { + expect(capabilities.collaboration.enabled).toBe(false); + }); + + it('should allow guest access', () => { + expect(capabilities.auth.required).toBe(false); + expect(capabilities.auth.guest).toBe(true); + }); + + it('should use local project storage', () => { + expect(capabilities.projects.localList).toBe(true); + expect(capabilities.projects.remoteList).toBe(false); + }); + + it('should use local-backed file manager', () => { + expect(capabilities.fileManager.localBacked).toBe(true); + expect(capabilities.fileManager.serverBacked).toBe(false); + }); + }); +}); diff --git a/public/app/core/DataProvider.js b/public/app/core/DataProvider.js new file mode 100644 index 000000000..fef584ce0 --- /dev/null +++ b/public/app/core/DataProvider.js @@ -0,0 +1,345 @@ +/** + * DataProvider + * Unified data access abstraction for eXeLearning. + * Switches between server API calls and pre-bundled static data. + * + * Usage: + * const provider = new DataProvider('static'); // or 'server' + * await provider.init(); + * const translations = await provider.getTranslations('en'); + */ + +// Use global AppLogger for debug-controlled logging +const getLogger = () => window.AppLogger || console; + +export default class DataProvider { + /** + * @param {'server' | 'static'} mode - Data access mode + * @param {Object} options - Configuration options + * @param {string} [options.basePath=''] - Base path for API URLs + * @param {Object} [options.staticData=null] - Pre-bundled static data (if not in window.__EXE_STATIC_DATA__) + */ + constructor(mode = 'server', options = {}) { + this.mode = mode; + this.basePath = options.basePath || ''; + this.staticData = options.staticData || null; + this.initialized = false; + + // Cache for loaded data (both modes) + this.cache = { + parameters: null, + translations: {}, + idevices: null, + themes: null, + bundleManifest: null, + }; + + getLogger().log(`[DataProvider] Created in ${mode} mode`); + } + + /** + * Initialize the data provider + * In static mode, loads data from window.__EXE_STATIC_DATA__ or fetches bundle.json + */ + async init() { + if (this.initialized) { + return; + } + + if (this.mode === 'static') { + await this._initStaticData(); + } + + this.initialized = true; + getLogger().log('[DataProvider] Initialized'); + } + + /** + * Load static data from embedded or external source + * @private + */ + async _initStaticData() { + // Priority 1: Constructor-provided data + if (this.staticData) { + getLogger().log('[DataProvider] Using constructor-provided static data'); + return; + } + + // Priority 2: Embedded in window + if (window.__EXE_STATIC_DATA__) { + this.staticData = window.__EXE_STATIC_DATA__; + getLogger().log('[DataProvider] Using window.__EXE_STATIC_DATA__'); + return; + } + + // Priority 3: Fetch from bundle.json + try { + const bundleUrl = `${this.basePath}/data/bundle.json`; + getLogger().log(`[DataProvider] Fetching static data from ${bundleUrl}`); + const response = await fetch(bundleUrl); + if (response.ok) { + this.staticData = await response.json(); + getLogger().log('[DataProvider] Loaded static data from bundle.json'); + return; + } + } catch (e) { + getLogger().warn('[DataProvider] Failed to fetch bundle.json:', e.message); + } + + // Fallback: Create empty structure + getLogger().warn('[DataProvider] No static data source found, using empty defaults'); + this.staticData = { + parameters: { routes: {} }, + translations: { en: { translations: {} } }, + idevices: { idevices: [] }, + themes: { themes: [] }, + bundleManifest: null, + }; + } + + /** + * Check if running in static (offline) mode + * @returns {boolean} + */ + isStaticMode() { + return this.mode === 'static'; + } + + /** + * Check if running in server (online) mode + * @returns {boolean} + */ + isServerMode() { + return this.mode === 'server'; + } + + /** + * Get API parameters (route definitions) + * @returns {Promise<{routes: Object}>} + */ + async getApiParameters() { + if (this.cache.parameters) { + return this.cache.parameters; + } + + if (this.mode === 'static') { + this.cache.parameters = this.staticData?.parameters || { routes: {} }; + return this.cache.parameters; + } + + // Server mode: fetch from API + const url = `${this.basePath}/api/parameter-management/parameters/data/list`; + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP ${response.status}`); + } + this.cache.parameters = await response.json(); + return this.cache.parameters; + } catch (e) { + getLogger().error('[DataProvider] Failed to fetch API parameters:', e); + throw e; + } + } + + /** + * Get translations for a locale + * @param {string} locale - Language code (e.g., 'en', 'es') + * @returns {Promise<{translations: Object}>} + */ + async getTranslations(locale) { + // Default to 'en' if locale is null/undefined + const safeLocale = locale || 'en'; + + if (this.cache.translations[safeLocale]) { + return this.cache.translations[safeLocale]; + } + + if (this.mode === 'static') { + // Try exact locale, then fall back to base language, then 'en' + const baseLocale = safeLocale.split('-')[0]; + const translations = + this.staticData?.translations?.[safeLocale] || + this.staticData?.translations?.[baseLocale] || + this.staticData?.translations?.en || + { translations: {} }; + + this.cache.translations[safeLocale] = translations; + return translations; + } + + // Server mode: fetch from API + const url = `${this.basePath}/api/translations/${safeLocale}`; + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP ${response.status}`); + } + this.cache.translations[safeLocale] = await response.json(); + return this.cache.translations[safeLocale]; + } catch (e) { + getLogger().error(`[DataProvider] Failed to fetch translations for ${safeLocale}:`, e); + // Return empty translations to avoid breaking the app + return { translations: {} }; + } + } + + /** + * Get installed iDevices list + * @returns {Promise<{idevices: Array}>} + */ + async getInstalledIdevices() { + if (this.cache.idevices) { + return this.cache.idevices; + } + + if (this.mode === 'static') { + this.cache.idevices = this.staticData?.idevices || { idevices: [] }; + return this.cache.idevices; + } + + // Server mode: will be fetched via apiCallManager + // This method provides a fallback + return { idevices: [] }; + } + + /** + * Get installed themes list + * @returns {Promise<{themes: Array}>} + */ + async getInstalledThemes() { + if (this.cache.themes) { + return this.cache.themes; + } + + if (this.mode === 'static') { + this.cache.themes = this.staticData?.themes || { themes: [] }; + return this.cache.themes; + } + + // Server mode: will be fetched via apiCallManager + // This method provides a fallback + return { themes: [] }; + } + + /** + * Get bundle manifest (for resource fetching) + * @returns {Promise