), ) ); // Menu items text color (replaces the ['fonts']['menu_item']['text_color'] advanced field setting CSS) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'menu_item_text_color', 'selector' => "{$dvmmv_inner} li.menu-item > a, {$dvmmv_inner} .dvmm_submenu_header", 'hover_selector' => "{$dvmmv_inner} li.menu-item > a:hover, {$dvmmv_inner} .dvmm_submenu_header a:hover, {$dvmmv_inner} .dvmm_submenu_header a:hover .dvmm_back, {$dvmmv_inner} .dvmm_submenu_header .dvmm_back_home:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Active link color $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'link_color_active', 'selector' => "{$current_item_ancestor} > a, {$current_item_parent} > a, {$current_item} > a", 'hover_selector' => "{$current_item_ancestor} > a:hover, {$current_item_parent} > a:hover, {$current_item} > a:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu items text color (replaces the ['fonts']['submenu_item']['text_color'] advanced field setting CSS) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'submenu_item_text_color', 'selector' => "{$dvmmv_inner} li li.menu-item > a", 'hover_selector' => "{$dvmmv_inner} li li.menu-item > a:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu active link color $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_link_color_active', 'selector' => "{$current_sub_item_ancestor} > a, {$current_sub_item_parent} > a, {$current_sub_item} > a", 'hover_selector' => "{$current_sub_item_ancestor} > a:hover, {$current_sub_item_parent} > a:hover, {$current_sub_item} > a:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Parent link color $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'parent_color', 'selector' => "{$dvmmv_inner} li.menu-item-has-children > a, {$dvmmv_inner} .menu-item-has-children .dvmm_submenu_header", 'hover_selector' => "{$dvmmv_inner} li.menu-item-has-children > a:hover, {$dvmmv_inner} .menu-item-has-children .dvmm_submenu_header a:hover, {$dvmmv_inner} .menu-item-has-children .dvmm_submenu_header a:hover .dvmm_back, {$dvmmv_inner} .menu-item-has-children .dvmm_submenu_header .dvmm_back_home:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu parent link color $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_parent_color', 'selector' => "{$dvmmv_inner} li li.menu-item-has-children > a", 'hover_selector' => "{$dvmmv_inner} li li.menu-item-has-children > a:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // generate this for "Expand" submenus only if($module->props['submenu_style'] === 'expand'){ // Parent link color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'parent_color_open', 'selector' => "{$dvmmv_inner} li.menu-item-has-children > a.visible", 'hover_selector' => "{$dvmmv_inner} li.menu-item-has-children > a.visible:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu parent link color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_parent_color_open', 'selector' => "{$dvmmv_inner} li li.menu-item-has-children > a.visible", 'hover_selector' => "{$dvmmv_inner} li li.menu-item-has-children > a.visible:hover", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Parent Item background color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'parent_bg_color_open', 'selector' => "{$dvmmv_inner} li.menu-item-has-children > a.visible", 'hover_selector' => "{$dvmmv_inner} li.menu-item-has-children > a.visible:hover", 'type' => 'color', 'css_property' => 'background-color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu parent Item background color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_parent_bg_color_open', 'selector' => "{$dvmmv_inner} li li.menu-item-has-children > a.visible", 'hover_selector' => "{$dvmmv_inner} li li.menu-item-has-children > a.visible:hover", 'type' => 'color', 'css_property' => 'background-color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Parent item icon color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'parent_icon_color_open', 'selector' => "{$dvmmv_inner} a.visible > .dvmm_submenu_toggle", 'hover_selector' => "{$dvmmv_inner} a.visible:hover > .dvmm_submenu_toggle", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu parent item icon color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_parent_icon_color_open', 'selector' => "{$dvmmv_inner} li li a.visible > .dvmm_submenu_toggle", 'hover_selector' => "{$dvmmv_inner} li li a.visible:hover > .dvmm_submenu_toggle", 'type' => 'color', 'css_property' => 'color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Parent item icon background color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'parent_icon_bg_color_open', 'selector' => "{$dvmmv_inner} a.visible > .dvmm_submenu_toggle", 'hover_selector' => "{$dvmmv_inner} a.visible:hover > .dvmm_submenu_toggle", 'type' => 'color', 'css_property' => 'background-color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu parent item icon background color (Open) $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_parent_icon_bg_color_open', 'selector' => "{$dvmmv_inner} li li a.visible > .dvmm_submenu_toggle", 'hover_selector' => "{$dvmmv_inner} li li a.visible:hover > .dvmm_submenu_toggle", 'type' => 'color', 'css_property' => 'background-color', 'render_slug' => $render_slug, 'important' => array('hover') ) ); // Submenu padding $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_padding', 'selector' => "{$dvmm_menu} li ul", 'hover_selector' => "{$dvmm_menu} li ul:hover", 'type' => 'custom_padding', 'css_property' => 'padding', 'render_slug' => $render_slug, 'important' => array('hover'), 'processor' => array( 'DVMM_Module_Helper_Style_Processor', 'process_margin_padding_styles', ) ) ); } // Item padding $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'item_padding', 'selector' => "{$dvmm_menu} li.menu-item > a", 'hover_selector' => "{$dvmm_menu} li.menu-item > a:hover", 'type' => 'custom_padding', 'css_property' => 'padding', 'render_slug' => $render_slug, 'important' => array('hover'), 'processor' => array( 'DVMM_Module_Helper_Style_Processor', 'process_margin_padding_styles', ) ) ); // Submenu item padding $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_item_padding', 'selector' => "{$dvmm_menu} li li.menu-item > a", 'hover_selector' => "{$dvmm_menu} li li.menu-item > a:hover", 'type' => 'custom_padding', 'css_property' => 'padding', 'render_slug' => $render_slug, 'important' => array('hover'), 'processor' => array( 'DVMM_Module_Helper_Style_Processor', 'process_margin_padding_styles', ) ) ); // Item margin $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'item_margin', 'selector' => "{$dvmm_menu} li.menu-item", 'hover_selector' => "{$dvmm_menu} li.menu-item:hover", 'type' => 'custom_margin', 'css_property' => 'margin', 'render_slug' => $render_slug, 'important' => array('hover'), 'processor' => array( 'DVMM_Module_Helper_Style_Processor', 'process_margin_padding_styles', ) ) ); // Submenu item margin $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_item_margin', 'selector' => "{$dvmm_menu} li li.menu-item", 'hover_selector' => "{$dvmm_menu} li li.menu-item:hover", 'type' => 'custom_margin', 'css_property' => 'margin', 'render_slug' => $render_slug, 'important' => array('hover'), 'processor' => array( 'DVMM_Module_Helper_Style_Processor', 'process_margin_padding_styles', ) ) ); // generate this for "Expand" submenus only if($module->props['submenu_style'] === 'expand'){ // Submenu margin $module->helpers()->generate_styles( $module, array( 'base_attr_name' => 'sub_margin', 'selector' => "{$dvmm_menu} li ul", 'hover_selector' => "{$dvmm_menu} li ul:hover", 'type' => 'custom_margin', 'css_property' => 'margin', 'render_slug' => $render_slug, 'important' => array('hover'), 'processor' => array( 'DVMM_Module_Helper_Style_Processor', 'process_margin_padding_styles', ) ) ); } } /** * Module Data. * * The data that will be added to the inline JS script. * * @since v1.9.0 * * @param object $module Module object. * @param string $processed_props Processed props. * @param string $render_slug Module slug. * @param string $element_name Element name ('vertical_menu'). * * @return string Element's data. */ public static function inline_script_data( $module, $processed_props, $render_slug, $element_name ){ $element_type = 'default'; // hardcoded till the "element_type" prop is introduced $collapse_submenus = $module->props['collapse_submenus']; // Submenus data if($element_type !== 'default' || $collapse_submenus !== 'on'){ $submenusData = ''; } else { $parent_links = $module->props["parent_links"]; $accordion_mode = $module->props["accordion_mode"]; $submenu_style = $module->props["submenu_style"]; $use_submenu_header_text = $module->props["use_submenu_header_text"]; $submenu_header_text = $module->props["submenu_header_text"]; // Maybe clickable parent links $parentClickable = sprintf('parentClickable: "%1$s",', esc_attr( $parent_links )); if($submenu_style === 'expand'){ $accordionMode = sprintf('accordionMode: "%1$s",', esc_attr( $accordion_mode ));; $useSubmenuHeaderText = ''; $submenuHeaderText = ''; } else { $accordionMode = ''; $useSubmenuHeaderText = sprintf('useSubmenuHeaderText: "%1$s",', esc_attr( $use_submenu_header_text )); $submenuHeaderText = $use_submenu_header_text === 'custom' ? sprintf('submenuHeaderText: "%1$s",', esc_attr( $submenu_header_text )) : ''; } $submenusData = sprintf('submenus: {%1$s submenuStyle:"%2$s",%3$s%4$s%5$s},', et_core_esc_previously( $parentClickable ), // %1$s esc_attr( $submenu_style ), // %2$s et_core_esc_previously( $accordionMode ), // %3$s et_core_esc_previously( $useSubmenuHeaderText ), // %4$s et_core_esc_previously( $submenuHeaderText ) // %5$s ); } /** * All data. */ $data = sprintf('%1$s: {element_type: "%2$s",collapseSubmenus: "%3$s",%4$s}', esc_attr( $element_name ), // %1$s esc_attr( $element_type ), // %2$s esc_attr( $collapse_submenus ), // %3$s et_core_esc_previously( $submenusData ) // %4$s ); return $data; } /** * Generate menu markup. * * @since v1.9.0 * * @param object $module Module object. * @param array $processed_props Processed props. * @param string $render_slug Module slug. * @param array $args Arguments * @param function $get_the_menu Get the menu markup by its ID (). * * @return string Menu HTML * */ static function menu_markup( $module, $processed_props, $render_slug, $args, $get_the_menu ){ // get the menu HTML () $menu = $get_the_menu( $args ); $menu_HTML = sprintf( '%1$s', $menu ); return $menu_HTML; } /** * Manage assigned menus. * * Outputs assigned menus. * * @since v1.9.0 * * @param object $module Module object. * @param array $processed_props Processed props. * @param string $render_slug Module slug. * @param function $get_the_menu Get the menu markup by its ID (). * * @return string Updated assigned menus (desktop, tablet and phone). * */ public static function menus( $module, $processed_props, $render_slug, $get_the_menu ){ // props $menu_id = $processed_props['menu_id']['desktop']; $menu_id_tablet = $processed_props['menu_id']['tablet']; $menu_id_phone = $processed_props['menu_id']['phone']; $menu_id_responsive = $processed_props['menu_id']['responsive']; // menus html $all_menus = ''; $menu_desktop = ''; $menu_tablet = ''; $menu_phone = ''; // don't render duplicate menus if the same menu is set to more than one device $render_tablet_menu = $menu_id_tablet !== $menu_id ? true : false; $render_phone_menu = $menu_id_phone !== $menu_id_tablet && $menu_id_phone !== $menu_id ? true : false; // add the Desktop menu $menu_desktop = self::menu_markup( $module, $processed_props, $render_slug, array( 'menu_id' => $menu_id, 'menu_type' => 'desktop', ), $get_the_menu ); // if responsive menus enabled if ( $menu_id_responsive === 'on' ){ // if tablet menu is assigned: remove 'Desktop' and add Tablet menu if ( isset($menu_id_tablet) && $menu_id_tablet !== '' && $render_tablet_menu === true ){ // add the Tablet menu $menu_tablet = self::menu_markup( $module, $processed_props, $render_slug, array( 'menu_id' => $menu_id_tablet, 'menu_type' => 'tablet', ), $get_the_menu ); } // if phone menu assigned: add Phone menu if ( isset($menu_id_phone) && $menu_id_phone !== '' && $render_phone_menu === true ){ // add the Phone menu $menu_phone = self::menu_markup( $module, $processed_props, $render_slug, array( 'menu_id' => $menu_id_phone, 'menu_type' => 'phone', ), $get_the_menu ); } } // Generate the menu(s) HTML markup $all_menus .= $menu_desktop; $all_menus .= $menu_tablet; $all_menus .= $menu_phone; return $all_menus; } /** * Render. * * @since v1.9.0 */ public function render( $attrs, $content, $render_slug ) { // Module classnames // $module->remove_classname( 'et_pb_with_border' ); // module order class $module_order_class = ET_Builder_Element::get_module_order_class( $render_slug ); /** * PROPS */ // get the menu values (devices, hover and responsive) array with $force_return = true (return any value found) $menu_id = $this->helpers()->get_property_values_all( $this->props, 'menu_id', 'none', true ); $collapse_submenus = isset($this->props['collapse_submenus']) ? $this->props['collapse_submenus'] : 'off'; $parent_links = isset($this->props['parent_links']) ? $this->props['parent_links'] : 'disabled'; $accordion_mode = isset($this->props['accordion_mode']) ? $this->props['accordion_mode'] : 'off'; // Is DB Plugin active $is_dbp = et_is_builder_plugin_active(); // The 'additional_css' value (the !important). Add '!important' if DB Plugin is active. Need to override some default CSS applied by the DB Plugin. $additional_css = $is_dbp ? ' !important;' : ''; /** * PROPCESSED PROPS */ $processed_props = array( 'menu_id' => $menu_id, 'collapse_submenus' => $collapse_submenus, 'parent_links' => $parent_links, 'accordion_mode' => $accordion_mode, 'module_order_class' => $module_order_class, 'module_classname' => $this->module_classname( $render_slug ), 'is_dbp' => $is_dbp, 'additional_css' => $additional_css, ); /** * INLINE JS SCRIPT */ // module data $menu_inline_script_data = self::inline_script_data( $this, $processed_props, $render_slug, 'vertical_menu' ); // $menu_data = $menu_inline_script_data !== '' ? "$menu_inline_script_data," : ''; // If any inline scripts data available $any_script_data = $menu_data === '' ? false : true; // All inline script data $inline_script = $any_script_data === true ? sprintf('var %1$s_inline_script_data = {%2$s}', esc_attr( $module_order_class ), // %1$s et_core_esc_previously( $menu_data ) // %2$s ) : ''; // Add the inline script if ($inline_script !== ''){ wp_add_inline_script( "divi-mad-menu-frontend-bundle", $inline_script, 'before' ); } /** * CSS */ // add misc CSS self::miscCss( $this, $render_slug, $processed_props ); // add menu css self::css( $this, $render_slug ); /** * CSS CLASSES */ // get the menu inner container classes $inner_container_classes = implode(' ', self::css_classes( $this, $processed_props ) ); /** * DATA ATTRIBUTES */ // get the menu inner container data attributes $inner_container_data_attrs = implode(' ', self::data_attributes( $this, $processed_props ) ); /** * MENUS */ // get the menu(s) $all_menus = self::menus( $this, $processed_props, $render_slug, 'dvmm_madmenu_get_the_menu' ); // Output $output = sprintf( '
', esc_attr( $inner_container_classes ), // %1$s $inner_container_data_attrs, // %2$s $all_menus // %3$s ); return $output; } } new DVMMV_MadMenu_Vertical;