Edit file File name : lottie.php Content :<?php namespace ElementorPro\Modules\Lottie\Widgets; use Elementor\Controls_Manager; use Elementor\Core\Kits\Documents\Tabs\Global_Colors; use Elementor\Core\Kits\Documents\Tabs\Global_Typography; use Elementor\Group_Control_Css_Filter; use Elementor\Group_Control_Typography; use ElementorPro\Base\Base_Widget; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } class Lottie extends Base_Widget { /** * Get element name. * * Retrieve the element name. * * @return string The name. * @since 2.7.0 * @access public * */ public function get_name() { return 'lottie'; } public function get_title() { return esc_html__( 'Lottie', 'elementor-pro' ); } public function get_script_depends() { return [ 'lottie' ]; } public function get_style_depends() { return [ 'e-lottie' ]; } public function get_icon() { return 'eicon-lottie'; } protected function register_controls() { $this->start_controls_section( 'lottie', [ 'label' => esc_html__( 'Lottie', 'elementor-pro' ), ] ); $this->add_control( 'source', [ 'label' => esc_html__( 'Source', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'media_file', 'options' => [ 'media_file' => esc_html__( 'Media File', 'elementor-pro' ), 'external_url' => esc_html__( 'External URL', 'elementor-pro' ), ], 'frontend_available' => true, ] ); $this->add_control( 'source_external_url', [ 'label' => esc_html__( 'External URL', 'elementor-pro' ), 'type' => Controls_Manager::URL, 'condition' => [ 'source' => 'external_url', ], 'dynamic' => [ 'active' => true, ], 'placeholder' => esc_html__( 'Enter your URL', 'elementor-pro' ), 'frontend_available' => true, ] ); $this->add_control( 'source_json', [ 'label' => esc_html__( 'Upload JSON File', 'elementor-pro' ), 'type' => Controls_Manager::MEDIA, 'media_types' => [ 'application/json' ], 'frontend_available' => true, 'condition' => [ 'source' => 'media_file', ], ] ); $this->add_responsive_control( 'align', [ 'label' => esc_html__( 'Alignment', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'elementor-pro' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor-pro' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'elementor-pro' ), 'icon' => 'eicon-text-align-right', ], ], 'prefix_class' => 'elementor%s-align-', 'default' => 'center', ] ); $this->add_control( 'caption_source', [ 'label' => esc_html__( 'Caption', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => [ 'none' => esc_html__( 'None', 'elementor-pro' ), 'title' => esc_html__( 'Title', 'elementor-pro' ), 'caption' => esc_html__( 'Caption', 'elementor-pro' ), 'custom' => esc_html__( 'Custom', 'elementor-pro' ), ], 'condition' => [ 'source!' => 'external_url', 'source_json[url]!' => '', ], 'frontend_available' => true, ] ); $this->add_control( 'caption', [ 'label' => esc_html__( 'Custom Caption', 'elementor-pro' ), 'type' => Controls_Manager::TEXT, 'render_type' => 'none', 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'caption_source', 'value' => 'custom', ], [ 'name' => 'source', 'value' => 'external_url', ], ], ], 'dynamic' => [ 'active' => true, ], 'frontend_available' => true, ] ); $this->add_control( 'link_to', [ 'label' => esc_html__( 'Link', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'render_type' => 'none', 'default' => 'none', 'options' => [ 'none' => esc_html__( 'None', 'elementor-pro' ), 'custom' => esc_html__( 'Custom URL', 'elementor-pro' ), ], 'frontend_available' => true, ] ); $this->add_control( 'custom_link', [ 'label' => esc_html__( 'Link', 'elementor-pro' ), 'type' => Controls_Manager::URL, 'render_type' => 'none', 'placeholder' => esc_html__( 'Enter your URL', 'elementor-pro' ), 'condition' => [ 'link_to' => 'custom', ], 'dynamic' => [ 'active' => true, ], 'default' => [ 'url' => '', ], 'show_label' => false, 'frontend_available' => true, ] ); // lottie. $this->end_controls_section(); $this->start_controls_section( 'settings', [ 'label' => esc_html__( 'Settings', 'elementor-pro' ), ] ); $this->add_control( 'trigger', [ 'label' => esc_html__( 'Trigger', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'arriving_to_viewport', 'options' => [ 'arriving_to_viewport' => esc_html__( 'Viewport', 'elementor-pro' ), 'on_click' => esc_html__( 'On Click', 'elementor-pro' ), 'on_hover' => esc_html__( 'On Hover', 'elementor-pro' ), 'bind_to_scroll' => esc_html__( 'Scroll', 'elementor-pro' ), 'none' => esc_html__( 'None', 'elementor-pro' ), ], 'frontend_available' => true, ] ); $this->add_control( 'viewport', [ 'label' => esc_html__( 'Viewport', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'render_type' => 'none', 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'trigger', 'operator' => '===', 'value' => 'arriving_to_viewport', ], [ 'name' => 'trigger', 'operator' => '===', 'value' => 'bind_to_scroll', ], ], ], 'default' => [ 'sizes' => [ 'start' => 0, 'end' => 100, ], 'unit' => '%', ], 'labels' => [ __( 'Bottom', 'elementor-pro' ), __( 'Top', 'elementor-pro' ), ], 'scales' => 1, 'handles' => 'range', 'frontend_available' => true, ] ); $this->add_control( 'effects_relative_to', [ 'label' => esc_html__( 'Effects Relative To', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'render_type' => 'none', 'condition' => [ 'trigger' => 'bind_to_scroll', ], 'default' => 'viewport', 'options' => [ 'viewport' => esc_html__( 'Viewport', 'elementor-pro' ), 'page' => esc_html__( 'Entire Page', 'elementor-pro' ), ], 'frontend_available' => true, ] ); $this->add_control( 'loop', [ 'label' => esc_html__( 'Loop', 'elementor-pro' ), 'type' => Controls_Manager::SWITCHER, 'render_type' => 'none', 'condition' => [ 'trigger!' => 'bind_to_scroll', ], 'return_value' => 'yes', 'default' => '', 'frontend_available' => true, ] ); $this->add_control( 'number_of_times', [ 'label' => esc_html__( 'Times', 'elementor-pro' ), 'type' => Controls_Manager::NUMBER, 'render_type' => 'none', 'conditions' => [ 'relation' => 'and', 'terms' => [ [ 'name' => 'trigger', 'operator' => '!==', 'value' => 'bind_to_scroll', ], [ 'name' => 'loop', 'operator' => '===', 'value' => 'yes', ], ], ], 'min' => 0, 'step' => 1, 'frontend_available' => true, ] ); $this->add_control( 'link_timeout', [ 'label' => esc_html__( 'Link Timeout', 'elementor-pro' ) . ' (ms)', 'type' => Controls_Manager::NUMBER, 'render_type' => 'none', 'conditions' => [ 'relation' => 'and', 'terms' => [ [ 'name' => 'link_to', 'operator' => '===', 'value' => 'custom', ], [ 'name' => 'trigger', 'operator' => '===', 'value' => 'on_click', ], [ 'name' => 'custom_link[url]', 'operator' => '!==', 'value' => '', ], ], ], 'description' => esc_html__( 'Redirect to link after selected timeout', 'elementor-pro' ), 'min' => 0, 'max' => 5000, 'step' => 1, 'frontend_available' => true, ] ); $this->add_control( 'on_hover_out', [ 'label' => esc_html__( 'On Hover Out', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'render_type' => 'none', 'condition' => [ 'trigger' => 'on_hover', ], 'default' => 'default', 'options' => [ 'default' => esc_html__( 'Default', 'elementor-pro' ), 'reverse' => esc_html__( 'Reverse', 'elementor-pro' ), 'pause' => esc_html__( 'Pause', 'elementor-pro' ), ], 'frontend_available' => true, ] ); $this->add_control( 'hover_area', [ 'label' => esc_html__( 'Hover Area', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'render_type' => 'none', 'condition' => [ 'trigger' => 'on_hover', ], 'default' => 'animation', 'options' => [ 'animation' => esc_html__( 'Animation', 'elementor-pro' ), 'column' => esc_html__( 'Column', 'elementor-pro' ), 'section' => esc_html__( 'Section', 'elementor-pro' ), 'container' => esc_html__( 'Container', 'elementor-pro' ), ], 'frontend_available' => true, ] ); $this->add_control( 'play_speed', [ 'label' => esc_html__( 'Play Speed', 'elementor-pro' ) . ' (x)', 'type' => Controls_Manager::SLIDER, 'render_type' => 'none', 'condition' => [ 'trigger!' => 'bind_to_scroll', ], 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'min' => 0.1, 'max' => 5, 'step' => 0.1, ], ], 'size_units' => [ 'px' ], 'dynamic' => [ 'active' => true, ], 'frontend_available' => true, ] ); $this->add_control( 'start_point', [ 'label' => esc_html__( 'Start Point', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'frontend_available' => true, 'render_type' => 'none', 'default' => [ 'size' => 0, 'unit' => '%', ], 'size_units' => [ '%' ], ] ); $this->add_control( 'end_point', [ 'label' => esc_html__( 'End Point', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'frontend_available' => true, 'render_type' => 'none', 'default' => [ 'size' => 100, 'unit' => '%', ], 'size_units' => [ '%' ], ] ); $this->add_control( 'reverse_animation', [ 'label' => esc_html__( 'Reverse', 'elementor-pro' ), 'type' => Controls_Manager::SWITCHER, 'render_type' => 'none', 'conditions' => [ 'relation' => 'and', 'terms' => [ [ 'name' => 'trigger', 'operator' => '!==', 'value' => 'bind_to_scroll', ], [ 'name' => 'trigger', 'operator' => '!==', 'value' => 'on_hover', ], ], ], 'return_value' => 'yes', 'default' => '', 'frontend_available' => true, ] ); $this->add_control( 'renderer', [ 'label' => esc_html__( 'Renderer', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'svg', 'options' => [ 'svg' => esc_html__( 'SVG', 'elementor-pro' ), 'canvas' => esc_html__( 'Canvas', 'elementor-pro' ), ], 'separator' => 'before', 'frontend_available' => true, ] ); $this->add_control( 'lazyload', [ 'label' => esc_html__( 'Lazy Load', 'elementor-pro' ), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => '', 'frontend_available' => true, ] ); // Settings. $this->end_controls_section(); $this->start_controls_section( 'style', [ 'label' => esc_html__( 'Lottie', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'width', [ 'label' => esc_html__( 'Width', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'default' => [ 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ 'unit' => '%', ], 'range' => [ '%' => [ 'min' => 1, 'max' => 100, ], 'px' => [ 'min' => 1, 'max' => 1000, ], 'em' => [ 'max' => 100, ], 'rem' => [ 'max' => 100, ], 'vw' => [ 'min' => 1, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}}' => '--lottie-container-width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'space', [ 'label' => esc_html__( 'Max Width', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'default' => [ 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ 'unit' => '%', ], 'range' => [ '%' => [ 'min' => 1, 'max' => 100, ], 'px' => [ 'min' => 1, 'max' => 1000, ], 'em' => [ 'max' => 100, ], 'rem' => [ 'max' => 100, ], 'vw' => [ 'min' => 1, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}}' => '--lottie-container-max-width: {{SIZE}}{{UNIT}};', ], 'separator' => 'after', ] ); $this->start_controls_tabs( 'image_effects' ); $this->start_controls_tab( 'normal', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'opacity', [ 'label' => esc_html__( 'Opacity', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}}' => '--lottie-container-opacity: {{SIZE}};', ], ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters', 'selector' => '{{WRAPPER}} .e-lottie__container', ] ); // Normal. $this->end_controls_tab(); $this->start_controls_tab( 'hover', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ), ] ); $this->add_control( 'opacity_hover', [ 'label' => esc_html__( 'Opacity', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}}' => '--lottie-container-opacity-hover: {{SIZE}};', ], ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters_hover', 'selector' => '{{WRAPPER}} .e-lottie__container:hover', ] ); $this->add_control( 'background_hover_transition', [ 'label' => esc_html__( 'Transition Duration', 'elementor-pro' ) . ' (s)', 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 3, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}}' => '--lottie-container-transition-duration-hover: {{SIZE}}s', ], ] ); // Hover. $this->end_controls_tab(); // Image effects. $this->end_controls_tabs(); // lottie style. $this->end_controls_section(); $this->start_controls_section( 'section_style_caption', [ 'label' => esc_html__( 'Caption', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'caption_source!' => 'none', ], ] ); $this->add_control( 'caption_align', [ 'label' => esc_html__( 'Alignment', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'elementor-pro' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor-pro' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'elementor-pro' ), 'icon' => 'eicon-text-align-right', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}}' => '--caption-text-align: {{VALUE}};', ], ] ); $this->add_control( 'text_color', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}}' => '--caption-color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'caption_typography', 'selector' => '{{WRAPPER}} .e-lottie__caption', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], ] ); $this->add_responsive_control( 'caption_space', [ 'label' => esc_html__( 'Spacing', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'max' => 10, ], 'rem' => [ 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}}' => '--caption-margin-top: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); } private function get_caption( $settings ) { $is_media_file_caption = $this->is_media_file_caption( $settings ); $is_external_url_caption = $this->is_external_url_caption( $settings ); if ( ( $is_media_file_caption && 'custom' === $settings['caption_source'] ) || $is_external_url_caption ) { return $settings['caption']; } else if ( 'caption' === $settings['caption_source'] ) { return wp_get_attachment_caption( $settings['source_json']['id'] ); } else if ( 'title' === $settings['caption_source'] ) { return get_the_title( $settings['source_json']['id'] ); } return ''; } private function is_media_file_caption( $settings ) { return 'media_file' === $settings['source'] && 'none' !== $settings['caption_source']; } private function is_external_url_caption( $settings ) { return 'external_url' === $settings['source'] && '' !== $settings['caption']; } protected function render() { $settings = $this->get_settings_for_display(); $caption = $this->get_caption( $settings ); $widget_caption = $caption ? '<p class="e-lottie__caption"> ' . esc_html( $caption ) . '</p>' : ''; $widget_container = '<div class="e-lottie__container"><div class="e-lottie__animation"></div>' . $widget_caption . '</div>'; if ( ! empty( $settings['custom_link']['url'] ) && 'custom' === $settings['link_to'] ) { $this->add_link_attributes( 'url', $settings['custom_link'] ); $widget_container = sprintf( '<a class="e-lottie__container__link" %1$s>%2$s</a>', $this->get_render_attribute_string( 'url' ), $widget_container ); } // PHPCS - XSS ok. Everything that should be escaped in the way is escaped. echo $widget_container; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } protected function content_template() { ?> <# var ensureAttachmentData = function( id, type ) { if ( 'caption' === type || 'title' === type ) { if ( 'undefined' === typeof wp.media.attachment( id ).get( type ) ) { wp.media.attachment( id ).fetch().then( function( data ) { view.render(); } ); } } }; var getAttachmentData = function( id, type ) { if ( id && ( 'caption' === type || 'title' === type ) ) { ensureAttachmentData( id, type ); return wp.media.attachment( id ).get( type ); } return ''; }; var getCaption = function() { if ( ( isMediaFileCaption() && 'custom' === settings.caption_source ) || isExternalUrlCaption() ) { return settings.caption; } else if ( 'caption' === settings.caption_source || 'title' === settings.caption_source ) { return getAttachmentData( settings.source_json.id, settings.caption_source ); } return ''; }; var isMediaFileCaption = function() { return 'media_file' === settings.source && 'none' !== settings.caption_source; }; var isExternalUrlCaption = function() { return 'external_url' === settings.source && '' !== settings.caption; }; var widget_caption = getCaption() ? '<p class="e-lottie__caption">' + getCaption() + '</p>' : ''; var widget_container = '<div class="e-lottie__container"><div class="e-lottie__animation"></div>' + widget_caption + '</div>'; if ( settings.custom_link.url && 'custom' === settings.link_to ) { widget_container = '<a class="e-lottie__container__link" href="' + _.escape( settings.custom_link.url ) + '">' + widget_container + '</a>'; } print( widget_container ); #> <?php } } Save