|
/**
|
|
* @fileoverview Rant Card Component for Rantii
|
|
* @author retoor <retoor@molodetz.nl>
|
|
* @description Compact rant display for feed listings
|
|
* @keywords rant, card, feed, listing, preview
|
|
*/
|
|
|
|
import { BaseComponent } from './base-component.js';
|
|
import { formatRelativeTime } from '../utils/date.js';
|
|
import { buildDevrantImageUrl } from '../utils/url.js';
|
|
|
|
class RantCard extends BaseComponent {
|
|
static get observedAttributes() {
|
|
return ['rant-id'];
|
|
}
|
|
|
|
init() {
|
|
this.rantData = null;
|
|
this.render();
|
|
this.bindEvents();
|
|
}
|
|
|
|
setRant(rant) {
|
|
this.rantData = rant;
|
|
this.setAttr('rant-id', rant.id);
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
if (!this.rantData) {
|
|
this.setHtml('<div class="rant-card-skeleton"></div>');
|
|
return;
|
|
}
|
|
|
|
const rant = this.rantData;
|
|
const hasImage = rant.attached_image && typeof rant.attached_image === 'object';
|
|
const imageUrl = hasImage ? buildDevrantImageUrl(rant.attached_image.url) : null;
|
|
|
|
this.addClass('rant-card');
|
|
|
|
this.setHtml(`
|
|
<article class="card-content">
|
|
<header class="card-header">
|
|
<user-avatar
|
|
avatar='${JSON.stringify(rant.user_avatar)}'
|
|
username="${rant.user_username}"
|
|
size="small">
|
|
</user-avatar>
|
|
<div class="card-meta">
|
|
<span class="card-username">${rant.user_username}</span>
|
|
<span class="card-score">+${rant.user_score}</span>
|
|
<span class="card-time">${formatRelativeTime(rant.created_time)}</span>
|
|
</div>
|
|
</header>
|
|
<div class="card-body">
|
|
<rant-content text="${this.escapeAttr(rant.text)}"></rant-content>
|
|
${imageUrl ? `
|
|
<div class="card-image">
|
|
<image-preview
|
|
src="${imageUrl}"
|
|
width="${rant.attached_image.width}"
|
|
height="${rant.attached_image.height}">
|
|
</image-preview>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
<footer class="card-footer">
|
|
<vote-buttons
|
|
score="${rant.score}"
|
|
vote-state="${rant.vote_state}"
|
|
type="rant"
|
|
item-id="${rant.id}">
|
|
</vote-buttons>
|
|
<button class="card-comments" aria-label="${rant.num_comments} comments">
|
|
<svg viewBox="0 0 24 24" width="18" height="18">
|
|
<path fill="currentColor" d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/>
|
|
</svg>
|
|
<span>${rant.num_comments}</span>
|
|
</button>
|
|
${rant.tags && rant.tags.length > 0 ? `
|
|
<div class="card-tags">
|
|
${rant.tags.slice(0, 3).map(tag => `
|
|
<span class="tag">${tag}</span>
|
|
`).join('')}
|
|
</div>
|
|
` : ''}
|
|
</footer>
|
|
</article>
|
|
`);
|
|
}
|
|
|
|
escapeAttr(str) {
|
|
if (!str) return '';
|
|
return str
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
|
|
bindEvents() {
|
|
this.on(this, 'click', this.handleClick);
|
|
this.on(this, 'vote', this.handleVote);
|
|
}
|
|
|
|
handleClick(e) {
|
|
const username = e.target.closest('.card-username');
|
|
const avatar = e.target.closest('user-avatar');
|
|
const commentsBtn = e.target.closest('.card-comments');
|
|
const voteBtn = e.target.closest('.vote-btn');
|
|
const tag = e.target.closest('.tag');
|
|
const imagePreview = e.target.closest('image-preview');
|
|
const youtubeEmbed = e.target.closest('youtube-embed');
|
|
const linkPreview = e.target.closest('link-preview');
|
|
|
|
if (voteBtn || imagePreview || youtubeEmbed || linkPreview) {
|
|
return;
|
|
}
|
|
|
|
if (username || avatar) {
|
|
e.stopPropagation();
|
|
this.getRouter()?.goToUser(this.rantData.user_username);
|
|
return;
|
|
}
|
|
|
|
if (tag) {
|
|
e.stopPropagation();
|
|
this.getRouter()?.goToSearch(tag.textContent);
|
|
return;
|
|
}
|
|
|
|
this.getRouter()?.goToRant(this.rantData.id);
|
|
}
|
|
|
|
async handleVote(e) {
|
|
e.stopPropagation();
|
|
const { vote, itemId } = e.detail;
|
|
|
|
const voteButtons = this.$('vote-buttons');
|
|
if (voteButtons) {
|
|
voteButtons.disable();
|
|
}
|
|
|
|
try {
|
|
const result = await this.getApi()?.voteRant(itemId, vote);
|
|
if (result?.success && result.rant) {
|
|
this.rantData.score = result.rant.score;
|
|
this.rantData.vote_state = result.rant.vote_state;
|
|
if (voteButtons) {
|
|
voteButtons.updateVote(result.rant.score, result.rant.vote_state);
|
|
voteButtons.enable();
|
|
}
|
|
}
|
|
} catch (error) {
|
|
if (voteButtons) {
|
|
voteButtons.enable();
|
|
}
|
|
}
|
|
}
|
|
|
|
getRantId() {
|
|
return this.rantData?.id || this.getAttr('rant-id');
|
|
}
|
|
}
|
|
|
|
customElements.define('rant-card', RantCard);
|
|
|
|
export { RantCard };
|