cse110-fa22-group29/source/assets/scripts/ReviewCard.js

178 lines
5.0 KiB
JavaScript
Raw Normal View History

2022-11-08 23:57:02 +00:00
// ReviewCard.js
class ReviewCard extends HTMLElement {
// Called once when document.createElement('review-card') is called, or
// the element is written into the DOM directly as <review-card>
constructor() {
super();
let shadowEl = this.attachShadow({mode:'open'});
let articleEl = document.createElement('article');
let styleEl = document.createElement('style');
styleEl.textContent = `
* {
font-family: sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
article {
align-items: center;
border: 1px solid rgb(223, 225, 229);
border-radius: 8px;
display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px;
height: auto;
row-gap: 5px;
padding: 0 16px 16px 16px;
width: 178px;
}
div.rating {
align-items: center;
column-gap: 5px;
display: flex;
}
div.rating>img {
height: auto;
display: inline-block;
object-fit: scale-down;
width: 78px;
}
article>img {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 118px;
object-fit: cover;
margin-left: -16px;
width: calc(100% + 32px);
}
2022-11-11 08:03:56 +00:00
label.restaurant-name {
2022-11-08 23:57:02 +00:00
color: black !important;
}
2022-11-11 08:03:56 +00:00
label.meal-name {
2022-11-08 23:57:02 +00:00
display: -webkit-box;
font-size: 16px;
height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
2022-11-11 08:03:56 +00:00
label:not(.meal-name),
2022-11-08 23:57:02 +00:00
span,
time {
color: #70757A;
font-size: 12px;
}
`;
articleEl.append(styleEl);
shadowEl.append(articleEl);
2022-11-11 08:03:56 +00:00
this.shadowEl = shadowEl;
2022-11-08 23:57:02 +00:00
}
/**
* Called when the .data property is set on this element.
*
* For Example:
* let reviewCard = document.createElement('review-card');
* reviewCard.data = { foo: 'bar' }
*
* @param {Object} data - The data to pass into the <review-card>, must be of the
* following format:
* {
* "imgSrc": "string",
* "imgAlt": "string",
* "mealName": "string",
* "restaurant": "string",
* "rating": number
2022-11-10 21:22:32 +00:00
* "tags": string array
2022-11-08 23:57:02 +00:00
* }
*/
set data(data) {
// If nothing was passed in, return
if (!data) return;
// Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector('article');
// setting the article elements for the review card
//image setup
2022-11-11 08:03:56 +00:00
let mealImg = document.createElement('img');
mealImg.setAttribute('src',data['imgSrc']);
mealImg.setAttribute('alt',data['imgAlt']);
2022-11-08 23:57:02 +00:00
//meal name setup
2022-11-11 08:03:56 +00:00
let mealLabel = document.createElement('label');
mealLabel.setAttribute('class','meal-name');
mealLabel.innerHTML = data['mealName'];
2022-11-08 23:57:02 +00:00
2022-11-12 18:10:07 +00:00
//review page link
//giving it functionality to save the review card's info to session storage for loading the review page
let reviewLink = document.createElement('a');
reviewLink.setAttribute('href','./review.html')
reviewLink.innerHTML = 'review page'
reviewLink.addEventListener('click', () => {
sessionStorage.clear();
let currReview = {
"imgSrc": data['imgSrc'],
"imgAlt": data['imgAlt'],
"mealName": data['mealName'],
"restaurant": data['restaurant'],
"rating": data['rating'],
"tags": data['tags']
}
sessionStorage.setItem('currReview', JSON.stringify(currReview));
});
2022-11-11 08:03:56 +00:00
let restaurantLabel = document.createElement('label');
restaurantLabel.setAttribute('class','restaurant-name');
restaurantLabel.innerHTML = data['restaurant'];
2022-11-08 23:57:02 +00:00
//other info: rating
2022-11-11 08:03:56 +00:00
let ratingDiv = document.createElement('div');
ratingDiv.setAttribute('class', 'rating');
let starsImg = document.createElement('img');
starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg');
starsImg.setAttribute('alt', data['rating'] +' stars');
ratingDiv.append(starsImg);
2022-11-08 23:57:02 +00:00
2022-11-10 21:22:32 +00:00
//added tags
let tagContainer = document.createElement('div')
tagContainer.setAttribute('class', 'tag-container');
for (let i = 0; i < data['tags'].length; i++) {
2022-11-11 08:03:56 +00:00
let newTag = document.createElement('label');
2022-11-10 21:22:32 +00:00
newTag.setAttribute('class','tag');
2022-11-11 20:07:58 +00:00
newTag.innerHTML = data['tags'][i] + " ";
2022-11-11 08:03:56 +00:00
tagContainer.append(newTag);
2022-11-10 21:22:32 +00:00
}
2022-11-11 08:03:56 +00:00
articleEl.append(mealImg);
articleEl.append(mealLabel);
2022-11-12 18:10:07 +00:00
articleEl.append(reviewLink)
2022-11-11 08:03:56 +00:00
articleEl.append(restaurantLabel);
articleEl.append(ratingDiv);
articleEl.append(tagContainer);
2022-11-08 23:57:02 +00:00
2022-11-08 23:57:02 +00:00
}
}
customElements.define('review-card', ReviewCard);