Files
mangaBookmark/backend/static/filter.js
T
sulthan 8c7d3c9c46 feat(backend): mobile-first styling and client-side title search
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>
2026-07-25 23:31:58 +07:00

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();
}