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:
kate522 committed
1 parent
0cc3836c70
commit
c2be36acd7
3 files changed
+292
-19
No files matched your search
@@ -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; }
|
.aksrt-bookmark-links__desc { font-size: 11px; color: var(--muted-2-color, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
|
||||||
|
|
||||||
/* Search keywords */
|
/* Search keywords + history */
|
||||||
.aksrt-search-widget__keywords { margin-top: 10px; }
|
.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 {
|
.aksrt-search-widget__kw-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--muted-2-color, #888);
|
color: var(--muted-2-color, #888);
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.aksrt-search-widget__kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
|
.aksrt-search-widget__kw-head .aksrt-search-widget__kw-title { margin-bottom: 0; }
|
||||||
.aksrt-search-widget__kw {
|
.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;
|
display: inline-block;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
@@ -324,9 +344,110 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 12px;
|
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 { margin-top: 8px; text-align: right; font-size: 12px; }
|
||||||
.aksrt-search-widget__more a { color: var(--color-primary, #3b82f6); text-decoration: none; }
|
.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 */
|
/* Scroll notice */
|
||||||
.aksrt-scroll-notice {
|
.aksrt-scroll-notice {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -552,3 +673,48 @@
|
|||||||
color: #b45309;
|
color: #b45309;
|
||||||
}
|
}
|
||||||
.aksrt-author-card__badge img { border-radius: 50%; }
|
.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.__aksrtOpenSearchPanel = function () { setOpen(true); };
|
||||||
window.__aksrtCloseSearchPanel = function () { setOpen(false); };
|
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(); });
|
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">
|
<div class="widget-search-box aksrt-search-widget">
|
||||||
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
|
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" data-aksrt-search-form>
|
||||||
<div class="widget-search-box__inner">
|
<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="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'); ?>">
|
<input type="hidden" name="aksrt_search_type" value="post">
|
||||||
<i class="fas fa-search"></i>
|
<button type="submit" class="widget-search-box__btn" aria-label="<?php esc_attr_e('搜索', 'aksrt'); ?>">
|
||||||
</button>
|
<i class="fas fa-search"></i>
|
||||||
</div>
|
</button>
|
||||||
</form>
|
</div>
|
||||||
<?php if ($show_history) : ?>
|
</form>
|
||||||
<div class="aksrt-search-widget__history" data-aksrt-search-history>
|
<?php if ($show_history) : ?>
|
||||||
<div class="aksrt-search-widget__kw-title"><?php esc_html_e('搜索历史', 'aksrt'); ?></div>
|
<div class="aksrt-search-widget__history" data-aksrt-search-history>
|
||||||
<div class="aksrt-search-widget__history-list" data-aksrt-search-history-list></div>
|
<div class="aksrt-search-widget__kw-head">
|
||||||
</div>
|
<div class="aksrt-search-widget__kw-title"><?php esc_html_e('搜索历史', 'aksrt'); ?></div>
|
||||||
<?php endif; ?>
|
<button type="button" class="aksrt-search-widget__history-clear" data-aksrt-search-history-clear hidden><?php esc_html_e('清空', 'aksrt'); ?></button>
|
||||||
<?php if ($keywords) : ?>
|
</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">
|
<div class="aksrt-search-widget__keywords">
|
||||||
<?php if ($kw_title !== '') : ?>
|
<?php if ($kw_title !== '') : ?>
|
||||||
<div class="aksrt-search-widget__kw-title"><?php echo esc_html($kw_title); ?></div>
|
<div class="aksrt-search-widget__kw-title"><?php echo esc_html($kw_title); ?></div>
|
||||||
|
|||||||
Reference in new issue
Block a user