<?php

[0] Fix | Delete

[1] Fix | Delete

class ET_Builder_Module_Tabs extends ET_Builder_Module {

[2] Fix | Delete

function init() {

[3] Fix | Delete

$this->name = esc_html__( 'Tabs', 'et_builder' );

[4] Fix | Delete

$this->plural = esc_html__( 'Tabs', 'et_builder' );

[5] Fix | Delete

$this->slug = 'et_pb_tabs';

[6] Fix | Delete

$this->vb_support = 'on';

[7] Fix | Delete

$this->child_slug = 'et_pb_tab';

[8] Fix | Delete

$this->child_item_text = esc_html__( 'Tab', 'et_builder' );

[9] Fix | Delete

$this->main_css_element = '%%order_class%%.et_pb_tabs';

[10] Fix | Delete

[11] Fix | Delete

$this->advanced_fields = array(

[12] Fix | Delete

'borders' => array(

[13] Fix | Delete

'default' => array(

[14] Fix | Delete

'css' => array(

[15] Fix | Delete

'main' => array(

[16] Fix | Delete

'border_radii' => $this->main_css_element,

[17] Fix | Delete

'border_styles' => $this->main_css_element,

[18] Fix | Delete

),

[19] Fix | Delete

),

[20] Fix | Delete

'defaults' => array(

[21] Fix | Delete

'border_radii' => 'on||||',

[22] Fix | Delete

'border_styles' => array(

[23] Fix | Delete

'width' => '1px',

[24] Fix | Delete

'color' => '#d9d9d9',

[25] Fix | Delete

'style' => 'solid',

[26] Fix | Delete

),

[27] Fix | Delete

),

[28] Fix | Delete

),

[29] Fix | Delete

),

[30] Fix | Delete

'fonts' => array(

[31] Fix | Delete

'body' => array(

[32] Fix | Delete

'label' => et_builder_i18n( 'Body' ),

[33] Fix | Delete

'css' => array(

[34] Fix | Delete

'main' => "{$this->main_css_element} .et_pb_all_tabs .et_pb_tab",

[35] Fix | Delete

'limited_main' => "{$this->main_css_element} .et_pb_all_tabs .et_pb_tab, {$this->main_css_element} .et_pb_all_tabs .et_pb_tab p",

[36] Fix | Delete

'line_height' => "{$this->main_css_element} .et_pb_tab p",

[37] Fix | Delete

),

[38] Fix | Delete

'block_elements' => array(

[39] Fix | Delete

'tabbed_subtoggles' => true,

[40] Fix | Delete

'bb_icons_support' => true,

[41] Fix | Delete

),

[42] Fix | Delete

),

[43] Fix | Delete

'tab' => array(

[44] Fix | Delete

'label' => esc_html__( 'Tab', 'et_builder' ),

[45] Fix | Delete

'css' => array(

[46] Fix | Delete

'main' => "{$this->main_css_element} .et_pb_tabs_controls li, {$this->main_css_element} .et_pb_tabs_controls li a",

[47] Fix | Delete

'color' => "{$this->main_css_element} .et_pb_tabs_controls li a",

[48] Fix | Delete

'hover' => "{$this->main_css_element} .et_pb_tabs_controls li:hover, {$this->main_css_element} .et_pb_tabs_controls li:hover a",

[49] Fix | Delete

'color_hover' => "{$this->main_css_element} .et_pb_tabs_controls li:hover a",

[50] Fix | Delete

),

[51] Fix | Delete

'hide_text_align' => true,

[52] Fix | Delete

'options_priority' => array(

[53] Fix | Delete

'tab_text_color' => 9,

[54] Fix | Delete

),

[55] Fix | Delete

),

[56] Fix | Delete

),

[57] Fix | Delete

'background' => array(

[58] Fix | Delete

'css' => array(

[59] Fix | Delete

'main' => "{$this->main_css_element} .et_pb_all_tabs",

[60] Fix | Delete

),

[61] Fix | Delete

'settings' => array(

[62] Fix | Delete

'color' => 'alpha',

[63] Fix | Delete

),

[64] Fix | Delete

),

[65] Fix | Delete

'margin_padding' => array(

[66] Fix | Delete

'css' => array(

[67] Fix | Delete

'padding' => '%%order_class%% .et_pb_tab',

[68] Fix | Delete

'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling

[69] Fix | Delete

),

[70] Fix | Delete

),

[71] Fix | Delete

'text' => false,

[72] Fix | Delete

'button' => false,

[73] Fix | Delete

);

[74] Fix | Delete

[75] Fix | Delete

$this->custom_css_fields = array(

[76] Fix | Delete

'tabs_controls' => array(

[77] Fix | Delete

'label' => esc_html__( 'Tabs Controls', 'et_builder' ),

[78] Fix | Delete

'selector' => '.et_pb_tabs_controls',

[79] Fix | Delete

),

[80] Fix | Delete

'tab' => array(

[81] Fix | Delete

'label' => esc_html__( 'Tab', 'et_builder' ),

[82] Fix | Delete

'selector' => '.et_pb_tabs_controls li',

[83] Fix | Delete

),

[84] Fix | Delete

'active_tab' => array(

[85] Fix | Delete

'label' => esc_html__( 'Active Tab', 'et_builder' ),

[86] Fix | Delete

'selector' => '.et_pb_tabs_controls li.et_pb_tab_active',

[87] Fix | Delete

),

[88] Fix | Delete

'tabs_content' => array(

[89] Fix | Delete

'label' => esc_html__( 'Tabs Content', 'et_builder' ),

[90] Fix | Delete

'selector' => '.et_pb_tab',

[91] Fix | Delete

),

[92] Fix | Delete

);

[93] Fix | Delete

[94] Fix | Delete

$this->help_videos = array(

[95] Fix | Delete

array(

[96] Fix | Delete

'id' => 'xk2Ite-oFhg',

[97] Fix | Delete

'name' => esc_html__( 'An introduction to the Tabs module', 'et_builder' ),

[98] Fix | Delete

),

[99] Fix | Delete

);

[100] Fix | Delete

}

[101] Fix | Delete

[102] Fix | Delete

function get_fields() {

[103] Fix | Delete

$fields = array(

[104] Fix | Delete

'active_tab_background_color' => array(

[105] Fix | Delete

'label' => esc_html__( 'Active Tab Background Color', 'et_builder' ),

[106] Fix | Delete

'description' => esc_html__( 'Pick a color to be used for active tab backgrounds. You can assign a unique color to active tabs to differentiate them from inactive tabs.', 'et_builder' ),

[107] Fix | Delete

'type' => 'color-alpha',

[108] Fix | Delete

'custom_color' => true,

[109] Fix | Delete

'tab_slug' => 'advanced',

[110] Fix | Delete

'toggle_slug' => 'tab',

[111] Fix | Delete

'hover' => 'tabs',

[112] Fix | Delete

'mobile_options' => true,

[113] Fix | Delete

),

[114] Fix | Delete

'inactive_tab_background_color' => array(

[115] Fix | Delete

'label' => esc_html__( 'Inactive Tab Background Color', 'et_builder' ),

[116] Fix | Delete

'description' => esc_html__( 'Pick a color to be used for inactive tab backgrounds. You can assign a unique color to inactive tabs to differentiate them from active tabs.', 'et_builder' ),

[117] Fix | Delete

'type' => 'color-alpha',

[118] Fix | Delete

'custom_color' => true,

[119] Fix | Delete

'tab_slug' => 'advanced',

[120] Fix | Delete

'toggle_slug' => 'tab',

[121] Fix | Delete

'hover' => 'tabs',

[122] Fix | Delete

'mobile_options' => true,

[123] Fix | Delete

),

[124] Fix | Delete

'active_tab_text_color' => array(

[125] Fix | Delete

'label' => esc_html__( 'Active Tab Text Color', 'et_builder' ),

[126] Fix | Delete

'description' => esc_html__( 'Pick a color to use for tab text within active tabs. You can assign a unique color to active tabs to differentiate them from inactive tabs.', 'et_builder' ),

[127] Fix | Delete

'type' => 'color-alpha',

[128] Fix | Delete

'custom_color' => true,

[129] Fix | Delete

'tab_slug' => 'advanced',

[130] Fix | Delete

'toggle_slug' => 'tab',

[131] Fix | Delete

'hover' => 'tabs',

[132] Fix | Delete

'mobile_options' => true,

[133] Fix | Delete

),

[134] Fix | Delete

);

[135] Fix | Delete

return $fields;

[136] Fix | Delete

}

[137] Fix | Delete

[138] Fix | Delete

public function get_transition_fields_css_props() {

[139] Fix | Delete

$fields = parent::get_transition_fields_css_props();

[140] Fix | Delete

[141] Fix | Delete

$fields['inactive_tab_background_color'] = array( 'background-color' => '%%order_class%% .et_pb_tabs_controls li' );

[142] Fix | Delete

$fields['active_tab_background_color'] = array( 'background-color' => '%%order_class%% .et_pb_tabs_controls li' );

[143] Fix | Delete

$fields['active_tab_text_color'] = array( 'color' => '%%order_class%% .et_pb_tabs_controls li a' );

[144] Fix | Delete

[145] Fix | Delete

return $fields;

[146] Fix | Delete

}

[147] Fix | Delete

[148] Fix | Delete

/**

[149] Fix | Delete

* Outputs tabs module nav markup

[150] Fix | Delete

* The nav output is abstracted into method so tabs module can be extended

[151] Fix | Delete

*

[152] Fix | Delete

* @since 3.29

[153] Fix | Delete

*

[154] Fix | Delete

* @return string

[155] Fix | Delete

*/

[156] Fix | Delete

public function get_tabs_nav() {

[157] Fix | Delete

global $et_pb_tab_titles;

[158] Fix | Delete

global $et_pb_tab_classes;

[159] Fix | Delete

[160] Fix | Delete

$tabs = '';

[161] Fix | Delete

[162] Fix | Delete

$i = 0;

[163] Fix | Delete

if ( ! empty( $et_pb_tab_titles ) ) {

[164] Fix | Delete

foreach ( $et_pb_tab_titles as $tab_title ){

[165] Fix | Delete

++$i;

[166] Fix | Delete

$tabs .= sprintf( '<li class="%3$s%1$s">%2$s</li>',

[167] Fix | Delete

( 1 === $i ? ' et_pb_tab_active' : '' ),

[168] Fix | Delete

et_pb_multi_view_options( $this )->render_element( array(

[169] Fix | Delete

'tag' => 'a',

[170] Fix | Delete

'content' => '{{tab_title}}',

[171] Fix | Delete

'attrs' => array(

[172] Fix | Delete

'href' => '#',

[173] Fix | Delete

),

[174] Fix | Delete

'custom_props' => array(

[175] Fix | Delete

'tab_title' => $tab_title,

[176] Fix | Delete

)

[177] Fix | Delete

) ),

[178] Fix | Delete

esc_attr( ltrim( $et_pb_tab_classes[ $i-1 ] ) )

[179] Fix | Delete

);

[180] Fix | Delete

}

[181] Fix | Delete

}

[182] Fix | Delete

[183] Fix | Delete

return $tabs;

[184] Fix | Delete

}

[185] Fix | Delete

[186] Fix | Delete

/**

[187] Fix | Delete

* Outputs tabs content markup

[188] Fix | Delete

* The tabs content is abstracted into method so tabs module can be extended

[189] Fix | Delete

*

[190] Fix | Delete

* @since 3.29

[191] Fix | Delete

*

[192] Fix | Delete

* @return string

[193] Fix | Delete

*/

[194] Fix | Delete

public function get_tabs_content() {

[195] Fix | Delete

return $this->content;

[196] Fix | Delete

}

[197] Fix | Delete

[198] Fix | Delete

function render( $attrs, $content = null, $render_slug ) {

[199] Fix | Delete

$active_tab_background_color_hover = $this->get_hover_value( 'active_tab_background_color' );

[200] Fix | Delete

$active_tab_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'active_tab_background_color' );

[201] Fix | Delete

$inactive_tab_background_color_hover = $this->get_hover_value( 'inactive_tab_background_color' );

[202] Fix | Delete

$inactive_tab_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'inactive_tab_background_color' );

