king-addons / includes / features / Animated_Gradient_Mesh_Background / Animated_Gradient_Mesh_Background.php

Animated_Gradient_Mesh_Background.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.82, at includes/features/Animated_Gradient_Mesh_Background/Animated_Gradient_Mesh_Background.php

1,071 lines 36.8 KB

Raw Download Zip

1	<?php /** @noinspection PhpUnused, SpellCheckingInspection */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Element_Base;
7	use Elementor\Repeater;
8
9	if (!defined('ABSPATH')) {
10	exit; // Exit if accessed directly.
11	}
12
13	class Animated_Gradient_Mesh_Background
14	{
15	private static ?Animated_Gradient_Mesh_Background $_instance = null;
16
17	public static function instance(): Animated_Gradient_Mesh_Background
18	{
19	if (is_null(self::$_instance)) {
20	self::$_instance = new self();
21	}
22	return self::$_instance;
23	}
24
25	public function __construct()
26	{
27	add_action('elementor/element/section/section_background/after_section_end', [$this, 'addControls'], 1);
28	add_action('elementor/element/container/section_background/after_section_end', [$this, 'addControls'], 1);
29	add_action('elementor/element/column/section_style/after_section_end', [$this, 'addControls'], 1);
30	add_action('elementor/frontend/before_render', [$this, 'before_render'], 1);
31	}
32
33	public function addControls(Element_Base $element): void
34	{
35	$element->start_controls_section(
36	'kng_agm_background_section',
37	[
38	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Animated Gradient / Mesh', 'king-addons'),
39	'tab' => Controls_Manager::TAB_STYLE,
40	]
41	);
42
43	$element->add_control(
44	'kng_agm_enable',
45	[
46	'label' => esc_html__('Enable Background', 'king-addons'),
47	'type' => Controls_Manager::SWITCHER,
48	'label_on' => esc_html__('Yes', 'king-addons'),
49	'label_off' => esc_html__('No', 'king-addons'),
50	'return_value' => 'yes',
51	'prefix_class' => 'kng-agm-bg-',
52	]
53	);
54
55	$element->add_control(
56	'kng_agm_type',
57	[
58	'label' => esc_html__('Type', 'king-addons'),
59	'type' => Controls_Manager::SELECT,
60	'options' => [
61	'gradient' => esc_html__('Animated Gradient', 'king-addons'),
62	'mesh' => esc_html__('Mesh', 'king-addons'),
63	],
64	'default' => 'gradient',
65	'prefix_class' => 'kng-agm-type-',
66	'condition' => [
67	'kng_agm_enable' => 'yes',
68	],
69	]
70	);
71
72	$element->add_control(
73	'kng_agm_preset',
74	[
75	'label' => esc_html__('Preset', 'king-addons'),
76	'type' => Controls_Manager::SELECT,
77	'options' => $this->get_preset_options(),
78	'default' => 'aurora',
79	'prefix_class' => 'kng-agm-preset-',
80	'condition' => [
81	'kng_agm_enable' => 'yes',
82	],
83	]
84	);
85
86	$element->add_control(
87	'kng_agm_enable_animation',
88	[
89	'label' => esc_html__('Enable Animation', 'king-addons'),
90	'type' => Controls_Manager::SWITCHER,
91	'label_on' => esc_html__('Yes', 'king-addons'),
92	'label_off' => esc_html__('No', 'king-addons'),
93	'return_value' => 'yes',
94	'default' => 'yes',
95	'prefix_class' => 'kng-agm-animate-',
96	'condition' => [
97	'kng_agm_enable' => 'yes',
98	],
99	]
100	);
101
102	$element->add_control(
103	'kng_agm_speed',
104	[
105	'label' => esc_html__('Speed', 'king-addons'),
106	'type' => Controls_Manager::SLIDER,
107	'range' => [
108	'px' => [
109	'min' => 1,
110	'max' => 100,
111	'step' => 1,
112	],
113	],
114	'default' => [
115	'size' => 40,
116	],
117	'selectors' => [
118	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-speed: {{SIZE}};',
119	],
120	'condition' => [
121	'kng_agm_enable' => 'yes',
122	'kng_agm_enable_animation' => 'yes',
123	],
124	]
125	);
126
127	$element->add_control(
128	'kng_agm_direction',
129	[
130	'label' => esc_html__('Direction', 'king-addons'),
131	'type' => Controls_Manager::SELECT,
132	'options' => [
133	'left-right' => esc_html__('Left to Right', 'king-addons'),
134	'right-left' => esc_html__('Right to Left', 'king-addons'),
135	'top-bottom' => esc_html__('Top to Bottom', 'king-addons'),
136	'bottom-top' => esc_html__('Bottom to Top', 'king-addons'),
137	'diag-lr' => esc_html__('Diagonal (Left)', 'king-addons'),
138	'diag-rl' => esc_html__('Diagonal (Right)', 'king-addons'),
139	],
140	'default' => 'left-right',
141	'prefix_class' => 'kng-agm-direction-',
142	'condition' => [
143	'kng_agm_enable' => 'yes',
144	],
145	]
146	);
147
148	$element->add_control(
149	'kng_agm_opacity',
150	[
151	'label' => esc_html__('Opacity', 'king-addons'),
152	'type' => Controls_Manager::SLIDER,
153	'range' => [
154	'px' => [
155	'min' => 0.1,
156	'max' => 1,
157	'step' => 0.01,
158	],
159	],
160	'default' => [
161	'size' => 1,
162	],
163	'selectors' => [
164	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-opacity: {{SIZE}};',
165	],
166	'condition' => [
167	'kng_agm_enable' => 'yes',
168	],
169	]
170	);
171
172	$element->add_control(
173	'kng_agm_blur',
174	[
175	'label' => esc_html__('Blur', 'king-addons'),
176	'type' => Controls_Manager::SLIDER,
177	'size_units' => ['px'],
178	'range' => [
179	'px' => [
180	'min' => 0,
181	'max' => 20,
182	'step' => 1,
183	],
184	],
185	'default' => [
186	'size' => 0,
187	],
188	'selectors' => [
189	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-blur: {{SIZE}}px;',
190	],
191	'condition' => [
192	'kng_agm_enable' => 'yes',
193	],
194	]
195	);
196
197	$element->add_control(
198	'kng_agm_easing',
199	[
200	'label' => esc_html__('Animation Easing', 'king-addons'),
201	'type' => Controls_Manager::SELECT,
202	'options' => [
203	'linear' => esc_html__('Linear', 'king-addons'),
204	'ease' => esc_html__('Ease', 'king-addons'),
205	'ease-in-out' => esc_html__('Ease In Out', 'king-addons'),
206	'ease-in' => esc_html__('Ease In', 'king-addons'),
207	'ease-out' => esc_html__('Ease Out', 'king-addons'),
208	],
209	'default' => 'ease-in-out',
210	'selectors' => [
211	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-easing: {{VALUE}};',
212	],
213	'condition' => [
214	'kng_agm_enable' => 'yes',
215	'kng_agm_enable_animation' => 'yes',
216	],
217	]
218	);
219
220	$element->add_control(
221	'kng_agm_angle',
222	[
223	'label' => esc_html__('Gradient Angle', 'king-addons'),
224	'type' => Controls_Manager::SLIDER,
225	'size_units' => ['deg'],
226	'range' => [
227	'deg' => [
228	'min' => 0,
229	'max' => 360,
230	'step' => 5,
231	],
232	],
233	'default' => [
234	'size' => 135,
235	],
236	'selectors' => [
237	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-angle: {{SIZE}}deg;',
238	],
239	'condition' => [
240	'kng_agm_enable' => 'yes',
241	'kng_agm_type' => 'gradient',
242	],
243	]
244	);
245
246	$element->add_control(
247	'kng_agm_bg_size',
248	[
249	'label' => esc_html__('Background Size', 'king-addons'),
250	'type' => Controls_Manager::SLIDER,
251	'size_units' => ['%'],
252	'range' => [
253	'%' => [
254	'min' => 100,
255	'max' => 400,
256	'step' => 10,
257	],
258	],
259	'default' => [
260	'size' => 200,
261	],
262	'selectors' => [
263	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-bg-size: {{SIZE}}%;',
264	],
265	'condition' => [
266	'kng_agm_enable' => 'yes',
267	],
268	]
269	);
270
271	$element->add_control(
272	'kng_agm_z_index',
273	[
274	'label' => esc_html__('Z-Index', 'king-addons'),
275	'type' => Controls_Manager::NUMBER,
276	'min' => -1,
277	'max' => 10,
278	'step' => 1,
279	'default' => 0,
280	'selectors' => [
281	'{{WRAPPER}}.kng-agm-bg-yes::before, {{WRAPPER}}.kng-agm-bg-yes::after' => 'z-index: {{VALUE}};',
282	],
283	'condition' => [
284	'kng_agm_enable' => 'yes',
285	],
286	]
287	);
288
289	$element->add_control(
290	'kng_agm_noise',
291	[
292	'label' => esc_html__('Noise Overlay', 'king-addons'),
293	'type' => Controls_Manager::SWITCHER,
294	'label_on' => esc_html__('Yes', 'king-addons'),
295	'label_off' => esc_html__('No', 'king-addons'),
296	'return_value' => 'yes',
297	'default' => 'yes',
298	'prefix_class' => 'kng-agm-noise-',
299	'condition' => [
300	'kng_agm_enable' => 'yes',
301	],
302	]
303	);
304
305	$element->add_control(
306	'kng_agm_noise_amount',
307	[
308	'label' => esc_html__('Noise Amount', 'king-addons'),
309	'type' => Controls_Manager::SLIDER,
310	'range' => [
311	'px' => [
312	'min' => 0,
313	'max' => 0.6,
314	'step' => 0.01,
315	],
316	],
317	'default' => [
318	'size' => 0.18,
319	],
320	'selectors' => [
321	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-noise-opacity: {{SIZE}};',
322	],
323	'condition' => [
324	'kng_agm_enable' => 'yes',
325	'kng_agm_noise' => 'yes',
326	],
327	]
328	);
329
330	$element->add_control(
331	'kng_agm_noise_type',
332	[
333	'label' => esc_html__('Noise Pattern', 'king-addons'),
334	'type' => Controls_Manager::SELECT,
335	'options' => [
336	'grain' => esc_html__('Grain', 'king-addons'),
337	'lines' => esc_html__('Lines', 'king-addons'),
338	'dots' => esc_html__('Dots', 'king-addons'),
339	'crosshatch' => esc_html__('Crosshatch', 'king-addons'),
340	],
341	'default' => 'grain',
342	'prefix_class' => 'kng-agm-noise-type-',
343	'condition' => [
344	'kng_agm_enable' => 'yes',
345	'kng_agm_noise' => 'yes',
346	],
347	]
348	);
349
350	$element->add_control(
351	'kng_agm_custom_colors_heading',
352	[
353	'label' => esc_html__('Custom Colors', 'king-addons'),
354	'type' => Controls_Manager::HEADING,
355	'separator' => 'before',
356	'condition' => [
357	'kng_agm_enable' => 'yes',
358	],
359	]
360	);
361
362	$element->add_control(
363	'kng_agm_use_custom_colors',
364	[
365	'label' => esc_html__('Use Custom Colors', 'king-addons'),
366	'type' => Controls_Manager::SWITCHER,
367	'label_on' => esc_html__('Yes', 'king-addons'),
368	'label_off' => esc_html__('No', 'king-addons'),
369	'return_value' => 'yes',
370	'prefix_class' => 'kng-agm-custom-',
371	'condition' => [
372	'kng_agm_enable' => 'yes',
373	],
374	]
375	);
376
377	$element->add_control(
378	'kng_agm_color_1',
379	[
380	'label' => esc_html__('Color 1', 'king-addons'),
381	'type' => Controls_Manager::COLOR,
382	'default' => '#0b1020',
383	'selectors' => [
384	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-color-1: {{VALUE}};',
385	],
386	'condition' => [
387	'kng_agm_enable' => 'yes',
388	'kng_agm_use_custom_colors' => 'yes',
389	],
390	]
391	);
392
393	$element->add_control(
394	'kng_agm_color_2',
395	[
396	'label' => esc_html__('Color 2', 'king-addons'),
397	'type' => Controls_Manager::COLOR,
398	'default' => '#3dd6d0',
399	'selectors' => [
400	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-color-2: {{VALUE}};',
401	],
402	'condition' => [
403	'kng_agm_enable' => 'yes',
404	'kng_agm_use_custom_colors' => 'yes',
405	],
406	]
407	);
408
409	$element->add_control(
410	'kng_agm_color_3',
411	[
412	'label' => esc_html__('Color 3', 'king-addons'),
413	'type' => Controls_Manager::COLOR,
414	'default' => '#5878ff',
415	'selectors' => [
416	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-color-3: {{VALUE}};',
417	],
418	'condition' => [
419	'kng_agm_enable' => 'yes',
420	'kng_agm_use_custom_colors' => 'yes',
421	],
422	]
423	);
424
425	$element->add_control(
426	'kng_agm_adaptive',
427	[
428	'label' => esc_html__('Adaptive Performance', 'king-addons'),
429	'type' => Controls_Manager::SWITCHER,
430	'label_on' => esc_html__('Yes', 'king-addons'),
431	'label_off' => esc_html__('No', 'king-addons'),
432	'return_value' => 'yes',
433	'default' => 'yes',
434	'prefix_class' => 'kng-agm-adaptive-',
435	'condition' => [
436	'kng_agm_enable' => 'yes',
437	],
438	]
439	);
440
441	$element->add_control(
442	'kng_agm_disable_tablet',
443	[
444	'label' => esc_html__('Disable on Tablet', 'king-addons'),
445	'type' => Controls_Manager::SWITCHER,
446	'label_on' => esc_html__('Yes', 'king-addons'),
447	'label_off' => esc_html__('No', 'king-addons'),
448	'return_value' => 'yes',
449	'prefix_class' => 'kng-agm-disable-tablet-',
450	'condition' => [
451	'kng_agm_enable' => 'yes',
452	],
453	]
454	);
455
456	$element->add_control(
457	'kng_agm_disable_mobile',
458	[
459	'label' => esc_html__('Disable on Mobile', 'king-addons'),
460	'type' => Controls_Manager::SWITCHER,
461	'label_on' => esc_html__('Yes', 'king-addons'),
462	'label_off' => esc_html__('No', 'king-addons'),
463	'return_value' => 'yes',
464	'prefix_class' => 'kng-agm-disable-mobile-',
465	'condition' => [
466	'kng_agm_enable' => 'yes',
467	],
468	]
469	);
470
471	$element->end_controls_section();
472
473	if ($this->can_use_pro()) {
474	$this->add_pro_controls($element);
475	} else {
476	Core::renderProFeaturesSection(
477	$element,
478	Controls_Manager::TAB_STYLE,
479	Controls_Manager::RAW_HTML,
480	'animated-gradient-mesh-background',
481	[
482	esc_html__('Scroll driven animation', 'king-addons'),
483	esc_html__('Blend modes', 'king-addons'),
484	esc_html__('Multi-layer presets', 'king-addons'),
485	esc_html__('Export CSS + fallback', 'king-addons'),
486	]
487	);
488	}
489	}
490
491	private function add_pro_controls(Element_Base $element): void
492	{
493	$element->start_controls_section(
494	'kng_agm_background_pro_section',
495	[
496	'label' => KING_ADDONS_ELEMENTOR_ICON_PRO . esc_html__('Animated Gradient / Mesh (Pro)', 'king-addons'),
497	'tab' => Controls_Manager::TAB_STYLE,
498	'condition' => [
499	'kng_agm_enable' => 'yes',
500	],
501	]
502	);
503
504	$element->add_control(
505	'kng_agm_blend_mode',
506	[
507	'label' => esc_html__('Blend Mode', 'king-addons'),
508	'type' => Controls_Manager::SELECT,
509	'options' => [
510	'normal' => esc_html__('Normal', 'king-addons'),
511	'multiply' => esc_html__('Multiply', 'king-addons'),
512	'screen' => esc_html__('Screen', 'king-addons'),
513	'overlay' => esc_html__('Overlay', 'king-addons'),
514	'soft-light' => esc_html__('Soft Light', 'king-addons'),
515	],
516	'default' => 'normal',
517	'selectors' => [
518	'{{WRAPPER}}.kng-agm-bg-yes' => '--kng-agm-blend-mode: {{VALUE}};',
519	],
520	]
521	);
522
523	$element->add_control(
524	'kng_agm_scroll_heading',
525	[
526	'label' => esc_html__('Scroll Driven Animation', 'king-addons'),
527	'type' => Controls_Manager::HEADING,
528	'separator' => 'before',
529	]
530	);
531
532	$element->add_control(
533	'kng_agm_scroll_mode',
534	[
535	'label' => esc_html__('Scroll Sync', 'king-addons'),
536	'type' => Controls_Manager::SELECT,
537	'options' => [
538	'off' => esc_html__('Off', 'king-addons'),
539	'section' => esc_html__('Section Scroll', 'king-addons'),
540	'page' => esc_html__('Page Scroll', 'king-addons'),
541	'hybrid' => esc_html__('Hybrid', 'king-addons'),
542	],
543	'default' => 'off',
544	]
545	);
546
547	$element->add_control(
548	'kng_agm_scroll_easing',
549	[
550	'label' => esc_html__('Scroll Easing', 'king-addons'),
551	'type' => Controls_Manager::SELECT,
552	'options' => [
553	'linear' => esc_html__('Linear', 'king-addons'),
554	'ease' => esc_html__('Ease', 'king-addons'),
555	'parallax' => esc_html__('Parallax', 'king-addons'),
556	],
557	'default' => 'linear',
558	'condition' => [
559	'kng_agm_scroll_mode!' => 'off',
560	],
561	]
562	);
563
564	$element->add_control(
565	'kng_agm_scroll_start',
566	[
567	'label' => esc_html__('Scroll Start', 'king-addons'),
568	'type' => Controls_Manager::SLIDER,
569	'size_units' => ['%'],
570	'range' => [
571	'%' => [
572	'min' => 0,
573	'max' => 100,
574	'step' => 1,
575	],
576	],
577	'default' => [
578	'size' => 0,
579	],
580	'condition' => [
581	'kng_agm_scroll_mode!' => 'off',
582	],
583	]
584	);
585
586	$element->add_control(
587	'kng_agm_scroll_end',
588	[
589	'label' => esc_html__('Scroll End', 'king-addons'),
590	'type' => Controls_Manager::SLIDER,
591	'size_units' => ['%'],
592	'range' => [
593	'%' => [
594	'min' => 0,
595	'max' => 100,
596	'step' => 1,
597	],
598	],
599	'default' => [
600	'size' => 100,
601	],
602	'condition' => [
603	'kng_agm_scroll_mode!' => 'off',
604	],
605	]
606	);
607
608	$element->add_control(
609	'kng_agm_scroll_reduce_mobile',
610	[
611	'label' => esc_html__('Reduce on Mobile', 'king-addons'),
612	'type' => Controls_Manager::SWITCHER,
613	'label_on' => esc_html__('Yes', 'king-addons'),
614	'label_off' => esc_html__('No', 'king-addons'),
615	'return_value' => 'yes',
616	'default' => 'yes',
617	'condition' => [
618	'kng_agm_scroll_mode!' => 'off',
619	],
620	]
621	);
622
623	$element->add_control(
624	'kng_agm_layers_heading',
625	[
626	'label' => esc_html__('Layers', 'king-addons'),
627	'type' => Controls_Manager::HEADING,
628	'separator' => 'before',
629	]
630	);
631
632	$repeater = new Repeater();
633
634	$repeater->add_control(
635	'enabled',
636	[
637	'label' => esc_html__('Enable Layer', 'king-addons'),
638	'type' => Controls_Manager::SWITCHER,
639	'label_on' => esc_html__('Yes', 'king-addons'),
640	'label_off' => esc_html__('No', 'king-addons'),
641	'return_value' => 'yes',
642	'default' => 'yes',
643	]
644	);
645
646	$repeater->add_control(
647	'type',
648	[
649	'label' => esc_html__('Type', 'king-addons'),
650	'type' => Controls_Manager::SELECT,
651	'options' => [
652	'gradient' => esc_html__('Gradient', 'king-addons'),
653	'mesh' => esc_html__('Mesh', 'king-addons'),
654	],
655	'default' => 'mesh',
656	]
657	);
658
659	$repeater->add_control(
660	'preset',
661	[
662	'label' => esc_html__('Preset', 'king-addons'),
663	'type' => Controls_Manager::SELECT,
664	'options' => $this->get_preset_options(),
665	'default' => 'aurora',
666	]
667	);
668
669	$repeater->add_control(
670	'use_custom_colors',
671	[
672	'label' => esc_html__('Custom Colors', 'king-addons'),
673	'type' => Controls_Manager::SWITCHER,
674	'label_on' => esc_html__('Yes', 'king-addons'),
675	'label_off' => esc_html__('No', 'king-addons'),
676	'return_value' => 'yes',
677	]
678	);
679
680	$repeater->add_control(
681	'color_1',
682	[
683	'label' => esc_html__('Color 1', 'king-addons'),
684	'type' => Controls_Manager::COLOR,
685	'default' => '#3dd6d0',
686	'condition' => [
687	'use_custom_colors' => 'yes',
688	],
689	]
690	);
691
692	$repeater->add_control(
693	'color_2',
694	[
695	'label' => esc_html__('Color 2', 'king-addons'),
696	'type' => Controls_Manager::COLOR,
697	'default' => '#5878ff',
698	'condition' => [
699	'use_custom_colors' => 'yes',
700	],
701	]
702	);
703
704	$repeater->add_control(
705	'color_3',
706	[
707	'label' => esc_html__('Color 3', 'king-addons'),
708	'type' => Controls_Manager::COLOR,
709	'default' => '#0b1020',
710	'condition' => [
711	'use_custom_colors' => 'yes',
712	],
713	]
714	);
715
716	$repeater->add_control(
717	'opacity',
718	[
719	'label' => esc_html__('Opacity', 'king-addons'),
720	'type' => Controls_Manager::SLIDER,
721	'range' => [
722	'px' => [
723	'min' => 0.05,
724	'max' => 1,
725	'step' => 0.01,
726	],
727	],
728	'default' => [
729	'size' => 0.7,
730	],
731	]
732	);
733
734	$repeater->add_control(
735	'blur',
736	[
737	'label' => esc_html__('Blur', 'king-addons'),
738	'type' => Controls_Manager::SLIDER,
739	'size_units' => ['px'],
740	'range' => [
741	'px' => [
742	'min' => 0,
743	'max' => 40,
744	'step' => 1,
745	],
746	],
747	'default' => [
748	'size' => 0,
749	],
750	]
751	);
752
753	$repeater->add_control(
754	'speed',
755	[
756	'label' => esc_html__('Speed', 'king-addons'),
757	'type' => Controls_Manager::SLIDER,
758	'range' => [
759	'px' => [
760	'min' => 1,
761	'max' => 100,
762	'step' => 1,
763	],
764	],
765	'default' => [
766	'size' => 35,
767	],
768	]
769	);
770
771	$repeater->add_control(
772	'direction',
773	[
774	'label' => esc_html__('Direction', 'king-addons'),
775	'type' => Controls_Manager::SELECT,
776	'options' => [
777	'left-right' => esc_html__('Left to Right', 'king-addons'),
778	'right-left' => esc_html__('Right to Left', 'king-addons'),
779	'top-bottom' => esc_html__('Top to Bottom', 'king-addons'),
780	'bottom-top' => esc_html__('Bottom to Top', 'king-addons'),
781	'diag-lr' => esc_html__('Diagonal (Left)', 'king-addons'),
782	'diag-rl' => esc_html__('Diagonal (Right)', 'king-addons'),
783	],
784	'default' => 'left-right',
785	]
786	);
787
788	$repeater->add_control(
789	'blend_mode',
790	[
791	'label' => esc_html__('Blend Mode', 'king-addons'),
792	'type' => Controls_Manager::SELECT,
793	'options' => [
794	'normal' => esc_html__('Normal', 'king-addons'),
795	'multiply' => esc_html__('Multiply', 'king-addons'),
796	'screen' => esc_html__('Screen', 'king-addons'),
797	'overlay' => esc_html__('Overlay', 'king-addons'),
798	'soft-light' => esc_html__('Soft Light', 'king-addons'),
799	],
800	'default' => 'normal',
801	]
802	);
803
804	$repeater->add_control(
805	'size',
806	[
807	'label' => esc_html__('Scale', 'king-addons'),
808	'type' => Controls_Manager::SLIDER,
809	'size_units' => ['%'],
810	'range' => [
811	'%' => [
812	'min' => 120,
813	'max' => 260,
814	'step' => 5,
815	],
816	],
817	'default' => [
818	'size' => 200,
819	],
820	]
821	);
822
823	$element->add_control(
824	'kng_agm_layers',
825	[
826	'label' => esc_html__('Layer Presets', 'king-addons'),
827	'type' => Controls_Manager::REPEATER,
828	'fields' => $repeater->get_controls(),
829	'title_field' => '{{ preset }}',
830	]
831	);
832
833	$element->add_control(
834	'kng_agm_export_heading',
835	[
836	'label' => esc_html__('Export', 'king-addons'),
837	'type' => Controls_Manager::HEADING,
838	'separator' => 'before',
839	]
840	);
841
842	$element->add_control(
843	'kng_agm_export_enable',
844	[
845	'label' => esc_html__('Enable Export Panel', 'king-addons'),
846	'type' => Controls_Manager::SWITCHER,
847	'label_on' => esc_html__('Yes', 'king-addons'),
848	'label_off' => esc_html__('No', 'king-addons'),
849	'return_value' => 'yes',
850	'default' => '',
851	]
852	);
853
854	$element->add_control(
855	'kng_agm_export_fallback',
856	[
857	'label' => esc_html__('Include Fallback', 'king-addons'),
858	'type' => Controls_Manager::SWITCHER,
859	'label_on' => esc_html__('Yes', 'king-addons'),
860	'label_off' => esc_html__('No', 'king-addons'),
861	'return_value' => 'yes',
862	'default' => 'yes',
863	'condition' => [
864	'kng_agm_export_enable' => 'yes',
865	],
866	]
867	);
868
869	$element->add_control(
870	'kng_agm_export_reduced_motion',
871	[
872	'label' => esc_html__('Include Reduced Motion', 'king-addons'),
873	'type' => Controls_Manager::SWITCHER,
874	'label_on' => esc_html__('Yes', 'king-addons'),
875	'label_off' => esc_html__('No', 'king-addons'),
876	'return_value' => 'yes',
877	'default' => 'yes',
878	'condition' => [
879	'kng_agm_export_enable' => 'yes',
880	],
881	]
882	);
883
884	$element->add_control(
885	'kng_agm_export_note',
886	[
887	'type' => Controls_Manager::RAW_HTML,
888	'raw' => '<div class="king-addons-editor-note">' . esc_html__('The export panel appears in the editor preview when enabled.', 'king-addons') . '</div>',
889	'condition' => [
890	'kng_agm_export_enable' => 'yes',
891	],
892	]
893	);
894
895	$element->end_controls_section();
896	}
897
898	public function before_render(Element_Base $element): void
899	{
900	$settings = $element->get_settings_for_display();
901	if (($settings['kng_agm_enable'] ?? '') !== 'yes') {
902	return;
903	}
904
905	$payload = $this->build_payload($settings);
906	if (!$payload) {
907	return;
908	}
909
910	$element->add_render_attribute('_wrapper', 'data-kng-agm', wp_json_encode($payload));
911
912	$this->enqueue_styles();
913
914	if ($this->should_enqueue_script($settings)) {
915	$this->enqueue_script();
916	}
917	}
918
919	private function build_payload(array $settings): array
920	{
921	$payload = [
922	'enabled' => true,
923	'type' => $settings['kng_agm_type'] ?? 'gradient',
924	'preset' => $settings['kng_agm_preset'] ?? 'aurora',
925	'speed' => (int) ($settings['kng_agm_speed']['size'] ?? 40),
926	'direction' => $settings['kng_agm_direction'] ?? 'left-right',
927	'opacity' => (float) ($settings['kng_agm_opacity']['size'] ?? 1),
928	'blur' => (float) ($settings['kng_agm_blur']['size'] ?? 0),
929	'easing' => $settings['kng_agm_easing'] ?? 'ease-in-out',
930	'angle' => (int) ($settings['kng_agm_angle']['size'] ?? 135),
931	'bgSize' => (int) ($settings['kng_agm_bg_size']['size'] ?? 200),
932	'zIndex' => (int) ($settings['kng_agm_z_index'] ?? 0),
933	'animate' => ($settings['kng_agm_enable_animation'] ?? 'yes') === 'yes',
934	'noise' => [
935	'enabled' => ($settings['kng_agm_noise'] ?? '') === 'yes',
936	'amount' => (float) ($settings['kng_agm_noise_amount']['size'] ?? 0.18),
937	'type' => $settings['kng_agm_noise_type'] ?? 'grain',
938	],
939	'customColors' => [
940	'enabled' => ($settings['kng_agm_use_custom_colors'] ?? '') === 'yes',
941	'color1' => $settings['kng_agm_color_1'] ?? '#0b1020',
942	'color2' => $settings['kng_agm_color_2'] ?? '#3dd6d0',
943	'color3' => $settings['kng_agm_color_3'] ?? '#5878ff',
944	],
945	'adaptive' => ($settings['kng_agm_adaptive'] ?? 'yes') === 'yes',
946	'disable' => [
947	'tablet' => ($settings['kng_agm_disable_tablet'] ?? '') === 'yes',
948	'mobile' => ($settings['kng_agm_disable_mobile'] ?? '') === 'yes',
949	],
950	];
951
952	if ($this->can_use_pro()) {
953	$payload['blendMode'] = $settings['kng_agm_blend_mode'] ?? 'normal';
954	$payload['scroll'] = [
955	'mode' => $settings['kng_agm_scroll_mode'] ?? 'off',
956	'easing' => $settings['kng_agm_scroll_easing'] ?? 'linear',
957	'start' => (float) ($settings['kng_agm_scroll_start']['size'] ?? 0),
958	'end' => (float) ($settings['kng_agm_scroll_end']['size'] ?? 100),
959	'reduceMobile' => ($settings['kng_agm_scroll_reduce_mobile'] ?? 'yes') === 'yes',
960	];
961	$payload['layers'] = $this->normalize_layers($settings['kng_agm_layers'] ?? []);
962	$payload['export'] = [
963	'enabled' => ($settings['kng_agm_export_enable'] ?? '') === 'yes',
964	'includeFallback' => ($settings['kng_agm_export_fallback'] ?? 'yes') === 'yes',
965	'includeReducedMotion' => ($settings['kng_agm_export_reduced_motion'] ?? 'yes') === 'yes',
966	];
967	}
968
969	return $payload;
970	}
971
972	private function normalize_layers(array $layers): array
973	{
974	$normalized = [];
975
976	foreach ($layers as $layer) {
977	if (($layer['enabled'] ?? '') !== 'yes') {
978	continue;
979	}
980
981	$entry = [
982	'type' => $layer['type'] ?? 'mesh',
983	'preset' => $layer['preset'] ?? 'aurora',
984	'opacity' => (float) ($layer['opacity']['size'] ?? 0.7),
985	'blur' => (float) ($layer['blur']['size'] ?? 0),
986	'speed' => (int) ($layer['speed']['size'] ?? 35),
987	'direction' => $layer['direction'] ?? 'left-right',
988	'blendMode' => $layer['blend_mode'] ?? 'normal',
989	'size' => (int) ($layer['size']['size'] ?? 200),
990	];
991
992	if (($layer['use_custom_colors'] ?? '') === 'yes') {
993	$entry['colors'] = [
994	$layer['color_1'] ?? '#3dd6d0',
995	$layer['color_2'] ?? '#5878ff',
996	$layer['color_3'] ?? '#0b1020',
997	];
998	}
999
1000	$normalized[] = $entry;
1001	}
1002
1003	return array_slice($normalized, 0, 5);
1004	}
1005
1006	private function should_enqueue_script(array $settings): bool
1007	{
1008	if (!$this->can_use_pro()) {
1009	return false;
1010	}
1011
1012	if (($settings['kng_agm_scroll_mode'] ?? 'off') !== 'off') {
1013	return true;
1014	}
1015
1016	if (!empty($settings['kng_agm_layers'])) {
1017	return true;
1018	}
1019
1020	return ($settings['kng_agm_export_enable'] ?? '') === 'yes';
1021	}
1022
1023	private function enqueue_styles(): void
1024	{
1025	$handle = KING_ADDONS_ASSETS_UNIQUE_KEY . '-animated-gradient-mesh-background-style';
1026
1027	if (!wp_style_is($handle)) {
1028	wp_enqueue_style(
1029	$handle,
1030	KING_ADDONS_URL . 'includes/features/Animated_Gradient_Mesh_Background/style.css',
1031	[],
1032	KING_ADDONS_VERSION
1033	);
1034	}
1035	}
1036
1037	private function enqueue_script(): void
1038	{
1039	$handle = KING_ADDONS_ASSETS_UNIQUE_KEY . '-animated-gradient-mesh-background-script';
1040
1041	if (!wp_script_is($handle)) {
1042	wp_enqueue_script($handle);
1043	}
1044	}
1045
1046	private function can_use_pro(): bool
1047	{
1048	if (!function_exists('king_addons_freemius')) {
1049	return false;
1050	}
1051
1052	return king_addons_freemius()->can_use_premium_code__premium_only();
1053	}
1054
1055	private function get_preset_options(): array
1056	{
1057	return [
1058	'aurora' => esc_html__('Aurora', 'king-addons'),
1059	'sunset' => esc_html__('Sunset', 'king-addons'),
1060	'ocean' => esc_html__('Ocean', 'king-addons'),
1061	'violet-mist' => esc_html__('Violet Mist', 'king-addons'),
1062	'lime-neon' => esc_html__('Lime Neon', 'king-addons'),
1063	'mono-glass' => esc_html__('Mono Glass', 'king-addons'),
1064	'forest-dew' => esc_html__('Forest Dew', 'king-addons'),
1065	'candy-pop' => esc_html__('Candy Pop', 'king-addons'),
1066	'midnight-blue' => esc_html__('Midnight Blue', 'king-addons'),
1067	'rose-gold' => esc_html__('Rose Gold', 'king-addons'),
1068	];
1069	}
1070	}
1071