diff --git a/src/Router.js b/src/Router.js index ac51107eea381f9724475aae556522f74e0dd3e6..ebc6d759b4824800229a4470a63e6ba17720d623 100644 --- a/src/Router.js +++ b/src/Router.js @@ -1,35 +1,47 @@ export default class Router { static titleElement; static contentElement; - static routes = []; static #menuElement; + static routes = []; + + /** + * Indique au Router la balise HTML contenant le menu de navigation + * Écoute le clic sur chaque lien et déclenche la méthode navigate + * @param element Élément HTML de la page qui contient le menu principal + */ static set menuElement(element) { this.#menuElement = element; - console.log(this.#menuElement); - this.#menuElement.addEventListener('click', this.handleClick); + const links = element.querySelectorAll('a'); + links.forEach(link => + link.addEventListener('click', event => { + event.preventDefault(); + this.navigate(event.target.getAttribute('href')); + }) + ); } - - static handleClick(event) { - event.preventDefault(); - console.log(event); - Router.navigate(event.target.getAttribute('href')); - event.target.classList.add('active'); - } - - static navigate(path) { + /** + * Navigue dans l'application + * Affiche la page correspondant à `path` dans le tableau `routes` + * @param {String} path URL de la page courante + * @param {Boolean} pushState active/désactive le pushState (ajout d'une entrée dans l'historique de navigation) + */ + static navigate(path, pushState = true) { const route = this.routes.find(route => route.path === path); if (route) { this.titleElement.innerHTML = `<h1>${route.title}</h1>`; this.contentElement.innerHTML = route.page.render(); - console.log(route); route.page.mount?.(this.contentElement); - window.history.pushState({}, '', path); - const d = document.querySelectorAll('.mainMenu a'); - d.forEach(element => { - if (element.textContent == route.title) element.classList.add('active'); - else element.classList.remove('active'); - }); + // gestion menu (classe "active") + const menuLink = this.#menuElement.querySelector( + `a[href="${route.path}"]` + ), + prevActiveLink = this.#menuElement.querySelector('a.active'); + prevActiveLink?.classList.remove('active'); + menuLink?.classList.add('active'); + if (pushState) { + window.history.pushState(null, null, path); + } } } } diff --git a/src/main.js b/src/main.js index 94d002913b14e41fa9cc0815300c495048dd477a..8fd0fb8bbf48c01841fa0e93ea26efef224c530b 100644 --- a/src/main.js +++ b/src/main.js @@ -36,5 +36,6 @@ close.addEventListener('click', handleClick); window.onpopstate = e => { console.log(document.location); - Router.navigate(document.location.pathname); + Router.navigate(document.location.pathname, false); }; +window.onpopstate();