feat(search): fill sidebar widget search history like zibll
Render local/remote history into [data-aksrt-search-history-list], mark widget forms for history capture, and style clear control.
This commit is contained in:
@@ -307,15 +307,35 @@
|
||||
.aksrt-bookmark-links__desc { font-size: 11px; color: var(--muted-2-color, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
|
||||
/* Search keywords */
|
||||
.aksrt-search-widget__keywords { margin-top: 10px; }
|
||||
/* Search keywords + history */
|
||||
.aksrt-search-widget__keywords,
|
||||
.aksrt-search-widget__history { margin-top: 10px; }
|
||||
.aksrt-search-widget__kw-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.aksrt-search-widget__kw-title {
|
||||
font-size: 12px;
|
||||
color: var(--muted-2-color, #888);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.aksrt-search-widget__kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.aksrt-search-widget__kw {
|
||||
.aksrt-search-widget__kw-head .aksrt-search-widget__kw-title { margin-bottom: 0; }
|
||||
.aksrt-search-widget__history-clear {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted-2-color, #999);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.aksrt-search-widget__history-clear:hover { color: var(--color-primary, #3b82f6); }
|
||||
.aksrt-search-widget__kw-list,
|
||||
.aksrt-search-widget__history-list { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.aksrt-search-widget__kw,
|
||||
.aksrt-search-widget__history-item {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
@@ -324,9 +344,110 @@
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
.aksrt-search-widget__history-empty {
|
||||
font-size: 12px;
|
||||
color: var(--muted-2-color, #999);
|
||||
}
|
||||
.aksrt-search-widget__more { margin-top: 8px; text-align: right; font-size: 12px; }
|
||||
.aksrt-search-widget__more a { color: var(--color-primary, #3b82f6); text-decoration: none; }
|
||||
|
||||
/* Product list widgets (batch6) */
|
||||
.aksrt-product-widget { margin-bottom: 8px; }
|
||||
.aksrt-product-widget__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.aksrt-product-widget--list .aksrt-product-widget__grid,
|
||||
.aksrt-product-widget--mini .aksrt-product-widget__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.aksrt-product-widget--oneline .aksrt-product-widget__grid {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 10px;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.aksrt-product-widget--oneline .aksrt-product-widget__item,
|
||||
.aksrt-product-widget--oneline .aksrt-product-card {
|
||||
flex: 0 0 42%;
|
||||
min-width: 140px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.aksrt-product-widget__item,
|
||||
.aksrt-product-widget .aksrt-product-card {
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: var(--surface-1, #fff);
|
||||
}
|
||||
.aksrt-product-widget__thumb,
|
||||
.aksrt-product-widget .aksrt-product-card__image {
|
||||
display: block;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--surface-2, #f3f4f6);
|
||||
overflow: hidden;
|
||||
}
|
||||
.aksrt-product-widget__thumb img,
|
||||
.aksrt-product-widget .aksrt-product-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.aksrt-product-widget__info,
|
||||
.aksrt-product-widget .aksrt-product-card__body { padding: 8px 10px 10px; }
|
||||
.aksrt-product-widget__title,
|
||||
.aksrt-product-widget .aksrt-product-card__title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.aksrt-product-widget__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.aksrt-product-widget__price,
|
||||
.aksrt-product-widget .aksrt-product-card__price {
|
||||
color: var(--color-primary, #ef4444);
|
||||
font-weight: 700;
|
||||
}
|
||||
.aksrt-product-widget__sales { color: var(--muted-2-color, #999); font-size: 11px; }
|
||||
.aksrt-product-widget__empty { font-size: 13px; color: var(--muted-2-color, #999); padding: 12px 0; }
|
||||
.aksrt-product-widget .ajax-pag { margin-top: 12px; text-align: center; }
|
||||
.aksrt-product-tab__headers {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 12px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.aksrt-product-tab__header {
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
background: var(--surface-2, #f3f4f6);
|
||||
border-radius: 999px;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
.aksrt-product-tab__header.is-active {
|
||||
background: var(--color-primary, #3b82f6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Scroll notice */
|
||||
.aksrt-scroll-notice {
|
||||
display: flex;
|
||||
@@ -552,3 +673,48 @@
|
||||
color: #b45309;
|
||||
}
|
||||
.aksrt-author-card__badge img { border-radius: 50%; }
|
||||
|
||||
/* Badge remote modal (batch6) */
|
||||
.aksrt-badge-modal { padding: 8px 4px 12px; }
|
||||
.aksrt-badge-modal__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
padding-right: 28px;
|
||||
}
|
||||
.aksrt-badge-modal__avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
|
||||
}
|
||||
.aksrt-badge-modal__title { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
|
||||
.aksrt-badge-modal__wear-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--color-primary, #3b82f6);
|
||||
}
|
||||
.aksrt-badge-modal__list { max-height: 50vh; overflow: auto; }
|
||||
.aksrt-badge-modal__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 4px;
|
||||
border-bottom: 1px solid var(--color-line, #eee);
|
||||
}
|
||||
.aksrt-badge-modal__item:last-child { border-bottom: 0; }
|
||||
.aksrt-badge-modal__item .medal-icon { width: 40px; height: 40px; object-fit: contain; }
|
||||
.aksrt-badge-modal__icon-fa {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--surface-2, #f3f4f6); color: #f59e0b;
|
||||
}
|
||||
.aksrt-badge-modal__icon-fa.lg { width: 72px; height: 72px; font-size: 28px; }
|
||||
.aksrt-badge-modal__meta { flex: 1; min-width: 0; }
|
||||
.aksrt-badge-modal__name { font-weight: 600; font-size: 14px; }
|
||||
.aksrt-badge-modal__empty { text-align: center; color: var(--muted-2-color, #999); padding: 24px 0; }
|
||||
.aksrt-badge-modal--single { text-align: center; padding: 16px 8px 20px; }
|
||||
.aksrt-badge-modal__card { padding: 12px 8px 8px; }
|
||||
.aksrt-badge-modal__actions { margin-top: 12px; }
|
||||
.aksrt-author-hero__badges { margin-top: 8px; }
|
||||
|
||||
@@ -390,6 +390,109 @@
|
||||
|
||||
window.__aksrtOpenSearchPanel = function () { setOpen(true); };
|
||||
window.__aksrtCloseSearchPanel = function () { setOpen(false); };
|
||||
|
||||
// Sidebar / widget search history (zibll widget_ui_search show_history).
|
||||
initWidgetSearchHistory({
|
||||
historyEnabled: historyEnabled,
|
||||
readHistory: readHistory,
|
||||
writeHistory: writeHistory,
|
||||
requestHistorySync: requestHistorySync,
|
||||
pushHistory: pushHistory,
|
||||
getSearchType: getSearchType,
|
||||
searchConfig: searchConfig,
|
||||
});
|
||||
}
|
||||
|
||||
function initWidgetSearchHistory(ctx) {
|
||||
var lists = document.querySelectorAll("[data-aksrt-search-history-list]");
|
||||
if (!lists.length) return;
|
||||
if (!ctx.historyEnabled) {
|
||||
document.querySelectorAll("[data-aksrt-search-history]").forEach(function (el) {
|
||||
el.hidden = true;
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s == null ? "" : s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.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 load() {
|
||||
if (window.aksrtData && aksrtData.isLoggedIn) {
|
||||
ctx.requestHistorySync("get", null, function (items) {
|
||||
paint(items);
|
||||
});
|
||||
return;
|
||||
}
|
||||
paint(ctx.readHistory());
|
||||
}
|
||||
|
||||
document.querySelectorAll("[data-aksrt-search-history-clear]").forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
if (window.aksrtData && aksrtData.isLoggedIn) {
|
||||
ctx.requestHistorySync("save", [], function (items) {
|
||||
paint(items);
|
||||
});
|
||||
return;
|
||||
}
|
||||
ctx.writeHistory([]);
|
||||
paint([]);
|
||||
});
|
||||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
|
||||
load();
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register("aksrt-search-panel", function () { initSearchPanel(); });
|
||||
|
||||
@@ -47,21 +47,25 @@ class SearchWidget extends \WP_Widget {
|
||||
}
|
||||
?>
|
||||
<div class="widget-search-box aksrt-search-widget">
|
||||
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
|
||||
<div class="widget-search-box__inner">
|
||||
<input type="search" name="s" class="widget-search-box__input" placeholder="<?php echo esc_attr($placeholder); ?>" value="<?php echo esc_attr(get_search_query()); ?>" autocomplete="off">
|
||||
<button type="submit" class="widget-search-box__btn" aria-label="<?php esc_attr_e('搜索', 'aksrt'); ?>">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php if ($show_history) : ?>
|
||||
<div class="aksrt-search-widget__history" data-aksrt-search-history>
|
||||
<div class="aksrt-search-widget__kw-title"><?php esc_html_e('搜索历史', 'aksrt'); ?></div>
|
||||
<div class="aksrt-search-widget__history-list" data-aksrt-search-history-list></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($keywords) : ?>
|
||||
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" data-aksrt-search-form>
|
||||
<div class="widget-search-box__inner">
|
||||
<input type="search" name="s" class="widget-search-box__input" placeholder="<?php echo esc_attr($placeholder); ?>" value="<?php echo esc_attr(get_search_query()); ?>" autocomplete="off">
|
||||
<input type="hidden" name="aksrt_search_type" value="post">
|
||||
<button type="submit" class="widget-search-box__btn" aria-label="<?php esc_attr_e('搜索', 'aksrt'); ?>">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<?php if ($show_history) : ?>
|
||||
<div class="aksrt-search-widget__history" data-aksrt-search-history>
|
||||
<div class="aksrt-search-widget__kw-head">
|
||||
<div class="aksrt-search-widget__kw-title"><?php esc_html_e('搜索历史', 'aksrt'); ?></div>
|
||||
<button type="button" class="aksrt-search-widget__history-clear" data-aksrt-search-history-clear hidden><?php esc_html_e('清空', 'aksrt'); ?></button>
|
||||
</div>
|
||||
<div class="aksrt-search-widget__history-list" data-aksrt-search-history-list></div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($keywords) : ?>
|
||||
<div class="aksrt-search-widget__keywords">
|
||||
<?php if ($kw_title !== '') : ?>
|
||||
<div class="aksrt-search-widget__kw-title"><?php echo esc_html($kw_title); ?></div>
|
||||
|
||||
Reference in New Issue
Block a user