<?php
/**
* Approach Tab Section
*/
namespace Elementor;
class Cyarb_Approach_Tabs extends Widget_Base {
public function get_name() {
return 'CyarbApp_Tabs';
}
public function get_title() {
return __( 'Approach Tab', 'cyarb-toolkit' );
}
public function get_icon() {
return 'eicon-tabs';
}
public function get_categories() {
return [ 'cyarb-elements' ];
}
protected function register_controls() {
$this->start_controls_section(
'feature_tabs',
[
'label' => __( 'Approach Tabs', 'cyarb-toolkit' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title',
[
'label' => esc_html__( 'Title', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXTAREA,
]
);
$this->add_control(
'title_tag',
[
'label' => esc_html__( 'Title Tag', 'cyarb-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => esc_html__( 'h1', 'cyarb-toolkit' ),
'h2' => esc_html__( 'h2', 'cyarb-toolkit' ),
'h3' => esc_html__( 'h3', 'cyarb-toolkit' ),
'h4' => esc_html__( 'h4', 'cyarb-toolkit' ),
'h5' => esc_html__( 'h5', 'cyarb-toolkit' ),
'h6' => esc_html__( 'h6', 'cyarb-toolkit' ),
],
'default' => 'h2',
]
);
$repeater = new Repeater();
$repeater->add_control(
'tab_title', [
'label' => __( 'Tab Title', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
]
);
$repeater->add_control(
'tab_content', [
'label' => __( 'Tab Content', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXTAREA,
]
);
$repeater->add_control(
'image', [
'label' => __( 'Image', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
]
);
$repeater->add_control(
'inner_tab_num', [
'label' => __( 'Inner Tab Number', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
]
);
$repeater->add_control(
'inner_tab_title', [
'label' => __( 'Inner Tab Title', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
]
);
$repeater->add_control(
'inner_tab_content', [
'label' => __( 'Inner Tab Content', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXTAREA,
]
);
$repeater->add_control(
'button_text_one', [
'label' => __( 'Button Text', 'cyarb-toolkit' ),
'default' => __('Get Started Now', 'cyarb-toolkit'),
'type' => Controls_Manager::TEXT,
]
);
$repeater->add_control(
'link_type_one', [
'label' => __( 'Button Text', 'cyarb-toolkit' ),
'default' => __('Get Started Now', 'cyarb-toolkit'),
'type' => Controls_Manager::SELECT,
'label_block' => true,
'options' => [
'1' => __( 'Link To Page', 'cyarb-toolkit' ),
'2' => __( 'External Link', 'cyarb-toolkit' ),
],
]
);
$repeater->add_control(
'link_to_page_one', [
'label' => __( 'Link Page', 'cyarb-toolkit' ),
'type' => Controls_Manager::SELECT,
'label_block' => true,
'options' => cyarb_toolkit_get_page_as_list(),
'condition' => [
'link_type_one' => '1',
]
]
);
$repeater->add_control(
'external_link_one', [
'label' => __( 'External Link', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'condition' => [
'link_type_one' => '2',
]
]
);
$this->add_control(
'app_tab_items',
[
'label' => esc_html__( 'Add Tab Item', 'cyarb-toolkit' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
]
);
$this->add_control(
'shape_image', [
'label' => __( 'Shape Image', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
]
);
$this->end_controls_section();
$this->start_controls_section(
'tab_style',
[
'label' => __( 'Style', 'cyarb-toolkit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'sec_color',
[
'label' => __( 'Section Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .section-title h2, .section-title h1, .section-title h3, .section-title h4, .section-title h5, .section-title h6' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'sect_typography',
'label' => __( 'Section Title Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .section-title h2, .section-title h1, .section-title h3, .section-title h4, .section-title h5, .section-title h6',
]
);
$this->add_control(
'tabtitle_color',
[
'label' => __( 'Tab Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .approach-style-list-tabs .nav .nav-item .nav-link h3' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'tabtitle_typography',
'label' => __( 'Tab Title Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .approach-style-list-tabs .nav .nav-item .nav-link h3',
]
);
$this->add_control(
'tabdesc_color',
[
'label' => __( 'Tab Description Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .approach-style-list-tabs .nav .nav-item .nav-link p' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'tabdesc_typography',
'label' => __( 'Tab Description Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .approach-style-list-tabs .nav .nav-item .nav-link p',
]
);
$this->add_control(
'acttab_color',
[
'label' => __( 'Active Tab Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .approach-style-list-tabs .nav .nav-item .nav-link:hover, .approach-style-list-tabs .nav .nav-item .nav-link.active' => 'background-color: {{VALUE}}',
],
]
);
$this->add_control(
'inner_connum',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'inner_content_number',
[
'label' => esc_html__( 'Number Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'inner_num_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .approach-style-tabs-content .number',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_num_typography',
'label' => __( 'Inner Number Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .approach-style-tabs-content .number',
]
);
$this->add_control(
'inner_con_head',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'inner_content_head',
[
'label' => __( 'Inner Heading Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'inner_heading_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .approach-style-tabs-content h4',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_head_typography',
'label' => __( 'Inner Heading Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .approach-style-tabs-content h4',
]
);
$this->add_control(
'inner_desc_head',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'inner_desc',
[
'label' => __( 'Inner Description Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_control(
'inner_desc_color',
[
'label' => __( 'Inner Description Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .approach-style-tabs-content p' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_desc_typography',
'label' => __( 'Inner Description Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .approach-style-tabs-content p',
]
);
$this->add_control(
'inner_button_div',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'inner_btn_head',
[
'label' => __( 'Inner Button Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'inner_btn_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .approach-style-tabs-content .approach-btn',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'inner_btn_typography',
'label' => __( 'Inner Button Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .approach-style-tabs-content .approach-btn',
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="approach-style-two-area ">
<div class="container">
<?php if( $settings['title'] != '' ) : ?>
<div class="section-title">
<<?php echo esc_attr($settings['title_tag']);?>><?php echo esc_html( $settings['title'] ); ?></<?php echo esc_attr($settings['title_tag']);?>>
</div>
<?php endif; ?>
<div class="approach-style-list-tabs">
<div class="row">
<div class="col-lg-3 col-md-12">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php $i = 1;
foreach( $settings['app_tab_items'] as $item ):
if ($i == 1) {
$active = 'active';
} else {
$active = '';
}
?>
<li class="nav-item">
<a class="nav-link <?php echo $active; ?>" data-bs-toggle="tab" href="#evolving<?php echo $i; ?>" role="tab" aria-controls="evolving-threat">
<h3><?php echo esc_html( $item['tab_title'] ); ?></h3>
<p><?php echo wp_kses_post( $item['tab_content'] ); ?></p>
</a>
</li>
<?php $i++; endforeach; ?>
</ul>
</div>
<div class="col-lg-9 col-md-12">
<div class="tab-content" id="myTabContent">
<?php $i = 1;
foreach ( $settings['app_tab_items'] as $item ) :
$btn1_text = $item['button_text_one'];
// Button Link
$link_source = '';
if( $item['link_type_one'] == 1 ){
$link_source = get_page_link($item['link_to_page_one']);
} else {
$link_source = $item['external_link_one'];
}
if ($i == 1) {
$active = 'show active';
} else {
$active = '';
}
?>
<div class="tab-pane fade <?php echo $active; ?>" id="evolving<?php echo $i; ?>" role="tabpanel">
<div class="row align-items-center">
<?php if( $item['image']['url'] != '' ): ?>
<div class="col-lg-6 col-md-12">
<div class="approach-style-tabs-image">
<img src="<?php echo esc_url( $item['image']['url'] ); ?>" alt="<?php echo esc_attr__('image','cyarb-toolkit'); ?>">
</div>
</div>
<?php endif; ?>
<div class="col-lg-6 col-md-12">
<div class="approach-style-tabs-content">
<div class="number"><?php echo esc_html( $item['inner_tab_num'] ); ?></div>
<h4><?php echo esc_html( $item['inner_tab_title'] ); ?></h4>
<p><?php echo wp_kses_post( $item['inner_tab_content'] ); ?></p>
<?php if($btn1_text != '') { ?>
<a href="<?php echo esc_url($link_source); ?>" class="approach-btn"><?php echo esc_html($btn1_text); ?>
<i class="lni lni-arrow-right"></i>
</a>
<?php } ?>
</div>
</div>
</div>
</div>
<?php $i++; endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<?php if( $settings['shape_image']['url'] != '' ) : ?>
<div class="approach-style-shape">
<img src="<?php echo esc_url( $settings['shape_image']['url'] ); ?>" alt="<?php echo esc_attr__('Shape','cyarb-toolkit'); ?>">
</div>
<?php endif; ?>
</div>
<?php }
}
Plugin::instance()->widgets_manager->register_widget_type( new Cyarb_Approach_Tabs );