name = esc_html__( 'Fullwidth Menu', 'et_builder' ); $this->slug = 'et_pb_fullwidth_menu'; $this->fb_support = true; $this->fullwidth = true; $this->whitelisted_fields = array( 'menu_id', 'background_layout', 'submenu_direction', 'admin_label', 'module_id', 'module_class', 'fullwidth_menu', 'active_link_color', 'dropdown_menu_bg_color', 'dropdown_menu_line_color', 'dropdown_menu_text_color', 'dropdown_menu_animation', 'mobile_menu_bg_color', 'mobile_menu_text_color', ); $this->main_css_element = '%%order_class%%.et_pb_fullwidth_menu'; $this->options_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => esc_html__( 'Content', 'et_builder' ), 'background' => esc_html__( 'Background', 'et_builder' ), ), ), 'advanced' => array( 'toggles' => array( 'layout' => esc_html__( 'Layout', 'et_builder' ), 'links' => esc_html__( 'Links', 'et_builder' ), 'dropdown' => esc_html__( 'Dropdown Menu', 'et_builder' ), ), ), 'custom_css' => array( 'toggles' => array( 'animation' => array( 'title' => esc_html__( 'Animation', 'et_builder' ), 'priority' => 90, ), ), ), ); $this->advanced_options = array( 'fonts' => array( 'menu' => array( 'label' => esc_html__( 'Menu', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} ul li a", 'plugin_main' => "{$this->main_css_element} ul li a, {$this->main_css_element} ul li", ), 'line_height' => array( 'default' => '1em', ), 'font_size' => array( 'default' => '14px', 'range_settings' => array( 'min' => '12', 'max' => '24', 'step' => '1', ), ), 'letter_spacing' => array( 'default' => '0px', 'range_settings' => array( 'min' => '0', 'max' => '8', 'step' => '1', ), ), 'hide_text_align' => true, ), ), 'background' => array(), 'custom_margin_padding' => array(), 'max_width' => array(), 'text' => array( 'toggle_slug' => 'links', ), 'filters' => array(), ); $this->custom_css_options = array( 'menu_link' => array( 'label' => esc_html__( 'Menu Link', 'et_builder' ), 'selector' => '.fullwidth-menu-nav li a', ), 'active_menu_link' => array( 'label' => esc_html__( 'Active Menu Link', 'et_builder' ), 'selector' => '.fullwidth-menu-nav li.current-menu-item a', ), 'dropdown_container' => array( 'label' => esc_html__( 'Dropdown Menu Container', 'et_builder' ), 'selector' => '.fullwidth-menu-nav li ul.sub-menu', ), 'dropdown_links' => array( 'label' => esc_html__( 'Dropdown Menu Links', 'et_builder' ), 'selector' => '.fullwidth-menu-nav li ul.sub-menu a', ), ); $this->fields_defaults = array( 'background_color' => array( '#ffffff', 'only_default_setting' ), 'background_layout' => array( 'light' ), 'text_orientation' => array( 'left' ), 'dropdown_menu_animation' => array( 'fade' ), ); } function get_fields() { $fields = array( 'menu_id' => array( 'label' => esc_html__( 'Menu', 'et_builder' ), 'type' => 'select', 'option_category' => 'basic_option', 'options' => et_builder_get_nav_menus_options(), 'description' => sprintf( '
%2$s. %3$s.
', 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( '__menu', ), ), 'background_layout' => array( 'label' => esc_html__( 'Text Color', 'et_builder' ), 'type' => 'select', 'option_category' => 'color_option', 'options' => array( 'light' => esc_html__( 'Dark', 'et_builder' ), 'dark' => esc_html__( 'Light', 'et_builder' ), ), 'tab_slug' => 'advanced', 'toggle_slug' => 'links', 'description' => esc_html__( 'Here you can choose the value of your text. If you are working with a dark background, then your text should be set to light. If you are working with a light background, then your text should be dark.', 'et_builder' ), ), 'submenu_direction' => array( 'label' => esc_html__( 'Sub-Menus Open', 'et_builder' ), 'type' => 'select', 'option_category' => 'configuration', 'options' => array( '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( '__menu', ), ), 'fullwidth_menu' => array( 'label' => esc_html__( 'Make Menu Links Fullwidth', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'layout', 'options' => array( 'off' => esc_html__( 'No', 'et_builder' ), 'on' => esc_html__( 'Yes', 'et_builder' ), ), 'tab_slug' => 'advanced', 'toggle_slug' => 'layout', ), 'active_link_color' => array( 'label' => esc_html__( 'Active Link Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'links', ), 'dropdown_menu_bg_color' => array( 'label' => esc_html__( 'Dropdown Menu Background Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'dropdown', ), 'dropdown_menu_line_color' => array( 'label' => esc_html__( 'Dropdown Menu Line Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'dropdown', ), 'dropdown_menu_text_color' => array( 'label' => esc_html__( 'Dropdown Menu Text Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'links', ), 'mobile_menu_bg_color' => array( 'label' => esc_html__( 'Mobile Menu Background Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'dropdown', ), 'mobile_menu_text_color' => array( 'label' => esc_html__( 'Mobile Menu Text Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'links', ), 'disabled_on' => array( 'label' => esc_html__( 'Disable on', 'et_builder' ), 'type' => 'multiple_checkboxes', 'options' => array( 'phone' => esc_html__( 'Phone', 'et_builder' ), 'tablet' => esc_html__( 'Tablet', 'et_builder' ), 'desktop' => esc_html__( 'Desktop', 'et_builder' ), ), 'additional_att' => 'disable_on', 'option_category' => 'configuration', 'description' => esc_html__( 'This will disable the module on selected devices', 'et_builder' ), 'tab_slug' => 'custom_css', 'toggle_slug' => 'visibility', ), 'admin_label' => array( 'label' => esc_html__( 'Admin Label', 'et_builder' ), 'type' => 'text', 'description' => esc_html__( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ), 'toggle_slug' => 'admin_label', ), 'module_id' => array( 'label' => esc_html__( 'CSS ID', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), 'module_class' => array( 'label' => esc_html__( 'CSS Class', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), '__menu' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Fullwidth_Menu', 'get_fullwidth_menu' ), 'computed_depends_on' => array( 'menu_id', 'submenu_direction', ), ), ); return $fields; } /** * Add the class with page ID to menu item so it can be easily found by ID in Frontend Builder * * @return menu item object */ static function modify_fullwidth_menu_item( $menu_item ) { if ( esc_url( home_url( '/' ) ) === $menu_item->url ) { $fw_menu_custom_class = 'et_pb_menu_page_id-home'; } else { $fw_menu_custom_class = 'et_pb_menu_page_id-' . $menu_item->object_id; } $menu_item->classes[] = $fw_menu_custom_class; return $menu_item; } /** * Get fullwidth menu markup for fullwidth menu module * * @return string of fullwidth menu markup */ static function get_fullwidth_menu( $args = array() ) { $defaults = array( 'submenu_direction' => '', 'menu_id' => '', ); // modify the menu item to include the required data add_filter( 'wp_setup_nav_menu_item', array( 'ET_Builder_Module_Fullwidth_Menu', 'modify_fullwidth_menu_item' ) ); $args = wp_parse_args( $args, $defaults ); $menu = ''; remove_filter( 'wp_setup_nav_menu_item', array( 'ET_Builder_Module_Fullwidth_Menu', 'modify_fullwidth_menu_item' ) ); return $menu; } function shortcode_callback( $atts, $content = null, $function_name ) { $module_id = $this->shortcode_atts['module_id']; $module_class = $this->shortcode_atts['module_class']; $background_color = $this->shortcode_atts['background_color']; $background_layout = $this->shortcode_atts['background_layout']; $menu_id = $this->shortcode_atts['menu_id']; $submenu_direction = $this->shortcode_atts['submenu_direction']; $fullwidth_menu = $this->shortcode_atts['fullwidth_menu'] === 'on' ? ' et_pb_fullwidth_menu_fullwidth' : ''; $active_link_color = $this->shortcode_atts['active_link_color']; $dropdown_menu_bg_color = $this->shortcode_atts['dropdown_menu_bg_color']; $dropdown_menu_line_color = $this->shortcode_atts['dropdown_menu_line_color']; $dropdown_menu_text_color = $this->shortcode_atts['dropdown_menu_text_color']; $dropdown_menu_animation = $this->shortcode_atts['dropdown_menu_animation']; $mobile_menu_bg_color = $this->shortcode_atts['mobile_menu_bg_color']; $mobile_menu_text_color = $this->shortcode_atts['mobile_menu_text_color']; $style = ''; if ( '' !== $background_color ) { $style .= sprintf( ' style="background-color: %s;"', esc_attr( $background_color ) ); } $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name ); $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); $class = " et_pb_module et_pb_bg_layout_{$background_layout}{$this->get_text_orientation_classname()} et_dropdown_animation_{$dropdown_menu_animation}{$fullwidth_menu}"; $menu = self::get_fullwidth_menu( array( 'menu_id' => $menu_id, 'submenu_direction' => $submenu_direction, ) ); if ( '' !== $active_link_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%%.et_pb_fullwidth_menu ul li.current-menu-item a', 'declaration' => sprintf( 'color: %1$s !important;', esc_html( $active_link_color ) ), ) ); } if ( '' !== $background_color || '' !== $dropdown_menu_bg_color ) { $et_menu_bg_color = '' !== $dropdown_menu_bg_color ? $dropdown_menu_bg_color : $background_color; ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%%.et_pb_fullwidth_menu .nav li ul', 'declaration' => sprintf( 'background-color: %1$s !important;', esc_html( $et_menu_bg_color ) ), ) ); } if ( '' !== $dropdown_menu_line_color ) { $dropdown_menu_line_color_selector = 'upwards' === $submenu_direction ? '%%order_class%%.et_pb_fullwidth_menu .fullwidth-menu-nav > ul.upwards li ul' : '%%order_class%%.et_pb_fullwidth_menu .nav li ul'; ET_Builder_Element::set_style( $function_name, array( 'selector' => $dropdown_menu_line_color_selector, 'declaration' => sprintf( 'border-color: %1$s;', esc_html( $dropdown_menu_line_color ) ), ) ); ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%%.et_pb_fullwidth_menu .et_mobile_menu', 'declaration' => sprintf( 'border-color: %1$s;', esc_html( $dropdown_menu_line_color ) ), ) ); } if ( '' !== $dropdown_menu_text_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%%.et_pb_fullwidth_menu .nav li ul a', 'declaration' => sprintf( 'color: %1$s !important;', esc_html( $dropdown_menu_text_color ) ), ) ); } if ( '' !== $mobile_menu_bg_color || '' !== $background_color ) { $et_menu_bg_color_mobile = '' !== $mobile_menu_bg_color ? $mobile_menu_bg_color : $background_color; ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%%.et_pb_fullwidth_menu .et_mobile_menu, %%order_class%%.et_pb_fullwidth_menu .et_mobile_menu ul', 'declaration' => sprintf( 'background-color: %1$s !important;', esc_html( $et_menu_bg_color_mobile ) ), ) ); } if ( '' !== $mobile_menu_text_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%%.et_pb_fullwidth_menu .et_mobile_menu a', 'declaration' => sprintf( 'color: %1$s !important;', esc_html( $mobile_menu_text_color ) ), ) ); } $output = sprintf( ' ', $menu, $style, esc_attr( $class ), ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ), ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ), '' !== $video_background ? ' et_pb_section_video et_pb_preload' : '', $video_background, '' !== $parallax_image_background ? ' et_pb_section_parallax' : '', $parallax_image_background, 'upwards' === $submenu_direction ? ' et_pb_mobile_menu_upwards' : '' ); return $output; } public function process_box_shadow( $function_name ) { $boxShadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' ); $selector = sprintf('.%1$s, .%1$s .sub-menu', self::get_module_order_class( $function_name )); self::set_style( $function_name, $boxShadow->get_style( $selector, $this->shortcode_atts ) ); } } new ET_Builder_Module_Fullwidth_Menu;