| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-rl-list').forEach(function (list) { |
| 5 |
var opts = {}; |
| 6 |
try { opts = JSON.parse(list.dataset.opts || '{}'); } catch (e) {} |
| 7 |
|
| 8 |
if (!opts.filterByStatus) return; |
| 9 |
|
| 10 |
var cards = list.querySelectorAll('.bkbg-rl-card'); |
| 11 |
|
| 12 |
// Collect unique statuses |
| 13 |
var statuses = []; |
| 14 |
cards.forEach(function (card) { |
| 15 |
var s = card.dataset.status; |
| 16 |
if (s && statuses.indexOf(s) === -1) statuses.push(s); |
| 17 |
}); |
| 18 |
|
| 19 |
if (statuses.length < 2) return; |
| 20 |
|
| 21 |
var STATUS_LABELS = { |
| 22 |
'read': 'Read', |
| 23 |
'reading': 'Currently Reading', |
| 24 |
'want-to-read': 'Want to Read', |
| 25 |
'recommended': 'Recommended', |
| 26 |
'dnf': 'Did Not Finish' |
| 27 |
}; |
| 28 |
|
| 29 |
// Build filter bar |
| 30 |
var bar = document.createElement('div'); |
| 31 |
bar.className = 'bkbg-rl-filter-bar'; |
| 32 |
bar.style.cssText = 'display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;'; |
| 33 |
|
| 34 |
function setFilter(active) { |
| 35 |
bar.querySelectorAll('.bkbg-rl-filter-btn').forEach(function (btn) { |
| 36 |
var isActive = btn.dataset.status === active || (active === 'all' && btn.dataset.status === 'all'); |
| 37 |
btn.style.opacity = isActive ? '1' : '0.55'; |
| 38 |
btn.style.fontWeight = isActive ? '700' : '400'; |
| 39 |
}); |
| 40 |
cards.forEach(function (card) { |
| 41 |
var show = active === 'all' || card.dataset.status === active; |
| 42 |
card.style.display = show ? '' : 'none'; |
| 43 |
}); |
| 44 |
} |
| 45 |
|
| 46 |
// All button |
| 47 |
var allBtn = document.createElement('button'); |
| 48 |
allBtn.type = 'button'; |
| 49 |
allBtn.dataset.status = 'all'; |
| 50 |
allBtn.className = 'bkbg-rl-filter-btn'; |
| 51 |
allBtn.textContent = 'All'; |
| 52 |
allBtn.style.cssText = 'padding:4px 14px;border-radius:999px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-size:13px;'; |
| 53 |
allBtn.addEventListener('click', function () { setFilter('all'); }); |
| 54 |
bar.appendChild(allBtn); |
| 55 |
|
| 56 |
statuses.forEach(function (s) { |
| 57 |
var btn = document.createElement('button'); |
| 58 |
btn.type = 'button'; |
| 59 |
btn.dataset.status = s; |
| 60 |
btn.className = 'bkbg-rl-filter-btn'; |
| 61 |
btn.textContent = STATUS_LABELS[s] || s; |
| 62 |
btn.style.cssText = 'padding:4px 14px;border-radius:999px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-size:13px;opacity:0.55;'; |
| 63 |
btn.addEventListener('click', function () { setFilter(s); }); |
| 64 |
bar.appendChild(btn); |
| 65 |
}); |
| 66 |
|
| 67 |
list.parentNode.insertBefore(bar, list); |
| 68 |
setFilter('all'); |
| 69 |
|
| 70 |
// Entrance animation |
| 71 |
if ('IntersectionObserver' in window) { |
| 72 |
var io = new IntersectionObserver(function (entries) { |
| 73 |
entries.forEach(function (entry) { |
| 74 |
if (entry.isIntersecting) { |
| 75 |
entry.target.style.opacity = '1'; |
| 76 |
entry.target.style.transform = 'none'; |
| 77 |
io.unobserve(entry.target); |
| 78 |
} |
| 79 |
}); |
| 80 |
}, { threshold: 0.1 }); |
| 81 |
|
| 82 |
cards.forEach(function (card, i) { |
| 83 |
card.style.opacity = '0'; |
| 84 |
card.style.transform = 'translateY(16px)'; |
| 85 |
card.style.transition = 'opacity 0.4s ' + (i * 0.06) + 's, transform 0.4s ' + (i * 0.06) + 's'; |
| 86 |
io.observe(card); |
| 87 |
}); |
| 88 |
} |
| 89 |
}); |
| 90 |
})(); |
| 91 |
|
