'> .elementor-widget-container > .jet-tabs', 'control_wrapper' => '> .elementor-widget-container > .jet-tabs > .jet-tabs__control-wrapper', 'control' => '> .elementor-widget-container > .jet-tabs > .jet-tabs__control-wrapper > .jet-tabs__control', 'content_wrapper' => '> .elementor-widget-container > .jet-tabs > .jet-tabs__content-wrapper', 'content' => '> .elementor-widget-container > .jet-tabs > .jet-tabs__content-wrapper > .jet-tabs__content', 'label' => '.jet-tabs__label-text', 'icon' => '.jet-tabs__label-icon', ) ); $this->start_controls_section( 'section_items_data', array( 'label' => esc_html__( 'Items', 'jet-tabs' ), ) ); $repeater = new Repeater(); $repeater->add_control( 'item_active', array( 'label' => esc_html__( 'Active', 'jet-tabs' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-tabs' ), 'label_off' => esc_html__( 'No', 'jet-tabs' ), 'return_value' => 'yes', 'default' => 'false', ) ); $repeater->add_control( 'item_use_image', array( 'label' => esc_html__( 'Use Image?', 'jet-tabs' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'jet-tabs' ), 'label_off' => esc_html__( 'No', 'jet-tabs' ), 'return_value' => 'yes', 'default' => 'false', ) ); $repeater->add_control( 'item_icon', array( 'label' => esc_html__( 'Icon', 'jet-tabs' ), 'type' => Controls_Manager::ICON, 'label_block' => true, 'file' => '', 'default' => 'fa fa-arrow-circle-right', ) ); $repeater->add_control( 'item_image', array( 'label' => esc_html__( 'Image', 'jet-tabs' ), 'type' => Controls_Manager::MEDIA, ) ); $repeater->add_control( 'item_label', array( 'label' => esc_html__( 'Label', 'jet-tabs' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'New Tab', 'jet-tabs' ), 'dynamic' => [ 'active' => true, ], ) ); $templates = jet_tabs()->elementor()->templates_manager->get_source( 'local' )->get_items(); $options = [ '0' => '— ' . esc_html__( 'Select', 'jet-tabs' ) . ' —', ]; $types = []; foreach ( $templates as $template ) { $options[ $template['template_id'] ] = $template['title'] . ' (' . $template['type'] . ')'; $types[ $template['template_id'] ] = $template['type']; } $repeater->add_control( 'content_type', [ 'label' => esc_html__( 'Content Type', 'jet-tabs' ), 'type' => Controls_Manager::SELECT, 'default' => 'template', 'options' => [ 'template' => esc_html__( 'Template', 'jet-tabs' ), 'editor' => esc_html__( 'Editor', 'jet-tabs' ), ], 'label_block' => 'true', ] ); $repeater->add_control( 'item_template_id', [ 'label' => esc_html__( 'Choose Template', 'jet-tabs' ), 'type' => Controls_Manager::SELECT, 'default' => '0', 'options' => $options, 'types' => $types, 'label_block' => 'true', 'condition' => [ 'content_type' => 'template', ] ] ); $repeater->add_control( 'item_editor_content', [ 'label' => __( 'Content', 'jet-tabs' ), 'type' => Controls_Manager::WYSIWYG, 'default' => __( 'Tab Item Content', 'jet-tabs' ), 'dynamic' => [ 'active' => true, ], 'condition' => [ 'content_type' => 'editor', ] ] ); $this->add_control( 'tabs', array( 'type' => Controls_Manager::REPEATER, 'fields' => array_values( $repeater->get_controls() ), 'default' => array( array( 'item_label' => esc_html__( 'Tab #1', 'jet-tabs' ), ), array( 'item_label' => esc_html__( 'Tab #2', 'jet-tabs' ), ), array( 'item_label' => esc_html__( 'Tab #3', 'jet-tabs' ), ), ), 'title_field' => '{{{ item_label }}}', ) ); $this->end_controls_section(); $this->start_controls_section( 'section_settings_data', array( 'label' => esc_html__( 'Settings', 'jet-tabs' ), ) ); $this->add_responsive_control( 'tabs_position', array( 'label' => esc_html__( 'Tabs Position', 'jet-tabs' ), 'type' => Controls_Manager::SELECT, 'default' => 'top', 'options' => array( 'left' => esc_html__( 'Left', 'jet-tabs' ), 'top' => esc_html__( 'Top', 'jet-tabs' ), 'right' => esc_html__( 'Right', 'jet-tabs' ), 'bottom' => esc_html__( 'Bottom', 'jet-tabs' ), ), ) ); $this->add_control( 'show_effect', array( 'label' => esc_html__( 'Show Effect', 'jet-tabs' ), 'type' => Controls_Manager::SELECT, 'default' => 'move-up', 'options' => array( 'none' => esc_html__( 'None', 'jet-tabs' ), 'fade' => esc_html__( 'Fade', 'jet-tabs' ), 'zoom-in' => esc_html__( 'Zoom In', 'jet-tabs' ), 'zoom-out' => esc_html__( 'Zoom Out', 'jet-tabs' ), 'move-up' => esc_html__( 'Move Up', 'jet-tabs' ), 'fall-perspective' => esc_html__( 'Fall Perspective', 'jet-tabs' ), ), ) ); $this->add_control( 'tabs_event', array( 'label' => esc_html__( 'Tabs Event', 'jet-tabs' ), 'type' => Controls_Manager::SELECT, 'default' => 'click', 'options' => array( 'click' => esc_html__( 'Click', 'jet-tabs' ), 'hover' => esc_html__( 'Hover', 'jet-tabs' ), ), ) ); $this->add_control( 'auto_switch', array( 'label' => esc_html__( 'Auto Switch', 'jet-tabs' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'On', 'jet-tabs' ), 'label_off' => esc_html__( 'Off', 'jet-tabs' ), 'return_value' => 'yes', 'default' => 'false', ) ); $this->add_control( 'auto_switch_delay', array( 'label' => esc_html__( 'Auto Switch Delay', 'jet-tabs' ), 'type' => Controls_Manager::NUMBER, 'default' => 3000, 'min' => 1000, 'max' => 20000, 'step' => 100, 'condition' => array( 'auto_switch' => 'yes', ), ) ); $this->add_control( 'no_active_tabs', array( 'label' => esc_html__( 'No Active Tabs', 'jet-tabs' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'On', 'jet-tabs' ), 'label_off' => esc_html__( 'Off', 'jet-tabs' ), 'return_value' => 'yes', 'default' => 'false', ) ); $this->add_control( 'ajax_template', array( 'label' => esc_html__( 'Use Ajax Loading for Template', 'jet-tabs' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'On', 'jet-tabs' ), 'label_off' => esc_html__( 'Off', 'jet-tabs' ), 'return_value' => 'yes', 'default' => 'false', ) ); $this->end_controls_section(); $this->__start_controls_section( 'section_general_style', array( 'label' => esc_html__( 'General', 'jet-tabs' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->__add_responsive_control( 'tabs_control_wrapper_width', array( 'label' => esc_html__( 'Tabs Control Width', 'jet-tabs' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', '%', ), 'range' => array( '%' => array( 'min' => 10, 'max' => 50, ), 'px' => array( 'min' => 100, 'max' => 500, ), ), 'condition' => array( 'tabs_position' => array( 'left', 'right' ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control_wrapper'] => 'min-width: {{SIZE}}{{UNIT}}', '{{WRAPPER}} ' . $css_scheme['content_wrapper'] => 'min-width: calc(100% - {{SIZE}}{{UNIT}})', ), ), 25 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'tabs_container_background', 'selector' => '{{WRAPPER}} ' . $css_scheme['instance'], ), 25 ); $this->__add_responsive_control( 'tabs_container_padding', array( 'label' => __( 'Padding', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['instance'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_responsive_control( 'tabs_container_margin', array( 'label' => __( 'Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['instance'] => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'tabs_container_border', 'label' => esc_html__( 'Border', 'jet-tabs' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['instance'], ), 100 ); $this->__add_responsive_control( 'tabs_container_border_radius', array( 'label' => __( 'Border Radius', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['instance'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 100 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'tabs_container_box_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['instance'], ), 100 ); $this->__end_controls_section(); /** * Tabs Control Style Section */ $this->__start_controls_section( 'section_tabs_control_style', array( 'label' => esc_html__( 'Tabs Control', 'jet-tabs' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->__add_responsive_control( 'tabs_controls_aligment', array( 'label' => esc_html__( 'Tabs Alignment', 'jet-tabs' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'flex-start', 'options' => array( 'flex-start' => array( 'title' => esc_html__( 'Left', 'jet-tabs' ), 'icon' => 'fa fa-arrow-left', ), 'center' => array( 'title' => esc_html__( 'Center', 'jet-tabs' ), 'icon' => 'fa fa-align-center', ), 'flex-end' => array( 'title' => esc_html__( 'Right', 'jet-tabs' ), 'icon' => 'fa fa-arrow-right', ), ), 'condition' => array( 'tabs_position' => array( 'top', 'bottom' ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control_wrapper'] => 'align-self: {{VALUE}};', ), ), 100 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'tabs_content_wrapper_background', 'selector' => '{{WRAPPER}} ' . $css_scheme['control_wrapper'], ), 25 ); $this->__add_responsive_control( 'tabs_control_wrapper_padding', array( 'label' => __( 'Padding', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control_wrapper'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_responsive_control( 'tabs_control_wrapper_margin', array( 'label' => __( 'Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control_wrapper'] => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'tabs_control_wrapper_border', 'label' => esc_html__( 'Border', 'jet-tabs' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['control_wrapper'], ), 25 ); $this->__add_responsive_control( 'tabs_control_wrapper_border_radius', array( 'label' => __( 'Border Radius', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control_wrapper'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'tabs_control_wrapper_box_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['control_wrapper'], ), 100 ); $this->__end_controls_section(); /** * Tabs Control Style Section */ $this->__start_controls_section( 'section_tabs_control_item_style', array( 'label' => esc_html__( 'Tabs Control Item', 'jet-tabs' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->__add_responsive_control( 'tabs_controls_item_aligment_top_icon', array( 'label' => esc_html__( 'Alignment', 'jet-tabs' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'center', 'options' => array( 'flex-start' => array( 'title' => esc_html__( 'Left', 'jet-tabs' ), 'icon' => 'fa fa-arrow-left', ), 'center' => array( 'title' => esc_html__( 'Center', 'jet-tabs' ), 'icon' => 'fa fa-align-center', ), 'flex-end' => array( 'title' => esc_html__( 'Right', 'jet-tabs' ), 'icon' => 'fa fa-arrow-right', ), ), 'condition' => array( 'tabs_position' => array( 'left', 'right' ), 'tabs_control_icon_position' => 'top' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' .jet-tabs__control-inner' => 'align-items: {{VALUE}};', ), ), 25 ); $this->__add_responsive_control( 'tabs_controls_item_aligment_left_icon', array( 'label' => esc_html__( 'Alignment', 'jet-tabs' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'flex-start', 'options' => array( 'flex-start' => array( 'title' => esc_html__( 'Left', 'jet-tabs' ), 'icon' => 'fa fa-arrow-left', ), 'center' => array( 'title' => esc_html__( 'Center', 'jet-tabs' ), 'icon' => 'fa fa-align-center', ), 'flex-end' => array( 'title' => esc_html__( 'Right', 'jet-tabs' ), 'icon' => 'fa fa-arrow-right', ), ), 'condition' => array( 'tabs_position' => array( 'left', 'right' ), 'tabs_control_icon_position' => 'left' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' .jet-tabs__control-inner' => 'justify-content: {{VALUE}};', ), ), 25 ); $this->__add_control( 'tabs_control_icon_style_heading', array( 'label' => esc_html__( 'Icon Styles', 'jet-tabs' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ) ); $this->__add_responsive_control( 'tabs_control_icon_margin', array( 'label' => esc_html__( 'Icon Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' .jet-tabs__label-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_responsive_control( 'tabs_control_image_margin', array( 'label' => esc_html__( 'Image Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' .jet-tabs__label-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 100 ); $this->__add_responsive_control( 'tabs_control_image_width', array( 'label' => esc_html__( 'Image Width', 'jet-tabs' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', 'em', '%', ), 'range' => array( 'px' => array( 'min' => 10, 'max' => 100, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' .jet-tabs__label-image' => 'width: {{SIZE}}{{UNIT}}', ), ), 100 ); $this->__add_control( 'tabs_control_icon_position', array( 'label' => esc_html__( 'Icon Position', 'jet-tabs' ), 'type' => Controls_Manager::SELECT, 'default' => 'left', 'options' => array( 'left' => esc_html__( 'Left', 'jet-tabs' ), 'top' => esc_html__( 'Top', 'jet-tabs' ), ), ), 50 ); $this->__add_control( 'tabs_control_state_style_heading', array( 'label' => esc_html__( 'State Styles', 'jet-tabs' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ) ); $this->__start_controls_tabs( 'tabs_control_styles' ); $this->__start_controls_tab( 'tabs_control_normal', array( 'label' => esc_html__( 'Normal', 'jet-tabs' ), ) ); $this->__add_control( 'tabs_control_label_color', array( 'label' => esc_html__( 'Text Color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' ' . $css_scheme['label'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'tabs_control_label_typography', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} '. $css_scheme['control'] . ' ' . $css_scheme['label'], ), 50 ); $this->__add_control( 'tabs_control_icon_color', array( 'label' => esc_html__( 'Icon Color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' ' . $css_scheme['icon'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_responsive_control( 'tabs_control_icon_size', array( 'label' => esc_html__( 'Icon Size', 'jet-tabs' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', 'em', 'rem', ), 'range' => array( 'px' => array( 'min' => 18, 'max' => 200, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' ' . $css_scheme['icon'] => 'font-size: {{SIZE}}{{UNIT}}', ), ), 50 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'tabs_control_background', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'], ), 25 ); $this->__add_responsive_control( 'tabs_control_padding', array( 'label' => __( 'Padding', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ' .jet-tabs__control-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_responsive_control( 'tabs_control_margin', array( 'label' => __( 'Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'tabs_control_border', 'label' => esc_html__( 'Border', 'jet-tabs' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'], ), 25 ); $this->__add_responsive_control( 'tabs_control_border_radius', array( 'label' => esc_html__( 'Border Radius', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'tabs_control_box_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'], ), 100 ); $this->__end_controls_tab(); $this->__start_controls_tab( 'tabs_control_hover', array( 'label' => esc_html__( 'Hover', 'jet-tabs' ), ) ); $this->__add_control( 'tabs_control_label_color_hover', array( 'label' => esc_html__( 'Text Color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_2, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ':hover ' . $css_scheme['label'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'tabs_control_label_typography_hover', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . ':hover ' . $css_scheme['label'], ), 50 ); $this->__add_control( 'tabs_control_icon_color_hover', array( 'label' => esc_html__( 'Icon Color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_2, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ':hover ' . $css_scheme['icon'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_responsive_control( 'tabs_control_icon_size_hover', array( 'label' => esc_html__( 'Icon Size', 'jet-tabs' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', 'em', 'rem', ), 'range' => array( 'px' => array( 'min' => 18, 'max' => 200, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ':hover ' . $css_scheme['icon'] => 'font-size: {{SIZE}}{{UNIT}}', ), ), 50 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'tabs_control_background_hover', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . ':hover', ), 25 ); $this->__add_responsive_control( 'tabs_control_padding_hover', array( 'label' => __( 'Padding', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ':hover' . ' .jet-tabs__control-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_responsive_control( 'tabs_control_margin_hover', array( 'label' => __( 'Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ':hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'tabs_control_border_hover', 'label' => esc_html__( 'Border', 'jet-tabs' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . ':hover', ), 25 ); $this->__add_responsive_control( 'tabs_control_border_radius_hover', array( 'label' => esc_html__( 'Border Radius', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . ':hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'tabs_control_box_shadow_hover', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . ':hover', ), 100 ); $this->__end_controls_tab(); $this->__start_controls_tab( 'tabs_control_active', array( 'label' => esc_html__( 'Active', 'jet-tabs' ), ) ); $this->__add_control( 'tabs_control_label_color_active', array( 'label' => esc_html__( 'Text Color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab ' . $css_scheme['label'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'tabs_control_label_typography_active', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab ' . $css_scheme['label'], ), 50 ); $this->__add_control( 'tabs_control_icon_color_active', array( 'label' => esc_html__( 'Icon Color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'scheme' => array( 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab ' . $css_scheme['icon'] => 'color: {{VALUE}}', ), ), 25 ); $this->__add_responsive_control( 'tabs_control_icon_size_active', array( 'label' => esc_html__( 'Icon Size', 'jet-tabs' ), 'type' => Controls_Manager::SLIDER, 'size_units' => array( 'px', 'em', 'rem', ), 'range' => array( 'px' => array( 'min' => 18, 'max' => 200, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab ' . $css_scheme['icon'] => 'font-size: {{SIZE}}{{UNIT}}', ), ), 50 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'tabs_control_background_active', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab', ), 25 ); $this->__add_responsive_control( 'tabs_control_padding_active', array( 'label' => __( 'Padding', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab' . ' .jet-tabs__control-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_responsive_control( 'tabs_control_margin_active', array( 'label' => __( 'Margin', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'tabs_control_border_active', 'label' => esc_html__( 'Border', 'jet-tabs' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab', ), 25 ); $this->__add_responsive_control( 'tabs_control_border_radius_active', array( 'label' => esc_html__( 'Border Radius', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'tabs_control_box_shadow_active', 'selector' => '{{WRAPPER}} ' . $css_scheme['control'] . '.active-tab', ), 100 ); $this->__end_controls_tab(); $this->__end_controls_tabs(); $this->__end_controls_section(); /** * Tabs Content Style Section */ $this->__start_controls_section( 'section_tabs_content_style', array( 'label' => esc_html__( 'Tabs Content', 'jet-tabs' ), 'tab' => Controls_Manager::TAB_STYLE, 'show_label' => false, ) ); $this->__add_control( 'tabs_content_text_color', array( 'label' => esc_html__( 'Text color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['content'] => 'color: {{VALUE}};', ), ), 25 ); $this->__add_group_control( Group_Control_Typography::get_type(), array( 'name' => 'tabs_content_typography', 'selector' => '{{WRAPPER}} ' . $css_scheme['content'], ), 50 ); $this->__add_group_control( Group_Control_Background::get_type(), array( 'name' => 'tabs_content_background', 'selector' => '{{WRAPPER}} ' . $css_scheme['content_wrapper'], ), 25 ); $this->__add_responsive_control( 'tabs_content_padding', array( 'label' => __( 'Padding', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['content'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 50 ); $this->__add_group_control( Group_Control_Border::get_type(), array( 'name' => 'tabs_content_border', 'label' => esc_html__( 'Border', 'jet-tabs' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} ' . $css_scheme['content_wrapper'], ), 25 ); $this->__add_responsive_control( 'tabs_content_radius', array( 'label' => __( 'Border Radius', 'jet-tabs' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => array( 'px', '%' ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['content_wrapper'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ), ), 75 ); $this->__add_group_control( Group_Control_Box_Shadow::get_type(), array( 'name' => 'tabs_content_box_shadow', 'selector' => '{{WRAPPER}} ' . $css_scheme['content_wrapper'], ), 100 ); $this->__add_control( 'tabs_content_loader_style_heading', array( 'label' => esc_html__( 'Loader Styles', 'jet-tabs' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'ajax_template' => 'yes', ], ), 25 ); $this->__add_control( 'tabs_content_loader_color', array( 'label' => esc_html__( 'Loader color', 'jet-tabs' ), 'type' => Controls_Manager::COLOR, 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['content'] . ' .jet-tabs-loader' => 'border-color: {{VALUE}}; border-top-color: white;', ), 'condition' => [ 'ajax_template' => 'yes', ], ), 25 ); $this->__end_controls_section(); } /** * [render description] * @return [type] [description] */ protected function render() { $this->__context = 'render'; $tabs = $this->get_settings_for_display( 'tabs' ); if ( ! $tabs || empty( $tabs ) ) { return false; } $id_int = substr( $this->get_id_int(), 0, 3 ); $tabs_position = $this->get_settings( 'tabs_position' ); $tabs_position_tablet = $this->get_settings( 'tabs_position_tablet' ); $tabs_position_mobile = $this->get_settings( 'tabs_position_mobile' ); $show_effect = $this->get_settings( 'show_effect' ); $no_active_tabs = filter_var( $this->get_settings( 'no_active_tabs' ), FILTER_VALIDATE_BOOLEAN ); $ajax_template = filter_var( $this->get_settings( 'ajax_template' ), FILTER_VALIDATE_BOOLEAN ); $active_index = 0; foreach ( $tabs as $index => $item ) { if ( array_key_exists( 'item_active', $item ) && filter_var( $item['item_active'], FILTER_VALIDATE_BOOLEAN ) ) { $active_index = $index; } if ( 'template' === $item['content_type'] && 0 !== $item['item_template_id'] ) { $post_status = get_post_status( $item['item_template_id'] ); if ( 'draft' === $post_status || 'trash' === $post_status ) { array_splice( $tabs, $index, 1 ); } } } $settings = array( 'activeIndex' => ! $no_active_tabs ? $active_index : -1, 'event' => $this->get_settings( 'tabs_event' ), 'autoSwitch' => filter_var( $this->get_settings( 'auto_switch' ), FILTER_VALIDATE_BOOLEAN ), 'autoSwitchDelay' => $this->get_settings( 'auto_switch_delay' ), 'ajaxTemplate' => $ajax_template, ); $this->add_render_attribute( 'instance', array( 'class' => array( 'jet-tabs', 'jet-tabs-position-' . $tabs_position, 'jet-tabs-' . $show_effect . '-effect', ( $ajax_template ) ? 'jet-tabs-ajax-template' : '', ), 'data-settings' => json_encode( $settings ), 'role' => 'tablist', ) ); if ( ! empty( $tabs_position_tablet ) ) { $this->add_render_attribute( 'instance', 'class', [ 'jet-tabs-position-tablet-' . $tabs_position_tablet ] ); } if ( ! empty( $tabs_position_mobile ) ) { $this->add_render_attribute( 'instance', 'class', [ 'jet-tabs-position-mobile-' . $tabs_position_mobile ] ); } ?>
get_render_attribute_string( 'instance' ); ?>>
$item ) { $tab_count = $index + 1; $tab_title_setting_key = $this->get_repeater_setting_key( 'jet_tab_control', 'tabs', $index ); $this->add_render_attribute( $tab_title_setting_key, array( 'id' => 'jet-tabs-control-' . $id_int . $tab_count, 'class' => array( 'jet-tabs__control', 'jet-tabs__control-icon-' . $this->get_settings( 'tabs_control_icon_position' ), 'elementor-menu-anchor', ( $index === $active_index && ! $no_active_tabs ) ? 'active-tab' : '', ), 'data-tab' => $tab_count, 'tabindex' => $id_int . $tab_count, 'role' => 'tab', 'aria-controls' => 'jet-tabs-content-' . $id_int . $tab_count, 'aria-expanded' => $index === $active_index ? 'true' : 'false', 'data-template-id' => '0' !== $item['item_template_id'] ? $item['item_template_id'] : 'false', ) ); $title_icon_html = ''; if ( ! empty( $item['item_icon'] ) ) { $title_icon_html = sprintf( '
', $item['item_icon'] ); } $title_image_html = ''; if ( ! empty( $item['item_image']['url'] ) ) { $title_image_html = sprintf( '', $item['item_image']['url'] ); } $title_label_html = ''; if ( ! empty( $item['item_label'] ) ) { $title_label_html = sprintf( '
%1$s
', $item['item_label'] ); } echo sprintf( '
%2$s%3$s
', $this->get_render_attribute_string( $tab_title_setting_key ), filter_var( $item['item_use_image'], FILTER_VALIDATE_BOOLEAN ) ? $title_image_html : $title_icon_html, $title_label_html ); } ?>
$item ) { $tab_count = $index + 1; $tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index ); $this->add_render_attribute( $tab_content_setting_key, array( 'id' => 'jet-tabs-content-' . $id_int . $tab_count, 'class' => array( 'jet-tabs__content', ( $index === $active_index && ! $no_active_tabs ) ? 'active-content' : '', ), 'data-tab' => $tab_count, 'role' => 'tabpanel', 'aria-hidden' => $index === $active_index ? 'false' : 'true', 'data-template-id' => '0' !== $item['item_template_id'] ? $item['item_template_id'] : 'false', ) ); $content_html = ''; switch ( $item[ 'content_type' ] ) { case 'template': if ( '0' !== $item['item_template_id'] ) { // for multi-language plugins $template_id = apply_filters( 'jet-tabs/widgets/template_id', $item['item_template_id'], $this ); $template_content = jet_tabs()->elementor()->frontend->get_builder_content_for_display( $template_id ); if ( ! empty( $template_content ) ) { if ( ! $ajax_template ) { $content_html .= $template_content; } else { $content_html .= '
'; } if ( jet_tabs_integration()->is_edit_mode() ) { $link = add_query_arg( array( 'elementor' => '', ), get_permalink( $item['item_template_id'] ) ); $content_html .= sprintf( '
%s
', $link, esc_html__( 'Edit Template', 'jet-tabs' ) ); } } else { $content_html = $this->no_template_content_message(); } } else { $content_html = $this->no_templates_message(); } break; case 'editor': $content_html = $this->parse_text_editor( $item['item_editor_content'] ); break; } echo sprintf( '
%2$s
', $this->get_render_attribute_string( $tab_content_setting_key ), $content_html ); } ?>
' . esc_html__( 'You Haven’t Saved Templates Yet.', 'jet-tabs' ) . '
'; } /** * [no_templates_message description] * @return [type] [description] */ public function no_templates_message() { $message = '' . esc_html__( 'Template is not defined. ', 'jet-tabs' ) . ''; //$link = Utils::get_create_new_post_url( 'elementor_library' ); $link = add_query_arg( array( 'post_type' => 'elementor_library', 'action' => 'elementor_new_post', '_wpnonce' => wp_create_nonce( 'elementor_action_new_post' ), 'template_type' => 'section', ), esc_url( admin_url( '/edit.php' ) ) ); $new_link = '' . esc_html__( 'Select an existing template or create a ', 'jet-tabs' ) . '' . esc_html__( 'new one', 'jet-tabs' ) . '' ; return sprintf( '
%1$s%2$s
', $message, jet_tabs_integration()->in_elementor() ? $new_link : '' ); } /** * [no_template_content_message description] * @return [type] [description] */ public function no_template_content_message() { $message = '' . esc_html__( 'The tabs are working. Please, note, that you have to add a template to the library in order to be able to display it inside the tabs.', 'jet-tabs' ) . ''; return sprintf( '
%1$s
', $message ); } /** * [get_template_edit_link description] * @param [type] $template_id [description] * @return [type] [description] */ public function get_template_edit_link( $template_id ) { $link = add_query_arg( 'elementor', '', get_permalink( $template_id ) ); return ' ' . esc_html__( 'Edit Template', 'jet-tabs' ) . ''; } }