<?php
/**
* Banner Widget
*/
namespace Elementor;
class Cyarb_Banner extends Widget_Base {
public function get_name() {
return 'Cyarb_Banner';
}
public function get_title() {
return __( 'Cyarb_Banner', 'cyarb-toolkit' );
}
public function get_icon() {
return 'eicon-banner';
}
public function get_categories() {
return [ 'cyarb-elements' ];
}
protected function register_controls() {
$this->start_controls_section(
'Cyarb_Banner_Area',
[
'label' => __( 'Cyarb Banner Area', 'cyarb-toolkit' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'add_image',
[
'label' => __('Add Banner Image', 'cyarb-toolkit' ),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
]
]
);
$this->add_control(
'banner_title', [
'label' => __( 'Add Banner Title', 'cyarb-toolkit' ),
'type'=>Controls_Manager:: TEXT,
]
);
$this->add_control(
'title_type',
[
'label' => __( 'Choose Heading Type', 'cyarb-toolkit' ),
'type' => Controls_Manager::SELECT,
'label_block' => true,
'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' => 'h1'
]
);
$this->add_control(
'banner_desc',
[
'label'=>__('Banner Description', 'cyarb-toolkit'),
'type'=>Controls_Manager:: WYSIWYG,
'description' => __('This text editor for p','cyarb-toolkit'),
]
);
$this->add_control(
'placeholder_text', [
'label' => __( 'Placeholder Text', 'cyrab-toolkit' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
]
);
$this->add_control(
'button_text', [
'label' => __( 'Button text', 'cyrab-toolkit' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
]
);
$this->add_control(
'action_url', [
'label' => esc_html__( 'Action URL', 'cyrab-toolkit' ),
'description' => __( 'Enter here your MailChimp action URL. <a href="https://docs.envytheme.com/docs/cyrab-theme-documentation/tips-guides-troubleshoots/get-mailchimp-newsletter-form-action-url/" target="_blank"> How to </a>', 'cyrab-toolkit' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'default' => 'https://envytheme.us20.list-manage.com/subscribe/post?u=60e1ffe2e8a68ce1204cd39a5&id=42d6d188d9
',
]
);
//Shape Images
$this->add_control(
'image_shape',
[
'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->end_controls_section();
$this->start_controls_section(
'section_style',
[
'label' => __( 'Style', 'cyarb-toolkit' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'title_color',
[
'label' => __( 'Title Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .banner-content h1, .banner-content h2, .banner-content h3, .banner-content h4, .banner-content h5, .banner-content h6' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_type_typography',
'label' => __( 'Title Type Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .banner-content h1, .banner-content h2, .banner-content h3, .banner-content h4, .banner-content h5, .banner-content h6',
]
);
$this->add_control(
'content_color',
[
'label' => __( 'Content Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} p' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'content_type_typography',
'label' => __( 'Content Type Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .banner-content p',
]
);
$this->add_control(
'btn_color',
[
'label' => __( 'Button Color', 'cyarb-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .default-btn' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'btn_type_typography',
'label' => __( 'Button Type Typography', 'cyarb-toolkit' ),
'selector' => '{{WRAPPER}} .default-btn',
]
);
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="banner-area">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="banner-content">
<<?php echo esc_attr($settings['title_type']);?>><?php echo esc_html( $settings['banner_title'] ); ?></<?php echo esc_attr($settings['title_type']);?>>
<?php echo wp_kses_post( $settings['banner_desc'] ); ?>
<form class="mailchimp newsletter-form" method="post">
<div class="form-group">
<input type="email" class="input-newsletter" placeholder="<?php echo esc_html( $settings['placeholder_text'] ); ?>" name="EMAIL" required autocomplete="off">
<button type="submit" class="default-btn"><span><?php echo esc_html( $settings['button_text'] ); ?></span></button>
</div>
<p class="mchimp-errmessage" style="display: none;"></p>
<p class="mchimp-sucmessage" style="display: none;"></p>
</form>
</div>
</div>
<?php if( $settings['add_image']['url'] != '' ) :?>
<div class="col-lg-6 col-md-12">
<div class="banner-image">
<img src="<?php echo esc_url($settings['add_image']['url']) ?>" alt="<?php echo esc_attr('banner-image','cyarb-toolkit'); ?>">
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php if ( 'yes' === $settings['image_shape'] ) : ?>
<div class="shape1"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape1.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<div class="shape2"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape2.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<div class="shape3"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape3.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<div class="shape4"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape4.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<div class="shape5"><img src="<?php echo esc_url(get_template_directory_uri() .'/assets/img/shape/shape5.png' ); ?>" alt="<?php echo esc_attr__( 'Shape', 'cyarb-toolkit' ); ?>"></div>
<?php endif; ?>
</div>
<script>
;(function($){
"use strict";
$(document).ready(function () {
// MAILCHIMP
if ($(".mailchimp").length > 0) {
$(".mailchimp").ajaxChimp({
callback: mailchimpCallback,
url: "<?php echo esc_js($settings['action_url']) ?>" //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".
});
}
$(".memail").on("focus", function () {
$(".mchimp-errmessage").fadeOut();
$(".mchimp-sucmessage").fadeOut();
});
$(".memail").on("keydown", function () {
$(".mchimp-errmessage").fadeOut();
$(".mchimp-sucmessage").fadeOut();
});
$(".memail").on("click", function () {
$(".memail").val("");
});
function mailchimpCallback(resp) {
if (resp.result === "success") {
$(".mchimp-sucmessage").html(resp.msg).fadeIn(1000);
$(".mchimp-sucmessage").fadeOut(500);
} else if (resp.result === "error") {
$(".mchimp-errmessage").html(resp.msg).fadeIn(1000);
}
}
});
})(jQuery)
</script>
<?php
}
}
Plugin::instance()->widgets_manager->register_widget_type( new Cyarb_Banner );