PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
← All changes | includes/widgets/Styled_Text_Builder/Styled_Text_Builder.php +1528 -0 51.1.251.1.83 View file →
@@ -1,0 +1,1528 @@
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 + /**
49 + * Script dependencies.
50 + *
51 + * @return array<int, string>
52 + */
53 + public function get_script_depends(): array
54 + {
55 + return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-styled-text-builder-script'];
56 + }
57 +
58 + public function get_categories(): array
59 + {
60 + return ['king-addons'];
61 + }
62 +
63 + public function get_keywords(): array
64 + {
65 + return [
66 + 'image',
67 + 'images',
68 + 'txt',
69 + 'typography',
70 + 'text',
71 + 'animation',
72 + 'animated',
73 + 'build',
74 + 'complex',
75 + 'effect',
76 + 'interactive',
77 + 'click',
78 + 'target',
79 + 'point',
80 + 'builder',
81 + 'link',
82 + 'point',
83 + 'points',
84 + 'color',
85 + 'mouse',
86 + 'hover',
87 + 'over',
88 + 'hover over',
89 + 'picture',
90 + 'king',
91 + 'addons',
92 + 'kingaddons',
93 + 'king-addons',
94 + 'font',
95 + 'size',
96 + 'heading',
97 + 'header',
98 + 'paragraph',
99 + 'section',
100 + 'article',
101 + 'particle',
102 + 'document',
103 + 'writing',
104 + 'style',
105 + 'format',
106 + 'complex',
107 + 'auto',
108 + 'scroll',
109 + 'scrolling',
110 + 'auto-scroll',
111 + 'auto-scrolling',
112 + 'head',
113 + 'heading',
114 + 'title',
115 + 'subtitle'
116 + ];
117 + }
118 +
119 + public function get_custom_help_url()
120 + {
121 + return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
122 + }
123 +
124 + protected function register_controls(): void
125 + {
126 + /** START TAB: CONTENT ===================== */
127 + /** SECTION: Texts ===================== */
128 + $this->start_controls_section(
129 + 'kng_styled_txt_content_section_content',
130 + [
131 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
132 + 'tab' => Controls_Manager::TAB_CONTENT,
133 + ]
134 + );
135 +
136 + $repeater = new Repeater();
137 +
138 + $repeater->add_control(
139 + 'kng_styled_txt_content_type',
140 + [
141 + 'label' => '<b>' . esc_html__('Type of content', 'king-addons') . '</b>',
142 + 'type' => Controls_Manager::SELECT,
143 + 'options' => [
144 + 'text' => esc_html__('Text', 'king-addons'),
145 + 'image' => esc_html__('Image', 'king-addons'),
146 + ],
147 + 'default' => 'text',
148 + 'separator' => 'after',
149 + ]
150 + );
151 +
152 + $repeater->add_group_control(
153 + Group_Control_Typography::get_type(),
154 + [
155 + 'label' => esc_html__('Typography', 'king-addons'),
156 + 'name' => 'kng_styled_txt_typography',
157 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
158 + 'condition' => [
159 + 'kng_styled_txt_content_type' => 'text'
160 + ]
161 + ]
162 + );
163 +
164 + $repeater->add_control(
165 + 'kng_styled_txt_color',
166 + [
167 + 'label' => esc_html__('Color', 'king-addons'),
168 + 'type' => Controls_Manager::COLOR,
169 + 'selectors' => [
170 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'color: {{VALUE}};',
171 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text a' => 'color: {{VALUE}};',
172 + ],
173 + 'condition' => [
174 + 'kng_styled_txt_content_type' => 'text'
175 + ]
176 + ]
177 + );
178 +
179 + $repeater->add_group_control(
180 + Group_Control_Background::get_type(),
181 + [
182 + 'name' => 'kng_styled_txt_bg_color',
183 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
184 + 'condition' => [
185 + 'kng_styled_txt_content_type' => 'text'
186 + ],
187 + 'separator' => 'before',
188 + ]
189 + );
190 +
191 + $repeater->add_control(
192 + 'kng_styled_txt_custom_vertical_align',
193 + [
194 + 'label' => esc_html__('Custom Vertical Align', 'king-addons'),
195 + 'type' => Controls_Manager::SWITCHER,
196 + 'condition' => [
197 + 'kng_styled_txt_content_type' => 'text'
198 + ],
199 + 'separator' => 'before',
200 + ]
201 + );
202 +
203 + $repeater->add_responsive_control(
204 + 'kng_styled_txt_vertical_align',
205 + [
206 + 'label' => esc_html__('Vertical Align', 'king-addons'),
207 + 'type' => Controls_Manager::SELECT,
208 + 'options' => [
209 + 'baseline' => esc_html__('baseline', 'king-addons'),
210 + 'top' => esc_html__('top', 'king-addons'),
211 + 'bottom' => esc_html__('bottom', 'king-addons'),
212 + 'sub' => esc_html__('sub', 'king-addons'),
213 + 'super' => esc_html__('super', 'king-addons'),
214 + 'text-top' => esc_html__('text-top', 'king-addons'),
215 + 'text-bottom' => esc_html__('text-bottom', 'king-addons'),
216 + 'middle' => esc_html__('middle', 'king-addons'),
217 + ],
218 + 'default' => 'baseline',
219 + 'selectors' => [
220 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'vertical-align: {{VALUE}};',
221 + ],
222 + 'condition' => [
223 + 'kng_styled_txt_custom_vertical_align!' => '',
224 + 'kng_styled_txt_content_type' => 'text'
225 + ]
226 + ]
227 + );
228 +
229 + $repeater->add_control(
230 + 'kng_styled_txt_padding_switcher',
231 + [
232 + 'label' => esc_html__('Custom Padding', 'king-addons'),
233 + 'type' => Controls_Manager::SWITCHER,
234 + 'condition' => [
235 + 'kng_styled_txt_content_type' => 'text'
236 + ]
237 + ]
238 + );
239 +
240 + $repeater->add_responsive_control(
241 + 'kng_styled_txt_padding',
242 + [
243 + 'label' => esc_html__('Padding', 'king-addons'),
244 + 'type' => Controls_Manager::DIMENSIONS,
245 + 'size_units' => ['px', 'em', '%'],
246 + 'default' => [
247 + 'top' => 0,
248 + 'right' => 0,
249 + 'bottom' => 0,
250 + 'left' => 0,
251 + ],
252 + 'selectors' => [
253 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
254 + ],
255 + 'condition' => [
256 + 'kng_styled_txt_padding_switcher!' => '',
257 + 'kng_styled_txt_content_type' => 'text'
258 + ]
259 + ]
260 + );
261 +
262 + $repeater->add_control(
263 + 'kng_styled_txt_margin_switcher',
264 + [
265 + 'label' => esc_html__('Custom Margin', 'king-addons'),
266 + 'type' => Controls_Manager::SWITCHER,
267 + 'condition' => [
268 + 'kng_styled_txt_content_type' => 'text'
269 + ]
270 + ]
271 + );
272 +
273 + $repeater->add_responsive_control(
274 + 'kng_styled_txt_margin_left',
275 + [
276 + 'label' => esc_html__('Margin Left', 'king-addons'),
277 + 'type' => Controls_Manager::NUMBER,
278 + 'step' => 1,
279 + 'selectors' => [
280 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-left: {{SIZE}}px;',
281 + ],
282 + 'condition' => [
283 + 'kng_styled_txt_margin_switcher!' => '',
284 + 'kng_styled_txt_content_type' => 'text'
285 + ]
286 + ]
287 + );
288 +
289 + $repeater->add_responsive_control(
290 + 'kng_styled_txt_margin_right',
291 + [
292 + 'label' => esc_html__('Margin Right', 'king-addons'),
293 + 'type' => Controls_Manager::NUMBER,
294 + 'step' => 1,
295 + 'selectors' => [
296 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-right: {{SIZE}}px;',
297 + ],
298 + 'condition' => [
299 + 'kng_styled_txt_margin_switcher!' => '',
300 + 'kng_styled_txt_content_type' => 'text'
301 + ]
302 + ]
303 + );
304 +
305 + $repeater->add_control(
306 + 'kng_styled_txt_margin_info',
307 + [
308 + 'type' => Controls_Manager::ALERT,
309 + 'alert_type' => 'info',
310 + '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'),
311 + 'condition' => [
312 + 'kng_styled_txt_margin_switcher!' => '',
313 + 'kng_styled_txt_content_type' => 'text'
314 + ]
315 + ]
316 + );
317 +
318 + $repeater->add_control(
319 + 'kng_styled_txt_custom_border',
320 + [
321 + 'label' => esc_html__('Custom Border', 'king-addons'),
322 + 'type' => Controls_Manager::SWITCHER,
323 + 'condition' => [
324 + 'kng_styled_txt_content_type' => 'text'
325 + ]
326 + ]
327 + );
328 +
329 + $repeater->add_group_control(
330 + Group_Control_Border::get_type(),
331 + [
332 + 'name' => 'kng_styled_txt_border',
333 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text',
334 + 'condition' => [
335 + 'kng_styled_txt_custom_border!' => '',
336 + 'kng_styled_txt_content_type' => 'text'
337 + ]
338 + ]
339 + );
340 +
341 + $repeater->add_responsive_control(
342 + 'kng_styled_txt_border_radius',
343 + [
344 + 'label' => esc_html__('Border Radius', 'king-addons'),
345 + 'type' => Controls_Manager::DIMENSIONS,
346 + 'size_units' => ['px', '%'],
347 + 'default' => [
348 + 'top' => 0,
349 + 'right' => 0,
350 + 'bottom' => 0,
351 + 'left' => 0,
352 + ],
353 + 'selectors' => [
354 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
355 + ],
356 + 'condition' => [
357 + 'kng_styled_txt_custom_border!' => '',
358 + 'kng_styled_txt_content_type' => 'text'
359 + ]
360 + ]
361 + );
362 +
363 + $repeater->add_control(
364 + 'kng_styled_txt_custom_width_switcher',
365 + [
366 + 'label' => esc_html__('Custom Width', 'king-addons'),
367 + 'type' => Controls_Manager::SWITCHER,
368 + 'condition' => [
369 + 'kng_styled_txt_content_type' => 'text'
370 + ]
371 + ]
372 + );
373 +
374 + $repeater->add_responsive_control(
375 + 'kng_styled_txt_custom_width',
376 + [
377 + 'label' => esc_html__('Width (px)', 'king-addons'),
378 + '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'),
379 + 'type' => Controls_Manager::NUMBER,
380 + 'min' => 0,
381 + 'step' => 1,
382 + 'selectors' => [
383 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'width: {{SIZE}}px; display: inline-block;',
384 + ],
385 + 'condition' => [
386 + 'kng_styled_txt_custom_width_switcher!' => '',
387 + 'kng_styled_txt_content_type' => 'text'
388 + ]
389 + ]
390 + );
391 +
392 + $repeater->add_responsive_control(
393 + 'kng_styled_txt_margin_top',
394 + [
395 + 'label' => esc_html__('Margin Top', 'king-addons'),
396 + 'type' => Controls_Manager::NUMBER,
397 + 'step' => 1,
398 + 'selectors' => [
399 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-top: {{SIZE}}px;',
400 + ],
401 + 'condition' => [
402 + 'kng_styled_txt_custom_width_switcher!' => '',
403 + 'kng_styled_txt_content_type' => 'text'
404 + ]
405 + ]
406 + );
407 +
408 + $repeater->add_responsive_control(
409 + 'kng_styled_txt_margin_bottom',
410 + [
411 + 'label' => esc_html__('Margin Bottom', 'king-addons'),
412 + 'type' => Controls_Manager::NUMBER,
413 + 'step' => 1,
414 + 'selectors' => [
415 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin-bottom: {{SIZE}}px;',
416 + ],
417 + 'condition' => [
418 + 'kng_styled_txt_custom_width_switcher!' => '',
419 + 'kng_styled_txt_content_type' => 'text'
420 + ]
421 + ]
422 + );
423 +
424 + /** ====================================================== */
425 + /** TEXT EFFECTS ========================================== */
426 + $pro_icon = king_addons_freemius()->can_use_premium_code() ? '' : '<i class="eicon-pro-icon"></i>';
427 + $repeater->add_control(
428 + 'kng_styled_txt_effect',
429 + [
430 + 'label' => '<b>' . esc_html__('Text Effect', 'king-addons') . '</b>',
431 + 'type' => Controls_Manager::SELECT,
432 + 'options' => [
433 + 'none' => esc_html__('None', 'king-addons'),
434 + 'text-gradient' => esc_html__('Text Gradient', 'king-addons'),
435 + 'underline-gradient' => esc_html__('Underline Gradient', 'king-addons'),
436 + 'outline-stroke' => esc_html__('Outline Stroke', 'king-addons'),
437 + 'spoiler-thanos' => sprintf(__('Spoiler / Thanos Snap %s', 'king-addons'), $pro_icon),
438 + 'typing' => sprintf(__('Typing Text %s', 'king-addons'), $pro_icon),
439 + ],
440 + 'label_block' => true,
441 + 'default' => 'none',
442 + 'separator' => 'before',
443 + 'condition' => [
444 + 'kng_styled_txt_content_type' => 'text'
445 + ]
446 + ]
447 + );
448 +
449 + if (!king_addons_freemius()->can_use_premium_code()) {
450 + $repeater->add_control(
451 + 'kng_styled_txt_effect_spoiler_notice',
452 + [
453 + 'type' => Controls_Manager::RAW_HTML,
454 + 'raw' => esc_html__('Spoiler / Thanos effect is available in Pro.', 'king-addons'),
455 + 'content_classes' => 'king-addons-pro-notice',
456 + 'condition' => [
457 + 'kng_styled_txt_effect' => 'spoiler-thanos',
458 + 'kng_styled_txt_content_type' => 'text',
459 + 'kng_styled_txt_effect!' => 'outline-stroke',
460 + ],
461 + ]
462 + );
463 + }
464 +
465 + if (!king_addons_freemius()->can_use_premium_code()) {
466 + $repeater->add_control(
467 + 'kng_styled_txt_effect_typing_notice',
468 + [
469 + 'type' => Controls_Manager::RAW_HTML,
470 + 'raw' => esc_html__('Typing Text effect is available in Pro.', 'king-addons'),
471 + 'content_classes' => 'king-addons-pro-notice',
472 + 'condition' => [
473 + 'kng_styled_txt_effect' => 'typing',
474 + 'kng_styled_txt_content_type' => 'text',
475 + ],
476 + ]
477 + );
478 + }
479 +
480 + $repeater->add_control(
481 + 'kng_styled_txt_spoiler_trigger_desktop',
482 + [
483 + 'label' => esc_html__('Reveal on Desktop', 'king-addons'),
484 + 'type' => Controls_Manager::SELECT,
485 + 'default' => 'hover',
486 + 'options' => [
487 + 'hover' => esc_html__('Hover', 'king-addons'),
488 + 'hover-click' => esc_html__('Hover + Click (Remove)', 'king-addons'),
489 + 'click' => esc_html__('Click', 'king-addons'),
490 + ],
491 + 'condition' => [
492 + 'kng_styled_txt_effect' => 'spoiler-thanos',
493 + 'kng_styled_txt_content_type' => 'text'
494 + ]
495 + ]
496 + );
497 +
498 + $repeater->add_control(
499 + 'kng_styled_txt_spoiler_trigger_mobile',
500 + [
501 + 'label' => esc_html__('Reveal on Mobile', 'king-addons'),
502 + 'type' => Controls_Manager::SELECT,
503 + 'default' => 'tap',
504 + 'options' => [
505 + 'tap' => esc_html__('Tap', 'king-addons'),
506 + 'hover' => esc_html__('Hover', 'king-addons'),
507 + 'hover-click' => esc_html__('Hover + Tap (Remove)', 'king-addons'),
508 + ],
509 + 'condition' => [
510 + 'kng_styled_txt_effect' => 'spoiler-thanos',
511 + 'kng_styled_txt_content_type' => 'text'
512 + ]
513 + ]
514 + );
515 +
516 + $repeater->add_control(
517 + 'kng_styled_txt_spoiler_color',
518 + [
519 + 'label' => esc_html__('Spoiler Dots Color', 'king-addons'),
520 + 'type' => Controls_Manager::COLOR,
521 + 'default' => '#9ca3af',
522 + 'condition' => [
523 + 'kng_styled_txt_effect' => 'spoiler-thanos',
524 + 'kng_styled_txt_content_type' => 'text'
525 + ]
526 + ]
527 + );
528 +
529 + $repeater->add_control(
530 + 'kng_styled_txt_spoiler_opacity',
531 + [
532 + 'label' => esc_html__('Spoiler Opacity', 'king-addons'),
533 + 'type' => Controls_Manager::SLIDER,
534 + 'size_units' => ['custom'],
535 + 'range' => [
536 + 'custom' => [
537 + 'min' => 0.1,
538 + 'max' => 1,
539 + 'step' => 0.05,
540 + ],
541 + ],
542 + 'default' => [
543 + 'size' => 0.92,
544 + 'unit' => 'custom',
545 + ],
546 + 'condition' => [
547 + 'kng_styled_txt_effect' => 'spoiler-thanos',
548 + 'kng_styled_txt_content_type' => 'text'
549 + ]
550 + ]
551 + );
552 +
553 + $repeater->add_control(
554 + 'kng_styled_txt_spoiler_speed',
555 + [
556 + 'label' => esc_html__('Animation Speed (s)', 'king-addons'),
557 + 'type' => Controls_Manager::SLIDER,
558 + 'size_units' => ['custom'],
559 + 'range' => [
560 + 'custom' => [
561 + 'min' => 0.5,
562 + 'max' => 5,
563 + 'step' => 0.1,
564 + ],
565 + ],
566 + 'default' => [
567 + 'size' => 1.6,
568 + 'unit' => 'custom',
569 + ],
570 + 'condition' => [
571 + 'kng_styled_txt_effect' => 'spoiler-thanos',
572 + 'kng_styled_txt_content_type' => 'text'
573 + ]
574 + ]
575 + );
576 +
577 + $repeater->add_control(
578 + 'kng_styled_txt_typing_speed',
579 + [
580 + 'label' => esc_html__('Typing Speed (ms)', 'king-addons'),
581 + 'type' => Controls_Manager::NUMBER,
582 + 'default' => 80,
583 + 'min' => 10,
584 + 'max' => 500,
585 + 'condition' => [
586 + 'kng_styled_txt_effect' => 'typing',
587 + 'kng_styled_txt_content_type' => 'text'
588 + ]
589 + ]
590 + );
591 +
592 + $repeater->add_control(
593 + 'kng_styled_txt_typing_delay',
594 + [
595 + 'label' => esc_html__('Loop Delay (ms)', 'king-addons'),
596 + 'type' => Controls_Manager::NUMBER,
597 + 'default' => 1200,
598 + 'min' => 0,
599 + 'max' => 10000,
600 + 'condition' => [
601 + 'kng_styled_txt_effect' => 'typing',
602 + 'kng_styled_txt_content_type' => 'text'
603 + ]
604 + ]
605 + );
606 +
607 + $repeater->add_control(
608 + 'kng_styled_txt_typing_loop',
609 + [
610 + 'label' => esc_html__('Loop Typing', 'king-addons'),
611 + 'type' => Controls_Manager::SWITCHER,
612 + 'return_value' => 'yes',
613 + 'default' => 'yes',
614 + 'condition' => [
615 + 'kng_styled_txt_effect' => 'typing',
616 + 'kng_styled_txt_content_type' => 'text'
617 + ]
618 + ]
619 + );
620 +
621 + $repeater->add_control(
622 + 'kng_styled_txt_typing_cursor',
623 + [
624 + 'label' => esc_html__('Cursor', 'king-addons'),
625 + 'type' => Controls_Manager::TEXT,
626 + 'default' => '|',
627 + 'condition' => [
628 + 'kng_styled_txt_effect' => 'typing',
629 + 'kng_styled_txt_content_type' => 'text'
630 + ]
631 + ]
632 + );
633 +
634 + /** Outline Stroke ========================================== */
635 + $repeater->add_control(
636 + 'kng_styled_txt_effect_stroke_txt_color',
637 + [
638 + 'label' => esc_html__('Text Color', 'king-addons'),
639 + 'type' => Controls_Manager::COLOR,
640 + 'default' => '#0000',
641 + 'selectors' => [
642 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => 'color: {{VALUE}};'
643 + ],
644 + 'condition' => [
645 + 'kng_styled_txt_effect' => 'outline-stroke',
646 + 'kng_styled_txt_content_type' => 'text'
647 + ]
648 + ]
649 + );
650 +
651 + $repeater->add_control(
652 + 'kng_styled_txt_effect_stroke_stroke_color',
653 + [
654 + 'label' => esc_html__('Stroke Color', 'king-addons'),
655 + 'type' => Controls_Manager::COLOR,
656 + 'default' => '#dbdbdb',
657 + 'selectors' => [
658 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => '-webkit-text-stroke-color: {{VALUE}};'
659 + ],
660 + 'condition' => [
661 + 'kng_styled_txt_effect' => 'outline-stroke',
662 + 'kng_styled_txt_content_type' => 'text'
663 + ]
664 + ]
665 + );
666 +
667 + $repeater->add_control(
668 + 'kng_styled_txt_effect_stroke_width',
669 + [
670 + 'label' => esc_html__('Stroke Width (px)', 'king-addons'),
671 + 'type' => Controls_Manager::NUMBER,
672 + 'min' => 1,
673 + 'step' => 1,
674 + 'default' => 1,
675 + 'selectors' => [
676 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => '-webkit-text-stroke-width: {{SIZE}}px;',
677 + ],
678 + 'condition' => [
679 + 'kng_styled_txt_effect' => 'outline-stroke',
680 + 'kng_styled_txt_content_type' => 'text'
681 + ]
682 + ]
683 + );
684 + /** END Outline Stroke ========================================== */
685 +
686 + /** Text Gradient ========================================== */
687 + $repeater->add_group_control(
688 + Group_Control_Background::get_type(),
689 + [
690 + 'name' => 'kng_styled_txt_effect_gradient',
691 + 'types' => ['gradient'],
692 + 'fields_options' => [
693 + 'color' => [
694 + 'default' => '#574ff7',
695 + ],
696 + 'background' => [
697 + 'default' => 'gradient',
698 + ]
699 + ],
700 + 'exclude' => ['classic', 'image'],
701 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner',
702 + 'condition' => [
703 + 'kng_styled_txt_effect' => 'text-gradient',
704 + 'kng_styled_txt_content_type' => 'text'
705 + ]
706 + ]
707 + );
708 + /** END: Text Gradient ========================================== */
709 +
710 + /** Underline Gradient ========================================== */
711 + $repeater->add_group_control(
712 + Group_Control_Background::get_type(),
713 + [
714 + 'name' => 'kng_styled_txt_underline_effects_gradient',
715 + 'types' => ['gradient'],
716 + 'fields_options' => [
717 + 'color' => [
718 + 'default' => '#84fab0',
719 + ],
720 + 'color_b' => [
721 + 'default' => '#8fd3f4',
722 + ],
723 + 'background' => [
724 + 'default' => 'gradient',
725 + ],
726 + 'gradient_type' => [
727 + 'default' => 'linear'
728 + ],
729 + 'gradient_angle' => [
730 + 'default' => [
731 + 'unit' => 'deg',
732 + 'size' => 120,
733 + ],
734 + ]
735 + ],
736 + 'exclude' => ['classic', 'image'],
737 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner',
738 + 'condition' => [
739 + 'kng_styled_txt_effect' => 'underline-gradient',
740 + 'kng_styled_txt_content_type' => 'text'
741 + ]
742 + ]
743 + );
744 +
745 + $repeater->add_control(
746 + 'kng_styled_txt_underline_effects_bg_position',
747 + [
748 + 'label' => esc_html__('Vertical Position (%)', 'king-addons'),
749 + 'type' => Controls_Manager::SLIDER,
750 + 'size_units' => ['%'],
751 + 'range' => [
752 + '%' => [
753 + 'min' => 0,
754 + 'max' => 100,
755 + 'step' => 1,
756 + ],
757 + ],
758 + 'default' => [
759 + 'unit' => '%',
760 + 'size' => 88,
761 + ],
762 + 'separator' => 'before',
763 + 'selectors' => [
764 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'background-position: 0 {{SIZE}}{{UNIT}}; background-repeat: no-repeat;',
765 + ],
766 + 'condition' => [
767 + 'kng_styled_txt_effect' => 'underline-gradient',
768 + 'kng_styled_txt_content_type' => 'text'
769 + ]
770 + ]
771 + );
772 +
773 + $repeater->add_control(
774 + 'kng_styled_txt_underline_effects_bg_height',
775 + [
776 + 'label' => esc_html__('Height (%)', 'king-addons'),
777 + 'type' => Controls_Manager::SLIDER,
778 + 'size_units' => ['%'],
779 + 'range' => [
780 + '%' => [
781 + 'min' => 0,
782 + 'max' => 100,
783 + 'step' => 1,
784 + ],
785 + ],
786 + 'default' => [
787 + 'unit' => '%',
788 + 'size' => 20,
789 + ],
790 + 'selectors' => [
791 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'background-size: 100% {{SIZE}}{{UNIT}};',
792 + ],
793 + 'condition' => [
794 + 'kng_styled_txt_effect' => 'underline-gradient',
795 + 'kng_styled_txt_content_type' => 'text'
796 + ]
797 + ]
798 + );
799 +
800 + $repeater->add_control(
801 + 'kng_styled_txt_underline_effects_bg_height_hover',
802 + [
803 + 'label' => esc_html__('Height on mouse hover (%)', 'king-addons'),
804 + 'type' => Controls_Manager::SLIDER,
805 + 'size_units' => ['%'],
806 + 'range' => [
807 + '%' => [
808 + 'min' => 0,
809 + 'max' => 100,
810 + 'step' => 1,
811 + ],
812 + ],
813 + 'default' => [
814 + 'unit' => '%',
815 + 'size' => 88,
816 + ],
817 + 'selectors' => [
818 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner:hover' => 'background-size: 100% {{SIZE}}{{UNIT}};',
819 + ],
820 + 'condition' => [
821 + 'kng_styled_txt_effect' => 'underline-gradient',
822 + 'kng_styled_txt_content_type' => 'text'
823 + ]
824 + ]
825 + );
826 +
827 + /** END: Underline Gradient ========================================== */
828 +
829 + /** END: TEXT EFFECTS ========================================== */
830 + /** =========================================================== */
831 +
832 + $repeater->add_control(
833 + 'kng_styled_txt_content',
834 + [
835 + 'label' => '<b>' . esc_html__('Text', 'king-addons') . '</b>',
836 + 'type' => Controls_Manager::TEXTAREA,
837 + 'default' => esc_html__('Text', 'king-addons'),
838 + 'condition' => [
839 + 'kng_styled_txt_content_type' => 'text'
840 + ],
841 + 'separator' => 'before',
842 + ]
843 + );
844 + /** END: Content Type TEXT ========================================== */
845 +
846 + /** Content Type IMAGE ========================================== */
847 + $repeater->add_control(
848 + 'kng_styled_txt_image',
849 + [
850 + 'label' => esc_html__('Image', 'king-addons'),
851 + 'type' => Controls_Manager::MEDIA,
852 + 'default' => [
853 + 'url' => Utils::get_placeholder_image_src(),
854 + ],
855 + 'condition' => [
856 + 'kng_styled_txt_content_type' => 'image'
857 + ]
858 + ]
859 + );
860 +
861 + $repeater->add_group_control(
862 + Group_Control_Image_Size::get_type(),
863 + [
864 + 'name' => 'kng_styled_txt_image_size',
865 + 'default' => 'full',
866 + 'separator' => 'before',
867 + 'condition' => [
868 + 'kng_styled_txt_content_type' => 'image'
869 + ]
870 + ]
871 + );
872 +
873 + $repeater->add_responsive_control(
874 + 'kng_image_comparison_box_max_width',
875 + [
876 + 'label' => esc_html__('Width (px)', 'king-addons'),
877 + 'type' => Controls_Manager::NUMBER,
878 + 'min' => 0,
879 + 'step' => 1,
880 + 'default' => 50,
881 + 'selectors' => [
882 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'width: {{SIZE}}px;'
883 + ],
884 + 'condition' => [
885 + 'kng_styled_txt_content_type' => 'image'
886 + ]
887 + ]
888 + );
889 +
890 + $repeater->add_group_control(
891 + Group_Control_Box_Shadow::get_type(),
892 + [
893 + 'name' => 'kng_styled_txt_image_shadow',
894 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img',
895 + 'condition' => [
896 + 'kng_styled_txt_content_type' => 'image'
897 + ]
898 + ]
899 + );
900 +
901 + $repeater->add_group_control(
902 + Group_Control_Border::get_type(),
903 + [
904 + 'name' => 'kng_styled_txt_image_border',
905 + 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img',
906 + 'condition' => [
907 + 'kng_styled_txt_content_type' => 'image'
908 + ]
909 + ]
910 + );
911 +
912 + $repeater->add_responsive_control(
913 + 'kng_styled_txt_image_border_radius',
914 + [
915 + 'label' => esc_html__('Border Radius', 'king-addons'),
916 + 'type' => Controls_Manager::DIMENSIONS,
917 + 'size_units' => ['px', '%'],
918 + 'selectors' => [
919 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
920 + ],
921 + 'condition' => [
922 + 'kng_styled_txt_content_type' => 'image'
923 + ]
924 + ]
925 + );
926 +
927 + $repeater->add_control(
928 + 'kng_styled_txt_image_custom_vertical_align',
929 + [
930 + 'label' => esc_html__('Custom Vertical Align', 'king-addons'),
931 + 'type' => Controls_Manager::SWITCHER,
932 + 'condition' => [
933 + 'kng_styled_txt_content_type' => 'image'
934 + ]
935 + ]
936 + );
937 +
938 + $repeater->add_responsive_control(
939 + 'kng_styled_txt_image_vertical_align',
940 + [
941 + 'label' => esc_html__('Vertical Align', 'king-addons'),
942 + 'type' => Controls_Manager::SELECT,
943 + 'options' => [
944 + 'baseline' => esc_html__('baseline', 'king-addons'),
945 + 'top' => esc_html__('top', 'king-addons'),
946 + 'bottom' => esc_html__('bottom', 'king-addons'),
947 + 'sub' => esc_html__('sub', 'king-addons'),
948 + 'super' => esc_html__('super', 'king-addons'),
949 + 'text-top' => esc_html__('text-top', 'king-addons'),
950 + 'text-bottom' => esc_html__('text-bottom', 'king-addons'),
951 + 'middle' => esc_html__('middle', 'king-addons'),
952 + ],
953 + 'default' => 'baseline',
954 + 'selectors' => [
955 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'vertical-align: {{VALUE}};',
956 + ],
957 + 'condition' => [
958 + 'kng_styled_txt_image_custom_vertical_align!' => '',
959 + 'kng_styled_txt_content_type' => 'image'
960 + ]
961 + ]
962 + );
963 +
964 + $repeater->add_control(
965 + 'kng_styled_txt_image_margin_switcher',
966 + [
967 + 'label' => esc_html__('Custom Margin', 'king-addons'),
968 + 'type' => Controls_Manager::SWITCHER,
969 + 'condition' => [
970 + 'kng_styled_txt_content_type' => 'image'
971 + ]
972 + ]
973 + );
974 +
975 + $repeater->add_responsive_control(
976 + 'kng_styled_txt_image_margin',
977 + [
978 + 'label' => esc_html__('Margin', 'king-addons'),
979 + 'type' => Controls_Manager::DIMENSIONS,
980 + 'size_units' => ['px', '%'],
981 + 'default' => [
982 + 'top' => 0,
983 + 'right' => 0,
984 + 'bottom' => 0,
985 + 'left' => 0,
986 + ],
987 + 'selectors' => [
988 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'margin: 0;',
989 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
990 + ],
991 + 'condition' => [
992 + 'kng_styled_txt_image_margin_switcher!' => '',
993 + 'kng_styled_txt_content_type' => 'image'
994 + ]
995 + ]
996 + );
997 + /** END: Content Type IMAGE ========================================== */
998 +
999 + $repeater->add_control(
1000 + 'kng_styled_txt_content_common_for_all_types_head',
1001 + [
1002 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common for all types', 'king-addons'),
1003 + 'type' => Controls_Manager::HEADING,
1004 + ]
1005 + );
1006 +
1007 + $repeater->add_control(
1008 + 'kng_styled_txt_custom_css_class_switcher',
1009 + [
1010 + 'label' => esc_html__('Custom CSS Class', 'king-addons'),
1011 + 'type' => Controls_Manager::SWITCHER,
1012 + ]
1013 + );
1014 +
1015 + $repeater->add_control(
1016 + 'kng_styled_txt_custom_css_class',
1017 + [
1018 + 'label' => esc_html__('CSS Class', 'king-addons'),
1019 + 'type' => Controls_Manager::TEXT,
1020 + 'placeholder' => esc_html__('Type or paste the class', 'king-addons'),
1021 + 'ai' => [
1022 + 'active' => false,
1023 + ],
1024 + 'separator' => 'after',
1025 + 'condition' => [
1026 + 'kng_styled_txt_custom_css_class_switcher!' => '',
1027 + ]
1028 + ]
1029 + );
1030 +
1031 + $repeater->add_control(
1032 + 'kng_styled_txt_transform_switcher',
1033 + [
1034 + 'label' => esc_html__('Transform', 'king-addons'),
1035 + 'type' => Controls_Manager::SWITCHER,
1036 + ]
1037 + );
1038 +
1039 + $repeater->add_responsive_control(
1040 + 'kng_styled_txt_transform_rotate',
1041 + [
1042 + 'label' => esc_html__('Rotate', 'king-addons') . ' (deg)',
1043 + 'type' => Controls_Manager::NUMBER,
1044 + 'min' => -360,
1045 + 'max' => 360,
1046 + 'step' => 5,
1047 + 'default' => 0,
1048 + 'selectors' => [
1049 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner' => 'transform: rotateZ({{SIZE}}deg); display: inline-block;',
1050 + ],
1051 + 'condition' => [
1052 + 'kng_styled_txt_transform_switcher!' => '',
1053 + ],
1054 + 'frontend_available' => true,
1055 + ]
1056 + );
1057 +
1058 + $repeater->add_responsive_control(
1059 + 'kng_styled_txt_transform_offset_X',
1060 + [
1061 + 'label' => esc_html__('Offset X', 'king-addons'),
1062 + 'type' => Controls_Manager::SLIDER,
1063 + 'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1064 + 'range' => [
1065 + '%' => [
1066 + 'min' => -100,
1067 + 'max' => 100,
1068 + ],
1069 + 'px' => [
1070 + 'min' => -1000,
1071 + 'max' => 1000,
1072 + ],
1073 + ],
1074 + 'condition' => [
1075 + 'kng_styled_txt_transform_switcher!' => '',
1076 + ],
1077 + 'selectors' => [
1078 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner span' => 'transform: translateX({{SIZE}}{{UNIT}}); display: inline-block;',
1079 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text .king-addons-styled-text-inner img' => 'transform: translateX({{SIZE}}{{UNIT}}); display: inline-block;',
1080 + ],
1081 + 'frontend_available' => true,
1082 + ]
1083 + );
1084 +
1085 + $repeater->add_responsive_control(
1086 + 'kng_styled_txt_transform_offset_Y',
1087 + [
1088 + 'label' => esc_html__('Offset Y', 'king-addons'),
1089 + 'type' => Controls_Manager::SLIDER,
1090 + 'size_units' => ['px', '%', 'em', 'rem', 'vh', 'custom'],
1091 + 'range' => [
1092 + '%' => [
1093 + 'min' => -100,
1094 + 'max' => 100,
1095 + ],
1096 + 'px' => [
1097 + 'min' => -1000,
1098 + 'max' => 1000,
1099 + ],
1100 + ],
1101 + 'condition' => [
1102 + 'kng_styled_txt_transform_switcher!' => '',
1103 + ],
1104 + 'selectors' => [
1105 + '{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-styled-text' => 'transform: translateY({{SIZE}}{{UNIT}}); display: inline-block;',
1106 + ],
1107 + 'frontend_available' => true,
1108 + ]
1109 + );
1110 +
1111 + $repeater->add_control(
1112 + 'kng_styled_txt_link_switcher',
1113 + [
1114 + 'label' => esc_html__('Link', 'king-addons'),
1115 + 'type' => Controls_Manager::SWITCHER,
1116 + ]
1117 + );
1118 +
1119 + $repeater->add_control(
1120 + 'kng_styled_txt_link',
1121 + [
1122 + 'label' => esc_html__('Link', 'king-addons'),
1123 + 'type' => Controls_Manager::URL,
1124 + 'condition' => [
1125 + 'kng_styled_txt_link_switcher!' => '',
1126 + ]
1127 + ]
1128 + );
1129 +
1130 + $this->add_control(
1131 + 'kng_styled_txt_content_items',
1132 + [
1133 + 'type' => Controls_Manager::REPEATER,
1134 + 'fields' => $repeater->get_controls(),
1135 + 'default' => [
1136 + [
1137 + 'kng_styled_txt_content_type' => 'text',
1138 + 'kng_styled_txt_content' => esc_html__('King', 'king-addons'),
1139 + ],
1140 + [
1141 + 'kng_styled_txt_content_type' => 'image',
1142 + 'kng_styled_txt_image' => Utils::get_placeholder_image_src(),
1143 + ],
1144 + [
1145 + 'kng_styled_txt_content_type' => 'text',
1146 + 'kng_styled_txt_content' => esc_html__('Addons', 'king-addons'),
1147 + ],
1148 + ],
1149 + '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}}"> <# } #>',
1150 + ]
1151 + );
1152 +
1153 + $this->end_controls_section();
1154 + /** END SECTION: Texts ===================== */
1155 + /** END TAB: CONTENT ===================== */
1156 +
1157 + /** START TAB: STYLE ===================== */
1158 + /** SECTION: Common Styles ===================== */
1159 + $this->start_controls_section(
1160 + 'kng_styled_txt_style_section_commmon_styles',
1161 + [
1162 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common Styles', 'king-addons'),
1163 + 'tab' => Controls_Manager::TAB_STYLE,
1164 + ]
1165 + );
1166 +
1167 + $this->add_group_control(
1168 + Group_Control_Typography::get_type(),
1169 + [
1170 + 'label' => esc_html__('Item Typography', 'king-addons'),
1171 + 'name' => 'kng_styled_txt_common_typography',
1172 + 'selector' => '{{WRAPPER}} .king-addons-styled-text',
1173 + 'fields_options' => [
1174 + 'font_size' => [
1175 + 'default' => [
1176 + 'size' => 50,
1177 + 'unit' => 'px'
1178 + ],
1179 + ],
1180 + 'typography' => [
1181 + 'default' => 'custom',
1182 + ]
1183 + ],
1184 + ]
1185 + );
1186 +
1187 + $this->add_control(
1188 + 'kng_styled_txt_common_color',
1189 + [
1190 + 'label' => esc_html__('Item Text Color', 'king-addons'),
1191 + 'type' => Controls_Manager::COLOR,
1192 + 'selectors' => [
1193 + '{{WRAPPER}} .king-addons-styled-text' => 'color: {{VALUE}};',
1194 + ],
1195 + ]
1196 + );
1197 +
1198 + $this->add_responsive_control(
1199 + 'kng_styled_txt_common_content_align',
1200 + [
1201 + 'label' => esc_html__('Content Align', 'king-addons'),
1202 + 'type' => Controls_Manager::SELECT,
1203 + 'options' => [
1204 + 'left' => esc_html__('Left', 'king-addons'),
1205 + 'center' => esc_html__('Center', 'king-addons'),
1206 + 'right' => esc_html__('Right', 'king-addons'),
1207 + ],
1208 + 'default' => 'left',
1209 + 'separator' => 'before',
1210 + 'selectors' => [
1211 + '{{WRAPPER}} .king-addons-styled-text-builder-items' => 'text-align: {{VALUE}};',
1212 + ],
1213 + ]
1214 + );
1215 +
1216 + $this->add_responsive_control(
1217 + 'kng_styled_txt_common_items_margin',
1218 + [
1219 + 'label' => esc_html__('Item Margin', 'king-addons'),
1220 + 'type' => Controls_Manager::DIMENSIONS,
1221 + 'size_units' => ['px', 'em', '%'],
1222 + 'default' => [
1223 + 'top' => 0,
1224 + 'right' => 10,
1225 + 'bottom' => 0,
1226 + 'left' => 0,
1227 + 'unit' => 'px',
1228 + 'isLinked' => false
1229 + ],
1230 + 'selectors' => [
1231 + '{{WRAPPER}} .king-addons-styled-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1232 + ],
1233 + 'separator' => 'before',
1234 + ]
1235 + );
1236 +
1237 + $this->add_responsive_control(
1238 + 'kng_styled_txt_common_items_padding',
1239 + [
1240 + 'label' => esc_html__('Item Padding', 'king-addons'),
1241 + 'type' => Controls_Manager::DIMENSIONS,
1242 + 'size_units' => ['px', 'em', '%'],
1243 + 'default' => [
1244 + 'top' => 0,
1245 + 'right' => 0,
1246 + 'bottom' => 0,
1247 + 'left' => 0,
1248 + 'unit' => 'px',
1249 + ],
1250 + 'selectors' => [
1251 + '{{WRAPPER}} .king-addons-styled-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1252 + ],
1253 + 'separator' => 'before',
1254 + ]
1255 + );
1256 +
1257 + $this->end_controls_section();
1258 + /** END SECTION: Common Styles ===================== */
1259 +
1260 + /** SECTION: Wrapper Settings ===================== */
1261 + $this->start_controls_section(
1262 + 'kng_styled_txt_style_section_wrapper_settings',
1263 + [
1264 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Wrapper Tag Settings', 'king-addons'),
1265 + 'tab' => Controls_Manager::TAB_STYLE,
1266 + ]
1267 + );
1268 +
1269 + if (king_addons_freemius()->can_use_premium_code()) {
1270 + $this->add_control(
1271 + 'kng_styled_txt_wrapper_html_tag',
1272 + [
1273 + 'label' => esc_html__('HTML Tag', 'king-addons'),
1274 + 'type' => Controls_Manager::SELECT,
1275 + 'options' => [
1276 + 'div' => 'div',
1277 + 'h1' => 'h1',
1278 + 'h2' => 'h2',
1279 + 'h3' => 'h3',
1280 + 'h4' => 'h4',
1281 + 'h5' => 'h5',
1282 + 'h6' => 'h6',
1283 + 'section' => 'section',
1284 + 'article' => 'article',
1285 + 'aside' => 'aside',
1286 + 'header' => 'header',
1287 + 'footer' => 'footer',
1288 + 'nav' => 'nav',
1289 + 'main' => 'main',
1290 + 'span' => 'span',
1291 + 'p' => 'p',
1292 + ],
1293 + 'default' => 'div',
1294 + ]
1295 + );
1296 + } else {
1297 + $this->add_control(
1298 + 'kng_styled_txt_wrapper_html_tag',
1299 + [
1300 + 'label' => esc_html__('HTML Tag', 'king-addons'),
1301 + 'type' => Controls_Manager::SELECT,
1302 + 'options' => [
1303 + 'div' => 'div',
1304 + 'p' => 'p',
1305 + 'section' => 'section',
1306 + 'article' => 'article',
1307 + 'aside' => 'aside',
1308 + 'header' => 'header',
1309 + 'footer' => 'footer',
1310 + 'nav' => 'nav',
1311 + 'main' => 'main',
1312 + 'span' => 'span',
1313 + ],
1314 + 'default' => 'div',
1315 + ]
1316 + );
1317 +
1318 + $this->add_control(
1319 + 'kng_styled_txt_wrapper_html_tag_pro_notice',
1320 + [
1321 + 'type' => Controls_Manager::RAW_HTML,
1322 + '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>',
1323 + 'content_classes' => 'king-addons-pro-notice',
1324 + ]
1325 + );
1326 + }
1327 +
1328 + $this->add_group_control(
1329 + Group_Control_Typography::get_type(),
1330 + [
1331 + 'name' => 'kng_styled_txt_wrapper_typography',
1332 + 'label' => esc_html__('Tag Typography', 'king-addons'),
1333 + 'description' => esc_html__('This is the typography for the wrapper tag. The Item Typography setting can override this.', 'king-addons'),
1334 + 'selector' => '{{WRAPPER}} .king-addons-styled-text-builder-items',
1335 + 'separator' => 'before',
1336 + ]
1337 + );
1338 +
1339 + $this->add_control(
1340 + 'kng_styled_txt_wrapper_color',
1341 + [
1342 + 'label' => esc_html__('Tag Color', 'king-addons'),
1343 + 'type' => Controls_Manager::COLOR,
1344 + 'selectors' => [
1345 + '{{WRAPPER}} .king-addons-styled-text-builder-items' => 'color: {{VALUE}};',
1346 + ],
1347 + ]
1348 + );
1349 +
1350 + $this->add_responsive_control(
1351 + 'kng_styled_txt_wrapper_padding',
1352 + [
1353 + 'label' => esc_html__('Tag Padding', 'king-addons'),
1354 + 'type' => Controls_Manager::DIMENSIONS,
1355 + 'size_units' => ['px', 'em', '%', 'rem'],
1356 + 'default' => [
1357 + 'top' => 0,
1358 + 'right' => 0,
1359 + 'bottom' => 0,
1360 + 'left' => 0,
1361 + 'unit' => 'px',
1362 + ],
1363 + 'selectors' => [
1364 + '{{WRAPPER}} .king-addons-styled-text-builder-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1365 + ],
1366 + 'separator' => 'before',
1367 + ]
1368 + );
1369 +
1370 + $this->add_responsive_control(
1371 + 'kng_styled_txt_wrapper_margin',
1372 + [
1373 + 'label' => esc_html__('Tag Margin', 'king-addons'),
1374 + 'type' => Controls_Manager::DIMENSIONS,
1375 + 'size_units' => ['px', 'em', '%', 'rem'],
1376 + 'default' => [
1377 + 'top' => 0,
1378 + 'right' => 0,
1379 + 'bottom' => 0,
1380 + 'left' => 0,
1381 + 'unit' => 'px',
1382 + ],
1383 + 'selectors' => [
1384 + '{{WRAPPER}} .king-addons-styled-text-builder-items' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1385 + ],
1386 + ]
1387 + );
1388 +
1389 + $this->end_controls_section();
1390 + /** END SECTION: Wrapper Settings ===================== */
1391 + /** END TAB: STYLE ===================== */
1392 + }
1393 +
1394 + protected function render(): void
1395 + {
1396 + $settings = Core::displaySettings($this);
1397 +
1398 + // Get the wrapper HTML tag, default to 'div' if not set
1399 + $wrapper_tag = isset($settings['kng_styled_txt_wrapper_html_tag']) ? $settings['kng_styled_txt_wrapper_html_tag'] : 'div';
1400 +?>
1401 + <<?php echo esc_html($wrapper_tag); ?> class="king-addons-styled-text-builder-items">
1402 + <?php
1403 +
1404 + $item_count = 0;
1405 +
1406 + /** @noinspection PhpUnusedLocalVariableInspection */
1407 + foreach ($settings['kng_styled_txt_content_items'] as $key => $item) {
1408 +
1409 + $content_type = $item['kng_styled_txt_content_type'];
1410 + $item_tag = 'span';
1411 +
1412 + $this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'class', 'king-addons-styled-text-inner');
1413 +
1414 + // If the item has link
1415 + if ('yes' === $item['kng_styled_txt_link_switcher']) {
1416 + if ('' !== $item['kng_styled_txt_link']['url']) {
1417 +
1418 + $item_tag = 'a';
1419 +
1420 + $this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'href', esc_url($item['kng_styled_txt_link']['url']));
1421 +
1422 + if ($item['kng_styled_txt_link']['is_external']) {
1423 + $this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'target', '_blank');
1424 + }
1425 +
1426 + if ($item['kng_styled_txt_link']['nofollow']) {
1427 + $this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'rel', 'nofollow');
1428 + }
1429 + }
1430 + }
1431 +
1432 + // If the item has custom CSS class
1433 + if ('yes' === $item['kng_styled_txt_custom_css_class_switcher']) {
1434 + if ('' !== $item['kng_styled_txt_custom_css_class']) {
1435 + $this->add_render_attribute('kng_styled_txt_content_inner_attribute' . $item_count, 'class', esc_attr($item['kng_styled_txt_custom_css_class']));
1436 + }
1437 + }
1438 +
1439 + /** START: Text Item ===================== */
1440 + if ('text' === $content_type) {
1441 +
1442 + $txt_effect = $item['kng_styled_txt_effect'];
1443 + $txt_effect_class = '';
1444 + $data_attrs = '';
1445 + $inline_style = '';
1446 +
1447 + if (in_array($txt_effect, ['spoiler-thanos', 'typing'], true) && !king_addons_freemius()->can_use_premium_code__premium_only()) {
1448 + $txt_effect = 'none';
1449 + }
1450 +
1451 + switch ($txt_effect) {
1452 + case 'text-gradient':
1453 + $txt_effect_class = ' king-addons-styled-text-gradient';
1454 + break;
1455 + case 'underline-gradient':
1456 + $txt_effect_class = ' king-addons-styled-text-underline-gradient';
1457 + break;
1458 + case 'spoiler-thanos':
1459 + $txt_effect_class = ' king-addons-styled-text--spoiler';
1460 +
1461 + $spoiler_color = $item['kng_styled_txt_spoiler_color'] ?? '#9ca3af';
1462 + $spoiler_opacity = isset($item['kng_styled_txt_spoiler_opacity']['size']) ? (float) $item['kng_styled_txt_spoiler_opacity']['size'] : 0.92;
1463 + $spoiler_speed = isset($item['kng_styled_txt_spoiler_speed']['size']) ? (float) $item['kng_styled_txt_spoiler_speed']['size'] : 1.6;
1464 + $trigger_desktop = $item['kng_styled_txt_spoiler_trigger_desktop'] ?? 'hover';
1465 + $trigger_mobile = $item['kng_styled_txt_spoiler_trigger_mobile'] ?? 'tap';
1466 +
1467 + $data_attrs = ' data-effect="spoiler" data-spoiler-desktop="' . esc_attr($trigger_desktop) . '" data-spoiler-mobile="' . esc_attr($trigger_mobile) . '"';
1468 + $inline_style = ' style="--kng-spoiler-color:' . esc_attr($spoiler_color) . ';--kng-spoiler-opacity:' . esc_attr($spoiler_opacity) . ';--kng-spoiler-speed:' . esc_attr($spoiler_speed) . 's;"';
1469 + break;
1470 + case 'typing':
1471 + $txt_effect_class = ' king-addons-styled-text--typing';
1472 + $typing_speed = isset($item['kng_styled_txt_typing_speed']) ? (int) $item['kng_styled_txt_typing_speed'] : 80;
1473 + $typing_delay = isset($item['kng_styled_txt_typing_delay']) ? (int) $item['kng_styled_txt_typing_delay'] : 1200;
1474 + $typing_loop = ($item['kng_styled_txt_typing_loop'] ?? 'yes') === 'yes';
1475 + $typing_cursor = $item['kng_styled_txt_typing_cursor'] ?? '|';
1476 + $data_attrs = ' data-effect="typing" data-typing-speed="' . esc_attr($typing_speed) . '" data-typing-delay="' . esc_attr($typing_delay) . '" data-typing-loop="' . ($typing_loop ? 'yes' : 'no') . '" data-typing-cursor="' . esc_attr($typing_cursor) . '"';
1477 + break;
1478 + }
1479 +
1480 + if ('' !== $item['kng_styled_txt_content']) {
1481 +
1482 + echo '<span class="elementor-repeater-item-' .
1483 + esc_attr($item['_id']) .
1484 + esc_attr($txt_effect_class) . ' king-addons-styled-text"' . $data_attrs . $inline_style . '>';
1485 +
1486 + $html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_styled_txt_content_inner_attribute' . $item_count) . '>';
1487 + echo wp_kses($html, wp_kses_allowed_html('post'));
1488 +
1489 + echo '<span>' . wp_kses_post($item['kng_styled_txt_content']) . '</span>';
1490 + echo '</' . esc_attr($item_tag) . '></span>';
1491 + }
1492 + }
1493 + /** END: Text Item ===================== */
1494 +
1495 + /** START: Image Item ===================== */
1496 + if ('image' === $content_type) {
1497 +
1498 + if ('' !== $item['kng_styled_txt_image']) {
1499 +
1500 + echo '<span class="elementor-repeater-item-' .
1501 + esc_attr($item['_id']) . ' king-addons-styled-text">';
1502 +
1503 + $html = '<' . esc_attr($item_tag) . ' ' . $this->get_render_attribute_string('kng_styled_txt_content_inner_attribute' . $item_count) . '>';
1504 + echo wp_kses($html, wp_kses_allowed_html('post'));
1505 +
1506 + $image_html = Group_Control_Image_Size::get_attachment_image_html($item, 'kng_styled_txt_image_size', 'kng_styled_txt_image');
1507 +
1508 + // Define allowed tags and attributes
1509 + $allowed_tags = wp_kses_allowed_html('post');
1510 + $allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
1511 + $allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
1512 + $allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
1513 + $allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
1514 +
1515 + // Sanitize the image HTML using the extended set of allowed tags and attributes
1516 + echo wp_kses($image_html, $allowed_tags);
1517 +
1518 + echo '</' . esc_attr($item_tag) . '></span>';
1519 + }
1520 + }
1521 + /** END: Image Item ===================== */
1522 +
1523 + $item_count++;
1524 + } ?>
1525 + </<?php echo esc_html($wrapper_tag); ?>>
1526 +<?php
1527 + }
1528 +}