File Manager

Editing File: /home/tplkfrt/www/wp-content/plugins/exclusive-addons-for-elementor/elements/card/card.php

<?php
namespace ExclusiveAddons\Elements;

if ( ! defined( 'ABSPATH' ) ) exit;

use \Elementor\Controls_Manager;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Image_Size;
use \Elementor\Control_Media;
use \Elementor\Icons_Manager;
use \Elementor\Group_Control_Background;
use \Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Css_Filter;
use \Elementor\Utils;
use \Elementor\Widget_Base;
use \ExclusiveAddons\Elementor\Image_Mask_SVG_Control;
use \ExclusiveAddons\Elementor\Helper;

class Card extends Widget_Base {
	
	public function get_name() {
		return 'exad-exclusive-card';
	}

public function get_title() {
		return esc_html__( 'Card', 'exclusive-addons-elementor' );
	}

public function get_icon() {
		return 'exad exad-logo exad-card';
	}

public function get_categories() {
		return [ 'exclusive-addons-elementor' ];
	}

public function get_keywords() {
        return [ 'exclusive', 'info', 'content', 'block', 'box' ];
    }

protected function register_controls() {
		
		/**
		* Card Content Section
		*/
		$this->start_controls_section(
			'exad_card_content',
			[
				'label' => esc_html__( 'Content', 'exclusive-addons-elementor' )
			]
		);
		
		$this->add_control(
			'exad_card_image',
			[
				'label'   => __( 'Image', 'exclusive-addons-elementor' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src()
				],
				'dynamic' => [
					'active' => true,
				]
			]
		);

$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'      => 'thumbnail', 
				'default'   => 'full',
				'condition' => [
					'exad_card_image[url]!' => ''
				]
			]
		);

$this->add_control(
			'exad_card_enable_image_mask',
			[
				'label' => __( 'Enable Image Mask', 'exclusive-addons-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __( 'Show', 'exclusive-addons-elementor' ),
				'label_off' => __( 'Hide', 'exclusive-addons-elementor' ),
				'return_value' => 'yes',
				'default' => 'no',
			]
		);

$this->add_control(
			'exad_card_mask_shape_mask_shape',
			[
				'label'                => __( 'Mask Shape', 'exclusive-addons-elementor' ),
				'type'                 => Image_Mask_SVG_Control::SVGSELECTOR,
				'options'              => Helper::exad_masking_shape_list( 'list' ),
				'default'              => 'shape-1',
				'toggle'               => false,
				'label_block'          => true,
                'selectors_dictionary' => Helper::exad_masking_shape_list( 'url' ),
				'selectors'            => [
                    '{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-image: url({{VALUE}}); mask-image: url({{VALUE}});'
				],
				'condition' 		   => [
					'exad_card_enable_image_mask' => 'yes'
				]
			]
		);
		
		$this->add_control(
			'exad_card_mask_shape_position',
			[
				'label'       => __( 'Position', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'center',
				'label_block' => true,
				'options'     => [
					'top'     => __( 'Top', 'exclusive-addons-elementor' ),
					'center'  => __( 'Center', 'exclusive-addons-elementor' ),
					'left'    => __( 'Left', 'exclusive-addons-elementor' ),
					'right'   => __( 'Right', 'exclusive-addons-elementor' ),
					'bottom'  => __( 'Bottom', 'exclusive-addons-elementor' ),
					'custom'  => __( 'Custom', 'exclusive-addons-elementor' )
                ],
                'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-position: {{VALUE}};'
				],
				'condition' 		   => [
					'exad_card_enable_image_mask' => 'yes'
				]
			]
		);
		
		$this->add_control(
			'exad_card_mask_shape_position_x_offset',
			[
				'label'       => __( 'X Offset', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px', '%' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 500
					],
					'%'       => [
						'min' => 0,
						'max' => 100
					]
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-position-y: {{SIZE}}{{UNIT}};'
                ],
                'condition'   => [
					'exad_card_enable_image_mask' => 'yes',
                    'exad_card_mask_shape_position' => 'custom'
				]
			]
		);

$this->add_control(
			'exad_card_mask_shape_position_y_offset',
			[
				'label'       => __( 'Y Offset', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px', '%' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 500
					],
					'%'       => [
						'min' => 0,
						'max' => 100
					]
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-position-x: {{SIZE}}{{UNIT}};'
                ],
                'condition'   => [
					'exad_card_enable_image_mask' => 'yes',
                    'exad_card_mask_shape_position' => 'custom'
				]
			]
		);
        
        $this->add_control(
			'exad_card_mask_shape_size',
			[
				'label'       => __( 'Size', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'auto',
				'label_block' => true,
				'options'     => [
					'auto'    => __( 'Auto', 'exclusive-addons-elementor' ),
					'contain' => __( 'Contain', 'exclusive-addons-elementor' ),
					'cover'   => __( 'Cover', 'exclusive-addons-elementor' ),
					'custom'  => __( 'Custom', 'exclusive-addons-elementor' )
                ],
                'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-size: {{VALUE}};'
				],
				'condition' 		   => [
					'exad_card_enable_image_mask' => 'yes'
				]
			]
        );

