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

Kinetic_Text_Hover.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/widgets/Kinetic_Text_Hover/Kinetic_Text_Hover.php

1,485 lines 49.6 KB

Raw Download Zip

1	<?php
2	/**
3	* Kinetic Text Hover Widget.
4	*
5	* @package King_Addons
6	*/
7
8	namespace King_Addons;
9
10	use Elementor\Controls_Manager;
11	use Elementor\Group_Control_Background;
12	use Elementor\Group_Control_Typography;
13	use Elementor\Widget_Base;
14
15	if (!defined('ABSPATH')) {
16	exit;
17	}
18
19	class Kinetic_Text_Hover extends Widget_Base
20	{
21	public function get_name(): string
22	{
23	return 'king-addons-kinetic-text-hover';
24	}
25
26	public function get_title(): string
27	{
28	return esc_html__('Kinetic Text Hover', 'king-addons');
29	}
30
31	public function get_icon(): string
32	{
33	return 'king-addons-icon king-addons-kinetic-text-hover';
34	}
35
36	public function get_style_depends(): array
37	{
38	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-kinetic-text-hover-style'];
39	}
40
41	public function get_script_depends(): array
42	{
43	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-kinetic-text-hover-script'];
44	}
45
46	public function get_categories(): array
47	{
48	return ['king-addons'];
49	}
50
51	public function get_keywords(): array
52	{
53	return ['kinetic', 'text', 'hover', 'chroma', 'glow', 'underline', 'reveal', 'typography'];
54	}
55
56	public function register_controls(): void
57	{
58	$this->register_content_controls();
59	$this->register_variable_font_controls();
60	$this->register_magnetic_controls();
61	$this->register_reveal_controls();
62	$this->register_motion_controls();
63	$this->register_style_text_controls();
64	$this->register_style_effect_controls();
65	$this->register_style_preset_controls();
66	$this->register_pro_notice_controls();
67	}
68
69	public function render(): void
70	{
71	$settings = $this->get_settings_for_display();
72
73	$text = sanitize_textarea_field((string) ($settings['kng_text'] ?? ''));
74	if ($text === '') {
75	$text = esc_html__('Kinetic Text Hover', 'king-addons');
76	}
77
78	$tag = $this->sanitize_html_tag($settings['kng_html_tag'] ?? 'h2');
79	$preset = $settings['kng_preset'] ?? 'split-underline';
80	$trigger = $settings['kng_trigger'] ?? 'hover';
81	$mobile_behavior = $settings['kng_mobile_behavior'] ?? 'disable';
82	$gradient_enabled = ($settings['kng_gradient_text_enable'] ?? '') === 'yes';
83
84	if (!$this->can_use_pro() && $trigger === 'idle') {
85	$trigger = 'hover';
86	}
87
88	$classes = [
89	'king-addons-kinetic-text-hover',
90	'is-preset-' . $preset,
91	];
92
93	if ($gradient_enabled) {
94	$classes[] = 'is-gradient-text';
95	}
96
97	$mask_direction = $settings['kng_mask_direction'] ?? 'left';
98	if ($preset === 'mask-reveal') {
99	$classes[] = 'is-mask-' . $mask_direction;
100	}
101
102	$link = is_array($settings['kng_link'] ?? null) ? $settings['kng_link'] : [];
103	$has_link = !empty($link['url']);
104	if ($has_link) {
105	$classes[] = 'is-link';
106	}
107
108	$can_pro = $this->can_use_pro();
109	$options = [
110	'preset' => $preset,
111	'trigger' => $trigger,
112	'mobileBehavior' => $mobile_behavior,
113	'intensity' => (int) ($this->get_slider_size($settings, 'kng_effect_intensity', 35)),
114	'letterDrift' => [
115	'max' => (float) $this->get_slider_size($settings, 'kng_letter_drift_max', 10),
116	'randomness' => (float) $this->get_slider_size($settings, 'kng_letter_drift_randomness', 40),
117	],
118	'magnetic' => [
119	'enabled' => $can_pro && (($settings['kng_magnetic_enable'] ?? '') === 'yes'),
120	'strength' => (float) ($settings['kng_magnetic_strength']['size'] ?? 35),
121	'radius' => (float) ($settings['kng_magnetic_radius']['size'] ?? 140),
122	'maxOffset' => (float) ($settings['kng_magnetic_max_offset']['size'] ?? 14),
123	'smoothing' => (float) ($settings['kng_magnetic_smoothing'] ?? 0.35),
124	'clamp' => $settings['kng_magnetic_clamp'] ?? 'soft',
125	'disableMobile' => ($settings['kng_magnetic_disable_mobile'] ?? '') === 'yes',
126	],
127	'variableFont' => [
128	'enabled' => $can_pro && (($settings['kng_varfont_enable'] ?? '') === 'yes'),
129	'wghtMin' => (float) ($settings['kng_varfont_wght_min'] ?? 400),
130	'wghtMax' => (float) ($settings['kng_varfont_wght_max'] ?? 700),
131	'wdthMin' => (float) ($settings['kng_varfont_wdth_min'] ?? 100),
132	'wdthMax' => (float) ($settings['kng_varfont_wdth_max'] ?? 110),
133	'widthSafe' => ($settings['kng_varfont_width_safe'] ?? '') === 'yes',
134	],
135	'reveal' => [
136	'enabled' => $can_pro && (($settings['kng_reveal_enable'] ?? '') === 'yes'),
137	'type' => $settings['kng_reveal_type'] ?? 'fade',
138	'threshold' => (float) ($settings['kng_reveal_threshold'] ?? 0.2),
139	'once' => ($settings['kng_reveal_once'] ?? '') === 'yes',
140	],
141	'reducedMotion' => [
142	'respect' => $can_pro && (($settings['kng_motion_respect'] ?? '') === 'yes'),
143	'mode' => $settings['kng_motion_mode'] ?? 'simplify',
144	],
145	'editorPreview' => $this->is_editor_mode(),
146	];
147
148	if ($options['reveal']['enabled']) {
149	$classes[] = 'has-reveal';
150	$classes[] = 'reveal-' . $options['reveal']['type'];
151	}
152
153	$this->add_render_attribute('wrapper', [
154	'class' => $classes,
155	'data-options' => wp_json_encode($options),
156	'data-trigger' => $trigger,
157	'data-mobile' => $mobile_behavior,
158	]);
159
160	echo '<' . esc_attr($tag) . ' ' . $this->get_render_attribute_string('wrapper') . '>';
161
162	if ($has_link) {
163	$this->add_render_attribute('link', 'class', 'king-addons-kinetic-text-hover__link');
164	$this->add_render_attribute('link', 'href', esc_url($link['url']));
165	if (!empty($link['is_external'])) {
166	$this->add_render_attribute('link', 'target', '_blank');
167	}
168	$rel = [];
169	if (!empty($link['nofollow'])) {
170	$rel[] = 'nofollow';
171	}
172	if (!empty($link['is_external'])) {
173	$rel[] = 'noopener';
174	$rel[] = 'noreferrer';
175	}
176	if ($rel) {
177	$this->add_render_attribute('link', 'rel', implode(' ', array_unique($rel)));
178	}
179	echo '<a ' . $this->get_render_attribute_string('link') . '>';
180	}
181
182	echo '<span class="king-addons-kinetic-text-hover__inner">';
183	echo '<span class="king-addons-kinetic-text-hover__sr">' . esc_html($text) . '</span>';
184	echo '<span class="king-addons-kinetic-text-hover__visual" aria-hidden="true" data-text="' . esc_attr($text) . '">' . esc_html($text) . '</span>';
185	echo '</span>';
186
187	if ($has_link) {
188	echo '</a>';
189	}
190
191	echo '</' . esc_attr($tag) . '>';
192	}
193
194	protected function register_content_controls(): void
195	{
196	$this->start_controls_section(
197	'kng_content_section',
198	[
199	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
200	'tab' => Controls_Manager::TAB_CONTENT,
201	]
202	);
203
204	$this->add_control(
205	'kng_text',
206	[
207	'label' => esc_html__('Text', 'king-addons'),
208	'type' => Controls_Manager::TEXTAREA,
209	'default' => esc_html__('Kinetic Text Hover', 'king-addons'),
210	'label_block' => true,
211	'dynamic' => [
212	'active' => true,
213	],
214	]
215	);
216
217	$this->add_control(
218	'kng_html_tag',
219	[
220	'label' => esc_html__('HTML Tag', 'king-addons'),
221	'type' => Controls_Manager::SELECT,
222	'default' => 'h2',
223	'options' => [
224	'h1' => 'H1',
225	'h2' => 'H2',
226	'h3' => 'H3',
227	'h4' => 'H4',
228	'h5' => 'H5',
229	'h6' => 'H6',
230	'div' => 'DIV',
231	'span' => 'SPAN',
232	'p' => 'P',
233	],
234	]
235	);
236
237	$this->add_control(
238	'kng_link',
239	[
240	'label' => esc_html__('Link', 'king-addons'),
241	'type' => Controls_Manager::URL,
242	'placeholder' => esc_html__('https://your-link.com', 'king-addons'),
243	'default' => [
244	'url' => '',
245	],
246	]
247	);
248
249	$this->add_control(
250	'kng_preset',
251	[
252	'label' => esc_html__('Preset', 'king-addons'),
253	'type' => Controls_Manager::SELECT,
254	'default' => 'split-underline',
255	'options' => [
256	'split-underline' => esc_html__('Split Underline', 'king-addons'),
257	'glow-stroke' => esc_html__('Glow Stroke', 'king-addons'),
258	'chroma-shift' => esc_html__('Chroma Shift', 'king-addons'),
259	'letter-drift' => esc_html__('Letter Drift', 'king-addons'),
260	'sheen-sweep' => esc_html__('Sheen Sweep', 'king-addons'),
261	'mask-reveal' => esc_html__('Mask Reveal', 'king-addons'),
262	],
263	]
264	);
265
266	$trigger_options = [
267	'hover' => esc_html__('Hover', 'king-addons'),
268	'hover-move' => esc_html__('Hover + Cursor Move', 'king-addons'),
269	];
270
271	if ($this->can_use_pro()) {
272	$trigger_options['idle'] = esc_html__('Always On (Idle)', 'king-addons');
273	} else {
274	$trigger_options['idle'] = $this->get_pro_label(esc_html__('Always On (Idle)', 'king-addons'));
275	}
276
277	$this->add_control(
278	'kng_trigger',
279	[
280	'label' => esc_html__('Trigger', 'king-addons'),
281	'type' => Controls_Manager::SELECT,
282	'default' => 'hover',
283	'options' => $trigger_options,
284	]
285	);
286
287	$this->add_control(
288	'kng_mobile_behavior',
289	[
290	'label' => esc_html__('Mobile Behavior', 'king-addons'),
291	'type' => Controls_Manager::SELECT,
292	'default' => 'disable',
293	'options' => [
294	'disable' => esc_html__('Disable Effects', 'king-addons'),
295	'tap' => esc_html__('Tap to Activate', 'king-addons'),
296	],
297	]
298	);
299
300	$this->end_controls_section();
301	}
302
303	protected function register_variable_font_controls(): void
304	{
305	$this->start_controls_section(
306	'kng_varfont_section',
307	[
308	'label' => $this->get_pro_label(esc_html__('Variable Font Axes', 'king-addons')),
309	'tab' => Controls_Manager::TAB_CONTENT,
310	'classes' => $this->get_pro_control_class(),
311	]
312	);
313
314	$this->add_control(
315	'kng_varfont_enable',
316	[
317	'label' => $this->get_pro_label(esc_html__('Enable Variable Font', 'king-addons')),
318	'type' => Controls_Manager::SWITCHER,
319	'return_value' => 'yes',
320	'default' => '',
321	'classes' => $this->get_pro_control_class(),
322	]
323	);
324
325	$this->add_control(
326	'kng_varfont_notice',
327	[
328	'type' => Controls_Manager::RAW_HTML,
329	'raw' => esc_html__('Requires a variable font that supports wght/wdth axes.', 'king-addons'),
330	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
331	'condition' => [
332	'kng_varfont_enable' => 'yes',
333	],
334	]
335	);
336
337	$this->add_control(
338	'kng_varfont_wght_min',
339	[
340	'label' => $this->get_pro_label(esc_html__('Weight Min (wght)', 'king-addons')),
341	'type' => Controls_Manager::NUMBER,
342	'default' => 400,
343	'min' => 100,
344	'max' => 900,
345	'step' => 1,
346	'classes' => $this->get_pro_control_class(),
347	'condition' => [
348	'kng_varfont_enable' => 'yes',
349	],
350	]
351	);
352
353	$this->add_control(
354	'kng_varfont_wght_max',
355	[
356	'label' => $this->get_pro_label(esc_html__('Weight Max (wght)', 'king-addons')),
357	'type' => Controls_Manager::NUMBER,
358	'default' => 700,
359	'min' => 100,
360	'max' => 900,
361	'step' => 1,
362	'classes' => $this->get_pro_control_class(),
363	'condition' => [
364	'kng_varfont_enable' => 'yes',
365	],
366	]
367	);
368
369	$this->add_control(
370	'kng_varfont_wdth_min',
371	[
372	'label' => $this->get_pro_label(esc_html__('Width Min (wdth)', 'king-addons')),
373	'type' => Controls_Manager::NUMBER,
374	'default' => 100,
375	'min' => 75,
376	'max' => 125,
377	'step' => 1,
378	'classes' => $this->get_pro_control_class(),
379	'condition' => [
380	'kng_varfont_enable' => 'yes',
381	],
382	]
383	);
384
385	$this->add_control(
386	'kng_varfont_wdth_max',
387	[
388	'label' => $this->get_pro_label(esc_html__('Width Max (wdth)', 'king-addons')),
389	'type' => Controls_Manager::NUMBER,
390	'default' => 110,
391	'min' => 75,
392	'max' => 125,
393	'step' => 1,
394	'classes' => $this->get_pro_control_class(),
395	'condition' => [
396	'kng_varfont_enable' => 'yes',
397	],
398	]
399	);
400
401	$this->add_control(
402	'kng_varfont_width_safe',
403	[
404	'label' => $this->get_pro_label(esc_html__('Use Width-Safe Mode', 'king-addons')),
405	'type' => Controls_Manager::SWITCHER,
406	'return_value' => 'yes',
407	'default' => 'yes',
408	'classes' => $this->get_pro_control_class(),
409	'condition' => [
410	'kng_varfont_enable' => 'yes',
411	],
412	]
413	);
414
415	$this->end_controls_section();
416	}
417
418	protected function register_magnetic_controls(): void
419	{
420	$this->start_controls_section(
421	'kng_magnetic_section',
422	[
423	'label' => $this->get_pro_label(esc_html__('Magnetic Letters', 'king-addons')),
424	'tab' => Controls_Manager::TAB_CONTENT,
425	'classes' => $this->get_pro_control_class(),
426	]
427	);
428
429	$this->add_control(
430	'kng_magnetic_enable',
431	[
432	'label' => $this->get_pro_label(esc_html__('Enable Magnetic Letters', 'king-addons')),
433	'type' => Controls_Manager::SWITCHER,
434	'return_value' => 'yes',
435	'default' => '',
436	'classes' => $this->get_pro_control_class(),
437	]
438	);
439
440	$this->add_control(
441	'kng_magnetic_strength',
442	[
443	'label' => $this->get_pro_label(esc_html__('Strength', 'king-addons')),
444	'type' => Controls_Manager::SLIDER,
445	'size_units' => ['%'],
446	'range' => [
447	'%' => [
448	'min' => 0,
449	'max' => 100,
450	],
451	],
452	'default' => [
453	'size' => 35,
454	'unit' => '%',
455	],
456	'classes' => $this->get_pro_control_class(),
457	'condition' => [
458	'kng_magnetic_enable' => 'yes',
459	],
460	]
461	);
462
463	$this->add_control(
464	'kng_magnetic_radius',
465	[
466	'label' => $this->get_pro_label(esc_html__('Radius', 'king-addons')),
467	'type' => Controls_Manager::SLIDER,
468	'size_units' => ['px'],
469	'range' => [
470	'px' => [
471	'min' => 40,
472	'max' => 320,
473	],
474	],
475	'default' => [
476	'size' => 140,
477	'unit' => 'px',
478	],
479	'classes' => $this->get_pro_control_class(),
480	'condition' => [
481	'kng_magnetic_enable' => 'yes',
482	],
483	]
484	);
485
486	$this->add_control(
487	'kng_magnetic_max_offset',
488	[
489	'label' => $this->get_pro_label(esc_html__('Max Offset', 'king-addons')),
490	'type' => Controls_Manager::SLIDER,
491	'size_units' => ['px'],
492	'range' => [
493	'px' => [
494	'min' => 0,
495	'max' => 30,
496	],
497	],
498	'default' => [
499	'size' => 14,
500	'unit' => 'px',
501	],
502	'classes' => $this->get_pro_control_class(),
503	'condition' => [
504	'kng_magnetic_enable' => 'yes',
505	],
506	]
507	);
508
509	$this->add_control(
510	'kng_magnetic_smoothing',
511	[
512	'label' => $this->get_pro_label(esc_html__('Smoothing', 'king-addons')),
513	'type' => Controls_Manager::NUMBER,
514	'default' => 0.35,
515	'min' => 0,
516	'max' => 1,
517	'step' => 0.05,
518	'classes' => $this->get_pro_control_class(),
519	'condition' => [
520	'kng_magnetic_enable' => 'yes',
521	],
522	]
523	);
524
525	$this->add_control(
526	'kng_magnetic_clamp',
527	[
528	'label' => $this->get_pro_label(esc_html__('Clamp Mode', 'king-addons')),
529	'type' => Controls_Manager::SELECT,
530	'default' => 'soft',
531	'options' => [
532	'none' => esc_html__('None', 'king-addons'),
533	'soft' => esc_html__('Soft', 'king-addons'),
534	'hard' => esc_html__('Hard', 'king-addons'),
535	],
536	'classes' => $this->get_pro_control_class(),
537	'condition' => [
538	'kng_magnetic_enable' => 'yes',
539	],
540	]
541	);
542
543	$this->add_control(
544	'kng_magnetic_disable_mobile',
545	[
546	'label' => $this->get_pro_label(esc_html__('Disable on Mobile', 'king-addons')),
547	'type' => Controls_Manager::SWITCHER,
548	'return_value' => 'yes',
549	'default' => 'yes',
550	'classes' => $this->get_pro_control_class(),
551	'condition' => [
552	'kng_magnetic_enable' => 'yes',
553	],
554	]
555	);
556
557	$this->end_controls_section();
558	}
559
560	protected function register_reveal_controls(): void
561	{
562	$this->start_controls_section(
563	'kng_reveal_section',
564	[
565	'label' => $this->get_pro_label(esc_html__('Reveal on Scroll', 'king-addons')),
566	'tab' => Controls_Manager::TAB_CONTENT,
567	'classes' => $this->get_pro_control_class(),
568	]
569	);
570
571	$this->add_control(
572	'kng_reveal_enable',
573	[
574	'label' => $this->get_pro_label(esc_html__('Enable Reveal', 'king-addons')),
575	'type' => Controls_Manager::SWITCHER,
576	'return_value' => 'yes',
577	'default' => '',
578	'classes' => $this->get_pro_control_class(),
579	]
580	);
581
582	$this->add_control(
583	'kng_reveal_type',
584	[
585	'label' => $this->get_pro_label(esc_html__('Reveal Type', 'king-addons')),
586	'type' => Controls_Manager::SELECT,
587	'default' => 'fade',
588	'options' => [
589	'fade' => esc_html__('Fade', 'king-addons'),
590	'slide' => esc_html__('Slide Up', 'king-addons'),
591	'clip' => esc_html__('Clip Reveal', 'king-addons'),
592	],
593	'classes' => $this->get_pro_control_class(),
594	'condition' => [
595	'kng_reveal_enable' => 'yes',
596	],
597	]
598	);
599
600	$this->add_control(
601	'kng_reveal_duration',
602	[
603	'label' => $this->get_pro_label(esc_html__('Duration', 'king-addons')),
604	'type' => Controls_Manager::SLIDER,
605	'size_units' => ['ms'],
606	'range' => [
607	'ms' => [
608	'min' => 100,
609	'max' => 2000,
610	],
611	],
612	'default' => [
613	'size' => 600,
614	'unit' => 'ms',
615	],
616	'selectors' => [
617	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-reveal-duration: {{SIZE}}ms;',
618	],
619	'classes' => $this->get_pro_control_class(),
620	'condition' => [
621	'kng_reveal_enable' => 'yes',
622	],
623	]
624	);
625
626	$this->add_control(
627	'kng_reveal_delay',
628	[
629	'label' => $this->get_pro_label(esc_html__('Delay', 'king-addons')),
630	'type' => Controls_Manager::SLIDER,
631	'size_units' => ['ms'],
632	'range' => [
633	'ms' => [
634	'min' => 0,
635	'max' => 1000,
636	],
637	],
638	'default' => [
639	'size' => 0,
640	'unit' => 'ms',
641	],
642	'selectors' => [
643	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-reveal-delay: {{SIZE}}ms;',
644	],
645	'classes' => $this->get_pro_control_class(),
646	'condition' => [
647	'kng_reveal_enable' => 'yes',
648	],
649	]
650	);
651
652	$this->add_control(
653	'kng_reveal_threshold',
654	[
655	'label' => $this->get_pro_label(esc_html__('Threshold', 'king-addons')),
656	'type' => Controls_Manager::NUMBER,
657	'default' => 0.2,
658	'min' => 0,
659	'max' => 1,
660	'step' => 0.05,
661	'classes' => $this->get_pro_control_class(),
662	'condition' => [
663	'kng_reveal_enable' => 'yes',
664	],
665	]
666	);
667
668	$this->add_control(
669	'kng_reveal_once',
670	[
671	'label' => $this->get_pro_label(esc_html__('Reveal Once', 'king-addons')),
672	'type' => Controls_Manager::SWITCHER,
673	'return_value' => 'yes',
674	'default' => 'yes',
675	'classes' => $this->get_pro_control_class(),
676	'condition' => [
677	'kng_reveal_enable' => 'yes',
678	],
679	]
680	);
681
682	$this->end_controls_section();
683	}
684
685	protected function register_motion_controls(): void
686	{
687	$this->start_controls_section(
688	'kng_motion_section',
689	[
690	'label' => $this->get_pro_label(esc_html__('Reduced Motion', 'king-addons')),
691	'tab' => Controls_Manager::TAB_CONTENT,
692	'classes' => $this->get_pro_control_class(),
693	]
694	);
695
696	$this->add_control(
697	'kng_motion_respect',
698	[
699	'label' => $this->get_pro_label(esc_html__('Respect Reduced Motion', 'king-addons')),
700	'type' => Controls_Manager::SWITCHER,
701	'return_value' => 'yes',
702	'default' => 'yes',
703	'classes' => $this->get_pro_control_class(),
704	]
705	);
706
707	$this->add_control(
708	'kng_motion_mode',
709	[
710	'label' => $this->get_pro_label(esc_html__('Mode', 'king-addons')),
711	'type' => Controls_Manager::SELECT,
712	'default' => 'simplify',
713	'options' => [
714	'disable' => esc_html__('Disable Animations', 'king-addons'),
715	'simplify' => esc_html__('Simplify Effects', 'king-addons'),
716	],
717	'classes' => $this->get_pro_control_class(),
718	'condition' => [
719	'kng_motion_respect' => 'yes',
720	],
721	]
722	);
723
724	$this->end_controls_section();
725	}
726
727	protected function register_style_text_controls(): void
728	{
729	$this->start_controls_section(
730	'kng_style_text_section',
731	[
732	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Typography', 'king-addons'),
733	'tab' => Controls_Manager::TAB_STYLE,
734	]
735	);
736
737	$this->add_group_control(
738	Group_Control_Typography::get_type(),
739	[
740	'name' => 'kng_text_typography',
741	'selector' => '{{WRAPPER}} .king-addons-kinetic-text-hover__visual',
742	]
743	);
744
745	$this->add_responsive_control(
746	'kng_text_align',
747	[
748	'label' => esc_html__('Alignment', 'king-addons'),
749	'type' => Controls_Manager::CHOOSE,
750	'options' => [
751	'left' => [
752	'title' => esc_html__('Left', 'king-addons'),
753	'icon' => 'eicon-text-align-left',
754	],
755	'center' => [
756	'title' => esc_html__('Center', 'king-addons'),
757	'icon' => 'eicon-text-align-center',
758	],
759	'right' => [
760	'title' => esc_html__('Right', 'king-addons'),
761	'icon' => 'eicon-text-align-right',
762	],
763	],
764	'selectors' => [
765	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
766	],
767	]
768	);
769
770	$this->add_control(
771	'kng_text_color',
772	[
773	'label' => esc_html__('Text Color', 'king-addons'),
774	'type' => Controls_Manager::COLOR,
775	'selectors' => [
776	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-color: {{VALUE}};',
777	],
778	]
779	);
780
781	$this->add_control(
782	'kng_text_hover_color',
783	[
784	'label' => esc_html__('Hover Color', 'king-addons'),
785	'type' => Controls_Manager::COLOR,
786	'selectors' => [
787	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-hover-color: {{VALUE}};',
788	],
789	]
790	);
791
792	$this->add_control(
793	'kng_text_stroke_color',
794	[
795	'label' => esc_html__('Stroke Color', 'king-addons'),
796	'type' => Controls_Manager::COLOR,
797	'selectors' => [
798	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-stroke-color: {{VALUE}};',
799	],
800	]
801	);
802
803	$this->add_control(
804	'kng_gradient_text_enable',
805	[
806	'label' => esc_html__('Gradient Text', 'king-addons'),
807	'type' => Controls_Manager::SWITCHER,
808	'return_value' => 'yes',
809	'default' => '',
810	'separator' => 'before',
811	]
812	);
813
814	$this->add_group_control(
815	Group_Control_Background::get_type(),
816	[
817	'name' => 'kng_text_gradient',
818	'types' => ['gradient'],
819	'selector' => '{{WRAPPER}} .king-addons-kinetic-text-hover__visual',
820	'condition' => [
821	'kng_gradient_text_enable' => 'yes',
822	],
823	]
824	);
825
826	$this->add_group_control(
827	Group_Control_Background::get_type(),
828	[
829	'name' => 'kng_text_background',
830	'types' => ['classic', 'gradient'],
831	'selector' => '{{WRAPPER}} .king-addons-kinetic-text-hover__inner',
832	]
833	);
834
835	$this->add_responsive_control(
836	'kng_container_padding',
837	[
838	'label' => esc_html__('Padding', 'king-addons'),
839	'type' => Controls_Manager::DIMENSIONS,
840	'size_units' => ['px', 'em', '%'],
841	'selectors' => [
842	'{{WRAPPER}} .king-addons-kinetic-text-hover__inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
843	],
844	'separator' => 'before',
845	]
846	);
847
848	$this->add_control(
849	'kng_letter_spacing_hover',
850	[
851	'label' => esc_html__('Letter Spacing on Hover', 'king-addons'),
852	'type' => Controls_Manager::SLIDER,
853	'size_units' => ['px', 'em'],
854	'range' => [
855	'px' => [
856	'min' => -5,
857	'max' => 20,
858	],
859	'em' => [
860	'min' => -0.2,
861	'max' => 1,
862	'step' => 0.01,
863	],
864	],
865	'selectors' => [
866	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-letter-spacing-hover: {{SIZE}}{{UNIT}};',
867	],
868	]
869	);
870
871	$this->end_controls_section();
872	}
873
874	protected function register_style_effect_controls(): void
875	{
876	$this->start_controls_section(
877	'kng_style_effects_section',
878	[
879	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Effects', 'king-addons'),
880	'tab' => Controls_Manager::TAB_STYLE,
881	]
882	);
883
884	$this->add_control(
885	'kng_effect_intensity',
886	[
887	'label' => esc_html__('Intensity', 'king-addons'),
888	'type' => Controls_Manager::SLIDER,
889	'size_units' => ['%'],
890	'range' => [
891	'%' => [
892	'min' => 0,
893	'max' => 100,
894	],
895	],
896	'default' => [
897	'size' => 35,
898	'unit' => '%',
899	],
900	'selectors' => [
901	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-intensity: calc({{SIZE}} / 100);',
902	],
903	]
904	);
905
906	$this->add_control(
907	'kng_effect_speed',
908	[
909	'label' => esc_html__('Speed', 'king-addons'),
910	'type' => Controls_Manager::SLIDER,
911	'size_units' => ['ms'],
912	'range' => [
913	'ms' => [
914	'min' => 100,
915	'max' => 2000,
916	],
917	],
918	'default' => [
919	'size' => 420,
920	'unit' => 'ms',
921	],
922	'selectors' => [
923	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-speed: {{SIZE}}ms;',
924	],
925	]
926	);
927
928	$this->add_control(
929	'kng_effect_easing',
930	[
931	'label' => esc_html__('Easing', 'king-addons'),
932	'type' => Controls_Manager::SELECT,
933	'default' => 'ease',
934	'options' => [
935	'ease' => esc_html__('Ease', 'king-addons'),
936	'linear' => esc_html__('Linear', 'king-addons'),
937	'ease-in' => esc_html__('Ease In', 'king-addons'),
938	'ease-out' => esc_html__('Ease Out', 'king-addons'),
939	'ease-in-out' => esc_html__('Ease In Out', 'king-addons'),
940	'cubic-bezier(0.4, 0, 0.2, 1)' => esc_html__('Cubic', 'king-addons'),
941	],
942	'selectors' => [
943	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-ease: {{VALUE}};',
944	],
945	]
946	);
947
948	$this->add_control(
949	'kng_effect_out_duration',
950	[
951	'label' => esc_html__('Hover Out Duration', 'king-addons'),
952	'type' => Controls_Manager::SLIDER,
953	'size_units' => ['ms'],
954	'range' => [
955	'ms' => [
956	'min' => 0,
957	'max' => 2000,
958	],
959	],
960	'default' => [
961	'size' => 320,
962	'unit' => 'ms',
963	],
964	'selectors' => [
965	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-out-speed: {{SIZE}}ms;',
966	],
967	]
968	);
969
970	$this->end_controls_section();
971	}
972
973	protected function register_style_preset_controls(): void
974	{
975	$this->start_controls_section(
976	'kng_style_underline_section',
977	[
978	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Split Underline', 'king-addons'),
979	'tab' => Controls_Manager::TAB_STYLE,
980	'condition' => [
981	'kng_preset' => 'split-underline',
982	],
983	]
984	);
985
986	$this->add_control(
987	'kng_underline_thickness',
988	[
989	'label' => esc_html__('Thickness', 'king-addons'),
990	'type' => Controls_Manager::SLIDER,
991	'size_units' => ['px'],
992	'range' => [
993	'px' => [
994	'min' => 1,
995	'max' => 8,
996	],
997	],
998	'default' => [
999	'size' => 2,
1000	'unit' => 'px',
1001	],
1002	'selectors' => [
1003	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-underline-thickness: {{SIZE}}{{UNIT}};',
1004	],
1005	]
1006	);
1007
1008	$this->add_control(
1009	'kng_underline_offset',
1010	[
1011	'label' => esc_html__('Offset', 'king-addons'),
1012	'type' => Controls_Manager::SLIDER,
1013	'size_units' => ['px'],
1014	'range' => [
1015	'px' => [
1016	'min' => 0,
1017	'max' => 20,
1018	],
1019	],
1020	'default' => [
1021	'size' => 6,
1022	'unit' => 'px',
1023	],
1024	'selectors' => [
1025	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-underline-offset: {{SIZE}}{{UNIT}};',
1026	],
1027	]
1028	);
1029
1030	$this->add_control(
1031	'kng_underline_radius',
1032	[
1033	'label' => esc_html__('Radius', 'king-addons'),
1034	'type' => Controls_Manager::SLIDER,
1035	'size_units' => ['px'],
1036	'range' => [
1037	'px' => [
1038	'min' => 0,
1039	'max' => 20,
1040	],
1041	],
1042	'default' => [
1043	'size' => 4,
1044	'unit' => 'px',
1045	],
1046	'selectors' => [
1047	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-underline-radius: {{SIZE}}{{UNIT}};',
1048	],
1049	]
1050	);
1051
1052	$this->add_control(
1053	'kng_underline_color',
1054	[
1055	'label' => esc_html__('Underline Color', 'king-addons'),
1056	'type' => Controls_Manager::COLOR,
1057	'selectors' => [
1058	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-underline-color: {{VALUE}};',
1059	],
1060	]
1061	);
1062
1063	$this->end_controls_section();
1064
1065	$this->start_controls_section(
1066	'kng_style_glow_section',
1067	[
1068	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Glow Stroke', 'king-addons'),
1069	'tab' => Controls_Manager::TAB_STYLE,
1070	'condition' => [
1071	'kng_preset' => 'glow-stroke',
1072	],
1073	]
1074	);
1075
1076	$this->add_control(
1077	'kng_stroke_width',
1078	[
1079	'label' => esc_html__('Stroke Width', 'king-addons'),
1080	'type' => Controls_Manager::SLIDER,
1081	'size_units' => ['px'],
1082	'range' => [
1083	'px' => [
1084	'min' => 0,
1085	'max' => 3,
1086	],
1087	],
1088	'default' => [
1089	'size' => 1,
1090	'unit' => 'px',
1091	],
1092	'selectors' => [
1093	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-stroke-width: {{SIZE}}{{UNIT}};',
1094	],
1095	]
1096	);
1097
1098	$this->add_control(
1099	'kng_glow_blur',
1100	[
1101	'label' => esc_html__('Glow Blur', 'king-addons'),
1102	'type' => Controls_Manager::SLIDER,
1103	'size_units' => ['px'],
1104	'range' => [
1105	'px' => [
1106	'min' => 0,
1107	'max' => 30,
1108	],
1109	],
1110	'default' => [
1111	'size' => 12,
1112	'unit' => 'px',
1113	],
1114	'selectors' => [
1115	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-glow-blur: {{SIZE}}{{UNIT}};',
1116	],
1117	]
1118	);
1119
1120	$this->add_control(
1121	'kng_glow_intensity',
1122	[
1123	'label' => esc_html__('Glow Intensity', 'king-addons'),
1124	'type' => Controls_Manager::SLIDER,
1125	'size_units' => ['%'],
1126	'range' => [
1127	'%' => [
1128	'min' => 0,
1129	'max' => 100,
1130	],
1131	],
1132	'default' => [
1133	'size' => 50,
1134	'unit' => '%',
1135	],
1136	'selectors' => [
1137	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-glow-intensity: calc({{SIZE}} / 100);',
1138	],
1139	]
1140	);
1141
1142	$this->add_control(
1143	'kng_glow_color',
1144	[
1145	'label' => esc_html__('Glow Color', 'king-addons'),
1146	'type' => Controls_Manager::COLOR,
1147	'selectors' => [
1148	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-glow-color: {{VALUE}};',
1149	],
1150	]
1151	);
1152
1153	$this->end_controls_section();
1154
1155	$this->start_controls_section(
1156	'kng_style_chroma_section',
1157	[
1158	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Chroma Shift', 'king-addons'),
1159	'tab' => Controls_Manager::TAB_STYLE,
1160	'condition' => [
1161	'kng_preset' => 'chroma-shift',
1162	],
1163	]
1164	);
1165
1166	$this->add_control(
1167	'kng_chroma_distance',
1168	[
1169	'label' => esc_html__('Chroma Distance', 'king-addons'),
1170	'type' => Controls_Manager::SLIDER,
1171	'size_units' => ['px'],
1172	'range' => [
1173	'px' => [
1174	'min' => 0,
1175	'max' => 12,
1176	],
1177	],
1178	'default' => [
1179	'size' => 5,
1180	'unit' => 'px',
1181	],
1182	'selectors' => [
1183	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-chroma-distance: {{SIZE}}{{UNIT}};',
1184	],
1185	]
1186	);
1187
1188	$this->add_control(
1189	'kng_chroma_opacity',
1190	[
1191	'label' => esc_html__('Chroma Opacity', 'king-addons'),
1192	'type' => Controls_Manager::SLIDER,
1193	'size_units' => ['%'],
1194	'range' => [
1195	'%' => [
1196	'min' => 0,
1197	'max' => 100,
1198	],
1199	],
1200	'default' => [
1201	'size' => 40,
1202	'unit' => '%',
1203	],
1204	'selectors' => [
1205	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-chroma-opacity: calc({{SIZE}} / 100);',
1206	],
1207	]
1208	);
1209
1210	$this->add_control(
1211	'kng_chroma_color_1',
1212	[
1213	'label' => esc_html__('Left Color', 'king-addons'),
1214	'type' => Controls_Manager::COLOR,
1215	'default' => 'rgba(255, 0, 96, 0.4)',
1216	'selectors' => [
1217	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-chroma-color-1: {{VALUE}};',
1218	],
1219	]
1220	);
1221
1222	$this->add_control(
1223	'kng_chroma_color_2',
1224	[
1225	'label' => esc_html__('Right Color', 'king-addons'),
1226	'type' => Controls_Manager::COLOR,
1227	'default' => 'rgba(0, 209, 255, 0.4)',
1228	'selectors' => [
1229	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-chroma-color-2: {{VALUE}};',
1230	],
1231	]
1232	);
1233
1234	$this->add_control(
1235	'kng_chroma_color_3',
1236	[
1237	'label' => esc_html__('Bottom Color', 'king-addons'),
1238	'type' => Controls_Manager::COLOR,
1239	'default' => 'rgba(140, 0, 255, 0.4)',
1240	'selectors' => [
1241	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-chroma-color-3: {{VALUE}};',
1242	],
1243	]
1244	);
1245
1246	$this->end_controls_section();
1247
1248	$this->start_controls_section(
1249	'kng_style_drift_section',
1250	[
1251	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Letter Drift', 'king-addons'),
1252	'tab' => Controls_Manager::TAB_STYLE,
1253	'condition' => [
1254	'kng_preset' => 'letter-drift',
1255	],
1256	]
1257	);
1258
1259	$this->add_control(
1260	'kng_letter_drift_max',
1261	[
1262	'label' => esc_html__('Max Translate', 'king-addons'),
1263	'type' => Controls_Manager::SLIDER,
1264	'size_units' => ['px'],
1265	'range' => [
1266	'px' => [
1267	'min' => 0,
1268	'max' => 30,
1269	],
1270	],
1271	'default' => [
1272	'size' => 10,
1273	'unit' => 'px',
1274	],
1275	]
1276	);
1277
1278	$this->add_control(
1279	'kng_letter_drift_randomness',
1280	[
1281	'label' => esc_html__('Randomness', 'king-addons'),
1282	'type' => Controls_Manager::SLIDER,
1283	'size_units' => ['%'],
1284	'range' => [
1285	'%' => [
1286	'min' => 0,
1287	'max' => 100,
1288	],
1289	],
1290	'default' => [
1291	'size' => 40,
1292	'unit' => '%',
1293	],
1294	]
1295	);
1296
1297	$this->end_controls_section();
1298
1299	$this->start_controls_section(
1300	'kng_style_sheen_section',
1301	[
1302	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Sheen Sweep', 'king-addons'),
1303	'tab' => Controls_Manager::TAB_STYLE,
1304	'condition' => [
1305	'kng_preset' => 'sheen-sweep',
1306	],
1307	]
1308	);
1309
1310	$this->add_control(
1311	'kng_sheen_angle',
1312	[
1313	'label' => esc_html__('Angle', 'king-addons'),
1314	'type' => Controls_Manager::SLIDER,
1315	'size_units' => ['deg'],
1316	'range' => [
1317	'deg' => [
1318	'min' => 0,
1319	'max' => 180,
1320	],
1321	],
1322	'default' => [
1323	'size' => 120,
1324	'unit' => 'deg',
1325	],
1326	'selectors' => [
1327	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-sheen-angle: {{SIZE}}deg;',
1328	],
1329	]
1330	);
1331
1332	$this->add_control(
1333	'kng_sheen_duration',
1334	[
1335	'label' => esc_html__('Sweep Duration', 'king-addons'),
1336	'type' => Controls_Manager::SLIDER,
1337	'size_units' => ['ms'],
1338	'range' => [
1339	'ms' => [
1340	'min' => 200,
1341	'max' => 3000,
1342	],
1343	],
1344	'default' => [
1345	'size' => 1400,
1346	'unit' => 'ms',
1347	],
1348	'selectors' => [
1349	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-sheen-duration: {{SIZE}}ms;',
1350	],
1351	]
1352	);
1353
1354	$this->add_control(
1355	'kng_sheen_brightness',
1356	[
1357	'label' => esc_html__('Brightness', 'king-addons'),
1358	'type' => Controls_Manager::SLIDER,
1359	'size_units' => ['%'],
1360	'range' => [
1361	'%' => [
1362	'min' => 0,
1363	'max' => 100,
1364	],
1365	],
1366	'default' => [
1367	'size' => 65,
1368	'unit' => '%',
1369	],
1370	'selectors' => [
1371	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-sheen-brightness: calc({{SIZE}} / 100);',
1372	],
1373	]
1374	);
1375
1376	$this->end_controls_section();
1377
1378	$this->start_controls_section(
1379	'kng_style_mask_section',
1380	[
1381	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Mask Reveal', 'king-addons'),
1382	'tab' => Controls_Manager::TAB_STYLE,
1383	'condition' => [
1384	'kng_preset' => 'mask-reveal',
1385	],
1386	]
1387	);
1388
1389	$this->add_control(
1390	'kng_mask_direction',
1391	[
1392	'label' => esc_html__('Reveal Direction', 'king-addons'),
1393	'type' => Controls_Manager::SELECT,
1394	'default' => 'left',
1395	'options' => [
1396	'left' => esc_html__('Left to Right', 'king-addons'),
1397	'right' => esc_html__('Right to Left', 'king-addons'),
1398	'up' => esc_html__('Bottom to Top', 'king-addons'),
1399	'down' => esc_html__('Top to Bottom', 'king-addons'),
1400	],
1401	]
1402	);
1403
1404	$this->add_control(
1405	'kng_mask_softness',
1406	[
1407	'label' => esc_html__('Edge Softness', 'king-addons'),
1408	'type' => Controls_Manager::SLIDER,
1409	'size_units' => ['%'],
1410	'range' => [
1411	'%' => [
1412	'min' => 0,
1413	'max' => 40,
1414	],
1415	],
1416	'default' => [
1417	'size' => 12,
1418	'unit' => '%',
1419	],
1420	'selectors' => [
1421	'{{WRAPPER}} .king-addons-kinetic-text-hover' => '--kng-kt-mask-softness: {{SIZE}}%;',
1422	],
1423	]
1424	);
1425
1426	$this->end_controls_section();
1427	}
1428
1429	public function register_pro_notice_controls(): void
1430	{
1431	if (!$this->can_use_pro()) {
1432	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'kinetic-text-hover', [
1433	'Variable font axes animation (wght/wdth)',
1434	'Magnetic letters on cursor movement',
1435	'Reveal on scroll effects',
1436	'Reduced motion modes and overrides',
1437	'Always-on idle animation trigger',
1438	]);
1439	}
1440	}
1441
1442	protected function sanitize_html_tag(string $tag): string
1443	{
1444	$allowed = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p'];
1445	$tag = strtolower(trim($tag));
1446	return in_array($tag, $allowed, true) ? $tag : 'div';
1447	}
1448
1449	protected function get_slider_size(array $settings, string $key, float $default = 0): float
1450	{
1451	if (isset($settings[$key]['size'])) {
1452	return (float) $settings[$key]['size'];
1453	}
1454	return $default;
1455	}
1456
1457	protected function is_editor_mode(): bool
1458	{
1459	return class_exists(\Elementor\Plugin::class) && \Elementor\Plugin::$instance->editor->is_edit_mode();
1460	}
1461
1462	protected function can_use_pro(): bool
1463	{
1464	return function_exists('king_addons_can_use_pro') && king_addons_can_use_pro();
1465	}
1466
1467	protected function get_pro_label(string $label): string
1468	{
1469	if ($this->can_use_pro()) {
1470	return $label;
1471	}
1472
1473	return $label . ' <i class="eicon-pro-icon"></i>';
1474	}
1475
1476	protected function get_pro_control_class(string $extra = ''): string
1477	{
1478	if ($this->can_use_pro()) {
1479	return $extra;
1480	}
1481
1482	return trim('king-addons-pro-control ' . $extra);
1483	}
1484	}
1485