diff --git a/src/Router.js b/src/Router.js index fe89f10ddc4e37c16ee591538c6870011e5cfde6..493ba4aa817e6df6cd977a2c7f3c2cb48a4b3592 100644 --- a/src/Router.js +++ b/src/Router.js @@ -20,4 +20,29 @@ export default class Router { this.contentElement.innerHTML = route.page.render(); } } + + static #menuElement; // propriété statique privée + /** + * 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 qui contient le menu principal + */ + static set menuElement(element) { + // setter + this.#menuElement = element; + const arr = this.#menuElement.querySelectorAll('li>a'); + arr.forEach(element => { + element.addEventListener('click', event => { + event.preventDefault(); + Router.navigate(element.getAttribute('href')); + }); + }); + // value.addEventListener('click', event => { + // Router.navigate(value.getAttribute('href')); + // }); + + // au clic sur n'importe quel lien (<a href>) contenu dans "element" + // déclenchez un appel à Router.navigate(path) + // où "path" est la valeur de l'attribut `href=".."` du lien cliqué + } } diff --git a/src/main.js b/src/main.js index 903db63f2d807bea29c4e5420a938b5bfd387c48..4b3adc04cf3440e335b3de6c8ca63523f0c89be7 100644 --- a/src/main.js +++ b/src/main.js @@ -1,12 +1,25 @@ import Router from './Router'; import data from './data'; import PizzaList from './pages/PizzaList'; +import Component from './components/Component'; Router.titleElement = document.querySelector('.pageTitle'); Router.contentElement = document.querySelector('.pageContent'); -const pizzaList = new PizzaList([]); -Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }]; +const pizzaList = new PizzaList(data), + aboutPage = new Component('section', null, 'Ce site est génial'), + pizzaForm = new Component( + 'section', + null, + 'Ici vous pourrez ajouter une pizza' + ); + +Router.routes = [ + { path: '/', page: pizzaList, title: 'La carte' }, + { path: '/a-propos', page: aboutPage, title: 'À propos' }, + { path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' }, +]; +Router.menuElement = document.querySelector('.mainMenu'); document.querySelector('.logo').innerHTML += "<small>les pizzas c'est la vie</small>";