Na}{

File Content: `element-custom.php`

<?php 
//use Elementor\Widget_Base as Widget_Base;
use Elementor\Controls_Manager;
 
add_filter( 'pxl_register_widget_common_controls', 'plexify_register_widget_common_controls');
function plexify_register_widget_common_controls($widget){
    $params = [
        [
            'name' => 'pxl_el_effects_ss',
            'label' => esc_html__('Pxl Effects', 'plexify' ),
            'tab' => Controls_Manager::TAB_CONTENT,
            'controls' => array_merge(
                [
                    [
                        'name'      => 'pxl_animation',
                        'label'     => esc_html__('Motion Effect', 'plexify' ),
                        'type'      => Controls_Manager::SELECT,
                        'control_type' => 'responsive',
                        'options' => [
                            ''                      => esc_html__( 'Default', 'plexify' ),
                            'none'                  => esc_html__( 'None', 'plexify' ),
                            'pxl_fadeIn'            => esc_html__( 'Fade In', 'plexify' ),
                            'pxl_fadeInDown'        => esc_html__( 'Fade In Down', 'plexify' ),
                            'pxl_fadeInLeft'        => esc_html__( 'Fade In Left', 'plexify' ),
                            'pxl_fadeInRight'       => esc_html__( 'Fade In Right', 'plexify' ),
                            'pxl_fadeInUp'          => esc_html__( 'Fade In Up', 'plexify' ),
                            'pxl_rotateIn'          => esc_html__( 'Rotate In', 'plexify' ),
                            'pxl_rotateInDownLeft'  => esc_html__( 'Rotate In Down Left', 'plexify' ),
                            'pxl_rotateInDownRight' => esc_html__( 'Rotate In Down Right', 'plexify' ),
                            'pxl_rotateInUpLeft'    => esc_html__( 'Rotate In Up Left', 'plexify' ),
                            'pxl_rotateInUpRight'   => esc_html__( 'Rotate In Up Right', 'plexify' ),
                            'pxl_zoomIn'            => esc_html__( 'Zoom In', 'plexify' ),
                            'gsap'                  => esc_html__( 'Gsap', 'plexify' ),
                        ], 
                        'frontend_available' => true,
                        'default' => '',
                        'prefix_class' => 'pxl-anm%s-'
                    ],
                    [
                        'name'      => 'pxl_anm_el_class_apply',
                        'label'     => esc_html__( 'Element Class Apply', 'plexify' ),
                        'description' => esc_html__('Class that effect is applied for div inner', 'plexify' ),
                        'type'      => Controls_Manager::TEXT,
                        'label_block' => true,
                        'frontend_available' => true,
                        'prefix_class' => 'anm-assign-for-',
                        'condition' => ['pxl_animation' => 'gsap']
                    ], 
                ],
                plexify_gsap_effect_options([
                    'prefix' => 'pxl_from_',
                    'label' => esc_html__( 'From', 'plexify' ),
                    'selectors_class' => '',
                    'frontend_available' => true,
                    'condition' => ['pxl_animation' => 'gsap']
                ]),
                plexify_gsap_effect_options([
                    'prefix' => 'pxl_to_',
                    'label' => esc_html__( 'To', 'plexify' ),
                    'selectors_class' => '',
                    'frontend_available' => true,
                    'condition' => ['pxl_animation' => 'gsap']
                ]),
                [
                    [
                        'name'      => 'pxl_gsap_method',
                        'label'     => esc_html__( 'Method', 'plexify' ),
                        'type'      => Controls_Manager::SELECT,
                        'options' => [
                            '' => esc_html__( 'Default (From / To)', 'plexify' ),
                            'from' => esc_html__( 'From', 'plexify' ),
                            'to' => esc_html__( 'To', 'plexify' )
                        ],
                        'default' => '',
                        'frontend_available' => true,
                        'prefix_class' => 'gsap-method-',
                        'condition' => ['pxl_animation' => 'gsap']
                    ],
                    [
                        'name'      => 'pxl_toggle_actions',
                        'label'     => esc_html__( 'Toggle Actions', 'plexify' ),
                        'type'      => Controls_Manager::SELECT,
                        'options' => [
                            'play none none none' => 'play none none none',
                            'play reverse play reverse' => 'play reverse play reverse',
                            'play none none reverse' => 'play none none reverse',
                            'play none none reset' => 'play none none reset',
                        ],
                        'default' => 'play none none none',
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ],
                    [
                        'name'      => 'pxl_once',
                        'label'     => esc_html__( 'Once', 'plexify' ),
                        'type'      => Controls_Manager::SELECT,
                        'options' => [
                            '' => esc_html__( 'Default', 'plexify' ),
                            '1' => esc_html__( 'True', 'plexify' ),
                            '0' => esc_html__( 'False', 'plexify' )
                        ],
                        'default' => '',
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ],
                    [
                        'name'      => 'pxl_ease',
                        'label'     => esc_html__( 'Ease', 'plexify' ),
                        'type'      => Controls_Manager::SELECT,
                        'options' => [
                            '' => esc_html__( 'Default', 'plexify' ),
                            'none' => 'none',
                            'power1.in' => 'power1.in',
                            'power1.out' => 'power1.out',
                            'power1.inOut' => 'power1.inOut',
                            'power2.in' => 'power2.in',
                            'power2.out' => 'power2.out',
                            'power2.inOut' => 'power2.inOut',
                            'power3.in' => 'power3.in',
                            'power3.out' => 'power3.out',
                            'power3.inOut' => 'power3.inOut',
                            'circ.in' => 'circ.in',
                            'circ.out' => 'circ.out',
                            'circ.inOut' => 'circ.inOut',
                            'sine.in' => 'sine.in',
                            'sine.out' => 'sine.out',
                            'sine.inOut' => 'sine.inOut'
                        ],
                        'default' => '',
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ],
                    [
                        'name'      => 'pxl_scroll_start',
                        'label' => esc_html__( 'Scroll Start', 'plexify' ),
                        'description' => esc_html__('Defines when the animation will start. You can specify this as a percentage of the scroll position (top top, top center, bottom bottom, top 80%, +=100, ...)', 'plexify' ),
                        'type' => Controls_Manager::TEXT,
                        'default' => '',
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ], 
                    [
                        'name'      => 'pxl_scroll_end',
                        'label' => esc_html__( 'Scroll End', 'plexify' ),
                        'description' => esc_html__('Defines when the animation will end. Similar to start, you can specify this as a percentage of the scroll position (top top, top center, bottom bottom, bottom 20%, +=100, ...)', 'plexify' ), 
                        'type' => Controls_Manager::TEXT,
                        'default' => '',
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ], 
                    [
                        'name'      => 'pxl_animation_duration',
                        'label'     => esc_html__( 'Duration (s: 0.1, 1, 2, 3)', 'plexify' ),
                        'type'      => Controls_Manager::NUMBER,
                        'min'       => 0,
                        'frontend_available' => true,
                        'selectors' => [
                            '{{WRAPPER}}.pxl-animated' => '--pxl-animation-duration: {{VALUE}}s;',
                        ],
                        'condition' => ['pxl_animation!' => ['','none']]
                    ], 
                    [
                        'name'      => 'pxl_animation_delay',
                        'label'     => esc_html__( 'Delay (s: 0.1, 0.2, 0.3)', 'plexify' ),
                        'type'      => Controls_Manager::NUMBER,
                        'min'       => 0,
                        'frontend_available' => true,
                        'condition' => ['pxl_animation!' => ['','none']]
                    ],
                    [
                        'name'      => 'pxl_distance',
                        'label'     => esc_html__( 'Distance (px)', 'plexify' ),
                        'type'      => Controls_Manager::NUMBER,
                        // 'min'       => 0,
                        'selectors' => [
                            '{{WRAPPER}}' => '--pxl-animation-distance: {{VALUE}}px;',
                        ],
                        'condition' => ['pxl_animation' => ['pxl_fadeInUp','pxl_fadeInDown','pxl_fadeInLeft','pxl_fadeInRight']]
                    ],
                    [
                        'name'      => 'pxl_scrub',
                        'label'     => esc_html__( 'Scrub (s: -2, 0 , 1, 2, 8)', 'plexify' ),
                        'type'      => Controls_Manager::NUMBER,
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ],
                    [
                        'name'      => 'pxl_stagger',
                        'label'     => esc_html__( 'Stagger (s: 0, 0.1, 0.2, 1, 2)', 'plexify' ),
                        'type'      => Controls_Manager::NUMBER,
                        'min'       => 0,
                        'frontend_available' => true,
                        'condition' => ['pxl_animation' => 'gsap']
                    ],
                     
                ]
            )
        ]
    ];
    $params[] =[
        'name' => 'pxl_el_setting_ss',
        'label' => esc_html__('Pxl Settings', 'plexify' ),
        'tab' => Controls_Manager::TAB_CONTENT,
        'controls' => array_merge(
            plexify_position_option([
                'prefix' => 'pxl_pos_',
                'selectors_class' => '',
                'condition' => ['pxl_pos_position!' => '']
            ]),
            [
                [
                    'name'      => 'pxl_wg_custom_css',
                    'label' => esc_html__('Custom Css', 'plexify' ),
                    'type' => Controls_Manager::CODE,
                    'language' => 'css',
                    'default' => '',
                    'placeholder' => 'Enter your custom CSS here...',
                ]
            ]
        )
    ];
    
    return $params;
}


add_action( 'elementor/element/parse_css', 'pxl_add_post_csss', 10, 2 ); 
function pxl_add_post_csss( $post_css, $element ) {
    if ( $post_css instanceof Dynamic_CSS ) {
        return;
    }
    $element_settings = $element->get_settings();
    if ( empty( $element_settings['pxl_wg_custom_css'] ) ) {
        return;
    }
    $css = trim( $element_settings['pxl_wg_custom_css'] );
    if ( empty( $css ) ) {
        return;
    }
    $css = str_replace( 'selector', $post_css->get_element_unique_selector( $element ), $css );
    $post_css->get_stylesheet()->add_raw_css( $css );
}

function plexify_add_header_setting_el_container( $element, $args ) {
    
    if ( get_post_type( get_the_ID()) === 'pxl-template' && ( get_post_meta( get_the_ID(), 'template_type', true ) === 'header') ) {
        $element->start_controls_section(
            'pxl_container_settings',
            [
                'label' => esc_html__( 'Pxl Header Settings', 'plexify' ),
                'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
            ]
        );
        $element->add_control(
            'pxl_header_screen',
            [
                'label' => esc_html__( 'Header desktop / mobile', 'plexify' ),
                'type'  => \Elementor\Controls_Manager::SELECT,
                'hide_in_inner' => true,      
                'options'      => array(
                    ''      => esc_html__( 'Default', 'plexify' ),
                    'desktop'      => esc_html__( 'Desktop', 'plexify' ),
                    'mobile' => esc_html__( 'Mobile', 'plexify' ),
                ),
                'default'      => '',
            ]
        );
        $element->add_control(
            'pxl_header_type',
            [
                'label' => esc_html__( 'Header Type', 'plexify' ),
                'type'  => \Elementor\Controls_Manager::SELECT,
                'hide_in_inner' => true,
                'options'      => array(
                    ''          => esc_html__( 'Select Type', 'plexify' ),
                    'main-sticky'       => esc_html__( 'Header Main & Sticky', 'plexify' ),
                    'sticky'      => esc_html__( 'Header Sticky', 'plexify' ),
                    'transparent' => esc_html__( 'Header Transparent', 'plexify' ),
                    'transparent-sticky' => esc_html__( 'Transparent & Sticky', 'plexify' ),
                    'fixed-top' => esc_html__( 'Header Fixed Top', 'plexify' ),
                ),
                'default'      => '',
                'condition' => ['pxl_header_screen' => 'desktop']
            ]
        );
        $element->add_control(
            'pxl_header_sticky_effect',
            [
                'label' => esc_html__( 'Header Sticky Effect', 'plexify' ),
                'type'  => \Elementor\Controls_Manager::SELECT,
                'hide_in_inner' => true,
                'options'      => array(
                    ''  => esc_html__('Default', 'plexify'),
                    'transform-y'  => esc_html__('Transform Y', 'plexify'),
                    'rotate-x'     => esc_html__('Rotate X', 'plexify'), 
                ),
                'default'      => '',
                'condition' => [
                    'pxl_header_type' => 'sticky'
                ]
            ]
        );
        $element->add_control(
            'pxl_header_mobile_type',
            [
                'label' => esc_html__( 'Header Type', 'plexify' ),
                'type'  => \Elementor\Controls_Manager::SELECT,
                'hide_in_inner' => true,
                'options'      => array(
                    ''          => esc_html__( 'Select Type', 'plexify' ),
                    'main-sticky'       => esc_html__( 'Main & Sticky', 'plexify' ),
                    'sticky'      => esc_html__( 'Sticky', 'plexify' ),
                    'transparent' => esc_html__( 'Transparent', 'plexify' ),
                    'transparent-sticky' => esc_html__( 'Transparent & Sticky', 'plexify' ),
                    'fixed-top'          => esc_html__( 'Header Fixed Top', 'plexify' ),
                ),
                'default'      => '',
                'condition' => ['pxl_header_screen' => 'mobile']
            ]
        );
        $element->add_control(
            'pxl_header_mobile_sticky_effect',
            [
                'label' => esc_html__( 'Header Sticky Effect', 'plexify' ),
                'type'  => \Elementor\Controls_Manager::SELECT,
                'hide_in_inner' => true,
                'options'      => array(
                    ''  => esc_html__('Default', 'plexify'),
                    'transform-y'  => esc_html__('Transform Y', 'plexify'),
                    'rotate-x'     => esc_html__('Rotate X', 'plexify'), 
                ),
                'default'      => '',
                'condition' => [
                    'pxl_header_mobile_type' => 'sticky'
                ]
            ]
        );
        $element->end_controls_section();
    }
    
}

add_action( 'elementor/element/container/section_layout_additional_options/after_section_end', 'plexify_add_header_setting_el_container', 10, 3 );

//widget add control
add_action('elementor/element/common/_section_style/after_section_end', 'plexify_add_custom_common_controls');
function plexify_add_custom_common_controls(\Elementor\Element_Base $element){
    $element->start_controls_section(
        'section_pxl_widget_el',
        [
            'label' => esc_html__( 'plexify Settings', 'plexify' ),
            'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
        ]
    );
      
    $element->add_responsive_control(
        'widget_width',
        [
            'label' => esc_html__('Widget Width', 'plexify' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'control_type' => 'responsive',
            'default' => [
                'unit' => '%',
            ],
            'tablet_default' => [
                'unit' => '%',
            ],
            'mobile_default' => [
                'unit' => '%',
            ],
            'size_units' => [ '%', 'px', 'vw' ],
            'range' => [
                '%' => [
                    'min' => 1,
                    'max' => 100,
                ],
                'px' => [
                    'min' => 1,
                    'max' => 1920,
                ],
                'vw' => [
                    'min' => 1,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}} .elementor-widget-container, {{WRAPPER}} .elementor-widget-container > div' => 'width: {{SIZE}}{{UNIT}};',
            ]
        ]
    );
    $element->add_responsive_control(
        'widget_height',
        [
            'label' => esc_html__('Widget Height', 'plexify' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'control_type' => 'responsive',
            'default' => [
                'unit' => '%',
            ],
            'tablet_default' => [
                'unit' => '%',
            ],
            'mobile_default' => [
                'unit' => '%',
            ],
            'size_units' => [ '%', 'px', 'vw' ],
            'range' => [
                '%' => [
                    'min' => 1,
                    'max' => 100,
                ],
                'px' => [
                    'min' => 1,
                    'max' => 1000,
                ],
                'vh' => [
                    'min' => 1,
                    'max' => 100,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}}, {{WRAPPER}} .elementor-widget-container, {{WRAPPER}} .elementor-widget-container > div' => 'height: {{SIZE}}{{UNIT}};',
            ]
        ]
    );
    $element->add_control(
        'pxl_widget_el_border_animated',
        [
            'label' => esc_html__('Border Animated', 'plexify'),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => esc_html__( 'Yes', 'plexify' ),
            'label_off' => esc_html__( 'No', 'plexify' ),
            'return_value' => 'yes',
            'default' => 'no',
            'separator' => 'after',
        ]
    );
    $element->add_control(
        'pxl_widget_el_parallax',
        [
            'label' => esc_html__( 'Parallax Type', 'plexify' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                ''        => esc_html__( 'None', 'plexify' ),
                'y'       => esc_html__( 'Transform Y', 'plexify' ),
                'x'       => esc_html__( 'Transform X', 'plexify' ),
                'z'       => esc_html__( 'Transform Z', 'plexify' ),
                'rotateX' => esc_html__( 'RotateX', 'plexify' ),
                'rotateY' => esc_html__( 'RotateY', 'plexify' ),
                'rotateZ' => esc_html__( 'RotateZ', 'plexify' ),
                'scaleX'  => esc_html__( 'ScaleX', 'plexify' ),
                'scaleY'  => esc_html__( 'ScaleY', 'plexify' ),
                'scaleZ'  => esc_html__( 'ScaleZ', 'plexify' ),
                'scale'   => esc_html__( 'Scale', 'plexify' ),
            ],
        ]
    ); 
    $element->add_control(
        'pxl_widget_el_parallax_value',
        [
            'name' => 'parallax_value',
            'label' => esc_html__('Value', 'plexify' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => '',
            'condition' => [ 'pxl_widget_el_parallax!' => '']  
        ]
    ); 
    $element->add_responsive_control(
        'pxl_widget_align',
        [
            'label' => esc_html__('Alignment', 'plexify' ),
            'type' => \Elementor\Controls_Manager::CHOOSE,
            'options' => [
                'start' => [
                    'title' => esc_html__( 'Start', 'plexify' ),
                    'icon' => 'eicon-text-align-left',
                ],
                'center' => [
                    'title' => esc_html__( 'Center', 'plexify' ),
                    'icon' => 'eicon-text-align-center',
                ],
                'end' => [
                    'title' => esc_html__( 'End', 'plexify' ),
                    'icon' => 'eicon-text-align-right',
                ]
            ],
            'default' => '',
            'selectors' => [
                '{{WRAPPER}} .elementor-widget-container' => 'display:flex; flex-wrap:wrap; justify-content: {{VALUE}};'
            ],
        ]
    );
    $element->add_control(
        'pxl_widget_overflow',
        [
            'label' => esc_html__( 'Overflow', 'plexify' ),
            'type' => \Elementor\Controls_Manager::SELECT,
            'options' => [
                ''      => esc_html__( 'Default', 'plexify' ),
                'visible'      => esc_html__( 'Visible', 'plexify' ),
                'hidden'       => esc_html__( 'Hidden', 'plexify' ),
            ],
            'default' => '',
            'selectors' => [
                '{{WRAPPER}} .elementor-widget-container' => 'overflow: {{VALUE}};',
            ],
            'separator' => 'after'
        ]
    );
    $element->end_controls_section();
 
}

//container render
add_action( 'elementor/element/after_add_attributes', 'plexify_custom_el_attributes', 10, 1 );
function plexify_custom_el_attributes($el){
    
    $settings = $el->get_settings();
     
    if( 'container' == $el->get_type() ) {
        if ( isset( $settings['pxl_header_screen'] ) && !empty($settings['pxl_header_screen'] ) ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-header-'.$settings['pxl_header_screen']);
        }
        if ( isset( $settings['pxl_header_type'] ) && !empty($settings['pxl_header_type'] ) ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-header-'.$settings['pxl_header_type']);
        }
        if ( isset( $settings['pxl_header_sticky_effect'] ) && !empty($settings['pxl_header_sticky_effect'] ) ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-header-'.$settings['pxl_header_sticky_effect']);
        }
        if ( isset( $settings['pxl_header_mobile_type'] ) && !empty($settings['pxl_header_mobile_type'] ) ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-header-mobile-'.$settings['pxl_header_mobile_type']);
        }
        if ( isset( $settings['pxl_header_mobile_sticky_effect'] ) && !empty($settings['pxl_header_mobile_sticky_effect'] ) ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-header-mobile-'.$settings['pxl_header_mobile_sticky_effect']);
        }
       
    }

    $pxl_animation = ! empty( $settings['pxl_animation'] );
    $has_animation = $pxl_animation && 'none' !== $settings['pxl_animation'] && '' !== $settings['pxl_animation'] && 'gsap' !== $settings['pxl_animation'];
    if ( $has_animation ) {
        $is_static_render_mode = \Elementor\Plugin::$instance->frontend->is_static_render_mode();

        if ( ! $is_static_render_mode ) {
            $el->add_render_attribute( '_wrapper', 'class', 'pxl-invisible' );
             
        }
    }
       
}
 
 add_filter( 'pxl-custom-section/before-render', 'plexify_custom_section_before_render', 10, 3 );
function plexify_custom_section_before_render($html, $settings, $el){  
    if( isset($settings['pxl_section_border_animated']) && isset($settings['border_width']['unit']) && $settings['pxl_section_border_animated'] == 'yes' ){
        $unit = $settings['border_width']['unit'];
        $border_num = 0;
        $bd_top_style = 'style="border-width: '.$settings['border_width']['top'].$unit.' 0 0 0; border-style: '.$settings['border_border'].'; border-color: '.$settings['border_color'].';"';
        $bd_right_style = 'style="border-width: 0 '.$settings['border_width']['right'].$unit.' 0 0; border-style: '.$settings['border_border'].'; border-color: '.$settings['border_color'].';"';
        $bd_bottom_style = 'style="border-width: 0 0 '.$settings['border_width']['bottom'].$unit.' 0; border-style: '.$settings['border_border'].'; border-color: '.$settings['border_color'].';"';
        $bd_left_style = 'style="border-width: 0 0 0 '.$settings['border_width']['left'].$unit.'; border-style: '.$settings['border_border'].'; border-color: '.$settings['border_color'].';"';

        if( (int)$settings['border_width']['top'] > 0) $border_num++;
        if( (int)$settings['border_width']['right'] > 0) $border_num++;
        if( (int)$settings['border_width']['bottom'] > 0) $border_num++;
        if( (int)$settings['border_width']['left'] > 0) $border_num++;
        
        $html = '<div class="pxl-border-animated num-'.$border_num.'">
        <div class="pxl-border-anm bt w-100" '.$bd_top_style.'></div>
        <div class="pxl-border-anm br h-100" '.$bd_right_style.'></div>
        <div class="pxl-border-anm bb w-100" '.$bd_bottom_style.'></div>
        <div class="pxl-border-anm bl h-100" '.$bd_left_style.'></div>
        </div>';
    }
    
    return $html;
}


 

//widget render
add_action('elementor/widget/before_render_content','plexify_custom_widget_el_before_render', 10, 1 );
function plexify_custom_widget_el_before_render($el){  
    $settings = $el->get_settings();
    if(!empty($settings['pxl_widget_el_parallax']) && !empty($settings['pxl_widget_el_parallax_value'])){
        $parallax_settings = json_encode([
            $settings['pxl_widget_el_parallax'] => $settings['pxl_widget_el_parallax_value']
        ]);
        $el->add_render_attribute( '_wrapper', 'data-parallax', $parallax_settings );
    }
}
 
add_filter('elementor/widget/render_content','plexify_custom_widget_el_render_content', 10, 2 );
function plexify_custom_widget_el_render_content($widget_content, $el){  
    $settings = $el->get_settings();
    if( isset($settings['pxl_widget_el_border_animated']) && $settings['pxl_widget_el_border_animated'] == 'yes' ){

        $el->add_render_attribute( '_wrapper', 'class', 'pxl-border-wg-anm');

        $breakpoints = ['laptop','tablet_extra','tablet','mobile_extra','mobile'];
         
        $unit = $settings['_border_width']['unit'];
        $border_num = 0;

        $bt_width = $settings['_border_width']['top'];
        $br_width = $settings['_border_width']['right'];
        $bb_width = $settings['_border_width']['bottom'];
        $bl_width = $settings['_border_width']['left'];
        foreach ($breakpoints as $v) {
            if( isset($settings['_border_width_'.$v]['top']) && (int)$settings['_border_width_'.$v]['top'] > 0 )
                $bt_width = $settings['_border_width_'.$v]['top'];
            if( isset($settings['_border_width_'.$v]['right']) && (int)$settings['_border_width_'.$v]['right'] > 0 )
                $br_width = $settings['_border_width_'.$v]['right'];
            if( isset($settings['_border_width_'.$v]['bottom']) && (int)$settings['_border_width_'.$v]['bottom'] > 0 )
                $bb_width = $settings['_border_width_'.$v]['bottom'];
            if( isset($settings['_border_width_'.$v]['left']) && (int)$settings['_border_width_'.$v]['left'] > 0 )
                $bl_width = $settings['_border_width_'.$v]['left'];
        }

        $bd_top_style = 'style="--bd-width: '.$bt_width.$unit.' 0 0 0; border-style: '.$settings['_border_border'].'; border-color: '.$settings['_border_color'].';"';
        $bd_right_style = 'style="--bd-width: 0 '.$br_width.$unit.' 0 0; border-style: '.$settings['_border_border'].'; border-color: '.$settings['_border_color'].';"';
        $bd_bottom_style = 'style="--bd-width: 0 0 '.$bb_width.$unit.' 0; border-style: '.$settings['_border_border'].'; border-color: '.$settings['_border_color'].';"';
        $bd_left_style = 'style="--bd-width: 0 0 0 '.$bl_width.$unit.'; border-style: '.$settings['_border_border'].'; border-color: '.$settings['_border_color'].';"';
  
         
        $bd_top_w = $bd_right_w = $bd_bottom_w = $bd_left_w = '';

        if( isset($settings['_border_width']['top'])){
            if( $settings['_border_width']['top'] == '0' )
                $bd_top_w.= ' bw-no';
            if( (int)$settings['_border_width']['top'] > 0 )
                $bd_top_w.= ' bw-yes';
        }
        if( isset($settings['_border_width']['right'])){
            if( $settings['_border_width']['right'] == '0' )
                $bd_right_w.= ' bw-no';
            if( (int)$settings['_border_width']['right'] > 0 )
                $bd_right_w.= ' bw-yes';
        }
        if( isset($settings['_border_width']['bottom'])){
            if( $settings['_border_width']['bottom'] == '0' )
                $bd_bottom_w.= ' bw-no';
            if( (int)$settings['_border_width']['bottom'] > 0 )
                $bd_bottom_w.= ' bw-yes';
        }
        if( isset($settings['_border_width']['left'])){
            if( $settings['_border_width']['left'] == '0' )
                $bd_left_w.= ' bw-no';
            if( (int)$settings['_border_width']['left'] > 0 )
                $bd_left_w.= ' bw-yes';
        }    
 

        foreach ($breakpoints as $v) {

            if( isset($settings['_border_width_'.$v]['top']) ){
                if( $settings['_border_width_'.$v]['top'] == '0' )
                    $bd_top_w.= ' bw-'.$v.'-no';
                if( (int)$settings['_border_width_'.$v]['top'] > 0 )
                    $bd_top_w.= ' bw-'.$v.'-yes';
            }

            if( isset($settings['_border_width_'.$v]['right']) ){
                if( $settings['_border_width_'.$v]['right'] == '0' )
                    $bd_right_w.= ' bw-'.$v.'-no';
                if( (int)$settings['_border_width_'.$v]['right'] > 0 )
                    $bd_right_w.= ' bw-'.$v.'-yes';
            }
 

            if( isset($settings['_border_width_'.$v]['bottom']) ){
                if( $settings['_border_width_'.$v]['bottom'] == '0' )
                    $bd_bottom_w.= ' bw-'.$v.'-no';
                if( (int)$settings['_border_width_'.$v]['bottom'] > 0 )
                    $bd_bottom_w.= ' bw-'.$v.'-yes';
            }
 
            if( isset($settings['_border_width_'.$v]['left']) ){
                if( $settings['_border_width_'.$v]['left'] == '0' )
                    $bd_left_w.= ' bw-'.$v.'-no';
                if( (int)$settings['_border_width_'.$v]['left'] > 0 )
                    $bd_left_w.= ' bw-'.$v.'-yes';
            }
  
        }

        if( (int)$settings['_border_width']['top'] > 0) $border_num++;
        if( (int)$settings['_border_width']['right'] > 0) $border_num++;
        if( (int)$settings['_border_width']['bottom'] > 0) $border_num++;
        if( (int)$settings['_border_width']['left'] > 0) $border_num++;

        $html = '<div class="pxl-border-animated num-'.$border_num.'">
        <div class="pxl-border-anm bt w-100 '.$bd_top_w.'" '.$bd_top_style.'></div>
        <div class="pxl-border-anm br h-100 '.$bd_right_w.'" '.$bd_right_style.'></div>
        <div class="pxl-border-anm bb w-100 '.$bd_bottom_w.'" '.$bd_bottom_style.'></div>
        <div class="pxl-border-anm bl h-100 '.$bd_left_w.'" '.$bd_left_style.'></div>
        </div>';
        return $html.$widget_content;
    }else{
        return $widget_content;
    }
}


/*
    General Custom Options
*/
add_action( 'elementor/element/container/section_layout/after_section_end', 'plexify_element_custom_options', 1, 1 ); 
function plexify_element_custom_options( \Elementor\Element_Base $el ) {
    $el->start_controls_section(
        'el_custom_opts',
        [
            'label' => esc_html__( 'Plexify Custom Options', 'plexify' ),
            'tab' => \Elementor\Controls_Manager::TAB_LAYOUT,
        ]
    );
    // 
    $el->add_responsive_control(
        'el_max_w',
        [
            'label' => esc_html__('Max Width', 'plexify' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%', 'custom' ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 1000,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}}' => 'max-width: {{SIZE}}{{UNIT}};',
            ],
        ]
    );

    $el->add_responsive_control(
        'el_min_w',
        [
            'label' => esc_html__('Min Width', 'plexify' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%', 'custom' ],
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 1000,
                ],
            ],
            'selectors' => [
                '{{WRAPPER}}' => 'min-width: {{SIZE}}{{UNIT}};',
            ],
        ]
    );
    $el->end_controls_section();
}
Name	Size	Permission
assets	---	0755
register	---	0755
templates	---	0755
element-custom.php	35310 bytes	0644
element-functions.php	83396 bytes	0644
element-templates.php	31721 bytes	0644
File Content: element-custom.php

File Content: `element-custom.php`
