From a7b3887f673b8cf36e37dc3d25b6329f93facc1e Mon Sep 17 00:00:00 2001 From: Baptiste LANTOINE <baptiste.lantoine2.etu@univ-lille.fr> Date: Thu, 11 Feb 2021 11:52:19 +0100 Subject: [PATCH] tp3 D3 --- package.json | 2 +- src/Router.js | 18 ++++++++++++++++++ src/main.js | 25 ++++++++++++++++++++++--- src/pages/Page.js | 12 ++++++++++++ src/pages/PizzaForm.js | 20 ++++++++++++++++++++ src/pages/PizzaList.js | 5 +++-- 6 files changed, 76 insertions(+), 6 deletions(-) create mode 100644 src/pages/Page.js create mode 100644 src/pages/PizzaForm.js diff --git a/package.json b/package.json index c41a110..abdfa61 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=production", - "watch": "webpack --mode=development --watch" + "watch": "webpack --mode=development --watch" }, "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)", "homepage": "https://gitlab.univ-lille.fr/js", diff --git a/src/Router.js b/src/Router.js index 7aef071..043e86c 100644 --- a/src/Router.js +++ b/src/Router.js @@ -2,12 +2,30 @@ export default class Router { static titleElement; static contentElement; static routes = []; + static #menuElement; + static set menuElement(element) { + this.#menuElement = element; + const value = element.querySelectorAll('a'); + value.forEach(elem => { + console.log(elem.getAttribute('href')); + //console.log(elem); + elem.addEventListener('click', event => { + event.preventDefault(); + Router.navigate(elem.getAttribute('href')); + console.log('event'); + }); + }); + // au clic sur n'importe quel lien contenu dans "element" + // déclenchez un appel à Router.navigate(path) + // où "path" est la valeur de l'attribut `href=".."` du lien cliqué + } static navigate(path) { const route = this.routes.find(route => route.path === path); if (route) { this.titleElement.innerHTML = `<h1>${route.title}</h1>`; this.contentElement.innerHTML = route.page.render(); + route.page.mount?.(this.contentElement); } } } diff --git a/src/main.js b/src/main.js index 6148d2b..2b69581 100644 --- a/src/main.js +++ b/src/main.js @@ -1,13 +1,32 @@ import Router from './Router'; import data from './data'; import PizzaList from './pages/PizzaList'; - +import PizzaForm from './pages/PizzaForm'; +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([]), + aboutPage = new Component('p', null, 'ce site est génial'), + pizzaForm = new PizzaForm(); + +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.navigate('/'); // affiche une page vide pizzaList.pizzas = data; Router.navigate('/'); // affiche la liste des pizzas + +const display = document.querySelector('.newsContainer'); +display.setAttribute('style', ''); + +const displayBtn = document.querySelector('.closeButton'); +displayBtn.addEventListener('click', onclick); + +function onclick(event) { + display.setAttribute('style', 'display:none'); +} +Router.menuElement = document.querySelector('.mainMenu'); diff --git a/src/pages/Page.js b/src/pages/Page.js new file mode 100644 index 0000000..8ccf3ed --- /dev/null +++ b/src/pages/Page.js @@ -0,0 +1,12 @@ +import Component from '../components/Component'; + +export default class Page extends Component { + element; + + constructor(className, children) { + super('section', { name: 'class', value: className }, children); + } + mount(element) { + this.element = element; + } +} diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js new file mode 100644 index 0000000..c97a2d0 --- /dev/null +++ b/src/pages/PizzaForm.js @@ -0,0 +1,20 @@ +import Page from './Page.js'; + +export default class PizzaForm extends Page { + render() { + return /*html*/ ` + <form class="pizzaForm"> + <label> + Nom : + <input type="text" name="name"> + </label> + <button type="submit">Ajouter</button> + </form>`; + } + + mount(element) { + super.mount(element); + } + + submit(event) {} +} diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index fcaedaf..a5fe4d4 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -1,11 +1,12 @@ import Component from '../components/Component.js'; import PizzaThumbnail from '../components/PizzaThumbnail.js'; +import Page from './Page.js'; -export default class PizzaList extends Component { +export default class PizzaList extends Page { #pizzas; constructor(pizzas) { - super('section', { name: 'class', value: 'pizzaList' }); + super('pizzaList'); this.pizzas = pizzas; } -- GitLab