Skip to content
Snippets Groups Projects
Commit 7e3bc429 authored by Matthieu Vannin's avatar Matthieu Vannin
Browse files

Partie C terminée

parent 952efa96
No related branches found
No related tags found
No related merge requests found
Showing with 1312 additions and 74 deletions
{ {
"presets": ["@babel/env"], "presets": [
["@babel/env",{"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"] "plugins": ["@babel/plugin-proposal-class-properties"]
} }
\ No newline at end of file
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<link rel="stylesheet" href="css/pizzaList.css"> <link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/footer.css">
<script src="build/main.js" defer></script> <script src="build/main.bundle.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
......
This diff is collapsed.
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d build", "build": "webpack --mode=production",
"watch": "babel src -d watch --verbose --watch --source-maps" "watch": "webpack --mode=development --watch"
}, },
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)", "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js", "homepage": "https://gitlab.univ-lille.fr/js",
...@@ -16,6 +16,9 @@ ...@@ -16,6 +16,9 @@
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"prettier": "^2.2.1" "babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
} }
} }
export default class Component {
tagName;
attribute;
children;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
renderAttribute() {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}"/>`;
}
render() {
if (!(this.children == null || this.children == undefined)) {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
} else {
if (!(this.attribute == null || this.attribute == undefined)) {
return this.renderAttribute();
} else {
return `<${this.tagName}/>`;
}
}
}
}
import Component from './Component.js';
export default class Img extends Component {
constructor(valeur) {
super('img', { name: 'src', value: valeur });
}
}
const data = [
{
name: 'Regina',
base: 'tomate',
price_small: 6.5,
price_large: 9.95,
image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
},
{
name: 'Napolitaine',
base: 'tomate',
price_small: 6.5,
price_large: 8.95,
image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
},
{
name: 'Spicy',
base: 'crème',
price_small: 5.5,
price_large: 8,
image:
'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
},
];
export default data;
const data = [ import data from './data.js';
{ import Component from './components/Component.js';
name: 'Regina',
base: 'tomate',
price_small: 6.5,
price_large: 9.95,
image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
},
{
name: 'Napolitaine',
base: 'tomate',
price_small: 6.5,
price_large: 8.95,
image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
},
{
name: 'Spicy',
base: 'crème',
price_small: 5.5,
price_large: 8,
image:
'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
},
];
class Component {
tagName;
attribute;
children;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
renderAttribute() {
return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}"/>`;
}
render() {
if (!(this.children == null || this.children == undefined)) {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
} else {
if (!(this.attribute == null || this.attribute == undefined)) {
return this.renderAttribute();
} else {
return `<${this.tagName}/>`;
}
}
}
}
class Img extends Component {
attribute;
constructor(attribute) {
super('img', { name: 'src', value: attribute });
}
render() {
super.render();
}
}
const title = new Component('h1', null, 'La carte'); const title = new Component('h1', null, 'La carte');
document.querySelector('.pageTitle').innerHTML = title.render(); document.querySelector('.pageTitle').innerHTML = title.render();
const img = new Component('img', { import Img from './components/Img.js';
name: 'src', const img = new Img(
value: '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', );
});
document.querySelector('.pageContent').innerHTML = img.render(); document.querySelector('.pageContent').innerHTML = img.render();
//# sourceMappingURL=Component.js.map
\ No newline at end of file
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"Component.js"}
\ No newline at end of file
//# sourceMappingURL=Img.js.map
\ No newline at end of file
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"Img.js"}
\ No newline at end of file
//# sourceMappingURL=component.js.map
\ No newline at end of file
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"component.js"}
\ No newline at end of file
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Component = /*#__PURE__*/function () {
function Component(tagName, attribute, children) {
_classCallCheck(this, Component);
_defineProperty(this, "tagName", void 0);
_defineProperty(this, "attribute", void 0);
_defineProperty(this, "children", void 0);
this.tagName = tagName;
this.attribute = attribute;
this.children = children;
}
_createClass(Component, [{
key: "renderAttribute",
value: function renderAttribute() {
return "<".concat(this.tagName, " ").concat(this.attribute.name, "=\"").concat(this.attribute.value, "\"/>");
}
}, {
key: "render",
value: function render() {
if (!(this.children == null || this.children == undefined)) {
return "<".concat(this.tagName, ">").concat(this.children, "</").concat(this.tagName, ">");
} else {
if (!(this.attribute == null || this.attribute == undefined)) {
return this.renderAttribute();
} else {
return "<".concat(this.tagName, "/>");
}
}
}
}]);
return Component;
}();
export { Component as default };
//# sourceMappingURL=Component.js.map
\ No newline at end of file
{"version":3,"sources":["../../src/components/Component.js"],"names":["Component","tagName","attribute","children","name","value","undefined","renderAttribute"],"mappings":";;;;;;;;IAAqBA,S;AAIpB,qBAAYC,OAAZ,EAAqBC,SAArB,EAAgCC,QAAhC,EAA0C;AAAA;;AAAA;;AAAA;;AAAA;;AACzC,SAAKF,OAAL,GAAeA,OAAf;AACA,SAAKC,SAAL,GAAiBA,SAAjB;AACA,SAAKC,QAAL,GAAgBA,QAAhB;AACA;;;;sCACiB;AACjB,wBAAW,KAAKF,OAAhB,cAA2B,KAAKC,SAAL,CAAeE,IAA1C,gBAAmD,KAAKF,SAAL,CAAeG,KAAlE;AACA;;;6BACQ;AACR,UAAI,EAAE,KAAKF,QAAL,IAAiB,IAAjB,IAAyB,KAAKA,QAAL,IAAiBG,SAA5C,CAAJ,EAA4D;AAC3D,0BAAW,KAAKL,OAAhB,cAA2B,KAAKE,QAAhC,eAA6C,KAAKF,OAAlD;AACA,OAFD,MAEO;AACN,YAAI,EAAE,KAAKC,SAAL,IAAkB,IAAlB,IAA0B,KAAKA,SAAL,IAAkBI,SAA9C,CAAJ,EAA8D;AAC7D,iBAAO,KAAKC,eAAL,EAAP;AACA,SAFD,MAEO;AACN,4BAAW,KAAKN,OAAhB;AACA;AACD;AACD;;;;;;SAtBmBD,S","sourcesContent":["export default class Component {\n\ttagName;\n\tattribute;\n\tchildren;\n\tconstructor(tagName, attribute, children) {\n\t\tthis.tagName = tagName;\n\t\tthis.attribute = attribute;\n\t\tthis.children = children;\n\t}\n\trenderAttribute() {\n\t\treturn `<${this.tagName} ${this.attribute.name}=\"${this.attribute.value}\"/>`;\n\t}\n\trender() {\n\t\tif (!(this.children == null || this.children == undefined)) {\n\t\t\treturn `<${this.tagName}>${this.children}</${this.tagName}>`;\n\t\t} else {\n\t\t\tif (!(this.attribute == null || this.attribute == undefined)) {\n\t\t\t\treturn this.renderAttribute();\n\t\t\t} else {\n\t\t\t\treturn `<${this.tagName}/>`;\n\t\t\t}\n\t\t}\n\t}\n}\n"],"file":"Component.js"}
\ No newline at end of file
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
import Component from './Component.js';
var Img = /*#__PURE__*/function (_Component) {
_inherits(Img, _Component);
var _super = _createSuper(Img);
function Img(valeur) {
_classCallCheck(this, Img);
return _super.call(this, 'img', {
name: 'src',
value: valeur
});
}
return Img;
}(Component);
export { Img as default };
//# sourceMappingURL=Img.js.map
\ No newline at end of file
{"version":3,"sources":["../../src/components/Img.js"],"names":["Component","Img","valeur","name","value"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,SAAP,MAAsB,gBAAtB;;IACqBC,G;;;;;AACpB,eAAYC,MAAZ,EAAoB;AAAA;;AAAA,6BACb,KADa,EACN;AAAEC,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,KAAK,EAAEF;AAAtB,KADM;AAEnB;;;EAH+BF,S;;SAAZC,G","sourcesContent":["import Component from './Component.js';\nexport default class Img extends Component {\n\tconstructor(valeur) {\n\t\tsuper('img', { name: 'src', value: valeur });\n\t}\n}\n"],"file":"Img.js"}
\ No newline at end of file
var data = [{
name: 'Regina',
base: 'tomate',
price_small: 6.5,
price_large: 9.95,
image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
}, {
name: 'Napolitaine',
base: 'tomate',
price_small: 6.5,
price_large: 8.95,
image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
}, {
name: 'Spicy',
base: 'crème',
price_small: 5.5,
price_large: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300'
}];
export default data;
//# sourceMappingURL=data.js.map
\ No newline at end of file
{"version":3,"sources":["../src/data.js"],"names":["data","name","base","price_small","price_large","image"],"mappings":"AAAA,IAAMA,IAAI,GAAG,CACZ;AACCC,EAAAA,IAAI,EAAE,QADP;AAECC,EAAAA,IAAI,EAAE,QAFP;AAGCC,EAAAA,WAAW,EAAE,GAHd;AAICC,EAAAA,WAAW,EAAE,IAJd;AAKCC,EAAAA,KAAK,EACJ;AANF,CADY,EASZ;AACCJ,EAAAA,IAAI,EAAE,aADP;AAECC,EAAAA,IAAI,EAAE,QAFP;AAGCC,EAAAA,WAAW,EAAE,GAHd;AAICC,EAAAA,WAAW,EAAE,IAJd;AAKCC,EAAAA,KAAK,EACJ;AANF,CATY,EAiBZ;AACCJ,EAAAA,IAAI,EAAE,OADP;AAECC,EAAAA,IAAI,EAAE,OAFP;AAGCC,EAAAA,WAAW,EAAE,GAHd;AAICC,EAAAA,WAAW,EAAE,CAJd;AAKCC,EAAAA,KAAK,EACJ;AANF,CAjBY,CAAb;AA0BA,eAAeL,IAAf","sourcesContent":["const data = [\n\t{\n\t\tname: 'Regina',\n\t\tbase: 'tomate',\n\t\tprice_small: 6.5,\n\t\tprice_large: 9.95,\n\t\timage:\n\t\t\t'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',\n\t},\n\t{\n\t\tname: 'Napolitaine',\n\t\tbase: 'tomate',\n\t\tprice_small: 6.5,\n\t\tprice_large: 8.95,\n\t\timage:\n\t\t\t'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',\n\t},\n\t{\n\t\tname: 'Spicy',\n\t\tbase: 'crème',\n\t\tprice_small: 5.5,\n\t\tprice_large: 8,\n\t\timage:\n\t\t\t'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',\n\t},\n];\nexport default data;\n"],"file":"data.js"}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment