459 lines
13 KiB
PHP
459 lines
13 KiB
PHP
<?php
|
|
/**
|
|
* Class: Image_Hot_Spot
|
|
* Name: Image Hot Spots
|
|
* Slug: stratum-image-hotspot
|
|
*/
|
|
|
|
namespace Stratum;
|
|
|
|
use Elementor\Controls_Manager;
|
|
use Elementor\Utils;
|
|
use Elementor\Repeater;
|
|
use Elementor\Plugin;
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
|
|
|
|
class Image_Hot_Spot extends Stratum_Widget_Base {
|
|
protected $widget_name = 'image-hotspot';
|
|
|
|
public function __construct($data = [], $args = null) {
|
|
parent::__construct( $data, $args );
|
|
}
|
|
|
|
public function get_title() {
|
|
return esc_html__( 'Image Hotspot', 'stratum' );
|
|
}
|
|
|
|
public function get_script_depends() {
|
|
return [
|
|
'popper',
|
|
'tippy',
|
|
'draggabilly',
|
|
'font-awesome-4-shim'
|
|
];
|
|
}
|
|
|
|
public function get_style_depends() {
|
|
return [
|
|
'tippy-themes',
|
|
'tippy-animation',
|
|
'font-awesome-5-all',
|
|
'font-awesome-4-shim'
|
|
];
|
|
}
|
|
|
|
public function get_icon() {
|
|
return 'stratum-icon-image-hotspot';
|
|
}
|
|
|
|
public function get_categories() {
|
|
return [ 'stratum-widgets' ];
|
|
}
|
|
|
|
protected function register_controls() {
|
|
|
|
/*-----------------------------------------------------------------------------------*/
|
|
/* Content Tab
|
|
/*-----------------------------------------------------------------------------------*/
|
|
|
|
$controls = $this;
|
|
|
|
$controls->start_controls_section(
|
|
'section_content',
|
|
[
|
|
'label' => esc_html__( 'Content', 'stratum' )
|
|
]
|
|
);
|
|
|
|
$controls->add_control(
|
|
'image',
|
|
[
|
|
'label' => esc_html__( 'Image', 'stratum' ),
|
|
'type' => Controls_Manager::MEDIA,
|
|
'default' => [
|
|
'url' => Utils::get_placeholder_image_src()
|
|
],
|
|
'dynamic' => [ 'active' => true ]
|
|
]
|
|
);
|
|
|
|
$controls->add_control(
|
|
'image_size',
|
|
[
|
|
'type' => 'select',
|
|
'label' => esc_html__( 'Image Size', 'stratum' ),
|
|
'default' => 'full',
|
|
'options' => Stratum::get_instance()->get_scripts_manager()->get_image_sizes()
|
|
]
|
|
);
|
|
|
|
$repeater = new Repeater();
|
|
|
|
$repeater->start_controls_tabs( 'hot_spots_tabs' );
|
|
|
|
$repeater->start_controls_tab ( 'tab_content', [ 'label' => esc_html__( 'Content', 'stratum' ) ]);
|
|
|
|
$repeater->add_control(
|
|
'hotspot_icon',
|
|
[
|
|
'label' => esc_html__( 'Icon', 'stratum' ),
|
|
'type' => Controls_Manager::ICON,
|
|
'default' => 'fa fa-plus',
|
|
'label_block' => true,
|
|
]
|
|
);
|
|
|
|
$repeater->end_controls_tab();
|
|
|
|
$repeater->start_controls_tab( 'position', [ 'label' => esc_html__( 'Position', 'stratum' ) ] );
|
|
|
|
$repeater->add_control(
|
|
'left_position',
|
|
[
|
|
'label' => esc_html__( 'Left Position', 'stratum' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
'step' => 0.1
|
|
]
|
|
],
|
|
'default' => [
|
|
'unit' => '%',
|
|
'size' => 50
|
|
],
|
|
'render_type' => 'ui',
|
|
'selectors' => [
|
|
'{{WRAPPER}} {{CURRENT_ITEM}}' => 'left: {{SIZE}}%;'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'top_position',
|
|
[
|
|
'label' => esc_html__( 'Top Position', 'stratum' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
'step' => 0.1
|
|
]
|
|
],
|
|
'default' => [
|
|
'unit' => '%',
|
|
'size' => 50
|
|
],
|
|
'render_type' => 'ui',
|
|
'selectors' => [
|
|
'{{WRAPPER}} {{CURRENT_ITEM}}' => 'top: {{SIZE}}%;'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->end_controls_tab();
|
|
|
|
$repeater->start_controls_tab( 'tab_tooltip', [ 'label' => esc_html__( 'Tooltip', 'stratum' ) ] );
|
|
|
|
$repeater->add_control(
|
|
'tooltip',
|
|
[
|
|
'label' => esc_html__( 'Tooltip', 'stratum' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'label_on' => esc_html__( 'Yes', 'stratum' ),
|
|
'label_off' => esc_html__( 'No' , 'stratum' ),
|
|
'return_value' => 'yes'
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_title',
|
|
[
|
|
'label' => esc_html__( 'Title', 'stratum' ),
|
|
'type' => Controls_Manager::TEXT,
|
|
'default' => esc_html__( 'Lorem ipsum dolor sit amet.', 'stratum' ),
|
|
'label_block' => true,
|
|
'placeholder' => esc_html__( 'Type your title here...', 'stratum' ),
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_content',
|
|
[
|
|
'label' => esc_html__( 'Tooltip Content', 'stratum' ),
|
|
'type' => Controls_Manager::TEXTAREA,
|
|
'dynamic' => [
|
|
'active' => true,
|
|
],
|
|
'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'stratum' ),
|
|
'label_block' => true,
|
|
'placeholder' => esc_html__( 'Type your content here...', 'stratum' ),
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'open_by_default',
|
|
[
|
|
'label' => esc_html__( 'Opened by default', 'stratum' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'label_on' => esc_html__( 'Yes', 'stratum' ),
|
|
'label_off' => esc_html__( 'No', 'stratum' ),
|
|
'return_value' => 'yes',
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_arrow',
|
|
[
|
|
'label' => esc_html__( 'Use Arrow', 'stratum' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => 'yes',
|
|
'label_on' => esc_html__( 'Yes', 'stratum' ),
|
|
'label_off' => esc_html__( 'No' , 'stratum' ),
|
|
'return_value' => 'yes',
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'placement',
|
|
[
|
|
'label' => esc_html__( 'Placement', 'stratum' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'top',
|
|
'options' => [
|
|
'top' => esc_html__( 'Top' , 'stratum' ),
|
|
'right' => esc_html__( 'Right' , 'stratum' ),
|
|
'bottom' => esc_html__( 'Bottom', 'stratum' ),
|
|
'left' => esc_html__( 'Left' , 'stratum' )
|
|
],
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_theme',
|
|
[
|
|
'label' => esc_html__( 'Theme', 'stratum' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'light',
|
|
'options' => [
|
|
'light' => esc_html__( 'Light' , 'stratum' ),
|
|
'dark' => esc_html__( 'Dark' , 'stratum' ),
|
|
'light-border' => esc_html__( 'Light Border', 'stratum' ),
|
|
'google' => esc_html__( 'Google' , 'stratum' ),
|
|
'translucent' => esc_html__( 'Translucent' , 'stratum' )
|
|
],
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_animation',
|
|
[
|
|
'label' => esc_html__( 'Animation', 'stratum' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'fade',
|
|
'options' => [
|
|
'shift-away' => esc_html__( 'Shift Away' , 'stratum' ),
|
|
'shift-toward' => esc_html__( 'Shift Toward', 'stratum' ),
|
|
'fade' => esc_html__( 'Fade' , 'stratum' ),
|
|
'scale' => esc_html__( 'Scale' , 'stratum' ),
|
|
'perspective' => esc_html__( 'Perspective' , 'stratum' )
|
|
],
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->add_control(
|
|
'tooltip_interactivity',
|
|
[
|
|
'label' => esc_html__( 'Interactivity', 'stratum' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'hover',
|
|
'options' => [
|
|
'hover' => esc_html__( 'Hover', 'stratum' ),
|
|
'click' => esc_html__( 'Click', 'stratum' )
|
|
],
|
|
'condition' => [
|
|
'tooltip' => 'yes'
|
|
]
|
|
]
|
|
);
|
|
|
|
$repeater->end_controls_tab();
|
|
|
|
$repeater->end_controls_tabs();
|
|
|
|
$controls->add_control(
|
|
'hotspot_dot_animation',
|
|
[
|
|
'label' => esc_html__( 'Animation', 'stratum' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => 'yes',
|
|
'label_on' => esc_html__( 'Yes', 'stratum' ),
|
|
'label_off' => esc_html__( 'No', 'stratum' ),
|
|
'return_value' => 'yes'
|
|
]
|
|
);
|
|
|
|
$controls->add_control(
|
|
'hot_spots',
|
|
[
|
|
'label' => '',
|
|
'title_field' => '<i class="{{ hotspot_icon }}" aria-hidden="true"></i> {{{ tooltip_title }}}',
|
|
'type' => Controls_Manager::REPEATER,
|
|
'default' => [
|
|
[
|
|
'feature_icon' => 'fa fa-plus',
|
|
'left_position' => 20,
|
|
'top_position' => 30
|
|
]
|
|
],
|
|
'fields' => $repeater->get_controls()
|
|
]
|
|
);
|
|
|
|
$controls->end_controls_section();
|
|
|
|
$controls->start_controls_section(
|
|
'section_hotspot_style',
|
|
[
|
|
'label' => esc_html__( 'Hotspot', 'stratum' ),
|
|
'tab' => Controls_Manager::TAB_STYLE
|
|
]
|
|
);
|
|
|
|
$controls->add_responsive_control(
|
|
'hotspot_icon_size',
|
|
[
|
|
'label' => esc_html__( 'Size', 'stratum' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [ 'size' => '20' ],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 6,
|
|
'max' => 50,
|
|
'step' => 1
|
|
]
|
|
],
|
|
'size_units' => [ 'px' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .stratum-image-hotspot__dot-content' => 'font-size: {{SIZE}}{{UNIT}};'
|
|
]
|
|
]
|
|
);
|
|
|
|
$controls->add_responsive_control(
|
|
'hotspot_dot_padding',
|
|
[
|
|
'label' => esc_html__( 'Point Spacing', 'stratum' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [ 'size' => '0' ],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 6,
|
|
'max' => 100,
|
|
'step' => 1
|
|
]
|
|
],
|
|
'size_units' => [ 'px' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .stratum-image-hotspot__dot' => 'padding: {{SIZE}}{{UNIT}};'
|
|
]
|
|
]
|
|
);
|
|
|
|
$controls->add_responsive_control(
|
|
'hotspot_dot_opacity',
|
|
[
|
|
'label' => esc_html__( 'Point Opacity', 'stratum' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [ 'size' => '1' ],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 1,
|
|
'step' => 0.1
|
|
]
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .stratum-image-hotspot__dot' => 'opacity: {{SIZE}};'
|
|
]
|
|
]
|
|
);
|
|
|
|
$controls->add_control(
|
|
'icon_color_normal',
|
|
[
|
|
'label' => esc_html__( 'Color', 'stratum' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '#fff',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .stratum-image-hotspot__dot-icon' => 'color: {{VALUE}}'
|
|
]
|
|
]
|
|
);
|
|
|
|
$controls->add_control(
|
|
'icon_bg_color_normal',
|
|
[
|
|
'label' => esc_html__( 'Background Color', 'stratum' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .stratum-image-hotspot__dot' => 'background-color: {{VALUE}}'
|
|
]
|
|
]
|
|
);
|
|
|
|
$controls->end_controls_section();
|
|
}
|
|
|
|
protected function render() {
|
|
$this->render_widget( 'php' );
|
|
}
|
|
|
|
protected function content_template() {
|
|
$this->render_widget( 'js' );
|
|
}
|
|
|
|
public function render_plain_content( $instance = [] ) {}
|
|
|
|
public function get_dot_template($class, $dot_class, $wrapper_class, $icon_class, $type, $item = null) {
|
|
$out = "";
|
|
$out .= "<div ".$dot_class.">";
|
|
$out .= "<div ".$wrapper_class."'>";
|
|
$out .= "<div class='".esc_attr( $class."__dot-content" )."'>";
|
|
$out .= "<i class='".esc_attr( $class."__dot-icon ".$icon_class )."'></i>";
|
|
$out .= "</div>";
|
|
$out .= "</div>";
|
|
$out .= "</div>";
|
|
|
|
return $out;
|
|
}
|
|
}
|
|
|
|
Plugin::instance()->widgets_manager->register( new Image_Hot_Spot() ); |