JezK

Edit File: Liquid_Glass_Effect.php

<?php

namespace Essential_Addons_Elementor\Extensions;

use Elementor\Controls_Manager;
use Essential_Addons_Elementor\Traits\Helper as HelperTrait;

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

class Liquid_Glass_Effect
{
    use HelperTrait;
    /**
     * Initialize hooks
     */
    public function __construct()
    {
        add_action('elementor/element/container/section_layout/after_section_end', [$this, 'register_controls']);
        add_action('elementor/element/column/section_advanced/after_section_end', [$this, 'register_controls']);
        add_action('elementor/element/section/section_advanced/after_section_end', [$this, 'register_controls']);
        add_action('elementor/element/common/_section_style/after_section_end', [$this, 'register_controls']);
        add_action('elementor/frontend/before_render', [$this, 'before_render'], 100);
        add_filter('elementor/widget/render_content', [$this, 'eael_liquid_glass_effect_svg_render'], 10, 2);

// Add support for containers
        add_action('elementor/frontend/container/after_render', [$this, 'eael_liquid_glass_effect_container_svg_render'], 10);
    }

public function eael_liquid_glass_effect_bg_color_effect($element, $effect, $default_bg_color)
    {
        $element->add_control(
            'eael_liquid_glass_effect_bg_color_' . $effect,
            [
                'label'     => esc_html__('Background Color', 'essential-addons-for-elementor-lite'),
                'type'      => Controls_Manager::COLOR,
                'default'   => $default_bg_color,
                'selectors' => [
                    '{{WRAPPER}}.eael_liquid_glass-' . $effect => 'background-color: {{VALUE}}',
                ],
                'condition' => [
                    'eael_liquid_glass_effect_switch' => 'yes',
                    'eael_liquid_glass_effect'        => $effect,
                ],
            ]
        );
    }

public function eael_liquid_glass_effect_backdrop_filter($element, $effect, $default_size)
    {
        $element->add_control(
            'eael_liquid_glass_effect_backdrop_filter_' . $effect,
            [
                'label' => esc_html__('Backdrop Filter', 'essential-addons-for-elementor-lite'),
                'type'  => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 50,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'size' => $default_size,
                ],
                'selectors' => [
                    '{{WRAPPER}}.eael_liquid_glass-' . $effect => 'backdrop-filter: blur({{SIZE}}px)',
                ],
                'condition' => [
                    'eael_liquid_glass_effect_switch' => 'yes',
                    'eael_liquid_glass_effect' => $effect,
                ],
            ]
        );
    }

public function eael_liquid_glass_effect_border($element, $effect, $default_color, $condition)
    {
        $element->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name'      => 'eael_liquid_glass_border_' . $effect,
                'fields_options' => [
                    'border' => [
                        'default' => 'solid',
                    ],
                    'width' => [
                        'default' => [
                            'top'      => '1',
                            'right'    => '1',
                            'bottom'   => '1',
                            'left'     => '1',
                            'isLinked' =>  false,
                        ],
                    ],
                    'color' => [
                        'default' => $default_color,
                    ],
                ],
                'selector'  => '{{WRAPPER}}.eael_liquid_glass_shadow-' . $effect,
                'condition' => [
                    'eael_liquid_glass_effect_switch'       => 'yes',
                    'eael_liquid_glass_border_distortion!'  => 'yes',
                    'eael_liquid_glass_shadow_effect'       => $effect,
                    'eael_liquid_glass_effect'              => $condition,
                ],
            ]
        );
    }

public function eael_liquid_glass_effect_border_radius($element, $effect, $default_radius, $condition)
    {
        $element->add_control(
            'eael_liquid_glass_border_radius_' . $effect,
            [
                'label'      => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'rem', 'custom'],
                'default' => $default_radius,
                'selectors'  => [
                    '{{WRAPPER}}.eael_liquid_glass_shadow-' . $effect => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'eael_liquid_glass_effect_switch' => 'yes',
                    'eael_liquid_glass_border_distortion!'  => 'yes',
                    'eael_liquid_glass_shadow_effect' => $effect,
                    'eael_liquid_glass_effect'        => $condition,
                ],
            ]
        );
    }

public function eael_liquid_glass_effect_box_shadow($element, $effect, $default_shadow, $condition)
    {
        $element->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name'              => 'eael_liquid_glass_shadow_' . $effect,
                'fields_options'     => [
                    'box_shadow_type' => ['default' => 'yes'],
                    'box_shadow'      => [
                        'default'      => $default_shadow,
                    ],
                ],
                'selector'  => '{{WRAPPER}}.eael_liquid_glass_shadow-' . $effect,
                'condition' => [
                    'eael_liquid_glass_effect_switch'  => 'yes',
                    'eael_liquid_glass_border_distortion!'  => 'yes',
                    'eael_liquid_glass_shadow_effect' => $effect,
                    'eael_liquid_glass_effect'        => $condition,
                ],
            ]
        );
    }

