kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): restore Zibll-like global search panel

Browse Source 
Render full search overlay with types/history/suggestions for tabbar
and desktop header toggle. Open panel on all viewports (not mobile-only)
and wire data-toggle-class/.navbar-search compatibility hooks.
This commit is contained in:
kate522
2026-07-11 18:57:41 +08:00
parent 752b9a93bf
commit bf8b125f3b
5 changed files with 257 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/footer/part-3.css
+41
View File
@@ -301,3 +301,44 @@ html.dark .footer-tabbar {
.site-footer--compact .site-footer__brand {
flex: 1 1 100%;
}
/* Full-viewport search panel open state (desktop + mobile) */
.tabbar-search-overlay[hidden] {
display: none !important;
}
.tabbar-search-overlay.is-open,
.tabbar-search-overlay.show:not([hidden]) {
display: flex;
}
.tabbar-search-overlay__dialog {
max-width: 720px;
margin: 0 auto;
}
@media (min-width: 768px) {
.tabbar-search-overlay {
align-items: flex-start;
padding-top: 8vh;
background: rgba(15, 23, 42, 0.45);
}
.tabbar-search-overlay__dialog {
min-height: auto;
max-height: min(84vh, 860px);
overflow: auto;
border-radius: 20px;
box-shadow: var(--shadow-lg, 0 20px 50px rgba(15, 23, 42, 0.22));
}
.nav-searchbox--desktop {
display: none;
}
.main-search-btn.nav-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.main-search-btn.nav-search-toggle {
display: none;
}
}
assets/js/core/search.js
+49 -17
View File
@@ -248,24 +248,33 @@
}, 180);
}
function isMobileSearchMode() {
return window.innerWidth < 768 && !!mobileOverlay;
}
function setOpen(open) {
if (isMobileSearchMode()) {
if (open) {
mobileOverlay.removeAttribute("hidden");
document.body.classList.add("tabbar-search-open");
if (mobileInput) mobileInput.focus();
if (historyEnabled) renderHistory();
if (suggestionsEnabled) requestSuggestions();
} else {
mobileOverlay.setAttribute("hidden", "");
document.body.classList.remove("tabbar-search-open");
if (suggestionsSection) suggestionsSection.hidden = true;
if (!mobileOverlay) return;
var toggles = document.querySelectorAll(".main-search-btn, .nav-search-toggle, [data-aksrt-open-search]");
if (open) {
mobileOverlay.removeAttribute("hidden");
mobileOverlay.setAttribute("aria-hidden", "false");
mobileOverlay.classList.add("is-open", "show");
document.body.classList.add("tabbar-search-open");
if (mobileInput) {
try { mobileInput.focus(); } catch (e) {}
}
return;
if (historyEnabled) {
if (aksrtData.isLoggedIn) {
requestHistorySync("get", null, function (items) { renderHistory(items); });
} else {
renderHistory();
}
}
if (suggestionsEnabled) requestSuggestions();
toggles.forEach(function (btn) { btn.setAttribute("aria-expanded", "true"); });
} else {
mobileOverlay.setAttribute("hidden", "");
mobileOverlay.setAttribute("aria-hidden", "true");
mobileOverlay.classList.remove("is-open", "show");
document.body.classList.remove("tabbar-search-open");
if (suggestionsSection) suggestionsSection.hidden = true;
toggles.forEach(function (btn) { btn.setAttribute("aria-expanded", "false"); });
}
}
@@ -280,6 +289,22 @@
});
}
document.querySelectorAll(".main-search-btn, .nav-search-toggle, [data-aksrt-open-search]").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.preventDefault();
setOpen(true);
});
});
// Zibll-compatible data-toggle-class for .navbar-search
document.addEventListener("click", function (e) {
var toggle = e.target.closest('[data-toggle-class][data-target=".navbar-search"], [data-toggle-class][data-target=".main-search"]');
if (!toggle) return;
e.preventDefault();
var isOpen = mobileOverlay && !mobileOverlay.hasAttribute("hidden");
setOpen(!isOpen);
});
if (historyClear) {
historyClear.addEventListener("click", function () {
if (aksrtData.isLoggedIn) {
@@ -317,6 +342,13 @@
});
});
// Panel type buttons should also sync desktop/drawer forms
document.querySelectorAll("#tabbar-search-types [data-search-type], [data-aksrt-search-form] [data-search-type]").forEach(function (button) {
button.addEventListener("click", function () {
setSearchType(button.getAttribute("data-search-type") || "post");
});
});
if (mobileInput) {
mobileInput.addEventListener("input", requestSuggestions);
}
@@ -351,7 +383,7 @@
}
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && isMobileSearchMode() && mobileOverlay && !mobileOverlay.hasAttribute("hidden")) {
if (e.key === "Escape" && mobileOverlay && !mobileOverlay.hasAttribute("hidden")) {
setOpen(false);
}
});
footer.php
+8
View File
@@ -459,6 +459,14 @@ if ($floating_enabled) :
</nav>
<?php endif; ?>
<?php
// Global search panel (desktop header button + mobile tabbar search).
$aksrt_search_panel = AKSRT_DIR . '/templates/parts/search-panel.php';
if (is_readable($aksrt_search_panel)) {
include $aksrt_search_panel;
}
?>
<?php if (is_active_sidebar('all_bottom_fluid')) : ?>
<div class="fluid-widget-wrap">
<?php dynamic_sidebar('all_bottom_fluid'); ?>
header.php
+15 -3
View File
@@ -218,8 +218,20 @@ if (!empty($aksrt_bg_styles)) {
<?php endif; ?>
<div class="nav-actions nav-actions--primary">
<?php if (!empty($aksrt_header_settings['search_enabled'])) : ?>
<form role="search" method="get" class="nav-searchbox" action="<?php echo esc_url(home_url('/')); ?>" data-aksrt-search-form="desktop" data-default-search-type="<?php echo esc_attr($aksrt_search_type); ?>" data-default-category="<?php echo esc_attr((string) $aksrt_search_category_id); ?>">
<?php if (!empty($aksrt_header_settings['search_enabled'])) : ?>
<button
type="button"
class="icon-btn main-search-btn nav-search-toggle"
id="site-nav-search-toggle"
aria-label="<?php esc_attr_e('打开搜索', 'aksrt'); ?>"
aria-controls="tabbar-search-overlay"
aria-expanded="false"
data-toggle-class
data-target=".navbar-search"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</button>
<form role="search" method="get" class="nav-searchbox nav-searchbox--desktop" action="<?php echo esc_url(home_url('/')); ?>" data-aksrt-search-form="desktop" data-default-search-type="<?php echo esc_attr($aksrt_search_type); ?>" data-default-category="<?php echo esc_attr((string) $aksrt_search_category_id); ?>">
<input type="hidden" name="aksrt_search_type" value="<?php echo esc_attr($aksrt_search_type); ?>">
<?php if ($aksrt_search_category_enabled) : ?>
<input type="hidden" name="aksrt_category" value="<?php echo esc_attr((string) $aksrt_search_category_id); ?>">
@@ -230,7 +242,7 @@ if (!empty($aksrt_bg_styles)) {
</form>
<?php endif; ?>
<div class="nav-actions__cta">
<div class="nav-actions__cta">
<?php if ($aksrt_can_publish) : ?>
<a class="btn-primary" href="<?php echo esc_url(admin_url('post-new.php')); ?>">
<i class="fas fa-pen-nib" aria-hidden="true"></i>
templates/parts/search-panel.php
+144
View File
@@ -0,0 +1,144 @@
<?php
/**
* Global search panel (desktop + mobile).
*
* DOM contracts for assets/js/core/search.js and footer-tabbar search tab:
* - #tabbar-search-overlay (also #nav-search-panel for shell config)
* - #tabbar-search-input / #tabbar-search-close / #tabbar-search-type
* - #tabbar-search-types [data-search-type]
* - history / suggestions sections
*
* @package AKSRT
*/
defined('ABSPATH') || exit;
if (class_exists('AKSRT_Settings')) {
$header_nav = AKSRT_Settings::get_header_nav_settings();
if (empty($header_nav['search_enabled'])) {
return;
}
}
$search_state = function_exists('aksrt_get_search_form_state')
? aksrt_get_search_form_state()
: [
'type' => 'post',
'types' => ['post' => __('文章', 'aksrt')],
'category_id' => 0,
'category_enabled' => false,
'categories' => [],
];
$search_type = (string) ($search_state['type'] ?? 'post');
$search_type_options = is_array($search_state['types'] ?? null) ? $search_state['types'] : ['post' => __('文章', 'aksrt')];
$search_category_enabled = !empty($search_state['category_enabled']);
$search_category_id = (int) ($search_state['category_id'] ?? 0);
$search_categories = is_array($search_state['categories'] ?? null) ? $search_state['categories'] : [];
$search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_get_search_placeholder() : __('开启精彩搜索', 'aksrt');
$search_hot_keywords = function_exists('aksrt_get_search_hot_keywords') ? aksrt_get_search_hot_keywords() : [];
$history_enabled = function_exists('aksrt_search_history_enabled') ? aksrt_search_history_enabled() : true;
$suggestions_enabled = function_exists('aksrt_search_suggestions_enabled') ? aksrt_search_suggestions_enabled() : false;
$popular_title = class_exists('AKSRT_Settings') ? AKSRT_Settings::search_popular_title() : __('热门搜索', 'aksrt');
?>
<div
id="tabbar-search-overlay"
class="tabbar-search-overlay main-search navbar-search nav-search-panel"
data-aksrt-shell="search-panel"
data-nav-search-panel="nav-search-panel"
hidden
aria-hidden="true"
>
<div class="tabbar-search-overlay__dialog" role="dialog" aria-modal="true" aria-labelledby="tabbar-search-title">
<div class="tabbar-search-overlay__head">
<strong id="tabbar-search-title"><?php esc_html_e('搜索', 'aksrt'); ?></strong>
<button type="button" class="tabbar-search-overlay__close" id="tabbar-search-close" aria-label="<?php esc_attr_e('关闭搜索', 'aksrt'); ?>">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<form
role="search"
method="get"
class="tabbar-search-overlay__form search-form"
action="<?php echo esc_url(home_url('/')); ?>"
data-aksrt-search-form="panel"
data-default-search-type="<?php echo esc_attr($search_type); ?>"
data-default-category="<?php echo esc_attr((string) $search_category_id); ?>"
>
<input type="hidden" name="aksrt_search_type" id="tabbar-search-type" value="<?php echo esc_attr($search_type); ?>">
<?php if ($search_category_enabled) : ?>
<input type="hidden" name="aksrt_category" value="<?php echo esc_attr((string) $search_category_id); ?>">
<?php endif; ?>
<span class="tabbar-search-overlay__icon" aria-hidden="true"><i class="fas fa-search"></i></span>
<label class="screen-reader-text" for="tabbar-search-input"><?php esc_html_e('搜索关键词', 'aksrt'); ?></label>
<input
id="tabbar-search-input"
class="search-input"
type="search"
name="s"
value="<?php echo esc_attr(get_search_query()); ?>"
placeholder="<?php echo esc_attr($search_placeholder); ?>"
autocomplete="off"
enterkeyhint="search"
>
<button type="submit" class="tabbar-search-overlay__submit"><?php esc_html_e('搜索', 'aksrt'); ?></button>
</form>
<?php if (!empty($search_type_options)) : ?>
<div class="tabbar-search-overlay__types" id="tabbar-search-types" aria-label="<?php esc_attr_e('搜索类型', 'aksrt'); ?>">
<?php foreach ($search_type_options as $type_key => $type_label) : ?>
<button
type="button"
class="tabbar-search-overlay__type<?php echo $search_type === $type_key ? ' is-active' : ''; ?>"
data-search-type="<?php echo esc_attr((string) $type_key); ?>"
><?php echo esc_html((string) $type_label); ?></button>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if ($search_category_enabled && !empty($search_categories)) : ?>
<div class="tabbar-search-overlay__section">
<label class="tabbar-search-overlay__label" for="tabbar-search-category"><?php esc_html_e('分类', 'aksrt'); ?></label>
<select class="nav-searchbox__category" id="tabbar-search-category" data-search-category-select>
<option value="0"><?php esc_html_e('全部分类', 'aksrt'); ?></option>
<?php foreach ($search_categories as $search_category) : ?>
<option value="<?php echo esc_attr((string) $search_category->term_id); ?>"<?php selected($search_category_id, (int) $search_category->term_id); ?>>
<?php echo esc_html($search_category->name); ?>
</option>
<?php endforeach; ?>
</select>
</div>
<?php endif; ?>
<?php if (!empty($search_hot_keywords)) : ?>
<div class="tabbar-search-overlay__section">
<div class="tabbar-search-overlay__section-head">
<span class="tabbar-search-overlay__label"><?php echo esc_html($popular_title); ?></span>
</div>
<?php aksrt_render_search_hot_keywords($search_hot_keywords, 'aksrt-search-hot-keywords'); ?>
</div>
<?php endif; ?>
<?php if ($history_enabled) : ?>
<div class="tabbar-search-overlay__section" id="tabbar-search-history-section">
<div class="tabbar-search-overlay__section-head">
<span class="tabbar-search-overlay__label"><?php esc_html_e('历史搜索', 'aksrt'); ?></span>
<button type="button" class="tabbar-search-overlay__clear" id="tabbar-search-history-clear" style="display:none;">
<?php esc_html_e('清空', 'aksrt'); ?>
</button>
</div>
<div class="tabbar-search-overlay__history" id="tabbar-search-history"></div>
</div>
<?php endif; ?>
<?php if ($suggestions_enabled) : ?>
<div class="tabbar-search-overlay__section" id="tabbar-search-suggestions-section" hidden>
<div class="tabbar-search-overlay__section-head">
<span class="tabbar-search-overlay__label"><?php esc_html_e('搜索建议', 'aksrt'); ?></span>
</div>
<div class="tabbar-search-overlay__suggestions" id="tabbar-search-suggestions"></div>
</div>
<?php endif; ?>
</div>
</div>