This repository has been archived by the owner on Apr 30, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 34
/
product.js
120 lines (107 loc) · 4.07 KB
/
product.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// start with an IIFE to keep the global namespace clean
(function(){
// UI class for changing the user interface
class ProductView {
// the UI constructor now has a "templateElement" and a "parentElement" parameter
// to create a new DOM element based on the template
// and append it to the given parent
constructor(templateElement, parentElement) {
// this is basically our configuration,
// the part that might have to change when the HTML changes:
// gathering the selectors for the elements we will be working with
this.productImageSelector = ".js-product-image";
this.productNameSelector = ".js-product-name";
this.productCategorySelector = ".js-product-category";
this.productDescriptionSelector = ".js-product-description";
this.productPriceSelector = ".js-product-price";
this.productButtonSelector = ".js-product-button";
// clone the template to create a new DOM element
this.node = templateElement.cloneNode(true);
// and append the new DOM element to the end of the product list
parentElement.appendChild(this.node);
// using the selectors above, we store the elements in private variables
this.productImageElement = this.node.querySelector(this.productImageSelector);
this.productNameElement = this.node.querySelector(this.productNameSelector);
this.productCategoryElement = this.node.querySelector(this.productCategorySelector);
this.productDescriptionElement = this.node.querySelector(this.productDescriptionSelector);
this.productPriceElement = this.node.querySelector(this.productPriceSelector);
this.productButtonElement = this.node.querySelector(this.productButtonSelector);
// add event listeners
this.productButtonElement.addEventListener("click", this.handleClick);
}
handleClick () {
// "this" will refer to the clicked button here
const productData = this.dataset;
PubSub.publish("addToCart", productData);
}
// this is the API for our UI objects:
// methods to change the UI by only changing the
// content of the stored elements
setProductImage (src) {
this.productImageElement.src = src;
}
setProductName (name) {
this.productNameElement.textContent = name;
}
setProductCategory (category) {
this.productCategoryElement.textContent = category;
}
setProductDescription (description) {
this.productDescriptionElement.textContent = description;
}
setProductPrice (price) {
this.productPriceElement.textContent = price;
}
// let's add a method that sets our UI up in one go
setUp (productInfo) {
this.productImageElement.src = productInfo.image;
this.productNameElement.textContent = productInfo.name;
this.productCategoryElement.textContent = productInfo.category;
this.productDescriptionElement.textContent = productInfo.description;
this.productPriceElement.textContent = productInfo.price;
// data for the event handler
this.productButtonElement.dataset.name = productInfo.name;
this.productButtonElement.dataset.price = productInfo.price;
}
};
// this way the other JS files can also use this class
window.ProductView = ProductView;
// Product class for gathering product related info
class ProductModel {
constructor (productInfo) {
this.name = productInfo.name;
this.category = productInfo.category;
this.description = productInfo.description;
this.imageSrc = productInfo.imageSrc;
this.price = productInfo.price;
}
// API for ProductModel objects for getting product info
getName () {
return this.name;
}
getCategory () {
return this.category;
}
getDescription () {
return `${this.name} is ${this.description}.`;
}
getImage () {
return this.imageSrc;
}
getPrice () {
return `€${this.price}`;
}
// let's add a method that returns all that
getInfo () {
return {
name: this.name,
category: this.category,
description: `${this.name} is ${this.description}.`,
image: this.imageSrc,
price: `€${this.price}`
};
}
};
// this way the other JS files can also use this class
window.ProductModel = ProductModel;
})();