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

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

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

premium-lottie.php

702 lines

1	<?php
2
3	/**
4	* Premium Lottie Animations.
5	*/
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Widget_Base;
10	use Elementor\Controls_Manager;
11	use Elementor\Group_Control_Border;
12	use Elementor\Group_Control_Css_Filter;
13	use Elementor\Group_Control_Box_Shadow;
14
15	// PremiumAddons Classes.
16	use PremiumAddons\Includes\Helper_Functions;
17	use PremiumAddons\Includes\Premium_Template_Tags;
18
19	if ( ! defined( 'ABSPATH' ) ) exit; // If this file is called directly, abort.
20
21	/**
22	* Class Premium_Lottie
23	*/
24	class Premium_Lottie extends Widget_Base {
25
26	public function get_name() {
27	return 'premium-lottie';
28	}
29
30	public function getTemplateInstance() {
31	return $this->templateInstance = Premium_Template_Tags::getInstance();
32	}
33
34	public function get_style_depends() {
35	return [
36	'premium-addons'
37	];
38	}
39
40	public function get_script_depends() {
41	return [
42	'lottie-js'
43	];
44	}
45
46	public function get_title() {
47	return sprintf( '%1$s %2$s', Helper_Functions::get_prefix(), __('Lottie Animations', 'premium-addons-for-elementor') );
48	}
49
50	public function get_icon() {
51	return 'pa-lottie-animations';
52	}
53
54	public function get_categories() {
55	return [ 'premium-elements' ];
56	}
57
58	public function get_custom_help_url() {
59	return 'https://premiumaddons.com/support/';
60	}
61
62	/**
63	* Register Testimonials controls.
64	*
65	* @since 3.20.0
66	* @access protected
67	*/
68	protected function _register_controls() {
69
70	$this->start_controls_section('section_general_settings',
71	[
72	'label' => __('General Settings', 'premium-addons-for-elementor'),
73	]
74	);
75
76	$this->add_control('source',
77	[
78	'label' => __('File Source', 'premium-addons-pro'),
79	'type' => Controls_Manager::SELECT,
80	'options' => [
81	'url' => __('External URL','premium-addons-pro'),
82	'file' => __('Media File', 'premium-addons-pro')
83	],
84	'default' => 'url'
85	]
86	);
87
88	$this->add_control('lottie_url',
89	[
90	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
91	'type' => Controls_Manager::TEXT,
92	'dynamic' => [ 'active' => true ],
93	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
94	'label_block' => true,
95	'condition' => [
96	'source' => 'url'
97	]
98	]
99	);
100
101	$this->add_control('lottie_file',
102	[
103	'label' => __( 'Upload JSON File', 'premium-addons-for-elementor' ),
104	'type' => Controls_Manager::MEDIA,
105	'media_type'=> 'application/json',
106	'frontend_available' => true,
107	'condition' => [
108	'source' => 'file',
109	],
110	]
111	);
112
113	$this->add_control('lottie_loop',
114	[
115	'label' => __('Loop','premium-addons-for-elementor'),
116	'type' => Controls_Manager::SWITCHER,
117	'return_value' => 'true',
118	'default' => 'true',
119	]
120	);
121
122	$this->add_control('lottie_reverse',
123	[
124	'label' => __('Reverse','premium-addons-for-elementor'),
125	'type' => Controls_Manager::SWITCHER,
126	'return_value' => 'true',
127	]
128	);
129
130	$this->add_control('lottie_speed',
131	[
132	'label' => __( 'Animation Speed', 'premium-addons-for-elementor' ),
133	'type' => Controls_Manager::NUMBER,
134	'default' => 1,
135	'min' => 0.1,
136	'max' => 3,
137	'step' => 0.1
138	]
139	);
140
141	$this->add_control('trigger',
142	[
143	'label' => __( 'Trigger', 'premium-addons-for-elementor' ),
144	'type' => Controls_Manager::SELECT,
145	'options' => [
146	'none' => __( 'None', 'premium-addons-for-elementor' ),
147	'viewport' => __( 'Viewport', 'premium-addons-for-elementor' ),
148	'hover' => __( 'Hover', 'premium-addons-for-elementor' ),
149	'scroll' => __( 'Scroll', 'premium-addons-for-elementor' ),
150	],
151	'frontend_available' => true,
152	]
153	);
154
155	$this->add_control('lottie_hover',
156	[
157	'label' => __('Play on Hover','premium-addons-for-elementor'),
158	'type' => Controls_Manager::HIDDEN,
159	'return_value' => 'true',
160	]
161	);
162
163	$this->add_control('animate_on_scroll',
164	[
165	'label' => __('Play On Scroll','premium-addons-for-elementor'),
166	'type' => Controls_Manager::HIDDEN,
167	'return_value' => 'true',
168	]
169	);
170
171	$this->add_control('animate_speed',
172	[
173	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
174	'type' => Controls_Manager::SLIDER,
175	'default' => [
176	'size' => 4,
177	],
178	'range' => [
179	'px' => [
180	'max' => 10,
181	'step' => 0.1,
182	],
183	],
184	'condition' => [
185	'trigger' => 'scroll',
186	'lottie_reverse!' => 'true'
187	],
188	]
189	);
190
191	$this->add_control('animate_view',
192	[
193	'label' => __( 'Viewport', 'premium-addons-for-elementor' ),
194	'type' => Controls_Manager::SLIDER,
195	'default' => [
196	'sizes' => [
197	'start' => 0,
198	'end' => 100,
199	],
200	'unit' => '%',
201	],
202	'labels' => [
203	__( 'Bottom', 'premium-addons-for-elementor' ),
204	__( 'Top', 'premium-addons-for-elementor' ),
205	],
206	'scales' => 1,
207	'handles' => 'range',
208	'condition' => [
209	'trigger' => [ 'scroll', 'viewport' ],
210	'lottie_reverse!' => 'true'
211	],
212	]
213	);
214
215	$this->add_responsive_control('animation_size',
216	[
217	'label' => __('Size', 'premium-addons-for-elementor'),
218	'type' => Controls_Manager::SLIDER,
219	'size_units' => ['px', 'em', '%'],
220	'default' => [
221	'unit' => 'px',
222	'size' => 200,
223	],
224	'range' => [
225	'px' => [
226	'min' => 1,
227	'max' => 800,
228	],
229	'em' => [
230	'min' => 1,
231	'max' => 30,
232	],
233	],
234	'render_type' => 'template',
235	'separator' => 'before',
236	'selectors' => [
237	'{{WRAPPER}}.premium-lottie-canvas .premium-lottie-animation, {{WRAPPER}}.premium-lottie-svg svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important'
238	]
239	]
240	);
241
242	$this->add_responsive_control('lottie_rotate',
243	[
244	'label' => __('Rotate (degrees)', 'premium-addons-for-elementor'),
245	'type' => Controls_Manager::SLIDER,
246	'description' => __('Set rotation value in degrees', 'premium-addons-for-elementor'),
247	'range' => [
248	'px' => [
249	'min' => -180,
250	'max' => 180,
251	]
252	],
253	'default' => [
254	'size' => 0,
255	],
256	'selectors' => [
257	'{{WRAPPER}} .premium-lottie-animation' => 'transform: rotate({{SIZE}}deg)'
258	],
259	]
260	);
261
262	$this->add_responsive_control('animation_align',
263	[
264	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
265	'type' => Controls_Manager::CHOOSE,
266	'options' => [
267	'left' => [
268	'title'=> __( 'Left', 'premium-addons-for-elementor' ),
269	'icon' => 'fa fa-align-left',
270	],
271	'center' => [
272	'title'=> __( 'Center', 'premium-addons-for-elementor' ),
273	'icon' => 'fa fa-align-center',
274	],
275	'right' => [
276	'title'=> __( 'Right', 'premium-addons-for-elementor' ),
277	'icon' => 'fa fa-align-right',
278	],
279	],
280	'default' => 'center',
281	'toggle' => false,
282	'separator' => 'before',
283	'selectors' => [
284	'{{WRAPPER}} .premium-lottie-wrap' => 'text-align: {{VALUE}}',
285	],
286	]
287	);
288
289	$this->add_control('link_switcher',
290	[
291	'label' => __('Link', 'premium-addons-for-elementor'),
292	'type' => Controls_Manager::SWITCHER,
293	]
294	);
295
296	$this->add_control('link_selection',
297	[
298	'label' => __('Link Type', 'premium-addons-for-elementor'),
299	'type' => Controls_Manager::SELECT,
300	'options' => [
301	'url' => __('URL', 'premium-addons-for-elementor'),
302	'link' => __('Existing Page', 'premium-addons-for-elementor'),
303	],
304	'default' => 'url',
305	'label_block' => true,
306	'condition' => [
307	'link_switcher' => 'yes'
308	]
309	]
310	);
311
312	$this->add_control('link',
313	[
314	'label' => __('Link', 'premium-addons-for-elementor'),
315	'type' => Controls_Manager::URL,
316	'dynamic' => [ 'active' => true ],
317	'default' => [
318	'url' => '#',
319	],
320	'placeholder' => 'https://premiumaddons.com/',
321	'label_block' => true,
322	'separator' => 'after',
323	'condition' => [
324	'link_switcher' => 'yes',
325	'link_selection' => 'url',
326	]
327	]
328	);
329
330	$this->add_control('existing_link',
331	[
332	'label' => __('Existing Page', 'premium-addons-for-elementor'),
333	'type' => Controls_Manager::SELECT2,
334	'options' => $this->getTemplateInstance()->get_all_posts(),
335	'multiple' => false,
336	'label_block' => true,
337	'condition' => [
338	'link_switcher' => 'yes',
339	'link_selection' => 'link',
340	],
341	]
342	);
343
344	$this->add_control('lottie_renderer',
345	[
346	'label' => __('Render As', 'premium-addons-for-elementor'),
347	'type' => Controls_Manager::SELECT,
348	'options' => [
349	'svg' => __('SVG', 'premium-addons-for-elementor'),
350	'canvas' => __('Canvas', 'premium-addons-for-elementor'),
351	],
352	'default' => 'svg',
353	'prefix_class' => 'premium-lottie-',
354	'render_type' => 'template',
355	'label_block' => true,
356	'separator' => 'before'
357	]
358	);
359
360	$this->add_control('render_notice',
361	[
362	'raw' => __('Set render type to canvas if you\'re having performance issues on the page.', 'premium-addons-for-elemeentor'),
363	'type' => Controls_Manager::RAW_HTML,
364	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
365	]
366	);
367
368	$this->end_controls_section();
369
370	$this->start_controls_section('section_pa_docs',
371	[
372	'label' => __('Helpful Documentations', 'premium-addons-for-elementor'),
373	]
374	);
375
376	$docs = [
377	'https://www.youtube.com/watch?v=0QWzUpF57dw' => 'Check the video tutorial »',
378	'https://premiumaddons.com/docs/lottie-animations-widget-tutorial' => 'Check the documentation article »',
379	'https://premiumaddons.com/docs/how-to-speed-up-elementor-pages-with-many-lottie-animations' => 'How to speed up Elementor pages with many Lottie animations »',
380	];
381
382	$doc_index = 1;
383	foreach( $docs as $url => $title ) {
384
385	$doc_url = Helper_Functions::get_campaign_link( $url, 'editor-page', 'wp-editor', 'get-support' );
386
387	$this->add_control('doc_' . $doc_index,
388	[
389	'type' => Controls_Manager::RAW_HTML,
390	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url , __( $title, 'premium-addons-for-elementor' ) ),
391	'content_classes' => 'editor-pa-doc',
392	]
393	);
394
395	$doc_index++;
396
397	}
398
399	$this->end_controls_section();
400
401	$this->start_controls_section('section_animation_style',
402	[
403	'label' => __('Animation', 'premium-addons-for-elementor'),
404	'tab' => Controls_Manager::TAB_STYLE,
405	]
406	);
407
408	$this->start_controls_tabs('tabs_lottie');
409
410	$this->start_controls_tab('tab_lottie_normal',
411	[
412	'label' => __('Normal', 'premium-addons-for-elementor'),
413	]
414	);
415
416	$this->add_control('lottie_background',
417	[
418	'label' => __('Background Color', 'premium-addons-for-elementor'),
419	'type' => Controls_Manager::COLOR,
420	'selectors' => [
421	'{{WRAPPER}} .premium-lottie-animation' => 'background-color: {{VALUE}}',
422	]
423	]
424	);
425
426	$this->add_control('opacity',
427	[
428	'label' => __( 'Opacity', 'premium-addons-for-elementor' ),
429	'type' => Controls_Manager::SLIDER,
430	'range' => [
431	'px' => [
432	'max' => 1,
433	'min' => 0.10,
434	'step' => 0.01,
435	],
436	],
437	'selectors' => [
438	'{{WRAPPER}} .premium-lottie-animation' => 'opacity: {{SIZE}}',
439	],
440	]
441	);
442
443	$this->add_group_control(
444	Group_Control_Css_Filter::get_type(),
445	[
446	'name' => 'css_filters',
447	'selector' => '{{WRAPPER}} .premium-lottie-animation',
448	]
449	);
450
451	$this->end_controls_tab();
452
453	$this->start_controls_tab('tab_lottie_hover',
454	[
455	'label' => __('Hover', 'premium-addons-for-elementor'),
456	]
457	);
458
459	$this->add_control('lottie_hover_background',
460	[
461	'label' => __('Background Color', 'premium-addons-for-elementor'),
462	'type' => Controls_Manager::COLOR,
463	'selectors' => [
464	'{{WRAPPER}} .premium-lottie-animation:hover' => 'background-color: {{VALUE}}',
465	]
466	]
467	);
468
469	$this->add_control('hover_opacity',
470	[
471	'label' => __( 'Opacity', 'premium-addons-for-elementor' ),
472	'type' => Controls_Manager::SLIDER,
473	'range' => [
474	'px' => [
475	'max' => 1,
476	'min' => 0.10,
477	'step' => 0.01,
478	],
479	],
480	'selectors' => [
481	'{{WRAPPER}} .premium-lottie-animation:hover' => 'opacity: {{SIZE}}',
482	],
483	]
484	);
485
486	$this->add_group_control(
487	Group_Control_Css_Filter::get_type(),
488	[
489	'name' => 'hover_css_filters',
490	'selector' => '{{WRAPPER}} .premium-lottie-animation:hover',
491	]
492	);
493
494	$this->end_controls_tab();
495
496	$this->end_controls_tabs();
497
498	$this->add_group_control(
499	Group_Control_Border::get_type(),
500	[
501	'name' => 'lottie_border',
502	'selector' => '{{WRAPPER}} .premium-lottie-animation',
503	'separator' => 'before'
504	]
505	);
506
507	$this->add_control('lottie_border_radius',
508	[
509	'label' => __('Border Radius', 'premium-addons-for-elementor'),
510	'type' => Controls_Manager::DIMENSIONS,
511	'size_units' => ['px', '%', 'em'],
512	'selectors' => [
513	'{{WRAPPER}} .premium-lottie-animation' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}'
514	]
515	]
516	);
517
518	$this->add_responsive_control('animation_padding',
519	[
520	'label' => __('Padding', 'premium-addons-for-elementor'),
521	'type' => Controls_Manager::DIMENSIONS,
522	'size_units' => ['px', 'em', '%'],
523	'selectors' => [
524	'{{WRAPPER}} .premium-lottie-animation' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}'
525	],
526	]
527	);
528
529	$this->end_controls_section();
530
531	}
532
533	/**
534	* Render Lottie Animations output on the frontend.
535	*
536	* Written in PHP and used to generate the final HTML.
537	*
538	* @since 3.20.2
539	* @access protected
540	*/
541	protected function render() {
542
543	$settings = $this->get_settings_for_display();
544
545	$anim_url = 'url' === $settings['source'] ? $settings['lottie_url'] : $settings['lottie_file']['url'];
546
547	if( empty( $anim_url ) )
548	return;
549
550	if( '' !== $settings['trigger'] ) {
551	$settings['lottie_hover'] = false;
552	$settings['animate_on_scroll'] = false;
553	}
554
555	$this->add_render_attribute( 'lottie', [
556	'class' => [
557	'premium-lottie-animation',
558	],
559	'data-lottie-url' => $anim_url,
560	'data-lottie-loop' => $settings['lottie_loop'],
561	'data-lottie-reverse' => $settings['lottie_reverse'],
562	'data-lottie-hover' => $settings['lottie_hover'] \|\| 'hover' === $settings['trigger'],
563	'data-lottie-speed' => $settings['lottie_speed'],
564	'data-lottie-render' => $settings['lottie_renderer'],
565	]);
566
567	if( $settings['animate_on_scroll'] \|\| 'scroll' === $settings['trigger'] ) {
568
569	$this->add_render_attribute( 'lottie', [
570	'class' => 'premium-lottie-scroll',
571	'data-lottie-scroll' => 'true',
572	'data-scroll-start' => isset ( $settings['animate_view']['sizes']['start'] ) ? $settings['animate_view']['sizes']['start'] : '0',
573	'data-scroll-end' => isset( $settings['animate_view']['sizes']['end'] ) ? $settings['animate_view']['sizes']['end'] : '100',
574	'data-scroll-speed' => $settings['animate_speed']['size'],
575	]);
576
577	} elseif( 'viewport' === $settings['trigger'] ) {
578	$this->add_render_attribute( 'lottie', [
579	'data-lottie-viewport' => 'true',
580	'data-scroll-start' => $settings['animate_view']['sizes']['start'],
581	'data-scroll-end' => $settings['animate_view']['sizes']['end'],
582	]);
583	}
584
585	if( 'yes' === $settings['link_switcher'] ) {
586
587	if( $settings['link_selection'] === 'url' ) {
588	$button_url = $settings['link']['url'];
589	} else {
590	$button_url = get_permalink( $settings['existing_link'] );
591	}
592
593	$this->add_render_attribute( 'link', 'href', $button_url );
594
595	if( ! empty( $settings['link']['is_external'] ) )
596	$this->add_render_attribute( 'button', 'target', '_blank' );
597
598	if( ! empty( $settings['link']['nofollow'] ) )
599	$this->add_render_attribute( 'button', 'rel', 'nofollow' );
600
601	}
602
603
604	?>
605
606	<div class="premium-lottie-wrap">
607	<div <?php echo $this->get_render_attribute_string('lottie'); ?>>
608	<?php if( 'yes' === $settings['link_switcher'] && ! empty( $button_url ) ) : ?>
609	<a <?php echo $this->get_render_attribute_string( 'link' ); ?>></a>
610	<?php endif; ?>
611	</div>
612	</div>
613
614	<?php
615	}
616
617	/**
618	* Render Testimonials widget output in the editor.
619	*
620	* Written as a Backbone JavaScript template and used to generate the live preview.
621	*
622	* @since 3.20.2
623	* @access protected
624	*/
625	protected function content_template() {
626
627	?>
628
629	<#
630
631	var anim_url = 'url' === settings.source ? settings.lottie_url : settings.lottie_file.url;
632
633	if( '' === anim_url )
634	return;
635
636	if( '' !== settings.trigger ) {
637	settings.lottie_hover = false;
638	settings.animate_on_scroll = false;
639	}
640
641	view.addRenderAttribute( 'lottie', {
642	'class': [
643	'premium-lottie-animation',
644	],
645	'data-lottie-url': anim_url,
646	'data-lottie-loop': settings.lottie_loop,
647	'data-lottie-reverse': settings.lottie_reverse,
648	'data-lottie-hover': settings.lottie_hover \|\| 'hover' === settings.trigger,
649	'data-lottie-speed': settings.lottie_speed,
650	'data-lottie-render': settings.lottie_renderer
651	});
652
653	if( settings.animate_on_scroll \|\| 'scroll' === settings.trigger ) {
654
655	view.addRenderAttribute( 'lottie', {
656	'class': 'premium-lottie-scroll',
657	'data-lottie-scroll': 'true',
658	'data-scroll-start': settings.animate_view.sizes.start,
659	'data-scroll-end': settings.animate_view.sizes.end,
660	'data-scroll-speed': settings.animate_speed.size,
661	});
662
663	} else if( 'viewport' === settings.trigger ) {
664
665	view.addRenderAttribute( 'lottie', {
666	'data-lottie-viewport': 'true',
667	'data-scroll-start': settings.animate_view.sizes.start,
668	'data-scroll-end': settings.animate_view.sizes.end,
669	});
670
671	}
672
673	if( 'yes' === settings.link_switcher ) {
674
675	var button_url = '';
676
677	if( settings.link_selection === 'url' ) {
678	button_url = settings.link.url;
679	} else {
680	button_url = settings.existing_link;
681	}
682
683	view.addRenderAttribute( 'link', 'href', button_url );
684
685	}
686
687
688	#>
689
690	<div class="premium-lottie-wrap">
691	<div {{{ view.getRenderAttributeString('lottie') }}}>
692	<# if( 'yes' === settings.link_switcher && '' !== button_url ) { #>
693	<a {{{ view.getRenderAttributeString('link') }}}></a>
694	<# } #>
695	</div>
696	</div>
697
698	<?php
699	}
700
701
702	}