$this->add_control(
			'exad_card_mask_shape_custome_size',
			[
				'label'       => __( 'Mask Size', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px', '%' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 600
					],
					'%'       => [
						'min' => 0,
						'max' => 100
					]
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-size: {{SIZE}}{{UNIT}};'
                ],
                'condition'   => [
					'exad_card_enable_image_mask' => 'yes',
                    'exad_card_mask_shape_size' => 'custom'
				]
			]
		);

$this->add_control(
			'exad_card_mask_shape_repeat',
			[
				'label'         => __( 'Repeat', 'exclusive-addons-elementor' ),
				'type'          => Controls_Manager::SELECT,
				'default'       => 'no-repeat',
				'label_block'   => true,
				'options'       => [
					'no-repeat' => __( 'No repeat', 'exclusive-addons-elementor' ),
					'repeat'    => __( 'Repeat', 'exclusive-addons-elementor' )
                ],
                'selectors'     => [
					'{{WRAPPER}} .exad-card-thumb img' => '-webkit-mask-repeat: {{VALUE}};'
				],
				'condition' 	=> [
					'exad_card_enable_image_mask' => 'yes'
				]
			]
		);

$this->add_control(
			'exad_card_badge_switcher',
			[
				'label' => __( 'Enable Badge', 'exclusive-addons-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __( 'Show', 'exclusive-addons-elementor' ),
				'label_off' => __( 'Hide', 'exclusive-addons-elementor' ),
				'return_value' => 'yes',
				'default' => 'yes',
			]
		);

$this->add_control(
			'exad_card_badge',
			[
				'label'       => esc_html__( 'Badge Text', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'separator'   => 'before',
				'default'     => esc_html__( 'Card Badge', 'exclusive-addons-elementor' ),
				'condition'   => [
					'exad_card_badge_switcher' => 'yes'
				],
				'dynamic' => [
					'active' => true,
				]
			]
		);

$this->add_control(
			'exad_card_title',
			[
				'label'       => esc_html__( 'Title', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'separator'   => 'before',
				'default'     => esc_html__( 'Card Title', 'exclusive-addons-elementor' ),
				'dynamic' => [
					'active' => true,
				]
			]
		);

$this->add_control(
            'exad_card_title_html_tag',
            [
                'label'   => __('Title HTML Tag', 'exclusive-addons-elementor'),
                'type'    => Controls_Manager::SELECT,
				'separator' => 'after',
                'options' => Helper::exad_title_tags(),
                'default' => 'span',
            ]
		);

$this->add_control(
			'exad_card_title_link',
			[
				'label'       => __( 'Title URL', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::URL,
				'placeholder' => __( 'https://your-link.com', 'exclusive-addons-elementor' ),
				'label_block' => true,
				'default'     => [
					'url'         => '',
					'is_external' => true
				]
			]
		);
		
		$this->add_control(
			'exad_card_tag',
			[
				'label'       => esc_html__( 'Tag', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'default'     => esc_html__( 'Card Tag', 'exclusive-addons-elementor' ),
				'dynamic' => [
					'active' => true,
				]
			]
		);
		
		$this->add_control(
			'exad_card_description',
			[
				'label'   => esc_html__( 'Description', 'exclusive-addons-elementor' ),
				'type'    => Controls_Manager::TEXTAREA,
				'default' => esc_html__( 'Basic description about the Card', 'exclusive-addons-elementor' ),
				'dynamic' => [
					'active' => true,
				]
			]
		);

$this->add_control(
			'exad_card_action_button_content',
			[
				'label'     => __( 'Action Button ', 'exclusive-addons-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before'
			]
		);

$this->add_control(
			'exad_card_action_text',
			[
				'label'       => esc_html__( 'Text', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'default'     => esc_html__( 'Details', 'exclusive-addons-elementor' ),
				'dynamic' => [
					'active' => true,
				]
			]
		);

$this->add_control(
			'exad_card_action_link',
			[
				'label'       => __( 'URL', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::URL,
				'placeholder' => __( 'https://your-link.com', 'exclusive-addons-elementor' ),
				'label_block' => true,
				'default'     => [
					'url'         => '#',
					'is_external' => true
				]
			]
		);

$this->add_control(
			'exad_card_action_link_icon',
			[
				'label'       => __( 'Icon', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::ICONS,
				'condition'   => [
					'exad_card_action_text!' => ''
				]
			]
		);

$this->add_control(
			'exad_card_action_link_icon_position',
			[
				'label'     => __( 'Icon Position', 'exclusive-addons-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'icon_pos_left'  => [
						'title'      => __( 'Left', 'exclusive-addons-elementor' ),
						'icon'       => 'eicon-angle-left'
					],
					'icon_pos_right' => [
						'title'      => __( 'Right', 'exclusive-addons-elementor' ),
						'icon'       => 'eicon-angle-right'
					]
				],
				'default'   => 'icon_pos_right',
				'toggle'    => false,
				'condition' => [
                    'exad_card_action_link_icon[value]!' => '',
                    'exad_card_action_text!' => ''
                ]
			]
		);

$this->end_controls_section();

/**
		* Card Layout Section
		*/
		$this->start_controls_section(
			'exad_card_layout',
			[
				'label' => esc_html__( 'Layout', 'exclusive-addons-elementor' )
			]
		);

$this->add_control(
			'exad_card_layout_type',
			[
				'label'   => __( 'Layout', 'exclusive-addons-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'default',
				'options' => [
					'default'       => __( 'Default', 'exclusive-addons-elementor' ),
					'text_on_image' => __( 'Text On Image', 'exclusive-addons-elementor' )
				]
			]
		);

$this->end_controls_section();

/*
		* Card Styling Section
		*/
		$this->start_controls_section(
			'exad_section_card_styles_preset',
			[
				'label' => esc_html__( 'Container', 'exclusive-addons-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE
			]
		);
		
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'exad_card_background',
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .exad-card'
			]
		);

$this->add_responsive_control(
			'exad_card_padding',
			[
				'label'      => __( 'Padding', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'               => 'exad_card_border',
				'fields_options'     => [
                    'border'         => [
                        'default'    => 'solid'
                    ],
                    'width'          => [
                        'default'    => [
							'top'    => '1',
							'right'  => '1',
							'bottom' => '1',
							'left'   => '1'
                        ]
                    ],
                    'color'          => [
                        'default'    => '#e5e5e5'
                    ]
                ],
				'selector'           => '{{WRAPPER}} .exad-card'
			]
		);

$this->add_responsive_control(
			'exad_card_radius',
			[
				'label'      => __( 'Border Radius', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				],
				'condition'  => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'exad_card_box_shadow',
				'selector' => '{{WRAPPER}} .exad-card'
			]
		);

$this->end_controls_section();

/*
		* Card Image Styling Section
		*/
		$this->start_controls_section(
			'exad_section_card_styles_image',
			[
				'label'     => esc_html__( 'Image', 'exclusive-addons-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'exad_card_image[url]!' => ''
				]
			]
		);

$this->add_responsive_control(
			'exad_section_card_image_height',
			[
				'label'       => __( 'Height', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 500
					]
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb' => 'height: {{SIZE}}{{UNIT}};'
				],
				'condition'   => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->add_responsive_control(
			'exad_section_card_image_width',
			[
				'label'       => __( 'Width', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 500
					]
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-thumb' => 'width: {{SIZE}}{{UNIT}};'
				],
				'condition'   => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->add_responsive_control(
			'exad_card_image_padding',
			[
				'label'      => __( 'Padding', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-thumb' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				],
				'condition'  => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'      => 'exad_card_image_border',
				'selector'  => '{{WRAPPER}} .exad-card-thumb',
				'condition' => [
					'exad_card_layout_type' => 'default'
				]
			]
		);
		
		$this->add_responsive_control(
			'exad_card_image_radius',
			[
				'label'      => __( 'Border Radius', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-thumb' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				],
				'condition'  => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'exad_card_image_box_shadow',
				'selector'  => '{{WRAPPER}} .exad-card-thumb',
				'condition' => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name' => 'exad_card_image_filter',
				'selector' => '{{WRAPPER}} .exad-card-thumb img',
			]
		);

$this->add_control(
			'exad_card_image_animation_heading',
			[
				'label'     => __( 'Animation', 'exclusive-addons-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before'
			]
		);

$this->add_control(
			'exad_card_image_zoom_animation',
			[
				'label'        => __( 'Zoom Animation', 'exclusive-addons-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => __( 'ON', 'exclusive-addons-elementor' ),
				'label_off'    => __( 'OFF', 'exclusive-addons-elementor' ),
				'return_value' => 'yes',
				'default'      => 'yes'
			]
		);

$this->end_controls_section();

/*
		* Card Badge Style Section
		*/
		$this->start_controls_section(
			'exad_section_card_badge_style',
			[
				'label' => esc_html__( 'Badge', 'exclusive-addons-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

$badge_align = is_rtl() ? 'right' : 'left';

$this->add_responsive_control(
			'exad_section_card_badge_left_offset',
			[
				'label'       => __( 'X-Offset', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px', '%' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 500
					],
					'%'       => [
						'min' => 0,
						'max' => 100
					]
				],
				'default'      => [
                    'unit'     => '%',
                    'size'     => 0
                ],
				'selectors'    => [
					'{{WRAPPER}} .exad-card-badge' => $badge_align.': {{SIZE}}{{UNIT}};'
				]
			]
		);

$this->add_responsive_control(
			'exad_section_card_badge_top_offset',
			[
				'label'       => __( 'Y-Offset', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px', '%' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 500
					],
					'%'       => [
						'min' => 0,
						'max' => 100
					]
				],
				'default'     => [
                    'unit'    => '%',
                    'size'    => 0
                ],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-badge' => 'top: {{SIZE}}{{UNIT}};'
				]
			]
		);

$this->add_control(
			'exad_section_card_badge_background',
			[
				'label'     => esc_html__( 'Background Color', 'exclusive-addons-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#222222',
				'selectors' => [
					'{{WRAPPER}} .exad-card-badge' => 'background: {{VALUE}};'
				]
			]
		);

$this->add_control(
			'exad_section_card_badge_text_color',
			[
				'label'     => esc_html__( 'Text Color', 'exclusive-addons-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'selectors' => [
					'{{WRAPPER}} .exad-card-badge' => 'color: {{VALUE}};'
				]
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'exad_section_card_badge_typography',
				'selector' => '{{WRAPPER}} .exad-card-badge'
			]
		);

$this->add_responsive_control(
			'exad_card_badge_padding',
			[
				'label'      => __( 'Padding', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '10',
					'right'  => '15',
					'bottom' => '10',
					'left'   => '15',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				],
			]
		);

$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'exad_card_badge_border',
				'selector' => '{{WRAPPER}} .exad-card-badge'
			]
		);

$this->add_responsive_control(
			'exad_card_badge_radius',
			[
				'label'      => __( 'Border Radius', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '30',
					'right'  => '30',
					'bottom' => '30',
					'left'   => '30',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'exad_card_badge_box_shadow',
				'selector' => '{{WRAPPER}} .exad-card-badge'
			]
		);

$this->end_controls_section();

/*
		* Card content Styling Section
		*/
		$this->start_controls_section(
			'exad_section_card_styles_content',
			[
				'label' => esc_html__( 'Content', 'exclusive-addons-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE
			]
		);

$text_align = is_rtl() ? 'right' : 'left';

$this->add_control(
			'exad_card_content_alignment',
			[
				'label'         => __( 'Alignment', 'exclusive-addons-elementor' ),
				'type'          => Controls_Manager::CHOOSE,
				'options'       => [
					'left'      => [
						'title' => __( 'Left', 'exclusive-addons-elementor' ),
						'icon'  => 'eicon-text-align-left'
					],
					'center'    => [
						'title' => __( 'center', 'exclusive-addons-elementor' ),
						'icon'  => 'eicon-text-align-center'
					],
					'right'     => [
						'title' => __( 'Right', 'exclusive-addons-elementor' ),
						'icon'  => 'eicon-text-align-right'
					]
				],
				'default'       => $text_align,
				'toggle'        => false				
			]
		);
		
		$this->add_responsive_control(
			'exad_card_content_padding',
			[
				'label'      => __( 'Padding', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '30',
					'right'  => '30',
					'bottom' => '30',
					'left'   => '30',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-body' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'exad_card_content_border',
				'selector' => '{{WRAPPER}} .exad-card-body'
			]
		);

$this->add_responsive_control(
			'exad_card_content_radius',
			[
				'label'      => __( 'Border Radius', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px' ],
				'default'    => [
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-body' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->end_controls_section();

/*
		* Card Content Styling Section
		*/
		$this->start_controls_section(
			'exad_section_card_styles_title',
			[
				'label'     => esc_html__( 'Title', 'exclusive-addons-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'exad_card_title!' => ''
				]
			]
		);
		$this->add_control(
			'exad_title_color',
			[
				'label'     => __('Color', 'exclusive-addons-elementor'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#132c47',
				'selectors' => [
					'{{WRAPPER}} .exad-card-body .exad-card-title' => 'color: {{VALUE}};'
				]
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'card_title_typography',
				'selector' => '{{WRAPPER}} .exad-card-body .exad-card-title'
			]
		);

$this->add_responsive_control(
			'exad_card_title_margin',
			[
				'label'        => __( 'Margin', 'exclusive-addons-elementor' ),
				'type'         => Controls_Manager::DIMENSIONS,
				'size_units'   => [ 'px', '%' ],
				'default'      => [
					'top'      => '0',
					'right'    => '0',
					'bottom'   => '15',
					'left'     => '0',
					'unit'     => 'px',
					'isLinked' => false
				],
				'selectors'    => [
					'{{WRAPPER}} .exad-card-body .exad-card-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->end_controls_section();

/**
		 * Exad Card tag Style
		 */
		$this->start_controls_section(
			'exad_section_card_styles_tag',
			[
				'label'     => esc_html__( 'Tag', 'exclusive-addons-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'exad_card_tag!' => ''
				]
			]
		);

$this->add_control(
			'exad_tag_color',
			[
				'label'     => __('Color', 'exclusive-addons-elementor'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .exad-card-body .exad-card-tag' => 'color: {{VALUE}};'
				]
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'card_tag_typography',
				'selector' => '{{WRAPPER}} .exad-card-body .exad-card-tag'
			]
		);

$this->add_responsive_control(
			'exad_card_tag_margin',
			[
				'label'        => __( 'Margin', 'exclusive-addons-elementor' ),
				'type'         => Controls_Manager::DIMENSIONS,
				'size_units'   => [ 'px', '%' ],
				'default'      => [
					'top'      => '0',
					'right'    => '0',
					'bottom'   => '20',
					'left'     => '0',
					'unit'     => 'px',
					'isLinked' => false
				],
				'selectors'    => [
					'{{WRAPPER}} .exad-card-body .exad-card-tag' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->end_controls_section();

// description style
		$this->start_controls_section(
			'exad_section_card_styles_description',
			[
				'label'     => esc_html__( 'Description', 'exclusive-addons-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'exad_card_description!' => ''
				]
			]
		);
		$this->add_control(
			'exad_description_color',
			[
				'label'     => __('Color', 'exclusive-addons-elementor'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .exad-card-body .exad-card-description' => 'color: {{VALUE}};'
				]
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'card_description_typography',
				'selector' => '{{WRAPPER}} .exad-card-body .exad-card-description'
			]
		);

$this->add_responsive_control(
			'exad_card_description_margin',
			[
				'label'        => __( 'Margin', 'exclusive-addons-elementor' ),
				'type'         => Controls_Manager::DIMENSIONS,
				'size_units'   => [ 'px', '%' ],
				'default'      => [
					'top'      => '0',
					'right'    => '0',
					'bottom'   => '20',
					'left'     => '0',
					'unit'     => 'px',
					'isLinked' => false
				],
				'selectors'    => [
					'{{WRAPPER}} .exad-card-body .exad-card-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->end_controls_section();

/**
		 * Exad Card Button Style 
		 */

$this->start_controls_section(
			'exad_section_card_styles_button',
			[
				'label'     => esc_html__( 'Button', 'exclusive-addons-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'exad_card_action_text!' => ''
				]
			]
		);

$this->add_responsive_control(
			'exad_card_button_icon_spacing',
			[
				'label'       => __( 'Icon Spacing', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 50
					]
				],
				'default'     => [
					'unit'    => 'px',
					'size'    => 10
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-body .exad-card-action .icon_pos_right' => 'margin-left: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .exad-card-body .exad-card-action .icon_pos_left'  => 'margin-right: {{SIZE}}{{UNIT}};'
				]
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'exad_card_button_typography',
				'selector' => '{{WRAPPER}} .exad-card-body .exad-card-action'
			]
		);

$this->add_responsive_control(
			'exad_card_button_padding',
			[
				'label'        => __( 'Padding', 'exclusive-addons-elementor' ),
				'type'         => Controls_Manager::DIMENSIONS,
				'size_units'   => [ 'px' ],
				'default'      => [
					'top'      => '15',
					'right'    => '35',
					'bottom'   => '15',
					'left'     => '35',
					'isLinked' => false
				],
				'selectors'    => [
					'{{WRAPPER}} .exad-card-body .exad-card-action' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->add_responsive_control(
			'exad_card_button_radius',
			[
				'label'      => __( 'Border Radius', 'exclusive-addons-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default'    => [
					'top'    => '0',
					'right'  => '0',
					'bottom' => '0',
					'left'   => '0',
					'unit'   => 'px'
				],
				'selectors'  => [
					'{{WRAPPER}} .exad-card-body .exad-card-action' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

$this->add_responsive_control(
			'exad_card_button_offset',
			[
				'label'       => __( 'Offset', 'exclusive-addons-elementor' ),
				'type'        => Controls_Manager::SLIDER,
				'size_units'  => [ 'px' ],
				'range'       => [
					'px'      => [
						'min' => 0,
						'max' => 200
					]
				],
				'default'     => [
					'unit'    => 'px',
					'size'    => 0
				],
				'selectors'   => [
					'{{WRAPPER}} .exad-card-body .exad-card-action' => 'margin-bottom: -{{SIZE}}{{UNIT}};'
				],
				'condition'   => [
					'exad_card_layout_type' => 'default'
				]
			]
		);

$this->start_controls_tabs( 'exad_card_button_tabs' );

$this->start_controls_tab( 'exad_card_button_normal', [ 'label' => esc_html__( 'Normal', 'exclusive-addons-elementor' ) ] );

$this->add_control(
					'exad_card_button_normal_color',
					[
						'label'     => esc_html__( 'Text Color', 'exclusive-addons-elementor' ),
						'type'      => Controls_Manager::COLOR,
						'default'   => '#222222',
						'selectors' => [
							'{{WRAPPER}} .exad-card-body .exad-card-action' => 'color: {{VALUE}};'
						]
					]
				);

$this->add_control(
					'exad_card_button_normal_bg',
					[
						'label'     => esc_html__( 'Background Color', 'exclusive-addons-elementor' ),
						'type'      => Controls_Manager::COLOR,
						'default'   => '#ffffff',
						'selectors' => [
							'{{WRAPPER}} .exad-card-body .exad-card-action' => 'background-color: {{VALUE}};'
						]
					]
				);

$this->add_group_control(
					Group_Control_Border::get_type(),
					[
						'name'               => 'exad_card_button_normal_border',
						'fields_options'     => [
		                    'border'         => [
		                        'default'    => 'solid'
		                    ],
		                    'width'          => [
		                        'default'    => [
		                            'top'    => '1',
		                            'right'  => '1',
		                            'bottom' => '1',
		                            'left'   => '1'
		                        ]
		                    ],
		                    'color'          => [
		                        'default'    => '#222222'
		                    ]
		                ],
						'selector'           => '{{WRAPPER}} .exad-card-body .exad-card-action'
					]
				);

$this->add_group_control(
					Group_Control_Box_Shadow::get_type(),
					[
						'name'     => 'exad_card_button_normal_box_shadow',
						'selector' => '{{WRAPPER}} .exad-card-body .exad-card-action'
					]
				);
		
			$this->end_controls_tab();

$this->start_controls_tab( 'exad_card_button_hover', [ 'label' => esc_html__( 'Hover', 'exclusive-addons-elementor' ) ] );

$this->add_control(
					'exad_card_button_hover_color',
					[
						'label'     => esc_html__( 'Text Color', 'exclusive-addons-elementor' ),
						'type'      => Controls_Manager::COLOR,
						'default'   => '#ffffff',
						'selectors' => [
							'{{WRAPPER}} .exad-card-body .exad-card-action:hover' => 'color: {{VALUE}};'
						]
					]
				);

$this->add_control(
					'exad_card_button_hover_bg',
					[
						'label'     => esc_html__( 'Background Color', 'exclusive-addons-elementor' ),
						'type'      => Controls_Manager::COLOR,
						'default'   => '#222222',
						'selectors' => [
							'{{WRAPPER}} .exad-card-body .exad-card-action:hover' => 'background-color: {{VALUE}};'
						]
					]
				);

$this->add_group_control(
					Group_Control_Border::get_type(),
					[
						'name'     => 'exad_card_button_hover_border',
						'selector' => '{{WRAPPER}} .exad-card-body .exad-card-action:hover'
					]
				);

$this->add_group_control(
					Group_Control_Box_Shadow::get_type(),
					[
						'name'     => 'exad_card_button_hover_box_shadow',
						'selector' => '{{WRAPPER}} .exad-card-body .exad-card-action:hover'
					]
				);

$this->end_controls_tab();
		
		$this->end_controls_tabs();

$this->end_controls_section();
	}

protected function render() {
		$settings           = $this->get_settings_for_display();

$this->add_render_attribute( 
			'exad_card', 
			[ 
				'class' => [ 
					'exad-card', 
					esc_attr( $settings['exad_card_content_alignment'] ), 
					esc_attr( $settings['exad_card_layout_type'] ), 
					esc_attr( $settings['exad_card_image_zoom_animation'] )
				]
			]
		);

$this->add_inline_editing_attributes( 'exad_card_title', 'basic' );

$this->add_render_attribute( 'exad_card_tag', 'class', 'exad-card-tag' );
		$this->add_inline_editing_attributes( 'exad_card_tag', 'basic' );

$this->add_render_attribute( 'exad_card_description', 'class', 'exad-card-description' );
		$this->add_inline_editing_attributes( 'exad_card_description', 'basic' );

$this->add_render_attribute( 'exad_card_title_link', 'class', 'exad-card-title' );
		$this->add_inline_editing_attributes( 'exad_card_action_text', 'none' );

if( $settings['exad_card_title_link']['url'] ) {
            $this->add_render_attribute( 'exad_card_title_link', 'href', esc_url( $settings['exad_card_title_link']['url'] ) );
	        if( $settings['exad_card_title_link']['is_external'] ) {
	            $this->add_render_attribute( 'exad_card_title_link', 'target', '_blank' );
	        }
	        if( $settings['exad_card_title_link']['nofollow'] ) {
	            $this->add_render_attribute( 'exad_card_title_link', 'rel', 'nofollow' );
	        }
        }

$this->add_render_attribute( 'exad_card_action_link', 'class', 'exad-card-action' );
		if( $settings['exad_card_action_link']['url'] ) {
            $this->add_render_attribute( 'exad_card_action_link', 'href', esc_url( $settings['exad_card_action_link']['url'] ) );
	        if( $settings['exad_card_action_link']['is_external'] ) {
	            $this->add_render_attribute( 'exad_card_action_link', 'target', '_blank' );
	        }
	        if( $settings['exad_card_action_link']['nofollow'] ) {
	            $this->add_render_attribute( 'exad_card_action_link', 'rel', 'nofollow' );
	        }
        }
		
		ob_start();
		?>

<div <?php $this->print_render_attribute_string( 'exad_card' ); ?>>
			<?php if ( $settings['exad_card_image']['url'] || $settings['exad_card_image']['id'] ) : ?>
	        	<div class="exad-card-thumb">
					<?php echo Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'exad_card_image' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
				</div>
			<?php	
			endif;

if( $settings['exad_card_badge_switcher'] === 'yes' ) : ?>
				<div class="exad-card-badge">
					<?php echo esc_html__( $settings['exad_card_badge'] ); ?>
				</div>
				<?php
			endif;
			?>

<div class="exad-card-body">
			  	<?php if( $settings['exad_card_title'] ) { ?>
	          		<a <?php $this->print_render_attribute_string( 'exad_card_title_link' ); ?>>
	            		<<?php Utils::print_validated_html_tag( $settings['exad_card_title_html_tag'] ); ?> <?php $this->print_render_attribute_string( 'exad_card_title' ); ?>><?php echo $settings['exad_card_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
						</<?php Utils::print_validated_html_tag( $settings['exad_card_title_html_tag'] ); ?>>
	        		</a>
					<?php	          			
          		}

$settings['exad_card_tag'] ? printf( '<p '.$this->get_render_attribute_string( 'exad_card_tag' ).'>%s</p>', $settings['exad_card_tag'] ) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

$settings['exad_card_description'] ? printf( '<div '.$this->get_render_attribute_string( 'exad_card_description' ).'>%s</div>', $settings['exad_card_description'] ) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

if ( !empty( $settings['exad_card_action_text'] ) ) : ?>
					<a <?php $this->print_render_attribute_string( 'exad_card_action_link' ); ?>>
						<?php if( 'icon_pos_left' === $settings['exad_card_action_link_icon_position'] &&  !empty( $settings['exad_card_action_link_icon']['value'] ) ) { ?>
							<span class="<?php echo esc_attr( $settings['exad_card_action_link_icon_position'] ); ?>">
								<?php Icons_Manager::render_icon( $settings['exad_card_action_link_icon'] ); ?>
							</span>
						<?php	
						}
						?>

<span <?php $this->print_render_attribute_string( 'exad_card_action_text' ); ?>>
							<?php echo esc_html( $settings['exad_card_action_text'] ); ?>
						</span>

<?php
						if( 'icon_pos_right' === $settings['exad_card_action_link_icon_position'] &&  !empty( $settings['exad_card_action_link_icon']['value'] ) ) { ?>
							<span class="<?php echo esc_attr( $settings['exad_card_action_link_icon_position'] ); ?>">
								<?php Icons_Manager::render_icon( $settings['exad_card_action_link_icon'] ); ?>
							</span>
						<?php } ?>
	            	</a>
				<?php endif; ?>
          	</div>
        </div>
	<?php	
	
		$output = ob_get_clean();
		
		print Helper::exad_wp_kses( $output ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}

/**
     * Render card widget output in the editor.
     *
     * Written as a Backbone JavaScript template and used to generate the live preview.
     *
     * @since 1.0.0
     * @access protected
     */
	protected function content_template() {
		?>
		<#
			view.addRenderAttribute( 'exad_card', {
				'class': [ 
					'exad-card', 
					settings.exad_card_content_alignment,
					settings.exad_card_layout_type,
					settings.exad_card_image_zoom_animation
				]
			} );

if ( settings.exad_card_image.url || settings.exad_card_image.id ) {
				var image = {
					id: settings.exad_card_image.id,
					url: settings.exad_card_image.url,
					size: settings.thumbnail_size,
					dimension: settings.thumbnail_custom_dimension,
					class: 'exad-card-img',
					model: view.getEditModel()
				};

var image_url = _.escape( elementor.imagesManager.getImageUrl( image ) );
			}

view.addRenderAttribute( 'exad_card_title_link', 'class', 'exad-card-title' );
			view.addInlineEditingAttributes( 'exad_card_title', 'basic' );

view.addRenderAttribute( 'exad_card_tag', 'class', 'exad-card-tag' );
			view.addInlineEditingAttributes( 'exad_card_tag', 'basic' );

view.addRenderAttribute( 'exad_card_description', 'class', 'exad-card-description' );
			view.addInlineEditingAttributes( 'exad_card_description', 'basic' );

view.addRenderAttribute( 'exad_card_action_link', 'class', 'exad-card-action' );
			view.addInlineEditingAttributes( 'exad_card_action_text', 'none' );

var target = settings.exad_card_action_link.is_external ? ' target="_blank"' : '';
            var nofollow = settings.exad_card_action_link.nofollow ? ' rel="nofollow"' : '';

var iconHTML = elementor.helpers.renderIcon( view, settings.exad_card_action_link_icon, { 'aria-hidden': true }, 'i' , 'object' );

var titleHTMLTag = elementor.helpers.validateHTMLTag( settings.exad_card_title_html_tag );
		#>
		<div {{{ view.getRenderAttributeString( 'exad_card' ) }}}>
			<# if ( image_url ) { #>
		    	<div class="exad-card-thumb">
					<img src="{{{ image_url }}}">
				</div>
			<# } #>

<# if( settings.exad_card_badge_switcher === 'yes' ) { #>
				<div class="exad-card-badge">
					{{{ _.escape( settings.exad_card_badge ) }}}
				</div>
			<# } #>

<div class="exad-card-body">
		    	<# if ( settings.exad_card_title ) { #>
			    	<a href="{{{ settings.exad_card_title_link.url }}}" {{{ view.getRenderAttributeString( 'exad_card_title_link' ) }}}>
			    		<{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( 'exad_card_title' ) }}}>
			    			{{{ settings.exad_card_title }}}
			    		</{{{ titleHTMLTag }}}>
		    		</a>
		    	<# } #>

<# if ( settings.exad_card_tag ) { #>
		        	<p {{{ view.getRenderAttributeString( 'exad_card_tag' ) }}}>
		        		{{{ settings.exad_card_tag }}}
		        	</p>
		    	<# } #>

<# if ( settings.exad_card_description ) { #>
		        	<p {{{ view.getRenderAttributeString( 'exad_card_description' ) }}}>
		        		{{{ settings.exad_card_description }}}
		        	</p>
		        <# } #>

<# if ( settings.exad_card_action_text ) { #>
		            <a href="{{{ settings.exad_card_action_link.url }}}" {{{ view.getRenderAttributeString( 'exad_card_action_link' ) }}}{{{ target }}}{{{ nofollow }}}>
		            	<# if ( 'icon_pos_left' === settings.exad_card_action_link_icon_position && iconHTML.value ) { #>
							<span class="{{{ _.escape( settings.exad_card_action_link_icon_position ) }}}">
								{{{ iconHTML.value }}}
							</span>
						<# } #>
						<span {{{ view.getRenderAttributeString( 'exad_card_action_text' ) }}}>
							{{{ settings.exad_card_action_text }}}
						</span>
						<# if ( 'icon_pos_right' === settings.exad_card_action_link_icon_position && iconHTML.value ) { #>
							<span class="{{{ _.escape( settings.exad_card_action_link_icon_position ) }}}">
								{{{ iconHTML.value }}}
							</span>
						<# } #>
					</a>
				<# } #>
		    </div>
		</div>
		<?php
	}
}

Back to Directory File Manager