Skip to content
Snippets Groups Projects
Commit b8e446ca authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

maj solution tp2

- nouveau dom (maj skin css)
- HomePage -> PizzaList
- passage PageRenderer -> Router
- suppression classe Page (inutile à ce stade avec le Router)
parent 9e45c289
Branches
No related tags found
No related merge requests found
export default class Router {
static titleElement;
static contentElement;
static routes = [];
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();
}
}
}
export default class Component { export default class Component {
tag; tagName;
attribute; attribute;
children; children;
constructor(tag, attribute, children) { constructor(tagName, attribute, children) {
this.tag = tag; this.tagName = tagName;
this.attribute = attribute; this.attribute = attribute;
this.children = children; this.children = children;
} }
render() { render() {
let html = `<${this.tag} ${this.renderAttributes()}`; let html = `<${this.tagName} ${this.renderAttributes()}`;
if (this.children) { if (this.children) {
html += `>${this.renderChildren()}</${this.tag}>`; html += `>${this.renderChildren()}</${this.tagName}>`;
} else { } else {
html += ' />'; html += ' />';
} }
......
File moved
...@@ -2,22 +2,22 @@ import Component from './Component.js'; ...@@ -2,22 +2,22 @@ import Component from './Component.js';
import Img from './Img.js'; import Img from './Img.js';
export default class PizzaThumbnail extends Component { export default class PizzaThumbnail extends Component {
constructor({ nom, image, prix_petite, prix_grande }) { constructor({ name, image, price_small, price_large }) {
super('article', { name: 'class', value: 'media' }, [ super('article', { name: 'class', value: 'pizzaThumbnail' }, [
new Component('a', { name: 'href', value: image }, [ new Component('a', { name: 'href', value: image }, [
new Img(image), new Img(image),
new Component('section', { name: 'class', value: 'infos' }, [ new Component('section', null, [
new Component('h4', null, nom), new Component('h4', null, name),
new Component('ul', null, [ new Component('ul', null, [
new Component( new Component(
'li', 'li',
null, null,
`Prix petit format : ${prix_petite.toFixed(2)} €` `Prix petit format : ${price_small.toFixed(2)} €`
), ),
new Component( new Component(
'li', 'li',
null, null,
`Prix grand format : ${prix_grande.toFixed(2)} €` `Prix grand format : ${price_large.toFixed(2)} €`
), ),
]), ]),
]), ]),
......
const data = [ const data = [
{ {
nom: 'Regina', name: 'Regina',
base: 'tomate', base: 'tomate',
prix_petite: 6.5, price_small: 6.5,
prix_grande: 9.95, price_large: 9.95,
image: image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300', 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
}, },
{ {
nom: 'Napolitaine', name: 'Napolitaine',
base: 'tomate', base: 'tomate',
prix_petite: 6.5, price_small: 6.5,
prix_grande: 8.95, price_large: 8.95,
image: image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300', 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
}, },
{ {
nom: 'Spicy', name: 'Spicy',
base: 'crème', base: 'crème',
prix_petite: 5.5, price_small: 5.5,
prix_grande: 8, price_large: 8,
image: image:
'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300', 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
}, },
......
import Router from './Router';
import data from './data';
import PizzaList from './pages/PizzaList';
Router.titleElement = document.querySelector('.pageTitle');
Router.contentElement = document.querySelector('.pageContent');
const pizzaList = new PizzaList([]);
Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
Router.navigate('/'); // affiche une page vide
pizzaList.pizzas = data;
Router.navigate('/'); // affiche la liste des pizzas
import Page from './Page.js'; import Component from '../components/Component.js';
import PizzaThumbnail from '../components/PizzaThumbnail.js'; import PizzaThumbnail from '../components/PizzaThumbnail.js';
export default class HomePage extends Page { export default class PizzaList extends Component {
#pizzas; #pizzas;
constructor(pizzas) { constructor(pizzas) {
super('La carte'); super('section', { name: 'class', value: 'pizzaList' });
this.pizzas = pizzas; this.pizzas = pizzas;
} }
......
...@@ -2,12 +2,14 @@ const path = require('path'); ...@@ -2,12 +2,14 @@ const path = require('path');
module.exports = { module.exports = {
// Fichier d'entrée : // Fichier d'entrée :
entry: './js/main.js', entry: './src/main.js',
// Fichier de sortie : // Fichier de sortie :
output: { output: {
path: path.resolve(__dirname, './build'), path: path.resolve(__dirname, './build'),
filename: 'main.bundle.js', filename: 'main.bundle.js',
}, },
// compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
target: ['web', 'es5'],
// connexion webpack <-> babel : // connexion webpack <-> babel :
module: { module: {
rules: [ rules: [
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment