feat(frontend): restore Zibll-like global search panel
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 committed
1 parent
752b9a93bf
commit
bf8b125f3b
5 files changed
+257
-20
No files matched your search
@@ -301,3 +301,44 @@ html.dark .footer-tabbar {
|
|||||||
.site-footer--compact .site-footer__brand {
|
.site-footer--compact .site-footer__brand {
|
||||||
flex: 1 1 100%;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
+49
-17
@@ -248,24 +248,33 @@
|
|||||||
}, 180);
|
}, 180);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isMobileSearchMode() {
|
|
||||||
return window.innerWidth < 768 && !!mobileOverlay;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setOpen(open) {
|
function setOpen(open) {
|
||||||
if (isMobileSearchMode()) {
|
if (!mobileOverlay) return;
|
||||||
if (open) {
|
var toggles = document.querySelectorAll(".main-search-btn, .nav-search-toggle, [data-aksrt-open-search]");
|
||||||
mobileOverlay.removeAttribute("hidden");
|
if (open) {
|
||||||
document.body.classList.add("tabbar-search-open");
|
mobileOverlay.removeAttribute("hidden");
|
||||||
if (mobileInput) mobileInput.focus();
|
mobileOverlay.setAttribute("aria-hidden", "false");
|
||||||
if (historyEnabled) renderHistory();
|
mobileOverlay.classList.add("is-open", "show");
|
||||||
if (suggestionsEnabled) requestSuggestions();
|
document.body.classList.add("tabbar-search-open");
|
||||||
} else {
|
if (mobileInput) {
|
||||||
mobileOverlay.setAttribute("hidden", "");
|
try { mobileInput.focus(); } catch (e) {}
|
||||||
document.body.classList.remove("tabbar-search-open");
|
|
||||||
if (suggestionsSection) suggestionsSection.hidden = true;
|
|
||||||
}
|
}
|
||||||
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) {
|
if (historyClear) {
|
||||||
historyClear.addEventListener("click", function () {
|
historyClear.addEventListener("click", function () {
|
||||||
if (aksrtData.isLoggedIn) {
|
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) {
|
if (mobileInput) {
|
||||||
mobileInput.addEventListener("input", requestSuggestions);
|
mobileInput.addEventListener("input", requestSuggestions);
|
||||||
}
|
}
|
||||||
@@ -351,7 +383,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("keydown", function (e) {
|
document.addEventListener("keydown", function (e) {
|
||||||
if (e.key === "Escape" && isMobileSearchMode() && mobileOverlay && !mobileOverlay.hasAttribute("hidden")) {
|
if (e.key === "Escape" && mobileOverlay && !mobileOverlay.hasAttribute("hidden")) {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -459,6 +459,14 @@ if ($floating_enabled) :
|
|||||||
</nav>
|
</nav>
|
||||||
<?php endif; ?>
|
<?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')) : ?>
|
<?php if (is_active_sidebar('all_bottom_fluid')) : ?>
|
||||||
<div class="fluid-widget-wrap">
|
<div class="fluid-widget-wrap">
|
||||||
<?php dynamic_sidebar('all_bottom_fluid'); ?>
|
<?php dynamic_sidebar('all_bottom_fluid'); ?>
|
||||||
|
|||||||
+15
-3
@@ -218,8 +218,20 @@ if (!empty($aksrt_bg_styles)) {
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="nav-actions nav-actions--primary">
|
<div class="nav-actions nav-actions--primary">
|
||||||
<?php if (!empty($aksrt_header_settings['search_enabled'])) : ?>
|
<?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); ?>">
|
<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); ?>">
|
<input type="hidden" name="aksrt_search_type" value="<?php echo esc_attr($aksrt_search_type); ?>">
|
||||||
<?php if ($aksrt_search_category_enabled) : ?>
|
<?php if ($aksrt_search_category_enabled) : ?>
|
||||||
<input type="hidden" name="aksrt_category" value="<?php echo esc_attr((string) $aksrt_search_category_id); ?>">
|
<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>
|
</form>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="nav-actions__cta">
|
<div class="nav-actions__cta">
|
||||||
<?php if ($aksrt_can_publish) : ?>
|
<?php if ($aksrt_can_publish) : ?>
|
||||||
<a class="btn-primary" href="<?php echo esc_url(admin_url('post-new.php')); ?>">
|
<a class="btn-primary" href="<?php echo esc_url(admin_url('post-new.php')); ?>">
|
||||||
<i class="fas fa-pen-nib" aria-hidden="true"></i>
|
<i class="fas fa-pen-nib" aria-hidden="true"></i>
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in new issue
Block a user