656 lines
23 KiB
JavaScript
656 lines
23 KiB
JavaScript
// Project Friction - Main Application
|
|
// Museum-quality digital exhibit for Canada's Gulf War role
|
|
|
|
class ProjectFriction {
|
|
constructor() {
|
|
this.currentSection = null;
|
|
this.map = null;
|
|
this.mapLayers = {};
|
|
this.timeline = null;
|
|
this.data = {
|
|
sections: [],
|
|
mapData: {},
|
|
timelineEvents: [],
|
|
articles: {}
|
|
};
|
|
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
try {
|
|
// Show loading screen
|
|
this.showLoadingScreen();
|
|
|
|
// Load data
|
|
await this.loadApplicationData();
|
|
|
|
// Initialize components
|
|
this.initializeMap();
|
|
this.initializeNavigation();
|
|
this.initializeTimeline();
|
|
this.initializeInteractions();
|
|
|
|
// Setup event listeners
|
|
this.setupEventListeners();
|
|
|
|
// Load initial state
|
|
this.loadMainNavigation();
|
|
|
|
// Hide loading screen
|
|
this.hideLoadingScreen();
|
|
|
|
console.log('Project Friction initialized successfully');
|
|
} catch (error) {
|
|
console.error('Error initializing Project Friction:', error);
|
|
this.showErrorMessage('Failed to load exhibition. Please refresh the page.');
|
|
}
|
|
}
|
|
|
|
async loadApplicationData() {
|
|
// Load optional datasets without failing app startup if files are missing.
|
|
this.data.sections = await this.loadOptionalJSON(['data/sections.json'], []);
|
|
this.data.mapData = await this.loadOptionalJSON(['data/map-data.json', 'map-data.json'], {});
|
|
this.data.timelineEvents = await this.loadOptionalJSON(['data/timeline-events.json'], []);
|
|
this.data.articles = await this.loadOptionalJSON(['data/articles.json'], {});
|
|
|
|
// Load block-based section content (used by the block renderer)
|
|
this.data.sectionsContent = await this.loadOptionalJSON(['data/sections-content.json'], {});
|
|
|
|
if (!Array.isArray(this.data.sections) || this.data.sections.length === 0) {
|
|
this.loadDefaultConfiguration();
|
|
}
|
|
|
|
this.mergeBuilderSectionsFromStorage();
|
|
}
|
|
|
|
mergeBuilderSectionsFromStorage() {
|
|
if (typeof localStorage === 'undefined') return;
|
|
|
|
var raw = localStorage.getItem('pf-builder-sections');
|
|
if (!raw) return;
|
|
|
|
try {
|
|
var parsed = JSON.parse(raw);
|
|
var order = Array.isArray(parsed.order) ? parsed.order : Object.keys(parsed.sections || {});
|
|
var sectionMeta = parsed.sections || {};
|
|
if (!Array.isArray(this.data.sections)) this.data.sections = [];
|
|
|
|
var existingById = {};
|
|
this.data.sections.forEach(function(section) {
|
|
existingById[section.id] = section;
|
|
});
|
|
|
|
order.forEach(function(id) {
|
|
var meta = sectionMeta[id];
|
|
if (!meta) return;
|
|
|
|
var stats = {
|
|
articles: parseInt(meta.stats && meta.stats.articles, 10) || 0,
|
|
storyMaps: parseInt(meta.stats && meta.stats.storyMaps, 10) || 0,
|
|
images: parseInt(meta.stats && meta.stats.images, 10) || 0
|
|
};
|
|
|
|
if (existingById[id]) {
|
|
existingById[id].title = meta.title || existingById[id].title;
|
|
existingById[id].subtitle = meta.subtitle || existingById[id].subtitle;
|
|
existingById[id].description = meta.description || existingById[id].description;
|
|
existingById[id].icon = meta.icon || existingById[id].icon;
|
|
existingById[id].color = meta.color || existingById[id].color;
|
|
existingById[id].stats = stats;
|
|
} else {
|
|
var newSection = {
|
|
id: id,
|
|
title: meta.title || id,
|
|
subtitle: meta.subtitle || '',
|
|
icon: meta.icon || '📚',
|
|
color: meta.color || '#7f8c8d',
|
|
description: meta.description || '',
|
|
stats: stats
|
|
};
|
|
this.data.sections.push(newSection);
|
|
existingById[id] = newSection;
|
|
}
|
|
}, this);
|
|
|
|
// Keep display order aligned with builder tabs for kiosk consistency.
|
|
var reordered = [];
|
|
order.forEach(function(id) {
|
|
if (existingById[id]) reordered.push(existingById[id]);
|
|
});
|
|
this.data.sections.forEach(function(section) {
|
|
if (order.indexOf(section.id) === -1) reordered.push(section);
|
|
});
|
|
this.data.sections = reordered;
|
|
} catch (error) {
|
|
console.warn('Could not parse builder section metadata from localStorage.');
|
|
}
|
|
}
|
|
|
|
async loadJSON(url) {
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load ${url}: ${response.status}`);
|
|
}
|
|
return await response.json();
|
|
}
|
|
|
|
async loadOptionalJSON(paths, fallbackValue) {
|
|
for (const path of paths) {
|
|
try {
|
|
return await this.loadJSON(path);
|
|
} catch (error) {
|
|
console.warn(`Optional data file not available: ${path}`);
|
|
}
|
|
}
|
|
|
|
return fallbackValue;
|
|
}
|
|
|
|
loadDefaultConfiguration() {
|
|
// Fallback configuration if data files fail to load
|
|
this.data.sections = [
|
|
{
|
|
id: 'context',
|
|
title: 'Historical Context',
|
|
subtitle: 'Coalition Building & Diplomacy',
|
|
icon: '🌍',
|
|
color: '#d4a574',
|
|
description: 'Understand how Iraq\'s invasion of Kuwait triggered the largest military coalition since WWII and Canada\'s diplomatic role.',
|
|
stats: { articles: 7, storyMaps: 3, images: 45 }
|
|
},
|
|
{
|
|
id: 'rcaf',
|
|
title: 'RCAF Desert Cats',
|
|
subtitle: '409 Squadron Air Operations',
|
|
icon: '✈️',
|
|
color: '#3498db',
|
|
description: 'Follow the Desert Cats from defensive patrols to strike missions, including the TNC-45 engagement and bombing runs.',
|
|
stats: { articles: 8, storyMaps: 4, images: 60 }
|
|
},
|
|
{
|
|
id: 'rcn',
|
|
title: 'RCN Task Group',
|
|
subtitle: 'Naval Blockade Operations',
|
|
icon: '⚓',
|
|
color: '#2c3e50',
|
|
description: 'The transformation of HMCS Terra Nova into a guided-missile destroyer and enforcement of UN sanctions.',
|
|
stats: { articles: 7, storyMaps: 2, images: 35 }
|
|
},
|
|
{
|
|
id: 'army',
|
|
title: 'Canadian Army',
|
|
subtitle: 'Medical & Security Forces',
|
|
icon: '🏥',
|
|
color: '#27ae60',
|
|
description: '1 Canadian Field Hospital\'s life-saving work and security operations protecting coalition installations.',
|
|
stats: { articles: 7, storyMaps: 3, images: 40 }
|
|
},
|
|
{
|
|
id: 'legacy',
|
|
title: 'After the War',
|
|
subtitle: 'Veterans & Long-term Impact',
|
|
icon: '🍁',
|
|
color: '#c0392b',
|
|
description: 'Gulf War Syndrome, environmental cleanup, peacekeeping missions, and the ongoing support for veterans.',
|
|
stats: { articles: 7, storyMaps: 2, images: 30 }
|
|
}
|
|
];
|
|
|
|
// Default stats for main navigation
|
|
this.data.globalStats = {
|
|
personnel: '4,500+',
|
|
sorties: '2,700',
|
|
medals: '4,449',
|
|
duration: '7'
|
|
};
|
|
}
|
|
|
|
initializeMap() {
|
|
if (!window.L) {
|
|
console.warn('Leaflet is unavailable. Map features are disabled.');
|
|
return;
|
|
}
|
|
|
|
const mapElement = document.getElementById('map');
|
|
if (!mapElement) {
|
|
console.warn('Map container not found.');
|
|
return;
|
|
}
|
|
|
|
// Initialize Leaflet map
|
|
this.map = L.map('map', {
|
|
center: [29.3759, 47.9774], // Kuwait City
|
|
zoom: 6,
|
|
zoomControl: false
|
|
});
|
|
|
|
// Add tile layer
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxZoom: 18
|
|
}).addTo(this.map);
|
|
|
|
// Initialize layer groups
|
|
this.mapLayers = {
|
|
coalition: L.layerGroup(),
|
|
iraqi: L.layerGroup(),
|
|
canadian: L.layerGroup(),
|
|
events: L.layerGroup(),
|
|
routes: L.layerGroup()
|
|
};
|
|
|
|
// Add initial overview markers
|
|
this.loadOverviewMarkers();
|
|
}
|
|
|
|
loadOverviewMarkers() {
|
|
if (!this.map || !window.L) return;
|
|
|
|
// Add basic overview markers
|
|
const overviewMarkers = [
|
|
{ lat: 29.3759, lng: 47.9774, title: 'Kuwait City', type: 'liberation' },
|
|
{ lat: 25.2731, lng: 51.6080, title: 'Doha Air Base', type: 'canadian' },
|
|
{ lat: 26.2285, lng: 50.5860, title: 'Naval Operations', type: 'canadian' }
|
|
];
|
|
|
|
overviewMarkers.forEach(marker => {
|
|
const mapMarker = L.marker([marker.lat, marker.lng])
|
|
.bindPopup(`<strong>${marker.title}</strong>`)
|
|
.addTo(this.map);
|
|
});
|
|
}
|
|
|
|
initializeNavigation() {
|
|
if (typeof NavigationController === 'undefined') {
|
|
console.warn('NavigationController is unavailable. Using built-in navigation only.');
|
|
return;
|
|
}
|
|
|
|
this.navigation = new NavigationController(this);
|
|
this.navigation.init();
|
|
}
|
|
|
|
initializeTimeline() {
|
|
if (typeof TimelineController === 'undefined') {
|
|
console.warn('TimelineController is unavailable.');
|
|
return;
|
|
}
|
|
|
|
this.timeline = new TimelineController(this);
|
|
this.timeline.init();
|
|
}
|
|
|
|
initializeInteractions() {
|
|
if (typeof InteractionController === 'undefined') {
|
|
console.warn('InteractionController is unavailable.');
|
|
return;
|
|
}
|
|
|
|
this.interactions = new InteractionController(this);
|
|
this.interactions.init();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Sidebar toggle
|
|
const sidebarToggle = document.getElementById('sidebarToggle');
|
|
if (sidebarToggle) {
|
|
sidebarToggle.addEventListener('click', () => this.toggleSidebar());
|
|
}
|
|
|
|
// Back button
|
|
const backButton = document.getElementById('backButton');
|
|
if (backButton) {
|
|
backButton.addEventListener('click', () => this.showMainNavigation());
|
|
}
|
|
|
|
// Window resize handler
|
|
window.addEventListener('resize', () => this.handleResize());
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => this.handleKeyboard(e));
|
|
}
|
|
|
|
loadMainNavigation() {
|
|
// Show main navigation
|
|
const mainNav = document.getElementById('mainNavigation');
|
|
const sectionContainer = document.getElementById('sectionContainer');
|
|
const backButton = document.getElementById('backButton');
|
|
|
|
if (mainNav) mainNav.classList.remove('hidden');
|
|
if (sectionContainer) sectionContainer.classList.add('hidden');
|
|
if (backButton) backButton.classList.remove('show');
|
|
|
|
// Load navigation cards and stats
|
|
this.renderQuickStats();
|
|
this.renderNavigationCards();
|
|
|
|
// Reset map to overview
|
|
this.resetMapView();
|
|
this.currentSection = null;
|
|
}
|
|
|
|
renderQuickStats() {
|
|
const statsContainer = document.getElementById('quickStats');
|
|
if (!statsContainer) return;
|
|
|
|
const stats = this.data.globalStats || {
|
|
personnel: '4,500+',
|
|
sorties: '2,700',
|
|
medals: '4,449',
|
|
duration: '7'
|
|
};
|
|
|
|
statsContainer.innerHTML = `
|
|
<div class="stat-card">
|
|
<div class="stat-number">${stats.personnel}</div>
|
|
<div class="stat-label">Personnel</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">${stats.sorties}</div>
|
|
<div class="stat-label">Sorties</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">${stats.medals}</div>
|
|
<div class="stat-label">Medals</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">${stats.duration}</div>
|
|
<div class="stat-label">Months</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
renderNavigationCards() {
|
|
const cardsContainer = document.getElementById('navigationCards');
|
|
if (!cardsContainer) return;
|
|
|
|
const cardsHTML = this.data.sections.map(section => `
|
|
<div class="nav-card" data-section="${section.id}">
|
|
<div class="nav-card-header">
|
|
<span class="nav-card-icon">${section.icon}</span>
|
|
<div class="nav-card-title">
|
|
<h3>${section.title}</h3>
|
|
<span>${section.subtitle}</span>
|
|
</div>
|
|
</div>
|
|
<div class="nav-card-preview">
|
|
${section.description}
|
|
</div>
|
|
<div class="nav-card-links">
|
|
<div class="nav-card-link">📄 ${section.stats.articles} Articles</div>
|
|
<div class="nav-card-link">🗺️ ${section.stats.storyMaps} Story Maps</div>
|
|
<div class="nav-card-link">📷 ${section.stats.images} Images</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
cardsContainer.innerHTML = cardsHTML;
|
|
|
|
// Add click handlers
|
|
cardsContainer.querySelectorAll('.nav-card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const sectionId = card.dataset.section;
|
|
this.showSection(sectionId);
|
|
});
|
|
});
|
|
}
|
|
|
|
async showSection(sectionId) {
|
|
try {
|
|
const section = this.data.sections.find(s => s.id === sectionId);
|
|
if (!section) {
|
|
throw new Error(`Section ${sectionId} not found`);
|
|
}
|
|
|
|
// Hide main navigation
|
|
const mainNav = document.getElementById('mainNavigation');
|
|
if (mainNav) mainNav.classList.add('hidden');
|
|
|
|
// Show section container and back button
|
|
const sectionContainer = document.getElementById('sectionContainer');
|
|
const backButton = document.getElementById('backButton');
|
|
|
|
if (sectionContainer) sectionContainer.classList.remove('hidden');
|
|
if (backButton) backButton.classList.add('show');
|
|
|
|
// Load section content
|
|
await this.loadSectionContent(section);
|
|
|
|
// Update map for section
|
|
this.updateMapForSection(section);
|
|
|
|
this.currentSection = sectionId;
|
|
|
|
} catch (error) {
|
|
console.error(`Error loading section ${sectionId}:`, error);
|
|
this.showErrorMessage(`Failed to load ${sectionId} section. Please try again.`);
|
|
}
|
|
}
|
|
|
|
async loadSectionContent(section) {
|
|
const sectionContainer = document.getElementById('sectionContainer');
|
|
if (!sectionContainer) return;
|
|
|
|
// 1. Check localStorage for builder-saved blocks
|
|
const saved = localStorage.getItem('pf-section-' + section.id);
|
|
if (saved) {
|
|
try {
|
|
const blocks = JSON.parse(saved);
|
|
if (typeof BlockRenderer !== 'undefined') {
|
|
sectionContainer.innerHTML = this.wrapSectionContent(section, BlockRenderer.render(blocks));
|
|
this.initializeSectionInteractions(section.id);
|
|
return;
|
|
}
|
|
} catch (e) { /* fall through */ }
|
|
}
|
|
|
|
// 2. Use sections-content.json block data
|
|
const contentData = this.data.sectionsContent && this.data.sectionsContent[section.id];
|
|
if (contentData && contentData.blocks && typeof BlockRenderer !== 'undefined') {
|
|
sectionContainer.innerHTML = this.wrapSectionContent(section, BlockRenderer.render(contentData.blocks));
|
|
this.initializeSectionInteractions(section.id);
|
|
return;
|
|
}
|
|
|
|
// 3. Try legacy HTML file
|
|
try {
|
|
const response = await fetch('sections/' + section.id + '.html');
|
|
if (!response.ok) throw new Error('No legacy HTML');
|
|
sectionContainer.innerHTML = await response.text();
|
|
this.initializeSectionInteractions(section.id);
|
|
} catch (error) {
|
|
// 4. Fallback placeholder
|
|
this.loadFallbackSectionContent(section);
|
|
}
|
|
}
|
|
|
|
wrapSectionContent(section, blocksHtml) {
|
|
return '<div class="section-content-inner" style="--theme-color:' + section.color + '">'
|
|
+ '<div class="section-page-header" style="border-left:4px solid ' + section.color + '; padding: 1rem 1.25rem; background:#f8f9fb; margin-bottom:1rem;">'
|
|
+ '<div style="display:flex;align-items:center;gap:0.75rem;">'
|
|
+ '<span style="font-size:28px">' + section.icon + '</span>'
|
|
+ '<div><h2 style="margin:0;font-size:18px;color:#2c3e50">' + section.title + '</h2>'
|
|
+ '<p style="margin:0;font-size:13px;color:#6c757d">' + section.subtitle + '</p></div>'
|
|
+ '</div></div>'
|
|
+ blocksHtml
|
|
+ '</div>';
|
|
}
|
|
|
|
loadFallbackSectionContent(section) {
|
|
const sectionContainer = document.getElementById('sectionContainer');
|
|
if (!sectionContainer) return;
|
|
|
|
sectionContainer.innerHTML = `
|
|
<div class="section-header" style="--theme-color: ${section.color};">
|
|
<div class="section-title">
|
|
<span class="section-icon">${section.icon}</span>
|
|
<span class="section-name">${section.title}</span>
|
|
</div>
|
|
<div class="section-subtitle">${section.subtitle}</div>
|
|
</div>
|
|
<div class="content-area">
|
|
<div class="article-section">
|
|
<h3>Content Loading</h3>
|
|
<p>This section is being developed. Please check back later for complete content.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
initializeSectionInteractions(sectionId) {
|
|
if (typeof BlockRenderer !== 'undefined' && typeof BlockRenderer.initGalleries === 'function') {
|
|
BlockRenderer.initGalleries(document.getElementById('sectionContainer'));
|
|
}
|
|
|
|
// Wire map-button blocks to the Leaflet map
|
|
const self = this;
|
|
document.querySelectorAll('.block-map-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
const lat = parseFloat(btn.dataset.lat);
|
|
const lng = parseFloat(btn.dataset.lng);
|
|
const zoom = parseInt(btn.dataset.zoom) || 6;
|
|
if (self.map) {
|
|
self.map.setView([lat, lng], zoom);
|
|
btn.classList.add('active');
|
|
setTimeout(function() { btn.classList.remove('active'); }, 1500);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
updateMapForSection(section) {
|
|
if (!this.map) return;
|
|
|
|
// Clear existing layers
|
|
Object.values(this.mapLayers).forEach(layer => {
|
|
this.map.removeLayer(layer);
|
|
layer.clearLayers();
|
|
});
|
|
|
|
// Add section-specific map data
|
|
const sectionMapData = this.data.mapData[section.id];
|
|
if (sectionMapData) {
|
|
this.loadMapData(sectionMapData);
|
|
}
|
|
|
|
// Update map view for section
|
|
this.setMapViewForSection(section.id);
|
|
}
|
|
|
|
setMapViewForSection(sectionId) {
|
|
if (!this.map) return;
|
|
|
|
const mapViews = {
|
|
context: { center: [29.3759, 47.9774], zoom: 6 },
|
|
rcaf: { center: [25.2731, 51.6080], zoom: 8 },
|
|
rcn: { center: [27.0, 50.0], zoom: 7 },
|
|
army: { center: [32.0, 45.0], zoom: 6 },
|
|
legacy: { center: [35.0, 45.0], zoom: 5 }
|
|
};
|
|
|
|
const view = mapViews[sectionId] || mapViews.context;
|
|
this.map.setView(view.center, view.zoom);
|
|
}
|
|
|
|
loadMapData(mapData) {
|
|
if (!this.map || !window.L) return;
|
|
|
|
// Load markers, routes, and other geographic data
|
|
if (mapData.markers) {
|
|
mapData.markers.forEach(marker => {
|
|
const mapMarker = L.marker([marker.lat, marker.lng])
|
|
.bindPopup(`<strong>${marker.title}</strong><br>${marker.description || ''}`);
|
|
|
|
const layerGroup = this.mapLayers[marker.type] || this.mapLayers.events;
|
|
layerGroup.addLayer(mapMarker);
|
|
});
|
|
}
|
|
|
|
// Add all layers to map
|
|
Object.values(this.mapLayers).forEach(layer => {
|
|
this.map.addLayer(layer);
|
|
});
|
|
}
|
|
|
|
resetMapView() {
|
|
if (!this.map) return;
|
|
|
|
// Reset to overview
|
|
this.map.setView([29.3759, 47.9774], 6);
|
|
|
|
// Clear section-specific layers
|
|
Object.values(this.mapLayers).forEach(layer => {
|
|
this.map.removeLayer(layer);
|
|
layer.clearLayers();
|
|
});
|
|
|
|
// Reload overview markers
|
|
this.loadOverviewMarkers();
|
|
}
|
|
|
|
toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggleIcon = document.getElementById('toggle-icon');
|
|
|
|
if (sidebar && toggleIcon) {
|
|
sidebar.classList.toggle('collapsed');
|
|
toggleIcon.textContent = sidebar.classList.contains('collapsed') ? '◀' : '▶';
|
|
}
|
|
}
|
|
|
|
showMainNavigation() {
|
|
this.loadMainNavigation();
|
|
}
|
|
|
|
handleResize() {
|
|
// Handle responsive behavior
|
|
if (this.map) {
|
|
this.map.invalidateSize();
|
|
}
|
|
}
|
|
|
|
handleKeyboard(event) {
|
|
// Handle keyboard navigation
|
|
if (event.key === 'Escape') {
|
|
if (this.currentSection) {
|
|
this.showMainNavigation();
|
|
}
|
|
}
|
|
}
|
|
|
|
showLoadingScreen() {
|
|
const loadingScreen = document.getElementById('loadingScreen');
|
|
if (loadingScreen) {
|
|
loadingScreen.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
hideLoadingScreen() {
|
|
const loadingScreen = document.getElementById('loadingScreen');
|
|
if (loadingScreen) {
|
|
setTimeout(() => {
|
|
loadingScreen.classList.add('fade-out');
|
|
setTimeout(() => {
|
|
loadingScreen.style.display = 'none';
|
|
}, 500);
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
showErrorMessage(message) {
|
|
console.error(message);
|
|
// In production, this would show a user-friendly error dialog
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
// Initialize the application when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.projectFriction = new ProjectFriction();
|
|
});
|
|
|
|
// Export for module usage
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = ProjectFriction;
|
|
} |