king-addons / includes / widgets / Lottie_Animations / Lottie_Animations.php

Lottie_Animations.php in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.84, at includes/widgets/Lottie_Animations/Lottie_Animations.php

522 lines 16.4 KB

Raw Download Zip

1	<?php /** @noinspection PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Widget_Base;
7	use Elementor\Group_Control_Css_Filter;
8
9	if (!defined('ABSPATH')) {
10	exit;
11	}
12
13	class Lottie_Animations extends Widget_Base
14	{
15
16
17
18	public function get_name()
19	{
20	return 'king-addons-lottie-animations';
21	}
22
23	public function get_title()
24	{
25	return esc_html__('Lottie Animations', 'king-addons');
26	}
27
28	public function get_icon()
29	{
30	return 'king-addons-icon king-addons-lottie-animations';
31	}
32
33	public function get_categories()
34	{
35	return ['king-addons'];
36	}
37
38	public function get_keywords()
39	{
40	return ['king addons', 'king', 'addons', 'kingaddons', 'king-addons', 'lottie', 'animation', 'animations',
41	'svg', 'anim', 'lotie', 'loty', 'lote', 'lotte', 'lot'];
42	}
43
44	public function get_script_depends()
45	{
46	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-lottie-animations-script', KING_ADDONS_ASSETS_UNIQUE_KEY . '-lottie-lottie'];
47	}
48
49	public function get_style_depends(): array
50	{
51	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-lottie-animations-style'];
52	}
53
54	public function get_custom_help_url()
55	{
56	return 'mailto:[email protected]?subject=Bug Report - King Addons&body=Please describe the issue';
57	}
58
59	protected function register_controls()
60	{
61
62	$this->start_controls_section(
63	'section_settings',
64	[
65	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Settings', 'king-addons'),
66	]
67	);
68
69	$this->add_control(
70	'source',
71	[
72	'label' => esc_html__('File Source', 'king-addons'),
73	'type' => Controls_Manager::SELECT,
74	'options' => [
75	'url' => esc_html__('External URL', 'king-addons'),
76	'file' => esc_html__('Media File', 'king-addons'),
77	],
78	'default' => 'file',
79	]
80	);
81
82	$this->add_control(
83	'json_url',
84	[
85	'label' => esc_html__('Animation JSON URL', 'king-addons'),
86	'type' => Controls_Manager::TEXT,
87	'dynamic' => [
88	'active' => true,
89	],
90	'default' => '',
91	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
92	'label_block' => true,
93	'condition' => [
94	'source' => 'url',
95	],
96	]
97	);
98
99	$this->add_control(
100	'json_file',
101	array(
102	'label' => esc_html__('Upload JSON File', 'king-addons'),
103	'type' => Controls_Manager::MEDIA,
104	'media_type' => 'application/json',
105	'frontend_available' => true,
106	'condition' => [
107	'source' => 'file',
108	]
109	)
110	);
111
112	$this->add_control(
113	'autoplay',
114	[
115	'label' => esc_html__('Autoplay', 'king-addons'),
116	'type' => Controls_Manager::SWITCHER,
117	'default' => 'yes',
118	'return_value' => 'yes',
119	'separator' => 'before',
120	]
121	);
122
123	$this->add_control(
124	'loop',
125	[
126	'label' => esc_html__('Loop', 'king-addons'),
127	'type' => Controls_Manager::SWITCHER,
128	'default' => 'yes',
129	'return_value' => 'yes',
130	]
131	);
132
133	$this->add_control(
134	'reverse',
135	[
136	'label' => esc_html__('Reverse', 'king-addons'),
137	'type' => Controls_Manager::SWITCHER,
138	'return_value' => 'true',
139	'condition' => [
140	'trigger!' => 'scroll'
141	]
142	]
143	);
144
145	$this->add_control(
146	'speed',
147	array(
148	'label' => esc_html__('Animation Speed', 'king-addons'),
149	'type' => Controls_Manager::NUMBER,
150	'default' => 1,
151	'min' => 0.1,
152	'max' => 3,
153	'step' => 0.1,
154	)
155	);
156
157	$this->add_control(
158	'trigger',
159	[
160	'label' => esc_html__('Trigger', 'king-addons'),
161	'type' => Controls_Manager::SELECT,
162	'default' => 'none',
163	'options' => array(
164	'none' => esc_html__('None', 'king-addons'),
165	'viewport' => esc_html__('Viewport', 'king-addons'),
166	'hover' => esc_html__('Hover', 'king-addons'),
167	'scroll' => esc_html__('Scroll', 'king-addons'),
168	),
169	'frontend_available' => true,
170	]
171	);
172
173	$this->add_control(
174	'animate_view',
175	array(
176	'label' => esc_html__('Viewport', 'king-addons'),
177	'type' => Controls_Manager::SLIDER,
178	'default' => array(
179	'sizes' => array(
180	'start' => 0,
181	'end' => 100,
182	),
183	'unit' => '%',
184	),
185	'labels' => array(
186	esc_html__('Bottom', 'king-addons'),
187	esc_html__('Top', 'king-addons'),
188	),
189	'scales' => 1,
190	'handles' => 'range',
191	'condition' => array(
192	'trigger' => array('scroll', 'viewport'),
193	),
194	)
195	);
196
197	$this->add_responsive_control(
198	'animation_size',
199	array(
200	'label' => esc_html__('Size', 'king-addons'),
201	'type' => Controls_Manager::SLIDER,
202	'size_units' => array('px', '%'),
203	'default' => array(
204	'unit' => '%',
205	'size' => 50,
206	),
207	'range' => array(
208	'px' => array(
209	'min' => 1,
210	'max' => 800,
211	),
212	'em' => array(
213	'min' => 1,
214	'max' => 30,
215	),
216	),
217	'render_type' => 'template',
218	'separator' => 'before',
219	'selectors' => array(
220	'{{WRAPPER}} .king-addons-lottie-animations svg' => 'width: 100% !important; height: 100% !important;',
221	'{{WRAPPER}} .king-addons-lottie-animations' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;',
222	),
223	)
224	);
225
226	$this->add_responsive_control(
227	'rotate',
228	array(
229	'label' => esc_html__('Rotate (degrees)', 'king-addons'),
230	'type' => Controls_Manager::SLIDER,
231	'description' => esc_html__('Set rotation value in degrees', 'king-addons'),
232	'range' => array(
233	'px' => array(
234	'min' => -180,
235	'max' => 180,
236	),
237	),
238	'default' => array(
239	'size' => 0,
240	),
241	'selectors' => array(
242	'{{WRAPPER}} .king-addons-lottie-animations' => 'transform: rotate({{SIZE}}deg)',
243	),
244	)
245	);
246
247	$this->add_responsive_control(
248	'animation_align',
249	array(
250	'label' => esc_html__('Alignment', 'king-addons'),
251	'type' => Controls_Manager::CHOOSE,
252	'options' => array(
253	'left' => array(
254	'title' => esc_html__('Left', 'king-addons'),
255	'icon' => 'eicon-text-align-left',
256	),
257	'center' => array(
258	'title' => esc_html__('Center', 'king-addons'),
259	'icon' => 'eicon-text-align-center',
260	),
261	'right' => array(
262	'title' => esc_html__('Right', 'king-addons'),
263	'icon' => 'eicon-text-align-right',
264	),
265	),
266	'default' => 'center',
267	'toggle' => false,
268	'separator' => 'before',
269	'selectors' => array(
270	'{{WRAPPER}} .king-addons-lottie-animations-wrapper' => 'display: flex; justify-content: {{VALUE}}; align-items: {{VALUE}};',
271	),
272	)
273	);
274
275	$this->add_control(
276	'lottie_renderer',
277	[
278	'label' => esc_html__('Render As', 'king-addons'),
279	'type' => Controls_Manager::SELECT,
280	'options' => array(
281	'svg' => esc_html__('SVG', 'king-addons'),
282	'canvas' => esc_html__('Canvas', 'king-addons'),
283	),
284	'default' => 'svg',
285	'prefix_class' => 'king-addons-lottie-',
286	'render_type' => 'template',
287	'separator' => 'before',
288	]
289	);
290
291	$this->add_control(
292	'render_notice',
293	[
294	'raw' => esc_html__('Set render type to canvas if you\'re having performance issues on the page.', 'king-addons'),
295	'type' => Controls_Manager::RAW_HTML,
296	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
297	]
298	);
299
300	$this->add_control(
301	'link_switcher',
302	[
303	'label' => esc_html__('Wrapper Link', 'king-addons'),
304	'type' => Controls_Manager::SWITCHER,
305	]
306	);
307
308	$this->add_control(
309	'link_selection',
310	[
311	'label' => esc_html__('Link Type', 'king-addons'),
312	'type' => Controls_Manager::SELECT,
313	'options' => array(
314	'url' => esc_html__('URL', 'king-addons'),
315	'link' => esc_html__('Existing Page', 'king-addons'),
316	),
317	'default' => 'url',
318	'label_block' => true,
319	'condition' => array(
320	'link_switcher' => 'yes',
321	),
322	]
323	);
324
325	$this->add_control(
326	'link',
327	array(
328	'label' => esc_html__('Link', 'king-addons'),
329	'type' => Controls_Manager::URL,
330	'dynamic' => [
331	'active' => true,
332	],
333	'default' => array(
334	'url' => '#',
335	),
336	'placeholder' => esc_html__('https://example.com', 'king-addons'),
337	'label_block' => true,
338	'condition' => array(
339	'link_switcher' => 'yes',
340	'link_selection' => 'url',
341	),
342	)
343	);
344
345	$this->add_control(
346	'existing_link',
347	array(
348	'label' => esc_html__('Existing Page', 'king-addons'),
349	'type' => 'king-addons-ajax-select2',
350	'options' => 'ajaxselect2/getPostsByPostType',
351	'query_slug' => 'page',
352	'multiple' => false,
353	'label_block' => true,
354	'condition' => array(
355	'link_switcher' => 'yes',
356	'link_selection' => 'link',
357	),
358	)
359	);
360
361
362	$this->end_controls_section();
363
364	$this->start_controls_section(
365	'lottie_styles',
366	[
367	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Animation', 'king-addons'),
368	'tab' => Controls_Manager::TAB_STYLE,
369	]
370	);
371
372	$this->start_controls_tabs('tabs_lottie');
373
374	$this->start_controls_tab(
375	'tab_lottie_normal',
376	[
377	'label' => esc_html__('Normal', 'king-addons'),
378	]
379	);
380
381	$this->add_control(
382	'opacity',
383	[
384	'label' => esc_html__('Opacity', 'king-addons'),
385	'type' => Controls_Manager::SLIDER,
386	'range' => array(
387	'px' => array(
388	'max' => 1,
389	'min' => 0.10,
390	'step' => 0.01,
391	),
392	),
393	'selectors' => array(
394	'{{WRAPPER}} .king-addons-lottie-animations' => 'opacity: {{SIZE}}',
395	),
396	]
397	);
398
399	$this->add_control(
400	'hover_transition',
401	[
402	'label' => esc_html__('Transition Duration', 'king-addons'),
403	'type' => Controls_Manager::NUMBER,
404	'default' => 0.3,
405	'min' => 0,
406	'max' => 5,
407	'step' => 0.1,
408	'selectors' => [
409	'{{WRAPPER}} .king-addons-lottie-animations' => 'transition-duration: {{VALUE}}s;'
410	],
411	]
412	);
413
414	$this->add_group_control(
415	Group_Control_Css_Filter::get_type(),
416	array(
417	'name' => 'css_filters',
418	'selector' => '{{WRAPPER}} .king-addons-lottie-animations',
419	)
420	);
421
422	$this->end_controls_tab();
423
424	$this->start_controls_tab(
425	'tab_lottie_hover',
426	[
427	'label' => esc_html__('Hover', 'king-addons'),
428	]
429	);
430
431	$this->add_control(
432	'hover_opacity',
433	array(
434	'label' => esc_html__('Opacity', 'king-addons'),
435	'type' => Controls_Manager::SLIDER,
436	'range' => array(
437	'px' => array(
438	'max' => 1,
439	'min' => 0.10,
440	'step' => 0.01,
441	),
442	),
443	'selectors' => array(
444	'{{WRAPPER}} .king-addons-lottie-animations:hover' => 'opacity: {{SIZE}}',
445	),
446	)
447	);
448
449	$this->add_group_control(
450	Group_Control_Css_Filter::get_type(),
451	[
452	'name' => 'hover_css_filters',
453	'selector' => '{{WRAPPER}} .king-addons-lottie-animations:hover',
454	]
455	);
456
457	$this->end_controls_tab();
458
459	$this->end_controls_tabs();
460
461
462
463
464	$this->end_controls_section();
465
466
467
468	}
469
470	public function lottie_attributes($settings)
471	{
472	$attributes = [
473	'autoplay' => $settings['autoplay'],
474	'loop' => $settings['loop'],
475	'lottie_renderer' => $settings['lottie_renderer'],
476	'reverse' => $settings['reverse'],
477	'scroll_start' => $settings['animate_view']['sizes']['start'] ?? '0',
478	'scroll_end' => $settings['animate_view']['sizes']['end'] ?? '100',
479	'speed' => $settings['speed'],
480	'trigger' => $settings['trigger'],
481	];
482
483	return json_encode($attributes);
484	}
485
486	protected function render()
487	{
488	$settings = $this->get_settings_for_display();
489
490	// Determine Lottie JSON
491	$lottie_json = ($settings['source'] === 'url')
492	? esc_url($settings['json_url'])
493	: ($settings['json_file']['url'] ?? '');
494	$lottie_json = $lottie_json ?: KING_ADDONS_URL . 'includes/assets/libraries/lottie/default.json';
495
496	// Determine link
497	$lottie_link = ($settings['link_selection'] === 'url')
498	? ($settings['link']['url'] ?? '')
499	: get_permalink($settings['existing_link']);
500
501	// Prepare main Lottie container
502	$lottie_settings = esc_attr($this->lottie_attributes($settings));
503	$lottie_tag = sprintf(
504	'<div class="king-addons-lottie-animations" data-settings="%s" data-json-url="%s"></div>',
505	$lottie_settings,
506	esc_url($lottie_json)
507	);
508
509	// Optionally wrap in a link
510	if ($settings['link_switcher'] === 'yes') {
511	/** @noinspection HtmlUnknownTarget */
512	$lottie_tag = sprintf('<a href="%s">%s</a>', esc_url($lottie_link), $lottie_tag);
513	}
514
515	// Output
516	echo sprintf(
517	'<div class="king-addons-lottie-animations-wrapper">%s</div>',
518	$lottie_tag
519	);
520	}
521	}
522