name = esc_html__( 'Tabs', 'et_builder' ); $this->slug = 'et_pb_tabs'; $this->fb_support = true; $this->child_slug = 'et_pb_tab'; $this->child_item_text = esc_html__( 'Tab', 'et_builder' ); $this->whitelisted_fields = array( 'admin_label', 'module_id', 'module_class', 'active_tab_background_color', 'inactive_tab_background_color', ); $this->main_css_element = '%%order_class%%.et_pb_tabs'; $this->advanced_options = array( 'border' => array( 'css' => array( 'main' => array( 'border_radii' => $this->main_css_element, 'border_styles' => $this->main_css_element, ), ), 'defaults' => array( 'border_radii' => 'on|0px|0px|0px|0px', 'border_styles' => array( 'width' => '1px', 'color' => '#d9d9d9', 'style' => 'solid', ), ), ), 'fonts' => array( 'tab' => array( 'label' => esc_html__( 'Tab', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_tabs_controls li, {$this->main_css_element} .et_pb_tabs_controls li a", 'color' => "{$this->main_css_element} .et_pb_tabs_controls li a", ), 'hide_text_align' => true, ), 'body' => array( 'label' => esc_html__( 'Body', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_all_tabs .et_pb_tab", 'plugin_main' => "{$this->main_css_element} .et_pb_all_tabs .et_pb_tab, {$this->main_css_element} .et_pb_all_tabs .et_pb_tab p", 'line_height' => "{$this->main_css_element} .et_pb_tab p", ), ), ), 'background' => array( 'css' => array( 'main' => "{$this->main_css_element} .et_pb_all_tabs", ), 'settings' => array( 'color' => 'alpha', ), ), 'custom_margin_padding' => array( 'css' => array( 'padding' => '%%order_class%% .et_pb_tab', 'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling ), ), 'max_width' => array(), 'filters' => array(), ); $this->custom_css_options = array( 'tabs_controls' => array( 'label' => esc_html__( 'Tabs Controls', 'et_builder' ), 'selector' => '.et_pb_tabs_controls', ), 'tab' => array( 'label' => esc_html__( 'Tab', 'et_builder' ), 'selector' => '.et_pb_tabs_controls li', ), 'active_tab' => array( 'label' => esc_html__( 'Active Tab', 'et_builder' ), 'selector' => '.et_pb_tabs_controls li.et_pb_tab_active', ), 'tabs_content' => array( 'label' => esc_html__( 'Tabs Content', 'et_builder' ), 'selector' => '.et_pb_tab', ), ); } function get_fields() { $fields = array( 'active_tab_background_color' => array( 'label' => esc_html__( 'Active Tab Background Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'tab', ), 'inactive_tab_background_color' => array( 'label' => esc_html__( 'Inactive Tab Background Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'tab', ), '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', ), ); return $fields; } function shortcode_callback( $atts, $content = null, $function_name ) { $module_id = $this->shortcode_atts['module_id']; $module_class = $this->shortcode_atts['module_class']; $active_tab_background_color = $this->shortcode_atts['active_tab_background_color']; $inactive_tab_background_color = $this->shortcode_atts['inactive_tab_background_color']; $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name ); $all_tabs_content = $this->shortcode_content; global $et_pb_tab_titles; global $et_pb_tab_classes; if ( '' !== $inactive_tab_background_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%% .et_pb_tabs_controls li', 'declaration' => sprintf( 'background-color: %1$s;', esc_html( $inactive_tab_background_color ) ), ) ); } if ( '' !== $active_tab_background_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%% .et_pb_tabs_controls li.et_pb_tab_active', 'declaration' => sprintf( 'background-color: %1$s;', esc_html( $active_tab_background_color ) ), ) ); } $tabs = ''; $i = 0; if ( ! empty( $et_pb_tab_titles ) ) { foreach ( $et_pb_tab_titles as $tab_title ){ ++$i; $tabs .= sprintf( '
  • %2$s
  • ', ( 1 == $i ? ' et_pb_tab_active' : '' ), esc_html( $tab_title ), esc_attr( ltrim( $et_pb_tab_classes[ $i-1 ] ) ) ); } } $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); $et_pb_tab_titles = $et_pb_tab_classes = array(); $output = sprintf( ' %8$s %6$s
    %2$s
    ', $tabs, $all_tabs_content, ( '' !== $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' : '', // 5 $video_background, '' !== $parallax_image_background ? ' et_pb_section_parallax' : '', $parallax_image_background, $this->get_text_orientation_classname() ); return $output; } public function process_box_shadow( $function_name ) { $boxShadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' ); $style = $boxShadow->get_value( $this->shortcode_atts ); if ( empty( $style ) ) { return; } $selector = $boxShadow->is_inset( $style ) ? '%%order_class%% .et-pb-active-slide' : '%%order_class%%'; self::set_style( $function_name, array( 'selector' => $selector, 'declaration' => $style ) ); } } new ET_Builder_Module_Tabs;