1052 lines
48 KiB
PHP
1052 lines
48 KiB
PHP
<?php
|
|
|
|
namespace Essential_Addons_Elementor\Pro\Elements;
|
|
|
|
use \Elementor\Controls_Manager;
|
|
use \Elementor\Group_Control_Border;
|
|
use \Elementor\Group_Control_Box_Shadow;
|
|
use \Elementor\Group_Control_Typography;
|
|
use \Elementor\Utils;
|
|
use \Elementor\Widget_Base;
|
|
use Elementor\Group_Control_Image_Size;
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit; // Exit if accessed directly.
|
|
}
|
|
|
|
/**
|
|
* Image Hotspots Widget
|
|
*/
|
|
class Image_Hot_Spots extends Widget_Base
|
|
{
|
|
use \Essential_Addons_Elementor\Pro\Traits\Helper;
|
|
|
|
/**
|
|
* Retrieve image hotspots widget name.
|
|
*/
|
|
public function get_name()
|
|
{
|
|
return 'eael-image-hotspots';
|
|
}
|
|
|
|
/**
|
|
* Retrieve image hotspots widget title.
|
|
*/
|
|
public function get_title()
|
|
{
|
|
return __('Image Hotspots', 'essential-addons-elementor');
|
|
}
|
|
|
|
/**
|
|
* Retrieve the list of categories the image hotspots widget belongs to.
|
|
*/
|
|
public function get_categories()
|
|
{
|
|
return ['essential-addons-elementor'];
|
|
}
|
|
|
|
/**
|
|
* Retrieve image hotspots widget icon.
|
|
*/
|
|
public function get_icon()
|
|
{
|
|
return 'eaicon-image-hotspots';
|
|
}
|
|
|
|
public function get_keywords()
|
|
{
|
|
return [
|
|
'image',
|
|
'ea image hotspots',
|
|
'ea image hot spots',
|
|
'preview window',
|
|
'tooltip',
|
|
'ea tooltip',
|
|
'pointers',
|
|
'ea pointers',
|
|
'ea',
|
|
'essential addons'
|
|
];
|
|
}
|
|
|
|
public function get_custom_help_url()
|
|
{
|
|
return 'https://essential-addons.com/elementor/docs/image-hotspots/';
|
|
}
|
|
|
|
|
|
/**
|
|
* Register image hotspots widget controls.
|
|
*/
|
|
protected function register_controls()
|
|
{
|
|
|
|
/*-----------------------------------------------------------------------------------*/
|
|
/* CONTENT TAB
|
|
/*-----------------------------------------------------------------------------------*/
|
|
|
|
/**
|
|
* Content Tab: Image
|
|
*/
|
|
$this->start_controls_section(
|
|
'section_image',
|
|
[
|
|
'label' => __('Image', 'essential-addons-elementor'),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'image',
|
|
[
|
|
'label' => __('Image', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::MEDIA,
|
|
'default' => [
|
|
'url' => Utils::get_placeholder_image_src(),
|
|
],
|
|
'ai' => [
|
|
'active' => false,
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Image_Size::get_type(),
|
|
[
|
|
'name' => 'image',
|
|
'label' => __('Image Size', 'essential-addons-elementor'),
|
|
'default' => 'full',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
/**
|
|
* Content Tab: Hotspots
|
|
*/
|
|
$this->start_controls_section(
|
|
'section_hotspots',
|
|
[
|
|
'label' => __('Hotspots', 'essential-addons-elementor'),
|
|
]
|
|
);
|
|
|
|
$repeater = new \Elementor\Repeater();
|
|
|
|
$repeater->start_controls_tabs( 'hot_spots_tabs' );
|
|
|
|
$repeater->start_controls_tab( 'tab_content', [ 'label' => __( 'Content', 'essential-addons-elementor' ) ] );
|
|
|
|
$repeater->add_control(
|
|
'hotspot_type',
|
|
[
|
|
'label' => __( 'Type', 'essential-addons-elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'icon',
|
|
'options' => [
|
|
'icon' => __( 'Icon', 'essential-addons-elementor' ),
|
|
'text' => __( 'Text', 'essential-addons-elementor' ),
|
|
'blank' => __( 'Blank', 'essential-addons-elementor' ),
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'hotspot_icon_new',
|
|
[
|
|
'label' => __( 'Icon', 'essential-addons-elementor' ),
|
|
'type' => Controls_Manager::ICONS,
|
|
'fa4compatibility' => 'hotspot_icon',
|
|
'default' => [
|
|
'value' => 'fas fa-plus',
|
|
'library' => 'fa-solid',
|
|
],
|
|
'condition' => [
|
|
'hotspot_type' => 'icon',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'hotspot_text',
|
|
[
|
|
'label' => __( 'Text', 'essential-addons-elementor' ),
|
|
'type' => Controls_Manager::TEXT,
|
|
'dynamic' => [
|
|
'active' => true,
|
|
],
|
|
'label_block' => true,
|
|
'default' => 'Go',
|
|
'condition' => [
|
|
'hotspot_type' => 'text',
|
|
],
|
|
'ai' => [
|
|
'active' => false,
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'hotspot_link',
|
|
[
|
|
'label' => __( 'Link', 'essential-addons-elementor' ),
|
|
'type' => Controls_Manager::URL,
|
|
'dynamic' => [
|
|
'active' => true,
|
|
],
|
|
'label_block' => true,
|
|
'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
|
|
'default' => [
|
|
'url' => '#',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'hotspot_link_target',
|
|
[
|
|
'label' => __( 'Open Link in New Tab', 'essential-addons-elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => 'yes',
|
|
'label_on' => __( 'Yes', 'essential-addons-elementor' ),
|
|
'label_off' => __( 'No', 'essential-addons-elementor' ),
|
|
'return_value' => 'yes',
|
|
]
|
|
);
|
|
|
|
$repeater->end_controls_tab();
|
|
|
|
$repeater->start_controls_tab('tab_position', ['label' => __('Position', 'essential-addons-elementor')]);
|
|
|
|
$repeater->add_responsive_control(
|
|
'left_position',
|
|
[
|
|
'label' => __('Left Position', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} {{CURRENT_ITEM}}' => 'left: {{SIZE}}%;',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_responsive_control(
|
|
'top_position',
|
|
[
|
|
'label' => __('Top Position', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} {{CURRENT_ITEM}}' => 'top: {{SIZE}}%;',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->end_controls_tab();
|
|
|
|
$repeater->start_controls_tab('tab_tooltip', ['label' => __('Tooltip', 'essential-addons-elementor')]);
|
|
|
|
$repeater->add_control(
|
|
'tooltip',
|
|
[
|
|
'label' => __('Tooltip', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'label_on' => __('Show', 'essential-addons-elementor'),
|
|
'label_off' => __('Hide', 'essential-addons-elementor'),
|
|
'return_value' => 'yes',
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_position_local',
|
|
[
|
|
'label' => __('Tooltip Position', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'global',
|
|
'options' => [
|
|
'global' => __('Global', 'essential-addons-elementor'),
|
|
'top' => __('Top', 'essential-addons-elementor'),
|
|
'bottom' => __('Bottom', 'essential-addons-elementor'),
|
|
'left' => __('Left', 'essential-addons-elementor'),
|
|
'right' => __('Right', 'essential-addons-elementor'),
|
|
'top-left' => __('Top Left', 'essential-addons-elementor'),
|
|
'top-right' => __('Top Right', 'essential-addons-elementor'),
|
|
'bottom-left' => __('Bottom Left', 'essential-addons-elementor'),
|
|
'bottom-right' => __('Bottom Right', 'essential-addons-elementor'),
|
|
],
|
|
'condition' => [
|
|
'tooltip' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_content',
|
|
[
|
|
'label' => __('Tooltip Content', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::WYSIWYG,
|
|
'default' => __('Tooltip Content', 'essential-addons-elementor'),
|
|
'condition' => [
|
|
'tooltip' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$repeater->end_controls_tab();
|
|
|
|
$repeater->end_controls_tabs();
|
|
|
|
$this->add_control(
|
|
'hot_spots',
|
|
[
|
|
'label' => '',
|
|
'type' => Controls_Manager::REPEATER,
|
|
'default' => [
|
|
[
|
|
'feature_text' => __('Hotspot #1', 'essential-addons-elementor'),
|
|
'feature_icon' => 'fa fa-plus',
|
|
'left_position' => 20,
|
|
'top_position' => 30,
|
|
],
|
|
],
|
|
'fields' => $repeater->get_controls(),
|
|
'title_field' => '{{{ hotspot_text }}}',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'hotspot_pulse',
|
|
[
|
|
'label' => __('Glow Effect', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => 'yes',
|
|
'label_on' => __('Yes', 'essential-addons-elementor'),
|
|
'label_off' => __('No', 'essential-addons-elementor'),
|
|
'return_value' => 'yes',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
/**
|
|
* Content Tab: Tooltip Settings
|
|
*/
|
|
$this->start_controls_section(
|
|
'section_tooltip',
|
|
[
|
|
'label' => __('Tooltip Settings', 'essential-addons-elementor'),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_arrow',
|
|
[
|
|
'label' => __('Show Arrow', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => 'yes',
|
|
'label_on' => __('Yes', 'essential-addons-elementor'),
|
|
'label_off' => __('No', 'essential-addons-elementor'),
|
|
'return_value' => 'yes',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_size',
|
|
[
|
|
'label' => __('Size', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'default',
|
|
'options' => [
|
|
'default' => __('Default', 'essential-addons-elementor'),
|
|
'tiny' => __('Tiny', 'essential-addons-elementor'),
|
|
'small' => __('Small', 'essential-addons-elementor'),
|
|
'large' => __('Large', 'essential-addons-elementor')
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_position',
|
|
[
|
|
'label' => __('Global Position', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'top',
|
|
'options' => [
|
|
'top' => __('Top', 'essential-addons-elementor'),
|
|
'bottom' => __('Bottom', 'essential-addons-elementor'),
|
|
'left' => __('Left', 'essential-addons-elementor'),
|
|
'right' => __('Right', 'essential-addons-elementor'),
|
|
'top-left' => __('Top Left', 'essential-addons-elementor'),
|
|
'top-right' => __('Top Right', 'essential-addons-elementor'),
|
|
'bottom-left' => __('Bottom Left', 'essential-addons-elementor'),
|
|
'bottom-right' => __('Bottom Right', 'essential-addons-elementor'),
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_animation_in',
|
|
[
|
|
'label' => __('Animation In', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT2,
|
|
'default' => '',
|
|
'label_block' => true,
|
|
'options' => [
|
|
'bounce' => __('Bounce', 'essential-addons-elementor'),
|
|
'flash' => __('Flash', 'essential-addons-elementor'),
|
|
'pulse' => __('Pulse', 'essential-addons-elementor'),
|
|
'rubberBand' => __('rubberBand', 'essential-addons-elementor'),
|
|
'shakeX' => __('ShakeX', 'essential-addons-elementor'),
|
|
'shakeY' => __('ShakeY', 'essential-addons-elementor'),
|
|
'swing' => __('Swing', 'essential-addons-elementor'),
|
|
'tada' => __('Tada', 'essential-addons-elementor'),
|
|
'wobble' => __('Wobble', 'essential-addons-elementor'),
|
|
'bounceIn' => __('bounceIn', 'essential-addons-elementor'),
|
|
'bounceInDown' => __('bounceInDown', 'essential-addons-elementor'),
|
|
'bounceInLeft' => __('bounceInLeft', 'essential-addons-elementor'),
|
|
'bounceInRight' => __('bounceInRight', 'essential-addons-elementor'),
|
|
'bounceInUp' => __('bounceInUp', 'essential-addons-elementor'),
|
|
'bounceOut' => __('bounceOut', 'essential-addons-elementor'),
|
|
'bounceOutDown' => __('bounceOutDown', 'essential-addons-elementor'),
|
|
'bounceOutLeft' => __('bounceOutLeft', 'essential-addons-elementor'),
|
|
'bounceOutRight' => __('bounceOutRight', 'essential-addons-elementor'),
|
|
'bounceOutUp' => __('bounceOutUp', 'essential-addons-elementor'),
|
|
'fadeIn' => __('fadeIn', 'essential-addons-elementor'),
|
|
'fadeInDown' => __('fadeInDown', 'essential-addons-elementor'),
|
|
'fadeInDownBig' => __('fadeInDownBig', 'essential-addons-elementor'),
|
|
'fadeInLeft' => __('fadeInLeft', 'essential-addons-elementor'),
|
|
'fadeInLeftBig' => __('fadeInLeftBig', 'essential-addons-elementor'),
|
|
'fadeInRight' => __('fadeInRight', 'essential-addons-elementor'),
|
|
'fadeInRightBig' => __('fadeInRightBig', 'essential-addons-elementor'),
|
|
'fadeInUp' => __('fadeInUp', 'essential-addons-elementor'),
|
|
'fadeInUpBig' => __('fadeInUpBig', 'essential-addons-elementor'),
|
|
'fadeOut' => __('fadeOut', 'essential-addons-elementor'),
|
|
'fadeOutDown' => __('fadeOutDown', 'essential-addons-elementor'),
|
|
'fadeOutDownBig' => __('fadeOutDownBig', 'essential-addons-elementor'),
|
|
'fadeOutLeft' => __('fadeOutLeft', 'essential-addons-elementor'),
|
|
'fadeOutLeftBig' => __('fadeOutLeftBig', 'essential-addons-elementor'),
|
|
'fadeOutRight' => __('fadeOutRight', 'essential-addons-elementor'),
|
|
'fadeOutRightBig' => __('fadeOutRightBig', 'essential-addons-elementor'),
|
|
'fadeOutUp' => __('fadeOutUp', 'essential-addons-elementor'),
|
|
'fadeOutUpBig' => __('fadeOutUpBig', 'essential-addons-elementor'),
|
|
'flipInX' => __('flipInX', 'essential-addons-elementor'),
|
|
'flipInY' => __('flipInY', 'essential-addons-elementor'),
|
|
'flipOutX' => __('flipOutX', 'essential-addons-elementor'),
|
|
'flipOutY' => __('flipOutY', 'essential-addons-elementor'),
|
|
'lightSpeedInRight' => __('lightSpeedInRight', 'essential-addons-elementor'),
|
|
'lightSpeedInLeft' => __('lightSpeedInLeft', 'essential-addons-elementor'),
|
|
'lightSpeedOutRight' => __('lightSpeedOutRight', 'essential-addons-elementor'),
|
|
'lightSpeedOutLeft' => __('lightSpeedOutLeft', 'essential-addons-elementor'),
|
|
'rotateIn' => __('rotateIn', 'essential-addons-elementor'),
|
|
'rotateInDownLeft' => __('rotateInDownLeft', 'essential-addons-elementor'),
|
|
'rotateInDownLeft' => __('rotateInDownRight', 'essential-addons-elementor'),
|
|
'rotateInUpLeft' => __('rotateInUpLeft', 'essential-addons-elementor'),
|
|
'rotateInUpRight' => __('rotateInUpRight', 'essential-addons-elementor'),
|
|
'rotateOut' => __('rotateOut', 'essential-addons-elementor'),
|
|
'rotateOutDownLeft' => __('rotateOutDownLeft', 'essential-addons-elementor'),
|
|
'rotateOutDownLeft' => __('rotateOutDownRight', 'essential-addons-elementor'),
|
|
'rotateOutUpLeft' => __('rotateOutUpLeft', 'essential-addons-elementor'),
|
|
'rotateOutUpRight' => __('rotateOutUpRight', 'essential-addons-elementor'),
|
|
'hinge' => __('Hinge', 'essential-addons-elementor'),
|
|
'rollIn' => __('rollIn', 'essential-addons-elementor'),
|
|
'rollOut' => __('rollOut', 'essential-addons-elementor'),
|
|
'zoomIn' => __('zoomIn', 'essential-addons-elementor'),
|
|
'zoomInDown' => __('zoomInDown', 'essential-addons-elementor'),
|
|
'zoomInLeft' => __('zoomInLeft', 'essential-addons-elementor'),
|
|
'zoomInRight' => __('zoomInRight', 'essential-addons-elementor'),
|
|
'zoomInUp' => __('zoomInUp', 'essential-addons-elementor'),
|
|
'zoomOut' => __('zoomOut', 'essential-addons-elementor'),
|
|
'zoomOutDown' => __('zoomOutDown', 'essential-addons-elementor'),
|
|
'zoomOutLeft' => __('zoomOutLeft', 'essential-addons-elementor'),
|
|
'zoomOutRight' => __('zoomOutRight', 'essential-addons-elementor'),
|
|
'zoomOutUp' => __('zoomOutUp', 'essential-addons-elementor'),
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_animation_out',
|
|
[
|
|
'label' => __('Animation Out', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SELECT2,
|
|
'default' => '',
|
|
'label_block' => true,
|
|
'options' => [
|
|
'bounce' => __('Bounce', 'essential-addons-elementor'),
|
|
'flash' => __('Flash', 'essential-addons-elementor'),
|
|
'pulse' => __('Pulse', 'essential-addons-elementor'),
|
|
'rubberBand' => __('rubberBand', 'essential-addons-elementor'),
|
|
'shakeX' => __('ShakeX', 'essential-addons-elementor'),
|
|
'shakeY' => __('ShakeY', 'essential-addons-elementor'),
|
|
'swing' => __('Swing', 'essential-addons-elementor'),
|
|
'tada' => __('Tada', 'essential-addons-elementor'),
|
|
'wobble' => __('Wobble', 'essential-addons-elementor'),
|
|
'bounceIn' => __('bounceIn', 'essential-addons-elementor'),
|
|
'bounceInDown' => __('bounceInDown', 'essential-addons-elementor'),
|
|
'bounceInLeft' => __('bounceInLeft', 'essential-addons-elementor'),
|
|
'bounceInRight' => __('bounceInRight', 'essential-addons-elementor'),
|
|
'bounceInUp' => __('bounceInUp', 'essential-addons-elementor'),
|
|
'bounceOut' => __('bounceOut', 'essential-addons-elementor'),
|
|
'bounceOutDown' => __('bounceOutDown', 'essential-addons-elementor'),
|
|
'bounceOutLeft' => __('bounceOutLeft', 'essential-addons-elementor'),
|
|
'bounceOutRight' => __('bounceOutRight', 'essential-addons-elementor'),
|
|
'bounceOutUp' => __('bounceOutUp', 'essential-addons-elementor'),
|
|
'fadeIn' => __('fadeIn', 'essential-addons-elementor'),
|
|
'fadeInDown' => __('fadeInDown', 'essential-addons-elementor'),
|
|
'fadeInDownBig' => __('fadeInDownBig', 'essential-addons-elementor'),
|
|
'fadeInLeft' => __('fadeInLeft', 'essential-addons-elementor'),
|
|
'fadeInLeftBig' => __('fadeInLeftBig', 'essential-addons-elementor'),
|
|
'fadeInRight' => __('fadeInRight', 'essential-addons-elementor'),
|
|
'fadeInRightBig' => __('fadeInRightBig', 'essential-addons-elementor'),
|
|
'fadeInUp' => __('fadeInUp', 'essential-addons-elementor'),
|
|
'fadeInUpBig' => __('fadeInUpBig', 'essential-addons-elementor'),
|
|
'fadeOut' => __('fadeOut', 'essential-addons-elementor'),
|
|
'fadeOutDown' => __('fadeOutDown', 'essential-addons-elementor'),
|
|
'fadeOutDownBig' => __('fadeOutDownBig', 'essential-addons-elementor'),
|
|
'fadeOutLeft' => __('fadeOutLeft', 'essential-addons-elementor'),
|
|
'fadeOutLeftBig' => __('fadeOutLeftBig', 'essential-addons-elementor'),
|
|
'fadeOutRight' => __('fadeOutRight', 'essential-addons-elementor'),
|
|
'fadeOutRightBig' => __('fadeOutRightBig', 'essential-addons-elementor'),
|
|
'fadeOutUp' => __('fadeOutUp', 'essential-addons-elementor'),
|
|
'fadeOutUpBig' => __('fadeOutUpBig', 'essential-addons-elementor'),
|
|
'flipInX' => __('flipInX', 'essential-addons-elementor'),
|
|
'flipInY' => __('flipInY', 'essential-addons-elementor'),
|
|
'flipOutX' => __('flipOutX', 'essential-addons-elementor'),
|
|
'flipOutY' => __('flipOutY', 'essential-addons-elementor'),
|
|
'lightSpeedInRight' => __('lightSpeedInRight', 'essential-addons-elementor'),
|
|
'lightSpeedInLeft' => __('lightSpeedInLeft', 'essential-addons-elementor'),
|
|
'lightSpeedOutRight' => __('lightSpeedOutRight', 'essential-addons-elementor'),
|
|
'lightSpeedOutLeft' => __('lightSpeedOutLeft', 'essential-addons-elementor'),
|
|
'rotateIn' => __('rotateIn', 'essential-addons-elementor'),
|
|
'rotateInDownLeft' => __('rotateInDownLeft', 'essential-addons-elementor'),
|
|
'rotateInDownLeft' => __('rotateInDownRight', 'essential-addons-elementor'),
|
|
'rotateInUpLeft' => __('rotateInUpLeft', 'essential-addons-elementor'),
|
|
'rotateInUpRight' => __('rotateInUpRight', 'essential-addons-elementor'),
|
|
'rotateOut' => __('rotateOut', 'essential-addons-elementor'),
|
|
'rotateOutDownLeft' => __('rotateOutDownLeft', 'essential-addons-elementor'),
|
|
'rotateOutDownLeft' => __('rotateOutDownRight', 'essential-addons-elementor'),
|
|
'rotateOutUpLeft' => __('rotateOutUpLeft', 'essential-addons-elementor'),
|
|
'rotateOutUpRight' => __('rotateOutUpRight', 'essential-addons-elementor'),
|
|
'hinge' => __('Hinge', 'essential-addons-elementor'),
|
|
'rollIn' => __('rollIn', 'essential-addons-elementor'),
|
|
'rollOut' => __('rollOut', 'essential-addons-elementor'),
|
|
'zoomIn' => __('zoomIn', 'essential-addons-elementor'),
|
|
'zoomInDown' => __('zoomInDown', 'essential-addons-elementor'),
|
|
'zoomInLeft' => __('zoomInLeft', 'essential-addons-elementor'),
|
|
'zoomInRight' => __('zoomInRight', 'essential-addons-elementor'),
|
|
'zoomInUp' => __('zoomInUp', 'essential-addons-elementor'),
|
|
'zoomOut' => __('zoomOut', 'essential-addons-elementor'),
|
|
'zoomOutDown' => __('zoomOutDown', 'essential-addons-elementor'),
|
|
'zoomOutLeft' => __('zoomOutLeft', 'essential-addons-elementor'),
|
|
'zoomOutRight' => __('zoomOutRight', 'essential-addons-elementor'),
|
|
'zoomOutUp' => __('zoomOutUp', 'essential-addons-elementor'),
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_animation_speed',
|
|
[
|
|
'label' => __('Animation Speed', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => ['size' => 200],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 100,
|
|
'max' => 5000,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'tooltip_animation_delay',
|
|
[
|
|
'label' => __('Animation Delay', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => ['size' => 200],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 100,
|
|
'max' => 5000,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
]
|
|
);
|
|
|
|
|
|
$this->end_controls_section();
|
|
|
|
/*-----------------------------------------------------------------------------------*/
|
|
/* STYLE TAB
|
|
/*-----------------------------------------------------------------------------------*/
|
|
|
|
/**
|
|
* Style Tab: Image
|
|
*/
|
|
$this->start_controls_section(
|
|
'section_image_style',
|
|
[
|
|
'label' => __('Image', 'essential-addons-elementor'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'image_width',
|
|
[
|
|
'label' => __('Width', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 1,
|
|
'max' => 1200,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'min' => 1,
|
|
'max' => 100,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-image' => 'width: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
|
|
$this->add_control(
|
|
'image_alignment',
|
|
[
|
|
'label' => esc_html__('Alignment', 'essential-addons-for-elementor-lite'),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'label_block' => true,
|
|
'options' => [
|
|
'left' => [
|
|
'title' => esc_html__('Left', 'essential-addons-for-elementor-lite'),
|
|
'icon' => 'eicon-text-align-left',
|
|
],
|
|
'centered' => [
|
|
'title' => esc_html__('Center', 'essential-addons-for-elementor-lite'),
|
|
'icon' => 'eicon-text-align-center',
|
|
],
|
|
'right' => [
|
|
'title' => esc_html__('Right', 'essential-addons-for-elementor-lite'),
|
|
'icon' => 'eicon-text-align-right',
|
|
],
|
|
],
|
|
'default' => 'centered',
|
|
'prefix_class' => 'eael-image-hotspot-align-'
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
/**
|
|
* Style Tab: Hotspot
|
|
*/
|
|
$this->start_controls_section(
|
|
'section_hotspots_style',
|
|
[
|
|
'label' => __('Hotspot', 'essential-addons-elementor'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'hotspot_size',
|
|
[
|
|
'label' => __('Size', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => ['size' => '14', 'unit' => 'px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
'step' => 1,
|
|
],
|
|
'em' => [
|
|
'min' => 0,
|
|
'max' => 40,
|
|
'step' => 1,
|
|
]
|
|
],
|
|
'size_units' => ['px', 'em'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};'
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'hotspot_icon_size',
|
|
[
|
|
'label' => __('Icon Size', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => ['size' => '14', 'unit' => 'px'],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
'step' => 1,
|
|
],
|
|
'em' => [
|
|
'min' => 0,
|
|
'max' => 40,
|
|
'step' => 1,
|
|
]
|
|
],
|
|
'size_units' => ['px', 'em'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap .eael-hotspot-icon' => 'font-size: {{SIZE}}{{UNIT}};',
|
|
'{{WRAPPER}} .eael-hot-spot-wrap svg.eael-hotspot-icon' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};line-height: {{SIZE}}{{UNIT}}',
|
|
'{{WRAPPER}} .eael-hot-spot-wrap .eael-hotspot-text' => 'font-size: {{SIZE}}{{UNIT}};',
|
|
'{{WRAPPER}} .eael-hot-spot-wrap .hotspot-svg-icon' => 'width:{{SIZE}}{{UNIT}};'
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'icon_padding',
|
|
[
|
|
'label' => __('Padding', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
// tab control
|
|
$this->start_controls_tabs(
|
|
'hotspot_control_tabs'
|
|
);
|
|
$this->start_controls_tab(
|
|
'hotspot_control_normal_tab',
|
|
[
|
|
'label' => __('Normal', 'essential-addons-elementor'),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'icon_color_normal',
|
|
[
|
|
'label' => __('Color', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#fff',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap, {{WRAPPER}} .eael-hot-spot-inner, {{WRAPPER}} .eael-hot-spot-inner:before' => 'color: {{VALUE}}',
|
|
'{{WRAPPER}} .eael-hot-spot-wrap svg.eael-hotspot-icon' => 'fill: {{VALUE}}'
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'icon_bg_color_normal',
|
|
[
|
|
'label' => __('Background Color', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap, {{WRAPPER}} .eael-hot-spot-inner, {{WRAPPER}} .eael-hot-spot-inner:before, {{WRAPPER}} .eael-hotspot-icon-wrap' => 'background-color: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'icon_border_normal',
|
|
'label' => __('Border', 'essential-addons-elementor'),
|
|
'placeholder' => '1px',
|
|
'default' => '1px',
|
|
'selector' => '{{WRAPPER}} .eael-hot-spot-wrap'
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'icon_border_radius',
|
|
[
|
|
'label' => __('Border Radius', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap, {{WRAPPER}} .eael-hot-spot-inner, {{WRAPPER}} .eael-hot-spot-inner:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'icon_box_shadow',
|
|
'selector' => '{{WRAPPER}} .eael-hot-spot-wrap',
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab(
|
|
'hotspot_control_hover_tab',
|
|
[
|
|
'label' => __('Hover', 'essential-addons-elementor'),
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'icon_color_hover',
|
|
[
|
|
'label' => __('Color', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#fff',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap:hover, {{WRAPPER}} .eael-hot-spot-wrap:hover .eael-hot-spot-inner, {{WRAPPER}} .eael-hot-spot-wrap:hover .eael-hot-spot-inner:before' => 'color: {{VALUE}}',
|
|
'{{WRAPPER}} .eael-hot-spot-wrap:hover svg.eael-hotspot-icon' => 'fill: {{VALUE}}'
|
|
],
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'icon_bg_color_hover',
|
|
[
|
|
'label' => __('Background Color', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap:hover, {{WRAPPER}} .eael-hot-spot-wrap:hover .eael-hot-spot-inner, {{WRAPPER}} .eael-hot-spot-wrap:hover .eael-hot-spot-inner:before' => 'background-color: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'icon_border_hover',
|
|
'label' => __('Border', 'essential-addons-elementor'),
|
|
'selector' => '{{WRAPPER}} .eael-hot-spot-wrap:hover'
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'icon_border_hover_radius',
|
|
[
|
|
'label' => __('Border Radius', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .eael-hot-spot-wrap:hover, {{WRAPPER}} .eael-hot-spot-wrap:hover .eael-hot-spot-inner, {{WRAPPER}} .eael-hot-spot-wrap:hover .eael-hot-spot-inner:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'icon_box_hover_shadow',
|
|
'selector' => '{{WRAPPER}} .eael-hot-spot-wrap:hover',
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_section();
|
|
|
|
/**
|
|
* Style Tab: Tooltip
|
|
*/
|
|
$this->start_controls_section(
|
|
'section_tooltips_style',
|
|
[
|
|
'label' => __('Tooltip', 'essential-addons-elementor'),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_bg_color',
|
|
[
|
|
'label' => __('Background Color', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_color',
|
|
[
|
|
'label' => __('Text Color', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'tooltip_width',
|
|
[
|
|
'label' => __('Width', 'essential-addons-elementor'),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 50,
|
|
'max' => 400,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Typography::get_type(),
|
|
[
|
|
'name' => 'tooltip_typography',
|
|
'label' => __('Typography', 'essential-addons-elementor'),
|
|
'selector' => '.eael-tooltip-{{ID}}',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
}
|
|
|
|
protected function render() {
|
|
$settings = $this->get_settings_for_display();
|
|
|
|
if ( empty( $settings['image']['url'] ) ) {
|
|
return;
|
|
}
|
|
?>
|
|
<div class="eael-image-hotspots">
|
|
<div class="eael-hot-spot-image">
|
|
<?php
|
|
$i = 1;
|
|
foreach ($settings['hot_spots'] as $index => $item) :
|
|
if ( $item['hotspot_type'] === 'icon' ) {
|
|
$icon = ( ( isset( $item['__fa4_migrated']['hotspot_icon_new'] ) || empty( $item['hotspot_icon'] ) ) ? \Essential_Addons_Elementor\Classes\Helper::get_render_icon($item['hotspot_icon_new'], ['class'=>'eael-hotspot-icon eael-hotspot-tooltip']) : '<i class="eael-hotspot-icon eael-hotspot-tooltip '.esc_attr($item['hotspot_icon']).'"></i>' );
|
|
}
|
|
|
|
$this->add_render_attribute('hotspot' . $i, 'class', 'eael-hot-spot-wrap elementor-repeater-item-' . esc_attr($item['_id']));
|
|
|
|
if ($item['tooltip'] == 'yes' && $item['tooltip_content'] != '') {
|
|
$this->add_render_attribute('hotspot' . $i, 'class', 'eael-hot-spot-tooptip');
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tipso', '<span class="eael-single-tooltip eael-tooltip-' . $this->get_id() . '">' . $this->parse_text_editor($item['tooltip_content']) . '</span>');
|
|
}
|
|
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-position-global', $settings['tooltip_position']);
|
|
if ( isset( $item['hotspot_link']['url'] ) && $item['hotspot_link']['url'] != '' ) {
|
|
$eael_wp_allowed_tags = $this->eael_wp_allowed_tags( array( 'viber' ) );
|
|
$this->add_render_attribute( 'hotspot' . $i, 'data-link', esc_url( $item['hotspot_link']['url'], $eael_wp_allowed_tags ) );
|
|
|
|
$this->add_render_attribute( 'hotspot' . $i, 'href', esc_url( $item['hotspot_link']['url'] ) );
|
|
}
|
|
|
|
if ($item['hotspot_link_target'] || ($item['hotspot_link']['is_external'] == 'on')) {
|
|
$this->add_render_attribute('hotspot' . $i, 'target', '_blank');
|
|
}
|
|
|
|
if ($item['tooltip_position_local'] != 'global') {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-position-local', $item['tooltip_position_local']);
|
|
}
|
|
|
|
if ($settings['tooltip_size']) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-size', $settings['tooltip_size']);
|
|
}
|
|
|
|
if ($settings['tooltip_width']) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-width', $settings['tooltip_width']['size']);
|
|
}
|
|
|
|
if ($settings['tooltip_animation_in']) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-animation-in', $settings['tooltip_animation_in']);
|
|
}
|
|
|
|
if ($settings['tooltip_animation_out']) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-animation-out', $settings['tooltip_animation_out']);
|
|
}
|
|
if ($settings['tooltip_animation_speed']) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-animation-speed', $settings['tooltip_animation_speed']['size']);
|
|
}
|
|
if ($settings['tooltip_animation_delay']) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-animation-delay', $settings['tooltip_animation_delay']['size']);
|
|
}
|
|
|
|
$settings_tooltip_bg_color = $this->fetch_color_or_global_color($settings, 'tooltip_bg_color');
|
|
if ($settings_tooltip_bg_color) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-background', $settings_tooltip_bg_color);
|
|
}
|
|
|
|
$settings_tooltip_color = $this->fetch_color_or_global_color($settings, 'tooltip_color');
|
|
if ($settings_tooltip_color) {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-tooltip-text-color', $settings_tooltip_color);
|
|
}
|
|
|
|
if ($settings['tooltip_arrow'] == 'yes') {
|
|
$this->add_render_attribute('hotspot' . $i, 'data-eael-tooltip-arrow', $settings['tooltip_arrow']);
|
|
}
|
|
|
|
$this->add_render_attribute('hotspot_inner_' . $i, 'class', 'eael-hot-spot-inner');
|
|
|
|
if ($settings['hotspot_pulse'] == 'yes') {
|
|
$this->add_render_attribute('hotspot_inner_' . $i, 'class', 'hotspot-animation');
|
|
}
|
|
?>
|
|
<a <?php echo $this->get_render_attribute_string('hotspot' . $i); ?>>
|
|
<span <?php echo $this->get_render_attribute_string('hotspot_inner_' . $i); ?>>
|
|
<?php
|
|
if ($item['hotspot_type'] == 'icon') {
|
|
if (isset($icon['url'])) {
|
|
printf('<span class="eael-hotspot-icon-wrap">
|
|
<img class="eael-hotspot-icon eael-hotspot-tooltip hotspot-svg-icon" src="%1$s" alt="%2$s" />
|
|
</span>', esc_url($icon['url']), esc_attr(get_post_meta($icon['id'], '_wp_attachment_image_alt', true)));
|
|
} else {
|
|
printf('<span class="eael-hotspot-icon-wrap">%1$s</span>', $icon);
|
|
}
|
|
} elseif ($item['hotspot_type'] == 'text') {
|
|
printf('<span class="eael-hotspot-icon-wrap"><span class="eael-hotspot-text">%1$s</span></span>', esc_attr($item['hotspot_text']));
|
|
}
|
|
?>
|
|
</span>
|
|
</a>
|
|
<?php $i++;
|
|
endforeach; ?>
|
|
|
|
<?php echo Group_Control_Image_Size::get_attachment_image_html($settings); ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
public function fetch_color_or_global_color($settings, $control_name=''){
|
|
if( !isset($settings[$control_name])) {
|
|
return '';
|
|
}
|
|
|
|
$color = $settings[$control_name];
|
|
|
|
if(!empty($settings['__globals__']) && !empty($settings['__globals__'][$control_name])){
|
|
$color = $settings['__globals__'][$control_name];
|
|
$color_arr = explode('?id=', $color); //E.x. 'globals/colors/?id=primary'
|
|
|
|
$color_name = count($color_arr) > 1 ? $color_arr[1] : '';
|
|
if( !empty($color_name) ) {
|
|
$color = "var( --e-global-color-$color_name )";
|
|
}
|
|
}
|
|
|
|
return $color;
|
|
}
|
|
}
|