📄 tween-effect.php

<?php
namespace Elementor; // Custom widgets must be defined in the Elementor namespace
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly (security measure)
/**
 * Widget Name: Section Heading
 */
class PBMIT_TweenEffect extends Widget_Base{
// The get_name() method is a simple one, you just need to return a widget name that will be used in the code.
public function get_name() {
	return 'pbmit_tween_effect_element';
}
// The get_title() method, which again, is a very simple one, you need to return the widget title that will be displayed as the widget label.
public function get_title() {
	return esc_attr__( 'xhyre Tween Effect', 'xhyre' );
}
// The get_icon() method, is an optional but recommended method, it lets you set the widget icon. you can use any of the eicon or font-awesome icons, simply return the class name as a string.
public function get_icon() {
	return 'fas fa-magic';
}
// The get_categories method, lets you set the category of the widget, return the category name as a string.
public function get_categories() {
	return [ 'xhyre_category' ];
}
public function __construct($data = [], $args = null) {
	parent::__construct($data, $args);
}
protected function register_controls() {
	// Style
	$this->start_controls_section(
		'select_style_section',
		[
			'label' => esc_attr__( 'Select Style', 'xhyre' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		]
	);
	$this->add_control(
		'style',
		[
			'label'			=> esc_attr__( 'Select Tween Effect View Style', 'xhyre' ),
			'description'	=> esc_attr__( 'Select Tween Effect View style.', 'xhyre' ),
			'type'			=> 'pbmit_imgselect',
			'label_block'	=> true,
			'thumb_width'	=> '110px',
			'default'		=> '1',
			'prefix'		=> 'pbmit-ihbox pbmit-ihbox-style-',
			'options'		=> pbmit_element_template_list( 'tween-effect', true ),
		]
	);
	$this->end_controls_section();
	//Content Service box
	$this->start_controls_section(
		'content_section',
		[
			'label'   => esc_attr__( 'Tween Effect Content', 'xhyre' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		]
	);
	$this->add_control(
		'icon_type',
		[
			'label'   => esc_attr__( 'Select Tween Animated Type', 'xhyre' ),
			'type'	=> Controls_Manager::SELECT,
			'options' => [
				'image'	=> esc_attr__( 'Image', 'xhyre' ),
				'text'	=> esc_attr__( 'Text', 'xhyre' ),
			],
			'default' => esc_attr( 'image' ),
		]
	);
	$this->add_control(
		'icon_image',
		[
			'label' 	  => esc_attr__( 'Select Image for Tween Effect', 'xhyre' ),
			'description' => esc_attr__( 'This image will appear at icon position. Recommended size is 300x300 px transparent PNG file.', 'xhyre' ),
			'type'		  => \Elementor\Controls_Manager::MEDIA,
			'default' 	  => [
				'url' => get_template_directory_uri() . '/images/static-box.jpg',
			],
			'condition' 	=> [
				'icon_type' => 'image',
			]
		]
	);
	$this->add_group_control(
		\Elementor\Group_Control_Image_Size::get_type(),
		[
			'name' 		=> 'thumbnail',
			'default' 	=> 'full',
			'separator' => 'none',
			'condition' => [
				'icon_type' => 'image',
			]
		]
	);
	$this->add_control(
		'title',
		[
			'label'   => esc_attr__( 'Enter Tween Title', 'xhyre' ),
			'type'	=> Controls_Manager::TEXTAREA,
			'dynamic' => [
				'active' => true,
			],
			'default'	  => esc_attr__( 'Tween Effect Animation', 'xhyre' ),
			'placeholder' => esc_attr__( 'Enter your title', 'xhyre' ),
			'label_block' => true,
			'condition'   => [
				'icon_type' => 'text',
			]
		]
	);
	$this->add_control(
		'start_x_value',
		[
			'label'   => esc_attr__( 'Starting X position', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
 		]
	);
	$this->add_control(
		'end_x_value',
		[
			'label'   => esc_attr__( 'Ending X position', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
		]
	);
	$this->add_control(
		'start_y_value',
		[
			'label'   => esc_attr__( 'Starting Y position', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
			'rows' 	  => 2,
 		]
	);
	$this->add_control(
		'end_y_value',
		[
			'label'   => esc_attr__( 'Ending Y position', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '-99' ),
		]
	);
	$this->add_control(
		'seprator1',
		[
			'type' => \Elementor\Controls_Manager::DIVIDER,
		]
	);
	$this->add_control(
		'start_scale_x_value',
		[
			'label'   => esc_attr__( 'Startinng X Scale', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '1' ),
		]
	);
	$this->add_control(
		'end_scale_x_value',
		[
			'label'   => esc_attr__( 'Endinng X Scale', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '1' ),
		]
	);
	$this->add_control(
		'seprator2',
		[
			'type' => \Elementor\Controls_Manager::DIVIDER,
		]
	);
	$this->add_control(
		'start_skew_x_value',
		[
			'label'   => esc_attr__( 'Startinng X Skew', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
		]
	);
	$this->add_control(
		'end_skew_x_value',
		[
			'label'   => esc_attr__( 'Endinng X Skew', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
		]
	);
	$this->add_control(
		'start_skew_y_value',
		[
			'label'   => esc_attr__( 'Startinng Y Skew', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
		]
	);
	$this->add_control(
		'end_skew_y_value',
		[
			'label'   => esc_attr__( 'Endinng Y Skew', 'xhyre' ),
			'type'	=> Controls_Manager::NUMBER,
			'default' => esc_attr( '0' ),
		]
	);
	$this->add_control(
		'seprator3',
		[
			'type' => \Elementor\Controls_Manager::DIVIDER,
		]
	);
	$this->add_control(
		'start_rotate_x_value',
		[
			'label'   => esc_attr__( 'Startinng X Rotation', 'xhyre' ),
			'type'	=> Controls_Manager::TEXT,
			'default' => esc_attr( '0' ),
		]
	);
	$this->add_control(
		'end_rotate_x_value',
		[
			'label'   => esc_attr__( 'Endinng X Rotation', 'xhyre' ),
			'type'	=> Controls_Manager::TEXT,
			'default' => esc_attr( '-4' ),
		]
	);
	$this->add_control(
		'seprator4',
		[
			'type' => \Elementor\Controls_Manager::DIVIDER,
		]
	);
	$this->add_responsive_control(
		'text_align',
		[
			'label'		=> esc_attr__( 'Alignment', 'xhyre' ),
			'type'		=> Controls_Manager::CHOOSE,
			'options'	=> [
				'left'		=> [
					'title'		=> esc_attr__( 'Left', 'xhyre' ),
					'icon'		=> 'fa fa-align-left',
				],
				'center'	=> [
					'title'		=> esc_attr__( 'Center', 'xhyre' ),
					'icon'		=> 'fa fa-align-center',
				],
				'right'		=> [
					'title'		=> esc_attr__( 'Right', 'xhyre' ),
					'icon'		=> 'fa fa-align-right',
				],
			],
			'prefix_class'	=> 'pbmit-ele-header-align-',	
			'selectors'	=> [
				'{{WRAPPER}} .pbmit-tween-effect-style-1' => 'text-align: {{VALUE}};',
			],
			'dynamic'	=> [
				'active'	=> true,
			],
		]
	);
	$this->end_controls_section();
	// HTML Tags
	$this->start_controls_section(
		'advanced_section',
		[
			'label' => pbmit_esc_kses('<img class="pbmit-tab-small-logo" src="'.get_template_directory_uri() . '/includes/images/pbm-small-logo.png" /> ') . esc_attr__( 'Tag & Gap Settings', 'xhyre' ),
			'tab'   => Controls_Manager::TAB_ADVANCED,
		]
	);
	// Tags
	$this->add_control(
		'tag_options',
		[
			'label'		=> esc_attr__( 'Tags for SEO', 'xhyre' ),
			'type'		=> Controls_Manager::HEADING,
			'separator'	=> 'before',
		]
	);
	$this->add_control(
		'title_tag',
		[
			'label'   => esc_attr__( 'Heading Tag', 'xhyre' ),
			'type'	=> Controls_Manager::SELECT,
			'options' => [
				'h1'	=> esc_attr( 'H1' ),
				'h2'	=> esc_attr( 'H2' ),
				'h3'	=> esc_attr( 'H3' ),
				'h4'	=> esc_attr( 'H4' ),
				'h5'	=> esc_attr( 'H5' ),
				'h6'	=> esc_attr( 'H6' ),
				'div'	=> esc_attr( 'DIV' ),
			],
			'default' => esc_attr( 'h3' ),
		]
	);
	$this->end_controls_section();
}
protected function render() {
	$settings = $this->get_settings_for_display();
	extract($settings);
	$title_html =  $image_html = '';
	if( file_exists( locate_template( '/theme-parts/tween-effect/tween-effect-style-'.esc_attr($style).'.php', false, false ) ) ){
		//image
		if( $settings['icon_type']=='image' ){
			$icon_alt		 = (!empty($settings['title'])) ? trim($settings['title']) : esc_attr__('Tween-img', 'xhyre') ;
			$image_html = pbmit_esc_kses( Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'icon_image' ) );
		}
		// Title
		if( !empty($settings['title']) ) {
			$title_tag	= ( !empty($settings['title_tag']) ) ? $settings['title_tag'] : 'h3' ;
			$title_html	= '<'. pbmit_esc_kses($title_tag) . ' class="pbmit-element-title">'.pbmit_esc_kses($settings['title']).'</'. pbmit_esc_kses($title_tag).'>';
		}
		if($settings['icon_type']=='text' ){
			$type = "text";
		} elseif ($settings['icon_type']=='image' ){
			$type = "image";
		} else {
			$type = "";
		}
		?>
		<div class="pbmit-ele-tween-effect pbmit-tween-<?php echo esc_attr($type)?> pbmit-tween-effect-style-<?php echo esc_attr($style) ?>">
			<?php include( locate_template( '/theme-parts/tween-effect/tween-effect-style-'.esc_attr($style).'.php', false, false ) ); ?>
		</div>
	<?php }
}
protected function content_template() {}
}
// After the Schedule class is defined, I must register the new widget class with Elementor:
Plugin::instance()->widgets_manager->register( new PBMIT_TweenEffect() );