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

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

1,306 lines 49.2 KB

Raw Download Zip

1	<?php
2
3	/** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
4
5	namespace King_Addons;
6
7	use Elementor\Controls_Manager;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Border;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Image_Size;
12	use Elementor\Group_Control_Typography;
13	use Elementor\Repeater;
14	use Elementor\Utils;
15	use Elementor\Widget_Base;
16
17	if (!defined('ABSPATH')) {
18	exit; // Exit if accessed directly.
19	}
20
21
22
23	class Styled_Text_Builder extends Widget_Base
24	{
25
26
27	public function get_name(): string
28	{
29	return 'king-addons-styled-text-builder';
30	}
31
32	public function get_title(): string
33	{
34	return esc_html__('Styled Text Builder', 'king-addons');
35	}
36
37	public function get_icon(): string
38	{
39	/** @noinspection SpellCheckingInspection */
40	return 'king-addons-icon king-addons-styled-text-builder';
41	}
42
43	public function get_style_depends(): array
44	{
45	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-styled-text-builder-style'];
46	}
47
48	public function get_categories(): array
49	{
50	return ['king-addons'];
51	}
52
53	public function get_keywords(): array
54	{
55	return [
56	'image',
57	'images',
58	'txt',
59	'typography',
60	'text',
61	'animation',
62	'animated',
63	'build',
64	'complex',
65	'effect',
66	'interactive',
67	'click',
68	'target',
69	'point',
70	'builder',
71	'link',
72	'point',
73	'points',
74	'color',
75	'mouse',
76	'hover',
77	'over',
78	'hover over',
79	'picture',
80	'king',
81	'addons',
82	'kingaddons',
83	'king-addons',
84	'font',
85	'size',
86	'heading',
87	'header',
88	'paragraph',
89	'section',
90	'article',
91	'particle',
92	'document',
93	'writing',
94	'style',
95	'format',
96	'complex',
97	'auto',
98	'scroll',
99	'scrolling',
100	'auto-scroll',
101	'auto-scrolling',
102	'head',
103	'heading',
104	'title',
105	'subtitle'
106	];
107	}
108
109	public function get_custom_help_url()
110	{
111	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
112	}
113
114	protected function register_controls(): void
115	{
116	/** START TAB: CONTENT ===================== */
117	/** SECTION: Texts ===================== */
118	$this->start_controls_section(
119	'kng_styled_txt_content_section_content',
120	[
121	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
122	'tab' => Controls_Manager::TAB_CONTENT,
123	'frontend_available' => true,
124	]
125	);
126
127	$repeater = new Repeater();
128
129	$repeater->add_control(
130	'kng_styled_txt_content_type',
131	[
132	'label' => '<b>' . esc_html__('Type of content', 'king-addons') . '</b>',
133	'type' => Controls_Manager::SELECT,
134	'options' => [
135	'text' => esc_html__('Text', 'king-addons'),
136	'image' => esc_html__('Image', 'king-addons'),
137	],
138	'default' => 'text',
139	'separator' => 'after',
140	]
141	);
142
143	$repeater->add_group_control(
144	Group_Control_Typography::get_type(),
145	[
146	'label' => esc_html__('Typography', 'king-addons'),
147	'name' => 'kng_styled_txt_typography',
148	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
149	'condition' => [
150	'kng_styled_txt_content_type' => 'text'
151	]
152	]
153	);
154
155	$repeater->add_control(
156	'kng_styled_txt_color',
157	[
158	'label' => esc_html__('Color', 'king-addons'),
159	'type' => Controls_Manager::COLOR,
160	'selectors' => [
161	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'color: {{VALUE}};',
162	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text a' => 'color: {{VALUE}};',
163	],
164	'condition' => [
165	'kng_styled_txt_content_type' => 'text'
166	]
167	]
168	);
169
170	$repeater->add_group_control(
171	Group_Control_Background::get_type(),
172	[
173	'name' => 'kng_styled_txt_bg_color',
174	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
175	'condition' => [
176	'kng_styled_txt_content_type' => 'text'
177	],
178	'separator' => 'before',
179	]
180	);
181
182	$repeater->add_control(
183	'kng_styled_txt_custom_vertical_align',
184	[
185	'label' => esc_html__('Custom Vertical Align', 'king-addons'),
186	'type' => Controls_Manager::SWITCHER,
187	'condition' => [
188	'kng_styled_txt_content_type' => 'text'
189	],
190	'separator' => 'before',
191	]
192	);
193
194	$repeater->add_responsive_control(
195	'kng_styled_txt_vertical_align',
196	[
197	'label' => esc_html__('Vertical Align', 'king-addons'),
198	'type' => Controls_Manager::SELECT,
199	'options' => [
200	'baseline' => esc_html__('baseline', 'king-addons'),
201	'top' => esc_html__('top', 'king-addons'),
202	'bottom' => esc_html__('bottom', 'king-addons'),
203	'sub' => esc_html__('sub', 'king-addons'),
204	'super' => esc_html__('super', 'king-addons'),
205	'text-top' => esc_html__('text-top', 'king-addons'),
206	'text-bottom' => esc_html__('text-bottom', 'king-addons'),
207	'middle' => esc_html__('middle', 'king-addons'),
208	],
209	'default' => 'baseline',
210	'selectors' => [
211	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'vertical-align: {{VALUE}};',
212	],
213	'condition' => [
214	'kng_styled_txt_custom_vertical_align!' => '',
215	'kng_styled_txt_content_type' => 'text'
216	]
217	]
218	);
219
220	$repeater->add_control(
221	'kng_styled_txt_padding_switcher',
222	[
223	'label' => esc_html__('Custom Padding', 'king-addons'),
224	'type' => Controls_Manager::SWITCHER,
225	'condition' => [
226	'kng_styled_txt_content_type' => 'text'
227	]
228	]
229	);
230
231	$repeater->add_responsive_control(
232	'kng_styled_txt_padding',
233	[
234	'label' => esc_html__('Padding', 'king-addons'),
235	'type' => Controls_Manager::DIMENSIONS,
236	'size_units' => ['px', 'em', '%'],
237	'default' => [
238	'top' => 0,
239	'right' => 0,
240	'bottom' => 0,
241	'left' => 0,
242	],
243	'selectors' => [
244	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
245	],
246	'condition' => [
247	'kng_styled_txt_padding_switcher!' => '',
248	'kng_styled_txt_content_type' => 'text'
249	]
250	]
251	);
252
253	$repeater->add_control(
254	'kng_styled_txt_margin_switcher',
255	[
256	'label' => esc_html__('Custom Margin', 'king-addons'),
257	'type' => Controls_Manager::SWITCHER,
258	'condition' => [
259	'kng_styled_txt_content_type' => 'text'
260	]
261	]
262	);
263
264	$repeater->add_responsive_control(
265	'kng_styled_txt_margin_left',
266	[
267	'label' => esc_html__('Margin Left', 'king-addons'),
268	'type' => Controls_Manager::NUMBER,
269	'step' => 1,
270	'selectors' => [
271	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-left: {{SIZE}}px;',
272	],
273	'condition' => [
274	'kng_styled_txt_margin_switcher!' => '',
275	'kng_styled_txt_content_type' => 'text'
276	]
277	]
278	);
279
280	$repeater->add_responsive_control(
281	'kng_styled_txt_margin_right',
282	[
283	'label' => esc_html__('Margin Right', 'king-addons'),
284	'type' => Controls_Manager::NUMBER,
285	'step' => 1,
286	'selectors' => [
287	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-right: {{SIZE}}px;',
288	],
289	'condition' => [
290	'kng_styled_txt_margin_switcher!' => '',
291	'kng_styled_txt_content_type' => 'text'
292	]
293	]
294	);
295
296	$repeater->add_control(
297	'kng_styled_txt_margin_info',
298	[
299	'type' => Controls_Manager::ALERT,
300	'alert_type' => 'info',
301	'content' => esc_html__('For vertical spacing use the line-height parameter in Typography, or optionally Custom Padding - top and bottom. Margin top and bottom parameters are available when Custom Width value is set. This is because of current HTML/CSS limitations for multiline text.', 'king-addons'),
302	'condition' => [
303	'kng_styled_txt_margin_switcher!' => '',
304	'kng_styled_txt_content_type' => 'text'
305	]
306	]
307	);
308
309	$repeater->add_control(
310	'kng_styled_txt_custom_border',
311	[
312	'label' => esc_html__('Custom Border', 'king-addons'),
313	'type' => Controls_Manager::SWITCHER,
314	'condition' => [
315	'kng_styled_txt_content_type' => 'text'
316	]
317	]
318	);
319
320	$repeater->add_group_control(
321	Group_Control_Border::get_type(),
322	[
323	'name' => 'kng_styled_txt_border',
324	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
325	'condition' => [
326	'kng_styled_txt_custom_border!' => '',
327	'kng_styled_txt_content_type' => 'text'
328	]
329	]
330	);
331
332	$repeater->add_responsive_control(
333	'kng_styled_txt_border_radius',
334	[
335	'label' => esc_html__('Border Radius', 'king-addons'),
336	'type' => Controls_Manager::DIMENSIONS,
337	'size_units' => ['px', '%'],
338	'default' => [
339	'top' => 0,
340	'right' => 0,
341	'bottom' => 0,
342	'left' => 0,
343	],
344	'selectors' => [
345	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
346	],
347	'condition' => [
348	'kng_styled_txt_custom_border!' => '',
349	'kng_styled_txt_content_type' => 'text'
350	]
351	]
352	);
353
354	$repeater->add_control(
355	'kng_styled_txt_custom_width_switcher',
356	[
357	'label' => esc_html__('Custom Width', 'king-addons'),
358	'type' => Controls_Manager::SWITCHER,
359	'condition' => [
360	'kng_styled_txt_content_type' => 'text'
361	]
362	]
363	);
364
365	$repeater->add_responsive_control(
366	'kng_styled_txt_custom_width',
367	[
368	'label' => esc_html__('Width (px)', 'king-addons'),
369	'description' => esc_html__('The custom width of the current content item is useful for creating multiline text snippets or limiting the image size.', 'king-addons'),
370	'type' => Controls_Manager::NUMBER,
371	'min' => 0,
372	'step' => 1,
373	'selectors' => [
374	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'width: {{SIZE}}px; display: inline-block;',
375	],
376	'condition' => [
377	'kng_styled_txt_custom_width_switcher!' => '',
378	'kng_styled_txt_content_type' => 'text'
379	]
380	]
381	);
382
383	$repeater->add_responsive_control(
384	'kng_styled_txt_margin_top',
385	[
386	'label' => esc_html__('Margin Top', 'king-addons'),
387	'type' => Controls_Manager::NUMBER,
388	'step' => 1,
389	'selectors' => [
390	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-top: {{SIZE}}px;',
391	],
392	'condition' => [
393	'kng_styled_txt_custom_width_switcher!' => '',
394	'kng_styled_txt_content_type' => 'text'
395	]
396	]
397	);
398
399	$repeater->add_responsive_control(
400	'kng_styled_txt_margin_bottom',
401	[
402	'label' => esc_html__('Margin Bottom', 'king-addons'),
403	'type' => Controls_Manager::NUMBER,
404	'step' => 1,
405	'selectors' => [
406	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-bottom: {{SIZE}}px;',
407	],
408	'condition' => [
409	'kng_styled_txt_custom_width_switcher!' => '',
410	'kng_styled_txt_content_type' => 'text'
411	]
412	]
413	);
414
415	/** ====================================================== */
416	/** TEXT EFFECTS ========================================== */
417	$repeater->add_control(
418	'kng_styled_txt_effect',
419	[
420	'label' => '<b>' . esc_html__('Text Effect', 'king-addons') . '</b>',
421	'type' => Controls_Manager::SELECT,
422	'options' => [
423	'none' => esc_html__('None', 'king-addons'),
424	'text-gradient' => esc_html__('Text Gradient', 'king-addons'),
425	'underline-gradient' => esc_html__('Underline Gradient', 'king-addons'),
426	'outline-stroke' => esc_html__('Outline Stroke', 'king-addons'),
427	],
428	'label_block' => true,
429	'default' => 'none',
430	'separator' => 'before',
431	'condition' => [
432	'kng_styled_txt_content_type' => 'text'
433	]
434	]
435	);
436
437	/** Outline Stroke ========================================== */
438	$repeater->add_control(
439	'kng_styled_txt_effect_stroke_txt_color',
440	[
441	'label' => esc_html__('Text Color', 'king-addons'),
442	'type' => Controls_Manager::COLOR,
443	'default' => '#0000',
444	'selectors' => [
445	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => 'color: {{VALUE}};'
446	],
447	'condition' => [
448	'kng_styled_txt_effect' => 'outline-stroke',
449	'kng_styled_txt_content_type' => 'text'
450	]
451	]
452	);
453
454	$repeater->add_control(
455	'kng_styled_txt_effect_stroke_stroke_color',
456	[
457	'label' => esc_html__('Stroke Color', 'king-addons'),
458	'type' => Controls_Manager::COLOR,
459	'default' => '#dbdbdb',
460	'selectors' => [
461	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => '-webkit-text-stroke-color: {{VALUE}};'
462	],
463	'condition' => [
464	'kng_styled_txt_effect' => 'outline-stroke',
465	'kng_styled_txt_content_type' => 'text'
466	]
467	]
468	);
469
470	$repeater->add_control(
471	'kng_styled_txt_effect_stroke_width',
472	[
473	'label' => esc_html__('Stroke Width (px)', 'king-addons'),
474	'type' => Controls_Manager::NUMBER,
475	'min' => 1,
476	'step' => 1,
477	'default' => 1,
478	'selectors' => [
479	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => '-webkit-text-stroke-width: {{SIZE}}px;',
480	],
481	'condition' => [
482	'kng_styled_txt_effect' => 'outline-stroke',
483	'kng_styled_txt_content_type' => 'text'
484	]
485	]
486	);
487	/** END Outline Stroke ========================================== */
488
489	/** Text Gradient ========================================== */
490	$repeater->add_group_control(
491	Group_Control_Background::get_type(),
492	[
493	'name' => 'kng_styled_txt_effect_gradient',
494	'types' => ['gradient'],
495	'fields_options' => [
496	'color' => [
497	'default' => '#574ff7',
498	],
499	'background' => [
500	'default' => 'gradient',
501	]
502	],
503	'exclude' => ['classic', 'image'],
504	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner',
505	'condition' => [
506	'kng_styled_txt_effect' => 'text-gradient',
507	'kng_styled_txt_content_type' => 'text'
508	]
509	]
510	);
511	/** END: Text Gradient ========================================== */
512
513	/** Underline Gradient ========================================== */
514	$repeater->add_group_control(
515	Group_Control_Background::get_type(),
516	[
517	'name' => 'kng_styled_txt_underline_effects_gradient',
518	'types' => ['gradient'],
519	'fields_options' => [
520	'color' => [
521	'default' => '#84fab0',
522	],
523	'color_b' => [
524	'default' => '#8fd3f4',
525	],
526	'background' => [
527	'default' => 'gradient',
528	],
529	'gradient_type' => [
530	'default' => 'linear'
531	],
532	'gradient_angle' => [
533	'default' => [
534	'unit' => 'deg',
535	'size' => 120,
536	],
537	]
538	],
539	'exclude' => ['classic', 'image'],
540	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner',
541	'condition' => [
542	'kng_styled_txt_effect' => 'underline-gradient',
543	'kng_styled_txt_content_type' => 'text'
544	]
545	]
546	);
547
548	$repeater->add_control(
549	'kng_styled_txt_underline_effects_bg_position',
550	[
551	'label' => esc_html__('Vertical Position (%)', 'king-addons'),
552	'type' => Controls_Manager::SLIDER,
553	'size_units' => ['%'],
554	'range' => [
555	'%' => [
556	'min' => 0,
557	'max' => 100,
558	'step' => 1,
559	],
560	],
561	'default' => [
562	'unit' => '%',
563	'size' => 88,
564	],
565	'separator' => 'before',
566	'selectors' => [
567	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'background-position: 0 {{SIZE}}{{UNIT}}; background-repeat: no-repeat;',
568	],
569	'condition' => [
570	'kng_styled_txt_effect' => 'underline-gradient',
571	'kng_styled_txt_content_type' => 'text'
572	]
573	]
574	);
575
576	$repeater->add_control(
577	'kng_styled_txt_underline_effects_bg_height',
578	[
579	'label' => esc_html__('Height (%)', 'king-addons'),
580	'type' => Controls_Manager::SLIDER,
581	'size_units' => ['%'],
582	'range' => [
583	'%' => [
584	'min' => 0,
585	'max' => 100,
586	'step' => 1,
587	],
588	],
589	'default' => [
590	'unit' => '%',
591	'size' => 20,
592	],
593	'selectors' => [
594	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'background-size: 100% {{SIZE}}{{UNIT}};',
595	],
596	'condition' => [
597	'kng_styled_txt_effect' => 'underline-gradient',
598	'kng_styled_txt_content_type' => 'text'
599	]
600	]
601	);
602
603	$repeater->add_control(
604	'kng_styled_txt_underline_effects_bg_height_hover',
605	[
606	'label' => esc_html__('Height on mouse hover (%)', 'king-addons'),
607	'type' => Controls_Manager::SLIDER,
608	'size_units' => ['%'],
609	'range' => [
610	'%' => [
611	'min' => 0,
612	'max' => 100,
613	'step' => 1,
614	],
615	],
616	'default' => [
617	'unit' => '%',
618	'size' => 88,
619	],
620	'selectors' => [
621	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner:hover' => 'background-size: 100% {{SIZE}}{{UNIT}};',
622	],
623	'condition' => [
624	'kng_styled_txt_effect' => 'underline-gradient',
625	'kng_styled_txt_content_type' => 'text'
626	]
627	]
628	);
629
630	/** END: Underline Gradient ========================================== */
631
632	/** END: TEXT EFFECTS ========================================== */
633	/** =========================================================== */
634
635	$repeater->add_control(
636	'kng_styled_txt_content',
637	[
638	'label' => '<b>' . esc_html__('Text', 'king-addons') . '</b>',
639	'type' => Controls_Manager::TEXTAREA,
640	'default' => esc_html__('Text', 'king-addons'),
641	'condition' => [
642	'kng_styled_txt_content_type' => 'text'
643	],
644	'separator' => 'before',
645	]
646	);
647	/** END: Content Type TEXT ========================================== */
648
649	/** Content Type IMAGE ========================================== */
650	$repeater->add_control(
651	'kng_styled_txt_image',
652	[
653	'label' => esc_html__('Image', 'king-addons'),
654	'type' => Controls_Manager::MEDIA,
655	'default' => [
656	'url' => Utils::get_placeholder_image_src(),
657	],
658	'condition' => [
659	'kng_styled_txt_content_type' => 'image'
660	]
661	]
662	);
663
664	$repeater->add_group_control(
665	Group_Control_Image_Size::get_type(),
666	[
667	'name' => 'kng_styled_txt_image_size',
668	'default' => 'full',
669	'separator' => 'before',
670	'condition' => [
671	'kng_styled_txt_content_type' => 'image'
672	]
673	]
674	);
675
676	$repeater->add_responsive_control(
677	'kng_image_comparison_box_max_width',
678	[
679	'label' => esc_html__('Width (px)', 'king-addons'),
680	'type' => Controls_Manager::NUMBER,
681	'min' => 0,
682	'step' => 1,
683	'default' => 50,
684	'selectors' => [
685	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'width: {{SIZE}}px;'
686	],
687	'condition' => [
688	'kng_styled_txt_content_type' => 'image'
689	]
690	]
691	);
692
693	$repeater->add_group_control(
694	Group_Control_Box_Shadow::get_type(),
695	[
696	'name' => 'kng_styled_txt_image_shadow',
697	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img',
698	'condition' => [
699	'kng_styled_txt_content_type' => 'image'
700	]
701	]
702	);
703
704	$repeater->add_group_control(
705	Group_Control_Border::get_type(),
706	[
707	'name' => 'kng_styled_txt_image_border',
708	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img',
709	'condition' => [
710	'kng_styled_txt_content_type' => 'image'
711	]
712	]
713	);
714
715	$repeater->add_responsive_control(
716	'kng_styled_txt_image_border_radius',
717	[
718	'label' => esc_html__('Border Radius', 'king-addons'),
719	'type' => Controls_Manager::DIMENSIONS,
720	'size_units' => ['px', '%'],
721	'selectors' => [
722	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
723	],
724	'condition' => [
725	'kng_styled_txt_content_type' => 'image'
726	]
727	]
728	);
729
730	$repeater->add_control(
731	'kng_styled_txt_image_custom_vertical_align',
732	[
733	'label' => esc_html__('Custom Vertical Align', 'king-addons'),
734	'type' => Controls_Manager::SWITCHER,
735	'condition' => [
736	'kng_styled_txt_content_type' => 'image'
737	]
738	]
739	);
740
741	$repeater->add_responsive_control(
742	'kng_styled_txt_image_vertical_align',
743	[
744	'label' => esc_html__('Vertical Align', 'king-addons'),
745	'type' => Controls_Manager::SELECT,
746	'options' => [
747	'baseline' => esc_html__('baseline', 'king-addons'),
748	'top' => esc_html__('top', 'king-addons'),
749	'bottom' => esc_html__('bottom', 'king-addons'),
750	'sub' => esc_html__('sub', 'king-addons'),
751	'super' => esc_html__('super', 'king-addons'),
752	'text-top' => esc_html__('text-top', 'king-addons'),
753	'text-bottom' => esc_html__('text-bottom', 'king-addons'),
754	'middle' => esc_html__('middle', 'king-addons'),
755	],
756	'default' => 'baseline',
757	'selectors' => [
758	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'vertical-align: {{VALUE}};',
759	],
760	'condition' => [
761	'kng_styled_txt_image_custom_vertical_align!' => '',
762	'kng_styled_txt_content_type' => 'image'
763	]
764	]
765	);
766
767	$repeater->add_control(
768	'kng_styled_txt_image_margin_switcher',
769	[
770	'label' => esc_html__('Custom Margin', 'king-addons'),
771	'type' => Controls_Manager::SWITCHER,
772	'condition' => [
773	'kng_styled_txt_content_type' => 'image'
774	]
775	]
776	);
777
778	$repeater->add_responsive_control(
779	'kng_styled_txt_image_margin',
780	[
781	'label' => esc_html__('Margin', 'king-addons'),
782	'type' => Controls_Manager::DIMENSIONS,
783	'size_units' => ['px', '%'],
784	'default' => [
785	'top' => 0,
786	'right' => 0,
787	'bottom' => 0,
788	'left' => 0,
789	],
790	'selectors' => [
791	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin: 0;',
792	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
793	],
794	'condition' => [
795	'kng_styled_txt_image_margin_switcher!' => '',
796	'kng_styled_txt_content_type' => 'image'
797	]
798	]
799	);
800	/** END: Content Type IMAGE ========================================== */
801
802	$repeater->add_control(
803	'kng_styled_txt_content_common_for_all_types_head',
804	[
805	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common for all types', 'king-addons'),
806	'type' => Controls_Manager::HEADING,
807	]
808	);
809
810	$repeater->add_control(
811	'kng_styled_txt_custom_css_class_switcher',
812	[
813	'label' => esc_html__('Custom CSS Class', 'king-addons'),
814	'type' => Controls_Manager::SWITCHER,
815	]
816	);
817
818	$repeater->add_control(
819	'kng_styled_txt_custom_css_class',
820	[
821	'label' => esc_html__('CSS Class', 'king-addons'),
822	'type' => Controls_Manager::TEXT,
823	'placeholder' => esc_html__('Type or paste the class', 'king-addons'),
824	'ai' => [
825	'active' => false,
826	],
827	'separator' => 'after',
828	'condition' => [
829	'kng_styled_txt_custom_css_class_switcher!' => '',
830	]
831	]
832	);
833
834	$repeater->add_control(
835	'kng_styled_txt_transform_switcher',
836	[
837	'label' => esc_html__('Transform', 'king-addons'),
838	'type' => Controls_Manager::SWITCHER,
839	]
840	);
841
842	$repeater->add_responsive_control(
843	'kng_styled_txt_transform_rotate',
844	[
845	'label' => esc_html__('Rotate', 'king-addons') . ' (deg)',
846	'type' => Controls_Manager::NUMBER,
847	'min' => -360,
848	'max' => 360,
849	'step' => 5,
850	'default' => 0,
851	'selectors' => [
852	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'transform: rotateZ({{SIZE}}deg); display: inline-block;',
853	],
854	'condition' => [
855	'kng_styled_txt_transform_switcher!' => '',
856	],
857	'frontend_available' => true,
858	]
859	);
860
861	$repeater->add_responsive_control(
862	'kng_styled_txt_transform_offset_X',
863	[
864	'label' => esc_html__('Offset X', 'king-addons'),
865	'type' => Controls_Manager::SLIDER,
866	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
867	'range' => [
868	'%' => [
869	'min' => -100,
870	'max' => 100,
871	],
872	'px' => [
873	'min' => -1000,
874	'max' => 1000,
875	],
876	],
877	'condition' => [
878	'kng_styled_txt_transform_switcher!' => '',
879	],
880	'selectors' => [
881	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => 'transform: translateX({{SIZE}}{{UNIT}}); display: inline-block;',
882	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner img' => 'transform: translateX({{SIZE}}{{UNIT}}); display: inline-block;',
883	],
884	'frontend_available' => true,
885	]
886	);
887
888	$repeater->add_responsive_control(
889	'kng_styled_txt_transform_offset_Y',
890	[
891	'label' => esc_html__('Offset Y', 'king-addons'),
892	'type' => Controls_Manager::SLIDER,
893	'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
894	'range' => [
895	'%' => [
896	'min' => -100,
897	'max' => 100,
898	],
899	'px' => [
900	'min' => -1000,
901	'max' => 1000,
902	],
903	],
904	'condition' => [
905	'kng_styled_txt_transform_switcher!' => '',
906	],
907	'selectors' => [
908	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'transform: translateY({{SIZE}}{{UNIT}}); display: inline-block;',
909	],
910	'frontend_available' => true,
911	]
912	);
913
914	$repeater->add_control(
915	'kng_styled_txt_link_switcher',
916	[
917	'label' => esc_html__('Link', 'king-addons'),
918	'type' => Controls_Manager::SWITCHER,
919	]
920	);
921
922	$repeater->add_control(
923	'kng_styled_txt_link',
924	[
925	'label' => esc_html__('Link', 'king-addons'),
926	'type' => Controls_Manager::URL,
927	'condition' => [
928	'kng_styled_txt_link_switcher!' => '',
929	]
930	]
931	);
932
933	$this->add_control(
934	'kng_styled_txt_content_items',
935	[
936	'type' => Controls_Manager::REPEATER,
937	'fields' => $repeater->get_controls(),
938	'default' => [
939	[
940	'kng_styled_txt_content_type' => 'text',
941	'kng_styled_txt_content' => esc_html__('King', 'king-addons'),
942	],
943	[
944	'kng_styled_txt_content_type' => 'image',
945	'kng_styled_txt_image' => Utils::get_placeholder_image_src(),
946	],
947	[
948	'kng_styled_txt_content_type' => 'text',
949	'kng_styled_txt_content' => esc_html__('Addons', 'king-addons'),
950	],
951	],
952	'title_field' => '<# if( "text" === kng_styled_txt_content_type ) { #> {{kng_styled_txt_content}} <# } else if( "image" === kng_styled_txt_content_type) {#> <img class="king-addons-repeater-list-img-icon" src="{{kng_styled_txt_image.url}}"> <# } #>',
953	]
954	);
955
956	$this->end_controls_section();
957	/** END SECTION: Texts ===================== */
958	/** END TAB: CONTENT ===================== */
959
960	/** START TAB: STYLE ===================== */
961	/** SECTION: Common Styles ===================== */
962	$this->start_controls_section(
963	'kng_styled_txt_style_section_commmon_styles',
964	[
965	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common Styles', 'king-addons'),
966	'tab' => Controls_Manager::TAB_STYLE,
967	]
968	);
969
970	$this->add_group_control(
971	Group_Control_Typography::get_type(),
972	[
973	'label' => esc_html__('Item Typography', 'king-addons'),
974	'name' => 'kng_styled_txt_common_typography',
975	'selector' => '{{WRAPPER}} .king-addons-styled-text',
976	'fields_options' => [
977	'font_size' => [
978	'default' => [
979	'size' => 50,
980	'unit' => 'px'
981	],
982	],
983	'typography' => [
984	'default' => 'custom',
985	]
986	],
987	]
988	);
989
990	$this->add_control(
991	'kng_styled_txt_common_color',
992	[
993	'label' => esc_html__('Item Text Color', 'king-addons'),
994	'type' => Controls_Manager::COLOR,
995	'selectors' => [
996	'{{WRAPPER}} .king-addons-styled-text' => 'color: {{VALUE}};',
997	],
998	]
999	);
1000
1001	$this->add_responsive_control(
1002	'kng_styled_txt_common_content_align',
1003	[
1004	'label' => esc_html__('Content Align', 'king-addons'),
1005	'type' => Controls_Manager::SELECT,
1006	'options' => [
1007	'left' => esc_html__('Left', 'king-addons'),
1008	'center' => esc_html__('Center', 'king-addons'),
1009	'right' => esc_html__('Right', 'king-addons'),
1010	],
1011	'default' => 'left',
1012	'separator' => 'before',
1013	'selectors' => [
1014	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'text-align: {{VALUE}};',
1015	],
1016	]
1017	);
1018
1019	$this->add_responsive_control(
1020	'kng_styled_txt_common_items_margin',
1021	[
1022	'label' => esc_html__('Item Margin', 'king-addons'),
1023	'type' => Controls_Manager::DIMENSIONS,
1024	'size_units' => ['px', 'em', '%'],
1025	'default' => [
1026	'top' => 0,
1027	'right' => 10,
1028	'bottom' => 0,
1029	'left' => 0,
1030	'unit' => 'px',
1031	'isLinked' => false
1032	],
1033	'selectors' => [
1034	'{{WRAPPER}} .king-addons-styled-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1035	],
1036	'separator' => 'before',
1037	]
1038	);
1039
1040	$this->add_responsive_control(
1041	'kng_styled_txt_common_items_padding',
1042	[
1043	'label' => esc_html__('Item Padding', 'king-addons'),
1044	'type' => Controls_Manager::DIMENSIONS,
1045	'size_units' => ['px', 'em', '%'],
1046	'default' => [
1047	'top' => 0,
1048	'right' => 0,
1049	'bottom' => 0,
1050	'left' => 0,
1051	'unit' => 'px',
1052	],
1053	'selectors' => [
1054	'{{WRAPPER}} .king-addons-styled-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1055	],
1056	'separator' => 'before',
1057	]
1058	);
1059
1060	$this->end_controls_section();
1061	/** END SECTION: Common Styles ===================== */
1062
1063	/** SECTION: Wrapper Settings ===================== */
1064	$this->start_controls_section(
1065	'kng_styled_txt_style_section_wrapper_settings',
1066	[
1067	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Wrapper Tag Settings', 'king-addons'),
1068	'tab' => Controls_Manager::TAB_STYLE,
1069	]
1070	);
1071
1072	if (king_addons_freemius()->can_use_premium_code()) {
1073	$this->add_control(
1074	'kng_styled_txt_wrapper_html_tag',
1075	[
1076	'label' => esc_html__('HTML Tag', 'king-addons'),
1077	'type' => Controls_Manager::SELECT,
1078	'options' => [
1079	'div' => 'div',
1080	'h1' => 'h1',
1081	'h2' => 'h2',
1082	'h3' => 'h3',
1083	'h4' => 'h4',
1084	'h5' => 'h5',
1085	'h6' => 'h6',
1086	'section' => 'section',
1087	'article' => 'article',
1088	'aside' => 'aside',
1089	'header' => 'header',
1090	'footer' => 'footer',
1091	'nav' => 'nav',
1092	'main' => 'main',
1093	'span' => 'span',
1094	'p' => 'p',
1095	],
1096	'default' => 'div',
1097	]
1098	);
1099	} else {
1100	$this->add_control(
1101	'kng_styled_txt_wrapper_html_tag',
1102	[
1103	'label' => esc_html__('HTML Tag', 'king-addons'),
1104	'type' => Controls_Manager::SELECT,
1105	'options' => [
1106	'div' => 'div',
1107	'p' => 'p',
1108	'section' => 'section',
1109	'article' => 'article',
1110	'aside' => 'aside',
1111	'header' => 'header',
1112	'footer' => 'footer',
1113	'nav' => 'nav',
1114	'main' => 'main',
1115	'span' => 'span',
1116	],
1117	'default' => 'div',
1118	]
1119	);
1120
1121	$this->add_control(
1122	'kng_styled_txt_wrapper_html_tag_pro_notice',
1123	[
1124	'type' => Controls_Manager::RAW_HTML,
1125	'raw' => 'H1, H2, H3, H4, H5, H6 tags are available in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-styled-txt-builder&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
1126	'content_classes' => 'king-addons-pro-notice',
1127	]
1128	);
1129	}
1130
1131	$this->add_group_control(
1132	Group_Control_Typography::get_type(),
1133	[
1134	'name' => 'kng_styled_txt_wrapper_typography',
1135	'label' => esc_html__('Tag Typography', 'king-addons'),
1136	'description' => esc_html__('This is the typography for the wrapper tag. The Item Typography setting can override this.', 'king-addons'),
1137	'selector' => '{{WRAPPER}} .king-addons-styled-text-builder-items',
1138	'separator' => 'before',
1139	]
1140	);
1141
1142	$this->add_control(
1143	'kng_styled_txt_wrapper_color',
1144	[
1145	'label' => esc_html__('Tag Color', 'king-addons'),
1146	'type' => Controls_Manager::COLOR,
1147	'selectors' => [
1148	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'color: {{VALUE}};',
1149	],
1150	]
1151	);
1152
1153	$this->add_responsive_control(
1154	'kng_styled_txt_wrapper_padding',
1155	[
1156	'label' => esc_html__('Tag Padding', 'king-addons'),
1157	'type' => Controls_Manager::DIMENSIONS,
1158	'size_units' => ['px', 'em', '%', 'rem'],
1159	'default' => [
1160	'top' => 0,
1161	'right' => 0,
1162	'bottom' => 0,
1163	'left' => 0,
1164	'unit' => 'px',
1165	],
1166	'selectors' => [
1167	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1168	],
1169	'separator' => 'before',
1170	]
1171	);
1172
1173	$this->add_responsive_control(
1174	'kng_styled_txt_wrapper_margin',
1175	[
1176	'label' => esc_html__('Tag Margin', 'king-addons'),
1177	'type' => Controls_Manager::DIMENSIONS,
1178	'size_units' => ['px', 'em', '%', 'rem'],
1179	'default' => [
1180	'top' => 0,
1181	'right' => 0,
1182	'bottom' => 0,
1183	'left' => 0,
1184	'unit' => 'px',
1185	],
1186	'selectors' => [
1187	'{{WRAPPER}} .king-addons-styled-text-builder-items' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1188	],
1189	]
1190	);
1191
1192	$this->end_controls_section();
1193	/** END SECTION: Wrapper Settings ===================== */
1194	/** END TAB: STYLE ===================== */
1195	}
1196
1197	protected function render(): void
1198	{
1199	$settings = $this->get_settings();
1200
1201	// Get the wrapper HTML tag, default to 'div' if not set
1202	$wrapper_tag = isset($settings['kng_styled_txt_wrapper_html_tag']) ? $settings['kng_styled_txt_wrapper_html_tag'] : 'div';
1203	?>
1204	<<?php echo esc_html($wrapper_tag); ?> class="king-addons-styled-text-builder-items">
1205	<?php
1206
1207	$item_count = 0;
1208
1209	/** @noinspection PhpUnusedLocalVariableInspection */
1210	foreach ($settings['kng_styled_txt_content_items'] as $key => $item) {
1211
1212	$content_type = $item['kng_styled_txt_content_type'];
1213	$item_tag = 'span';
1214
1215	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'class', 'king-addons-styled-text-inner');
1216
1217	// If the item has link
1218	if ('yes' === $item['kng_styled_txt_link_switcher']) {
1219	if ('' !== $item['kng_styled_txt_link']['url']) {
1220
1221	$item_tag = 'a';
1222
1223	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'href', esc_url($item['kng_styled_txt_link']['url']));
1224
1225	if ($item['kng_styled_txt_link']['is_external']) {
1226	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'target', '_blank');
1227	}
1228
1229	if ($item['kng_styled_txt_link']['nofollow']) {
1230	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'rel', 'nofollow');
1231	}
1232	}
1233	}
1234
1235	// If the item has custom CSS class
1236	if ('yes' === $item['kng_styled_txt_custom_css_class_switcher']) {
1237	if ('' !== $item['kng_styled_txt_custom_css_class']) {
1238	$this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'class', esc_attr($item['kng_styled_txt_custom_css_class']));
1239	}
1240	}
1241
1242	/** START: Text Item ===================== */
1243	if ('text' === $content_type) {
1244
1245	$txt_effect = $item['kng_styled_txt_effect'];
1246	$txt_effect_class = '';
1247
1248	switch ($txt_effect) {
1249	case 'text-gradient':
1250	$txt_effect_class = ' king-addons-styled-text-gradient';
1251	break;
1252	case 'underline-gradient':
1253	$txt_effect_class = ' king-addons-styled-text-underline-gradient';
1254	break;
1255	}
1256
1257	if ('' !== $item['kng_styled_txt_content']) {
1258
1259	echo '<span class="elementor-repeater-item-' .
1260	esc_attr($item['_id']) .
1261	esc_attr($txt_effect_class) . ' king-addons-styled-text">';
1262
1263	$html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_styled_txt_content_inner_attribute' . $item_count) . '>';
1264	echo wp_kses($html, wp_kses_allowed_html('post'));
1265
1266	echo '<span>' . wp_kses_post($item['kng_styled_txt_content']) . '</span>';
1267	echo '</' . esc_attr($item_tag) . '></span>';
1268	}
1269	}
1270	/** END: Text Item ===================== */
1271
1272	/** START: Image Item ===================== */
1273	if ('image' === $content_type) {
1274
1275	if ('' !== $item['kng_styled_txt_image']) {
1276
1277	echo '<span class="elementor-repeater-item-' .
1278	esc_attr($item['_id']) . ' king-addons-styled-text">';
1279
1280	$html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_styled_txt_content_inner_attribute' . $item_count) . '>';
1281	echo wp_kses($html, wp_kses_allowed_html('post'));
1282
1283	$image_html = Group_Control_Image_Size::get_attachment_image_html($item, 'kng_styled_txt_image_size', 'kng_styled_txt_image');
1284
1285	// Define allowed tags and attributes
1286	$allowed_tags = wp_kses_allowed_html('post');
1287	$allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
1288	$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
1289	$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
1290	$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
1291
1292	// Sanitize the image HTML using the extended set of allowed tags and attributes
1293	echo wp_kses($image_html, $allowed_tags);
1294
1295	echo '</' . esc_attr($item_tag) . '></span>';
1296	}
1297	}
1298	/** END: Image Item ===================== */
1299
1300	$item_count++;
1301	} ?>
1302	</<?php echo esc_html($wrapper_tag); ?>>
1303	<?php
1304	}
1305	}
1306