first commit
This commit is contained in:
459
wp-content/plugins/stratum/includes/widgets/image-hotspot.php
Normal file
459
wp-content/plugins/stratum/includes/widgets/image-hotspot.php
Normal file
@@ -0,0 +1,459 @@
|
||||
<?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() );
|
||||
Reference in New Issue
Block a user