# uicore-elements/1.3.18/includes/widgets/theme-builder/advanced-menu.php UiCore Elements – Free widgets and templates for Elementor, version 1.3.18. 3,583 lines. - Page: https://pluginprobe.com/plugins/uicore-elements/1.3.18/code/includes/widgets/theme-builder/advanced-menu.php - Raw: https://pluginprobe.com/plugins/uicore-elements/1.3.18/raw/includes/widgets/theme-builder/advanced-menu.php - Modified: 2026-09-24T17:19:12+00:00 Line numbers below start at 1. Link to a line or a range by appending a fragment to the page URL, for example `https://pluginprobe.com/plugins/uicore-elements/1.3.18/code/includes/widgets/theme-builder/advanced-menu.php#L10-L20`. ```php [ 'custom_condition' => $this->is_edit_mode() ], 'advanced-menu-fullscreen-layout' => [ 'condition' => [ 'breakpoint_selector!' => 'none' ] ], 'advanced-menu-website-blur' => [ 'condition' => [ 'dropdown_animation' => 'blur', ] ], 'advanced-menu-canvas-dropdown-expand' => [ 'condition' => [ 'fullscreen_canvas_dropdown' => 'expand' ] ], 'advanced-menu-canvas-dropdown-slide' => [ 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide' ] ], ]; $hover_animations = ['underline', 'button', 'magnet', 'focus', 'text_flip']; foreach ($hover_animations as $animation) { $styles["advanced-menu-hover-$animation"] = [ 'condition' => [ 'hover_interaction' => $animation, ] ]; } return $styles; } public function get_scripts() { return [ 'advanced-menu', ]; } public function has_widget_inner_wrapper(): bool { // TODO: remove after Optmized Markup experiment is merged to the core return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup'); } protected function get_default_children_elements() { return [ [ 'elType' => 'container', 'settings' => [ '_title' => __('Home', 'uicore-elements'), ], ], [ 'elType' => 'container', 'settings' => [ '_title' => __('Services', 'uicore-elements'), ], ], [ 'elType' => 'container', 'settings' => [ '_title' => __('Contact', 'uicore-elements'), ], ], [ 'elType' => 'container', 'settings' => [ '_title' => __('Fullscreen Menu Widget', 'uicore-elements'), ], ], ]; } protected function get_default_repeater_title_setting_key() { return 'item_title'; } protected function get_default_children_title() { /* translators: %d: Menu item index */ return esc_html__('Item #%d', 'uicore-elements'); } protected function get_default_children_placeholder_selector() { return '.ui-e-menu-list'; } protected function get_default_children_container_placeholder_selector() { return '.ui-e-menu-item'; } protected function register_controls() { if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) { $this->nesting_fallback('controls'); return; } if (!Plugin::$instance->experiments->is_feature_active('e_optimized_markup')) { $this->start_controls_section( 'section_tabs', [ 'label' => esc_html__('Tabs', 'uicore-elements'), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'tabs_alert', [ 'type' => \Elementor\Controls_Manager::ALERT, 'alert_type' => 'danger', 'heading' => esc_html__('Feature Disabled.', 'uicore-elements'), 'content' => sprintf( /* translators: 1: opening url tags 2: closing url tag */ __('Please, %1$s click here %2$s and enable the Optimized Markup experiment in Elementor settings', 'uicore-elements'), '', '' ) ] ); $this->end_controls_section(); return; } $start_logic = is_rtl() ? 'end' : 'start'; $end_logic = is_rtl() ? 'start' : 'end'; $list = '{{WRAPPER}} > nav > .ui-e-menu > .ui-e-menu-list'; $item = $list . ' > .ui-e-menu-item'; $link = $item . ' > a'; $default_nav = '{{WRAPPER}}:not(.ui-e-fullscreen-mode) > nav'; $fullscreen_canvas = '{{WRAPPER}}.ui-e-fullscreen-mode > nav'; $this->start_controls_section( 'section_layout', [ 'label' => esc_html__('Layout', 'uicore-elements'), ] ); $this->add_control( 'menu_name', [ 'label' => esc_html__('Menu Name', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Menu', 'uicore-elements'), ] ); $repeater = new Repeater(); $repeater->add_control( 'item_convert_to_widget', [ 'label' => esc_html__('Convert to Widget', 'uicore-elements'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'render_type' => 'template', ] ); $repeater->add_control( 'widget_area_alert', [ 'type' => Controls_Manager::ALERT, 'alert_type' => 'info', 'content' => esc_html__('You have enabled the Fullscreen Menu Widget area through this option. Keep one per menu. To customize it, switch to the device where your default menu transforms into the fullscreen menu, and open it.', 'uicore-elements'), 'condition' => [ 'item_convert_to_widget' => 'yes', ], ] ); $repeater->add_control( 'item_title', [ 'label' => esc_html__('Title', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Item Title', 'uicore-elements'), 'dynamic' => [ 'active' => true, ], 'render_type' => 'template', 'label_block' => true, 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_link', [ 'label' => esc_html__('Link', 'uicore-elements'), 'type' => Controls_Manager::URL, 'placeholder' => esc_html__('Paste URL or type', 'uicore-elements'), 'dynamic' => [ 'active' => true, ], 'render_type' => 'template', 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_submenu', [ 'label' => esc_html__('Has submenu', 'uicore-elements'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'render_type' => 'template', 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_submenu_width', [ 'label' => esc_html__('Submenu Alignment', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => 'item-width', 'options' => [ 'widget-width' => esc_html__('Widget', 'uicore-elements'), 'item-width' => esc_html__('Menu Item', 'uicore-elements'), 'full-width' => esc_html__('Full Width', 'uicore-elements') ], 'description' => esc_html__('Set the width and container placement of this item submenu container.', 'uicore-elements'), 'render_type' => 'template', 'condition' => [ 'item_submenu' => 'yes', 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_icon', [ 'label' => esc_html__('Icon', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'render_type' => 'template', 'label_block' => false, 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_image', [ 'label' => esc_html__('Image', 'uicore-elements'), 'type' => \Elementor\Controls_Manager::MEDIA, 'render_type' => 'template', 'label_block' => true, 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_badge', [ 'label' => esc_html__('Badge', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'render_type' => 'template', 'label_block' => true, 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'item_description', [ 'label' => esc_html__('Description', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'render_type' => 'template', 'label_block' => true, 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $repeater->add_control( 'element_id', [ 'label' => esc_html__('CSS ID', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'style_transfer' => false, 'condition' => [ 'item_convert_to_widget!' => 'yes', ], ] ); $this->add_control( 'menu_items', [ 'label' => esc_html__('Menu Items', 'uicore-elements'), 'type' => Control_Nested_Repeater::CONTROL_TYPE, 'fields' => $repeater->get_controls(), 'default' => [ [ 'item_title' => esc_html__('Home', 'uicore-elements'), ], [ 'item_title' => esc_html__('Services', 'uicore-elements'), 'item_submenu' => 'yes', ], [ 'item_title' => esc_html__('Contact', 'uicore-elements'), ], [ 'item_convert_to_widget' => 'yes', ], ], 'title_field' => '{{{ item_convert_to_widget === "yes" ? "Fullscreen Menu Widget" : item_title }}}', ] ); $this->add_control( 'submenu_trigger', [ 'label' => esc_html__('Sub menu trigger', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => 'hover', 'options' => [ 'hover' => esc_html__('Hover', 'uicore-elements'), 'click' => esc_html__('Click', 'uicore-elements'), ], 'frontend_available' => true, ] ); $this->add_control( 'highlight_current', [ 'label' => esc_html__('Highlight Current Item', 'uicore-elements'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'render_type' => 'template', ] ); $this->add_control( 'highlight_warning', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__('To change the current item highlight styles, go to Style tab > Menu Items group > Active tab.', 'uicore-elements'), 'content_classes' => 'elementor-control-field-description', 'condition' => [ 'highlight_current' => 'yes' ] ] ); $this->end_controls_section(); $this->start_controls_section('default_menu_section', [ 'label' => esc_html__('Default Menu', 'uicore-elements'), ]); $this->add_control( 'item_layout', [ 'label' => esc_html__('Item Layout', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => 'horizontal', 'options' => [ 'horizontal' => esc_html__('Horizontal', 'uicore-elements'), 'vertical' => esc_html__('Vertical', 'uicore-elements'), ], 'prefix_class' => 'ui-e-layout-', 'frontend_available' => true, ] ); $this->add_responsive_control( 'item_align', [ 'label' => esc_html__('Items Alignment', 'uicore-elements'), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__('Start', 'uicore-elements'), 'icon' => "eicon-align-$start_logic-h", ], 'center' => [ 'title' => esc_html__('Center', 'uicore-elements'), 'icon' => 'eicon-align-center-h', ], 'end' => [ 'title' => esc_html__('End', 'uicore-elements'), 'icon' => "eicon-align-$end_logic-h", ], 'space-between' => [ 'title' => esc_html__('Space Between', 'uicore-elements'), 'icon' => 'eicon-justify-space-between-h', ], 'space-around' => [ 'title' => esc_html__('Space Around', 'uicore-elements'), 'icon' => 'eicon-justify-space-around-h', ], 'space-evenly' => [ 'title' => esc_html__('Space Evenly', 'uicore-elements'), 'icon' => 'eicon-justify-space-evenly-h', ], ], 'label_block' => true, 'selectors' => [ $list => 'justify-content: {{VALUE}};', ], 'condition' => [ 'item_layout' => 'horizontal', ], ] ); $this->add_responsive_control( 'item_vertical_align', [ 'label' => esc_html__('Items Alignment', 'uicore-elements'), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__('Start', 'uicore-elements'), 'icon' => "eicon-align-$start_logic-h", ], 'center' => [ 'title' => esc_html__('Center', 'uicore-elements'), 'icon' => 'eicon-align-center-h', ], 'end' => [ 'title' => esc_html__('End', 'uicore-elements'), 'icon' => "eicon-align-$end_logic-h", ], ], 'selectors' => [ $link => 'justify-content: {{VALUE}};' ], 'condition' => [ 'item_layout' => 'vertical', ], ] ); $this->add_control( 'dropdown_icon', [ 'label' => esc_html__('Dropdown Icon', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-caret-down', 'library' => 'fa-solid', ], 'skin' => 'inline', 'label_block' => false, ] ); $this->add_control( 'dropdown_icon_active', [ 'label' => esc_html__('Dropdown Icon Active', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-caret-up', 'library' => 'fa-solid', ], 'skin' => 'inline', 'label_block' => false, ] ); $this->end_controls_section(); $this->start_controls_section('fullscreen_menu_section', [ 'label' => esc_html__('Fullscreen Layout', 'uicore-elements'), ]); // Build breakpoint options $dropdown_options = [ 'none' => esc_html__('None', 'uicore-elements'), ]; $excluded_breakpoints = [ 'laptop', 'tablet_extra', 'widescreen', ]; foreach (Plugin::$instance->breakpoints->get_active_breakpoints() as $breakpoint_key => $breakpoint_instance) { // Exclude the larger breakpoints from the dropdown selector. if (in_array($breakpoint_key, $excluded_breakpoints, true)) { continue; } $dropdown_options[$breakpoint_key] = sprintf( /* translators: 1: Breakpoint label, 2: `>` character, 3: Breakpoint value. */ esc_html__('%1$s (%2$s %3$dpx)', 'uicore-elements'), $breakpoint_instance->get_label(), '>', $breakpoint_instance->get_value() ); } $dropdown_options['desktop'] = esc_html__('Desktop', 'uicore-elements'); $this->add_control( 'breakpoint_selector', [ 'label' => esc_html__('Breakpoint', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'options' => $dropdown_options, 'default' => 'tablet', 'prefix_class' => 'ui-e-menu-', 'render_type' => 'template', 'frontend_available' => true, ] ); $this->add_control( 'button_style', [ 'label' => esc_html__('Button Layout', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'options' => [ 'default' => esc_html__('Default', 'uicore-elements'), 'classic' => esc_html__('Classic', 'uicore-elements'), 'minimalist' => esc_html__('Minimalist', 'uicore-elements'), 'creative' => esc_html__('Creative', 'uicore-elements'), 'text' => esc_html__('Text', 'uicore-elements'), 'custom' => esc_html__('Custom', 'uicore-elements'), ], 'render_type' => 'template', 'description' => esc_html__('To enable the custom icon selectors, you need to set "Custom" as option.', 'uicore-elements'), 'default' => 'default', 'prefix_class' => 'ui-e-fullscreen-button-icon-', 'frontend_available' => true, 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'button_text_open', [ 'label' => esc_html__('Open Text', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Menu', 'uicore-elements'), 'render_type' => 'template', 'condition' => [ 'button_style' => 'text', 'breakpoint_selector!' => 'none' ], ] ); $this->add_control( 'button_text_close', [ 'label' => esc_html__('Close Text', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Close', 'uicore-elements'), 'render_type' => 'template', 'condition' => [ 'button_style' => 'text', 'breakpoint_selector!' => 'none' ], 'separator' => 'after', ] ); $this->add_control( 'fullscreen_menu_open_icon', [ 'label' => esc_html__('Open Button Icon', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-bars', 'library' => 'fa-solid', ], 'skin' => 'inline', 'label_block' => false, 'condition' => [ 'button_style' => 'custom', 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'fullscreen_menu_close_icon', [ 'label' => esc_html__('Close Icon', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-window-close', 'library' => 'fa-solid', ], 'skin' => 'inline', 'label_block' => false, 'condition' => [ 'button_style' => 'custom', 'breakpoint_selector!' => 'none' ], 'separator' => 'after' ] ); $this->add_control( 'dropdown_fullscreen_icon', [ 'label' => esc_html__('Dropdown Icon', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-caret-right', 'library' => 'fa-solid', ], 'skin' => 'inline', 'label_block' => false, ] ); $this->add_control( 'dropdown_fullscreen_icon_active', [ 'label' => esc_html__('Dropdown Icon Active', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-caret-left', 'library' => 'fa-solid', ], 'skin' => 'inline', 'label_block' => false, ] ); $this->add_control( 'widget_area_only', [ 'label' => esc_html__('Widget Area Only', 'uicore-elements'), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'render_type' => 'template', 'description' => esc_html__('When enabled, the fullscreen menu will only display the content of the assigned widget area, hiding menu items. To use this option, you need to convert one of your menu items to widget.', 'uicore-elements'), 'condition' => [ 'breakpoint_selector!' => 'none' ], ] ); $this->add_control( 'canvas_separator', [ 'label' => esc_html__('Canvas', 'uicore-elements'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'fullscreen_canvas_items_alignment', [ 'label' => esc_html__('Items alignment', 'uicore-elements'), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__('Start', 'uicore-elements'), 'icon' => "eicon-align-$start_logic-h", ], 'center' => [ 'title' => esc_html__('Center', 'uicore-elements'), 'icon' => 'eicon-align-center-h', ], 'end' => [ 'title' => esc_html__('End', 'uicore-elements'), 'icon' => "eicon-align-$end_logic-h", ], ], 'default' => 'end', 'toggle' => false, 'selectors' => [ '{{WRAPPER}}.ui-e-fullscreen-mode > nav > .ui-e-menu > .ui-e-menu-list > .ui-e-menu-item > a' => 'justify-content: {{VALUE}};', ], 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'fullscreen_canvas_container_alignment', [ 'label' => esc_html__('Container Alignment', 'uicore-elements'), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__('Left', 'uicore-elements'), 'icon' => "eicon-arrow-left", ], 'end' => [ 'title' => esc_html__('Right', 'uicore-elements'), 'icon' => 'eicon-arrow-right', ], ], 'default' => 'end', 'selectors_dictionary' => [ 'start' => 'start; --ui-e-fullscreen-canvas-offset-x: -100%; --ui-e-fullscreen-canvas-panels-shift-x: -150%; --ui-e-fullscreen-canvas-submenu-shift-x: 100%; --ui-e-fullscreen-canvas-submenu-left: 50%; --ui-e-fullscreen-canvas-submenu-right: auto;', 'end' => 'end; --ui-e-fullscreen-canvas-offset-x: 100%; --ui-e-fullscreen-canvas-panels-shift-x: 150%; --ui-e-fullscreen-canvas-submenu-shift-x: -100%; --ui-e-fullscreen-canvas-submenu-left: auto; --ui-e-fullscreen-canvas-submenu-right: 50%;', ], 'toggle' => false, 'selectors' => [ $fullscreen_canvas => 'justify-content: {{VALUE}};', ], 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->end_controls_section(); $this->start_controls_section('section_animations', [ 'label' => esc_html__('Animations', 'uicore-elements'), ]); $this->add_control( 'default_animations', [ 'label' => esc_html__('Default Menu', 'uicore-elements'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'hover_interaction', [ 'label' => esc_html__('Hover Interaction', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__('None', 'uicore-elements'), 'underline' => esc_html__('Underline', 'uicore-elements'), 'button' => esc_html__('Button', 'uicore-elements'), 'text_flip' => esc_html__('Text Flip', 'uicore-elements'), 'focus' => esc_html__('Focus', 'uicore-elements'), 'magnet' => esc_html__('Magnet Button', 'uicore-elements'), ], 'render_type' => 'template', 'prefix_class' => 'ui-e-hover-', 'frontend_available' => true, ] ); $this->add_control( 'hover_interaction_button_notice', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__('To update the hover interaction colors, go to the Style tab > Menu Items section > Normal tab controls.', 'uicore-elements'), 'content_classes' => 'elementor-control-field-description', 'condition' => [ 'hover_interaction' => ['button', 'magnet'], ], ] ); $this->add_control( 'interaction_color', [ 'label' => esc_html__('Interaction Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--ui-e-hover-interaction-color: {{VALUE}};', ], 'condition' => [ 'hover_interaction' => 'underline', ], ] ); $this->add_control( 'dropdown_animation', [ 'label' => esc_html__('Dropdown Animation', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__('None', 'uicore-elements'), 'fade' => esc_html__('Fade', 'uicore-elements'), 'down' => esc_html__('Fade Down', 'uicore-elements'), 'up' => esc_html__('Fade Up', 'uicore-elements'), 'left' => esc_html__('Fade Left', 'uicore-elements'), 'scale' => esc_html__('Scale', 'uicore-elements'), // 'scale_bg' => esc_html__('Scale Background', 'uicore-elements'), 'blur' => esc_html__('Website Blur', 'uicore-elements'), ], 'render_type' => 'template', 'prefix_class' => 'ui-e-dropdown-animation-', ] ); $this->add_control( 'blur_target_selector', [ 'label' => esc_html__('Blur Target Selector', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'default' => '#content', 'placeholder' => '#content', 'description' => esc_html__('HTML selector for the element(s) that should be blurred when a submenu is active. Separate multiple selectors with a comma.', 'uicore-elements'), 'condition' => [ 'dropdown_animation' => 'blur', ], 'frontend_available' => true, ] ); // Scale bg control // $this->add_control( // 'menu_spacing', // [ // 'label' => esc_html__('Bottom Spacing', 'uicore-elements'), // 'type' => \Elementor\Controls_Manager::SLIDER, // 'size_units' => ['px', 'em', 'rem', 'custom'], // 'range' => [ // 'px' => [ // 'min' => 0, // 'max' => 500, // 'step' => 1, // ], // ], // 'default' => [ // 'unit' => 'px', // 'size' => 50, // ], // 'selectors' => [ // '{{WRAPPER}}' => 'margin-bottom: {{SIZE}}{{UNIT}};', // ], // 'condition' => [ // 'dropdown_animation' => 'scale_bg', // ] // ] // ); $this->add_control( 'fullscreen_animation', [ 'label' => esc_html__('Fullscreen Menu', 'uicore-elements'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'fullscreen_canvas_animation', [ 'label' => esc_html__('Entrance Animation', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__('Fade', 'uicore-elements'), 'ui-e-fullscreen-canvas-animation-slide-along' => esc_html__('Slide Along', 'uicore-elements'), 'ui-e-fullscreen-canvas-animation-slide-top' => esc_html__('Slide on Top', 'uicore-elements'), 'ui-e-fullscreen-canvas-animation-expand' => esc_html__('Expand', 'uicore-elements'), ], 'prefix_class' => '', 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'fullscreen_canvas_dropdown', [ 'label' => esc_html__('Dropdown Animation', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'default' => 'slide', 'options' => [ 'expand' => esc_html__('Expand', 'uicore-elements'), 'slide' => esc_html__('Slide', 'uicore-elements') ], 'prefix_class' => 'ui-e-fullscreen-canvas-dropdown-animation-', 'condition' => [ 'breakpoint_selector!' => 'none' ] ] ); $this->add_control( 'back_button_text', [ 'label' => esc_html__('"Back" Button Text', 'uicore-elements'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Back', 'uicore-elements'), 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', 'breakpoint_selector!' => 'none' ], 'frontend_available' => true ] ); $this->add_control( 'back_button_icon', [ 'label' => esc_html__('Icon', 'uicore-elements'), 'type' => Controls_Manager::ICONS, 'skin' => 'inline', 'render_type' => 'template', 'label_block' => false, 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', 'breakpoint_selector!' => 'none' ], 'frontend_available' => true, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_menu_style', [ 'label' => esc_html__('Navigation', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_background', 'selector' => $default_nav, ] ); $this->add_responsive_control( 'menu_padding', [ 'label' => esc_html__('Padding', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => 'px', 'top' => 10, 'right' => 10, 'bottom' => 10, 'left' => 10, ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-menu-padding-top: {{TOP}}{{UNIT}}; --ui-e-menu-padding-right: {{RIGHT}}{{UNIT}}; --ui-e-menu-padding-bottom: {{BOTTOM}}{{UNIT}}; --ui-e-menu-padding-left: {{LEFT}}{{UNIT}};', '{{WRAPPER}} > nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'menu_radius', [ 'label' => esc_html__('Border Radius', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ $default_nav => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_border', 'selector' => $default_nav, ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_box_shadow', 'selector' => $default_nav, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_menu_items_style', [ 'label' => esc_html__('Menu Items', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'menu_item_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, ], 'selector' => $link . ' > .ui-e-text', ] ); $this->add_responsive_control( 'menu_items_gap', [ 'label' => esc_html__('Items gap', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', 'custom'], 'range' => [ 'px' => [ 'max' => 150, ], 'em' => [ 'max' => 20, ], 'rem' => [ 'max' => 20, ], ], 'default' => [ 'size' => 20, 'unit' => 'px', ], 'tablet_default' => [ 'size' => 20, 'unit' => 'px', ], 'mobile_default' => [ 'size' => 10, 'unit' => 'px', ], 'selectors' => [ $list => 'gap: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'menu_item_padding', [ 'label' => esc_html__('Padding', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ $link => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'menu_item_border_radius', [ 'label' => esc_html__('Border Radius', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-menu-item-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->start_controls_tabs('menu_items_style_tabs'); $this->start_controls_tab( 'menu_items_style_tab_normal', [ 'label' => esc_html__('Normal', 'uicore-elements'), ] ); $this->add_responsive_control( 'menu_item_color', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $link => 'color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'menu_item_background_color', [ 'label' => esc_html__('Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'default' => 'rgba(0, 0, 0, 0)', 'selectors' => [ '{{WRAPPER}}' => '--ui-e-menu-item-background: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_item_box_shadow', 'selector' => $link . ', ' . $list . ':before', ] ); $this->end_controls_tab(); $animations_exceptions = [ 'terms' => [ [ 'name' => 'hover_interaction', 'operator' => '!in', 'value' => ['magnet', 'button'], ], ], ]; $this->start_controls_tab( 'menu_items_style_tab_hover', [ 'label' => esc_html__('Hover', 'uicore-elements'), ] ); $this->add_responsive_control( 'menu_item_color_hover', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . ' > a:hover' => 'color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'menu_item_background_color_hover', [ 'label' => esc_html__('Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . ' > a:hover' => 'background-color: {{VALUE}};', ], 'conditions' => $animations_exceptions ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_item_box_shadow_hover', 'selector' => $link . ':hover', 'conditions' => $animations_exceptions ] ); $this->end_controls_tab(); $this->start_controls_tab( 'menu_items_style_tab_active', [ 'label' => esc_html__('Active', 'uicore-elements'), ] ); $this->add_responsive_control( 'menu_item_color_active', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . '.ui-e-open > a,' . $item . '.ui-e-current > a' => 'color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'menu_item_background_color_active', [ 'label' => esc_html__('Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . '.ui-e-open > a,' . $item . '.ui-e-current > a' => 'background-color: {{VALUE}};', ], 'conditions' => $animations_exceptions ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_item_box_shadow_active', 'selector' => $item . '.ui-e-open > a,' . $item . '.ui-e-current > a', 'conditions' => $animations_exceptions ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'icon_section_style', [ 'label' => esc_html__('Icon', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'icon_position', [ 'label' => esc_html__('Position', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'options' => [ 'left' => esc_html__('Left', 'uicore-elements'), 'right' => esc_html__('Right', 'uicore-elements'), ], 'selectors_dictionary' => [ 'left' => 'margin-inline-end: var(--ui-e-icon-spacing, 8px); order: 0;', 'right' => 'margin-inline-start: var(--ui-e-icon-spacing, 8px); order: 1;', ], 'default' => 'left', 'selectors' => [ $link . ' .ui-e-menu-item-icon' => '{{VALUE}}', ], ] ); $this->add_responsive_control( 'icon_size', [ 'label' => esc_html__('Size', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 16, ], 'size_units' => ['px', 'em', 'rem'], 'selectors' => [ $link . ' > .ui-e-svg-wrap.ui-e-menu-item-icon' => 'font-size: {{SIZE}}{{UNIT}};', $link . ' > .ui-e-svg-wrap.ui-e-menu-item-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_spacing', [ 'label' => esc_html__('Spacing', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', 'vw', 'custom'], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 5, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-icon-spacing: {{SIZE}}{{UNIT}};', ], ] ); $this->start_controls_tabs('icon_style_states'); $this->start_controls_tab( 'icon_section_normal', [ 'label' => esc_html__('Normal', 'uicore-elements'), ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $link . ' > .ui-e-svg-wrap.ui-e-menu-item-icon > *' => 'color: {{VALUE}}; fill: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'icon_section_hover', [ 'label' => esc_html__('Hover', 'uicore-elements'), ] ); $this->add_control( 'icon_color_hover', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $link . ':hover > .ui-e-svg-wrap.ui-e-menu-item-icon > *' => 'color: {{VALUE}}; fill: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'icon_section_active', [ 'label' => esc_html__('Active', 'uicore-elements'), ] ); $this->add_control( 'icon_color_active', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . '.ui-e-open > a > .ui-e-svg-wrap.ui-e-menu-item-icon > *' => 'color: {{VALUE}}; fill: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'image_section_style', [ 'label' => esc_html__('Image', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'image_position', [ 'label' => esc_html__('Position', 'uicore-elements'), 'type' => Controls_Manager::SELECT, 'options' => [ 'left' => esc_html__('Left', 'uicore-elements'), 'right' => esc_html__('Right', 'uicore-elements'), ], 'selectors_dictionary' => [ 'left' => 'margin-inline-end: var(--ui-e-image-spacing, 8px); order: 0;', 'right' => 'margin-inline-start: var(--ui-e-image-spacing, 8px); order: 1;', ], 'default' => 'left', 'selectors' => [ $link . ' .ui-e-menu-item-image' => '{{VALUE}}', ], ] ); $this->add_responsive_control( 'image_size', [ 'label' => esc_html__('Size', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 16, ], 'size_units' => ['px', 'em', 'rem'], 'selectors' => [ $link . ' > .ui-e-menu-item-image' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'image_spacing', [ 'label' => esc_html__('Spacing', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', 'vw', 'custom'], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 5, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-image-spacing: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_dropdown_indicator_style', [ 'label' => esc_html__('Dropdown Indicator', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'terms' => [ [ 'name' => 'dropdown_icon[value]', 'operator' => '!==', 'value' => '', ], ], ], ] ); $this->add_responsive_control( 'dropdown_icon_size', [ 'label' => esc_html__('Size', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => 'px', 'size' => 16, ], 'selectors' => [ $link . ' > .ui-e-dropdown-icon i' => 'font-size: {{SIZE}}{{UNIT}};', $link . ' > .ui-e-dropdown-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'dropdown_icon_spacing', [ 'label' => esc_html__('Spacing', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', 'custom'], 'default' => [ 'size' => 5, 'unit' => 'px', ], 'selectors' => [ $link . ' > .ui-e-dropdown-icon' => 'margin-inline-start: {{SIZE}}{{UNIT}};', ], ] ); $this->start_controls_tabs('dropdown_icon_tabs'); $this->start_controls_tab('dropdown_icon_tab_normal', [ 'label' => 'Normal', ]); $this->add_control( 'dropdown_icon_color_normal', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . ':not(.ui-e-open) > a > .ui-e-dropdown-icon i' => 'color: {{VALUE}};', $item . ':not(.ui-e-open) > a > .ui-e-dropdown-icon svg' => 'fill: {{VALUE}};', ], 'default' => 'var(--e-global-color-uicore_primary)', ] ); $this->end_controls_tab(); $this->start_controls_tab('dropdown_icon_tab_hover', [ 'label' => 'Hover', ]); $this->add_control( 'dropdown_icon_color_hover', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . ' > a:hover > .ui-e-dropdown-icon i' => 'color: {{VALUE}};', $item . ' > a:hover > .ui-e-dropdown-icon svg' => 'fill: {{VALUE}};', ], 'default' => 'var(--e-global-color-uicore_primary)', ] ); $this->end_controls_tab(); $this->start_controls_tab('dropdown_icon_tab_active', [ 'label' => 'Active', ]); $this->add_control( 'dropdown_icon_color_active', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $item . '.ui-e-open > a > .ui-e-dropdown-opened i' => 'color: {{VALUE}};', $item . '.ui-e-open > a > .ui-e-dropdown-opened svg' => 'fill: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_badge_style', [ 'label' => esc_html__('Badge', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'badge_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], 'selector' => $link . ' .ui-e-badge', 'default' => [ 'font_size' => [ 'unit' => 'px', 'size' => 14, ], ], ] ); $this->add_control( 'badge_color', [ 'label' => esc_html__('Text Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--ui-e-badge-color: {{VALUE}};', ], ] ); $this->add_control( 'badge_background_color', [ 'label' => esc_html__('Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'default' => 'var(--e-global-color-uicore_primary)', 'selectors' => [ $link . ' .ui-e-badge' => 'background-color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'badge_v_offset', [ 'label' => esc_html__('Vertical Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', '%', 'custom'], 'range' => [ 'px' => [ 'min' => -200, 'max' => 200, ], 'em' => [ 'min' => -20, 'max' => 20, ], 'rem' => [ 'min' => -20, 'max' => 20, ], '%' => [ 'min' => -200, 'max' => 200, ], ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-badge-offset-y: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'badge_h_offset', [ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', '%', 'custom'], 'range' => [ 'px' => [ 'min' => -200, 'max' => 200, ], 'em' => [ 'min' => -20, 'max' => 20, ], 'rem' => [ 'min' => -20, 'max' => 20, ], '%' => [ 'min' => -200, 'max' => 200, ], ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-badge-offset-x: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'badge_padding', [ 'label' => esc_html__('Padding', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ $link . ' .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'badge_border_radius', [ 'label' => esc_html__('Border Radius', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ $link . ' .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_description_style', [ 'label' => esc_html__('Description', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'description_alignment', [ 'label' => esc_html__('Alignment', 'uicore-elements'), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__('Left', 'uicore-elements'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__('Center', 'uicore-elements'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__('Right', 'uicore-elements'), 'icon' => 'eicon-text-align-right', ], ], 'default' => 'left', 'selectors_dictionary' => [ 'left' => 'left: var(--ui-e-description-offset, 0);', 'center' => 'left: calc(50% + var(--ui-e-description-offset, 0)); transform: translateX(-50%);', 'right' => 'right: var(--ui-e-description-offset, 0);', ], 'selectors' => [ $link . ' .ui-e-description' => '{{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'description_typography', 'selector' => $link . ' .ui-e-description', ] ); $this->add_control( 'description_color', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ $link . ' .ui-e-description' => 'color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'description_v_offset', [ 'label' => esc_html__('Vertical Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', '%', 'custom'], 'range' => [ 'px' => [ 'min' => -200, 'max' => 200, ], 'em' => [ 'min' => -20, 'max' => 20, ], 'rem' => [ 'min' => -20, 'max' => 20, ], '%' => [ 'min' => -100, 'max' => 100, ], ], 'default' => [ 'size' => -10, 'unit' => 'px', ], 'selectors' => [ $link . ' .ui-e-description' => 'bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'description_h_offset', [ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', '%', 'custom'], 'range' => [ 'px' => [ 'min' => -200, 'max' => 200, ], 'em' => [ 'min' => -20, 'max' => 20, ], 'rem' => [ 'min' => -20, 'max' => 20, ], '%' => [ 'min' => -100, 'max' => 100, ], ], 'default' => [ 'size' => 0, 'unit' => 'px', ], 'selectors' => [ $link . ' .ui-e-description' => '--ui-e-description-offset: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); // Explore the UX of creating/editing menus without style controls to globally adjust nested containers // $this->start_controls_section('section_content_style', [ // 'label' => esc_html__('Sub menu', 'uicore-elements'), // 'tab' => Controls_Manager::TAB_STYLE, // ]); // $this->add_group_control( // Group_Control_Background::get_type(), // [ // 'name' => 'content_background_color', // 'types' => ['classic', 'gradient'], // 'exclude' => ['image'], // 'selector' => $item . ' > .ui-e-submenu', // 'fields_options' => [ // 'color' => [ // 'label' => esc_html__('Background Color', 'uicore-elements'), // ], // ], // ] // ); // $this->add_group_control( // Group_Control_Border::get_type(), // [ // 'name' => 'content_border', // 'selector' => $item . ' > .ui-e-submenu', // 'fields_options' => [ // 'color' => [ // 'label' => esc_html__('Border Color', 'uicore-elements'), // ], // 'width' => [ // 'label' => esc_html__('Border Width', 'uicore-elements'), // ], // ], // ] // ); // $this->add_responsive_control( // 'content_border_radius', // [ // 'label' => esc_html__('Border Radius', 'uicore-elements'), // 'type' => Controls_Manager::DIMENSIONS, // 'size_units' => ['px', '%', 'em', 'rem', 'custom'], // 'selectors' => [ // $item . ' > .ui-e-submenu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', // ], // ] // ); // $this->add_group_control( // Group_Control_Box_Shadow::get_type(), // [ // 'name' => 'content_shadow', // 'selector' => $item . ' > .ui-e-submenu', // ] // ); // $this->add_responsive_control( // 'content_padding', // [ // 'label' => esc_html__('Padding', 'uicore-elements'), // 'type' => Controls_Manager::DIMENSIONS, // 'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'], // 'selectors' => [ // $item . ' > .ui-e-submenu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', // ], // 'separator' => 'before', // ] // ); // $this->end_controls_section(); $this->start_controls_section('submenu_style_section', [ 'label' => esc_html__('Submenu', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, ]); $this->add_responsive_control( 'submenu_offset', [ 'label' => esc_html__('Submenu Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'range' => [ 'px' => [ 'max' => 200, ], 'em' => [ 'max' => 20, ], 'rem' => [ 'max' => 20, ], ], 'default' => [ 'size' => 0, ], 'frontend_available' => true, 'selectors' => [ '{{WRAPPER}}' => '--ui-e-submenu-offset: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section('back_button_section', [ 'label' => esc_html__('Back Button', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', 'breakpoint_selector!' => 'none' ], ]); $this->start_controls_tabs('back_button_tabs'); $this->start_controls_tab('back_default_tab', [ 'label' => esc_html__('Default', 'uicore-elements'), ]); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'back_button_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], 'selector' => '{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button', ] ); $this->add_control( 'back_button_color', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button' => 'color: {{VALUE}};', '{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button .ui-e-back-button-icon' => 'fill: {{VALUE}};', ], 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', ], ] ); $this->add_responsive_control( 'back_button_icon_size', [ 'label' => esc_html__('Size', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 16, ], 'selectors' => [ '{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button .ui-e-back-button-icon' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button .ui-e-back-button-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'back_button_offset_x', [ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => '%', 'size' => 0, ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], 'px' => [ 'min' => -1000, 'max' => 1000, 'step' => 2, ], ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-back-button-offset-x: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', ], ] ); $this->add_control( 'back_button_offset_y', [ 'label' => esc_html__('Vertical Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => '%', 'size' => -8, ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], 'px' => [ 'min' => -1000, 'max' => 1000, 'step' => 2, ], ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-back-button-offset-y: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', ], ] ); $this->end_controls_tab(); $this->start_controls_tab('back_submenu_tab', [ 'label' => esc_html__('Submenu', 'uicore-elements'), ]); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'back_button_typography_submenu', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], 'selector' => '{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button', ] ); $this->add_control( 'back_button_color_submenu', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button' => 'color: {{VALUE}};', '{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button .ui-e-back-button-icon' => 'fill: {{VALUE}};', ], 'condition' => [ 'fullscreen_canvas_dropdown' => 'slide', ], ] ); $this->add_responsive_control( 'back_button_icon_size_submenu', [ 'label' => esc_html__('Size', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', 'custom'], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 16, ], 'selectors' => [ '{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button .ui-e-back-button-icon' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button .ui-e-back-button-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section('fullscreen_menu_button_section', [ 'label' => esc_html__('Fullscreen Button', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'breakpoint_selector!' => 'none' ] ]); $this->add_control( 'fullscreen_button_size', [ 'label' => esc_html__('Button Size', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', 'rem', 'custom'], 'default' => [ 'unit' => 'px', 'size' => 20, ], 'range' => [ 'px' => [ 'min' => 14, 'max' => 80, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-fullscreen-button-size: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'button_style!' => 'text', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'fullscreen_button_typography', 'fields_options' => [ 'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 12, ], ], 'line_height' => [ 'default' => [ 'unit' => 'em', 'size' => 1, ], ], ], 'selector' => '{{WRAPPER}} .ui-e-fullscreen-button-text', 'condition' => [ 'button_style' => 'text', ], ] ); $this->start_controls_tabs('fullscreen_menu_button_tabs'); // Open Button $this->start_controls_tab('fullscreen_menu_button_tab_normal', [ 'label' => '' ]); $this->add_control( 'fullscreen_button_padding', [ 'label' => esc_html__('Button Padding', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => 'px', 'top' => 6, 'right' => 6, 'bottom' => 6, 'left' => 6, ], 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'fullscreen_button_radius', [ 'label' => esc_html__('Border Radius', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => 'px', 'top' => 6, 'right' => 6, 'bottom' => 6, 'left' => 6, ], 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'button_border', 'selector' => '{{WRAPPER}} .ui-e-fullscreen-button', 'separator' => 'after', ] ); $this->add_control( 'fullscreen_button_background', [ 'label' => esc_html__('Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'fullscreen_button_color', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button' => 'color: {{VALUE}};', '{{WRAPPER}} .ui-e-fullscreen-button svg' => 'fill: {{VALUE}};', ], 'separator' => 'after', ] ); $this->add_control( 'fullscreen_button_background_hover', [ 'label' => esc_html__('Hover Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button:hover' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'fullscreen_button_color_hover', [ 'label' => esc_html__('Hover Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button:hover' => 'color: {{VALUE}};', '{{WRAPPER}} .ui-e-fullscreen-button:hover svg' => 'fill: {{VALUE}};', ], ] ); $this->end_controls_tab(); // Close Button $this->start_controls_tab('fullscreen_button_tab_active', [ 'label' => '' ]); $this->add_control( 'fullscreen_close_button_description', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__('The close button position shown in the editor may differ from the frontend. Check the frontend to confirm its final placement.', 'uicore-elements'), 'content_classes' => 'elementor-control-field-description', ] ); $this->add_responsive_control( 'fullscreen_close_button_offset_x', [ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['vw'], 'default' => [ 'unit' => 'vw', 'size' => 0, ], 'range' => [ 'vw' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}}.ui-e-fullscreen-menu-enabled .ui-e-fullscreen-button-wrp' => '--ui-e-fullscreen-button-offset-x: {{SIZE}}vw;', ], ] ); $this->add_responsive_control( 'fullscreen_close_button_offset_y', [ 'label' => esc_html__('Vertical Offset', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['vh'], 'default' => [ 'unit' => 'vh', 'size' => 0, ], 'range' => [ 'vh' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'selectors' => [ '{{WRAPPER}}.ui-e-fullscreen-menu-enabled .ui-e-fullscreen-button-wrp' => '--ui-e-fullscreen-button-offset-y: {{SIZE}}vh;', ], ] ); $this->add_control( 'fullscreen_button_padding_active', [ 'label' => esc_html__('Padding', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'fullscreen_button_radius_active', [ 'label' => esc_html__('Border Radius', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'fullscreen_button_border_active', 'selector' => '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]', 'separator' => 'after', ] ); $this->add_control( 'fullscreen_button_background_active', [ 'label' => esc_html__('Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'fullscreen_button_color_active', [ 'label' => esc_html__('Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'color: {{VALUE}};', '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"] svg' => 'fill: {{VALUE}};', ], 'separator' => 'after', ] ); $this->add_control( 'fullscreen_button_background_hover_active', [ 'label' => esc_html__('Hover Background Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]:hover' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'fullscreen_button_color_hover_active', [ 'label' => esc_html__('Hover Color', 'uicore-elements'), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]:hover' => 'color: {{VALUE}};', '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]:hover svg' => 'fill: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section('fullscreen_menu_canvas_section', [ 'label' => esc_html__('Fullscreen Canvas', 'uicore-elements'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'breakpoint_selector!' => 'none' ] ]); $this->add_control( 'canvas_heading', [ 'label' => esc_html__('Canvas', 'uicore-elements'), 'type' => Controls_Manager::HEADING, ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'fullscreen_canvas_background', 'types' => ['classic', 'gradient'], 'exclude' => ['image'], 'selector' => $fullscreen_canvas, 'fields_options' => [ 'color' => [ 'label' => esc_html__('Canvas Background', 'uicore-elements'), ], ], ] ); // Add blur slider control $this->add_responsive_control( 'fullscreen_canvas_blur', [ 'label' => esc_html__('Background Blur', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0.1, 'max' => 5, 'step' => 0.1, ], ], 'default' => [ 'unit' => 'px', 'size' => 0, ], 'selectors' => [ '{{WRAPPER}}.ui-e-fullscreen-menu-enabled > nav' => 'backdrop-filter: blur({{SIZE}}{{UNIT}}); -webkit-backdrop-filter: blur({{SIZE}}{{UNIT}});', ], ] ); $this->add_control( 'canvas_inner_container_heading', [ 'label' => esc_html__('Inner container', 'uicore-elements'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'fullscreen_canvas_container_background', 'types' => ['classic', 'gradient'], 'exclude' => ['image'], 'selector' => $fullscreen_canvas . ' > .ui-e-menu', 'fields_options' => [ 'color' => [ 'label' => esc_html__('Container Background', 'uicore-elements'), ], ], ] ); $this->add_responsive_control( 'fullscreen_canvas_padding', [ 'label' => esc_html__('Padding', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'default' => [ 'unit' => 'px', 'top' => 60, 'right' => 60, 'bottom' => 60, 'left' => 60, ], 'tablet_default' => [ 'unit' => 'px', 'top' => 50, 'right' => 50, 'bottom' => 50, 'left' => 50, ], 'mobile_default' => [ 'unit' => 'px', 'top' => 40, 'right' => 40, 'bottom' => 40, 'left' => 40, ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-fullscreen-canvas-padding-l: {{LEFT}}{{UNIT}}; --ui-e-fullscreen-canvas-padding-r: {{RIGHT}}{{UNIT}};', $fullscreen_canvas . ' > .ui-e-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); // Add border group control for the inner container $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'fullscreen_canvas_container_border', 'selector' => $fullscreen_canvas . ' > .ui-e-menu', 'fields_options' => [ 'color' => [ 'label' => esc_html__('Border Color', 'uicore-elements'), ], 'width' => [ 'label' => esc_html__('Border Width', 'uicore-elements'), ], ], ] ); $this->add_control( 'fullscreen_canvas_radius', [ 'label' => esc_html__('Border Radius', 'uicore-elements'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%', 'em', 'rem', 'custom'], 'selectors' => [ $fullscreen_canvas . ' > .ui-e-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'fullscreen_canvas_width', [ 'label' => esc_html__('Width', 'uicore-elements'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['vw'], 'range' => [ 'vw' => [ 'max' => 100, ], ], 'default' => [ 'size' => 100, 'unit' => 'vw', ], 'tablet_default' => [ 'size' => 100, 'unit' => 'vw', ], 'mobile_default' => [ 'size' => 100, 'unit' => 'vw', ], 'selectors' => [ '{{WRAPPER}}' => '--ui-e-fullscreen-canvas-width: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); } protected function get_current_request_signature() { global $wp; $request_path = ''; if (!empty($wp) && isset($wp->request)) { $request_path = $wp->request; } return $this->normalize_menu_item_url(home_url('/' . ltrim($request_path, '/'))); } protected function normalize_menu_item_url($url) { if (!is_string($url)) { return null; } $url = trim($url); if ('' === $url) { return null; } $url_scheme = strtolower((string) wp_parse_url($url, PHP_URL_SCHEME)); if ( '#' === $url[0] || in_array($url_scheme, ['javascript', 'mailto', 'tel'], true) ) { return null; } if (0 === strpos($url, '//')) { $url = (is_ssl() ? 'https:' : 'http:') . $url; } $parsed_url = wp_parse_url($url); if (false === $parsed_url) { return null; } if (empty($parsed_url['host'])) { $relative_path = $parsed_url['path'] ?? ''; $url = home_url('/' . ltrim($relative_path, '/')); $parsed_url = wp_parse_url($url); if (false === $parsed_url) { return null; } } $host = strtolower((string) ($parsed_url['host'] ?? '')); if ('' === $host) { return null; } $port = isset($parsed_url['port']) ? ':' . (int) $parsed_url['port'] : ''; $path = '/' . ltrim((string) ($parsed_url['path'] ?? '/'), '/'); $path = untrailingslashit($path); if ('' === $path) { $path = '/'; } return $host . $port . $path; } protected function is_current_menu_item($url) { $item_signature = $this->normalize_menu_item_url($url); if (null === $item_signature) { return false; } $current_signature = $this->get_current_request_signature(); if (null === $current_signature) { return false; } return $item_signature === $current_signature; } // TODO: study the possibility of improving the is_option() method so we can use it here. // The issue relies on how is_option just take all settings as base, and in here we're // working mainly with a selected collection of settings from the repeaters. protected function render_menu_item($settings) { // Data $index = $settings['index']; $custom_id = $settings['item']['element_id']; $image = $settings['item']['item_image']; $icon = $settings['item']['item_icon']; $badge = $settings['item']['item_badge']; $description = $settings['item']['item_description']; $dropdown = $this->get_settings_for_display('dropdown_icon'); $dropdown_active = $this->get_settings_for_display('dropdown_icon_active'); $fullscreen_dropdown = $this->get_settings_for_display('dropdown_fullscreen_icon'); $fullscreen_dropdown_active = $this->get_settings_for_display('dropdown_fullscreen_icon_active'); $highlight_current = $this->is_option('highlight_current', 'yes'); $has_submenu = $settings['item']['item_submenu'] && $settings['item']['item_submenu'] === 'yes'; $item_url = $settings['item']['item_link']['url'] ?? '#'; $url = empty($item_url) ? ['url' => '#'] : $settings['item']['item_link']; // Url atts $this->add_link_attributes('link_' . $index, $url); // Item atts $this->add_render_attribute('item_' . $index, ['class' => 'ui-e-menu-item']); $this->add_render_attribute('item_' . $index, ['data-menu-content-id' => $settings['container_id']]); if ($has_submenu) { $width = 'ui-e-' . $settings['item']['item_submenu_width']; $this->add_render_attribute('item_' . $index, ['class' => 'ui-e-has-submenu']); $this->add_render_attribute('item_' . $index, ['class' => esc_attr($width)]); } if ($custom_id) { $this->add_render_attribute('item_' . $index, ['id' => esc_attr($custom_id)]); } if ($highlight_current && $this->is_current_menu_item($item_url)) { $this->add_render_attribute('item_' . $index, ['class' => 'ui-e-current']); } ob_start(); ?>
  • print_render_attribute_string('item_' . $index); ?>> print_render_attribute_string('link_' . $index); ?>> esc_attr($image['alt']), 'class' => 'ui-e-menu-item-image', ] )); } ?> 'true']); ?> 'true', 'class' => 'ui-e-dropdown-closed']); ?> 'true', 'class' => 'ui-e-dropdown-opened']); ?> 'true', 'class' => 'ui-e-dropdown-closed']); ?> 'true', 'class' => 'ui-e-dropdown-opened']); ?> render_sub_menu($settings); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } ?>
    • print_child($settings['index'], $settings); return ob_get_clean(); } protected function is_fullscreen_menu_widget($item) { return !empty($item['item_convert_to_widget']) && 'yes' === $item['item_convert_to_widget']; } protected function render_fullscreen_menu_widget($settings) { ob_start(); $this->print_child($settings['index'], [ 'container_id' => $settings['container_id'], 'item_count' => $settings['item_count'], 'is_fullscreen_menu_widget' => true, ]); return ob_get_clean(); } protected function render_fullscreen_menu_button() { $button_style = $this->get_settings_for_display('button_style'); $fullscreen_canvas_id = 'ui-e-fullscreen-menu-' . $this->get_id_int(); ob_start(); ?>
    get_settings_for_display('back_button_icon'); } if (empty($icon['value'])) { return ''; } return Icons_Manager::try_get_icon_html( $icon, [ 'aria-hidden' => 'true', 'class' => 'ui-e-back-button-icon-markup', ] ); } protected function render_back_button_icon_template($icon = null) { $icon_markup = $this->get_back_button_icon_markup($icon); if ('' === $icon_markup) { return ''; } ob_start(); ?> get_settings_for_display('breakpoint_selector'); if ('' === $breakpoint_key || 'none' === $breakpoint_key) { return [ 'key' => 'none', 'value' => null, ]; } if ('desktop' === $breakpoint_key) { return [ 'key' => 'desktop', 'value' => null, ]; } $breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints(); $breakpoint_value = isset($breakpoints[$breakpoint_key]) ? (int) $breakpoints[$breakpoint_key]->get_value() : null; return [ 'key' => $breakpoint_key, 'value' => $breakpoint_value, ]; } /** * Print the content area. * * @param int $index * @param array $settings */ public function print_child($index, $settings = []) { $children = $this->get_children(); $child_ids = []; if (empty($children)) { return; } foreach ($children as $child) { $child_ids[] = $child->get_id(); } $add_attribute_to_container = function ($should_render, $container) use ($settings, $child_ids) { if (in_array($container->get_id(), $child_ids)) { $this->add_attributes_to_container($container, $settings); } return $should_render; }; if (empty($children[$index])) { return; } add_filter('elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3); $children[$index]->print_element(); remove_filter('elementor/frontend/container/should_render', $add_attribute_to_container); } protected function add_attributes_to_container($container, $settings) { if (!empty($settings['is_fullscreen_menu_widget'])) { $container->add_render_attribute('_wrapper', [ 'id' => $settings['container_id'], 'data-menu-index' => $settings['item_count'], 'class' => ['ui-e-widget-area'], ]); return; } $container->add_render_attribute('_wrapper', [ 'id' => $settings['container_id'], 'data-menu-index' => $settings['item_count'], 'class' => ['ui-e-menu-content', 'ui-e-submenu'], ]); } /** * Injects basic styles that prevents the fullscreen CSS from mobile to experiencing big layout shifts, since * the classname that triggers the fullscreen styles is added after DOMContentLoaded by the main widget JS, and can cause */ protected function critical_fullscreen_css() { $breakpoint_config = $this->get_fullscreen_breakpoint_config(); if (in_array($breakpoint_config['key'], ['none', 'desktop'], true)) { return; } $id = $this->get_id(); echo ' '; } protected function render() { if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) { $this->nesting_fallback(); return; } if (Plugin::$instance->experiments->is_feature_active('e_optimized_markup') == false) { return; } $this->critical_fullscreen_css(); $settings = $this->get_settings_for_display(); $menu_titles = ''; $fullscreen_widgets = ''; $widget_number = $this->get_id_int(); $fullscreen_canvas_id = 'ui-e-fullscreen-menu-' . $widget_number; $this->add_render_attribute('_wrapper', 'class', 'ui-e-is-loading'); $this->add_render_attribute( 'nav', [ 'class' => 'ui-e-advanced-menu-nav', 'data-widget-number' => $this->get_widget_number(), 'id' => $fullscreen_canvas_id, ] ); if ($settings['menu_name']) { $this->add_render_attribute('nav', 'aria-label', $settings['menu_name']); } if ($this->is_option('widget_area_only', 'yes')) { $this->add_render_attribute('wrapper', 'class', ['ui-e-menu', 'ui-e-widget-only']); } else { $this->add_render_attribute('wrapper', 'class', 'ui-e-menu'); } foreach ($settings['menu_items'] as $index => $item) { $item_count = $index + 1; $item_settings = [ 'index' => $index, 'item_count' => $item_count, 'container_id' => 'ui-e-menu-content-' . $widget_number . $item_count, 'item' => $item, ]; if ($this->is_fullscreen_menu_widget($item)) { $fullscreen_widgets .= $this->render_fullscreen_menu_widget($item_settings); continue; } $menu_titles .= $this->render_menu_item($item_settings); } echo $this->render_fullscreen_menu_button(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> experiments->is_feature_active('nested-elements') == false) { return; } if (!Plugin::$instance->experiments->is_feature_active('e_optimized_markup')) { ?>
    <# const elementUid=view.getIDInt().toString(); #> <# const menuItems=settings.menu_items || [], wrapperKey='wrapper-' + elementUid, buttonStyle=settings.button_style || 'default' , fullscreenCanvasId='ui-e-fullscreen-menu-' + elementUid, fullscreenBtnOpenText=settings.button_text_open || '' , fullscreenBtnCloseText=settings.button_text_close || '' , backButtonIcon=settings.back_button_icon && settings.back_button_icon.value ? elementor.helpers.renderIcon( view, settings.back_button_icon, { 'aria-hidden' : true, 'class' : 'ui-e-back-button-icon-markup' }, 'i' , 'object' ) : false, fullscreenBtnOpenIcon=settings.fullscreen_menu_open_icon && settings.fullscreen_menu_open_icon.value ? elementor.helpers.renderIcon( view, settings.fullscreen_menu_open_icon, { 'aria-hidden' : true }, 'i' , 'object' ) : false, fullscreenBtnCloseIcon=settings.fullscreen_menu_close_icon && settings.fullscreen_menu_close_icon.value ? elementor.helpers.renderIcon( view, settings.fullscreen_menu_close_icon, { 'aria-hidden' : true }, 'i' , 'object' ) : false; if ( settings.widget_area_only==='yes' ) { view.addRenderAttribute( wrapperKey, { 'class' : [ 'ui-e-menu' , 'ui-e-widget-only' ] } ); } else { view.addRenderAttribute( wrapperKey, { 'class' : [ 'ui-e-menu' ] } ); } #>
    <# itemCount=view.collection.length + 1, elementUid=view.getIDInt().toString(), itemUid=elementUid + itemCount, item=data, itemKey='item-' + itemUid, linkKey='link-' + itemUid, imageKey='image-' + itemUid, textKey='text-' + itemUid, titleKey='title-' + itemUid, descriptionKey='description-' + itemUid, badgeKey='badge-' + itemUid, iconKey='icon-' + itemUid, dropdownKey='dropdown-' + itemUid, submenuKey='submenu-' + itemUid, itemIcon=item.item_icon && item.item_icon.value ? elementor.helpers.renderIcon( view, item.item_icon, { 'aria-hidden' : true, 'class' : 'ui-e-menu-item-icon' }, 'i' , 'object' ) : false, dropdownIcon=settings.dropdown_icon && settings.dropdown_icon.value ? elementor.helpers.renderIcon( view, settings.dropdown_icon, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-closed' }, 'i' , 'object' ) : false, dropdownIconActive=settings.dropdown_icon_active && settings.dropdown_icon_active.value ? elementor.helpers.renderIcon( view, settings.dropdown_icon_active, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-opened' }, 'i' , 'object' ) : false, fullscreenDropdownIcon=settings.dropdown_fullscreen_icon && settings.dropdown_fullscreen_icon.value ? elementor.helpers.renderIcon( view, settings.dropdown_fullscreen_icon, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-closed' }, 'i' , 'object' ) : false, fullscreenDropdownIconActive=settings.dropdown_fullscreen_icon_active && settings.dropdown_fullscreen_icon_active.value ? elementor.helpers.renderIcon( view, settings.dropdown_fullscreen_icon_active, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-opened' }, 'i' , 'object' ) : false, imageData=item.item_image && item.item_image.url ? { id: item.item_image.id, url: item.item_image.url, size: 'thumbnail' , model: view.getEditModel() } : false, imageUrl=imageData ? elementor.imagesManager.getImageUrl( imageData ) : '' , itemConvertToWidget=item.item_convert_to_widget && item.item_convert_to_widget==='yes' , hasSubmenu=item.item_submenu && item.item_submenu==='yes' , submenuWidthClass='ui-e-' + ( item.item_submenu_width || 'widget-width' ) , submenuId='ui-e-menu-content-' + itemUid, widgetKey='widget-' + itemUid, widgetContainerId='ui-e-widget-area-' + itemUid; const itemClasses=[ 'ui-e-menu-item' ]; if ( itemConvertToWidget ) { itemClasses.push( 'ui-e-converted-widget-placeholder' ); } if ( hasSubmenu ) { itemClasses.push( 'ui-e-has-submenu' ); itemClasses.push( submenuWidthClass ); } view.addRenderAttribute( itemKey, { 'class' : itemClasses, }, null, true ); view.addRenderAttribute( itemKey, 'data-menu-content-id' , submenuId, true ); view.addRenderAttribute( itemKey, 'data-menu-index' , itemCount, true ); if ( item.element_id ) { view.addRenderAttribute( itemKey, 'id' , item.element_id, true ); } const linkAttrs={}; if ( item.item_link && item.item_link.url ) { linkAttrs.href=item.item_link.url; } if ( item.item_link && item.item_link.is_external ) { linkAttrs.target='_blank' ; linkAttrs.rel='noopener noreferrer' ; } if ( item.item_link && item.item_link.nofollow ) { linkAttrs.rel=( linkAttrs.rel ? linkAttrs.rel + ' ' : '' ) + 'nofollow' ; } view.addRenderAttribute( linkKey, linkAttrs, null, true ); view.addRenderAttribute( titleKey, { 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_title' , 'element_id' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'element_id' : { editType : 'attribute' , attr : 'id' , selector : 'li' }, 'item_title' : { editType : 'text' } }), }, null, true ); view.addRenderAttribute( badgeKey, { 'class' : [ 'ui-e-badge' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_badge' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_badge' : { editType : 'text' } }), }, null, true ); view.addRenderAttribute( imageKey, { 'class' : [ 'ui-e-menu-item-image' ] }, null, true ); view.addRenderAttribute( textKey, { 'class' : [ 'ui-e-text' ] }, null, true ); view.addRenderAttribute( iconKey, { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-menu-item-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_icon.value' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_icon.value' : { editType : 'text' } }), }, null, true ); view.addRenderAttribute( descriptionKey, { 'class' : [ 'ui-e-description' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_description' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_description' : { editType : 'text' } }), }, null, true ); view.addRenderAttribute( dropdownKey, { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-dropdown-icon' ] }, null, true ); view.addRenderAttribute( dropdownKey + '-fullscreen' , { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-dropdown-icon' ], 'data-fullscreen-layout' : true }, null, true ); view.addRenderAttribute( submenuKey, { 'class' : [ 'ui-e-submenu-placeholder' ], 'data-container-id' : submenuId, 'data-menu-index' : itemCount, 'hidden' : hasSubmenu ? false : 'hidden' }, null, true ); if ( itemConvertToWidget ) { view.addRenderAttribute( widgetKey, { 'class' : [ 'ui-e-widget-area-placeholder' ], 'data-container-id' : widgetContainerId, 'data-menu-index' : itemCount, }, null, true ); } #> <# if ( itemConvertToWidget ) { #>
  • <# } else { #>
  • <# if ( imageUrl ) { #> {{{ item.item_image.alt || '' }}} <# } #> <# if ( itemIcon && itemIcon.value ) { #> {{{ itemIcon.value }}} <# } #> {{{ item.item_title }}} <# if ( item.item_description ) { #> {{{ item.item_description }}} <# } #> <# if ( item.item_badge ) { #> {{{ item.item_badge }}} <# } #> <# if ( hasSubmenu && dropdownIcon && dropdownIcon.value ) { #> {{{ dropdownIcon.value }}} <# if ( dropdownIconActive && dropdownIconActive.value ) { #> {{{ dropdownIconActive.value }}} <# } #> <# } #> <# if ( hasSubmenu && fullscreenDropdownIcon && fullscreenDropdownIcon.value ) { #> {{{ fullscreenDropdownIcon.value }}} <# if ( fullscreenDropdownIconActive && fullscreenDropdownIconActive.value ) { #> {{{ fullscreenDropdownIconActive.value }}} <# } #> <# } #>
    • <# } #> experiments->is_feature_active('e_nested_atomic_repeaters')) { return array_merge(parent::get_initial_config(), [ 'support_improved_repeaters' => true, 'target_container' => ['.ui-e-menu-list'], 'is_interlaced' => true, ]); } return array_merge(parent::get_initial_config(), [ 'is_interlaced' => true, ]); } } \Elementor\Plugin::instance()->widgets_manager->register(new Advanced_Menu()); ```