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.83, at includes/widgets/Kinetic_Text_Hover/Kinetic_Text_Hover.php

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