[203] Fix | Delete

$active_tab_text_color_hover = $this->get_hover_value( 'active_tab_text_color' );

[204] Fix | Delete

$active_tab_text_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'active_tab_text_color' );

[205] Fix | Delete

[206] Fix | Delete

$all_tabs_content = $this->get_tabs_content();

[207] Fix | Delete

[208] Fix | Delete

global $et_pb_tab_titles;

[209] Fix | Delete

global $et_pb_tab_classes;

[210] Fix | Delete

[211] Fix | Delete

// Inactive Tab Background Color.

[212] Fix | Delete

et_pb_responsive_options()->generate_responsive_css( $inactive_tab_background_color_values, '%%order_class%% .et_pb_tabs_controls li', 'background-color', $render_slug, '', 'color' );

[213] Fix | Delete

[214] Fix | Delete

if ( et_builder_is_hover_enabled( 'inactive_tab_background_color', $this->props ) ) {

[215] Fix | Delete

ET_Builder_Element::set_style( $render_slug, array(

[216] Fix | Delete

'selector' => '%%order_class%% .et_pb_tabs_controls li:hover',

[217] Fix | Delete

'declaration' => sprintf(

[218] Fix | Delete

'background-color: %1$s;',

[219] Fix | Delete

esc_html( $inactive_tab_background_color_hover )

[220] Fix | Delete

),

[221] Fix | Delete

) );

[222] Fix | Delete

}

