parts_website/static/js/router.js

// Pages
// Core
import PageHome from './pages/core/home.js';
import PageContact from './pages/core/contact.js';
// Legal
import PageAccessibilityReport from './pages/legal/accessibility_report.js';
import PageAccessibilityStatement from './pages/legal/accessibility_statement.js';
import PageLicense from './pages/legal/license.js';
// User
// import PageUserLogin from './pages/user/login.js';
// import PageUserLogout from './pages/user/logout.js';
// import PageUserAccount from './pages/user/account.js';

import API from './api.js';
import DOM from './dom.js';
import PagePrivacyPolicy from './pages/legal/privacy_policy.js';
import PageRetentionSchedule from './pages/legal/retention_schedule.js';


export default class Router {
    constructor() {
        // Pages
        this.pages = {};
        // Core
        this.pages[hashPageHome] = { name: 'PageHome', module: PageHome }; //  importModule: () => import(/* webpackChunkName: "page_core_home" */ './pages/core/home.js') , pathModule: './pages/core/home.js'
        this.pages[hashPageContact] = { name: 'PageContact', module: PageContact }; // pathModule: './pages/core/contact.js' };
        // Legal
        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', module: PageAccessibilityStatement }; // pathModule: '../../static/js/pages/legal/accessibility_statement.js' }; // , page: PageAccessibilityStatement
        this.pages[hashPageDataRetentionSchedule] = { name: 'PageDataRetentionSchedule', module: PageRetentionSchedule }; // pathModule: './pages/legal/data_retention_schedule.js' };
        this.pages[hashPageLicense] = { name: 'PageLicense', module: PageLicense }; // pathModule: './pages/legal/license.js' };
        this.pages[hashPagePrivacyPolicy] = { name: 'PagePrivacyPolicy', module: PagePrivacyPolicy }; // pathModule: './pages/legal/privacy_policy.js' }; // importModule: () => {return import(/* webpackChunkName: "page_privacy_policy" */ './pages/legal/privacy_policy.js'); }
        // User
        // this.pages[hashPageUserLogin] = { name: 'PageUserLogin', module: PageUserLogin }; // pathModule: './pages/user/login.js' };
        // this.pages[hashPageUserLogout] = { name: 'PageUserLogout', module: PageUserLogout }; // pathModule: './pages/user/logout.js' };
        // this.pages[hashPageUserAccount] = { name: 'PageUserAccount', module: PageUserAccount }; // pathModule: './pages/user/account.js' };
        
        // Routes
        this.routes = {};
        // Core
        this.routes[hashPageHome] = (isPopState = false) => this.navigateToHash(hashPageHome, isPopState);
        this.routes[hashPageContact] = (isPopState = false) => this.navigateToHash(hashPageContact, isPopState);
        // Legal
        this.routes[hashPageAccessibilityStatement] = (isPopState = false) => this.navigateToHash(hashPageAccessibilityStatement, isPopState);
        this.routes[hashPageDataRetentionSchedule] = (isPopState = false) => this.navigateToHash(hashPageDataRetentionSchedule, isPopState);
        this.routes[hashPageLicense] = (isPopState = false) => this.navigateToHash(hashPageLicense, isPopState);
        this.routes[hashPagePrivacyPolicy] = (isPopState = false) => this.navigateToHash(hashPagePrivacyPolicy, isPopState);
        // User
        // this.routes[hashPageUserLogin] = (isPopState = false) => this.navigateToHash(hashPageUserLogin, isPopState);
        // this.routes[hashPageUserLogout] = (isPopState = false) => this.navigateToHash(hashPageUserLogout, isPopState);
        // this.routes[hashPageUserAccount] = (isPopState = false) => this.navigateToHash(hashPageUserAccount, isPopState);
        this.initialize();
    }
    loadPage(hashPage, isPopState = false) {
        const PageClass = this.getClassPageFromHash(hashPage);
        this.currentPage = new PageClass(this);
        this.currentPage.initialize(isPopState);
        window.addEventListener('beforeunload', () => this.currentPage.leave());
    }
    getClassPageFromHash(hashPage) {
        
        let pageJson = this.pages[hashPage];
        try {
            /*
            const module = await pagesContext(pageJson.pathModule);
            console.log("module: ", module);
            return module[pageJson.name];
            */
            // const module = await import(pageJson.pathModule); //  pageJson.page;
            // const module = () => import(pageJson.pathModule);
            const module = pageJson.module; // importModule;
            return module; // [pageJson.name];
        }
        catch (error) {
            if (_verbose) { console.log("this.pages: ", this.pages); };
            console.error('Page not found:', hashPage);
            throw error;
        }
    }
    initialize() {
        /*
        let pages = Router.getPages();
        for (const key of Object.keys(pages)) {
            let page = pages[key];
            this.addRoute(page.hash, page.initialize);
        }
        */
        window.addEventListener('popstate', this.handlePopState.bind(this)); // page accessed by history navigation
    }
    handlePopState(event) {
        this.loadPageCurrent();
    }
    loadPageCurrent() {
        const hashPageCurrent = DOM.getHashPageCurrent();
        this.loadPage(hashPageCurrent);
    }
    navigateToHash(hash, data = null, params = null, isPopState = false) {
        // this.beforeLeave();
        /*
        if (this.routes[hash]) {
            this.routes[hash](isPopState);
        } else {
            console.error(`Hash ${hash} not found`);
        }
        */
        let url = API.getUrlFromHash(hash, params);
        // if (!isPopState) 
        history.pushState({data: data, params: params}, '', hash);
        API.goToUrl(url, data);
    }
    /* beforeunload listener
    async beforeLeave() {
        const ClassPageCurrent = await this.getClassPageFromHash(DOM.getHashPageCurrent());
        const pageCurrent = new ClassPageCurrent(this);
        pageCurrent.leave();
    }
    */
    navigateToUrl(url, data = null, appendHistory = true) {
        // this.beforeLeave();
        if (appendHistory) history.pushState(data, '', url);
        url = API.parameteriseUrl(url, data);
        API.goToUrl(url);
    }

    static loadPageBodyFromResponse(response) {
        DOM.loadPageBody(response.data);
    }
}

export const router = new Router();

/*
router.addRoute('/', () => {
    console.log('Home page');
    // Load home page content
});

router.addRoute('/about', () => {
    console.log('About page');
    // Load about page content
});

export function setupNavigationEvents() {
    document.querySelectorAll('a[data-nav]').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const url = e.target.getAttribute('href');
            router.navigateToUrl(url);
        });
    });
}
*/