feature/book-card (#3)
Co-authored-by: Tim Rijkse <trijkse@gmail.com> Reviewed-on: #3
This commit was merged in pull request #3.
This commit is contained in:
@@ -1,91 +1,96 @@
|
||||
/**
|
||||
* Book Card Component
|
||||
* Reusable card displaying book thumbnail, title, author, and price
|
||||
* Reusable card displaying book thumbnail, title, description, author, and price
|
||||
* Horizontal layout with image on left and content on right
|
||||
*/
|
||||
class BookCard extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['title', 'author', 'price', 'image', 'href', 'rating'];
|
||||
return [
|
||||
"title",
|
||||
"author",
|
||||
"description",
|
||||
"price",
|
||||
"image",
|
||||
"href",
|
||||
"theme",
|
||||
];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
const addToCartButton =
|
||||
this.shadowRoot?.querySelector("add-to-cart-button");
|
||||
if (addToCartButton) {
|
||||
addToCartButton.addEventListener("add-to-cart", (e) => {
|
||||
e.stopPropagation();
|
||||
// Re-dispatch with book details
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("add-to-cart", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
title: this.title,
|
||||
author: this.author,
|
||||
price: this.price,
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
attributeChangedCallback() {
|
||||
if (this.shadowRoot) {
|
||||
this.render();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
}
|
||||
|
||||
get title() {
|
||||
return this.getAttribute('title') || 'Book Title';
|
||||
return this.getAttribute("title") || "Book Title";
|
||||
}
|
||||
|
||||
get author() {
|
||||
return this.getAttribute('author') || 'Author Name';
|
||||
return this.getAttribute("author") || "Author Name";
|
||||
}
|
||||
|
||||
get description() {
|
||||
return this.getAttribute("description") || "";
|
||||
}
|
||||
|
||||
get price() {
|
||||
return this.getAttribute('price') || '$0.00';
|
||||
return this.getAttribute("price") || "$0.00";
|
||||
}
|
||||
|
||||
get image() {
|
||||
return this.getAttribute('image') || '';
|
||||
return this.getAttribute("image") || "";
|
||||
}
|
||||
|
||||
get href() {
|
||||
return this.getAttribute('href') || 'book.html';
|
||||
return this.getAttribute("href") || "book.html";
|
||||
}
|
||||
|
||||
get rating() {
|
||||
return parseFloat(this.getAttribute('rating')) || 0;
|
||||
}
|
||||
|
||||
renderStars(rating) {
|
||||
const fullStars = Math.floor(rating);
|
||||
const hasHalf = rating % 1 >= 0.5;
|
||||
const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
|
||||
|
||||
let stars = '';
|
||||
|
||||
// Full stars
|
||||
for (let i = 0; i < fullStars; i++) {
|
||||
stars += `<svg class="star star-full" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
// Half star
|
||||
if (hasHalf) {
|
||||
stars += `<svg class="star star-half" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="halfGrad">
|
||||
<stop offset="50%" stop-color="currentColor"/>
|
||||
<stop offset="50%" stop-color="transparent"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill="url(#halfGrad)" stroke="currentColor" stroke-width="1" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
// Empty stars
|
||||
for (let i = 0; i < emptyStars; i++) {
|
||||
stars += `<svg class="star star-empty" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
return stars;
|
||||
get theme() {
|
||||
return this.getAttribute("theme") || "light"; // 'light' or 'dark'
|
||||
}
|
||||
|
||||
render() {
|
||||
const backgroundColor =
|
||||
this.theme === "dark"
|
||||
? "var(--color-card-dark-bg, #ebeef4)"
|
||||
: "var(--color-background, #ffffff)";
|
||||
|
||||
// Generate placeholder image if none provided
|
||||
const imageHtml = this.image
|
||||
const imageHtml = this.image
|
||||
? `<img src="${this.image}" alt="${this.title}" class="book-image">`
|
||||
: `<div class="book-image placeholder">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
|
||||
@@ -100,14 +105,18 @@ class BookCard extends HTMLElement {
|
||||
}
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-md, 1rem);
|
||||
color: inherit;
|
||||
background-color: var(--color-background, #ffffff);
|
||||
border-radius: var(--radius-lg, 0.75rem);
|
||||
overflow: hidden;
|
||||
background-color: ${backgroundColor};
|
||||
border-radius: var(--radius-sm, 0.25rem);
|
||||
padding: var(--spacing-md, 1rem);
|
||||
transition: transform var(--transition-fast, 150ms ease),
|
||||
box-shadow var(--transition-fast, 150ms ease);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
@@ -120,16 +129,34 @@ class BookCard extends HTMLElement {
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
aspect-ratio: 3 / 4;
|
||||
width: 102px;
|
||||
min-width: 102px;
|
||||
max-width: 102px;
|
||||
height: 165px;
|
||||
background-color: var(--color-background-tertiary, #f1f5f9);
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-sm, 0.25rem);
|
||||
}
|
||||
|
||||
.image-link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.image-link:visited,
|
||||
.image-link:hover,
|
||||
.image-link:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.book-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.book-image.placeholder {
|
||||
@@ -145,67 +172,107 @@ class BookCard extends HTMLElement {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--spacing-sm, 0.5rem);
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-sm, 0.875rem);
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
color: var(--color-text, #1e293b);
|
||||
margin-bottom: var(--spacing-xs, 0.25rem);
|
||||
.content {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm, 0.5rem); /* 8px gap between elements */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-link {
|
||||
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
||||
font-size: var(--font-size-xl, 1.25rem); /* 20px */
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
line-height: var(--line-height-24, 24px);
|
||||
color: var(--color-black, #000000);
|
||||
text-decoration: underline;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: var(--line-height-tight, 1.25);
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: var(--font-size-xs, 0.75rem);
|
||||
color: var(--color-text-light, #64748b);
|
||||
margin-bottom: var(--spacing-xs, 0.25rem);
|
||||
.title-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
||||
font-size: var(--font-size-base, 1rem); /* 16px */
|
||||
font-weight: var(--font-weight-light, 300);
|
||||
line-height: var(--line-height-24, 24px);
|
||||
color: var(--color-black, #000000);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.author-link {
|
||||
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
||||
font-size: var(--font-size-base, 1rem); /* 16px */
|
||||
font-weight: var(--font-weight-light, 300);
|
||||
line-height: var(--line-height-24, 24px);
|
||||
color: var(--color-button-primary, #951d51);
|
||||
text-decoration: underline;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-bottom: var(--spacing-xs, 0.25rem);
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: var(--color-accent, #f59e0b);
|
||||
}
|
||||
|
||||
.star-empty {
|
||||
color: var(--color-border, #e2e8f0);
|
||||
.author-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: var(--font-size-base, 1rem);
|
||||
margin: 0;
|
||||
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
||||
font-size: var(--font-size-md, 1rem); /* 16px */
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
color: var(--color-primary, #2563eb);
|
||||
line-height: var(--line-height-24, 24px);
|
||||
color: var(--color-text, #1e293b);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
<a href="${this.href}" class="card">
|
||||
<div class="image-container">
|
||||
${imageHtml}
|
||||
<div class="card">
|
||||
<a href="${this.href}" class="image-link">
|
||||
<div class="image-container">
|
||||
${imageHtml}
|
||||
</div>
|
||||
</a>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<a href="${this.href}" class="title-link">${this.title}</a>
|
||||
${
|
||||
this.description
|
||||
? `<p class="description">${this.description}</p>`
|
||||
: ""
|
||||
}
|
||||
<a href="${this.href}" class="author-link">${this.author}</a>
|
||||
<p class="price">${this.price}</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<add-to-cart-button></add-to-cart-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h3 class="title">${this.title}</h3>
|
||||
<p class="author">${this.author}</p>
|
||||
${this.rating > 0 ? `<div class="rating">${this.renderStars(this.rating)}</div>` : ''}
|
||||
<p class="price">${this.price}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('book-card', BookCard);
|
||||
customElements.define("book-card", BookCard);
|
||||
|
||||
Reference in New Issue
Block a user