1623 lines
48 KiB
PHP
1623 lines
48 KiB
PHP
<?php
|
|
|
|
namespace Essential_Addons_Elementor\Extensions;
|
|
|
|
use Elementor\Controls_Manager;
|
|
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit;
|
|
}
|
|
|
|
class Hover_Effect {
|
|
|
|
/**
|
|
* Initialize hooks
|
|
*/
|
|
public function __construct() {
|
|
add_action( 'elementor/element/common/_section_style/after_section_end', [ $this, 'register_controls' ] );
|
|
add_action( 'elementor/frontend/before_render', [ $this, 'before_render' ], 1 );
|
|
}
|
|
|
|
public function register_controls( $element ) {
|
|
$element->start_controls_section(
|
|
'eael_hover_effect_section',
|
|
[
|
|
'label' => __( '<i class="eaicon-logo"></i> Hover Interactions', 'essential-addons-for-elementor-lite' ),
|
|
'tab' => Controls_Manager::TAB_ADVANCED
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_switch',
|
|
[
|
|
'label' => __( 'Enable Hover Interactions', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_enable_live_changes',
|
|
[
|
|
'label' => __( 'Show Preview in Editor', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'separator' => 'before',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_enable_live_changes_note',
|
|
[
|
|
'type' => Controls_Manager :: RAW_HTML,
|
|
'raw' => __( 'Enabling this option will let you preview the Hover Interactions inside the Elementor Editor.', 'essential-addons-for-elementor-lite' ),
|
|
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->start_controls_tabs(
|
|
'eael_hover_effect'
|
|
);
|
|
|
|
//Normal Tab
|
|
$element->start_controls_tab(
|
|
'eael_hover_effect_normal_tab',
|
|
[
|
|
'label' => esc_html__( 'Normal', 'essential-addons-for-elementor-lite' ),
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Opacity
|
|
$element->add_control(
|
|
'eael_hover_effect_opacity_popover',
|
|
[
|
|
'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->start_popover();
|
|
$element->add_control(
|
|
'eael_hover_effect_opacity',
|
|
[
|
|
'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 0.8,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_opacity_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
$element->end_popover();
|
|
|
|
//Filter
|
|
$element->add_control(
|
|
'eael_hover_effect_filter_popover',
|
|
[
|
|
'label' => __( 'Filter', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->start_popover();
|
|
|
|
//Blur
|
|
$element->add_control(
|
|
'eael_hover_effect_blur_is_on',
|
|
[
|
|
'label' => __( 'Blur', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_blur',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 1,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 10,
|
|
'step' => 0.5,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_blur_is_on' => 'yes',
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Contrast
|
|
$element->add_control(
|
|
'eael_hover_effect_contrast_is_on',
|
|
[
|
|
'label' => __( 'Contrast', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_contrast',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 80,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 1000,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_contrast_is_on' => 'yes',
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Grayscal
|
|
$element->add_control(
|
|
'eael_hover_effect_grayscale_is_on',
|
|
[
|
|
'label' => __( 'Grayscale', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_grayscal',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 40,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 100,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_grayscale_is_on' => 'yes',
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Invert
|
|
$element->add_control(
|
|
'eael_hover_effect_invert_is_on',
|
|
[
|
|
'label' => __( 'Invert', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_invert',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 70,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 100,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_invert_is_on' => 'yes',
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Saturate
|
|
$element->add_control(
|
|
'eael_hover_effect_saturate_is_on',
|
|
[
|
|
'label' => __( 'Saturate', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_saturate',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 50,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 1000,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_saturate_is_on' => 'yes',
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Sepia
|
|
$element->add_control(
|
|
'eael_hover_effect_sepia_is_on',
|
|
[
|
|
'label' => __( 'Sepia', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_sepia',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 50,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 100,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_sepia_is_on' => 'yes',
|
|
'eael_hover_effect_filter_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
$element->end_popover();
|
|
|
|
//Offset
|
|
$element->add_control(
|
|
'eael_hover_effect_offset_popover',
|
|
[
|
|
'label' => __( 'Offset', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'frontend_available' => true,
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
$element->start_popover();
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_offset_left',
|
|
[
|
|
'label' => __( 'Offset Top', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['px', '%'],
|
|
'default' => [
|
|
'unit' => 'px',
|
|
'size' => 5,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 500,
|
|
'min' => -500,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'max' => 100,
|
|
'min' => -100,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_offset_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_offset_top',
|
|
[
|
|
'label' => __( 'Offset Left', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['px', '%'],
|
|
'default' => [
|
|
'unit' => 'px',
|
|
'size' => 5,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 500,
|
|
'min' => -500,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'max' => 100,
|
|
'min' => -100,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_offset_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
$element->end_popover();
|
|
|
|
//Transform
|
|
$element->add_control(
|
|
'eael_hover_effect_transform_popover',
|
|
[
|
|
'label' => __( 'Transform', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'frontend_available' => true,
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Rotate
|
|
$element->start_popover();
|
|
$element->add_control(
|
|
'eael_hover_effect_rotate_is_on',
|
|
[
|
|
'label' => __( 'Rotate', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//RotateX
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_rotatex',
|
|
[
|
|
'label' => esc_html__( 'RotateX (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -180,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_rotate_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//RotateY
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_rotatey',
|
|
[
|
|
'label' => esc_html__( 'RotateY (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -180,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_rotate_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//RotateZ
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_rotatez',
|
|
[
|
|
'label' => esc_html__( 'RotateZ (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -180,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 5,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_rotate_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Scale
|
|
$element->add_control(
|
|
'eael_hover_effect_scale_is_on',
|
|
[
|
|
'label' => __( 'Scale', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//ScaleX
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_scalex',
|
|
[
|
|
'label' => esc_html__( 'ScaleX', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0.9,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_scale_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//ScaleY
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_scaley',
|
|
[
|
|
'label' => esc_html__( 'ScaleY', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0.9,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_scale_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//Skew
|
|
$element->add_control(
|
|
'eael_hover_effect_skew_is_on',
|
|
[
|
|
'label' => __( 'Skew', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//SkewX
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_skewx',
|
|
[
|
|
'label' => esc_html__( 'SkewX (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 5,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_skew_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
//SkewY
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_skewy',
|
|
[
|
|
'label' => esc_html__( 'SkewY (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 5,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_skew_is_on' => 'yes',
|
|
'eael_hover_effect_transform_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->end_popover();
|
|
|
|
// General Settings
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_heading',
|
|
[
|
|
'label' => __( 'General Settings', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::HEADING,
|
|
'separator' => 'before',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Duration
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_duration',
|
|
[
|
|
'label' => __( 'Duration (ms)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 10000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 1000,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Delay
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_delay',
|
|
[
|
|
'label' => __( 'Delay (ms)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 10000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_easing',
|
|
[
|
|
'label' => __( 'Easing', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'ease',
|
|
'frontend_available' => true,
|
|
'options' => [
|
|
'ease' => __( 'Default', 'essential-addons-for-elementor-lite' ),
|
|
'ease-in' => __( 'Ease-in', 'essential-addons-for-elementor-lite' ),
|
|
'ease-out' => __( 'Ease-out', 'essential-addons-for-elementor-lite' ),
|
|
'ease-in-out' => __( 'Ease-in-out', 'essential-addons-for-elementor-lite' ),
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->end_controls_tab();
|
|
|
|
/**
|
|
* Hovar Tab
|
|
*/
|
|
$element->start_controls_tab(
|
|
'eael_hover_effect_hover_tab',
|
|
[
|
|
'label' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ),
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Opacity Hover
|
|
$element->add_control(
|
|
'eael_hover_effect_opacity_popover_hover',
|
|
[
|
|
'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'frontend_available' => true,
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->start_popover();
|
|
$element->add_control(
|
|
'eael_hover_effect_opacity_hover',
|
|
[
|
|
'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'default' => [
|
|
'size' => 1,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_opacity_popover_hover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
$element->end_popover();
|
|
|
|
//Filter Hover Start
|
|
$element->add_control(
|
|
'eael_hover_effect_filter_hover_popover',
|
|
[
|
|
'label' => __( 'Filter', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->start_popover();
|
|
|
|
//Blur Start
|
|
$element->add_control(
|
|
'eael_hover_effect_blur_hover_is_on',
|
|
[
|
|
'label' => __( 'Blur', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_blur_hover',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['px'],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 10,
|
|
'step' => 0.5,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_blur_hover_is_on' => 'yes',
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Blur End
|
|
|
|
//Contrast Start
|
|
$element->add_control(
|
|
'eael_hover_effect_contrast_hover_is_on',
|
|
[
|
|
'label' => __( 'Contrast', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_contrast_hover',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['%'],
|
|
'default' => [
|
|
'unit' => '%',
|
|
'size' => 100,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 1000,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_contrast_hover_is_on' => 'yes',
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Contrast End
|
|
|
|
//Grayscale Start
|
|
$element->add_control(
|
|
'eael_hover_effect_grayscale_hover_is_on',
|
|
[
|
|
'label' => __( 'Grayscale', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_grayscal_hover',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'size_units' => ['%'],
|
|
'default' => [
|
|
'unit' => '%',
|
|
'size' => 0,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 100,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_grayscale_hover_is_on' => 'yes',
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Grayscale End
|
|
|
|
//Invert Start
|
|
$element->add_control(
|
|
'eael_hover_effect_invert_hover_is_on',
|
|
[
|
|
'label' => __( 'Invert', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_invert_hover',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['%'],
|
|
'default' => [
|
|
'unit' => '%',
|
|
'size' => 0,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 100,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_invert_hover_is_on' => 'yes',
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Invert End
|
|
|
|
//Saturate Start
|
|
$element->add_control(
|
|
'eael_hover_effect_saturate_hover_is_on',
|
|
[
|
|
'label' => __( 'Saturate', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_saturate_hover',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['%'],
|
|
'default' => [
|
|
'unit' => '%',
|
|
'size' => 100,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 1000,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_saturate_hover_is_on' => 'yes',
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Saturate End
|
|
|
|
//Sepia Start
|
|
$element->add_control(
|
|
'eael_hover_effect_sepia_hover_is_on',
|
|
[
|
|
'label' => __( 'Sepia', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_sepia_hover',
|
|
[
|
|
'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'default' => [
|
|
'size' => 1,
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'max' => 100,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_sepia_hover_is_on' => 'yes',
|
|
'eael_hover_effect_filter_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Sepia End
|
|
$element->end_popover();
|
|
//Filter End
|
|
|
|
//Offset Hover Start
|
|
$element->add_control(
|
|
'eael_hover_effect_offset_hover_popover',
|
|
[
|
|
'label' => __( 'Offset', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'frontend_available' => true,
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
$element->start_popover();
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_offset_hover_left',
|
|
[
|
|
'label' => __( 'Offset Top', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['px', '%'],
|
|
'default' => [
|
|
'unit' => 'px',
|
|
'size' => 0,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 500,
|
|
'min' => -500,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'max' => 100,
|
|
'min' => -100,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_offset_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_offset_hover_top',
|
|
[
|
|
'label' => __( 'Offset Left', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'frontend_available' => true,
|
|
'size_units' => ['px', '%'],
|
|
'default' => [
|
|
'unit' => 'px',
|
|
'size' => 0,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 500,
|
|
'min' => -500,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'max' => 100,
|
|
'min' => -100,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_offset_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
$element->end_popover();
|
|
//Offset End
|
|
|
|
//Transform Hover Start
|
|
$element->add_control(
|
|
'eael_hover_effect_transform_hover_popover',
|
|
[
|
|
'label' => __( 'Transform', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::POPOVER_TOGGLE,
|
|
'return_value' => 'yes',
|
|
'frontend_available' => true,
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Rotate Start
|
|
$element->start_popover();
|
|
$element->add_control(
|
|
'eael_hover_effect_rotate_hover_is_on',
|
|
[
|
|
'label' => __( 'Rotate', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_rotatex',
|
|
[
|
|
'label' => esc_html__( 'RotateX (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -180,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_rotate_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_rotatey',
|
|
[
|
|
'label' => esc_html__( 'RotateY (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -180,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_rotate_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_rotatez',
|
|
[
|
|
'label' => esc_html__( 'RotateZ (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -180,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_rotate_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Rotate End
|
|
|
|
//Scale Start
|
|
$element->add_control(
|
|
'eael_hover_effect_scale_hover_is_on',
|
|
[
|
|
'label' => __( 'Scale', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_scalex',
|
|
[
|
|
'label' => esc_html__( 'ScaleX', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 1,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_scale_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_scaley',
|
|
[
|
|
'label' => esc_html__( 'ScaleY', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_scale_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Scale End
|
|
|
|
//Skew
|
|
$element->add_control(
|
|
'eael_hover_effect_skew_hover_is_on',
|
|
[
|
|
'label' => __( 'Skew', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_skewx',
|
|
[
|
|
'label' => esc_html__( 'SkewX (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_skew_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
|
|
$element->add_responsive_control(
|
|
'eael_hover_effect_transform_hover_skewy',
|
|
[
|
|
'label' => esc_html__( 'SkewY (deg)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 180,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => 0,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_skew_hover_is_on' => 'yes',
|
|
'eael_hover_effect_transform_hover_popover' => 'yes',
|
|
],
|
|
]
|
|
);
|
|
//Skew End
|
|
$element->end_popover();
|
|
|
|
// General Settings
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_hover_heading',
|
|
[
|
|
'label' => __( 'General Settings', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::HEADING,
|
|
'separator' => 'before',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Duration
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_hover_duration',
|
|
[
|
|
'label' => __( 'Duration (ms)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 10000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'default' => [
|
|
'unit' => 'px',
|
|
'size' => 1000,
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Delay
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_hover_delay',
|
|
[
|
|
'label' => __( 'Delay (ms)', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 10000,
|
|
'step' => 100,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
//Easing
|
|
$element->add_control(
|
|
'eael_hover_effect_general_settings_hover_easing',
|
|
[
|
|
'label' => __( 'Easing', 'essential-addons-for-elementor-lite' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'ease',
|
|
'frontend_available' => true,
|
|
'options' => [
|
|
'ease' => __( 'Default', 'essential-addons-for-elementor-lite' ),
|
|
'ease-in' => __( 'Ease-in', 'essential-addons-for-elementor-lite' ),
|
|
'ease-out' => __( 'Ease-out', 'essential-addons-for-elementor-lite' ),
|
|
'ease-in-out' => __( 'Ease-in-out', 'essential-addons-for-elementor-lite' ),
|
|
],
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->add_control(
|
|
'eael_hover_effect_hover_tilt',
|
|
[
|
|
'label' => esc_html__( 'Tilt Effect', 'essential-addons-for-elementor-lite' ),
|
|
'type' => \Elementor\Controls_Manager::SWITCHER,
|
|
'label_on' => esc_html__( 'On', 'essential-addons-for-elementor-lite' ),
|
|
'label_off' => esc_html__( 'Off', 'essential-addons-for-elementor-lite' ),
|
|
'return_value' => 'yes',
|
|
'condition' => [
|
|
'eael_hover_effect_switch' => 'yes',
|
|
]
|
|
]
|
|
);
|
|
|
|
$element->end_controls_tab();
|
|
$element->end_controls_tabs();
|
|
|
|
$element->end_controls_section();
|
|
}
|
|
|
|
public function before_render( $element ) {
|
|
$settings = $element->get_settings_for_display();
|
|
|
|
/**
|
|
* Normal Effect Options
|
|
*/
|
|
//Opacity
|
|
if( !empty( $settings['eael_hover_effect_switch'] ) ) {
|
|
if( !empty( $settings['eael_hover_effect_opacity']['size'] ) ) {
|
|
$opacity_settings = [
|
|
'opacity' => $settings['eael_hover_effect_opacity']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_opacity', wp_json_encode( $opacity_settings ) );
|
|
}
|
|
|
|
//Blur Effect
|
|
if( 'yes' == $settings['eael_hover_effect_blur_is_on'] ) {
|
|
$blur_settings = [
|
|
'blur' => $settings['eael_hover_effect_blur']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_blur_effect', wp_json_encode( $blur_settings ) );
|
|
}
|
|
|
|
//Contrast Effect
|
|
if( 'yes' == $settings['eael_hover_effect_contrast_is_on'] ) {
|
|
$contrast_settings = [
|
|
'contrast' => $settings['eael_hover_effect_contrast']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_contrast_effect', wp_json_encode( $contrast_settings ) );
|
|
}
|
|
|
|
//Grayscale Effect
|
|
if( 'yes' == $settings['eael_hover_effect_grayscale_is_on'] ) {
|
|
$grayscale_settings = [
|
|
'grayscale' => $settings['eael_hover_effect_grayscal']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_grayscale_effect', wp_json_encode( $grayscale_settings ) );
|
|
}
|
|
|
|
//Invert Effect
|
|
if( 'yes' == $settings['eael_hover_effect_invert_is_on'] ) {
|
|
$invert_settings = [
|
|
'invert' => $settings['eael_hover_effect_invert']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_invert_effect', wp_json_encode( $invert_settings ) );
|
|
}
|
|
|
|
//Saturate Effect
|
|
if( 'yes' == $settings['eael_hover_effect_saturate_is_on'] ) {
|
|
$saturate_settings = [
|
|
'saturate' => $settings['eael_hover_effect_saturate']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_saturate_effect', wp_json_encode( $saturate_settings ) );
|
|
}
|
|
|
|
//Sepia Effect
|
|
if( 'yes' == $settings['eael_hover_effect_sepia_is_on'] ) {
|
|
$sepia_settings = [
|
|
'sepia' => $settings['eael_hover_effect_sepia']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_sepia_effect', wp_json_encode( $sepia_settings ) );
|
|
}
|
|
|
|
//Offset Top
|
|
if( !empty( $settings['eael_hover_effect_offset_top']['size'] ) ) {
|
|
$offset_top_settings = [
|
|
'size' => $settings['eael_hover_effect_offset_top']['size'],
|
|
'unit' => $settings['eael_hover_effect_offset_top']['unit'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_offset_top', wp_json_encode( $offset_top_settings ) );
|
|
}
|
|
|
|
//Offset Left
|
|
if( !empty( $settings['eael_hover_effect_offset_left']['size'] ) ) {
|
|
$offset_left_settings = [
|
|
'size' => $settings['eael_hover_effect_offset_left']['size'],
|
|
'unit' => $settings['eael_hover_effect_offset_left']['unit'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_offset_left', wp_json_encode( $offset_left_settings ) );
|
|
}
|
|
|
|
//Rotate Effect
|
|
if( 'yes' == $settings['eael_hover_effect_rotate_is_on'] ) {
|
|
$rotate_settings = [
|
|
'rotate_x' => $settings['eael_hover_effect_transform_rotatex']['size'],
|
|
'rotate_y' => $settings['eael_hover_effect_transform_rotatey']['size'],
|
|
'rotate_z' => $settings['eael_hover_effect_transform_rotatez']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_rotate_effect', wp_json_encode( $rotate_settings ) );
|
|
}
|
|
|
|
//Scale Effect
|
|
if( 'yes' == $settings['eael_hover_effect_scale_is_on'] ) {
|
|
$scale_settings = [
|
|
'scale_x' => $settings['eael_hover_effect_transform_scalex']['size'],
|
|
'scale_y' => $settings['eael_hover_effect_transform_scaley']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_scale_effect', wp_json_encode( $scale_settings ) );
|
|
}
|
|
|
|
//Skew Effect
|
|
if( 'yes' == $settings['eael_hover_effect_skew_is_on'] ) {
|
|
$skew_settings = [
|
|
'skew_x' => $settings['eael_hover_effect_transform_skewx']['size'],
|
|
'skew_y' => $settings['eael_hover_effect_transform_skewy']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_skew_effect', wp_json_encode( $skew_settings ) );
|
|
}
|
|
|
|
//Transition Duration
|
|
if( !empty( $settings['eael_hover_effect_general_settings_duration']['size'] ) ) {
|
|
$transition_duration_settings = [
|
|
'transitionDuration' => $settings['eael_hover_effect_general_settings_duration']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_duration', wp_json_encode( $transition_duration_settings ) );
|
|
}
|
|
|
|
//Transition Delay
|
|
if( !empty( $settings['eael_hover_effect_general_settings_delay']['size'] ) ) {
|
|
$transition_delay_settings = [
|
|
'transitionDelay' => $settings['eael_hover_effect_general_settings_delay']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_delay', wp_json_encode( $transition_delay_settings ) );
|
|
}
|
|
|
|
//Transition Easing
|
|
if( !empty( $settings['eael_hover_effect_general_settings_easing'] ) ) {
|
|
$transition_easing_settings = [
|
|
'transitionEasing' => $settings['eael_hover_effect_general_settings_easing'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_easing', wp_json_encode( $transition_easing_settings ) );
|
|
}
|
|
|
|
/**
|
|
* Hover Interactions Options
|
|
*/
|
|
//Opacity
|
|
if( !empty( $settings['eael_hover_effect_opacity_hover']['size'] ) ) {
|
|
$opacity_settings = [
|
|
'opacity' => $settings['eael_hover_effect_opacity_hover']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_opacity_hover', wp_json_encode( $opacity_settings ) );
|
|
}
|
|
|
|
//blur
|
|
if( 'yes' == $settings['eael_hover_effect_blur_hover_is_on'] ) {
|
|
$blur_settings = [
|
|
'blur' => $settings['eael_hover_effect_blur_hover']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_blur_hover_effect', wp_json_encode( $blur_settings ) );
|
|
}
|
|
|
|
//Contrast
|
|
if( 'yes' == $settings['eael_hover_effect_contrast_hover_is_on'] ) {
|
|
$contrast_settings = [
|
|
'contrast' => $settings['eael_hover_effect_contrast_hover']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_contrast_hover_effect', wp_json_encode( $contrast_settings ) );
|
|
}
|
|
|
|
//Grayscale
|
|
if( 'yes' == $settings['eael_hover_effect_grayscale_hover_is_on'] ) {
|
|
$grayscale_settings = [
|
|
'grayscale' => $settings['eael_hover_effect_grayscal_hover']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_grayscal_hover_effect', wp_json_encode( $grayscale_settings ) );
|
|
}
|
|
|
|
//Invert
|
|
if( 'yes' == $settings['eael_hover_effect_invert_hover_is_on'] ) {
|
|
$invert_settings = [
|
|
'invert' => $settings['eael_hover_effect_invert_hover']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_invert_hover_effect', wp_json_encode( $invert_settings ) );
|
|
}
|
|
|
|
//Saturate
|
|
if( 'yes' == $settings['eael_hover_effect_saturate_hover_is_on'] ) {
|
|
$saturate_settings = [
|
|
'saturate' => $settings['eael_hover_effect_saturate_hover']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_saturate_hover_effect', wp_json_encode( $saturate_settings ) );
|
|
}
|
|
|
|
//Sepia
|
|
if( 'yes' == $settings['eael_hover_effect_sepia_hover_is_on'] ) {
|
|
$sepia_settings = [
|
|
'sepia' => $settings['eael_hover_effect_sepia_hover']['size']
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_sepia_hover_effect', wp_json_encode( $sepia_settings ) );
|
|
}
|
|
|
|
//Offset Top
|
|
if( !empty( $settings['eael_hover_effect_offset_hover_top']['size'] ) ) {
|
|
$offset_top_settings = [
|
|
'size' => $settings['eael_hover_effect_offset_hover_top']['size'],
|
|
'unit' => $settings['eael_hover_effect_offset_hover_top']['unit'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_offset_hover_top', wp_json_encode( $offset_top_settings ) );
|
|
}
|
|
|
|
//Offset Left
|
|
if( !empty( $settings['eael_hover_effect_offset_hover_left']['size'] ) ) {
|
|
$offset_left_settings = [
|
|
'size' => $settings['eael_hover_effect_offset_hover_left']['size'],
|
|
'unit' => $settings['eael_hover_effect_offset_hover_left']['unit'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_offset_hover_left', wp_json_encode( $offset_left_settings ) );
|
|
}
|
|
|
|
//Rotate
|
|
if( 'yes' == $settings['eael_hover_effect_rotate_hover_is_on'] ) {
|
|
$rotate_settings = [
|
|
'rotate_x' => $settings['eael_hover_effect_transform_hover_rotatex']['size'],
|
|
'rotate_y' => $settings['eael_hover_effect_transform_hover_rotatey']['size'],
|
|
'rotate_z' => $settings['eael_hover_effect_transform_hover_rotatez']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_rotate_hover_effect', wp_json_encode( $rotate_settings ) );
|
|
}
|
|
|
|
//Scale Effect
|
|
if( 'yes' == $settings['eael_hover_effect_scale_hover_is_on'] ) {
|
|
$scale_settings = [
|
|
'scale_x' => $settings['eael_hover_effect_transform_hover_scalex']['size'],
|
|
'scale_y' => $settings['eael_hover_effect_transform_hover_scaley']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_scale_hover_effect', wp_json_encode( $scale_settings ) );
|
|
}
|
|
|
|
//Skew Effect
|
|
if( 'yes' == $settings['eael_hover_effect_skew_hover_is_on'] ) {
|
|
$skew_settings = [
|
|
'skew_x' => $settings['eael_hover_effect_transform_hover_skewx']['size'],
|
|
'skew_y' => $settings['eael_hover_effect_transform_hover_skewy']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_skew_hover_effect', wp_json_encode( $skew_settings ) );
|
|
}
|
|
|
|
//Transition Duration
|
|
if( !empty( $settings['eael_hover_effect_general_settings_hover_duration']['size'] ) ) {
|
|
$transition_duration_settings = [
|
|
'transitionDuration' => $settings['eael_hover_effect_general_settings_hover_duration']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_hover_duration', wp_json_encode( $transition_duration_settings ) );
|
|
}
|
|
|
|
//Transition Delay
|
|
if( !empty( $settings['eael_hover_effect_general_settings_hover_delay']['size'] ) ) {
|
|
$transition_delay_settings = [
|
|
'transitionDelay' => $settings['eael_hover_effect_general_settings_hover_delay']['size'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_hover_delay', wp_json_encode( $transition_delay_settings ) );
|
|
}
|
|
|
|
//Transition Easing
|
|
if( !empty( $settings['eael_hover_effect_general_settings_hover_easing'] ) ) {
|
|
$transition_easing_settings = [
|
|
'transitionEasing' => $settings['eael_hover_effect_general_settings_hover_easing'],
|
|
];
|
|
$element->add_render_attribute( '_wrapper', 'data-eael_hover_easing', wp_json_encode( $transition_easing_settings ) );
|
|
}
|
|
|
|
//Tilt
|
|
if( !empty( $settings['eael_hover_effect_hover_tilt'] ) ) {
|
|
$element->add_render_attribute( '_wrapper', 'data-eaeltilt', 'eael_tilt' );
|
|
}
|
|
|
|
$element->add_render_attribute( '_wrapper', 'class', 'eael_hover_effect' );
|
|
|
|
?>
|
|
<?php
|
|
}
|
|
}
|
|
|
|
}
|