[223] Fix | Delete

[224] Fix | Delete

// Active Tab Background Color.

[225] Fix | Delete

et_pb_responsive_options()->generate_responsive_css( $active_tab_background_color_values, '%%order_class%% .et_pb_tabs_controls li.et_pb_tab_active', 'background-color', $render_slug, '', 'color' );

[226] Fix | Delete

[227] Fix | Delete

if ( et_builder_is_hover_enabled( 'active_tab_background_color', $this->props ) ) {

[228] Fix | Delete

ET_Builder_Element::set_style( $render_slug, array(

[229] Fix | Delete

'selector' => '%%order_class%% .et_pb_tabs_controls li.et_pb_tab_active:hover',

[230] Fix | Delete

'declaration' => sprintf(

[231] Fix | Delete

'background-color: %1$s;',

[232] Fix | Delete

esc_html( $active_tab_background_color_hover )

[233] Fix | Delete

),

[234] Fix | Delete

) );

[235] Fix | Delete

}

[236] Fix | Delete

[237] Fix | Delete

// Active Text Color

[238] Fix | Delete

et_pb_responsive_options()->generate_responsive_css( $active_tab_text_color_values, '%%order_class%%.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a', 'color', $render_slug, ' !important;', 'color' );

[239] Fix | Delete

[240] Fix | Delete

