8c7d3c9c46
Also fixes a CSS specificity bug found during manual browser testing:
.chapter-form { display: flex } has the same specificity as the browser's
built-in [hidden] { display: none } rule and wins by cascade order, so the
per-card chapter-edit form stayed visible even with the hidden attribute
set. Added .chapter-form[hidden] { display: none } alongside the existing
.card[hidden] override.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
// Title search runs entirely in the browser: the full list is already in the
|
|
// DOM, so filtering it needs no request.
|
|
(function () {
|
|
function applyFilter() {
|
|
var box = document.getElementById("search");
|
|
if (!box) return;
|
|
var needle = box.value.trim().toLowerCase();
|
|
document.querySelectorAll(".card").forEach(function (card) {
|
|
var title = (card.dataset.title || "").toLowerCase();
|
|
card.hidden = needle !== "" && title.indexOf(needle) === -1;
|
|
});
|
|
}
|
|
|
|
document.addEventListener("input", function (e) {
|
|
if (e.target && e.target.id === "search") applyFilter();
|
|
});
|
|
|
|
// htmx replaces the list on a tab switch, so re-apply to the new cards.
|
|
document.body.addEventListener("htmx:afterSwap", applyFilter);
|
|
})();
|
|
|
|
function setActiveTab(el) {
|
|
el.parentElement.querySelectorAll("[role=tab]").forEach(function (t) {
|
|
t.classList.toggle("active", t === el);
|
|
});
|
|
}
|
|
|
|
function toggleChapterForm(key) {
|
|
var form = document.getElementById("chapter-form-" + key);
|
|
if (!form) return;
|
|
form.hidden = !form.hidden;
|
|
if (!form.hidden) form.querySelector("input").focus();
|
|
}
|