Na}{

File Content: `wgl-image-animate.php`

<?php
/**
 * This template can be overridden by copying it to `yourtheme[-child]/wgl-extensions/elementor/widgets/wgl-infobox.php`.
 */
namespace WGL_Extensions\Widgets;

defined('ABSPATH') || exit; // Abort, if called directly.


use Elementor\{
    Repeater,
    Widget_Base,
    Controls_Manager,
    Control_Media};


class WGL_Image_Animate extends Widget_Base {

    public function get_name() {
        return 'wgl-image-animate';
    }

    public function get_title() {
        return esc_html__('WGL Image Animate', 'wuko-core');
    }

    public function get_icon() {
        return 'wgl-image-animate';
    }

    public function get_keywords() {
        return ['image', 'animate'];
    }

    public function get_categories() {
        return ['wgl-modules'];
    }

    public function get_script_depends() {
        return [ 'jquery-appear',  'gsap-inertia-plugin' ];
    }


    protected function register_controls() {

        /**
         * CONTENT -> GENERAL
         */

        $this->start_controls_section(
            'section_content_general',
            [
                'label' => esc_html__('General', 'wuko-core'),
            ]
        );

        $this->add_control(
            'image_display',
            [
                'label' => esc_html__( 'Display', 'wuko-core' ),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'absolute' => esc_html__( 'Absolute', 'wuko-core' ),
                    'flex' => esc_html__( 'Flex', 'wuko-core' ),
                    'grid' => esc_html__( 'Grid', 'wuko-core' ),
                ],
                'default' => 'absolute',
            ]
        );

        // ---------------- FLEX OPTIONS ----------------
        $this->add_responsive_control(
            'flex_direction',
            [
                'label'     => esc_html__( 'Flex Direction', 'wuko-core' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'options'   => [
                    'row'            => esc_html__( 'Row', 'wuko-core' ),
                    'row-reverse'    => esc_html__( 'Row Reverse', 'wuko-core' ),
                    'column'         => esc_html__( 'Column', 'wuko-core' ),
                    'column-reverse' => esc_html__( 'Column Reverse', 'wuko-core' ),
                ],
                'default'   => 'row',
                'condition' => [
                    'image_display' => 'flex',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wgl-image-animate' => 'flex-direction: {{VALUE}};',
                ],
            ]
        );


        $this->add_responsive_control(
            'flex_align',
            [
                'label'     => esc_html__( 'Align Items', 'wuko-core' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'options'   => [
                    'flex-start' => esc_html__( 'Start', 'wuko-core' ),
                    'center'     => esc_html__( 'Center', 'wuko-core' ),
                    'flex-end'   => esc_html__( 'End', 'wuko-core' ),
                    'stretch'    => esc_html__( 'Stretch', 'wuko-core' ),
                    'baseline'   => esc_html__( 'Baseline', 'wuko-core' ),
                ],
                'default'   => 'center',
                'condition' => [
                    'image_display' => 'flex',
                    'image_display' => 'grid',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wgl-image-animate' => 'align-items: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'flex_justify',
            [
                'label'     => esc_html__( 'Justify Content', 'wuko-core' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'options'   => [
                    'flex-start'    => esc_html__( 'Start', 'wuko-core' ),
                    'center'        => esc_html__( 'Center', 'wuko-core' ),
                    'flex-end'      => esc_html__( 'End', 'wuko-core' ),
                    'space-between' => esc_html__( 'Space Between', 'wuko-core' ),
                    'space-around'  => esc_html__( 'Space Around', 'wuko-core' ),
                    'space-evenly'  => esc_html__( 'Space Evenly', 'wuko-core' ),
                ],
                'default'   => 'flex-start',
                'condition' => [
                    'image_display' => 'flex',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wgl-image-animate' => 'justify-content: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'grid_justify_items',
            [
                'label'     => esc_html__( 'Justify Items', 'wuko-core' ),
                'type'      => \Elementor\Controls_Manager::SELECT,
                'options'   => [
                    'start'   => esc_html__( 'Start', 'wuko-core' ),
                    'center'  => esc_html__( 'Center', 'wuko-core' ),
                    'end'     => esc_html__( 'End', 'wuko-core' ),
                    'stretch' => esc_html__( 'Stretch', 'wuko-core' ),
                ],
                'default'   => 'center',
                'condition' => [
                    'image_display' => 'grid',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wgl-image-animate' => 'justify-items: {{VALUE}};',
                ],
            ]
        );

        // ---------------- GRID OPTIONS ----------------
        $this->add_responsive_control(
            'grid_columns',
            [
                'label'     => esc_html__( 'Columns', 'wuko-core' ),
                'type'      => \Elementor\Controls_Manager::NUMBER,
                'min'       => 1,
                'max'       => 12,
                'default'   => 3,
                'condition' => [
                    'image_display' => 'grid',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wgl-image-animate' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
                ],
            ]
        );

        $this->add_responsive_control(
            'grid_gap',
            [
                'label'     => esc_html__( 'Gap', 'wuko-core' ),
                'type'      => \Elementor\Controls_Manager::SLIDER,
                'size_units'=> [ 'px', 'em', '%' ],
                'range'     => [
                    'px' => [ 'min' => 0, 'max' => 100 ],
                ],
                'default'   => [
                    'unit' => 'px',
                    'size' => 20,
                ],
                'condition' => [
                    'image_display' => 'grid',
                ],
                'selectors' => [
                    '{{WRAPPER}} .wgl-image-animate' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'image_link',
            [
                'label' => esc_html__('Add Image Link', 'wuko-core'),
                'type' => Controls_Manager::URL,
			    'dynamic' => ['active' => true],
                'label_block' => true,
            ]
        );

        $this->add_control(
            'apply_cursor_animation',
            [
                'label' => esc_html__('Apply Cursor Animation', 'wuko-core'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'motion_cursor_animation',
            [
                'label' => esc_html__('Motion Effect', 'wuko-core'),
                'type' => Controls_Manager::NUMBER,
			    'dynamic' => ['active' => true],
                'default' => 230,
                'condition' => ['apply_cursor_animation' => 'yes'],
                'selectors' => [
                    '{{WRAPPER}}' => '--motion-cursor-animation: {{VALUE}};',
                ],
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'thumbnail',
            [
                'label' => esc_html__('Thumbnail', 'wuko-core'),
                'type' => Controls_Manager::MEDIA,
			    'dynamic' => ['active' => true],
                'label_block' => true,
                'default' => [
                    'url' => '',
                ],
            ]
        );
        $repeater->add_responsive_control(
            'image_width',
            [
                'label' => esc_html__('Image Width', 'wuko-core'),
                'type' => Controls_Manager::SLIDER,
                'dynamic' => ['active' => true],
                'range' => [
                    'px' => ['min' => 0, 'max' => 2560 ],
                ],
                'condition' => [ 'thumbnail[url]!' => '' ],
                'size_units' => ['px', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .display-absolute {{CURRENT_ITEM}}' => 'width: {{SIZE}}{{UNIT}}; max-width: unset',
                    '{{WRAPPER}} .display-flex {{CURRENT_ITEM}} .img-layer_item' => 'width: {{SIZE}}{{UNIT}}; max-width: unset',
                    '{{WRAPPER}} .display-grid {{CURRENT_ITEM}} .img-layer_item' => 'width: {{SIZE}}{{UNIT}}; max-width: unset',
                ],
            ]
        );
        $repeater->add_responsive_control(
            'image_max_width',
            [
                'label' => esc_html__('Image Max Width', 'wuko-core'),
                'type' => Controls_Manager::SLIDER,
                'dynamic' => ['active' => true],
                'range' => [
                    'px' => ['min' => 0, 'max' => 2560 ],
                ],
                'condition' => [
                    'thumbnail[url]!' => '',
                    'image_width[size]!' => [0, ''],
                ],
                'size_units' => ['px', '%', 'custom'],
                'selectors' => [
                    '{{WRAPPER}} .display-absolute {{CURRENT_ITEM}}' => 'max-width: {{SIZE}}{{UNIT}}',
                    '{{WRAPPER}} .display-flex {{CURRENT_ITEM}} .img-layer_item' => 'max-width: {{SIZE}}{{UNIT}}',
                    '{{WRAPPER}} .display-grid {{CURRENT_ITEM}} .img-layer_item' => 'max-width: {{SIZE}}{{UNIT}}',
                ],
            ]
        );

        $repeater->add_control(
            'top_offset',
            [
                'label' => esc_html__('Top Offset', 'wuko-core'),
                'type' => Controls_Manager::NUMBER,
			    'dynamic' => ['active' => true],
                'min' => -1000,
                'max' => 1000,
				'step' => 1,
				'default' => '0',
                'description' => esc_html__('Enter offset in %, for example -100% or 100%', 'wuko-core'),
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .img-layer_item' => '--offset-top: {{VALUE}}%',
                ],
            ]
        );

        $repeater->add_control(
            'left_offset',
            [
                'label' => esc_html__('Left Offset', 'wuko-core'),
                'type' => Controls_Manager::NUMBER,
			    'dynamic' => ['active' => true],
                'min' => -1000,
                'max' => 1000,
				'step' => 1,
				'default' => '0',
                'description' => esc_html__('Enter offset in %, for example -100% or 100%', 'wuko-core'),
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .img-layer_item' => '--offset-left: {{VALUE}}%',
                ],
            ]
        );

        $repeater->add_control(
            'image_animation',
            [
                'label' => esc_html__('Layer Animation', 'wuko-core'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'none' => esc_html__('None', 'wuko-core'),
                    'up_down1' => esc_html__('Up Down 1', 'wuko-core'),
                    'up_down2' => esc_html__('Up Down 2', 'wuko-core'),
                    'up_down3' => esc_html__('Up Down 3', 'wuko-core'),
                    'left_right1' => esc_html__('Left Right 1', 'wuko-core'),
                    'left_right2' => esc_html__('Left Right 2', 'wuko-core'),
                    'left_right3' => esc_html__('Left Right 3', 'wuko-core'),
                    'move1' => esc_html__('Move 1', 'wuko-core'),
                    'move2' => esc_html__('Move 2', 'wuko-core'),
                    'move3' => esc_html__('Move 3', 'wuko-core'),
                    'move4' => esc_html__('Move 4', 'wuko-core'),
                    'move-rotate1' => esc_html__('Move with Rotate 1', 'wuko-core'),
                    'move-rotate2' => esc_html__('Move with Rotate 2', 'wuko-core'),
                    'move-rotate3' => esc_html__('Move with Rotate 3', 'wuko-core'),
                    'move-rotate4' => esc_html__('Move with Rotate 4', 'wuko-core'),
                    'scale1' => esc_html__('Scale 1', 'wuko-core'),
                    'scale2' => esc_html__('Scale 2', 'wuko-core'),
                    'scale3' => esc_html__('Scale 3', 'wuko-core'),
                    'modern1' => esc_html__('Modern 1', 'wuko-core'),
                    'modern2' => esc_html__('Modern 2', 'wuko-core'),
                    'modern3' => esc_html__('Modern 3', 'wuko-core'),
                ],
                'default' => 'none',
            ]
        );

        $repeater->add_control(
            'anim_duration',
            [
                'label' => esc_html__('Animation Duration (in sec)', 'wuko-core'),
                'type' => Controls_Manager::NUMBER,
			    'dynamic' => ['active' => true],
                'condition' => [ 'image_animation!' => ['none'] ],
				'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .img-layer_image' => 'animation-duration: {{VALUE}}s',
                ],
            ]
        );

        $repeater->add_control(
            'anim_duration_rotate',
            [
                'label' => esc_html__('Animation Duration Rotate (in sec)', 'wuko-core'),
                'type' => Controls_Manager::NUMBER,
			    'dynamic' => ['active' => true],
                'condition' => [ 'image_animation' => ['modern1', 'modern2', 'modern3'] ],
				'step' => 0.1,
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .img-layer_item__inner' => 'animation-duration: {{VALUE}}s',
                ],
            ]
        );


        $avaliable_timing_function = [
            'linear' => esc_html__( 'Default | Linear', 'wuko-core' ),
            'ease' => esc_html__( 'Ease', 'wuko-core' ),
            'ease-in' => esc_html__( 'Ease-In', 'wuko-core' ),
            'ease-out' => esc_html__( 'Ease-Out', 'wuko-core' ),
            'ease-in-out' => esc_html__( 'Ease-In-Out', 'wuko-core' ),
            'cubic-bezier(0.94, 0.87, 0.87, 1)' => esc_html__( 'WGL Easy Linear', 'wuko-core' ),
        ];
        $repeater->add_control(
            'anim_timing_func',
            [
                'label' => esc_html__('Animation Timing Func', 'wuko-core'),
                'type' => Controls_Manager::SELECT,
                'options' => $avaliable_timing_function,
                'default' => 'cubic-bezier(0.94, 0.87, 0.87, 1)',
                'condition' => [ 'image_animation!' => 'none' ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}} .img-layer_image' => 'animation-timing-function: {{VALUE}};',
                ],
            ]
        );

        $repeater->add_control(
            'image_rotate',
            [
                'label' => esc_html__('Rotate', 'wuko-core'),
                'type' => Controls_Manager::SLIDER,
                'dynamic' => ['active' => true],
                'render_type' => 'template',
                'size_units' => ['deg', 'turn'],
                'range' => [
                    'deg' => ['min' => -360, 'max' => 360],
                    'turn' => ['min' => -2, 'max' => 2, 'step' => 1],
                ],
                'default' => ['unit' => 'deg'],
                'tablet_default' => ['unit' => 'deg'],
                'mobile_default' => ['unit' => 'deg'],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => '--wgl-rotate-image: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $repeater->add_control(
            'image_order',
            [
                'label' => esc_html__('Image z-index', 'wuko-core'),
                'type' => Controls_Manager::NUMBER,
			    'dynamic' => ['active' => true],
				'step' => 1,
                'default' => '1',
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'z-index: {{VALUE}}',
                ],
            ]
        );
        $repeater->add_control(
            'image_blend',
            [
                'label' => esc_html__('Blend Mode', 'wuko-core'),
                'type' => Controls_Manager::SELECT,
                'separator' => 'before',
                'options' => [
                    '' => esc_html__('Disabled', 'wuko-core'),
                    'multiply' => esc_html__('Multiply', 'wuko-core'),
                    'screen' => esc_html__('Screen', 'wuko-core'),
                    'overlay' => esc_html__('Overlay', 'wuko-core'),
                    'darken' => esc_html__('Darken', 'wuko-core'),
                    'lighten' => esc_html__('Lighten', 'wuko-core'),
                    'color-dodge' => esc_html__('Color Dodge', 'wuko-core'),
                    'saturation' => esc_html__('Saturation', 'wuko-core'),
                    'color' => esc_html__('Color', 'wuko-core'),
                    'difference' => esc_html__('Difference', 'wuko-core'),
                    'exclusion' => esc_html__('Exclusion', 'wuko-core'),
                    'hue' => esc_html__('Hue', 'wuko-core'),
                    'luminosity' => esc_html__('Luminosity', 'wuko-core'),
                ],
                'selectors' => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}' => 'mix-blend-mode: {{VALUE}}',
                ],
            ]
        );

        $this->add_control(
            'items',
            [
                'label' => esc_html__('Layers', 'wuko-core'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
            ]
        );

        $this->end_controls_section();

    }

    protected function render() {

        wp_enqueue_script('jquery-appear', get_template_directory_uri() . '/js/jquery.appear.js', [], false, false);

        $content = '';
        $_s = $this->get_settings_for_display();

        $this->add_render_attribute('image-animate', 'class',
            [
                'wgl-image-animate',
                'display-' . esc_attr($_s['image_display']),
                !!$_s['apply_cursor_animation'] ? 'cursor-image-animation' : '',
            ]
        );


        if (!empty($_s['image_link']['url'])) {
            $link = true;
            $this->add_render_attribute('image_link', 'class', 'image_link');
            $this->add_link_attributes('image_link', $_s['image_link']);
        }else{ $link = false; }

        foreach ( $_s[ 'items' ] as $index => $item ) {

            $image_wrapper = $this->get_repeater_setting_key( 'image_wrapper', 'items' , $index );
            $this->add_render_attribute( $image_wrapper, [
                'class' => [
                    'img-layer_image-wrapper',
                    'elementor-repeater-item-'. $item['_id'],
                    esc_attr($item[ 'image_animation' ])
                ],
            ] );

            ob_start();

            ?><div <?php echo $this->get_render_attribute_string( $image_wrapper ); ?>>
                <div class="img-layer_item">
                    <div class="img-layer_item__inner">
                        <div class="img-layer_image">
                            <img src="<?php echo esc_url($item[ 'thumbnail' ][ 'url' ]); ?>" alt="<?php echo Control_Media::get_image_alt( $item[ 'thumbnail' ] ); ?>"/>
                        </div>
                    </div>
                </div>
            </div><?php

            $content .= ob_get_clean();
        }

        ?><div <?php echo $this->get_render_attribute_string( 'image-animate' ); ?>><?php
            if ( $link ) : ?><a <?php echo $this->get_render_attribute_string( 'image_link' ); ?>><?php endif;
                echo $content;
            if ( $link ) : ?></a><?php endif;
        ?></div><?php

    }

    public function wpml_support_module() {
        add_filter( 'wpml_elementor_widgets_to_translate',  [$this, 'wpml_widgets_to_translate_filter']);
    }

    public function wpml_widgets_to_translate_filter( $widgets ){
        return \WGL_Extensions\Includes\WGL_WPML_Settings::get_translate(
            $this, $widgets
        );
    }
}
Name	Size	Permission
wgl-accordion-service.php	110791 bytes	0644
wgl-background-clip-text.php	21249 bytes	0644
wgl-blog.php	54012 bytes	0644
wgl-button-physics.php	48634 bytes	0644
wgl-button-widget.php	78290 bytes	0644
wgl-carousel.php	5648 bytes	0644
wgl-cases.php	174614 bytes	0644
wgl-circuit-service.php	21621 bytes	0644
wgl-clients.php	28542 bytes	0644
wgl-combo-menu.php	17440 bytes	0644
wgl-contact-form-7.php	64476 bytes	0644
wgl-countdown.php	19442 bytes	0644
wgl-counter.php	36515 bytes	0644
wgl-demo-item.php	33716 bytes	0644
wgl-double-heading.php	71788 bytes	0644
wgl-dynamic-title.php	11086 bytes	0644
wgl-flipbox.php	154999 bytes	0644
wgl-gallery.php	53821 bytes	0644
wgl-highlight-board.php	64418 bytes	0644
wgl-horizontal-scroll.php	25075 bytes	0644
wgl-image-animate.php	20947 bytes	0644
wgl-image-comparison.php	6032 bytes	0644
wgl-image-hotspots.php	52892 bytes	0644
wgl-image-layers.php	25243 bytes	0644
wgl-infinity-carousel.php	30821 bytes	0644
wgl-info-box.php	224793 bytes	0644
wgl-instagram.php	38631 bytes	0644
wgl-link-overlay.php	2495 bytes	0644
wgl-pie-chart.php	22332 bytes	0644
wgl-portfolio.php	115147 bytes	0644
wgl-pricing-table.php	209138 bytes	0644
wgl-products-categories.php	51718 bytes	0644
wgl-products-grid.php	79654 bytes	0644
wgl-progress-bar.php	30822 bytes	0644
wgl-rotated-text.php	22605 bytes	0644
wgl-satellite-service.php	35978 bytes	0644
wgl-showcase.php	208669 bytes	0644
wgl-social-icons.php	22240 bytes	0644
wgl-steps.php	48391 bytes	0644
wgl-striped-services.php	183259 bytes	0644
wgl-tabs-horizontal.php	42144 bytes	0644
wgl-tabs.php	53431 bytes	0644
wgl-team.php	36456 bytes	0644
wgl-template.php	8246 bytes	0644
wgl-testimonials.php	61375 bytes	0644
wgl-text-editor.php	55551 bytes	0644
wgl-text-path.php	41438 bytes	0644
wgl-time-line-horizontal.php	37694 bytes	0644
wgl-time-line-vertical.php	199396 bytes	0644
wgl-toggle-accordion.php	66819 bytes	0644
wgl-video-popup.php	30956 bytes	0644
wgl-working-hours.php	10870 bytes	0644
wgl-zoom.php	24854 bytes	0644
File Content: wgl-image-animate.php

File Content: `wgl-image-animate.php`