/**
     * Summary of teaser_template
     */
    public function teaser_template($texts)
    {
        $html = '<div class="ea-nerd-box">
			<div class="ea-nerd-box-message">' . $texts['messages'] . '</div>
			<a class="ea-nerd-box-link elementor-button elementor-button-default" href="https://wpdeveloper.com/upgrade/ea-pro" target="_blank">
			' . __('Upgrade to EA PRO', 'essential-addons-for-elementor-lite') . '
			</a>
		</div>';

return $html;
    }

public function eael_pro_lock_icon()
    {
        if (!apply_filters('eael/pro_enabled', false)) {
            $html = '<span class="e-control-motion-effects-promotion__lock-wrapper"><i class="eicon-lock"></i></span>';
            return $html;
        }
        return;
    }

public function register_controls($element)
    {
        $element->start_controls_section(
            'eael_liquid_glass_effect_section',
            [
                'label' => __('<i class="eaicon-logo"></i> Liquid Glass Effects', 'essential-addons-for-elementor-lite'),
                'tab'   => Controls_Manager::TAB_ADVANCED
            ]
        );

$element->add_control(
            'eael_liquid_glass_effect_switch',
            [
                'label'        => __('Enable Liquid Glass Effects', 'essential-addons-for-elementor-lite'),
                'type'         => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
            ]
        );

$element->add_control(
            'eael_liquid_glass_effect_notice',
            [
                'type'        => Controls_Manager::ALERT,
                'alert_type'  => 'info',
                'content'     => esc_html__('Liquid glass effect is only visible when a semi-transparent background color is applied.', 'essential-addons-for-elementor-lite') . '<a href="https://essential-addons.com/docs/ea-liquid-glass-effects/" target="_blank">' . esc_html__('Learn More', 'essential-addons-for-elementor-lite') . '</a>',
                'condition'   => [
                    'eael_liquid_glass_effect_switch' => 'yes',
                ]
            ]
        );

$eael_liquid_glass_effect = apply_filters(
            'eael_liquid_glass_effect_filter',
            [
                'styles' => [
                    'effect1' => esc_html__('Heavy Frost', 'essential-addons-for-elementor-lite'),
                    'effect2' => esc_html__('Soft Mist', 'essential-addons-for-elementor-lite'),
                    'effect3' => esc_html__('Glass Frost', 'essential-addons-for-elementor-lite'),
                    'effect4' => esc_html__('Light Frost', 'essential-addons-for-elementor-lite'),
                    'effect5' => esc_html__('Grain Frost', 'essential-addons-for-elementor-lite'),
                    'effect6' => esc_html__('Fine Frost', 'essential-addons-for-elementor-lite'),
                ],
            ]
        );

$element->add_control(
            'eael_liquid_glass_effect',
            [
                'label'       => esc_html__('Liquid Glass Presets', 'essential-addons-for-elementor-lite'),
                'type'        => Controls_Manager::CHOOSE,
                'label_block' => true,
                'options'     => [
                    'effect1' => [
                        'title' => esc_html($eael_liquid_glass_effect['styles']['effect1']),
                        'text'  => esc_html($eael_liquid_glass_effect['styles']['effect1']),
                    ],
                    'effect2' => [
                        'title' => esc_html($eael_liquid_glass_effect['styles']['effect2']),
                        'text'  => esc_html($eael_liquid_glass_effect['styles']['effect2']),
                    ],
                    'effect3' => [
                        'title' => esc_html($eael_liquid_glass_effect['styles']['effect3']),
                        'text'  => esc_html($eael_liquid_glass_effect['styles']['effect3']) . $this->eael_pro_lock_icon(),
                    ],
                    'effect4' => [
                        'title' => esc_html($eael_liquid_glass_effect['styles']['effect4']),
                        'text'  => esc_html($eael_liquid_glass_effect['styles']['effect4'])  . $this->eael_pro_lock_icon(),
                    ],
                    'effect5' => [
                        'title' => esc_html($eael_liquid_glass_effect['styles']['effect5']),
                        'text'  => esc_html($eael_liquid_glass_effect['styles']['effect5'])  . $this->eael_pro_lock_icon(),
                    ],
                    'effect6' => [
                        'title' => esc_html($eael_liquid_glass_effect['styles']['effect6']),
                        'text'  => esc_html($eael_liquid_glass_effect['styles']['effect6'])  . $this->eael_pro_lock_icon(),
                    ],
                ],
                'prefix_class' => 'eael_liquid_glass-',
                'condition' => [
                    'eael_liquid_glass_effect_switch' => 'yes',
                ],
                'default' => 'effect1',
                'multiline' => true,
            ]
        );

if (!apply_filters('eael/pro_enabled', false)) {
            $element->add_control(
                'eael_liquid_glass_effect_pro_alert',
                [
                    'type' => Controls_Manager::RAW_HTML,
                    'raw'  => $this->teaser_template([
                        'messages' => __("To use this Liquid glass preset, Upgrade to Essential Addons Pro", 'essential-addons-for-elementor-lite'),
                    ]),
                    'condition' => [
                        'eael_liquid_glass_effect_switch' => 'yes',
                        'eael_liquid_glass_effect'        => ['effect3', 'effect4', 'effect5', 'effect6'],
                    ]
                ]
            );
        } else {
            $element->add_control(
                'eael_liquid_glass_effect_settings',
                [
                    'label'     => esc_html__('Liquid Glass Settings', 'essential-addons-for-elementor-lite'),
                    'type'      => Controls_Manager::HEADING,
                    'separator' => 'before',
                    'condition' => [
                        'eael_liquid_glass_effect_switch' => 'yes',
                    ]
                ]
            );
        }

// Background Color Controls
        $this->eael_liquid_glass_effect_bg_color_effect($element, 'effect1', '#FFFFFF1F');
        $this->eael_liquid_glass_effect_bg_color_effect($element, 'effect2', '#FFFFFF1F');

// Background Color Controls for Pro
        do_action('eael_liquid_glass_effect_bg_color_effect4', $element, 'effect4', '');
        do_action('eael_liquid_glass_effect_bg_color_effect5', $element, 'effect5', '');
        do_action('eael_liquid_glass_effect_bg_color_effect6', $element, 'effect6', '');

// Backdrop Filter Controls
        $this->eael_liquid_glass_effect_backdrop_filter($element, 'effect1', 24);
        $this->eael_liquid_glass_effect_backdrop_filter($element, 'effect2', 20);

// Brightness Effect Controls
        $element->add_control(
            'eael_liquid_glass_effect_brightness_effect2',
            [
                'label' => esc_html__('Brightness', 'essential-addons-for-elementor-lite'),
                'type'  => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 5,
                        'step' => .1,
                    ],
                ],
                'default' => [
                    'size' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}}.eael_liquid_glass-effect2' => 'backdrop-filter: blur({{eael_liquid_glass_effect_backdrop_filter_effect2.SIZE}}px) brightness({{SIZE}});',
                ],
                'condition'    => [
                    'eael_liquid_glass_effect_switch' => 'yes',
                    'eael_liquid_glass_effect'        => 'effect2',
                ]
            ]
        );

