start_controls_section( 'enteraddons_video_button_content_settings', [ 'label' => esc_html__( 'Video Button Content', 'enteraddons' ), ] ); $this->add_control( 'thumb_image', [ 'label' => esc_html__( 'Thumb Image', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'dynamic' => [ 'active' => true, ], 'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src(), ], ] ); $this->add_control( 'btn_icon', [ 'label' => esc_html__( 'Button Icon', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-play', 'library' => 'solid', ], ] ); $this->add_control( 'overly_active', [ 'label' => esc_html__( 'Active Overlay', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'enteraddons' ), 'label_off' => esc_html__( 'NO', 'enteraddons' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->add_control( 'circle_animation_active', [ 'label' => esc_html__( 'Active Circle Animation', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'enteraddons' ), 'label_off' => esc_html__( 'NO', 'enteraddons' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->add_control( 'video_url', [ 'label' => esc_html__( 'Video Url', 'enteraddons' ), 'label_block' => true, 'type' => \Elementor\Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ] ] ); $this->end_controls_section(); // End content /** * Style Tab * ------------------------------ Content Wrapper Style ------------------------------ * */ $this->start_controls_section( 'enteraddons_video_button_wrapper_style_settings', [ 'label' => esc_html__( 'Wrapper Settings', 'enteraddons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'video_button_wrap_width', [ 'label' => esc_html__( 'Wrapper Width', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => '%', 'size' => '', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'video_button_wrap_height', [ 'label' => esc_html__( 'Wrapper Height', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => '%', 'size' => '', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'video_button_wrap_margin', [ 'label' => esc_html__( 'Margin', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'video_button_wrap_padding', [ 'label' => esc_html__( 'Padding', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [ 'name' => 'video_button_border', 'label' => esc_html__( 'Border', 'enteraddons' ), 'selector' => '{{WRAPPER}} .enteraddons-video-wrap', ] ); $this->add_responsive_control( 'video_button_wrap_radius', [ 'label' => esc_html__( 'Border Radius', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [ 'name' => 'video_button_wrap_shadow', 'label' => esc_html__( 'Box Shadow', 'enteraddons' ), 'selector' => '{{WRAPPER}} .enteraddons-video-wrap', ] ); $this->add_group_control( \Elementor\Group_Control_Background::get_type(), [ 'name' => 'video_button_wrap_background', 'label' => esc_html__( 'Background', 'enteraddons' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .enteraddons-video-wrap', ] ); $this->add_control( 'overlay_background_heading', [ 'label' => esc_html__( 'Overlay Background', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_group_control( \Elementor\Group_Control_Background::get_type(), [ 'name' => 'video_button_overlay_background', 'label' => esc_html__( 'Background', 'enteraddons' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .enteraddons-video-wrap.video-overlay:after', ] ); $this->end_controls_section(); //------------------------------ Image Style ------------------------------ $this->start_controls_section( 'enteraddons_video_button_img_style', [ 'label' => esc_html__( 'Image Style', 'enteraddons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'img_width', [ 'label' => esc_html__( 'Image Width', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => '%', 'size' => '', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'img_height', [ 'label' => esc_html__( 'Image Height', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => '%', 'size' => '', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'video_button_img_margin', [ 'label' => esc_html__( 'Margin', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'video_button_img_padding', [ 'label' => esc_html__( 'Padding', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [ 'name' => 'video_button_img_border', 'label' => esc_html__( 'Border', 'enteraddons' ), 'selector' => '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img,{{WRAPPER}} .enteraddons-video-wrap.video-overlay:after', ] ); $this->add_responsive_control( 'video_button_img_radius', [ 'label' => esc_html__( 'Border Radius', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', '{{WRAPPER}} .enteraddons-video-wrap.video-overlay:after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [ 'name' => 'video_button_img_shadow', 'label' => esc_html__( 'Box Shadow', 'enteraddons' ), 'selector' => '{{WRAPPER}} .enteraddons-video-wrap .video-thumb-img', ] ); $this->end_controls_section(); //------------------------------ Button Style ------------------------------ $this->start_controls_section( 'enteraddons_video_button_play_btn_style', [ 'label' => esc_html__( 'Play Button Style', 'enteraddons' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); // $this->add_control( 'play_btn_position', [ 'label' => esc_html__( 'Position Type', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Relative', 'enteraddons' ), 'absolute' => esc_html__( 'Absolute', 'enteraddons' ), ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn' => 'position: {{VALUE}};', ], ] ); $this->add_responsive_control( 'play_btn_top_bottom_position', [ 'label' => esc_html__( 'Top, Bottom Position', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'condition' => [ 'play_btn_position' => 'absolute' ], 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => '90', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn' => 'top: {{SIZE}}{{UNIT}};' ], ] ); $this->add_responsive_control( 'play_btn_left_right_position', [ 'label' => esc_html__( 'Left, Right Position', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'condition' => [ 'play_btn_position' => 'absolute' ], 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => '90', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn' => 'left: {{SIZE}}{{UNIT}};' ], ] ); $this->add_control( 'position_hr', [ 'type' => \Elementor\Controls_Manager::DIVIDER, 'condition' => [ 'play_btn_position' => 'absolute' ] ] ); // $this->add_responsive_control( 'play_btn_width', [ 'label' => esc_html__( 'Button Width', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => '90', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn' => 'width: {{SIZE}}{{UNIT}};' ], ] ); $this->add_responsive_control( 'play_btn_height', [ 'label' => esc_html__( 'Button Height', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => '90', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn' => 'height: {{SIZE}}{{UNIT}};' ], ] ); $this->add_control( 'play_btn_icon_color', [ 'label' => esc_html__( 'Button Icon Color', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn i' => 'color: {{VALUE}}', ], ] ); $this->add_responsive_control( 'play_btn_icon_size', [ 'label' => esc_html__( 'Icon Size', 'enteraddons' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => '35', ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn i' => 'font-size: {{SIZE}}{{UNIT}};' ], ] ); $this->add_responsive_control( 'play_btn_icon_margin', [ 'label' => esc_html__( 'Margin', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn i' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [ 'name' => 'play_btn_border', 'label' => esc_html__( 'Button Border', 'enteraddons' ), 'selector' => '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn', ] ); $this->add_responsive_control( 'play_btn_radius', [ 'label' => esc_html__( 'Button Border Radius', 'enteraddons' ), 'type' => Controls_Manager::DIMENSIONS, 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [ 'name' => 'play_btn_shadow', 'label' => esc_html__( 'Button Box Shadow', 'enteraddons' ), 'selector' => '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn', ] ); $this->add_group_control( \Elementor\Group_Control_Background::get_type(), [ 'name' => 'play_btn_background', 'label' => esc_html__( 'Background', 'enteraddons' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .enteraddons-video-wrap .vdo_btn', ] ); $this->add_control( 'play_btn_animation_color_one', [ 'label' => esc_html__( 'Animation Color 1', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::COLOR ] ); $this->add_control( 'play_btn_animation_color_two', [ 'label' => esc_html__( 'Animation Color 2', 'enteraddons' ), 'type' => \Elementor\Controls_Manager::COLOR ] ); $this->end_controls_section(); } protected function render() { // get settings $settings = $this->get_settings_for_display(); // Template render $obj = new Video_Button_Template(); $obj::setDisplaySettings( $settings ); $obj->renderTemplate(); } public function get_script_depends() { return [ 'enteraddons-main', 'magnific-popup']; } public function get_style_depends() { return [ 'enteraddons-global-style', 'magnific-popup' ]; } }