class DashboardNavigator {
|
constructor() {
|
this.currentPage = '';
|
this.a11y = window.jvbA11y;
|
this.mainContent = document.querySelector('main .replace');
|
this.loadingManager = window.jvbLoading;
|
|
this.cache = JSON.parse(localStorage.getItem('dashboard-cache') || '{}');
|
this.cacheTimeout = 5 * 60 * 1000;
|
|
// Get current page from URL on initial load
|
const path = window.location.pathname;
|
const dashPath = path.split('/dash/')[1];
|
this.currentPage = dashPath ? dashPath.replace('/', '') : '';
|
|
// Initialize current page if accessing directly
|
if (this.currentPage) {
|
this.initPageContent(this.currentPage);
|
}
|
|
this.initNavigation();
|
|
}
|
|
initNavigation() {
|
// Update currentPage from URL
|
const path = window.location.pathname;
|
const dashPath = path.split('/dash/')[1];
|
this.currentPage = dashPath ? dashPath.replace('/', '') : '';
|
|
// Update initial nav state
|
this.updateNavState(this.currentPage);
|
|
// Listen for popstate (browser back/forward)
|
window.addEventListener('popstate', (e) => {
|
const page = e.state?.page || '';
|
this.navigateTo(page, true);
|
});
|
|
// Add click handlers to dashboard links
|
document.querySelectorAll('a[data-dash]').forEach(link => {
|
link.addEventListener('click', (e) => {
|
console.log('Clicked');
|
e.preventDefault();
|
this.navigateTo(link.dataset.page);
|
});
|
});
|
}
|
|
updateNavState(page) {
|
const nav = document.querySelector('.dashboard-footer nav');
|
if (!nav) return;
|
|
nav.querySelectorAll('a').forEach(link => {
|
const linkPage = link.dataset.page;
|
link.parentElement.classList.toggle('current', linkPage === page);
|
if (linkPage === page) {
|
link.setAttribute('aria-current', 'page');
|
} else {
|
link.removeAttribute('aria-current');
|
}
|
});
|
}
|
|
getCachedContent(page) {
|
const cached = this.cache[page];
|
if (!cached) return null;
|
|
// Check if cache is expired
|
if (Date.now() - cached.timestamp > this.cacheTimeout) {
|
delete this.cache[page];
|
localStorage.setItem('dashboard-cache', JSON.stringify(this.cache));
|
return null;
|
}
|
|
return cached.content;
|
}
|
|
setCachedContent(page, content) {
|
if (!page || !content) return;
|
|
this.cache[page] = {
|
content: content,
|
timestamp: Date.now()
|
};
|
|
localStorage.setItem('dashboard-cache', JSON.stringify(this.cache));
|
}
|
|
async navigateTo(page, fromPopState = false) {
|
try {
|
if (page === 'dash') {
|
page = '';
|
}
|
if (page === this.currentPage) return;
|
|
// Update URL if not from browser navigation
|
if (!fromPopState) {
|
const newPath = page ? `/dash/${page}/` : '/dash';
|
history.pushState({ page }, '', newPath);
|
}
|
|
// Cache current page content before navigating
|
const currentContent = this.mainContent?.innerHTML;
|
if (currentContent) {
|
this.setCachedContent(this.currentPage, currentContent);
|
}
|
|
// Check cache for requested page
|
const cachedContent = this.getCachedContent(page);
|
if (cachedContent) {
|
this.mainContent.innerHTML = cachedContent;
|
this.currentPage = page;
|
this.updateNavState(page);
|
this.initPageContent(page);
|
return;
|
}
|
|
|
// If not cached, follow the link normally
|
window.location.href = page ? `/dash/${page}/` : '/dash';
|
|
} catch (error) {
|
console.error('Navigation error:', error);
|
if (this.loadingManager) {
|
this.loadingManager.showError(error.message || 'Navigation failed');
|
}
|
} finally {
|
this.a11y.announce(`Currently on ${page} dashboard page.`);
|
}
|
}
|
|
updateContent(data) {
|
this.mainContent.innerHTML = data.content;
|
document.title = `${data.title} - edmonton.ink Dashboard`;
|
|
if (this.currentPage) {
|
this.initPageContent(this.currentPage);
|
}
|
}
|
|
initPageContent(page) {
|
console.log(page);
|
switch (page) {
|
case 'settings':
|
this.initNorthehSettingsPage();
|
break;
|
case 'bio':
|
this.initBioPage();
|
break;
|
case 'favourites':
|
new window.favouritesManager();
|
break;
|
case 'shop':
|
this.initShopPage();
|
break;
|
case 'news':
|
new window.newsManager();
|
break;
|
case 'events':
|
new window.crud({
|
content: 'event'
|
});
|
break;
|
default:
|
// new window.crud({content: page});
|
break;
|
}
|
}
|
|
|
initBioPage() {
|
const form = document.querySelector('form');
|
if(!form){
|
return;
|
}
|
console.log(jvbSettings, 'jvbSettings');
|
|
// Initialize form manager with selectors
|
new window.formManager(form, {
|
loadingManager: window.jvbLoading,
|
objectId: jvbSettings.currentUser.artistID,
|
highlights: {
|
style: {
|
max: 3,
|
name: 'jvb_top_styles',
|
label: 'Highlight Styles',
|
description: 'Select up to 3 styles to highlight'
|
}
|
// Can add more highlight configurations for other taxonomies as needed
|
// theme: {
|
// max: 5,
|
// name: 'jvb_featured_themes',
|
// label: 'Featured Themes',
|
// description: 'Select up to 5 themes to highlight'
|
// }
|
}
|
});
|
}
|
|
initNorthehSettingsPage() {
|
new window.jvbTabs(document.querySelector('.replace'));
|
// window.jvbForm.addForm(document.querySelector('form#menu-sections'));
|
// window.jvbForm.addForm(document.querySelector('form#hours'));
|
}
|
initSettingsPage() {
|
const form = document.querySelector('form');
|
|
// Initialize form manager with selectors
|
window.jvbForm.addForm(form, {
|
content: 'artist',
|
onSave: (data) => {
|
if (Object.hasOwn(data, 'menu_section_order')) {
|
data['menu_section_order'] = JSON.stringify(data['menu_section_order']);
|
}
|
data.user = jvbSettings.currentUser;
|
window.jvbQueue.addToQueue({
|
type: 'user_settings',
|
data: data,
|
});
|
}
|
});
|
|
}
|
initShopPage() {
|
const form = document.querySelector('form');
|
if (!form) return;
|
|
new window.jvbShopManager();
|
}
|
|
|
clearCache() {
|
this.cache = {};
|
}
|
}
|
|
document.addEventListener('DOMContentLoaded', ()=>{
|
window.dashboardNavigator = new DashboardNavigator();
|
});
|
