/**
* Herzog Moving Component Loader
*
* USAGE:
* 1. Add placeholders in your HTML where you want components:
*
*
*
* 2. Include this script at the end of your body tag:
*
*
* 3. The script will automatically load navbar.html and footer.html
*
* 4. For pages with globe section (like index.html), add this data attribute to body:
*
*/
(function() {
'use strict';
// Configuration
const config = {
navbar: {
file: 'navbar.html',
placeholder: 'navbar-placeholder'
},
footer: {
file: 'footer.html',
placeholder: 'footer-placeholder'
}
};
// Load component function
async function loadComponent(componentConfig) {
const placeholder = document.getElementById(componentConfig.placeholder);
if (!placeholder) {
console.warn(`Placeholder #${componentConfig.placeholder} not found`);
return;
}
try {
const response = await fetch(componentConfig.file);
if (!response.ok) {
throw new Error(`Failed to load ${componentConfig.file}: ${response.status}`);
}
const html = await response.text();
placeholder.innerHTML = html;
// Execute any scripts in the loaded content
const scripts = placeholder.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
newScript.textContent = script.textContent;
document.body.appendChild(newScript);
document.body.removeChild(newScript);
});
console.log(`✓ Loaded ${componentConfig.file}`);
} catch (error) {
console.error(`Error loading ${componentConfig.file}:`, error);
placeholder.innerHTML = `Failed to load ${componentConfig.file}
`;
}
}
// Initialize components when DOM is ready
function initializeComponents() {
// Load navbar
loadComponent(config.navbar);
// Load footer
loadComponent(config.footer);
}
// Wait for DOM to be ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeComponents);
} else {
initializeComponents();
}
})();
/**
* IMPLEMENTATION GUIDE:
*
* 1. File Structure:
* /
* ├── index.html (with globe)
* ├── services.html
* ├── about.html
* ├── contact.html
* ├── navbar.html
* ├── footer.html
* └── component-loader.js
*
* 2. For index.html (with globe section):
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* 3. For other pages (without globe):
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* 4. Notes:
* - The navbar will automatically detect if it's on a page with globe section
* - Language toggle is synchronized between navbar and footer
* - All component styles and scripts are self-contained
* - No jQuery or other dependencies required
*/