Controls_Manager::COLOR,
// 'scheme' => [
// 'type' => Color::get_type(),
// 'value' => Color::COLOR_4,
// ],
'default' => '#ffffff',
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu li a:hover,
{{WRAPPER}} .wpr-mobile-nav-menu .menu-item-has-children > a:hover:after,
{{WRAPPER}} .wpr-mobile-nav-menu li a.wpr-active-menu-item,
{{WRAPPER}} .wpr-mobile-nav-menu .menu-item-has-children.current_page_item > a:hover:after' => 'color: {{VALUE}};',
],
]
);
$this->add_control(
'mobile_menu_bg_color_focus',
[
'label' => esc_html__( 'Background Color', 'wpr-addons' ),
'type' => Controls_Manager::COLOR,
// 'scheme' => [
// 'type' => Color::get_type(),
// 'value' => Color::COLOR_3,
// ],
'default' => '#605BE5',
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu a:hover,
{{WRAPPER}} .wpr-mobile-nav-menu a.wpr-active-menu-item' => 'background-color: {{VALUE}};',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'mobile_menu_highlight',
[
'label' => esc_html__( 'Highlight Active Item', 'wpr-addons' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'yes',
'return_value' => 'yes'
]
);
$this->add_control(
'mobile_menu_padding_hr',
[
'label' => esc_html__( 'Item Horizontal Spacing', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => 10,
],
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu a' => 'padding-left: {{SIZE}}{{UNIT}}; padding-right: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .wpr-mobile-nav-menu .menu-item-has-children > a:after' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: {{SIZE}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->add_control(
'mobile_menu_padding_vr',
[
'label' => esc_html__( 'Item Vertical Spacing', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => 10,
],
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu .wpr-mobile-menu-item' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};',
]
]
);
$this->add_control(
'mobile_menu_divider',
[
'label' => esc_html__( 'Item Divider', 'wpr-addons' ),
'type' => Controls_Manager::SWITCHER,
'prefix_class' => 'wpr-mobile-divider-',
'default' => 'yes',
'return_value' => 'yes',
'separator' => 'before',
]
);
$this->add_control(
'mobile_menu_divider_color',
[
'label' => esc_html__( 'Divider Color', 'wpr-addons' ),
'type' => Controls_Manager::COLOR,
'default' => '#e8e8e8',
'selectors' => [
'{{WRAPPER}}.wpr-mobile-divider-yes .wpr-mobile-nav-menu a' => 'border-bottom-color: {{VALUE}};',
],
'condition' => [
'mobile_menu_divider' => 'yes',
],
]
);
$this->add_control(
'mobile_menu_divider_height',
[
'label' => esc_html__( 'Divider Height', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 1,
'max' => 10,
],
],
'default' => [
'size' => 1,
],
'selectors' => [
'{{WRAPPER}}.wpr-mobile-divider-yes .wpr-mobile-nav-menu a' => 'border-bottom-width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'mobile_menu_divider' => 'yes',
],
]
);
$this->add_control(
'mobile_menu_sub_font_size',
[
'label' => esc_html__( 'Sub Item Font Size', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 1,
'max' => 30,
],
],
'default' => [
'size' => 12,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu .wpr-mobile-sub-menu-item' => 'font-size: {{SIZE}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->add_control(
'mobile_menu_sub_padding_vr',
[
'label' => esc_html__( 'Sub Item Vertical Spacing', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 1,
'max' => 30,
],
],
'default' => [
'size' => 5,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu .wpr-mobile-sub-menu-item' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};',
]
]
);
$this->add_responsive_control(
'mobile_menu_offset',
[
'label' => esc_html__( 'Dropdown Offset', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'px' => [
'min' => 1,
'min' => 50,
],
'default' => [
'size' => 10,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-nav-menu' => 'margin-top: {{SIZE}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->end_controls_section(); // End Controls Section
// Section: Toggle Button ----
$this->start_controls_section(
'section_style_toggle_button',
[
'label' => esc_html__( 'Toggle Button', 'wpr-addons' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'mob_menu_display!' => 'none',
],
]
);
$this->start_controls_tabs( 'tabs_toggle_style' );
$this->start_controls_tab(
'tab_toggle_btn_style_normal',
[
'label' => esc_html__( 'Normal', 'wpr-addons' ),
]
);
$this->add_control(
'toggle_btn_color',
[
'label' => esc_html__( 'Color', 'wpr-addons' ),
'type' => Controls_Manager::COLOR,
'default' => '#333333',
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle' => 'border-color: {{VALUE}};',
'{{WRAPPER}} .wpr-mobile-toggle-text' => 'color: {{VALUE}};',
'{{WRAPPER}} .wpr-mobile-toggle-line' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'toggle_btn_bg_color',
[
'label' => esc_html__( 'Background Color', 'wpr-addons' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle' => 'background-color: {{VALUE}};',
],
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_toggle_btn_style_hover',
[
'label' => esc_html__( 'Hover', 'wpr-addons' ),
]
);
$this->add_control(
'toggle_btn_color_hover',
[
'label' => esc_html__( 'Color', 'wpr-addons' ),
'type' => Controls_Manager::COLOR,
'default' => '#605BE5',
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle:hover' => 'border-color: {{VALUE}};',
'{{WRAPPER}} .wpr-mobile-toggle:hover .wpr-mobile-toggle-text' => 'color: {{VALUE}};',
'{{WRAPPER}} .wpr-mobile-toggle:hover .wpr-mobile-toggle-line' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'toggle_btn_bg_color_hover',
[
'label' => esc_html__( 'Background Color', 'wpr-addons' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle:hover' => 'background-color: {{VALUE}};',
],
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'toggle_btn_lines_height',
[
'label' => esc_html__( 'Lines Height', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 1,
'max' => 10,
],
],
'default' => [
'size' => 4,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle-line' => 'height: {{SIZE}}{{UNIT}};',
],
'separator' => 'before',
'condition' => [
'toggle_btn_style' => ['hamburger', 'pro-tx'],
],
]
);
$this->add_control(
'toggle_btn_line_space',
[
'label' => esc_html__( 'Space Between Lines', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 1,
'max' => 20,
],
],
'default' => [
'size' => 6,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle-line' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
'condition' => [
'toggle_btn_style' => ['hamburger', 'pro-tx'],
],
]
);
$this->add_control(
'toggle_btn_width',
[
'label' => esc_html__( 'Button Width', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 20,
'max' => 150,
],
],
'default' => [
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle' => 'width: {{SIZE}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->add_control(
'toggle_btn_padding',
[
'label' => esc_html__( 'Button Padding', 'wpr-addons' ),
'type' => Controls_Manager::DIMENSIONS,
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'toggle_btn_border_width',
[
'label' => esc_html__( 'Button Border Width', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 10,
],
],
'default' => [
'size' => 0,
],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle' => 'border-width: {{SIZE}}{{UNIT}};',
]
]
);
$this->add_control(
'toggle_btn_border_radius',
[
'label' => esc_html__( 'Button Border Radius', 'wpr-addons' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%' ],
'selectors' => [
'{{WRAPPER}} .wpr-mobile-toggle' => 'border-radius: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section(); // End Controls Section
}
public function custom_menu_item_classes( $atts, $item, $args, $depth ) {
$settings = $this->get_active_settings();
// Main or Mobile
if ( strpos( $args->menu_id, 'mobile-menu' ) === false ) {
$main = 'wpr-menu-item wpr-pointer-item';
$sub = 'wpr-sub-menu-item';
$active = $settings['menu_item_highlight'] === 'yes' ? ' wpr-active-menu-item' : '';
} else {
$main = 'wpr-mobile-menu-item';
$sub = 'wpr-mobile-sub-menu-item';
$active = $settings['mobile_menu_highlight'] === 'yes' ? ' wpr-active-menu-item' : '';
}
$classes = $depth ? $sub : $main;
if ( in_array( 'current-menu-item', $item->classes ) ) {
$classes .= $active;
}
if ( empty( $atts['class'] ) ) {
$atts['class'] = $classes;
} else {
$atts['class'] .= ' '. $classes;
}
return $atts;
}
public function custom_sub_menu_class( $classes ) {
$classes[] = 'wpr-sub-menu';
return $classes;
}
public function custom_menu_items( $output, $item, $depth, $args ) {
$settings = $this->get_active_settings();
if ( strpos( $args->menu_class, 'wpr-nav-menu' ) !== false ) {
if ( in_array( 'menu-item-has-children', $item->classes ) ) {
$item_class = 'wpr-menu-item wpr-pointer-item';
if ( in_array( 'current-menu-item', $item->classes ) || in_array( 'current-menu-ancestor', $item->classes ) ) {
$item_class .= ' wpr-active-menu-item';
}
// Sub Menu Classes
if ( $depth > 0 ) {
$item_class = 'wpr-sub-menu-item';
if ( in_array( 'current-menu-item', $item->classes ) || in_array( 'current-menu-ancestor', $item->classes ) ) {
$item_class .= ' wpr-active-menu-item';
}
}
// Add Sub Menu Icon
$output ='
'. esc_html($item->title);
if ( $depth > 0 ) {
if ( 'inline' === $settings['menu_items_submenu_position'] ) {
$output .='';
} else {
$output .='';
}
} else {
if ( 'absolute' === $settings['menu_items_submenu_position'] ) {
$output .='';
} else {
$output .='';
}
}
$output .='';
}
}
return $output;
}
protected function render() {
$available_menus = $this->get_available_menus();
if ( ! $available_menus ) {
return;
}
// Get Settings
$settings = $this->get_active_settings();
$args = [
'echo' => false,
'menu' => $settings['menu_select'],
'menu_class' => 'wpr-nav-menu',
'menu_id' => 'menu-'. $this->get_nav_menu_index() .'-'. $this->get_id(),
'container' => '',
'fallback_cb' => '__return_empty_string',
];
// Custom Menu Items
add_filter( 'walker_nav_menu_start_el', [ $this, 'custom_menu_items' ], 10, 4 );
// Add Custom Filters
add_filter( 'nav_menu_link_attributes', [ $this, 'custom_menu_item_classes' ], 10, 4 );
add_filter( 'nav_menu_submenu_css_class', [ $this, 'custom_sub_menu_class' ] );
add_filter( 'nav_menu_item_id', '__return_empty_string' );
// Generate Menu HTML
$menu_html = wp_nav_menu( $args );
// Generate Mobile Menu HTML
$args['menu_id'] = 'mobile-menu-'. $this->get_nav_menu_index() .'-'. $this->get_id();
$args['menu_class'] = 'wpr-mobile-nav-menu';
$moible_menu_html = wp_nav_menu( $args );
// Remove Custom Filters
remove_filter( 'nav_menu_link_attributes', [ $this, 'custom_menu_item_classes' ] );
remove_filter( 'nav_menu_submenu_css_class', [ $this, 'custom_sub_menu_class' ] );
remove_filter( 'walker_nav_menu_start_el', [ $this, 'custom_menu_items' ] );
remove_filter( 'nav_menu_item_id', '__return_empty_string' );
if ( empty( $menu_html ) ) {
return;
}
if ( ! wpr_fs()->can_use_premium_code() ) {
$settings['menu_layout'] = 'horizontal';
$settings['toggle_btn_style'] = 'hamburger';
}
// Main Menu
echo '';
// Mobile Menu
echo '';
}
}
