📄 tabs.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_TabsElement extends Widget_Base{
 	/**
	 * Get widget name.
	 *
	 * Retrieve tabs widget name.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'pbmit_tabs_element';
	}
	/**
	 * Get widget title.
	 *
	 * Retrieve tabs widget title.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return esc_html__( 'Xhyre Tabs Element', 'xhyre' );
	}
	/**
	 * Get widget icon.
	 *
	 * Retrieve tabs widget icon.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'fas fa-box';
	}
	// 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' ];
	}
	/**
	 * Get widget keywords.
	 *
	 * Retrieve the list of keywords the widget belongs to.
	 *
	 * @since 2.1.0
	 * @access public
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords() {
		return [ 'tabs', 'accordion', 'toggle' ];
	}
	protected function register_controls() {
		//Content Service box
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_attr( 'Tabs', 'xhyre' ),
			]
		);
		$repeater = new Repeater();
		$repeater->add_control(
			'tab_title',
			[
				'label'			=> esc_attr( 'Tab Title', 'xhyre' ),
				'type'			=> Controls_Manager::TEXT,
				'default'		=> esc_attr( 'Tab Title', 'xhyre' ),
				'placeholder'	=> esc_attr( 'Tab Title', 'xhyre' ),
				'label_block'	=> true,
			]
		);
		$repeater->add_control(
			'tab_content',
			[
				'label'			=> esc_attr( 'Tab Content Description', 'xhyre' ),
				'default'		=> esc_attr( 'Massa laoreet lacinia placerat eleifend cs curae imperdiet mattis taciti, scelerisque elementum velit ullamcorper praesent enim tempMassa laoreet lacinia placerat eleifend cs curae imperdiet mattis.', 'xhyre' ),
				'placeholder'	=> esc_attr( 'Tab Content', 'xhyre' ),
				'type'			=> Controls_Manager::TEXTAREA,
				'show_label'	=> true,
			]
		);
		$repeater->add_control(
			'tab_text_01',
			[
				'label'			=> esc_attr__( 'Tab Line1', 'xhyre' ),
				'type'			=> Controls_Manager::TEXT,
				'dynamic'		=> [
					'active'		=> true,
				],
				'default'		=> esc_attr__( 'Explore job roles based of your study', 'xhyre' ),
				'placeholder'	=> esc_attr__( 'Enter Text Here', 'xhyre' ),
				'label_block'	=> true,
			]
		);
		$repeater->add_control(
			'tab_text_02',
			[
				'label'			=> esc_attr__( 'Tab Line2', 'xhyre' ),
				'type'			=> Controls_Manager::TEXT,
				'dynamic'		=> [
					'active'		=> true,
				],
				'default'		=> esc_attr__( 'Get more job recommendations directly', 'xhyre' ),
				'placeholder'	=> esc_attr__( 'Enter Text Here', 'xhyre' ),
				'label_block'	=> true,
			]
		);		
		$this->add_control(
			'tabs',
			[
				'label'			=> esc_attr( 'Tabs Items', 'xhyre' ),
				'type'			=> Controls_Manager::REPEATER,
				'fields' 		=> $repeater->get_controls(),
				'default'		=> [
					[
						'tab_title'		=> esc_attr( 'The Great Mission', 'xhyre' ),
						'tab_content'	=> esc_attr( 'Massa laoreet lacinia placerat eleifend cs curae imperdiet mattis taciti, scelerisque elementum velit ullamcorper praesent enim tempMassa laoreet lacinia placerat eleifend cs curae imperdiet mattis.', 'xhyre' ),
						'tab_text_01'	=> esc_attr( 'Explore job roles based of your study', 'xhyre' ),
						'tab_text_02'	=> esc_attr( 'Get more job recommendations directly', 'xhyre' ),
					],
					[
						'tab_title'		=> esc_attr( 'Amazing Vision', 'xhyre' ),
						'tab_content'	=> esc_attr( 'There are many variations of passages of Lorem Ipsumbut the majority have suffered alteration in some form, by injected humour, or words which dont look even.', 'xhyre' ),
						'tab_text_01'	=> esc_attr( 'Cultures of recognition and wellbeing', 'xhyre' ),
						'tab_text_02'	=> esc_attr( 'Improving workplace with leadership', 'xhyre' ),
					],
					[
						'tab_title'		=> esc_attr( 'Our Destination', 'xhyre' ),
						'tab_content'	=> esc_attr( 'Massa laoreet lacinia placerat eleifend cs curae imperdiet mattis taciti, scelerisque elementum velit ullamcorper praesent enim tempMassa laoreet lacinia placerat eleifend cs curae imperdiet mattis.', 'xhyre' ),
						'tab_text_01'	=> esc_attr( 'Get more job recommendations directly', 'xhyre' ),
						'tab_text_02'	=> esc_attr( 'Cultures of recognition and wellbeing', 'xhyre' ),
					],			
				],
				'title_field'	=> '{{{ tab_title }}}',
			]
		);
		$this->end_controls_section();
		// Heading and Subheading
		$this->start_controls_section(
			'heading_section',
			[
				'label' => esc_attr__( 'Heading and Subheading', 'xhyre' ),
			]
		);
		$this->add_control(
			'title_animation',
			[
				'label'			=> esc_attr__( 'Heading Animation', 'xhyre' ),
				'description'	=> esc_attr__( 'Select Heading Text Animation View style.', 'xhyre' ) . ' ' . pbmit_esc_kses('<br><a target="_blank" href="' . esc_url('https://xhyre-demo.pbminfotech.com/demo1/element/#heading-animations') . '">' . esc_attr__( 'See all anmiation demo here.', 'xhyre' ) . '</a>' ),
				'type'			=> Controls_Manager::SELECT,
				'default'		=> '5',
				'options' 		=> [
					'5'				=> esc_attr__( 'No animation', 'xhyre' ),
					'1'				=> esc_attr__( 'Animation Style 1', 'xhyre' ),
					'2'				=> esc_attr__( 'Animation Style 2', 'xhyre' ),
					'3'				=> esc_attr__( 'Animation Style 3', 'xhyre' ),
					'4'				=> esc_attr__( 'Animation Style 4', 'xhyre' ),
				],
				'separator'		=> 'before',
			]
		);
		$this->add_control(
			'title',
			[
				'label'			=> esc_attr__( 'Heading', 'xhyre' ),
				'type'			=> Controls_Manager::TEXTAREA,
				'dynamic'		=> [
					'active'		=> true,
				],
				'default'		=> esc_attr__( 'Our Tabs', 'xhyre' ),
				'placeholder'	=> esc_attr__( 'Enter your heading', 'xhyre' ),
				'label_block'	=> true,
			]
		);
		$this->add_control(
			'title_link',
			[
				'label'			=> esc_attr__( 'Heading Link', 'xhyre' ),
				'type'			=> Controls_Manager::URL,
				'label_block'	=> true,
			]
		);
		$this->add_control(
			'subtitle',
			[
				'label'			=> esc_attr__( 'Subheading', 'xhyre' ),
				'type'			=> Controls_Manager::TEXTAREA,
				'dynamic'		=> [
					'active'		=> true,
				],
				'placeholder'	=> esc_attr__( 'Enter your subtitle', 'xhyre' ),
				'label_block'	=> true,
			]
		);
		$this->add_control(
			'subtitle_link',
			[
				'label'			=> esc_attr__( 'Subheading Link', 'xhyre' ),
				'type'			=> Controls_Manager::URL,
				'label_block'	=> true,
			]
		);
		$this->add_control(
			'desc',
			[
				'label'			=> esc_attr__( 'Description', 'xhyre' ),
				'type'			=> Controls_Manager::TEXTAREA,
				'placeholder'	=> esc_attr__( 'Type your description here', 'xhyre' ),
			]
		);
		$this->add_control(
			'reverse_title',
			[
				'label'			=> esc_attr__( 'Reverse Heading', 'xhyre' ),
				'description'	=> esc_attr__( 'Show Subheading before Heading', 'xhyre' ),
				'type'			=> Controls_Manager::SWITCHER,
				'label_on'		=> esc_attr__( 'Yes', 'xhyre' ),
				'label_off'		=> esc_attr__( 'No', 'xhyre' ),
				'return_value'	=> 'yes',
				'default'		=> '',
			]
		);
		$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-heading-subheading' => 'text-align: {{VALUE}};',
				],
			]
		);
		$this->end_controls_section();
	}
	protected function render() {
		$settings = $this->get_settings_for_display();
		?>
		<div class="pbmit-ele-header-area">
			<?php pbmit_heading_subheading($settings, true); ?>
		</div>
		<div class="pbmit-tabs">
			<?php if ( $settings['tabs'] ) : ?>
			<ul class="pbmit-tabs-heading">
				<?php $i = 1; foreach ( $settings['tabs'] as $tabs ) { ?>
					<?php $active_li_class = ( $i==1 ) ? 'pbmit-tab-li-active' : '' ; ?>
				<li class="pbmit-tab-link <?php echo esc_attr($active_li_class); ?>" data-pbmit-tab="<?php echo esc_attr($i); ?>"><span><?php echo esc_html($tabs['tab_title']); ?></span></li>
				<?php $i++; } ?>
			</ul>
			<div class="pbmit-tab-content-wrapper">
				<?php $j = 1; foreach ( $settings['tabs'] as $tabs ) { ?>
					<?php $active_class = ( $j==1 ) ? 'pbmit-tab-active' : '' ; ?>
					<div class="pbmit-tab-content pbmit-tab-content-<?php echo esc_attr($j); ?> <?php echo esc_attr($active_class); ?>">
						<div class="pbmit-tab-content-title" data-pbmit-tab="<?php echo esc_attr($j); ?>">
							<?php echo esc_html($tabs['tab_title']); ?>
						</div>
						<div class="pbmit-tab-content-inner">
							<?php
							$line1 = $line2 = '';
							// Tab Text
							$line1 .= ( !empty($tabs['tab_text_01']) ) ? '<li>'.esc_html($tabs['tab_text_01']).'</li>' : '' ;
							$line2 .= ( !empty($tabs['tab_text_02']) ) ? '<li>'.esc_html($tabs['tab_text_02']).'</li>' : '' ;
							?>
							<div class="pbmit-tab-text">
								<?php echo pbmit_esc_kses($tabs['tab_content']); ?>
							</div>
							<ul class="pbmit-tab-list">
								<?php echo pbmit_esc_kses($line1); ?>
								<?php echo pbmit_esc_kses($line2); ?>
							</ul>
						</div>						
					</div>
				<?php $j++; } ?>
			</div>
			<?php endif; ?>
		</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_TabsElement() );