60 lines
3.1 KiB
JavaScript
60 lines
3.1 KiB
JavaScript
import { esc } from './sanitize.js';
|
|
|
|
export function renderCategoryPills(categories) {
|
|
var html = '<button class="lh-cat-pill active" data-slug="all">All</button>';
|
|
(categories || []).forEach(function(c) {
|
|
html += '<button class="lh-cat-pill" data-slug="' + esc(c.slug) + '">' + esc(c.name) + '</button>';
|
|
});
|
|
return html;
|
|
}
|
|
|
|
export function renderFeed(items, feedEl) {
|
|
if (!feedEl) return;
|
|
if (!items || items.length === 0) {
|
|
feedEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--g400);"><i class="fas fa-book-open" style="font-size:32px;margin-bottom:12px;display:block;"></i>No content yet. Check back soon!</div>';
|
|
return;
|
|
}
|
|
|
|
feedEl.innerHTML = items.map(renderFeedItem).join('');
|
|
}
|
|
|
|
export function renderSearchHeader(count, query) {
|
|
return '<div style="padding:8px 0 12px;display:flex;align-items:center;justify-content:space-between;">' +
|
|
'<span style="font-size:13px;color:var(--g600);">' +
|
|
(count > 0
|
|
? '<strong>' + count + '</strong> result' + (count !== 1 ? 's' : '') + ' for <strong>"' + esc(query) + '"</strong>'
|
|
: 'No results for <strong>"' + esc(query) + '"</strong>') +
|
|
'</span>' +
|
|
'<button id="lh-search-clear" style="background:none;border:none;font-size:12px;color:var(--blue);cursor:pointer;padding:0;">Clear search</button>' +
|
|
'</div>';
|
|
}
|
|
|
|
export function renderEmptySearchMessage() {
|
|
return '<div style="text-align:center;padding:40px;color:var(--g400);">' +
|
|
'<i class="fas fa-search" style="font-size:32px;margin-bottom:12px;display:block;opacity:0.4;"></i>' +
|
|
'Try different keywords or browse by category' +
|
|
'</div>';
|
|
}
|
|
|
|
function renderFeedItem(item) {
|
|
var typeIcon = item.content_type === 'quiz' ? 'fa-clipboard-question' : item.content_type === 'pearl' ? 'fa-gem' : item.content_type === 'presentation' ? 'fa-presentation-screen' : 'fa-file-alt';
|
|
var typeColor = item.content_type === 'quiz' ? 'var(--amber)' : item.content_type === 'pearl' ? 'var(--purple, #8b5cf6)' : item.content_type === 'presentation' ? '#065f46' : 'var(--blue)';
|
|
var quizBadge = item.question_count > 0 ? '<span class="lh-badge lh-badge-quiz"><i class="fas fa-clipboard-question"></i> ' + item.question_count + ' Q</span>' : '';
|
|
var catBadge = item.category_name ? '<span class="lh-badge">' + esc(item.category_name) + '</span>' : '<span class="lh-badge" style="opacity:0.5;">Uncategorized</span>';
|
|
var date = item.created_at ? new Date(item.created_at).toLocaleDateString() : '';
|
|
|
|
return '<div class="lh-feed-item card" data-slug="' + esc(item.slug) + '">' +
|
|
'<div class="lh-feed-item-header">' +
|
|
'<i class="fas ' + typeIcon + '" style="color:' + typeColor + ';font-size:16px;"></i>' +
|
|
'<div style="flex:1;min-width:0;">' +
|
|
'<div class="lh-feed-title">' + esc(item.title) + '</div>' +
|
|
'<div class="lh-feed-meta">' +
|
|
(item.subject ? '<span>' + esc(item.subject) + '</span>' : '') +
|
|
(item.author_name ? '<span>by ' + esc(item.author_name) + '</span>' : '') +
|
|
'<span>' + date + '</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="lh-feed-badges">' + catBadge + quizBadge + '</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|