feat(nav): rewrite top header to zibll 1:1 DOM/CSS/JS contract
Replace hybrid site-nav/drawer shell with zibll navbar-top layouts 1/2/3, body.mobile-navbar-show drawer, wired NavWalker + aksrt_menu_options meta, nav_folding/chevron, VIP switches, and SPA/PHP schema parity. No dual-class compat paths.
This commit is contained in:
1 parent
b8ee6b6a43
commit
259dbdbe04
28 files changed
+2463
-885
No files matched your search
+189
-113
@@ -1,5 +1,7 @@
|
||||
<?php
|
||||
/**
|
||||
* Nav walker — zibll senior submenu + meta decorations.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
@@ -7,133 +9,207 @@ namespace AKSRT\Frontend;
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
class NavWalker extends Walker_Nav_Menu {
|
||||
class NavWalker extends \Walker_Nav_Menu {
|
||||
|
||||
/**
|
||||
* @var array Decoration settings from aksrt_get_menu_decoration_settings().
|
||||
*/
|
||||
private $settings;
|
||||
/** @var array<string,mixed> */
|
||||
private $settings;
|
||||
|
||||
public function __construct(array $settings = []) {
|
||||
$this->settings = $settings;
|
||||
}
|
||||
/** @var int[] */
|
||||
public static $submenu_ids = [];
|
||||
|
||||
/**
|
||||
* 当前处理的菜单项是否为 Mega Menu 容器
|
||||
* @var bool
|
||||
*/
|
||||
private $is_mega_menu = false;
|
||||
/**
|
||||
* @param array<string,mixed> $settings
|
||||
*/
|
||||
public function __construct(array $settings = []) {
|
||||
$this->settings = $settings ?: (
|
||||
function_exists('aksrt_get_menu_decoration_settings')
|
||||
? aksrt_get_menu_decoration_settings()
|
||||
: ['icon_enabled' => true, 'badge_enabled' => true]
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mega Menu 列数
|
||||
* @var int
|
||||
*/
|
||||
private $mega_columns = 3;
|
||||
/**
|
||||
* Skip WP children when parent uses senior submenu.
|
||||
*/
|
||||
public function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) {
|
||||
if (!empty($element->menu_item_parent) && in_array((int) $element->menu_item_parent, self::$submenu_ids, true)) {
|
||||
return;
|
||||
}
|
||||
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
|
||||
}
|
||||
|
||||
/**
|
||||
* Start level: open submenu with appropriate class based on style.
|
||||
*/
|
||||
public function start_lvl(&$output, $depth = 0, $args = null): void {
|
||||
$indent = str_repeat("\t", $depth);
|
||||
public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0): void {
|
||||
$title = '<span class="menu-item-title">' . $item->title . '</span>';
|
||||
|
||||
if ($this->is_mega_menu && $depth === 0) {
|
||||
// Mega Menu 子菜单容器
|
||||
$output .= "\n{$indent}<ul class=\"sub-menu mega-menu__panel mega-menu__columns-{$this->mega_columns}\">\n";
|
||||
} else {
|
||||
$output .= "\n{$indent}<ul class=\"sub-menu\">\n";
|
||||
}
|
||||
}
|
||||
$icon_enabled = !empty($this->settings['icon_enabled']);
|
||||
$badge_enabled = !empty($this->settings['badge_enabled']);
|
||||
|
||||
/**
|
||||
* Start element: add icon, badge, and classes.
|
||||
*/
|
||||
public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0): void {
|
||||
$indent = ($depth) ? str_repeat("\t", $depth) : '';
|
||||
$icon = function_exists('aksrt_menu_pz') ? (string) aksrt_menu_pz((int) $item->ID, 'icon', '') : '';
|
||||
$badge = function_exists('aksrt_menu_pz') ? (string) aksrt_menu_pz((int) $item->ID, 'badge', '') : '';
|
||||
$badge_class = function_exists('aksrt_menu_pz') ? (string) aksrt_menu_pz((int) $item->ID, 'badge_class', '') : '';
|
||||
|
||||
$classes = (array) $item->classes;
|
||||
$decoration = function_exists('aksrt_get_menu_item_decoration')
|
||||
? aksrt_get_menu_item_decoration($item)
|
||||
: ['icon' => '', 'badge_text' => '', 'badge_type' => 'new', 'submenu_style' => ''];
|
||||
if ($icon && function_exists('aksrt_render_menu_icon')) {
|
||||
$title = aksrt_render_menu_icon($icon, $icon_enabled) . $title;
|
||||
}
|
||||
if ($badge && function_exists('aksrt_render_menu_badge')) {
|
||||
$title .= aksrt_render_menu_badge($badge, $badge_class, $badge_enabled);
|
||||
}
|
||||
|
||||
// 检测 Mega Menu 标记
|
||||
$this->is_mega_menu = false;
|
||||
$this->mega_columns = 3;
|
||||
if ($depth === 0) {
|
||||
foreach ($classes as $cls) {
|
||||
if ($cls === 'mega-menu') {
|
||||
$this->is_mega_menu = true;
|
||||
}
|
||||
if (preg_match('/^mega-menu-columns-(\d)$/', $cls, $m)) {
|
||||
$this->mega_columns = max(2, min(5, (int) $m[1]));
|
||||
}
|
||||
}
|
||||
}
|
||||
$item->title = $title;
|
||||
|
||||
// Build li classes
|
||||
$li_classes = ['menu-item', 'menu-item-' . $item->ID];
|
||||
if (in_array('current-menu-item', $classes, true)) {
|
||||
$li_classes[] = 'current-menu-item';
|
||||
}
|
||||
if (in_array('menu-item-has-children', $classes, true)) {
|
||||
$li_classes[] = 'menu-item-has-children';
|
||||
}
|
||||
if ($this->is_mega_menu) {
|
||||
$li_classes[] = 'mega-menu-item';
|
||||
}
|
||||
$submenu = '';
|
||||
if (function_exists('aksrt_menu_pz') && aksrt_menu_pz((int) $item->ID, 'submenu_s') && (int) $depth === 0) {
|
||||
$submenu = $this->submenu((int) $item->ID);
|
||||
}
|
||||
if ($submenu) {
|
||||
$item->classes = is_array($item->classes) ? $item->classes : [];
|
||||
$item->classes[] = 'menu-item-has-children';
|
||||
self::$submenu_ids[] = (int) $item->ID;
|
||||
}
|
||||
|
||||
// Add decoration classes
|
||||
$li_classes[] = 'aksrt-nav__item';
|
||||
if ($decoration['icon'] !== '' && !empty($this->settings['icon_enabled'])) {
|
||||
$li_classes[] = 'aksrt-nav__item--has-icon';
|
||||
}
|
||||
if ($decoration['badge_text'] !== '' && !empty($this->settings['badge_enabled'])) {
|
||||
$li_classes[] = 'aksrt-nav__item--has-badge';
|
||||
}
|
||||
$hover = $this->settings['hover_effect'] ?? 'underline';
|
||||
if ($hover !== 'none') {
|
||||
$li_classes[] = 'aksrt-nav__item--hover-' . $hover;
|
||||
}
|
||||
parent::start_el($output, $item, $depth, $args, $id);
|
||||
$output .= $submenu;
|
||||
}
|
||||
|
||||
$class_str = implode(' ', array_unique($li_classes));
|
||||
$output .= $indent . '<li class="' . esc_attr($class_str) . '" data-menu-item-id="' . (int) $item->ID . '" data-menu-depth="' . (int) $depth . '"' . (in_array('menu-item-has-children', $classes, true) ? ' data-menu-has-children="1"' : '') . '>';
|
||||
/**
|
||||
* @param int $item_id
|
||||
*/
|
||||
public function submenu(int $item_id): string {
|
||||
$type = function_exists('aksrt_menu_pz') ? sanitize_key((string) aksrt_menu_pz($item_id, 'submenu_type', '')) : '';
|
||||
$method = 'submenu_' . $type;
|
||||
if ($type !== '' && method_exists($this, $method)) {
|
||||
return (string) $this->$method($item_id);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// Build link content
|
||||
$icon_html = '';
|
||||
if ($decoration['icon'] !== '' && !empty($this->settings['icon_enabled'])) {
|
||||
$icon_html = aksrt_render_menu_icon($decoration['icon'], true);
|
||||
}
|
||||
/**
|
||||
* Graphic card mega menu.
|
||||
*/
|
||||
public function submenu_graphic_card(int $item_id): string {
|
||||
$opts = function_exists('aksrt_menu_pz') ? aksrt_menu_pz($item_id, 'graphic_card_opts', []) : [];
|
||||
$opts = is_array($opts) ? $opts : [];
|
||||
$items = is_array($opts['items'] ?? null) ? $opts['items'] : [];
|
||||
if (!$items) {
|
||||
return '';
|
||||
}
|
||||
$arrangement = (string) ($opts['arrangement'] ?? '');
|
||||
$lists = '';
|
||||
$i = 0;
|
||||
foreach ($items as $item) {
|
||||
$item_html = $this->submenu_graphic_card_item(is_array($item) ? $item : []);
|
||||
if ($item_html === '') {
|
||||
continue;
|
||||
}
|
||||
$ani = 'style="--ani-delay:' . ($i * 0.05) . 's;"';
|
||||
$cls = $arrangement === 'swiper' ? 'swiper-slide' : '';
|
||||
$lists .= '<div class="' . esc_attr($cls) . '" ' . $ani . '>' . $item_html . '</div>';
|
||||
$i++;
|
||||
}
|
||||
if ($lists === '') {
|
||||
return '';
|
||||
}
|
||||
$align = (string) ($opts['align'] ?? '');
|
||||
$lists_box = '<div class="graphic-card-items-box flex hh' . ($align ? ' ' . esc_attr($align) : '') . '">' . $lists . '</div>';
|
||||
if ($arrangement === 'swiper') {
|
||||
$lists_box = '<div class="swiper-container swiper-scroll"><div class="swiper-wrapper">'
|
||||
. $lists . '</div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>';
|
||||
}
|
||||
$size = !empty($opts['size']) ? ' size-' . sanitize_key((string) $opts['size']) : '';
|
||||
$img_scale = isset($opts['img_scale']) ? (int) $opts['img_scale'] : 0;
|
||||
$scale_attr = '';
|
||||
if ($img_scale && $img_scale !== 100) {
|
||||
$scale_attr = ' style="--img-scale:' . esc_attr((string) round($img_scale / 100, 2)) . ';"';
|
||||
}
|
||||
return '<div class="sub-menu senior-submenu submenu-graphic-card' . esc_attr($size) . '"' . $scale_attr . '><div class="container">'
|
||||
. $lists_box . '</div></div>';
|
||||
}
|
||||
|
||||
$badge_html = '';
|
||||
if ($decoration['badge_text'] !== '' && !empty($this->settings['badge_enabled'])) {
|
||||
$badge_html = aksrt_render_menu_badge($decoration['badge_text'], $decoration['badge_type'], true);
|
||||
}
|
||||
/**
|
||||
* @param array<string,mixed> $args
|
||||
*/
|
||||
public function submenu_graphic_card_item(array $args): string {
|
||||
if (empty($args['img'])) {
|
||||
return '';
|
||||
}
|
||||
$link_url = !empty($args['link']['url']) ? esc_url((string) $args['link']['url']) : 'javascript:;';
|
||||
$link_title = (string) ($args['link']['text'] ?? '');
|
||||
$link_target = !empty($args['link']['target']) ? ' target="' . esc_attr((string) $args['link']['target']) . '"' : '';
|
||||
$title = (string) ($args['title'] ?? '');
|
||||
if ($title === '' && $link_title !== '') {
|
||||
$title = $link_title;
|
||||
}
|
||||
$badge = !empty($args['badge'])
|
||||
? '<div class="img-badg-box"><span class="badg badg-sm ' . esc_attr((string) ($args['badge_class'] ?? '')) . '">'
|
||||
. esc_html((string) $args['badge']) . '</span></div>'
|
||||
: '';
|
||||
$img_html = '<div class="img-box hover-zoom-img"><img src="' . esc_url((string) $args['img']) . '" alt="" loading="lazy">' . $badge . '</div>';
|
||||
$title_html = $title !== '' ? '<div class="title mt10 text-ellipsis">' . esc_html($title) . '</div>' : '';
|
||||
return '<div class="menu-graphic-card-item"><a href="' . $link_url . '"' . $link_target . '>'
|
||||
. $img_html . $title_html . '</a></div>';
|
||||
}
|
||||
|
||||
// Mega Menu 子项:检查是否有描述文字(用作卡片副标题)
|
||||
$description_html = '';
|
||||
if ($this->is_mega_menu && $depth === 1 && !empty($item->description)) {
|
||||
$description_html = '<span class="mega-menu__item-desc">' . esc_html($item->description) . '</span>';
|
||||
}
|
||||
/**
|
||||
* Multi-column links mega menu.
|
||||
*/
|
||||
public function submenu_multi_column_links(int $item_id): string {
|
||||
$opts = function_exists('aksrt_menu_pz') ? aksrt_menu_pz($item_id, 'multi_column_links_opts', []) : [];
|
||||
$opts = is_array($opts) ? $opts : [];
|
||||
$columns = is_array($opts['columns'] ?? null) ? $opts['columns'] : [];
|
||||
if (!$columns) {
|
||||
return '';
|
||||
}
|
||||
$lists = '';
|
||||
$i = 1;
|
||||
foreach ($columns as $column) {
|
||||
if (!is_array($column)) {
|
||||
continue;
|
||||
}
|
||||
$ani = 'style="--ani-delay:' . ($i * 0.08) . 's;"';
|
||||
$lists .= '<div class="links-column flex-auto" ' . $ani . '>';
|
||||
$lists .= $this->submenu_multi_column_links_item($column, 'column-title');
|
||||
$lists .= '<div class="links-items">';
|
||||
if (!empty($column['items']) && is_array($column['items'])) {
|
||||
foreach ($column['items'] as $item) {
|
||||
if (is_array($item)) {
|
||||
$lists .= $this->submenu_multi_column_links_item($item, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
$lists .= '</div></div>';
|
||||
$i++;
|
||||
}
|
||||
return '<div class="sub-menu senior-submenu submenu-multi-column-links"><div class="container"><div class="links-columns-box flex jsa hh">'
|
||||
. $lists . '</div></div></div>';
|
||||
}
|
||||
|
||||
$atts = [
|
||||
'href' => $item->url,
|
||||
'title' => $item->attr_title ?: '',
|
||||
];
|
||||
|
||||
$link_inner = $icon_html . '<span>' . esc_html($item->title) . '</span>' . $description_html . $badge_html;
|
||||
|
||||
$output .= '<a';
|
||||
foreach ($atts as $attr => $value) {
|
||||
if ('' !== $value) {
|
||||
$output .= ' ' . $attr . '="' . esc_attr($value) . '"';
|
||||
}
|
||||
}
|
||||
$output .= '>' . $link_inner . '</a>';
|
||||
}
|
||||
|
||||
/**
|
||||
* End element.
|
||||
*/
|
||||
public function end_el(&$output, $item, $depth = 0, $args = null): void {
|
||||
$output .= "</li>\n";
|
||||
}
|
||||
/**
|
||||
* @param array<string,mixed> $args
|
||||
*/
|
||||
public function submenu_multi_column_links_item(array $args, string $class = ''): string {
|
||||
$title = (string) ($args['title'] ?? '');
|
||||
$link_url = (string) ($args['link']['url'] ?? '');
|
||||
$link_title = (string) ($args['link']['text'] ?? '');
|
||||
if ($title === '' && $link_title !== '') {
|
||||
$title = $link_title;
|
||||
}
|
||||
if ($title === '') {
|
||||
return '';
|
||||
}
|
||||
$icon = '';
|
||||
if (!empty($args['icon']) && function_exists('aksrt_render_menu_icon')) {
|
||||
$icon = aksrt_render_menu_icon((string) $args['icon'], true);
|
||||
}
|
||||
if (!empty($args['img_icon'])) {
|
||||
$icon = '<img class="menu-item-icon mr3 fa-fw" src="' . esc_url((string) $args['img_icon']) . '" alt="" loading="lazy">';
|
||||
}
|
||||
$title_html = $icon . $title;
|
||||
$class = trim(($class ? $class . ' ' : '') . 'link-item');
|
||||
if ($link_url !== '') {
|
||||
$target = !empty($args['link']['target']) ? ' target="' . esc_attr((string) $args['link']['target']) . '"' : '';
|
||||
return '<div class="' . esc_attr($class) . '"><a href="' . esc_url($link_url) . '"' . $target . '>'
|
||||
. $title_html . '<i class="fa fa-angle-double-right icon-hover-show" aria-hidden="true"></i></a></div>';
|
||||
}
|
||||
return '<div class="' . esc_attr($class) . '"><a href="javascript:;">' . $title_html . '</a></div>';
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user