<?php
namespace Elementor;
class Cyarb_HowWeWork extends Widget_Base{
public function get_name(){
return "CyarbHWW";
}
public function get_title(){
return "How We Work";
}
public function get_icon(){
return "eicon-info-box";
}
public function get_categories(){
return ['cyarb-elements'];
}
protected function register_controls(){
// Tab content controls
$this-> start_controls_section(
'section_content',
[
'label' =>__('Content', 'cyarb-toolkit'),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title', [
'label' => __( 'Add Title', 'cyarb-toolkit' ),
'type' => Controls_Manager:: TEXTAREA,
'label_block' => true,
]
);
$this->add_control(
'title_tag',
[
'label' => __( 'Title Tag', 'cyarb-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => __( 'h1', 'cyarb-toolkit' ),
'h2' => __( 'h2', 'cyarb-toolkit' ),
'h3' => __( 'h3', 'cyarb-toolkit' ),
'h4' => __( 'h4', 'cyarb-toolkit' ),
'h5' => __( 'h5', 'cyarb-toolkit' ),
'h6' => __( 'h6', 'cyarb-toolkit' ),
],
'default' => 'h2',
]
);
$this->add_control(
'bg_video_url',
[
'label' => __( 'Background Video URL', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
]
);
$this->add_control(
'video_url',
[
'label' => __( 'Video URL', 'cyarb-toolkit' ),
'type' => Controls_Manager::TEXT,
'default' => 'https://www.youtube.com/watch?v=PWvPbGWVRrU',
]
);
$this->add_control(
'icon_cls', [
'label' => __( 'Icon Class Name', 'cyarb-toolkit' ),
'type' => Controls_Manager:: TEXT,
'label_block' => true,
'default' => 'lni lni-play',
]
);
$this-> end_controls_section();
// Start Style content controls
$this-> start_controls_section(
'content_style',
[
'label'=>__('Content', 'cyarb-toolkit'),
'tab'=> Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'sec_bg_head',
[
'label' => __( 'Section Background Heading', 'cyarb-toolkit' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'sec_bg_color',
'types' => ['gradient' ],
'selector' => '{{WRAPPER}} .how-we-work-inner-box',
]
);
$this->add_control(
'inner_connum',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'title_color',
[
'label' => __( 'Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .how-we-work-inner-box .section-title h2, .how-we-work-inner-box .section-title h1, .how-we-work-inner-box .section-title h3, .how-we-work-inner-box .section-title h4, .how-we-work-inner-box .section-title h5, .how-we-work-inner-box .section-title h6' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_type_typography',
'label' => __( 'Title Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .how-we-work-inner-box .section-title h2, .how-we-work-inner-box .section-title h1, .how-we-work-inner-box .section-title h3, .how-we-work-inner-box .section-title h4, .how-we-work-inner-box .section-title h5, .how-we-work-inner-box .section-title h6',
]
);
$this->add_control(
'inner_div2',
[
'type' => Controls_Manager::DIVIDER,
]
);
$this->add_control(
'videoi_color',
[
'label' => __( 'Video Icon Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .how-we-work-inner-box .how-we-work-video .video-btn' => 'color: {{VALUE}}',
],
]
);
$this->add_control(
'videoi_bgcolor',
[
'label' => __( 'Video Icon Background Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .how-we-work-inner-box .how-we-work-video .video-btn' => 'background-color: {{VALUE}}',
],
]
);
$this->add_control(
'video_border_color',
[
'label' => __( 'Video Border Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .how-we-work-inner-box .how-we-work-video .video-btn::after, .how-we-work-inner-box .how-we-work-video .video-btn::before' => 'border-color: {{VALUE}}',
],
]
);
$this-> end_controls_section();
}
protected function render()
{
// Retrieve all controls value
$settings = $this->get_settings_for_display();
?>
<div class="how-we-work-area">
<div class="container">
<div class="how-we-work-inner-box">
<?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="how-we-work-video">
<video loop="" muted="" autoplay="" poster="#" class="background-video">
<source src="<?php echo esc_url( $settings['bg_video_url'] ); ?>" type="video/mp4">
</video>
<?php if( $settings['video_url'] != '' ) : ?>
<a href="<?php echo esc_url( $settings['video_url'] ); ?>" class="video-btn popup-video">
<i class="<?php echo esc_attr( $settings['icon_cls'] ); ?>"></i>
</a>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php
}
}
Plugin::instance()->widgets_manager->register_widget_type( new Cyarb_HowWeWork );