// Backdrop Filter Controls for Pro
        do_action('eael_liquid_glass_effect_blur_effect3', $element, 'effect3', 0);
        do_action('eael_liquid_glass_effect_saturate_effect3', $element, 'effect3', 100);
        do_action('eael_liquid_glass_effect_border_radius_effect3', $element, 'effect3', '24px');

do_action('eael_liquid_glass_effect_backdrop_filter_effect4', $element, 'effect4', 5);
        do_action('eael_liquid_glass_effect_backdrop_filter_effect5', $element, 'effect5', '');
        do_action('eael_liquid_glass_effect_backdrop_filter_effect6', $element, 'effect6', 7);

// Noise Distortion Settings (Pro)
        do_action('eael_liquid_glass_effect_noise_action', $element);

if (!apply_filters('eael/pro_enabled', false)) {
            $element->add_control(
                'eael_liquid_glass_border_distortion',
                [
                    'label'        => esc_html__('Enable Border Distortion', 'essential-addons-for-elementor-lite'),
                    'type'         => 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',
                    'prefix_class' => 'eael_liquid_glass_border_distortion_',
                    'condition'    => [
                        'eael_liquid_glass_effect_switch' => 'yes',
                        'eael_liquid_glass_effect'        => ['effect1', 'effect2'],
                    ],
                ]
            );

$element->add_control(
                'eael_liquid_glass_border_radious_distortion',
                [
                    'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                    'default' => [
                        'top'        => 24,
                        'right'    => 24,
                        'bottom'   => 24,
                        'left'     => 24,
                        'unit'     => 'px',
                        'isLinked' => true,
                    ],
                    'selectors' => [
                        '{{WRAPPER}}.eael_liquid_glass_border_distortion_yes' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition'    => [
                        'eael_liquid_glass_effect_switch'     => 'yes',
                        'eael_liquid_glass_border_distortion' => 'yes',
                        'eael_liquid_glass_effect'            => ['effect1', 'effect2'],
                    ],
                ]
            );

