premium-lottie.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.77

premium-addons-for-elementor / widgets / premium-lottie.php

premium-addons-for-elementor / widgets Last commit date

premium-lottie.php

930 lines

1	<?php
2	/**
3	* Premium Lottie Animations.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Plugin;
10	use Elementor\Widget_Base;
11	use Elementor\Controls_Manager;
12	use Elementor\Group_Control_Border;
13	use Elementor\Group_Control_Css_Filter;
14	use Elementor\Group_Control_Box_Shadow;
15
16	// PremiumAddons Classes.
17	use PremiumAddons\Includes\Helper_Functions;
18	use PremiumAddons\Includes\Controls\Premium_Post_Filter;
19
20	if ( ! defined( 'ABSPATH' ) ) {
21	exit; // If this file is called directly, abort.
22	}
23
24	/**
25	* Class Premium_Lottie
26	*/
27	class Premium_Lottie extends Widget_Base {
28
29	/**
30	* Retrieve Widget Name.
31	*
32	* @since 1.0.0
33	* @access public
34	*/
35	public function get_name() {
36	return 'premium-lottie';
37	}
38
39	/**
40	* Retrieve Widget Dependent CSS.
41	*
42	* @since 1.0.0
43	* @access public
44	*
45	* @return array CSS style handles.
46	*/
47	public function get_style_depends() {
48	return array(
49	'premium-addons',
50	);
51	}
52
53	/**
54	* Retrieve Widget Dependent JS.
55	*
56	* @since 1.0.0
57	* @access public
58	*
59	* @return array JS script handles.
60	*/
61	public function get_script_depends() {
62
63	$is_edit = Helper_Functions::is_edit_mode();
64
65	$scripts = array();
66	if ( $is_edit \|\| ( ! $is_edit && 'yes' === $this->get_settings( 'mouse_tilt' ) ) ) {
67	$scripts[] = 'pa-tilt';
68	}
69
70	$scripts[] = 'lottie-js';
71
72	return $scripts;
73	}
74
75	/**
76	* Retrieve Widget Title.
77	*
78	* @since 1.0.0
79	* @access public
80	*/
81	public function get_title() {
82	return __( 'Lottie Animations', 'premium-addons-for-elementor' );
83	}
84
85	/**
86	* Retrieve Widget Icon.
87	*
88	* @since 1.0.0
89	* @access public
90	*
91	* @return string widget icon.
92	*/
93	public function get_icon() {
94	return 'pa-lottie-animations';
95	}
96
97	/**
98	* Retrieve Widget Keywords.
99	*
100	* @since 1.0.0
101	* @access public
102	*
103	* @return string Widget keywords.
104	*/
105	public function get_keywords() {
106	return array( 'pa', 'premium', 'premium lottie', 'animation', 'json', 'vector', 'motion' );
107	}
108
109	/**
110	* Retrieve Widget Categories.
111	*
112	* @since 1.5.1
113	* @access public
114	*
115	* @return array Widget categories.
116	*/
117	public function get_categories() {
118	return array( 'premium-elements' );
119	}
120
121	protected function is_dynamic_content(): bool {
122	return false;
123	}
124
125	/**
126	* Retrieve Widget Support URL.
127	*
128	* @access public
129	*
130	* @return string support URL.
131	*/
132	public function get_custom_help_url() {
133	return 'https://premiumaddons.com/support/';
134	}
135
136	public function has_widget_inner_wrapper(): bool {
137	return ! Helper_Functions::check_elementor_experiment( 'e_optimized_markup' );
138	}
139
140	/**
141	* Register Testimonials controls.
142	*
143	* @since 3.20.0
144	* @access protected
145	*/
146	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
147
148	$this->start_controls_section(
149	'section_general_settings',
150	array(
151	'label' => __( 'General Settings', 'premium-addons-for-elementor' ),
152	)
153	);
154
155	$demo = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/elementor-lottie-animations-widget/', 'lottie', 'wp-editor', 'demo' );
156	Helper_Functions::add_templates_controls( $this, 'lottie-animations', $demo );
157
158	$this->add_control(
159	'source',
160	array(
161	'label' => __( 'File Source', 'premium-addons-for-elementor' ),
162	'type' => Controls_Manager::SELECT,
163	'options' => array(
164	'url' => __( 'External URL', 'premium-addons-for-elementor' ),
165	'file' => __( 'Media File', 'premium-addons-for-elementor' ),
166	),
167	'default' => 'url',
168	)
169	);
170
171	$this->add_control(
172	'lottie_url',
173	array(
174	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
175	'type' => Controls_Manager::TEXT,
176	'dynamic' => array( 'active' => true ),
177	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
178	'label_block' => true,
179	'condition' => array(
180	'source' => 'url',
181	),
182	'ai' => array(
183	'active' => false,
184	),
185	)
186	);
187
188	$this->add_control(
189	'lottie_file',
190	array(
191	'label' => __( 'Upload JSON File', 'premium-addons-for-elementor' ),
192	'type' => Controls_Manager::MEDIA,
193	'media_type' => 'application/json',
194	'frontend_available' => true,
195	'condition' => array(
196	'source' => 'file',
197	),
198	)
199	);
200
201	$this->add_control(
202	'lottie_loop',
203	array(
204	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
205	'type' => Controls_Manager::SWITCHER,
206	'return_value' => 'true',
207	'default' => 'true',
208	)
209	);
210
211	$this->add_control(
212	'lottie_reverse',
213	array(
214	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
215	'type' => Controls_Manager::SWITCHER,
216	'return_value' => 'true',
217	)
218	);
219
220	$this->add_control(
221	'lottie_speed',
222	array(
223	'label' => __( 'Animation Speed', 'premium-addons-for-elementor' ),
224	'type' => Controls_Manager::NUMBER,
225	'default' => 1,
226	'min' => 0.1,
227	'max' => 3,
228	'step' => 0.1,
229	)
230	);
231
232	$this->add_control(
233	'lottie_delay',
234	array(
235	'label' => __( 'Animation Delay (sec)', 'premium-addons-for-elementor' ),
236	'type' => Controls_Manager::NUMBER,
237	'min' => 0,
238	'max' => 5,
239	'step' => 0.1,
240	)
241	);
242
243	$this->add_control(
244	'trigger',
245	array(
246	'label' => __( 'Trigger', 'premium-addons-for-elementor' ),
247	'type' => Controls_Manager::SELECT,
248	'options' => array(
249	'none' => __( 'None', 'premium-addons-for-elementor' ),
250	'viewport' => __( 'Viewport', 'premium-addons-for-elementor' ),
251	'hover' => __( 'Hover', 'premium-addons-for-elementor' ),
252	'scroll' => __( 'Scroll', 'premium-addons-for-elementor' ),
253	'click' => __( 'Click', 'premium-addons-for-elementor' ),
254	),
255	'frontend_available' => true,
256	)
257	);
258
259	$this->add_control(
260	'hover_leave_reverse',
261	array(
262	'label' => __( 'Reset on Mouse Leave', 'premium-addons-for-elementor' ),
263	'type' => Controls_Manager::SWITCHER,
264	'return_value' => 'true',
265	'condition' => array(
266	'trigger' => 'hover',
267	'lottie_reverse!' => 'true',
268	),
269	)
270	);
271
272	$this->add_control(
273	'lottie_hover',
274	array(
275	'label' => __( 'Play on Hover', 'premium-addons-for-elementor' ),
276	'type' => Controls_Manager::HIDDEN,
277	'return_value' => 'true',
278	)
279	);
280
281	$this->add_control(
282	'animate_on_scroll',
283	array(
284	'label' => __( 'Play On Scroll', 'premium-addons-for-elementor' ),
285	'type' => Controls_Manager::HIDDEN,
286	'return_value' => 'true',
287	)
288	);
289
290	$this->add_control(
291	'animate_speed',
292	array(
293	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
294	'type' => Controls_Manager::SLIDER,
295	'default' => array(
296	'size' => 4,
297	),
298	'range' => array(
299	'px' => array(
300	'max' => 10,
301	'step' => 0.1,
302	),
303	),
304	'condition' => array(
305	'trigger' => 'scroll',
306	'lottie_reverse!' => 'true',
307	),
308	)
309	);
310
311	$this->add_control(
312	'animate_view',
313	array(
314	'label' => __( 'Viewport', 'premium-addons-for-elementor' ),
315	'type' => Controls_Manager::SLIDER,
316	'default' => array(
317	'sizes' => array(
318	'start' => 0,
319	'end' => 100,
320	),
321	'unit' => '%',
322	),
323	'labels' => array(
324	__( 'Bottom', 'premium-addons-for-elementor' ),
325	__( 'Top', 'premium-addons-for-elementor' ),
326	),
327	'scales' => 1,
328	'handles' => 'range',
329	'condition' => array(
330	'trigger' => array( 'scroll', 'viewport' ),
331	'lottie_reverse!' => 'true',
332	),
333	)
334	);
335
336	$this->add_responsive_control(
337	'animation_size',
338	array(
339	'label' => __( 'Size', 'premium-addons-for-elementor' ),
340	'type' => Controls_Manager::SLIDER,
341	'size_units' => array( 'px', 'em', '%', 'vw' ),
342	'default' => array(
343	'unit' => 'px',
344	'size' => 200,
345	),
346	'range' => array(
347	'px' => array(
348	'min' => 1,
349	'max' => 800,
350	),
351	'em' => array(
352	'min' => 1,
353	'max' => 30,
354	),
355	),
356	'separator' => 'before',
357	'selectors' => array(
358	'{{WRAPPER}}.premium-lottie-canvas .premium-lottie-animation, {{WRAPPER}}.premium-lottie-svg svg' => 'width: {{SIZE}}{{UNIT}} !important;',
359	),
360	)
361	);
362
363	$this->add_responsive_control(
364	'lottie_rotate',
365	array(
366	'label' => __( 'Rotate (degrees)', 'premium-addons-for-elementor' ),
367	'type' => Controls_Manager::SLIDER,
368	'description' => __( 'Set rotation value in degrees', 'premium-addons-for-elementor' ),
369	'range' => array(
370	'px' => array(
371	'min' => -180,
372	'max' => 180,
373	),
374	),
375	'default' => array(
376	'size' => 0,
377	),
378	'selectors' => array(
379	'{{WRAPPER}} .premium-lottie-animation' => 'transform: rotate({{SIZE}}deg)',
380	),
381	)
382	);
383
384	$this->add_responsive_control(
385	'animation_align',
386	array(
387	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
388	'type' => Controls_Manager::CHOOSE,
389	'options' => array(
390	'left' => array(
391	'title' => __( 'Left', 'premium-addons-for-elementor' ),
392	'icon' => 'eicon-text-align-left',
393	),
394	'center' => array(
395	'title' => __( 'Center', 'premium-addons-for-elementor' ),
396	'icon' => 'eicon-text-align-center',
397	),
398	'right' => array(
399	'title' => __( 'Right', 'premium-addons-for-elementor' ),
400	'icon' => 'eicon-text-align-right',
401	),
402	),
403	'default' => 'center',
404	'toggle' => false,
405	'separator' => 'before',
406	'selectors' => array(
407	'{{WRAPPER}}' => 'text-align: {{VALUE}}',
408	),
409	)
410	);
411
412	$this->add_control(
413	'link_switcher',
414	array(
415	'label' => __( 'Link', 'premium-addons-for-elementor' ),
416	'type' => Controls_Manager::SWITCHER,
417	)
418	);
419
420	$this->add_control(
421	'link_selection',
422	array(
423	'label' => __( 'Link Type', 'premium-addons-for-elementor' ),
424	'type' => Controls_Manager::SELECT,
425	'options' => array(
426	'url' => __( 'URL', 'premium-addons-for-elementor' ),
427	'link' => __( 'Existing Page', 'premium-addons-for-elementor' ),
428	),
429	'default' => 'url',
430	'label_block' => true,
431	'condition' => array(
432	'link_switcher' => 'yes',
433	),
434	)
435	);
436
437	$this->add_control(
438	'link',
439	array(
440	'label' => __( 'Link', 'premium-addons-for-elementor' ),
441	'type' => Controls_Manager::URL,
442	'dynamic' => array( 'active' => true ),
443	'default' => array(
444	'url' => '#',
445	),
446	'placeholder' => 'https://premiumaddons.com/',
447	'label_block' => true,
448	'separator' => 'after',
449	'condition' => array(
450	'link_switcher' => 'yes',
451	'link_selection' => 'url',
452	),
453	)
454	);
455
456	$this->add_control(
457	'existing_link',
458	array(
459	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
460	'type' => Premium_Post_Filter::TYPE,
461	'label_block' => true,
462	'multiple' => false,
463	'source' => array( 'post', 'page' ),
464	'condition' => array(
465	'link_switcher' => 'yes',
466	'link_selection' => 'link',
467	),
468	)
469	);
470
471	$this->add_control(
472	'lottie_renderer',
473	array(
474	'label' => __( 'Render As', 'premium-addons-for-elementor' ),
475	'type' => Controls_Manager::SELECT,
476	'options' => array(
477	'svg' => __( 'SVG', 'premium-addons-for-elementor' ),
478	'canvas' => __( 'Canvas', 'premium-addons-for-elementor' ),
479	),
480	'default' => 'svg',
481	'prefix_class' => 'premium-lottie-',
482	'render_type' => 'template',
483	'label_block' => true,
484	'separator' => 'before',
485	)
486	);
487
488	$this->add_control(
489	'render_notice',
490	array(
491	'raw' => __( 'Set render type to canvas if you\'re having performance issues on the page.', 'premium-addons-for-elementor' ),
492	'type' => Controls_Manager::RAW_HTML,
493	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
494	)
495	);
496
497	$this->add_control(
498	'mouse_tilt',
499	array(
500	'label' => __( 'Enable Mouse Tilt', 'premium-addons-for-elementor' ),
501	'type' => Controls_Manager::SWITCHER,
502	'return_value' => 'true',
503	)
504	);
505
506	$this->add_control(
507	'mouse_tilt_rev',
508	array(
509	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
510	'type' => Controls_Manager::SWITCHER,
511	'return_value' => 'true',
512	'condition' => array(
513	'mouse_tilt' => 'true',
514	),
515	)
516	);
517
518	$this->end_controls_section();
519
520	$this->start_controls_section(
521	'section_pa_docs',
522	array(
523	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
524	)
525	);
526
527	$docs = array(
528	'https://www.youtube.com/watch?v=0QWzUpF57dw' => __( 'Check the video tutorial »', 'premium-addons-for-elementor' ),
529	'https://premiumaddons.com/docs/elementor-lottie-animations-widget-tutorial/' => __( 'Check the documentation article »', 'premium-addons-for-elementor' ),
530	'https://premiumaddons.com/docs/how-to-speed-up-elementor-pages-with-many-lottie-animations' => __( 'How to speed up Elementor pages with many Lottie animations »', 'premium-addons-for-elementor' ),
531	'https://premiumaddons.com/docs/customize-elementor-lottie-widget/' => __( 'How to Customize Lottie Animations »', 'premium-addons-for-elementor' ),
532	);
533
534	$doc_index = 1;
535	foreach ( $docs as $url => $title ) {
536
537	$doc_url = Helper_Functions::get_campaign_link( $url, 'lottie-widget', 'wp-editor', 'get-support' );
538
539	$this->add_control(
540	'doc_' . $doc_index,
541	array(
542	'type' => Controls_Manager::RAW_HTML,
543	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title ),
544	'content_classes' => 'editor-pa-doc',
545	)
546	);
547
548	++$doc_index;
549
550	}
551
552	Helper_Functions::register_element_feedback_controls( $this );
553
554	$this->end_controls_section();
555
556	Helper_Functions::register_papro_promotion_controls( $this, 'lottie' );
557
558	$this->start_controls_section(
559	'section_animation_style',
560	array(
561	'label' => __( 'Animation', 'premium-addons-for-elementor' ),
562	'tab' => Controls_Manager::TAB_STYLE,
563	)
564	);
565
566	$this->start_controls_tabs( 'tabs_lottie' );
567
568	$this->start_controls_tab(
569	'tab_lottie_normal',
570	array(
571	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
572	)
573	);
574
575	$this->add_control(
576	'lottie_background',
577	array(
578	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
579	'type' => Controls_Manager::COLOR,
580	'selectors' => array(
581	'{{WRAPPER}} .premium-lottie-animation' => 'background-color: {{VALUE}}',
582	),
583	)
584	);
585
586	$this->add_control(
587	'opacity',
588	array(
589	'label' => __( 'Opacity', 'premium-addons-for-elementor' ),
590	'type' => Controls_Manager::SLIDER,
591	'range' => array(
592	'px' => array(
593	'max' => 1,
594	'min' => 0.10,
595	'step' => 0.01,
596	),
597	),
598	'selectors' => array(
599	'{{WRAPPER}} .premium-lottie-animation' => 'opacity: {{SIZE}}',
600	),
601	)
602	);
603
604	$this->add_group_control(
605	Group_Control_Css_Filter::get_type(),
606	array(
607	'name' => 'css_filters',
608	'selector' => '{{WRAPPER}} .premium-lottie-animation',
609	)
610	);
611
612	$this->end_controls_tab();
613
614	$this->start_controls_tab(
615	'tab_lottie_hover',
616	array(
617	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
618	)
619	);
620
621	$this->add_control(
622	'lottie_hover_background',
623	array(
624	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
625	'type' => Controls_Manager::COLOR,
626	'selectors' => array(
627	'{{WRAPPER}} .premium-lottie-animation:hover' => 'background-color: {{VALUE}}',
628	),
629	)
630	);
631
632	$this->add_control(
633	'hover_opacity',
634	array(
635	'label' => __( 'Opacity', 'premium-addons-for-elementor' ),
636	'type' => Controls_Manager::SLIDER,
637	'range' => array(
638	'px' => array(
639	'max' => 1,
640	'min' => 0.10,
641	'step' => 0.01,
642	),
643	),
644	'selectors' => array(
645	'{{WRAPPER}} .premium-lottie-animation:hover' => 'opacity: {{SIZE}}',
646	),
647	)
648	);
649
650	$this->add_group_control(
651	Group_Control_Css_Filter::get_type(),
652	array(
653	'name' => 'hover_css_filters',
654	'selector' => '{{WRAPPER}} .premium-lottie-animation:hover',
655	)
656	);
657
658	$this->end_controls_tab();
659
660	$this->end_controls_tabs();
661
662	$this->add_group_control(
663	Group_Control_Border::get_type(),
664	array(
665	'name' => 'lottie_border',
666	'selector' => '{{WRAPPER}} .premium-lottie-animation',
667	'separator' => 'before',
668	)
669	);
670
671	$this->add_control(
672	'lottie_border_radius',
673	array(
674	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
675	'type' => Controls_Manager::DIMENSIONS,
676	'size_units' => array( 'px', '%', 'em' ),
677	'selectors' => array(
678	'{{WRAPPER}} .premium-lottie-animation' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
679	),
680	'condition' => array(
681	'lottie_adv_radius!' => 'yes',
682	),
683	)
684	);
685
686	$this->add_control(
687	'lottie_adv_radius',
688	array(
689	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
690	'type' => Controls_Manager::SWITCHER,
691	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>' . __( '. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=S0BJazLHV-M" target="_blank">tutorial</a>',
692	)
693	);
694
695	$this->add_control(
696	'lottie_adv_radius_value',
697	array(
698	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
699	'type' => Controls_Manager::TEXT,
700	'dynamic' => array( 'active' => true ),
701	'selectors' => array(
702	'{{WRAPPER}} .premium-lottie-animation' => 'border-radius: {{VALUE}};',
703	),
704	'condition' => array(
705	'lottie_adv_radius' => 'yes',
706	),
707	'ai' => array(
708	'active' => false,
709	),
710	)
711	);
712
713	$this->add_responsive_control(
714	'animation_padding',
715	array(
716	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
717	'type' => Controls_Manager::DIMENSIONS,
718	'size_units' => array( 'px', 'em', '%' ),
719	'selectors' => array(
720	'{{WRAPPER}} .premium-lottie-animation' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
721	),
722	)
723	);
724
725	$this->end_controls_section();
726	}
727
728	/**
729	* Render Lottie Animations output on the frontend.
730	*
731	* Written in PHP and used to generate the final HTML.
732	*
733	* @since 3.20.2
734	* @access protected
735	*/
736	protected function render() {
737
738	$settings = $this->get_settings_for_display();
739
740	$anim_url = 'url' === $settings['source'] ? $settings['lottie_url'] : $settings['lottie_file']['url'];
741
742	if ( empty( $anim_url ) ) {
743	return;
744	}
745
746	if ( '' !== $settings['trigger'] ) {
747	$settings['lottie_hover'] = false;
748	$settings['animate_on_scroll'] = false;
749	}
750
751	$this->add_render_attribute(
752	'lottie',
753	array(
754	'class' => 'premium-lottie-animation',
755	'data-lottie-url' => $anim_url,
756	'data-lottie-loop' => $settings['lottie_loop'],
757	'data-lottie-reverse' => $settings['lottie_reverse'],
758	'data-lottie-hover' => $settings['lottie_hover'] \|\| 'hover' === $settings['trigger'],
759	'data-lottie-speed' => $settings['lottie_speed'],
760	'data-lottie-render' => $settings['lottie_renderer'],
761	'data-lottie-delay' => $settings['lottie_delay'],
762	)
763	);
764
765	if ( 'hover' === $settings['trigger'] && 'true' === $settings['hover_leave_reverse'] ) {
766	$this->add_render_attribute( 'lottie', 'data-lottie-reset', 'true' );
767	}
768
769	if ( $settings['animate_on_scroll'] \|\| 'scroll' === $settings['trigger'] ) {
770
771	$this->add_render_attribute(
772	'lottie',
773	array(
774	'class' => 'premium-lottie-scroll',
775	'data-lottie-scroll' => 'true',
776	'data-scroll-start' => isset( $settings['animate_view']['sizes']['start'] ) ? $settings['animate_view']['sizes']['start'] : '0',
777	'data-scroll-end' => isset( $settings['animate_view']['sizes']['end'] ) ? $settings['animate_view']['sizes']['end'] : '100',
778	'data-scroll-speed' => isset( $settings['animate_speed']['size'] ) ? $settings['animate_speed']['size'] : 4,
779	)
780	);
781
782	} elseif ( 'viewport' === $settings['trigger'] ) {
783	$this->add_render_attribute(
784	'lottie',
785	array(
786	'data-lottie-viewport' => 'true',
787	'data-scroll-start' => isset( $settings['animate_view']['sizes']['start'] ) ? $settings['animate_view']['sizes']['start'] : '0',
788	'data-scroll-end' => isset( $settings['animate_view']['sizes']['end'] ) ? $settings['animate_view']['sizes']['end'] : '100',
789	)
790	);
791	} elseif ( 'click' === $settings['trigger'] ) {
792	$this->add_render_attribute(
793	'lottie',
794	array(
795	'data-lottie-click' => 'true',
796	)
797	);
798	}
799
800	if ( 'yes' === $settings['link_switcher'] ) {
801
802	if ( 'url' === $settings['link_selection'] ) {
803	$this->add_link_attributes( 'link', $settings['link'] );
804	} else {
805	$this->add_render_attribute( 'link', 'href', get_permalink( $settings['existing_link'] ) );
806	}
807	}
808
809	if ( 'true' === $settings['mouse_tilt'] ) {
810	$this->add_render_attribute( 'lottie', 'data-box-tilt', 'true' );
811	if ( 'true' === $settings['mouse_tilt_rev'] ) {
812	$this->add_render_attribute( 'lottie', 'data-box-tilt-reverse', 'true' );
813	}
814	}
815
816	?>
817
818	<div <?php $this->print_render_attribute_string( 'lottie' ); ?>>
819	<?php if ( 'yes' === $settings['link_switcher'] ) : ?>
820	<a <?php $this->print_render_attribute_string( 'link' ); ?>></a>
821	<?php endif; ?>
822	</div>
823
824	<?php
825	}
826
827	/**
828	* Render Testimonials widget output in the editor.
829	*
830	* Written as a Backbone JavaScript template and used to generate the live preview.
831	*
832	* @since 3.20.2
833	* @access protected
834	*/
835	protected function content_template() {
836
837	?>
838
839	<#
840
841	var anim_url = null;
842
843	if( 'url' === settings.source ) {
844	anim_url = settings.lottie_url
845	} else if( settings.lottie_file ) {
846	anim_url = settings.lottie_file.url;
847	}
848
849	if( ! anim_url )
850	return;
851
852	if( '' !== settings.trigger ) {
853	settings.lottie_hover = false;
854	settings.animate_on_scroll = false;
855	}
856
857	view.addRenderAttribute( 'lottie', {
858	'class': 'premium-lottie-animation',
859	'data-lottie-url': anim_url,
860	'data-lottie-loop': settings.lottie_loop,
861	'data-lottie-reverse': settings.lottie_reverse,
862	'data-lottie-hover': settings.lottie_hover \|\| 'hover' === settings.trigger,
863	'data-lottie-speed': settings.lottie_speed,
864	'data-lottie-render': settings.lottie_renderer,
865	'data-lottie-delay': settings.lottie_delay
866	});
867
868	if( 'hover' === settings.trigger && 'true' === settings.hover_leave_reverse ) {
869	view.addRenderAttribute( 'lottie', 'data-lottie-reset', 'true' );
870	}
871
872	if( settings.animate_on_scroll \|\| 'scroll' === settings.trigger ) {
873
874	view.addRenderAttribute( 'lottie', {
875	'class': 'premium-lottie-scroll',
876	'data-lottie-scroll': 'true',
877	'data-scroll-start': settings.animate_view.sizes.start,
878	'data-scroll-end': settings.animate_view.sizes.end,
879	'data-scroll-speed': settings.animate_speed.size,
880	});
881
882	} else if( 'viewport' === settings.trigger ) {
883
884	view.addRenderAttribute( 'lottie', {
885	'data-lottie-viewport': 'true',
886	'data-scroll-start': settings.animate_view.sizes.start,
887	'data-scroll-end': settings.animate_view.sizes.end,
888	});
889
890	} else if ( 'click' === settings.trigger ) {
891
892	view.addRenderAttribute( 'lottie', {
893	'data-lottie-click': 'true',
894	});
895	}
896
897	if( 'yes' === settings.link_switcher ) {
898
899	var button_url = '';
900
901	if( settings.link_selection === 'url' ) {
902	button_url = settings.link.url;
903	} else {
904	button_url = settings.existing_link;
905	}
906
907	view.addRenderAttribute( 'link', 'href', button_url );
908
909	}
910
911	if ( 'true' === settings.mouse_tilt ) {
912	view.addRenderAttribute( 'lottie', 'data-box-tilt', 'true' );
913	if ( 'true' === settings.mouse_tilt_rev ) {
914	view.addRenderAttribute( 'lottie', 'data-box-tilt-reverse', 'true' );
915	}
916	}
917
918
919	#>
920
921	<div {{{ view.getRenderAttributeString('lottie') }}}>
922	<# if( 'yes' === settings.link_switcher && '' !== button_url ) { #>
923	<a {{{ view.getRenderAttributeString('link') }}}></a>
924	<# } #>
925	</div>
926
927	<?php
928	}
929	}
930