Diff: STRATO-apps/wordpress_03/app/wp-content/plugins/elementor/includes/widgets/icon-box.php
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
<?php
2
+
namespace Elementor;
3
+
4
+
if ( ! defined( 'ABSPATH' ) ) {
5
+
exit; // Exit if accessed directly.
6
+
}
7
+
8
+
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9
+
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
+
11
+
/**
12
+
* Elementor icon box widget.
13
+
*
14
+
* Elementor widget that displays an icon, a headline and a text.
15
+
*
16
+
* @since 1.0.0
17
+
*/
18
+
class Widget_Icon_Box extends Widget_Base {
19
+
20
+
/**
21
+
* Get widget name.
22
+
*
23
+
* Retrieve icon box widget name.
24
+
*
25
+
* @since 1.0.0
26
+
* @access public
27
+
*
28
+
* @return string Widget name.
29
+
*/
30
+
public function get_name() {
31
+
return 'icon-box';
32
+
}
33
+
34
+
/**
35
+
* Get widget title.
36
+
*
37
+
* Retrieve icon box widget title.
38
+
*
39
+
* @since 1.0.0
40
+
* @access public
41
+
*
42
+
* @return string Widget title.
43
+
*/
44
+
public function get_title() {
45
+
return esc_html__( 'Icon Box', 'elementor' );
46
+
}
47
+
48
+
/**
49
+
* Get widget icon.
50
+
*
51
+
* Retrieve icon box widget icon.
52
+
*
53
+
* @since 1.0.0
54
+
* @access public
55
+
*
56
+
* @return string Widget icon.
57
+
*/
58
+
public function get_icon() {
59
+
return 'eicon-icon-box';
60
+
}
61
+
62
+
/**
63
+
* Get widget keywords.
64
+
*
65
+
* Retrieve the list of keywords the widget belongs to.
66
+
*
67
+
* @since 2.1.0
68
+
* @access public
69
+
*
70
+
* @return array Widget keywords.
71
+
*/
72
+
public function get_keywords() {
73
+
return [ 'icon box', 'icon' ];
74
+
}
75
+
76
+
protected function is_dynamic_content(): bool {
77
+
return false;
78
+
}
79
+
80
+
public function has_widget_inner_wrapper(): bool {
81
+
return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
82
+
}
83
+
84
+
/**
85
+
* Get style dependencies.
86
+
*
87
+
* Retrieve the list of style dependencies the widget requires.
88
+
*
89
+
* @since 3.24.0
90
+
* @access public
91
+
*
92
+
* @return array Widget style dependencies.
93
+
*/
94
+
public function get_style_depends(): array {
95
+
return [ 'widget-icon-box' ];
96
+
}
97
+
98
+
/**
99
+
* Register icon box widget controls.
100
+
*
101
+
* Adds different input fields to allow the user to change and customize the widget settings.
102
+
*
103
+
* @since 3.1.0
104
+
* @access protected
105
+
*/
106
+
protected function register_controls() {
107
+
$this->start_controls_section(
108
+
'section_icon',
109
+
[
110
+
'label' => esc_html__( 'Icon Box', 'elementor' ),
111
+
]
112
+
);
113
+
114
+
$this->add_control(
115
+
'selected_icon',
116
+
[
117
+
'label' => esc_html__( 'Icon', 'elementor' ),
118
+
'type' => Controls_Manager::ICONS,
119
+
'fa4compatibility' => 'icon',
120
+
'default' => [
121
+
'value' => 'fas fa-star',
122
+
'library' => 'fa-solid',
123
+
],
124
+
]
125
+
);
126
+
127
+
$this->add_control(
128
+
'view',
129
+
[
130
+
'label' => esc_html__( 'View', 'elementor' ),
131
+
'type' => Controls_Manager::SELECT,
132
+
'options' => [
133
+
'default' => esc_html__( 'Default', 'elementor' ),
134
+
'stacked' => esc_html__( 'Stacked', 'elementor' ),
135
+
'framed' => esc_html__( 'Framed', 'elementor' ),
136
+
],
137
+
'default' => 'default',
138
+
'prefix_class' => 'elementor-view-',
139
+
'condition' => [
140
+
'selected_icon[value]!' => '',
141
+
],
142
+
]
143
+
);
144
+
145
+
$this->add_control(
146
+
'shape',
147
+
[
148
+
'label' => esc_html__( 'Shape', 'elementor' ),
149
+
'type' => Controls_Manager::SELECT,
150
+
'options' => [
151
+
'square' => esc_html__( 'Square', 'elementor' ),
152
+
'rounded' => esc_html__( 'Rounded', 'elementor' ),
153
+
'circle' => esc_html__( 'Circle', 'elementor' ),
154
+
],
155
+
'default' => 'circle',
156
+
'condition' => [
157
+
'view!' => 'default',
158
+
'selected_icon[value]!' => '',
159
+
],
160
+
'prefix_class' => 'elementor-shape-',
161
+
]
162
+
);
163
+
164
+
$this->add_control(
165
+
'title_text',
166
+
[
167
+
'label' => esc_html__( 'Title', 'elementor' ),
168
+
'type' => Controls_Manager::TEXT,
169
+
'dynamic' => [
170
+
'active' => true,
171
+
],
172
+
'default' => esc_html__( 'This is the heading', 'elementor' ),
173
+
'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
174
+
'label_block' => true,
175
+
]
176
+
);
177
+
178
+
$this->add_control(
179
+
'description_text',
180
+
[
181
+
'label' => esc_html__( 'Description', 'elementor' ),
182
+
'type' => Controls_Manager::TEXTAREA,
183
+
'dynamic' => [
184
+
'active' => true,
185
+
],
186
+
'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
187
+
'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
188
+
'rows' => 10,
189
+
]
190
+
);
191
+
192
+
$this->add_control(
193
+
'link',
194
+
[
195
+
'label' => esc_html__( 'Link', 'elementor' ),
196
+
'type' => Controls_Manager::URL,
197
+
'dynamic' => [
198
+
'active' => true,
199
+
],
200
+
'separator' => 'before',
201
+
]
202
+
);
203
+
204
+
$this->add_control(
205
+
'title_size',
206
+
[
207
+
'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
208
+
'type' => Controls_Manager::SELECT,
209
+
'options' => [
210
+
'h1' => 'H1',
211
+
'h2' => 'H2',
212
+
'h3' => 'H3',
213
+
'h4' => 'H4',
214
+
'h5' => 'H5',
215
+
'h6' => 'H6',
216
+
'div' => 'div',
217
+
'span' => 'span',
218
+
'p' => 'p',
219
+
],
220
+
'default' => 'h3',
221
+
]
222
+
);
223
+
224
+
$this->end_controls_section();
225
+
226
+
$this->start_controls_section(
227
+
'section_style_box',
228
+
[
229
+
'label' => esc_html__( 'Box', 'elementor' ),
230
+
'tab' => Controls_Manager::TAB_STYLE,
231
+
]
232
+
);
233
+
234
+
$this->add_responsive_control(
235
+
'position',
236
+
[
237
+
'label' => esc_html__( 'Icon Position', 'elementor' ),
238
+
'type' => Controls_Manager::CHOOSE,
239
+
'default' => 'block-start',
240
+
'mobile_default' => 'block-start',
241
+
'options' => [
242
+
'inline-start' => [
243
+
'title' => esc_html__( 'Start', 'elementor' ),
244
+
'icon' => 'eicon-h-align-left',
245
+
],
246
+
'inline-end' => [
247
+
'title' => esc_html__( 'End', 'elementor' ),
248
+
'icon' => 'eicon-h-align-right',
249
+
],
250
+
'block-start' => [
251
+
'title' => esc_html__( 'Top', 'elementor' ),
252
+
'icon' => 'eicon-v-align-top',
253
+
],
254
+
'block-end' => [
255
+
'title' => esc_html__( 'Bottom', 'elementor' ),
256
+
'icon' => 'eicon-v-align-bottom',
257
+
],
258
+
],
259
+
'classes' => 'elementor-control-start-end',
260
+
'classes_dictionary' => [
261
+
'left' => is_rtl() ? 'inline-end' : 'inline-start',
262
+
'right' => is_rtl() ? 'inline-start' : 'inline-end',
263
+
'top' => 'block-start',
264
+
'bottom' => 'block-end',
265
+
],
266
+
'prefix_class' => 'elementor%s-position-',
267
+
'condition' => [
268
+
'selected_icon[value]!' => '',
269
+
],
270
+
]
271
+
);
272
+
273
+
$this->add_responsive_control(
274
+
'content_vertical_alignment',
275
+
[
276
+
'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
277
+
'type' => Controls_Manager::CHOOSE,
278
+
'options' => [
279
+
'top' => [
280
+
'title' => esc_html__( 'Top', 'elementor' ),
281
+
'icon' => 'eicon-v-align-top',
282
+
],
283
+
'middle' => [
284
+
'title' => esc_html__( 'Middle', 'elementor' ),
285
+
'icon' => 'eicon-v-align-middle',
286
+
],
287
+
'bottom' => [
288
+
'title' => esc_html__( 'Bottom', 'elementor' ),
289
+
'icon' => 'eicon-v-align-bottom',
290
+
],
291
+
],
292
+
'default' => 'top',
293
+
'selectors_dictionary' => [
294
+
'top' => 'start',
295
+
'middle' => 'center',
296
+
'bottom' => 'end',
297
+
],
298
+
'selectors' => [
299
+
'{{WRAPPER}} .elementor-icon-box-wrapper' => 'align-items: {{VALUE}};',
300
+
],
301
+
'condition' => [
302
+
'selected_icon[value]!' => '',
303
+
'position' => [ 'left', 'right', 'inline-start', 'inline-end' ],
304
+
],
305
+
]
306
+
);
307
+
308
+
$this->add_responsive_control(
309
+
'text_align',
310
+
[
311
+
'label' => esc_html__( 'Alignment', 'elementor' ),
312
+
'type' => Controls_Manager::CHOOSE,
313
+
'options' => [
314
+
'start' => [
315
+
'title' => esc_html__( 'Start', 'elementor' ),
316
+
'icon' => 'eicon-text-align-left',
317
+
],
318
+
'center' => [
319
+
'title' => esc_html__( 'Center', 'elementor' ),
320
+
'icon' => 'eicon-text-align-center',
321
+
],
322
+
'end' => [
323
+
'title' => esc_html__( 'End', 'elementor' ),
324
+
'icon' => 'eicon-text-align-right',
325
+
],
326
+
'justify' => [
327
+
'title' => esc_html__( 'Justified', 'elementor' ),
328
+
'icon' => 'eicon-text-align-justify',
329
+
],
330
+
],
331
+
'classes' => 'elementor-control-start-end',
332
+
'selectors_dictionary' => [
333
+
'left' => is_rtl() ? 'end' : 'start',
334
+
'right' => is_rtl() ? 'start' : 'end',
335
+
],
336
+
'selectors' => [
337
+
'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
338
+
],
339
+
'separator' => 'after',
340
+
]
341
+
);
342
+
343
+
$this->add_responsive_control(
344
+
'icon_space',
345
+
[
346
+
'label' => esc_html__( 'Icon Spacing', 'elementor' ),
347
+
'type' => Controls_Manager::SLIDER,
348
+
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
349
+
'default' => [
350
+
'size' => 15,
351
+
],
352
+
'range' => [
353
+
'px' => [
354
+
'max' => 100,
355
+
],
356
+
'em' => [
357
+
'max' => 10,
358
+
],
359
+
'rem' => [
360
+
'max' => 10,
361
+
],
362
+
],
363
+
'selectors' => [
364
+
'{{WRAPPER}} .elementor-icon-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
365
+
],
366
+
'condition' => [
367
+
'selected_icon[value]!' => '',
368
+
],
369
+
]
370
+
);
371
+
372
+
$this->add_responsive_control(
373
+
'title_bottom_space',
374
+
[
375
+
'label' => esc_html__( 'Content Spacing', 'elementor' ),
376
+
'type' => Controls_Manager::SLIDER,
377
+
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
378
+
'range' => [
379
+
'px' => [
380
+
'max' => 100,
381
+
],
382
+
'em' => [
383
+
'min' => 0,
384
+
'max' => 10,
385
+
],
386
+
'rem' => [
387
+
'min' => 0,
388
+
'max' => 10,
389
+
],
390
+
],
391
+
'selectors' => [
392
+
'{{WRAPPER}} .elementor-icon-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};',
393
+
],
394
+
]
395
+
);
396
+
397
+
$this->end_controls_section();
398
+
399
+
$this->start_controls_section(
400
+
'section_style_icon',
401
+
[
402
+
'label' => esc_html__( 'Icon', 'elementor' ),
403
+
'tab' => Controls_Manager::TAB_STYLE,
404
+
'condition' => [
405
+
'selected_icon[value]!' => '',
406
+
],
407
+
]
408
+
);
409
+
410
+
$this->start_controls_tabs( 'icon_colors' );
411
+
412
+
$this->start_controls_tab(
413
+
'icon_colors_normal',
414
+
[
415
+
'label' => esc_html__( 'Normal', 'elementor' ),
416
+
]
417
+
);
418
+
419
+
$this->add_control(
420
+
'primary_color',
421
+
[
422
+
'label' => esc_html__( 'Primary Color', 'elementor' ),
423
+
'type' => Controls_Manager::COLOR,
424
+
'global' => [
425
+
'default' => Global_Colors::COLOR_PRIMARY,
426
+
],
427
+
'default' => '',
428
+
'selectors' => [
429
+
'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
430
+
'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
431
+
],
432
+
]
433
+
);
434
+
435
+
$this->add_control(
436
+
'secondary_color',
437
+
[
438
+
'label' => esc_html__( 'Secondary Color', 'elementor' ),
439
+
'type' => Controls_Manager::COLOR,
440
+
'default' => '',
441
+
'condition' => [
442
+
'view!' => 'default',
443
+
],
444
+
'selectors' => [
445
+
'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
446
+
'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
447
+
],
448
+
]
449
+
);
450
+
451
+
$this->end_controls_tab();
452
+
453
+
$this->start_controls_tab(
454
+
'icon_colors_hover',
455
+
[
456
+
'label' => esc_html__( 'Hover', 'elementor' ),
457
+
]
458
+
);
459
+
460
+
$this->add_control(
461
+
'hover_primary_color',
462
+
[
463
+
'label' => esc_html__( 'Primary Color', 'elementor' ),
464
+
'type' => Controls_Manager::COLOR,
465
+
'default' => '',
466
+
'selectors' => [
467
+
'{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
468
+
{{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
469
+
'{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
470
+
{{WRAPPER}}.elementor-view-default:has(:hover) .elementor-icon,
471
+
{{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon,
472
+
{{WRAPPER}}.elementor-view-default:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
473
+
],
474
+
]
475
+
);
476
+
477
+
$this->add_control(
478
+
'hover_secondary_color',
479
+
[
480
+
'label' => esc_html__( 'Secondary Color', 'elementor' ),
481
+
'type' => Controls_Manager::COLOR,
482
+
'default' => '',
483
+
'condition' => [
484
+
'view!' => 'default',
485
+
],
486
+
'selectors' => [
487
+
'{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-icon,
488
+
{{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-icon' => 'background-color: {{VALUE}};',
489
+
'{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-icon,
490
+
{{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
491
+
],
492
+
]
493
+
);
494
+
495
+
$this->add_control(
496
+
'hover_icon_colors_transition_duration',
497
+
[
498
+
'label' => esc_html__( 'Transition Duration', 'elementor' ),
499
+
'type' => Controls_Manager::SLIDER,
500
+
'size_units' => [ 's', 'ms', 'custom' ],
501
+
'default' => [
502
+
'unit' => 's',
503
+
],
504
+
'selectors' => [
505
+
'{{WRAPPER}} .elementor-icon' => 'transition-duration: {{SIZE}}{{UNIT}};',
506
+
],
507
+
]
508
+
);
509
+
510
+
$this->add_control(
511
+
'hover_animation',
512
+
[
513
+
'label' => esc_html__( 'Hover Animation', 'elementor' ),
514
+
'type' => Controls_Manager::HOVER_ANIMATION,
515
+
]
516
+
);
517
+
518
+
$this->end_controls_tab();
519
+
520
+
$this->end_controls_tabs();
521
+
522
+
$this->add_responsive_control(
523
+
'icon_size',
524
+
[
525
+
'label' => esc_html__( 'Size', 'elementor' ),
526
+
'type' => Controls_Manager::SLIDER,
527
+
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
528
+
'range' => [
529
+
'px' => [
530
+
'min' => 6,
531
+
'max' => 300,
532
+
],
533
+
],
534
+
'selectors' => [
535
+
'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
536
+
],
537
+
]
538
+
);
539
+
540
+
$this->add_responsive_control(
541
+
'icon_padding',
542
+
[
543
+
'label' => esc_html__( 'Padding', 'elementor' ),
544
+
'type' => Controls_Manager::SLIDER,
545
+
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
546
+
'selectors' => [
547
+
'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
548
+
],
549
+
'range' => [
550
+
'px' => [
551
+
'max' => 50,
552
+
],
553
+
'em' => [
554
+
'min' => 0,
555
+
'max' => 5,
556
+
],
557
+
'rem' => [
558
+
'min' => 0,
559
+
'max' => 5,
560
+
],
561
+
],
562
+
'condition' => [
563
+
'view!' => 'default',
564
+
],
565
+
]
566
+
);
567
+
568
+
$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
569
+
570
+
$rotate_device_args = [];
571
+
572
+
$rotate_device_settings = [
573
+
'default' => [
574
+
'unit' => 'deg',
575
+
],
576
+
];
577
+
578
+
foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
579
+
$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
580
+
}
581
+
582
+
$this->add_responsive_control(
583
+
'rotate',
584
+
[
585
+
'label' => esc_html__( 'Rotate', 'elementor' ),
586
+
'type' => Controls_Manager::SLIDER,
587
+
'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
588
+
'default' => [
589
+
'unit' => 'deg',
590
+
],
591
+
'tablet_default' => [
592
+
'unit' => 'deg',
593
+
],
594
+
'mobile_default' => [
595
+
'unit' => 'deg',
596
+
],
597
+
'device_args' => $rotate_device_args,
598
+
'selectors' => [
599
+
'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
600
+
],
601
+
]
602
+
);
603
+
604
+
$this->add_responsive_control(
605
+
'border_width',
606
+
[
607
+
'label' => esc_html__( 'Border Width', 'elementor' ),
608
+
'type' => Controls_Manager::DIMENSIONS,
609
+
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
610
+
'selectors' => [
611
+
'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612
+
],
613
+
'condition' => [
614
+
'view' => 'framed',
615
+
],
616
+
]
617
+
);
618
+
619
+
$this->add_responsive_control(
620
+
'border_radius',
621
+
[
622
+
'label' => esc_html__( 'Border Radius', 'elementor' ),
623
+
'type' => Controls_Manager::DIMENSIONS,
624
+
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
625
+
'selectors' => [
626
+
'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
627
+
],
628
+
'condition' => [
629
+
'view!' => 'default',
630
+
],
631
+
'separator' => 'before',
632
+
]
633
+
);
634
+
635
+
$this->end_controls_section();
636
+
637
+
$this->start_controls_section(
638
+
'section_style_content',
639
+
[
640
+
'label' => esc_html__( 'Content', 'elementor' ),
641
+
'tab' => Controls_Manager::TAB_STYLE,
642
+
]
643
+
);
644
+
645
+
$this->add_control(
646
+
'heading_title',
647
+
[
648
+
'label' => esc_html__( 'Title', 'elementor' ),
649
+
'type' => Controls_Manager::HEADING,
650
+
'separator' => 'before',
651
+
]
652
+
);
653
+
654
+
$this->add_group_control(
655
+
Group_Control_Typography::get_type(),
656
+
[
657
+
'name' => 'title_typography',
658
+
'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
659
+
'global' => [
660
+
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
661
+
],
662
+
]
663
+
);
664
+
665
+
$this->add_group_control(
666
+
Group_Control_Text_Stroke::get_type(),
667
+
[
668
+
'name' => 'text_stroke',
669
+
'selector' => '{{WRAPPER}} .elementor-icon-box-title',
670
+
]
671
+
);
672
+
673
+
$this->add_group_control(
674
+
Group_Control_Text_Shadow::get_type(),
675
+
[
676
+
'name' => 'title_shadow',
677
+
'selector' => '{{WRAPPER}} .elementor-icon-box-title',
678
+
]
679
+
);
680
+
681
+
$this->start_controls_tabs( 'icon_box_title_colors' );
682
+
683
+
$this->start_controls_tab(
684
+
'icon_box_title_colors_normal',
685
+
[
686
+
'label' => esc_html__( 'Normal', 'elementor' ),
687
+
]
688
+
);
689
+
690
+
$this->add_control(
691
+
'title_color',
692
+
[
693
+
'label' => esc_html__( 'Color', 'elementor' ),
694
+
'type' => Controls_Manager::COLOR,
695
+
'default' => '',
696
+
'selectors' => [
697
+
'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
698
+
],
699
+
'global' => [
700
+
'default' => Global_Colors::COLOR_PRIMARY,
701
+
],
702
+
]
703
+
);
704
+
705
+
$this->end_controls_tab();
706
+
707
+
$this->start_controls_tab(
708
+
'icon_box_title_colors_hover',
709
+
[
710
+
'label' => esc_html__( 'Hover', 'elementor' ),
711
+
]
712
+
);
713
+
714
+
$this->add_control(
715
+
'hover_title_color',
716
+
[
717
+
'label' => esc_html__( 'Color', 'elementor' ),
718
+
'type' => Controls_Manager::COLOR,
719
+
'default' => '',
720
+
'selectors' => [
721
+
'{{WRAPPER}}:has(:hover) .elementor-icon-box-title,
722
+
{{WRAPPER}}:has(:focus) .elementor-icon-box-title' => 'color: {{VALUE}};',
723
+
],
724
+
'global' => [
725
+
'default' => Global_Colors::COLOR_PRIMARY,
726
+
],
727
+
]
728
+
);
729
+
730
+
$this->add_control(
731
+
'hover_title_color_transition_duration',
732
+
[
733
+
'label' => esc_html__( 'Transition Duration', 'elementor' ),
734
+
'type' => Controls_Manager::SLIDER,
735
+
'size_units' => [ 's', 'ms', 'custom' ],
736
+
'default' => [
737
+
'unit' => 's',
738
+
],
739
+
'selectors' => [
740
+
'{{WRAPPER}} .elementor-icon-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};',
741
+
],
742
+
]
743
+
);
744
+
745
+
$this->end_controls_tab();
746
+
747
+
$this->end_controls_tabs();
748
+
749
+
$this->add_control(
750
+
'heading_description',
751
+
[
752
+
'label' => esc_html__( 'Description', 'elementor' ),
753
+
'type' => Controls_Manager::HEADING,
754
+
'separator' => 'before',
755
+
]
756
+
);
757
+
758
+
$this->add_group_control(
759
+
Group_Control_Typography::get_type(),
760
+
[
761
+
'name' => 'description_typography',
762
+
'selector' => '{{WRAPPER}} .elementor-icon-box-description',
763
+
'global' => [
764
+
'default' => Global_Typography::TYPOGRAPHY_TEXT,
765
+
],
766
+
]
767
+
);
768
+
769
+
$this->add_group_control(
770
+
Group_Control_Text_Shadow::get_type(),
771
+
[
772
+
'name' => 'description_shadow',
773
+
'selector' => '{{WRAPPER}} .elementor-icon-box-description',
774
+
]
775
+
);
776
+
777
+
$this->add_control(
778
+
'description_color',
779
+
[
780
+
'label' => esc_html__( 'Color', 'elementor' ),
781
+
'type' => Controls_Manager::COLOR,
782
+
'default' => '',
783
+
'selectors' => [
784
+
'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
785
+
],
786
+
'global' => [
787
+
'default' => Global_Colors::COLOR_TEXT,
788
+
],
789
+
]
790
+
);
791
+
792
+
$this->end_controls_section();
793
+
}
794
+
795
+
/**
796
+
* Render icon box widget output on the frontend.
797
+
*
798
+
* Written in PHP and used to generate the final HTML.
799
+
*
800
+
* @since 1.0.0
801
+
* @access protected
802
+
*/
803
+
protected function render() {
804
+
$settings = $this->get_settings_for_display();
805
+
$has_link = ! empty( $settings['link']['url'] );
806
+
$html_tag = $has_link ? 'a' : 'span';
807
+
808
+
$this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
809
+
810
+
if ( ! empty( $settings['hover_animation'] ) ) {
811
+
$this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
812
+
}
813
+
814
+
$has_icon = ! empty( $settings['selected_icon']['value'] );
815
+
$has_content = ! Utils::is_empty( $settings['title_text'] ) || ! Utils::is_empty( $settings['description_text'] );
816
+
817
+
if ( ! $has_icon && ! $has_content ) {
818
+
return;
819
+
}
820
+
821
+
if ( $has_link ) {
822
+
$this->add_link_attributes( 'link', $settings['link'] );
823
+
$this->add_render_attribute( 'icon', 'tabindex', '-1' );
824
+
if ( ! empty( $settings['title_text'] ) ) {
825
+
$this->add_render_attribute( 'icon', 'aria-label', $settings['title_text'] );
826
+
}
827
+
}
828
+
829
+
if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
830
+
// add old default
831
+
$settings['icon'] = 'fa fa-star';
832
+
}
833
+
834
+
if ( ! empty( $settings['icon'] ) ) {
835
+
$this->add_render_attribute( 'i', 'class', $settings['icon'] );
836
+
$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
837
+
}
838
+
839
+
$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
840
+
841
+
$this->add_inline_editing_attributes( 'title_text', 'none' );
842
+
$this->add_inline_editing_attributes( 'description_text' );
843
+
844
+
$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
845
+
$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
846
+
?>
847
+
<div class="elementor-icon-box-wrapper">
848
+
849
+
<?php if ( $has_icon ) : ?>
850
+
<div class="elementor-icon-box-icon">
851
+
<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
852
+
<?php
853
+
if ( $is_new || $migrated ) {
854
+
Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
855
+
} elseif ( ! empty( $settings['icon'] ) ) {
856
+
?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
857
+
}
858
+
?>
859
+
</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
860
+
</div>
861
+
<?php endif; ?>
862
+
863
+
<?php if ( $has_content ) : ?>
864
+
<div class="elementor-icon-box-content">
865
+
866
+
<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
867
+
<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
868
+
<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
869
+
<?php echo wp_kses_post( $settings['title_text'] ); ?>
870
+
</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
871
+
</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
872
+
<?php endif; ?>
873
+
874
+
<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
875
+
<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
876
+
<?php echo wp_kses_post( $settings['description_text'] ); ?>
877
+
</p>
878
+
<?php endif; ?>
879
+
880
+
</div>
881
+
<?php endif; ?>
882
+
883
+
</div>
884
+
<?php
885
+
}
886
+
887
+
/**
888
+
* Render icon box widget output in the editor.
889
+
*
890
+
* Written as a Backbone JavaScript template and used to generate the live preview.
891
+
*
892
+
* @since 2.9.0
893
+
* @access protected
894
+
*/
895
+
protected function content_template() {
896
+
?>
897
+
<#
898
+
// For older version `settings.icon` is needed.
899
+
var hasIcon = settings.icon || settings.selected_icon.value;
900
+
var hasContent = settings.title_text || settings.description_text;
901
+
902
+
if ( ! hasIcon && ! hasContent ) {
903
+
return;
904
+
}
905
+
906
+
var hasLink = settings.link?.url,
907
+
htmlTag = hasLink ? 'a' : 'span',
908
+
iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
909
+
migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
910
+
titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
911
+
912
+
view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
913
+
914
+
if ( '' !== settings.hover_animation ) {
915
+
view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
916
+
}
917
+
918
+
if ( hasLink ) {
919
+
view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) );
920
+
view.addRenderAttribute( 'icon', 'tabindex', '-1' );
921
+
if ( '' !== settings.title_text ) {
922
+
view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
923
+
}
924
+
}
925
+
926
+
view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
927
+
928
+
view.addInlineEditingAttributes( 'title_text', 'none' );
929
+
view.addInlineEditingAttributes( 'description_text' );
930
+
#>
931
+
<div class="elementor-icon-box-wrapper">
932
+
933
+
<# if ( hasIcon ) { #>
934
+
<div class="elementor-icon-box-icon">
935
+
<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
936
+
<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon || migrated ) ) { #>
937
+
{{{ elementor.helpers.sanitize( iconHTML.value ) }}}
938
+
<# } else { #>
939
+
<i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i>
940
+
<# } #>
941
+
</{{{ htmlTag }}}>
942
+
</div>
943
+
<# } #>
944
+
945
+
<# if ( hasContent ) { #>
946
+
<div class="elementor-icon-box-content">
947
+
948
+
<# if ( settings.title_text ) { #>
949
+
<{{{ titleSizeTag }}} class="elementor-icon-box-title">
950
+
<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
951
+
{{{ elementor.helpers.sanitize( settings.title_text ) }}}
952
+
</{{{ htmlTag }}}>
953
+
</{{{ titleSizeTag }}}>
954
+
<# } #>
955
+
956
+
<# if ( settings.description_text ) { #>
957
+
<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
958
+
<# } #>
959
+
960
+
</div>
961
+
<# } #>
962
+
963
+
</div>
964
+
<?php
965
+
}
966
+
967
+
public function on_import( $element ) {
968
+
return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
969
+
}
970
+
}
971
+