63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/**
|
|
* Partial Loader for Alpine.js v3
|
|
* Loads HTML partials before Alpine initializes
|
|
*/
|
|
class PartialLoader {
|
|
constructor(area) {
|
|
this.area = area; // 'admin', 'vendor', or 'shop'
|
|
this.baseUrl = `/static/${area}/partials/`;
|
|
}
|
|
|
|
async load(containerId, partialName) {
|
|
try {
|
|
const response = await fetch(`${this.baseUrl}${partialName}`);
|
|
|
|
if (!response.ok) {
|
|
console.warn(`Failed to load partial: ${partialName} (${response.status})`);
|
|
return false;
|
|
}
|
|
|
|
const html = await response.text();
|
|
const container = document.getElementById(containerId);
|
|
|
|
if (container) {
|
|
container.innerHTML = html;
|
|
return true;
|
|
} else {
|
|
console.warn(`Container not found: ${containerId}`);
|
|
return false;
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error loading partial ${partialName}:`, error);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async loadAll(partials) {
|
|
const promises = Object.entries(partials).map(
|
|
([containerId, partialName]) => this.load(containerId, partialName)
|
|
);
|
|
|
|
const results = await Promise.all(promises);
|
|
const successCount = results.filter(r => r).length;
|
|
|
|
console.log(`Loaded ${successCount}/${results.length} partials successfully`);
|
|
|
|
return results.every(r => r);
|
|
}
|
|
}
|
|
|
|
// Auto-detect area from URL path
|
|
function getAreaFromPath() {
|
|
const path = window.location.pathname;
|
|
|
|
if (path.includes('/admin/')) return 'admin';
|
|
if (path.includes('/vendor/')) return 'vendor';
|
|
if (path.includes('/shop/')) return 'shop';
|
|
|
|
return 'shop'; // default
|
|
}
|
|
|
|
// Create global instance
|
|
window.PartialLoader = PartialLoader;
|
|
window.partialLoader = new PartialLoader(getAreaFromPath()); |