class ET_Builder_Module_Fullwidth_Menu extends ET_Builder_Module {
protected static $menu_slug = 'et_pb_fullwidth_menu';
$this->name = esc_html__( 'Fullwidth Menu', 'et_builder' );
$this->plural = esc_html__( 'Fullwidth Menus', 'et_builder' );
$this->slug = self::$menu_slug;
$this->vb_support = 'on';
$this->main_css_element = '%%order_class%%.' . self::$menu_slug;
$this->settings_modal_toggles = array(
'main_content' => et_builder_i18n( 'Content' ),
'image' => esc_html__( 'Logo', 'et_builder' ),
'elements' => et_builder_i18n( 'Elements' ),
'title' => et_builder_i18n( 'Layout' ),
'title' => esc_html__( 'Menu Text', 'et_builder' ),
'title' => esc_html__( 'Dropdown Menu', 'et_builder' ),
'icon_settings' => array(
'title' => esc_html__( 'Icons', 'et_builder' ),
'image_settings' => array(
'title' => esc_html__( 'Logo', 'et_builder' ),
'title' => esc_html__( 'Animation', 'et_builder' ),
'title' => esc_html__( 'Attributes', 'et_builder' ),
$this->advanced_fields = array(
'label' => esc_html__( 'Menu', 'et_builder' ),
'main' => "{$this->main_css_element} ul li a",
'limited_main' => "{$this->main_css_element} ul li a, {$this->main_css_element} ul li",
'hover' => "{$this->main_css_element} ul li:hover > a",
'range_settings' => array(
'letter_spacing' => array(
'range_settings' => array(
'hide_text_align' => true,
'background_color' => array(
'border_radii' => '%%order_class%% .et_pb_menu__logo-wrap .et_pb_menu__logo img',
'border_styles' => '%%order_class%% .et_pb_menu__logo-wrap .et_pb_menu__logo img',
'label_prefix' => esc_html__( 'Logo', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'image_settings',
'main' => '%%order_class%%, %%order_class%% .sub-menu',
'label' => esc_html__( 'Logo Box Shadow', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'image_settings',
'main' => '%%order_class%% .et_pb_menu__logo-wrap .et_pb_menu__logo',
'use_background_layout' => true,
'text_orientation' => array(
'default_on_front' => 'left',
'depends_show_if' => 'left_aligned',
'background_layout' => array(
'default_on_front' => 'light',
'child_filters_target' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'image_settings',
'main' => '%%order_class%% .et_pb_menu__logo-wrap img',
'main' => '%%order_class%% .et_pb_menu__logo-wrap img',
$this->custom_css_fields = array(
'label' => esc_html__( 'Menu Link', 'et_builder' ),
'selector' => '.et-menu-nav li a',
'active_menu_link' => array(
'label' => esc_html__( 'Active Menu Link', 'et_builder' ),
'selector' => '.et-menu-nav li.current-menu-item a',
'dropdown_container' => array(
'label' => esc_html__( 'Dropdown Menu Container', 'et_builder' ),
'selector' => '.et-menu-nav li ul.sub-menu',
'dropdown_links' => array(
'label' => esc_html__( 'Dropdown Menu Links', 'et_builder' ),
'selector' => '.et-menu-nav li ul.sub-menu a',
'label' => esc_html__( 'Menu Logo', 'et_builder' ),
'selector' => '.et_pb_menu__logo',
$this->help_videos = array(
'name' => esc_html__( 'An introduction to the Fullwidth Menu module', 'et_builder' ),
$et_accent_color = et_builder_accent_color();
'label' => esc_html__( 'Menu', 'et_builder' ),
'option_category' => 'basic_option',
'options' => et_builder_get_nav_menus_options(),
'description' => sprintf(
'<p class="description">%2$s. <a href="%1$s" target="_blank">%3$s</a>.</p>',
esc_url( admin_url( 'nav-menus.php' ) ),
esc_html__( 'Select a menu that should be used in the module', 'et_builder' ),
esc_html__( 'Click here to create new menu', 'et_builder' )
'toggle_slug' => 'main_content',
'computed_affects' => array(
'label' => esc_html__( 'Style', 'et_builder' ),
'option_category' => 'layout',
'left_aligned' => esc_html__( 'Left Aligned', 'et_builder' ),
'centered' => esc_html__( 'Centered', 'et_builder' ),
'inline_centered_logo' => esc_html__( 'Inline Centered Logo', 'et_builder' ),
'default' => 'left_aligned',
'tab_slug' => 'advanced',
'toggle_slug' => 'layout',
'submenu_direction' => array(
'label' => esc_html__( 'Dropdown Menu Direction', 'et_builder' ),
'option_category' => 'configuration',
'downwards' => esc_html__( 'Downwards', 'et_builder' ),
'upwards' => esc_html__( 'Upwards', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'layout',
'description' => esc_html__( 'Here you can choose the direction that your sub-menus will open. You can choose to have them open downwards or upwards.', 'et_builder' ),
'computed_affects' => array(
'fullwidth_menu' => array(
'label' => esc_html__( 'Make Menu Links Fullwidth', 'et_builder' ),
'description' => esc_html__( 'Menu width is limited by your website content width. Enabling this option will extend the menu the full width of the browser window.', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'layout',
'active_link_color' => array(
'label' => esc_html__( 'Active Link Color', 'et_builder' ),
'description' => esc_html__( 'An active link is the page currently being visited. You can pick a color to be applied to active links to differentiate them from other links.', 'et_builder' ),
'tab_slug' => 'advanced',
'mobile_options' => true,
'dropdown_menu_bg_color' => array(
'label' => esc_html__( 'Dropdown Menu Background Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to be applied to the background of dropdown menus. Dropdown menus appear when hovering over links with sub items.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'dropdown',
'dropdown_menu_line_color' => array(
'label' => esc_html__( 'Dropdown Menu Line Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to be used for the dividing line between links in dropdown menus. Dropdown menus appear when hovering over links with sub items.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'dropdown',
'mobile_options' => true,
'dropdown_menu_text_color' => array(
'label' => esc_html__( 'Dropdown Menu Text Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to be used for links in dropdown menus. Dropdown menus appear when hovering over links with sub items.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'dropdown',
'dropdown_menu_active_link_color' => array(
'label' => esc_html__( 'Dropdown Menu Active Link Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to be used for active links in dropdown menus. Dropdown menus appear when hovering over links with sub items.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'dropdown',
'mobile_menu_bg_color' => array(
'label' => esc_html__( 'Mobile Menu Background Color', 'et_builder' ),
'description' => esc_html__( 'Pick a unique color to be used for the menu background color when viewed on a mobile device.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'dropdown',
'mobile_options' => true,
'mobile_menu_text_color' => array(
'label' => esc_html__( 'Mobile Menu Text Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to be used for links in mobile menus.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'dropdown',
'mobile_options' => true,
'computed_callback' => array( 'ET_Builder_Module_Fullwidth_Menu', 'get_fullwidth_menu' ),
'computed_depends_on' => array(
'label' => esc_html__( 'Logo', 'et_builder' ),
'option_category' => 'basic_option',
'upload_button_text' => et_builder_i18n( 'Upload an image' ),
'choose_text' => esc_attr__( 'Choose an Image', 'et_builder' ),
'update_text' => esc_attr__( 'Set As Logo', 'et_builder' ),
'description' => esc_html__( 'Upload an image to display beside your menu.', 'et_builder' ),
'toggle_slug' => 'image',
'dynamic_content' => 'image',
'mobile_options' => true,
'label' => esc_html__( 'Logo Link URL', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'If you would like to make your logo a link, input your destination URL here.', 'et_builder' ),
'toggle_slug' => 'link_options',
'dynamic_content' => 'url',
'logo_url_new_window' => array(
'label' => esc_html__( 'Logo Link Target', 'et_builder' ),
'option_category' => 'configuration',
'off' => esc_html__( 'In The Same Window', 'et_builder' ),
'on' => esc_html__( 'In The New Tab', 'et_builder' ),
'toggle_slug' => 'link_options',
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'et_builder' ),
'default_on_front' => 'off',
'label' => esc_html__( 'Logo Alt Text', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Define the HTML ALT text for your logo here.', 'et_builder' ),
'tab_slug' => 'custom_css',
'toggle_slug' => 'attributes',
'dynamic_content' => 'text',
'logo_max_width' => array(
'label' => esc_html__( 'Logo Max Width', 'et_builder' ),
'description' => esc_html__( 'Adjust the maximum width of the logo.', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'mobile_options' => true,
'allowed_values' => et_builder_get_acceptable_css_string_values( 'max-width' ),
'range_settings' => array(
'logo_max_height' => array(
'label' => esc_html__( 'Logo Max Height', 'et_builder' ),
'description' => esc_html__( 'Adjust the maximum height of the logo.', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
'mobile_options' => true,
'allowed_values' => et_builder_get_acceptable_css_string_values( 'max-height' ),
'range_settings' => array(
'show_cart_icon' => array(
'label' => esc_html__( 'Show Shopping Cart Icon', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'toggle_slug' => 'elements',
'mobile_options' => true,
'show_search_icon' => array(
'label' => esc_html__( 'Show Search Icon', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'toggle_slug' => 'elements',
'mobile_options' => true,
'cart_icon_color' => array(
'default' => $et_accent_color,
'label' => esc_html__( 'Shopping Cart Icon Color', 'et_builder' ),
'description' => esc_html__( 'Here you can define a custom color for your shopping cart icon.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'icon_settings',
'mobile_options' => true,
'search_icon_color' => array(
'default' => $et_accent_color,
'label' => esc_html__( 'Search Icon Color', 'et_builder' ),
'description' => esc_html__( 'Here you can define a custom color for your search icon.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'icon_settings',
'mobile_options' => true,
'menu_icon_color' => array(
'default' => $et_accent_color,
'label' => esc_html__( 'Hamburger Menu Icon Color', 'et_builder' ),
'description' => esc_html__( 'Here you can define a custom color for your hamburger menu icon.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'icon_settings',
'mobile_options' => true,
'cart_icon_font_size' => array(
'label' => esc_html__( 'Shopping Cart Icon Font Size', 'et_builder' ),
'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'et_builder' ),
'option_category' => 'font_option',
'tab_slug' => 'advanced',
'toggle_slug' => 'icon_settings',
'default_on_front' => '',