fix: initial commit
This commit is contained in:
Tim Rijkse
211
js/components/book-card.js
Normal file
211
js/components/book-card.js
Normal file
@@ -0,0 +1,211 @@
|
||||
/**
|
||||
* Book Card Component
|
||||
* Reusable card displaying book thumbnail, title, author, and price
|
||||
*/
|
||||
class BookCard extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['title', 'author', 'price', 'image', 'href', 'rating'];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
attributeChangedCallback() {
|
||||
if (this.shadowRoot) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
get title() {
|
||||
return this.getAttribute('title') || 'Book Title';
|
||||
}
|
||||
|
||||
get author() {
|
||||
return this.getAttribute('author') || 'Author Name';
|
||||
}
|
||||
|
||||
get price() {
|
||||
return this.getAttribute('price') || '$0.00';
|
||||
}
|
||||
|
||||
get image() {
|
||||
return this.getAttribute('image') || '';
|
||||
}
|
||||
|
||||
get href() {
|
||||
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;
|
||||
}
|
||||
|
||||
render() {
|
||||
// Generate placeholder image if none provided
|
||||
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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
</div>`;
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: var(--color-background, #ffffff);
|
||||
border-radius: var(--radius-lg, 0.75rem);
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition-fast, 150ms ease),
|
||||
box-shadow var(--transition-fast, 150ms ease);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
|
||||
}
|
||||
|
||||
.card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
aspect-ratio: 3 / 4;
|
||||
background-color: var(--color-background-tertiary, #f1f5f9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.book-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.book-image.placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-light, #64748b);
|
||||
}
|
||||
|
||||
.book-image.placeholder svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--spacing-sm, 0.5rem);
|
||||
}
|
||||
|
||||
.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);
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: var(--font-size-base, 1rem);
|
||||
font-weight: var(--font-weight-bold, 700);
|
||||
color: var(--color-primary, #2563eb);
|
||||
}
|
||||
</style>
|
||||
<a href="${this.href}" class="card">
|
||||
<div class="image-container">
|
||||
${imageHtml}
|
||||
</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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('book-card', BookCard);
|
||||
Reference in New Issue
Block a user