elementor / includes / widgets / icon-box.php

icon-box.php in Elementor Website Builder – more than just a page builder 3.27.3, at includes/widgets/icon-box.php

874 lines 22.0 KB

Raw Download Zip

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' => 'top',
240	'mobile_default' => 'top',
241	'options' => [
242	'left' => [
243	'title' => esc_html__( 'Left', 'elementor' ),
244	'icon' => 'eicon-h-align-left',
245	],
246	'top' => [
247	'title' => esc_html__( 'Top', 'elementor' ),
248	'icon' => 'eicon-v-align-top',
249	],
250	'right' => [
251	'title' => esc_html__( 'Right', 'elementor' ),
252	'icon' => 'eicon-h-align-right',
253	],
254	],
255	'prefix_class' => 'elementor%s-position-',
256	'condition' => [
257	'selected_icon[value]!' => '',
258	],
259	]
260	);
261
262	$this->add_responsive_control(
263	'content_vertical_alignment',
264	[
265	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
266	'type' => Controls_Manager::CHOOSE,
267	'options' => [
268	'top' => [
269	'title' => esc_html__( 'Top', 'elementor' ),
270	'icon' => 'eicon-v-align-top',
271	],
272	'middle' => [
273	'title' => esc_html__( 'Middle', 'elementor' ),
274	'icon' => 'eicon-v-align-middle',
275	],
276	'bottom' => [
277	'title' => esc_html__( 'Bottom', 'elementor' ),
278	'icon' => 'eicon-v-align-bottom',
279	],
280	],
281	'default' => 'top',
282	'toggle' => false,
283	'prefix_class' => 'elementor-vertical-align-',
284	'condition' => [
285	'position!' => 'top',
286	],
287	]
288	);
289
290	$this->add_responsive_control(
291	'text_align',
292	[
293	'label' => esc_html__( 'Alignment', 'elementor' ),
294	'type' => Controls_Manager::CHOOSE,
295	'options' => [
296	'left' => [
297	'title' => esc_html__( 'Left', 'elementor' ),
298	'icon' => 'eicon-text-align-left',
299	],
300	'center' => [
301	'title' => esc_html__( 'Center', 'elementor' ),
302	'icon' => 'eicon-text-align-center',
303	],
304	'right' => [
305	'title' => esc_html__( 'Right', 'elementor' ),
306	'icon' => 'eicon-text-align-right',
307	],
308	'justify' => [
309	'title' => esc_html__( 'Justified', 'elementor' ),
310	'icon' => 'eicon-text-align-justify',
311	],
312	],
313	'selectors' => [
314	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
315	],
316	'separator' => 'after',
317	]
318	);
319
320	$this->add_responsive_control(
321	'icon_space',
322	[
323	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
324	'type' => Controls_Manager::SLIDER,
325	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
326	'default' => [
327	'size' => 15,
328	],
329	'range' => [
330	'px' => [
331	'max' => 100,
332	],
333	'em' => [
334	'max' => 10,
335	],
336	'rem' => [
337	'max' => 10,
338	],
339	],
340	'selectors' => [
341	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
342	],
343	'condition' => [
344	'selected_icon[value]!' => '',
345	],
346	]
347	);
348
349	$this->add_responsive_control(
350	'title_bottom_space',
351	[
352	'label' => esc_html__( 'Content Spacing', 'elementor' ),
353	'type' => Controls_Manager::SLIDER,
354	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
355	'range' => [
356	'px' => [
357	'max' => 100,
358	],
359	'em' => [
360	'min' => 0,
361	'max' => 10,
362	],
363	'rem' => [
364	'min' => 0,
365	'max' => 10,
366	],
367	],
368	'selectors' => [
369	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
370	],
371	]
372	);
373
374	$this->end_controls_section();
375
376	$this->start_controls_section(
377	'section_style_icon',
378	[
379	'label' => esc_html__( 'Icon', 'elementor' ),
380	'tab' => Controls_Manager::TAB_STYLE,
381	'condition' => [
382	'selected_icon[value]!' => '',
383	],
384	]
385	);
386
387	$this->start_controls_tabs( 'icon_colors' );
388
389	$this->start_controls_tab(
390	'icon_colors_normal',
391	[
392	'label' => esc_html__( 'Normal', 'elementor' ),
393	]
394	);
395
396	$this->add_control(
397	'primary_color',
398	[
399	'label' => esc_html__( 'Primary Color', 'elementor' ),
400	'type' => Controls_Manager::COLOR,
401	'global' => [
402	'default' => Global_Colors::COLOR_PRIMARY,
403	],
404	'default' => '',
405	'selectors' => [
406	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
407	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
408	],
409	]
410	);
411
412	$this->add_control(
413	'secondary_color',
414	[
415	'label' => esc_html__( 'Secondary Color', 'elementor' ),
416	'type' => Controls_Manager::COLOR,
417	'default' => '',
418	'condition' => [
419	'view!' => 'default',
420	],
421	'selectors' => [
422	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
423	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
424	],
425	]
426	);
427
428	$this->end_controls_tab();
429
430	$this->start_controls_tab(
431	'icon_colors_hover',
432	[
433	'label' => esc_html__( 'Hover', 'elementor' ),
434	]
435	);
436
437	$this->add_control(
438	'hover_primary_color',
439	[
440	'label' => esc_html__( 'Primary Color', 'elementor' ),
441	'type' => Controls_Manager::COLOR,
442	'default' => '',
443	'selectors' => [
444	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
445	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
446	],
447	]
448	);
449
450	$this->add_control(
451	'hover_secondary_color',
452	[
453	'label' => esc_html__( 'Secondary Color', 'elementor' ),
454	'type' => Controls_Manager::COLOR,
455	'default' => '',
456	'condition' => [
457	'view!' => 'default',
458	],
459	'selectors' => [
460	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
461	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
462	],
463	]
464	);
465
466	$this->add_control(
467	'hover_animation',
468	[
469	'label' => esc_html__( 'Hover Animation', 'elementor' ),
470	'type' => Controls_Manager::HOVER_ANIMATION,
471	]
472	);
473
474	$this->end_controls_tab();
475
476	$this->end_controls_tabs();
477
478	$this->add_responsive_control(
479	'icon_size',
480	[
481	'label' => esc_html__( 'Size', 'elementor' ),
482	'type' => Controls_Manager::SLIDER,
483	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
484	'range' => [
485	'px' => [
486	'min' => 6,
487	'max' => 300,
488	],
489	],
490	'selectors' => [
491	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
492	],
493	]
494	);
495
496	$this->add_responsive_control(
497	'icon_padding',
498	[
499	'label' => esc_html__( 'Padding', 'elementor' ),
500	'type' => Controls_Manager::SLIDER,
501	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
502	'selectors' => [
503	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
504	],
505	'range' => [
506	'px' => [
507	'max' => 50,
508	],
509	'em' => [
510	'min' => 0,
511	'max' => 5,
512	],
513	'rem' => [
514	'min' => 0,
515	'max' => 5,
516	],
517	],
518	'condition' => [
519	'view!' => 'default',
520	],
521	]
522	);
523
524	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
525
526	$rotate_device_args = [];
527
528	$rotate_device_settings = [
529	'default' => [
530	'unit' => 'deg',
531	],
532	];
533
534	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
535	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
536	}
537
538	$this->add_responsive_control(
539	'rotate',
540	[
541	'label' => esc_html__( 'Rotate', 'elementor' ),
542	'type' => Controls_Manager::SLIDER,
543	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
544	'default' => [
545	'unit' => 'deg',
546	],
547	'tablet_default' => [
548	'unit' => 'deg',
549	],
550	'mobile_default' => [
551	'unit' => 'deg',
552	],
553	'device_args' => $rotate_device_args,
554	'selectors' => [
555	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
556	],
557	]
558	);
559
560	$this->add_responsive_control(
561	'border_width',
562	[
563	'label' => esc_html__( 'Border Width', 'elementor' ),
564	'type' => Controls_Manager::DIMENSIONS,
565	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
566	'selectors' => [
567	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
568	],
569	'condition' => [
570	'view' => 'framed',
571	],
572	]
573	);
574
575	$this->add_responsive_control(
576	'border_radius',
577	[
578	'label' => esc_html__( 'Border Radius', 'elementor' ),
579	'type' => Controls_Manager::DIMENSIONS,
580	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
581	'selectors' => [
582	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
583	],
584	'condition' => [
585	'view!' => 'default',
586	],
587	'separator' => 'before',
588	]
589	);
590
591	$this->end_controls_section();
592
593	$this->start_controls_section(
594	'section_style_content',
595	[
596	'label' => esc_html__( 'Content', 'elementor' ),
597	'tab' => Controls_Manager::TAB_STYLE,
598	]
599	);
600
601	$this->add_control(
602	'heading_title',
603	[
604	'label' => esc_html__( 'Title', 'elementor' ),
605	'type' => Controls_Manager::HEADING,
606	'separator' => 'before',
607	]
608	);
609
610	$this->add_control(
611	'title_color',
612	[
613	'label' => esc_html__( 'Color', 'elementor' ),
614	'type' => Controls_Manager::COLOR,
615	'default' => '',
616	'selectors' => [
617	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
618	],
619	'global' => [
620	'default' => Global_Colors::COLOR_PRIMARY,
621	],
622	]
623	);
624
625	$this->add_group_control(
626	Group_Control_Typography::get_type(),
627	[
628	'name' => 'title_typography',
629	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
630	'global' => [
631	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
632	],
633	]
634	);
635
636	$this->add_group_control(
637	Group_Control_Text_Stroke::get_type(),
638	[
639	'name' => 'text_stroke',
640	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
641	]
642	);
643
644	$this->add_group_control(
645	Group_Control_Text_Shadow::get_type(),
646	[
647	'name' => 'title_shadow',
648	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
649	]
650	);
651
652	$this->add_control(
653	'heading_description',
654	[
655	'label' => esc_html__( 'Description', 'elementor' ),
656	'type' => Controls_Manager::HEADING,
657	'separator' => 'before',
658	]
659	);
660
661	$this->add_control(
662	'description_color',
663	[
664	'label' => esc_html__( 'Color', 'elementor' ),
665	'type' => Controls_Manager::COLOR,
666	'default' => '',
667	'selectors' => [
668	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
669	],
670	'global' => [
671	'default' => Global_Colors::COLOR_TEXT,
672	],
673	]
674	);
675
676	$this->add_group_control(
677	Group_Control_Typography::get_type(),
678	[
679	'name' => 'description_typography',
680	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
681	'global' => [
682	'default' => Global_Typography::TYPOGRAPHY_TEXT,
683	],
684	]
685	);
686
687	$this->add_group_control(
688	Group_Control_Text_Shadow::get_type(),
689	[
690	'name' => 'description_shadow',
691	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
692	]
693	);
694
695	$this->end_controls_section();
696	}
697
698	/**
699	* Render icon box widget output on the frontend.
700	*
701	* Written in PHP and used to generate the final HTML.
702	*
703	* @since 1.0.0
704	* @access protected
705	*/
706	protected function render() {
707	$settings = $this->get_settings_for_display();
708	$has_link = ! empty( $settings['link']['url'] );
709	$html_tag = $has_link ? 'a' : 'span';
710
711	$this->add_render_attribute( 'icon', 'class', 'elementor-icon' );
712
713	if ( ! empty( $settings['hover_animation'] ) ) {
714	$this->add_render_attribute( 'icon', 'class', 'elementor-animation-' . $settings['hover_animation'] );
715	}
716
717	$has_icon = ! empty( $settings['selected_icon']['value'] );
718	$has_content = ! Utils::is_empty( $settings['title_text'] ) \|\| ! Utils::is_empty( $settings['description_text'] );
719
720	if ( ! $has_icon && ! $has_content ) {
721	return;
722	}
723
724	if ( $has_link ) {
725	$this->add_link_attributes( 'link', $settings['link'] );
726	$this->add_render_attribute( 'icon', 'tabindex', '-1' );
727	if ( ! empty( $settings['title_text'] ) ) {
728	$this->add_render_attribute( 'icon', 'aria-label', $settings['title_text'] );
729	}
730	}
731
732	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
733	// add old default
734	$settings['icon'] = 'fa fa-star';
735	}
736
737	if ( ! empty( $settings['icon'] ) ) {
738	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
739	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
740	}
741
742	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
743
744	$this->add_inline_editing_attributes( 'title_text', 'none' );
745	$this->add_inline_editing_attributes( 'description_text' );
746
747	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
748	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
749	?>
750	<div class="elementor-icon-box-wrapper">
751
752	<?php if ( $has_icon ) : ?>
753	<div class="elementor-icon-box-icon">
754	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
755	<?php
756	if ( $is_new \|\| $migrated ) {
757	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
758	} elseif ( ! empty( $settings['icon'] ) ) {
759	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
760	}
761	?>
762	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
763	</div>
764	<?php endif; ?>
765
766	<?php if ( $has_content ) : ?>
767	<div class="elementor-icon-box-content">
768
769	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
770	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
771	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
772	<?php $this->print_unescaped_setting( 'title_text' ); ?>
773	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
774	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
775	<?php endif; ?>
776
777	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
778	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
779	<?php $this->print_unescaped_setting( 'description_text' ); ?>
780	</p>
781	<?php endif; ?>
782
783	</div>
784	<?php endif; ?>
785
786	</div>
787	<?php
788	}
789
790	/**
791	* Render icon box widget output in the editor.
792	*
793	* Written as a Backbone JavaScript template and used to generate the live preview.
794	*
795	* @since 2.9.0
796	* @access protected
797	*/
798	protected function content_template() {
799	?>
800	<#
801	// For older version `settings.icon` is needed.
802	var hasIcon = settings.icon \|\| settings.selected_icon.value;
803	var hasContent = settings.title_text \|\| settings.description_text;
804
805	if ( ! hasIcon && ! hasContent ) {
806	return;
807	}
808
809	var hasLink = settings.link.url,
810	htmlTag = hasLink ? 'a' : 'span',
811	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
812	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
813	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
814
815	view.addRenderAttribute( 'icon', 'class', 'elementor-icon' );
816
817	if ( '' !== settings.hover_animation ) {
818	view.addRenderAttribute( 'icon', 'class', 'elementor-animation-' + settings.hover_animation );
819	}
820
821	if ( hasLink ) {
822	view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link.url ) );
823	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
824	if ( '' !== settings.title_text ) {
825	view.addRenderAttribute( 'icon', 'aria-label', settings.title_text );
826	}
827	}
828
829	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
830
831	view.addInlineEditingAttributes( 'title_text', 'none' );
832	view.addInlineEditingAttributes( 'description_text' );
833	#>
834	<div class="elementor-icon-box-wrapper">
835
836	<# if ( hasIcon ) { #>
837	<div class="elementor-icon-box-icon">
838	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
839	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
840	{{{ elementor.helpers.sanitize( iconHTML.value ) }}}
841	<# } else { #>
842	<i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i>
843	<# } #>
844	</{{{ htmlTag }}}>
845	</div>
846	<# } #>
847
848	<# if ( hasContent ) { #>
849	<div class="elementor-icon-box-content">
850
851	<# if ( settings.title_text ) { #>
852	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
853	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
854	{{{ elementor.helpers.sanitize( settings.title_text ) }}}
855	</{{{ htmlTag }}}>
856	</{{{ titleSizeTag }}}>
857	<# } #>
858
859	<# if ( settings.description_text ) { #>
860	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
861	<# } #>
862
863	</div>
864	<# } #>
865
866	</div>
867	<?php
868	}
869
870	public function on_import( $element ) {
871	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
872	}
873	}
874