$element->add_control(
                'eael_liquid_glass_shadow_effect',
                [
                    'label'     => esc_html__('Shadow Effects', 'essential-addons-for-elementor-lite'),
                    'type'      => Controls_Manager::SELECT2,
                    'default'   => 'effect1',
                    'separator' => 'before',
                    'options'   => [
                        ''          => esc_html__('None', 'essential-addons-for-elementor-lite'),
                        'effect1' => esc_html__('Effect 1', 'essential-addons-for-elementor-lite'),
                        'effect2' => esc_html__('Effect 2', 'essential-addons-for-elementor-lite'),
                        'effect3' => esc_html__('Effect 3', 'essential-addons-for-elementor-lite'),
                        'effect4' => esc_html__('Effect 4', 'essential-addons-for-elementor-lite'),
                    ],
                    'prefix_class' => 'eael_liquid_glass_shadow-',
                    'condition'    => [
                        'eael_liquid_glass_effect_switch'       => 'yes',
                        'eael_liquid_glass_border_distortion!'  => 'yes',
                        'eael_liquid_glass_effect'              => ['effect1', 'effect2'],
                    ]
                ]
            );

$element->add_control(
                'eael_liquid_glass_shadow_inner',
                [
                    'label'     => esc_html__('Shadow Settings', 'essential-addons-for-elementor-lite'),
                    'type'      => Controls_Manager::HEADING,
                    'separator' => 'before',
                    'condition' => [
                        'eael_liquid_glass_effect_switch'       => 'yes',
                        'eael_liquid_glass_shadow_effect!'      => '',
                        'eael_liquid_glass_border_distortion!'  => 'yes',
                        'eael_liquid_glass_effect'              => ['effect1', 'effect2'],
                    ],
                ]
            );

// Add border effect for Liquid Glass Effects
            $this->eael_liquid_glass_effect_border($element, 'effect1', '#FFFFFF1F', ['effect1', 'effect2']);
            $this->eael_liquid_glass_effect_border($element, 'effect2', '#FFFFFF1F', ['effect1', 'effect2']);
            $this->eael_liquid_glass_effect_border($element, 'effect3', '#FFFFFF1F', ['effect1', 'effect2']);
            $this->eael_liquid_glass_effect_border($element, 'effect4', '#AAAAAA1A', ['effect1', 'effect2']);

// Add border radius effect for Liquid Glass Effects
            $this->eael_liquid_glass_effect_border_radius($element, 'effect1', [
                'top'      => 24,
                'right'    => 24,
                'bottom'   => 24,
                'left'     => 24,
                'unit'     => 'px',
                'isLinked' => true,
            ], ['effect1', 'effect2']);

$this->eael_liquid_glass_effect_border_radius($element, 'effect2', [
                'top'       => 16,
                'right'    => 16,
                'bottom'   => 16,
                'left'     => 16,
                'unit'     => 'px',
                'isLinked' => true,
            ], ['effect1', 'effect2']);

$this->eael_liquid_glass_effect_border_radius($element, 'effect3', [
                'top'       => 8,
                'right'    => 8,
                'bottom'   => 8,
                'left'     => 8,
                'unit'     => 'px',
                'isLinked' => true,
            ], ['effect1', 'effect2']);

$this->eael_liquid_glass_effect_border_radius($element, 'effect4', [
                'top'       => 24,
                'right'    => 24,
                'bottom'   => 24,
                'left'     => 24,
                'unit'     => 'px',
                'isLinked' => true,
            ], ['effect1', 'effect2']);

// Add box shadow effect for Liquid Glass Effects
            $this->eael_liquid_glass_effect_box_shadow($element, 'effect1', [
                'color'      => 'rgba(0,0,0,0.78)',
                'horizontal' => 0,
                'vertical'   => 19,
                'blur'       => 26,
                'spread'     => 1,
            ], ['effect1', 'effect2']);

$this->eael_liquid_glass_effect_box_shadow($element, 'effect2', [
                'color'      => '#383C65',
                'horizontal' => 0,
                'vertical'   => 0,
                'blur'       => 33,
                'spread'     => -2,
            ], ['effect1', 'effect2']);