if ( et_builder_is_hover_enabled( 'active_tab_text_color', $this->props ) ) {

[241] Fix | Delete

ET_Builder_Element::set_style( $render_slug, array(

[242] Fix | Delete

'selector' => '%%order_class%% .et_pb_tabs_controls li.et_pb_tab_active:hover a',

[243] Fix | Delete

'declaration' => sprintf(

[244] Fix | Delete

'color: %1$s !important;',

[245] Fix | Delete

esc_html( $active_tab_text_color_hover )

[246] Fix | Delete

),

[247] Fix | Delete

) );

[248] Fix | Delete

}

[249] Fix | Delete

[250] Fix | Delete

$tabs = $this->get_tabs_nav();

[251] Fix | Delete

[252] Fix | Delete

$video_background = $this->video_background();

[253] Fix | Delete

$parallax_image_background = $this->get_parallax_image_background();

[254] Fix | Delete

[255] Fix | Delete

$et_pb_tab_titles = $et_pb_tab_classes = array();

[256] Fix | Delete

[257] Fix | Delete

// Module classnames

[258] Fix | Delete

$this->add_classname( array(

[259] Fix | Delete

$this->get_text_orientation_classname(),

[260] Fix | Delete

) );

[261] Fix | Delete

[262] Fix | Delete

$output = sprintf(

[263] Fix | Delete

'<div%3$s class="%4$s" %7$s>

[264] Fix | Delete

%6$s

[265] Fix | Delete

%5$s

[266] Fix | Delete

<ul class="et_pb_tabs_controls clearfix">

[267] Fix | Delete

%1$s

[268] Fix | Delete

</ul>

[269] Fix | Delete

<div class="et_pb_all_tabs">

[270] Fix | Delete

%2$s

[271] Fix | Delete

</div> <!-- .et_pb_all_tabs -->

[272] Fix | Delete

</div> <!-- .et_pb_tabs -->',

[273] Fix | Delete

$tabs,

[274] Fix | Delete

$all_tabs_content,

[275] Fix | Delete

$this->module_id(),

[276] Fix | Delete

$this->module_classname( $render_slug ),

[277] Fix | Delete

$video_background,

[278] Fix | Delete

$parallax_image_background,

[279] Fix | Delete

/* 7$s */ 'et_pb_wc_tabs' === $render_slug ? $this->get_multi_view_attrs() : ''

[280] Fix | Delete

);

[281] Fix | Delete

[282] Fix | Delete

return $output;

[283] Fix | Delete

}

[284] Fix | Delete

[285] Fix | Delete

public function process_box_shadow( $function_name ) {

[286] Fix | Delete

$boxShadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' );

[287] Fix | Delete

$style = $boxShadow->get_value( $this->props );

[288] Fix | Delete

[289] Fix | Delete

if ( $boxShadow->is_inset( $style ) ) {

[290] Fix | Delete

$this->advanced_fields['box_shadow'] = array(

[291] Fix | Delete

'default' => array(

[292] Fix | Delete

'css' => array(

[293] Fix | Delete

'main' => '%%order_class%% .et-pb-active-slide',

[294] Fix | Delete

),

[295] Fix | Delete

),

[296] Fix | Delete

);

[297] Fix | Delete

[298] Fix | Delete

[299] Fix | Delete

}

[300] Fix | Delete

[301] Fix | Delete

parent::process_box_shadow( $function_name );

[302] Fix | Delete

}

[303] Fix | Delete

}

[304] Fix | Delete

[305] Fix | Delete

new ET_Builder_Module_Tabs;

[306] Fix | Delete

[307] Fix | Delete