feat(widget): improve search history popup
This commit is contained in:
kate522 committed
1 parent
2992f7e22b
commit
389ab4f19a
3 files changed
+155
-71
No files matched your search
+88
-52
@@ -466,14 +466,15 @@
|
||||
}
|
||||
|
||||
function initWidgetSearchHistory(ctx) {
|
||||
var lists = document.querySelectorAll("[data-aksrt-search-history-list]");
|
||||
if (!lists.length) return;
|
||||
var panels = document.querySelectorAll("[data-aksrt-search-history]");
|
||||
if (!panels.length) return;
|
||||
if (!ctx.historyEnabled) {
|
||||
document.querySelectorAll("[data-aksrt-search-history]").forEach(function (el) {
|
||||
panels.forEach(function (el) {
|
||||
el.hidden = true;
|
||||
});
|
||||
return;
|
||||
}
|
||||
var activePanel = null;
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s == null ? "" : s)
|
||||
@@ -483,78 +484,113 @@
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
function paint(items) {
|
||||
var list = Array.isArray(items) ? items : [];
|
||||
lists.forEach(function (wrap) {
|
||||
var section = wrap.closest("[data-aksrt-search-history]") || wrap.parentElement;
|
||||
var clearBtn = section ? section.querySelector("[data-aksrt-search-history-clear]") : null;
|
||||
if (!list.length) {
|
||||
wrap.innerHTML = '<span class="aksrt-search-widget__history-empty">' + escapeHtml("暂无搜索历史") + "</span>";
|
||||
if (clearBtn) clearBtn.hidden = true;
|
||||
return;
|
||||
}
|
||||
if (clearBtn) clearBtn.hidden = false;
|
||||
wrap.innerHTML = list
|
||||
.map(function (item) {
|
||||
var kw = item && item.keyword ? String(item.keyword) : "";
|
||||
if (!kw) return "";
|
||||
var type = (item && item.type) || "post";
|
||||
var href = "?s=" + encodeURIComponent(kw);
|
||||
return (
|
||||
'<a class="aksrt-search-widget__kw aksrt-search-widget__history-item" href="' +
|
||||
href +
|
||||
'" data-history-keyword="' +
|
||||
encodeURIComponent(kw) +
|
||||
'" data-history-type="' +
|
||||
encodeURIComponent(type) +
|
||||
'">' +
|
||||
escapeHtml(kw) +
|
||||
"</a>"
|
||||
);
|
||||
})
|
||||
.join("");
|
||||
function close(panel) {
|
||||
if (!panel) return;
|
||||
panel.hidden = true;
|
||||
var input = panel.parentElement ? panel.parentElement.querySelector('input[name="s"]') : null;
|
||||
if (input) input.setAttribute("aria-expanded", "false");
|
||||
if (activePanel === panel) activePanel = null;
|
||||
}
|
||||
|
||||
function closeAll(except) {
|
||||
panels.forEach(function (panel) {
|
||||
if (panel !== except) close(panel);
|
||||
});
|
||||
}
|
||||
|
||||
function load() {
|
||||
function buildSearchUrl(form, keyword, type) {
|
||||
var url = new URL(form.getAttribute("action") || window.location.href, window.location.href);
|
||||
url.searchParams.set("s", keyword);
|
||||
if (type) url.searchParams.set("aksrt_search_type", type);
|
||||
return url.toString();
|
||||
}
|
||||
|
||||
function paint(panel, items) {
|
||||
var wrap = panel.querySelector("[data-aksrt-search-history-list]");
|
||||
var clearBtn = panel.querySelector("[data-aksrt-search-history-clear]");
|
||||
var form = panel.closest("form");
|
||||
var limit = parseInt(panel.getAttribute("data-history-limit"), 10);
|
||||
var list = (Array.isArray(items) ? items : []).filter(function (item) {
|
||||
return item && item.keyword;
|
||||
}).slice(0, limit > 0 ? Math.min(limit, 8) : 8);
|
||||
if (!wrap || !form || !list.length) {
|
||||
if (clearBtn) clearBtn.hidden = true;
|
||||
close(panel);
|
||||
return;
|
||||
}
|
||||
if (clearBtn) clearBtn.hidden = false;
|
||||
wrap.innerHTML = list.map(function (item) {
|
||||
var keyword = String(item.keyword);
|
||||
var type = item.type || "post";
|
||||
return (
|
||||
'<a class="aksrt-search-widget__history-item" role="listitem" href="' +
|
||||
escapeHtml(buildSearchUrl(form, keyword, type)) +
|
||||
'">' + escapeHtml(keyword) + "</a>"
|
||||
);
|
||||
}).join("");
|
||||
panel.hidden = false;
|
||||
var input = panel.parentElement ? panel.parentElement.querySelector('input[name="s"]') : null;
|
||||
if (input) input.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
|
||||
function load(panel) {
|
||||
if (window.aksrtData && aksrtData.isLoggedIn) {
|
||||
ctx.requestHistorySync("get", null, function (items) {
|
||||
paint(items);
|
||||
if (activePanel === panel) paint(panel, items);
|
||||
});
|
||||
return;
|
||||
}
|
||||
paint(ctx.readHistory());
|
||||
if (activePanel === panel) paint(panel, ctx.readHistory());
|
||||
}
|
||||
|
||||
panels.forEach(function (panel) {
|
||||
var field = panel.parentElement;
|
||||
var form = panel.closest("form");
|
||||
var input = field ? field.querySelector('input[name="s"]') : null;
|
||||
if (!input || !form) return;
|
||||
|
||||
function open() {
|
||||
closeAll(panel);
|
||||
activePanel = panel;
|
||||
load(panel);
|
||||
}
|
||||
|
||||
input.addEventListener("focus", open);
|
||||
input.addEventListener("click", open);
|
||||
input.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
close(panel);
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
form.addEventListener("submit", function () {
|
||||
close(panel);
|
||||
});
|
||||
panel.addEventListener("click", function (e) {
|
||||
if (e.target.closest(".aksrt-search-widget__history-item")) close(panel);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-aksrt-search-history-clear]").forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var panel = btn.closest("[data-aksrt-search-history]");
|
||||
if (!panel) return;
|
||||
if (window.aksrtData && aksrtData.isLoggedIn) {
|
||||
ctx.requestHistorySync("save", [], function (items) {
|
||||
paint(items);
|
||||
paint(panel, items);
|
||||
});
|
||||
return;
|
||||
}
|
||||
ctx.writeHistory([]);
|
||||
paint([]);
|
||||
paint(panel, []);
|
||||
});
|
||||
});
|
||||
|
||||
// Also push history when submitting bare widget forms without data-aksrt-search-form.
|
||||
document.querySelectorAll(".aksrt-search-widget form").forEach(function (form) {
|
||||
if (form.hasAttribute("data-aksrt-search-form")) return;
|
||||
form.addEventListener("submit", function () {
|
||||
var input = form.querySelector('input[name="s"]');
|
||||
var typeInput = form.querySelector('input[name="aksrt_search_type"]');
|
||||
var keyword = input ? (input.value || "").trim() : "";
|
||||
var type = typeInput
|
||||
? typeInput.value || ctx.searchConfig.defaultType || "post"
|
||||
: ctx.searchConfig.defaultType || "post";
|
||||
if (keyword) ctx.pushHistory(keyword, type);
|
||||
});
|
||||
document.addEventListener("pointerdown", function (e) {
|
||||
if (activePanel && !activePanel.parentElement.contains(e.target)) close(activePanel);
|
||||
});
|
||||
|
||||
load();
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register("aksrt-search-panel", function () { initSearchPanel(); });
|
||||
|
||||
Reference in new issue
Block a user