refactor(widget): remove search history display
This commit is contained in:
1 parent
389ab4f19a
commit
7127f4c3a8
3 files changed
+4
-220
No files matched your search
@@ -409,24 +409,8 @@
|
|||||||
.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 + history */
|
/* Search keywords */
|
||||||
.aksrt-search-widget__keywords { margin-top: 10px; }
|
.aksrt-search-widget__keywords { margin-top: 10px; }
|
||||||
.aksrt-search-widget__field { position: relative; }
|
|
||||||
.aksrt-search-widget__history {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 20;
|
|
||||||
top: calc(100% + 6px);
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
max-height: 240px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid var(--border-color, rgba(0, 0, 0, .08));
|
|
||||||
border-radius: var(--main-radius, 8px);
|
|
||||||
background: var(--main-bg-color, #fff);
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
|
|
||||||
}
|
|
||||||
.aksrt-search-widget__history[hidden] { display: none; }
|
|
||||||
.aksrt-search-widget__kw-head {
|
.aksrt-search-widget__kw-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -440,15 +424,6 @@
|
|||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.aksrt-search-widget__kw-head .aksrt-search-widget__kw-title { margin-bottom: 0; }
|
.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-refresh {
|
.aksrt-search-widget__kw-refresh {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -478,26 +453,6 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.aksrt-search-widget__history-list { display: grid; gap: 2px; }
|
|
||||||
.aksrt-search-widget__history-item {
|
|
||||||
display: block;
|
|
||||||
padding: 7px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: inherit;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.35;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.aksrt-search-widget__history-item:hover,
|
|
||||||
.aksrt-search-widget__history-item:focus-visible { background: var(--surface-2, #f3f4f6); color: var(--color-primary, #3b82f6); }
|
|
||||||
.aksrt-search-widget__history-empty {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--muted-2-color, #999);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Product list widgets (batch6) */
|
/* Product list widgets (batch6) */
|
||||||
.aksrt-product-widget { margin-bottom: 8px; }
|
.aksrt-product-widget { margin-bottom: 8px; }
|
||||||
.aksrt-product-widget__grid {
|
.aksrt-product-widget__grid {
|
||||||
|
|||||||
@@ -392,16 +392,6 @@
|
|||||||
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,
|
|
||||||
});
|
|
||||||
initWidgetKeywordRefresh();
|
initWidgetKeywordRefresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -465,133 +455,5 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function initWidgetSearchHistory(ctx) {
|
|
||||||
var panels = document.querySelectorAll("[data-aksrt-search-history]");
|
|
||||||
if (!panels.length) return;
|
|
||||||
if (!ctx.historyEnabled) {
|
|
||||||
panels.forEach(function (el) {
|
|
||||||
el.hidden = true;
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var activePanel = null;
|
|
||||||
|
|
||||||
function escapeHtml(s) {
|
|
||||||
return String(s == null ? "" : s)
|
|
||||||
.replace(/&/g, "&")
|
|
||||||
.replace(/</g, "<")
|
|
||||||
.replace(/>/g, ">")
|
|
||||||
.replace(/"/g, """);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 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) {
|
|
||||||
if (activePanel === panel) paint(panel, items);
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
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(panel, items);
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
ctx.writeHistory([]);
|
|
||||||
paint(panel, []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("pointerdown", function (e) {
|
|
||||||
if (activePanel && !activePanel.parentElement.contains(e.target)) close(activePanel);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
window.AksrtFrontend.register("aksrt-search-panel", function () { initSearchPanel(); });
|
window.AksrtFrontend.register("aksrt-search-panel", function () { initSearchPanel(); });
|
||||||
})();
|
})();
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* Search box with hot keywords and search history.
|
* Search box with hot keywords.
|
||||||
*
|
*
|
||||||
* @package AKSRT
|
* @package AKSRT
|
||||||
*/
|
*/
|
||||||
@@ -16,7 +16,7 @@ class SearchWidget extends \WP_Widget {
|
|||||||
|
|
||||||
public function __construct() {
|
public function __construct() {
|
||||||
parent::__construct('aksrt_search', esc_html__('AKSRT 搜索', 'aksrt'), [
|
parent::__construct('aksrt_search', esc_html__('AKSRT 搜索', 'aksrt'), [
|
||||||
'description' => esc_html__('搜索框:热门关键词与搜索历史。', 'aksrt'),
|
'description' => esc_html__('搜索框:热门关键词。', 'aksrt'),
|
||||||
'classname' => 'widget_aksrt_search',
|
'classname' => 'widget_aksrt_search',
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
@@ -33,19 +33,14 @@ class SearchWidget extends \WP_Widget {
|
|||||||
$placeholder = aksrt_get_search_placeholder();
|
$placeholder = aksrt_get_search_placeholder();
|
||||||
}
|
}
|
||||||
$show_kw = !empty($instance['show_keywords']);
|
$show_kw = !empty($instance['show_keywords']);
|
||||||
$show_history = !empty($instance['show_history']);
|
|
||||||
$kw_title = sanitize_text_field((string) ($instance['keywords_title'] ?? __('热门搜索', 'aksrt')));
|
$kw_title = sanitize_text_field((string) ($instance['keywords_title'] ?? __('热门搜索', 'aksrt')));
|
||||||
$keyword_limit = max(1, min(50, (int) ($instance['keyword_limit'] ?? 12)));
|
$keyword_limit = max(1, min(50, (int) ($instance['keyword_limit'] ?? 12)));
|
||||||
$history_limit = max(1, min(8, (int) ($instance['history_limit'] ?? 8)));
|
|
||||||
// Affix helper (shared layer sidebar_affix).
|
// Affix helper (shared layer sidebar_affix).
|
||||||
$affix = function_exists('aksrt_widget_affix_attrs') ? aksrt_widget_affix_attrs($instance) : ['class' => '', 'attr' => ''];
|
$affix = function_exists('aksrt_widget_affix_attrs') ? aksrt_widget_affix_attrs($instance) : ['class' => '', 'attr' => ''];
|
||||||
|
|
||||||
$search_type = function_exists('aksrt_get_default_search_type')
|
$search_type = function_exists('aksrt_get_default_search_type')
|
||||||
? aksrt_get_default_search_type()
|
? aksrt_get_default_search_type()
|
||||||
: 'post';
|
: 'post';
|
||||||
$history_enabled = function_exists('aksrt_search_history_enabled')
|
|
||||||
? aksrt_search_history_enabled()
|
|
||||||
: true;
|
|
||||||
|
|
||||||
$keywords = [];
|
$keywords = [];
|
||||||
if ($show_kw) {
|
if ($show_kw) {
|
||||||
@@ -96,30 +91,10 @@ class SearchWidget extends \WP_Widget {
|
|||||||
placeholder="<?php echo esc_attr($placeholder); ?>"
|
placeholder="<?php echo esc_attr($placeholder); ?>"
|
||||||
value="<?php echo esc_attr(get_search_query()); ?>"
|
value="<?php echo esc_attr(get_search_query()); ?>"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
aria-haspopup="true"
|
|
||||||
aria-controls="<?php echo $uid; ?>-history"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
>
|
||||||
<button type="submit" class="widget-search-box__btn" aria-label="<?php esc_attr_e('搜索', 'aksrt'); ?>">
|
<button type="submit" class="widget-search-box__btn" aria-label="<?php esc_attr_e('搜索', 'aksrt'); ?>">
|
||||||
<i class="fas fa-search" aria-hidden="true"></i>
|
<i class="fas fa-search" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
<?php if ($show_history && $history_enabled) : ?>
|
|
||||||
<div
|
|
||||||
id="<?php echo $uid; ?>-history"
|
|
||||||
class="aksrt-search-widget__history"
|
|
||||||
data-aksrt-search-history
|
|
||||||
data-history-limit="<?php echo esc_attr((string) $history_limit); ?>"
|
|
||||||
role="region"
|
|
||||||
aria-label="<?php esc_attr_e('搜索历史', 'aksrt'); ?>"
|
|
||||||
hidden
|
|
||||||
>
|
|
||||||
<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 role="list"></div>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -173,8 +148,7 @@ class SearchWidget extends \WP_Widget {
|
|||||||
</label>
|
</label>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('show_keywords')); ?>" value="1" <?php checked(!empty($instance['show_keywords'])); ?>> <?php esc_html_e('显示热门关键词', 'aksrt'); ?></label><br>
|
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('show_keywords')); ?>" value="1" <?php checked(!empty($instance['show_keywords'])); ?>> <?php esc_html_e('显示热门关键词', 'aksrt'); ?></label>
|
||||||
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('show_history')); ?>" value="1" <?php checked(!empty($instance['show_history'])); ?>> <?php esc_html_e('显示搜索历史', 'aksrt'); ?></label>
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label><?php esc_html_e('关键词标题', 'aksrt'); ?>
|
<label><?php esc_html_e('关键词标题', 'aksrt'); ?>
|
||||||
@@ -191,11 +165,6 @@ class SearchWidget extends \WP_Widget {
|
|||||||
<input class="tiny-text" type="number" min="1" max="50" name="<?php echo esc_attr($this->get_field_name('keyword_limit')); ?>" value="<?php echo esc_attr((string) max(1, min(50, (int) ($instance['keyword_limit'] ?? 12)))); ?>">
|
<input class="tiny-text" type="number" min="1" max="50" name="<?php echo esc_attr($this->get_field_name('keyword_limit')); ?>" value="<?php echo esc_attr((string) max(1, min(50, (int) ($instance['keyword_limit'] ?? 12)))); ?>">
|
||||||
</label>
|
</label>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
<label><?php esc_html_e('搜索历史最多显示数量', 'aksrt'); ?>
|
|
||||||
<input class="tiny-text" type="number" min="1" max="8" name="<?php echo esc_attr($this->get_field_name('history_limit')); ?>" value="<?php echo esc_attr((string) max(1, min(8, (int) ($instance['history_limit'] ?? 8)))); ?>">
|
|
||||||
</label>
|
|
||||||
</p>
|
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -204,11 +173,9 @@ class SearchWidget extends \WP_Widget {
|
|||||||
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
|
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
|
||||||
'placeholder' => sanitize_text_field((string) ($new_instance['placeholder'] ?? '')),
|
'placeholder' => sanitize_text_field((string) ($new_instance['placeholder'] ?? '')),
|
||||||
'show_keywords' => !empty($new_instance['show_keywords']) ? 1 : 0,
|
'show_keywords' => !empty($new_instance['show_keywords']) ? 1 : 0,
|
||||||
'show_history' => !empty($new_instance['show_history']) ? 1 : 0,
|
|
||||||
'keywords_title' => sanitize_text_field((string) ($new_instance['keywords_title'] ?? '')),
|
'keywords_title' => sanitize_text_field((string) ($new_instance['keywords_title'] ?? '')),
|
||||||
'keywords' => sanitize_textarea_field((string) ($new_instance['keywords'] ?? '')),
|
'keywords' => sanitize_textarea_field((string) ($new_instance['keywords'] ?? '')),
|
||||||
'keyword_limit' => max(1, min(50, (int) ($new_instance['keyword_limit'] ?? 12))),
|
'keyword_limit' => max(1, min(50, (int) ($new_instance['keyword_limit'] ?? 12))),
|
||||||
'history_limit' => max(1, min(8, (int) ($new_instance['history_limit'] ?? 8))),
|
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user