$this->eael_liquid_glass_effect_box_shadow($element, 'effect3', [
                'color'      => 'rgba(255, 255, 255, 0.4)',
                'horizontal' => 1,
                'vertical'   => 1,
                'blur'       => 10,
                'spread'     => 5,
            ], ['effect1', 'effect2']);

$this->eael_liquid_glass_effect_box_shadow($element, 'effect4', [
                'color'      => '#00000040',
                'horizontal' => 0,
                'vertical'   => 9,
                'blur'       => 21,
                'spread'     => 0,
            ], ['effect1', 'effect2']);
        } else {
            $element->add_control(
                'eael_liquid_glass_border_distortion',
                [
                    'label'        => esc_html__('Enable Border Distortion', 'essential-addons-for-elementor-lite'),
                    'type'         => 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',
                    'prefix_class' => 'eael_liquid_glass_border_distortion_',
                    'condition'    => [
                        'eael_liquid_glass_effect_switch' => 'yes',
                        'eael_liquid_glass_effect'        => ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'],
                    ],
                ]
            );

$element->add_control(
                'eael_liquid_glass_border_radious_distortion',
                [
                    'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
                    'type' => Controls_Manager::DIMENSIONS,
                    'size_units' => ['px', '%', 'em', 'rem', 'custom'],
                    'default' => [
                        'top'        => 24,
                        'right'    => 24,
                        'bottom'   => 24,
                        'left'     => 24,
                        'unit'     => 'px',
                        'isLinked' => true,
                    ],
                    'selectors' => [
                        '{{WRAPPER}}.eael_liquid_glass_border_distortion_yes' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    ],
                    'condition'    => [
                        'eael_liquid_glass_effect_switch'     => 'yes',
                        'eael_liquid_glass_border_distortion' => 'yes',
                        'eael_liquid_glass_effect'            => ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'],
                    ],
                ]
            );

$element->add_control(
                'eael_liquid_glass_shadow_effect',
                [
                    'label'     => esc_html__('Shadow Effects', 'essential-addons-for-elementor-lite'),
                    'type'      => Controls_Manager::SELECT2,
                    'default'   => 'effect1',
                    'separator' => 'before',
                    'options'   => [
                        ''          => esc_html__('None', 'essential-addons-for-elementor-lite'),
                        'effect1' => esc_html__('Effect 1', 'essential-addons-for-elementor-lite'),
                        'effect2' => esc_html__('Effect 2', 'essential-addons-for-elementor-lite'),
                        'effect3' => esc_html__('Effect 3', 'essential-addons-for-elementor-lite'),
                        'effect4' => esc_html__('Effect 4', 'essential-addons-for-elementor-lite'),
                    ],
                    'prefix_class' => 'eael_liquid_glass_shadow-',
                    'condition'    => [
                        'eael_liquid_glass_effect_switch'      => 'yes',
                        'eael_liquid_glass_border_distortion!' => 'yes',
                        'eael_liquid_glass_effect'             => ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'],
                    ]
                ]
            );

$element->add_control(
                'eael_liquid_glass_shadow_inner',
                [
                    'label'     => esc_html__('Shadow Settings', 'essential-addons-for-elementor-lite'),
                    'type'      => Controls_Manager::HEADING,
                    'separator' => 'before',
                    'condition' => [
                        'eael_liquid_glass_effect_switch'      => 'yes',
                        'eael_liquid_glass_shadow_effect!'     => '',
                        'eael_liquid_glass_border_distortion!' => 'yes',
                        'eael_liquid_glass_effect'             => ['effect1', 'effect2', 'effect4', 'effect5', 'effect6'],
                    ],
                ]
            );

// Add border effect for Liquid Glass Effects
            $this->eael_liquid_glass_effect_border($element, 'effect1', '#FFFFFF1F', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6']);
            $this->eael_liquid_glass_effect_border($element, 'effect2', '#FFFFFF1F', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6']);
            $this->eael_liquid_glass_effect_border($element, 'effect3', '#FFFFFF1F', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6']);
            $this->eael_liquid_glass_effect_border($element, 'effect4', '#AAAAAA1A', ['effect1', 'effect2', 'effect4', 'effect5', 'effect6']);

$element->end_controls_section();
    }

public function before_render($element)
    {
        $settings = $element->get_settings_for_display();
    }

public function eael_liquid_glass_effect_svg_render($content, $element)
    {
        $settings = $element->get_settings_for_display();
        do_action('eael_liquid_glass_effect_svg_pro', $element, $settings);

return $content;
    }

public function eael_liquid_glass_effect_container_svg_render($element)
    {
        $settings = $element->get_settings_for_display();
        do_action('eael_liquid_glass_effect_svg_pro', $element, $settings);
    }
}