<?php
/**
* Tab Section
*/
namespace Elementor;
class Cyarb_Feature_Tabs extends Widget_Base {
public function get_name() {
return 'Feature_Tabs';
}
public function get_title() {
return __( 'Feature Tabs', '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' => __( 'Feature Tabs', 'cyarb-toolkit' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'choose_style',
[
'label' => __( 'Choose Style', 'cyarb-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'1' => __( 'Style One', 'cyarb-toolkit' ),
'2' => __( 'Style Two', 'cyarb-toolkit' ),
],
'default' => '1',
]
);
$this->add_control(
'title',
[
'label' => esc_html__( 'Title', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
]
);
$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',
]
);
$this->add_control(
'desc',
[
'label' =>__('Add Description', 'cyarb-toolkit'),
'type' => Controls_Manager:: WYSIWYG,
'description' => __('This text editor for p','cyarb-toolkit'),
'condition' => [
'choose_style' => '1',
]
]
);
$repeater = new Repeater();
$repeater->add_control(
'image', [
'label' => __( 'Image', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
]
);
$repeater->add_control(
'tab_title', [
'type' => Controls_Manager::TEXT,
'label' => esc_html__( 'Tab Title', 'cyarb-toolkit' ),
'default' => esc_html__('Banking', 'cyarb-toolkit'),
]
);
$repeater->add_control(
'title', [
'type' => Controls_Manager::TEXT,
'label' => esc_html__( 'Content Title', 'cyarb-toolkit' ),
'default' => esc_html__('Banking Security', 'cyarb-toolkit'),
]
);
$repeater->add_control(
'content', [
'type' => Controls_Manager::WYSIWYG,
'label' => esc_html__( 'Content', 'cyarb-toolkit' ),
'default' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.', 'cyarb-toolkit'),
]
);
$repeater->add_control(
'button_text_one', [
'type' => Controls_Manager::TEXT,
'label' => esc_html__( 'Button Text', 'cyarb-toolkit' ),
'default' => esc_html__('Get Started Now', 'cyarb-toolkit'),
]
);
$repeater->add_control(
'link_type_one', [
'type' => Controls_Manager::SELECT,
'label' => esc_html__( 'Link Type', 'cyarb-toolkit' ),
'label_block' => true,
'options' => [
'1' => __( 'Link To Page', 'cyarb-toolkit' ),
'2' => __( 'External Link', 'cyarb-toolkit' ),
],
]
);
$repeater->add_control(
'link_to_page_one', [
'type' => Controls_Manager::SELECT,
'label' => esc_html__( 'Link Page', 'cyarb-toolkit' ),
'label_block' => true,
'options' => cyarb_toolkit_get_page_as_list(),
'condition' => [
'link_type_one' => '1',
]
]
);
$repeater->add_control(
'external_link_one', [
'type'=>Controls_Manager:: TEXT,
'label' => esc_html__( 'External Link', 'cyarb-toolkit' ),
'condition' => [
'link_type_one' => '2',
]
]
);
$repeater->add_control(
'target_page_one', [
'type' => Controls_Manager::SWITCHER,
'label' => esc_html__( 'Link Open In New Tab?', 'cyarb-toolkit' ),
'label_on' => __( 'Yes', 'cyarb-toolkit' ),
'label_off' => __( 'No', 'cyarb-toolkit' ),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'tab_items',
[
'label' => esc_html__( 'Add Item', 'cyarb-toolkit' ),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
]
);
//Shape Images
$this->add_control(
'image_shape_two',
[
'label' => esc_html__( 'Hide Shapes?', 'cyarb-toolkit' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Show', 'cyarb-toolkit' ),
'label_off' => esc_html__( 'Hide', 'cyarb-toolkit' ),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'shape1', [
'label' => __( 'Shape 1', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
'condition' => [
'image_shape_two' => 'yes',
]
]
);
$this->add_control(
'shape2', [
'label' => __( 'Shape 2', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
'condition' => [
'choose_style' => '1',
'image_shape_two' => 'yes',
]
]
);
$this->add_control(
'shape3', [
'label' => __( 'Shape 3', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
'condition' => [
'choose_style' => '1',
'image_shape_two' => 'yes',
]
]
);
$this->end_controls_section();
$this->start_controls_section(
'style',
[
'label' => esc_html__( 'Style', 'cyarb-toolkit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'sec_title_color',
[
'label' => esc_html__( 'Section Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6, .section-title h1' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'sec_title_typography',
'label' => __( 'Section Title Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .section-title h2, .section-title h3, .section-title h4, .section-title h5, .section-title h6, .section-title h1',
]
);
$this->add_control(
'sec_desc_color',
[
'label' => esc_html__( 'Section Description Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .section-title p' => 'color: {{VALUE}}',
],
'condition' => [
'choose_style' => '1',
]
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'sec_desc_typography',
'label' => __( 'Section Description Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .section-title p',
'condition' => [
'choose_style' => '1',
]
]
);
$this->add_control(
'onedivider',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'tabtitle_color',
[
'label' => esc_html__( 'Tab Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .cyber-defenses-list-tabs .nav .nav-item .nav-link, .expert-support-tabs .nav-tabs .nav-item .nav-link' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'tabtitle_typography',
'label' => esc_html__( 'Tab Title Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .cyber-defenses-list-tabs .nav .nav-item .nav-link, .expert-support-tabs .nav-tabs .nav-item .nav-link',
]
);
$this->add_control(
'tabtitle_actcolor',
[
'label' => esc_html__( 'Tab Title Active Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .cyber-defenses-list-tabs .nav .nav-item .nav-link:hover, .cyber-defenses-list-tabs .nav .nav-item .nav-link.active, .expert-support-tabs .nav-tabs .nav-item .nav-link:hover, .expert-support-tabs .nav-tabs .nav-item .nav-link.active' => 'color: {{VALUE}}',
],
]
);
$this->add_control(
'tab_bg_head',
[
'label' => esc_html__( 'Tab Button Active Background Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'tabbtn_bg2_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .cyber-defenses-list-tabs .nav .nav-item .nav-link::before, .expert-support-tabs .nav-tabs .nav-item .nav-link:hover, .expert-support-tabs .nav-tabs .nav-item .nav-link.active',
]
);
$this->add_control(
'twodivider',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'title_color',
[
'label' => esc_html__( 'Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .cyber-defenses-content h3, .expert-support-tabs .content h3' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'label' => esc_html__( 'Title Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .cyber-defenses-content h3, .expert-support-tabs .content h3',
]
);
$this->add_control(
'con_color',
[
'label' => esc_html__( 'Description Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .cyber-defenses-content p, .expert-support-tabs .content p' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ex_typography',
'label' => esc_html__( 'Excerpt Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .cyber-defenses-content p, .expert-support-tabs .content p',
]
);
$this->add_control(
'con_list_color',
[
'label' => esc_html__( 'Lists Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .cyber-defenses-content .cyber-list li, .expert-support-tabs .content .features-list li span' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'lists_typography',
'label' => esc_html__( 'Lists Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .cyber-defenses-content .cyber-list li, .expert-support-tabs .content .features-list li span',
]
);
$this->add_control(
'threedivider',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'icon_list_color',
[
'label' => esc_html__( 'Lists Icon Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .cyber-defenses-content .cyber-list li i, .expert-support-tabs .content .features-list li span i' => 'color: {{VALUE}}',
],
]
);
$this->add_control(
'lists_icon_head',
[
'label' => esc_html__( 'Icon Background Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'list_icon_bg_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .cyber-defenses-content .cyber-list li i, .expert-support-tabs .content .features-list li span i',
]
);
$this->add_control(
'fourdivider',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'btn_color',
[
'label' => esc_html__( 'Button Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .default-btn-two, .default-btn' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'btn_typography',
'label' => esc_html__( 'Button Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .default-btn-two, .default-btn',
]
);
$this->add_control(
'btn_bg_head',
[
'label' => esc_html__( 'Button Background Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'btn_bg2_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .default-btn-two, .default-btn',
]
);
$this->add_control(
'fivedivider',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'btn_bg_hhead',
[
'label' => esc_html__( 'Button Background Hover Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => [
'choose_style' => '2',
]
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'btn_bgh_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .default-btn-two:hover, .default-btn-two::before',
'condition' => [
'choose_style' => '2',
]
]
);
$this->add_control(
'btn_hcolor',
[
'label' => esc_html__( 'Button Hover Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .default-btn::before, .default-btn::after, .default-btn span::before, .default-btn span::after' => 'background-color: {{VALUE}}',
],
'condition' => [
'choose_style' => '1',
]
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<?php if( $settings['choose_style'] == '1' ): ?>
<div class="expert-suuport-area ptb-100">
<div class="container">
<div class="section-title">
<<?php echo esc_attr($settings['title_tag']);?>><?php echo esc_html( $settings['title'] ); ?></<?php echo esc_attr($settings['title_tag']);?>>
<?php echo wp_kses_post( $settings['desc'] ); ?>
</div>
<div class="expert-support-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$i = 0;
foreach( $settings['tab_items'] as $item ):
if ($i == 0) {
$show = 'active';
$aria_selected = 'true';
} else {
$show = '';
$aria_selected = 'false';
}
?>
<li class="nav-item" role="presentation">
<a class="nav-link <?php echo esc_attr($show); ?>" id="oilgas<?php echo esc_attr($i); ?>" data-bs-toggle="tab" href="#banking-tab<?php echo esc_attr( $i); ?>" role="tab" aria-controls="banking-tab<?php echo esc_attr( $i ); ?>" aria-selected="true"><?php echo esc_html( $item['tab_title'] ); ?><i class="lni lni-chevron-right"></i></a>
</li>
<?php $i++; endforeach; ?>
</ul>
<div class="tab-content" id="myTabContent">
<?php
$i = 0;
foreach ( $settings['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 == 0) {
$active = 'show active';
} else {
$active = '';
}
?>
<div class="tab-pane fade <?php echo esc_attr($active); ?>" id="banking-tab<?php echo esc_attr($i); ?>" role="tabpanel">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="content">
<h3><?php echo esc_html( $item['title'] ); ?></h3>
<?php echo wp_kses_post( $item['content'] ); ?>
<?php if($btn1_text != '') { ?>
<?php if ( 'yes' === $item['target_page_one'] ) { ?>
<a target="_blank" href="<?php echo esc_url($link_source); ?>" class="default-btn"><span><?php echo esc_html($btn1_text); ?></span>
</a> <?php
} else { ?>
<a href="<?php echo esc_url($link_source); ?>" class="default-btn"><span><?php echo esc_html($btn1_text); ?></span>
</a><?php
} ?>
<?php } ?>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="image bg1" style="background-image:url(<?php echo esc_url( $item['image']['url']); ?>);">
<img src="<?php echo esc_url( $item['image']['url']); ?>" alt="<?php echo esc_attr__('expert-image','cyarb-toolkit'); ?>">
</div>
</div>
</div>
<?php if ( 'yes' === $settings['image_shape_two'] ) : ?>
<?php if ( $settings['shape3']['url'] != '' ) : ?>
<div class="shape"><img src="<?php echo esc_url( $settings['shape3']['url'] ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php $i++; endforeach; ?>
</div>
</div>
</div>
<?php if ( 'yes' === $settings['image_shape_two'] ) : ?>
<?php if ( $settings['shape1']['url'] != '' ) : ?>
<div class="shape6"><img src="<?php echo esc_url( $settings['shape1']['url'] ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<?php endif; ?>
<?php if ( $settings['shape2']['url'] != '' ) : ?>
<div class="shape8"><img src="<?php echo esc_url( $settings['shape2']['url'] ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php else: ?>
<div class="cyber-defenses-area ptb-100">
<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']);?>>
<?php echo wp_kses_post( $settings['desc'] ); ?>
</div>
<?php endif; ?>
<div class="cyber-defenses-list-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php $i = 0;
foreach( $settings['tab_items'] as $item ):
if ($i == 0) {
$act = 'active';
} else {
$act = '';
}
?>
<li class="nav-item" role="presentation">
<a class="nav-link <?php echo esc_attr($act); ?>" id="oilgas<?php echo esc_attr($i); ?>" data-bs-toggle="tab" href="#manufacturing<?php echo esc_attr( $i); ?>" role="tab" aria-controls="manufacturing<?php echo esc_attr( $i ); ?>"><?php echo esc_html( $item['tab_title'] ); ?></a>
</li>
<?php $i++; endforeach; ?>
</ul>
<div class="tab-content" id="myTabContent">
<?php $i = 0;
foreach ( $settings['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 == 0) {
$active = 'show active';
} else {
$active = '';
}
?>
<div class="tab-pane fade <?php echo esc_attr($active); ?>" id="manufacturing<?php echo esc_attr($i); ?>" role="tabpanel">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="cyber-defenses-content">
<h3><?php echo esc_html( $item['title'] ); ?></h3>
<?php echo wp_kses_post( $item['content'] ); ?>
<?php if($btn1_text != '') { ?>
<div class="cyber-btn">
<?php if ( 'yes' === $item['target_page_one'] ) { ?>
<a target="_blank" href="<?php echo esc_url($link_source); ?>" class="default-btn-two"><?php echo esc_html($btn1_text); ?>
</a> <?php
} else { ?>
<a href="<?php echo esc_url($link_source); ?>" class="default-btn-two"><?php echo esc_html($btn1_text); ?>
</a><?php
} ?>
</div>
<?php } ?>
</div>
</div>
<?php if( $item['image']['url'] != '' ) : ?>
<div class="col-lg-6 col-md-12">
<div class="cyber-defenses-image">
<img src="<?php echo esc_url( $item['image']['url']); ?>" class="rounded-circle" alt="<?php echo esc_attr__('expert-image','cyarb-toolkit'); ?>">
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php $i++; endforeach; ?>
</div>
</div>
</div>
<?php if ( 'yes' === $settings['image_shape_two'] ) : ?>
<?php if ( $settings['shape1']['url'] != '' ) : ?>
<div class="cyber-defenses-shape"><img src="<?php echo esc_url( $settings['shape1']['url'] ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php
}
}
Plugin::instance()->widgets_manager->register_widget_type( new Cyarb_Feature_Tabs );