785
public/framework.js
Normal file
785
public/framework.js
Normal file
@@ -0,0 +1,785 @@
|
||||
// SPORE UI Framework - Component-based architecture with pub/sub system
|
||||
|
||||
// Event Bus for pub/sub communication
|
||||
class EventBus {
|
||||
constructor() {
|
||||
this.events = new Map();
|
||||
}
|
||||
|
||||
// Subscribe to an event
|
||||
subscribe(event, callback) {
|
||||
if (!this.events.has(event)) {
|
||||
this.events.set(event, []);
|
||||
}
|
||||
this.events.get(event).push(callback);
|
||||
|
||||
// Return unsubscribe function
|
||||
return () => {
|
||||
const callbacks = this.events.get(event);
|
||||
if (callbacks) {
|
||||
const index = callbacks.indexOf(callback);
|
||||
if (index > -1) {
|
||||
callbacks.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Publish an event
|
||||
publish(event, data) {
|
||||
if (this.events.has(event)) {
|
||||
this.events.get(event).forEach(callback => {
|
||||
try {
|
||||
callback(data);
|
||||
} catch (error) {
|
||||
console.error(`Error in event callback for ${event}:`, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Unsubscribe from an event
|
||||
unsubscribe(event, callback) {
|
||||
if (this.events.has(event)) {
|
||||
const callbacks = this.events.get(event);
|
||||
const index = callbacks.indexOf(callback);
|
||||
if (index > -1) {
|
||||
callbacks.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clear all events
|
||||
clear() {
|
||||
this.events.clear();
|
||||
}
|
||||
}
|
||||
|
||||
// Base ViewModel class with enhanced state management
|
||||
class ViewModel {
|
||||
constructor() {
|
||||
this._data = {};
|
||||
this._listeners = new Map();
|
||||
this._eventBus = null;
|
||||
this._uiState = new Map(); // Store UI state like active tabs, expanded cards, etc.
|
||||
this._previousData = {}; // Store previous data for change detection
|
||||
}
|
||||
|
||||
// Set the event bus for this view model
|
||||
setEventBus(eventBus) {
|
||||
this._eventBus = eventBus;
|
||||
}
|
||||
|
||||
// Get data property
|
||||
get(property) {
|
||||
return this._data[property];
|
||||
}
|
||||
|
||||
// Set data property and notify listeners
|
||||
set(property, value) {
|
||||
console.log(`ViewModel: Setting property '${property}' to:`, value);
|
||||
|
||||
// Check if the value has actually changed
|
||||
const hasChanged = this._data[property] !== value;
|
||||
|
||||
if (hasChanged) {
|
||||
// Store previous value for change detection
|
||||
this._previousData[property] = this._data[property];
|
||||
|
||||
// Update the data
|
||||
this._data[property] = value;
|
||||
|
||||
console.log(`ViewModel: Property '${property}' changed, notifying listeners...`);
|
||||
this._notifyListeners(property, value, this._previousData[property]);
|
||||
} else {
|
||||
console.log(`ViewModel: Property '${property}' unchanged, skipping notification`);
|
||||
}
|
||||
}
|
||||
|
||||
// Set multiple properties at once with change detection
|
||||
setMultiple(properties) {
|
||||
const changedProperties = {};
|
||||
const unchangedProperties = {};
|
||||
|
||||
Object.keys(properties).forEach(key => {
|
||||
if (this._data[key] !== properties[key]) {
|
||||
changedProperties[key] = properties[key];
|
||||
} else {
|
||||
unchangedProperties[key] = properties[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Set all properties
|
||||
Object.keys(properties).forEach(key => {
|
||||
this._data[key] = properties[key];
|
||||
});
|
||||
|
||||
// Notify listeners only for changed properties
|
||||
Object.keys(changedProperties).forEach(key => {
|
||||
this._notifyListeners(key, changedProperties[key], this._previousData[key]);
|
||||
});
|
||||
|
||||
if (Object.keys(changedProperties).length > 0) {
|
||||
console.log(`ViewModel: Updated ${Object.keys(changedProperties).length} changed properties:`, Object.keys(changedProperties));
|
||||
}
|
||||
}
|
||||
|
||||
// Subscribe to property changes
|
||||
subscribe(property, callback) {
|
||||
if (!this._listeners.has(property)) {
|
||||
this._listeners.set(property, []);
|
||||
}
|
||||
this._listeners.get(property).push(callback);
|
||||
|
||||
// Return unsubscribe function
|
||||
return () => {
|
||||
const callbacks = this._listeners.get(property);
|
||||
if (callbacks) {
|
||||
const index = callbacks.indexOf(callback);
|
||||
if (index > -1) {
|
||||
callbacks.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Notify listeners of property changes
|
||||
_notifyListeners(property, value, previousValue) {
|
||||
console.log(`ViewModel: _notifyListeners called for property '${property}'`);
|
||||
if (this._listeners.has(property)) {
|
||||
const callbacks = this._listeners.get(property);
|
||||
console.log(`ViewModel: Found ${callbacks.length} listeners for property '${property}'`);
|
||||
callbacks.forEach((callback, index) => {
|
||||
try {
|
||||
console.log(`ViewModel: Calling listener ${index} for property '${property}'`);
|
||||
callback(value, previousValue);
|
||||
} catch (error) {
|
||||
console.error(`Error in property listener for ${property}:`, error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log(`ViewModel: No listeners found for property '${property}'`);
|
||||
}
|
||||
}
|
||||
|
||||
// Publish event to event bus
|
||||
publish(event, data) {
|
||||
if (this._eventBus) {
|
||||
this._eventBus.publish(event, data);
|
||||
}
|
||||
}
|
||||
|
||||
// Get all data
|
||||
getAll() {
|
||||
return { ...this._data };
|
||||
}
|
||||
|
||||
// Clear all data
|
||||
clear() {
|
||||
this._data = {};
|
||||
this._listeners.clear();
|
||||
}
|
||||
|
||||
// UI State Management Methods
|
||||
setUIState(key, value) {
|
||||
this._uiState.set(key, value);
|
||||
}
|
||||
|
||||
getUIState(key) {
|
||||
return this._uiState.get(key);
|
||||
}
|
||||
|
||||
getAllUIState() {
|
||||
return new Map(this._uiState);
|
||||
}
|
||||
|
||||
clearUIState(key) {
|
||||
if (key) {
|
||||
this._uiState.delete(key);
|
||||
} else {
|
||||
this._uiState.clear();
|
||||
}
|
||||
}
|
||||
|
||||
// Check if a property has changed
|
||||
hasChanged(property) {
|
||||
return this._data[property] !== this._previousData[property];
|
||||
}
|
||||
|
||||
// Get previous value of a property
|
||||
getPrevious(property) {
|
||||
return this._previousData[property];
|
||||
}
|
||||
|
||||
// Batch update with change detection
|
||||
batchUpdate(updates, options = {}) {
|
||||
const { preserveUIState = true, notifyChanges = true } = options;
|
||||
|
||||
if (preserveUIState) {
|
||||
// Store current UI state
|
||||
const currentUIState = new Map(this._uiState);
|
||||
|
||||
// Apply updates
|
||||
Object.keys(updates).forEach(key => {
|
||||
this._data[key] = updates[key];
|
||||
});
|
||||
|
||||
// Restore UI state
|
||||
this._uiState = currentUIState;
|
||||
} else {
|
||||
// Apply updates normally
|
||||
Object.keys(updates).forEach(key => {
|
||||
this._data[key] = updates[key];
|
||||
});
|
||||
}
|
||||
|
||||
// Notify listeners if requested
|
||||
if (notifyChanges) {
|
||||
Object.keys(updates).forEach(key => {
|
||||
this._notifyListeners(key, updates[key], this._previousData[key]);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Base Component class with enhanced state preservation
|
||||
class Component {
|
||||
constructor(container, viewModel, eventBus) {
|
||||
this.container = container;
|
||||
this.viewModel = viewModel;
|
||||
this.eventBus = eventBus;
|
||||
this.isMounted = false;
|
||||
this.unsubscribers = [];
|
||||
this.uiState = new Map(); // Local UI state for this component
|
||||
|
||||
// Set event bus on view model
|
||||
if (this.viewModel) {
|
||||
this.viewModel.setEventBus(eventBus);
|
||||
}
|
||||
|
||||
// Bind methods
|
||||
this.render = this.render.bind(this);
|
||||
this.mount = this.mount.bind(this);
|
||||
this.unmount = this.unmount.bind(this);
|
||||
this.updatePartial = this.updatePartial.bind(this);
|
||||
}
|
||||
|
||||
// Mount the component
|
||||
mount() {
|
||||
if (this.isMounted) return;
|
||||
|
||||
console.log(`${this.constructor.name}: Starting mount...`);
|
||||
this.isMounted = true;
|
||||
this.setupEventListeners();
|
||||
this.setupViewModelListeners();
|
||||
this.render();
|
||||
|
||||
console.log(`${this.constructor.name}: Mounted successfully`);
|
||||
}
|
||||
|
||||
// Unmount the component
|
||||
unmount() {
|
||||
if (!this.isMounted) return;
|
||||
|
||||
this.isMounted = false;
|
||||
this.cleanupEventListeners();
|
||||
this.cleanupViewModelListeners();
|
||||
|
||||
console.log(`${this.constructor.name} unmounted`);
|
||||
}
|
||||
|
||||
// Pause the component (keep alive but pause activity)
|
||||
pause() {
|
||||
if (!this.isMounted) return;
|
||||
|
||||
console.log(`${this.constructor.name}: Pausing component`);
|
||||
|
||||
// Pause any active timers or animations
|
||||
if (this.updateInterval) {
|
||||
clearInterval(this.updateInterval);
|
||||
this.updateInterval = null;
|
||||
}
|
||||
|
||||
// Pause any ongoing operations
|
||||
this.isPaused = true;
|
||||
|
||||
// Override in subclasses to pause specific functionality
|
||||
this.onPause();
|
||||
}
|
||||
|
||||
// Resume the component
|
||||
resume() {
|
||||
if (!this.isMounted || !this.isPaused) return;
|
||||
|
||||
console.log(`${this.constructor.name}: Resuming component`);
|
||||
|
||||
this.isPaused = false;
|
||||
|
||||
// Restart any necessary timers or operations
|
||||
this.onResume();
|
||||
|
||||
// Re-render if needed
|
||||
if (this.shouldRenderOnResume()) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
// Override in subclasses to handle pause-specific logic
|
||||
onPause() {
|
||||
// Default implementation does nothing
|
||||
}
|
||||
|
||||
// Override in subclasses to handle resume-specific logic
|
||||
onResume() {
|
||||
// Default implementation does nothing
|
||||
}
|
||||
|
||||
// Override in subclasses to determine if re-render is needed on resume
|
||||
shouldRenderOnResume() {
|
||||
// Default: don't re-render on resume
|
||||
return false;
|
||||
}
|
||||
|
||||
// Setup event listeners (override in subclasses)
|
||||
setupEventListeners() {
|
||||
// Override in subclasses
|
||||
}
|
||||
|
||||
// Setup view model listeners (override in subclasses)
|
||||
setupViewModelListeners() {
|
||||
// Override in subclasses
|
||||
}
|
||||
|
||||
// Cleanup event listeners (override in subclasses)
|
||||
cleanupEventListeners() {
|
||||
// Override in subclasses
|
||||
}
|
||||
|
||||
// Cleanup view model listeners (override in subclasses)
|
||||
cleanupViewModelListeners() {
|
||||
// Override in subclasses
|
||||
}
|
||||
|
||||
// Render the component (override in subclasses)
|
||||
render() {
|
||||
// Override in subclasses
|
||||
}
|
||||
|
||||
// Partial update method for efficient data updates
|
||||
updatePartial(property, newValue, previousValue) {
|
||||
// Override in subclasses to implement partial updates
|
||||
console.log(`${this.constructor.name}: Partial update for '${property}':`, { newValue, previousValue });
|
||||
}
|
||||
|
||||
// UI State Management Methods
|
||||
setUIState(key, value) {
|
||||
this.uiState.set(key, value);
|
||||
// Also store in view model for persistence across refreshes
|
||||
if (this.viewModel) {
|
||||
this.viewModel.setUIState(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
getUIState(key) {
|
||||
// First try local state, then view model state
|
||||
return this.uiState.get(key) || (this.viewModel ? this.viewModel.getUIState(key) : null);
|
||||
}
|
||||
|
||||
getAllUIState() {
|
||||
const localState = new Map(this.uiState);
|
||||
const viewModelState = this.viewModel ? this.viewModel.getAllUIState() : new Map();
|
||||
|
||||
// Merge states, with local state taking precedence
|
||||
const mergedState = new Map(viewModelState);
|
||||
localState.forEach((value, key) => mergedState.set(key, value));
|
||||
|
||||
return mergedState;
|
||||
}
|
||||
|
||||
clearUIState(key) {
|
||||
if (key) {
|
||||
this.uiState.delete(key);
|
||||
if (this.viewModel) {
|
||||
this.viewModel.clearUIState(key);
|
||||
}
|
||||
} else {
|
||||
this.uiState.clear();
|
||||
if (this.viewModel) {
|
||||
this.viewModel.clearUIState();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Restore UI state from view model
|
||||
restoreUIState() {
|
||||
if (this.viewModel) {
|
||||
const viewModelState = this.viewModel.getAllUIState();
|
||||
viewModelState.forEach((value, key) => {
|
||||
this.uiState.set(key, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to add event listener and track for cleanup
|
||||
addEventListener(element, event, handler) {
|
||||
element.addEventListener(event, handler);
|
||||
this.unsubscribers.push(() => {
|
||||
element.removeEventListener(event, handler);
|
||||
});
|
||||
}
|
||||
|
||||
// Helper method to subscribe to event bus and track for cleanup
|
||||
subscribeToEvent(event, handler) {
|
||||
const unsubscribe = this.eventBus.subscribe(event, handler);
|
||||
this.unsubscribers.push(unsubscribe);
|
||||
}
|
||||
|
||||
// Helper method to subscribe to view model property and track for cleanup
|
||||
subscribeToProperty(property, handler) {
|
||||
if (this.viewModel) {
|
||||
const unsubscribe = this.viewModel.subscribe(property, (newValue, previousValue) => {
|
||||
// Call handler with both new and previous values for change detection
|
||||
handler(newValue, previousValue);
|
||||
});
|
||||
this.unsubscribers.push(unsubscribe);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to find element within component container
|
||||
findElement(selector) {
|
||||
return this.container.querySelector(selector);
|
||||
}
|
||||
|
||||
// Helper method to find all elements within component container
|
||||
findAllElements(selector) {
|
||||
return this.container.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
// Helper method to set innerHTML safely
|
||||
setHTML(selector, html) {
|
||||
console.log(`${this.constructor.name}: setHTML called with selector '${selector}', html length: ${html.length}`);
|
||||
|
||||
let element;
|
||||
if (selector === '') {
|
||||
// Empty selector means set HTML on the component's container itself
|
||||
element = this.container;
|
||||
console.log(`${this.constructor.name}: Using component container for empty selector`);
|
||||
} else {
|
||||
// Find element within the component's container
|
||||
element = this.findElement(selector);
|
||||
}
|
||||
|
||||
if (element) {
|
||||
console.log(`${this.constructor.name}: Element found, setting innerHTML`);
|
||||
element.innerHTML = html;
|
||||
console.log(`${this.constructor.name}: innerHTML set successfully`);
|
||||
} else {
|
||||
console.error(`${this.constructor.name}: Element not found for selector '${selector}'`);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to set text content safely
|
||||
setText(selector, text) {
|
||||
const element = this.findElement(selector);
|
||||
if (element) {
|
||||
element.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to add/remove CSS classes
|
||||
setClass(selector, className, add = true) {
|
||||
const element = this.findElement(selector);
|
||||
if (element) {
|
||||
if (add) {
|
||||
element.classList.add(className);
|
||||
} else {
|
||||
element.classList.remove(className);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to set CSS styles
|
||||
setStyle(selector, property, value) {
|
||||
const element = this.findElement(selector);
|
||||
if (element) {
|
||||
element.style[property] = value;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to show/hide elements
|
||||
setVisible(selector, visible) {
|
||||
const element = this.findElement(selector);
|
||||
if (element) {
|
||||
element.style.display = visible ? '' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Helper method to enable/disable elements
|
||||
setEnabled(selector, enabled) {
|
||||
const element = this.findElement(selector);
|
||||
if (element) {
|
||||
element.disabled = !enabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Application class to manage components and routing
|
||||
class App {
|
||||
constructor() {
|
||||
this.eventBus = new EventBus();
|
||||
this.components = new Map();
|
||||
this.currentView = null;
|
||||
this.routes = new Map();
|
||||
this.navigationInProgress = false;
|
||||
this.navigationQueue = [];
|
||||
this.lastNavigationTime = 0;
|
||||
this.navigationCooldown = 300; // 300ms cooldown between navigations
|
||||
|
||||
// Component cache to keep components alive
|
||||
this.componentCache = new Map();
|
||||
this.cachedViews = new Set();
|
||||
}
|
||||
|
||||
// Register a route
|
||||
registerRoute(name, componentClass, containerId, viewModel = null) {
|
||||
this.routes.set(name, { componentClass, containerId, viewModel });
|
||||
|
||||
// Pre-initialize component in cache for better performance
|
||||
this.preInitializeComponent(name, componentClass, containerId, viewModel);
|
||||
}
|
||||
|
||||
// Pre-initialize component in cache
|
||||
preInitializeComponent(name, componentClass, containerId, viewModel) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
// Create component instance but don't mount it yet
|
||||
const component = new componentClass(container, viewModel, this.eventBus);
|
||||
component.routeName = name;
|
||||
component.isCached = true;
|
||||
|
||||
// Store in cache
|
||||
this.componentCache.set(name, component);
|
||||
console.log(`App: Pre-initialized component for route '${name}'`);
|
||||
}
|
||||
|
||||
// Navigate to a route
|
||||
navigateTo(routeName) {
|
||||
// Check cooldown period
|
||||
const now = Date.now();
|
||||
if (now - this.lastNavigationTime < this.navigationCooldown) {
|
||||
console.log(`App: Navigation cooldown active, skipping route '${routeName}'`);
|
||||
return;
|
||||
}
|
||||
|
||||
// If navigation is already in progress, queue this request
|
||||
if (this.navigationInProgress) {
|
||||
console.log(`App: Navigation in progress, queuing route '${routeName}'`);
|
||||
if (!this.navigationQueue.includes(routeName)) {
|
||||
this.navigationQueue.push(routeName);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// If trying to navigate to the same route, do nothing
|
||||
if (this.currentView && this.currentView.routeName === routeName) {
|
||||
console.log(`App: Already on route '${routeName}', skipping navigation`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.lastNavigationTime = now;
|
||||
this.performNavigation(routeName);
|
||||
}
|
||||
|
||||
// Perform the actual navigation
|
||||
async performNavigation(routeName) {
|
||||
this.navigationInProgress = true;
|
||||
|
||||
try {
|
||||
console.log(`App: Navigating to route '${routeName}'`);
|
||||
const route = this.routes.get(routeName);
|
||||
if (!route) {
|
||||
console.error(`Route '${routeName}' not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`App: Route found, component: ${route.componentClass.name}, container: ${route.containerId}`);
|
||||
|
||||
// Get or create component from cache
|
||||
let component = this.componentCache.get(routeName);
|
||||
if (!component) {
|
||||
console.log(`App: Component not in cache, creating new instance for '${routeName}'`);
|
||||
const container = document.getElementById(route.containerId);
|
||||
if (!container) {
|
||||
console.error(`Container '${route.containerId}' not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
component = new route.componentClass(container, route.viewModel, this.eventBus);
|
||||
component.routeName = routeName;
|
||||
component.isCached = true;
|
||||
this.componentCache.set(routeName, component);
|
||||
}
|
||||
|
||||
// Hide current view smoothly
|
||||
if (this.currentView) {
|
||||
console.log('App: Hiding current view');
|
||||
await this.hideCurrentView();
|
||||
}
|
||||
|
||||
// Show new view
|
||||
console.log(`App: Showing new view '${routeName}'`);
|
||||
await this.showView(routeName, component);
|
||||
|
||||
// Update navigation state
|
||||
this.updateNavigation(routeName);
|
||||
|
||||
// Set as current view
|
||||
this.currentView = component;
|
||||
|
||||
// Mark view as cached for future use
|
||||
this.cachedViews.add(routeName);
|
||||
|
||||
console.log(`App: Navigation to '${routeName}' completed`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('App: Navigation failed:', error);
|
||||
} finally {
|
||||
this.navigationInProgress = false;
|
||||
|
||||
// Process any queued navigation requests
|
||||
if (this.navigationQueue.length > 0) {
|
||||
const nextRoute = this.navigationQueue.shift();
|
||||
console.log(`App: Processing queued navigation to '${nextRoute}'`);
|
||||
setTimeout(() => this.navigateTo(nextRoute), 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide current view smoothly
|
||||
async hideCurrentView() {
|
||||
if (!this.currentView) return;
|
||||
|
||||
// If component is mounted, pause it instead of unmounting
|
||||
if (this.currentView.isMounted) {
|
||||
console.log('App: Pausing current view instead of unmounting');
|
||||
this.currentView.pause();
|
||||
}
|
||||
|
||||
// Fade out the container
|
||||
if (this.currentView.container) {
|
||||
this.currentView.container.style.opacity = '0';
|
||||
this.currentView.container.style.transition = 'opacity 0.15s ease-out';
|
||||
}
|
||||
|
||||
// Wait for fade out to complete
|
||||
await new Promise(resolve => setTimeout(resolve, 150));
|
||||
}
|
||||
|
||||
// Show view smoothly
|
||||
async showView(routeName, component) {
|
||||
const container = component.container;
|
||||
|
||||
// Ensure component is mounted (but not necessarily active)
|
||||
if (!component.isMounted) {
|
||||
console.log(`App: Mounting component for '${routeName}'`);
|
||||
component.mount();
|
||||
} else {
|
||||
console.log(`App: Resuming component for '${routeName}'`);
|
||||
component.resume();
|
||||
}
|
||||
|
||||
// Fade in the container
|
||||
container.style.opacity = '0';
|
||||
container.style.transition = 'opacity 0.2s ease-in';
|
||||
|
||||
// Small delay to ensure smooth transition
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
|
||||
// Fade in
|
||||
container.style.opacity = '1';
|
||||
}
|
||||
|
||||
// Update navigation state
|
||||
updateNavigation(activeRoute) {
|
||||
// Remove active class from all nav tabs
|
||||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// Add active class to current route tab
|
||||
const activeTab = document.querySelector(`[data-view="${activeRoute}"]`);
|
||||
if (activeTab) {
|
||||
activeTab.classList.add('active');
|
||||
}
|
||||
|
||||
// Hide all view contents with smooth transition
|
||||
document.querySelectorAll('.view-content').forEach(view => {
|
||||
view.classList.remove('active');
|
||||
view.style.opacity = '0';
|
||||
view.style.transition = 'opacity 0.15s ease-out';
|
||||
});
|
||||
|
||||
// Show current view content with smooth transition
|
||||
const activeView = document.getElementById(`${activeRoute}-view`);
|
||||
if (activeView) {
|
||||
activeView.classList.add('active');
|
||||
// Small delay to ensure smooth transition
|
||||
setTimeout(() => {
|
||||
activeView.style.opacity = '1';
|
||||
activeView.style.transition = 'opacity 0.2s ease-in';
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
// Register a component
|
||||
registerComponent(name, component) {
|
||||
this.components.set(name, component);
|
||||
}
|
||||
|
||||
// Get a component by name
|
||||
getComponent(name) {
|
||||
return this.components.get(name);
|
||||
}
|
||||
|
||||
// Get the event bus
|
||||
getEventBus() {
|
||||
return this.eventBus;
|
||||
}
|
||||
|
||||
// Initialize the application
|
||||
init() {
|
||||
console.log('SPORE UI Framework initialized');
|
||||
|
||||
// Note: Navigation is now handled by the app initialization
|
||||
// to ensure routes are registered before navigation
|
||||
}
|
||||
|
||||
// Setup navigation
|
||||
setupNavigation() {
|
||||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const routeName = tab.dataset.view;
|
||||
this.navigateTo(routeName);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Clean up cached components (call when app is shutting down)
|
||||
cleanup() {
|
||||
console.log('App: Cleaning up cached components...');
|
||||
|
||||
this.componentCache.forEach((component, routeName) => {
|
||||
if (component.isMounted) {
|
||||
console.log(`App: Unmounting cached component '${routeName}'`);
|
||||
component.unmount();
|
||||
}
|
||||
});
|
||||
|
||||
this.componentCache.clear();
|
||||
this.cachedViews.clear();
|
||||
}
|
||||
}
|
||||
|
||||
// Global app instance
|
||||
window.app = new App();
|
||||
Reference in New Issue
Block a user