elementor / includes / widgets / icon-box.php

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

764 lines 19.1 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	/**
77	* Register icon box widget controls.
78	*
79	* Adds different input fields to allow the user to change and customize the widget settings.
80	*
81	* @since 3.1.0
82	* @access protected
83	*/
84	protected function register_controls() {
85	$this->start_controls_section(
86	'section_icon',
87	[
88	'label' => esc_html__( 'Icon Box', 'elementor' ),
89	]
90	);
91
92	$this->add_control(
93	'selected_icon',
94	[
95	'label' => esc_html__( 'Icon', 'elementor' ),
96	'type' => Controls_Manager::ICONS,
97	'fa4compatibility' => 'icon',
98	'default' => [
99	'value' => 'fas fa-star',
100	'library' => 'fa-solid',
101	],
102	]
103	);
104
105	$this->add_control(
106	'view',
107	[
108	'label' => esc_html__( 'View', 'elementor' ),
109	'type' => Controls_Manager::SELECT,
110	'options' => [
111	'default' => esc_html__( 'Default', 'elementor' ),
112	'stacked' => esc_html__( 'Stacked', 'elementor' ),
113	'framed' => esc_html__( 'Framed', 'elementor' ),
114	],
115	'default' => 'default',
116	'prefix_class' => 'elementor-view-',
117	]
118	);
119
120	$this->add_control(
121	'shape',
122	[
123	'label' => esc_html__( 'Shape', 'elementor' ),
124	'type' => Controls_Manager::SELECT,
125	'options' => [
126	'circle' => esc_html__( 'Circle', 'elementor' ),
127	'square' => esc_html__( 'Square', 'elementor' ),
128	],
129	'default' => 'circle',
130	'condition' => [
131	'view!' => 'default',
132	'selected_icon[value]!' => '',
133	],
134	'prefix_class' => 'elementor-shape-',
135	]
136	);
137
138	$this->add_control(
139	'title_text',
140	[
141	'label' => esc_html__( 'Title & Description', 'elementor' ),
142	'type' => Controls_Manager::TEXT,
143	'dynamic' => [
144	'active' => true,
145	],
146	'default' => esc_html__( 'This is the heading', 'elementor' ),
147	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
148	'label_block' => true,
149	]
150	);
151
152	$this->add_control(
153	'description_text',
154	[
155	'label' => '',
156	'type' => Controls_Manager::TEXTAREA,
157	'dynamic' => [
158	'active' => true,
159	],
160	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
161	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
162	'rows' => 10,
163	'separator' => 'none',
164	'show_label' => false,
165	]
166	);
167
168	$this->add_control(
169	'link',
170	[
171	'label' => esc_html__( 'Link', 'elementor' ),
172	'type' => Controls_Manager::URL,
173	'dynamic' => [
174	'active' => true,
175	],
176	'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
177	'separator' => 'before',
178	]
179	);
180
181	$this->add_responsive_control(
182	'position',
183	[
184	'label' => esc_html__( 'Icon Position', 'elementor' ),
185	'type' => Controls_Manager::CHOOSE,
186	'mobile_default' => 'top',
187	'options' => [
188	'left' => [
189	'title' => esc_html__( 'Left', 'elementor' ),
190	'icon' => 'eicon-h-align-left',
191	],
192	'top' => [
193	'title' => esc_html__( 'Top', 'elementor' ),
194	'icon' => 'eicon-v-align-top',
195	],
196	'right' => [
197	'title' => esc_html__( 'Right', 'elementor' ),
198	'icon' => 'eicon-h-align-right',
199	],
200	],
201	'prefix_class' => 'elementor%s-position-',
202	'conditions' => [
203	'relation' => 'or',
204	'terms' => [
205	[
206	'name' => 'selected_icon[value]',
207	'operator' => '!=',
208	'value' => '',
209	],
210	],
211	],
212	]
213	);
214
215	$this->add_control(
216	'title_size',
217	[
218	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
219	'type' => Controls_Manager::SELECT,
220	'options' => [
221	'h1' => 'H1',
222	'h2' => 'H2',
223	'h3' => 'H3',
224	'h4' => 'H4',
225	'h5' => 'H5',
226	'h6' => 'H6',
227	'div' => 'div',
228	'span' => 'span',
229	'p' => 'p',
230	],
231	'default' => 'h3',
232	]
233	);
234
235	$this->end_controls_section();
236
237	$this->start_controls_section(
238	'section_style_icon',
239	[
240	'label' => esc_html__( 'Icon', 'elementor' ),
241	'tab' => Controls_Manager::TAB_STYLE,
242	'conditions' => [
243	'relation' => 'or',
244	'terms' => [
245	[
246	'name' => 'selected_icon[value]',
247	'operator' => '!=',
248	'value' => '',
249	],
250	],
251	],
252	]
253	);
254
255	$this->start_controls_tabs( 'icon_colors' );
256
257	$this->start_controls_tab(
258	'icon_colors_normal',
259	[
260	'label' => esc_html__( 'Normal', 'elementor' ),
261	]
262	);
263
264	$this->add_control(
265	'primary_color',
266	[
267	'label' => esc_html__( 'Primary Color', 'elementor' ),
268	'type' => Controls_Manager::COLOR,
269	'global' => [
270	'default' => Global_Colors::COLOR_PRIMARY,
271	],
272	'default' => '',
273	'selectors' => [
274	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
275	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
276	],
277	]
278	);
279
280	$this->add_control(
281	'secondary_color',
282	[
283	'label' => esc_html__( 'Secondary Color', 'elementor' ),
284	'type' => Controls_Manager::COLOR,
285	'default' => '',
286	'condition' => [
287	'view!' => 'default',
288	],
289	'selectors' => [
290	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
291	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
292	],
293	]
294	);
295
296	$this->end_controls_tab();
297
298	$this->start_controls_tab(
299	'icon_colors_hover',
300	[
301	'label' => esc_html__( 'Hover', 'elementor' ),
302	]
303	);
304
305	$this->add_control(
306	'hover_primary_color',
307	[
308	'label' => esc_html__( 'Primary Color', 'elementor' ),
309	'type' => Controls_Manager::COLOR,
310	'default' => '',
311	'selectors' => [
312	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
313	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
314	],
315	]
316	);
317
318	$this->add_control(
319	'hover_secondary_color',
320	[
321	'label' => esc_html__( 'Secondary Color', 'elementor' ),
322	'type' => Controls_Manager::COLOR,
323	'default' => '',
324	'condition' => [
325	'view!' => 'default',
326	],
327	'selectors' => [
328	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
329	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
330	],
331	]
332	);
333
334	$this->add_control(
335	'hover_animation',
336	[
337	'label' => esc_html__( 'Hover Animation', 'elementor' ),
338	'type' => Controls_Manager::HOVER_ANIMATION,
339	]
340	);
341
342	$this->end_controls_tab();
343
344	$this->end_controls_tabs();
345
346	$this->add_responsive_control(
347	'icon_space',
348	[
349	'label' => esc_html__( 'Spacing', 'elementor' ),
350	'type' => Controls_Manager::SLIDER,
351	'default' => [
352	'size' => 15,
353	],
354	'range' => [
355	'px' => [
356	'min' => 0,
357	'max' => 100,
358	],
359	],
360	'selectors' => [
361	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
362	],
363	]
364	);
365
366	$this->add_responsive_control(
367	'icon_size',
368	[
369	'label' => esc_html__( 'Size', 'elementor' ),
370	'type' => Controls_Manager::SLIDER,
371	'range' => [
372	'px' => [
373	'min' => 6,
374	'max' => 300,
375	],
376	],
377	'selectors' => [
378	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
379	],
380	]
381	);
382
383	$this->add_responsive_control(
384	'icon_padding',
385	[
386	'label' => esc_html__( 'Padding', 'elementor' ),
387	'type' => Controls_Manager::SLIDER,
388	'selectors' => [
389	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
390	],
391	'range' => [
392	'em' => [
393	'min' => 0,
394	'max' => 5,
395	],
396	],
397	'condition' => [
398	'view!' => 'default',
399	],
400	]
401	);
402
403	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
404
405	$rotate_device_args = [];
406
407	$rotate_device_settings = [
408	'default' => [
409	'unit' => 'deg',
410	'size' => '',
411	],
412	];
413
414	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
415	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
416	}
417
418	$this->add_responsive_control(
419	'rotate',
420	[
421	'label' => esc_html__( 'Rotate', 'elementor' ),
422	'type' => Controls_Manager::SLIDER,
423	'size_units' => [ 'deg' ],
424	'range' => [
425	'deg' => [
426	'min' => 0,
427	'max' => 360,
428	'step' => 1,
429	],
430	],
431	'default' => [
432	'unit' => 'deg',
433	'size' => '',
434	],
435	'device_args' => $rotate_device_args,
436	'selectors' => [
437	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
438	],
439	]
440	);
441
442	$this->add_responsive_control(
443	'border_width',
444	[
445	'label' => esc_html__( 'Border Width', 'elementor' ),
446	'type' => Controls_Manager::DIMENSIONS,
447	'selectors' => [
448	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
449	],
450	'condition' => [
451	'view' => 'framed',
452	],
453	]
454	);
455
456	$this->add_responsive_control(
457	'border_radius',
458	[
459	'label' => esc_html__( 'Border Radius', 'elementor' ),
460	'type' => Controls_Manager::DIMENSIONS,
461	'size_units' => [ 'px', '%' ],
462	'selectors' => [
463	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
464	],
465	'condition' => [
466	'view!' => 'default',
467	],
468	]
469	);
470
471	$this->end_controls_section();
472
473	$this->start_controls_section(
474	'section_style_content',
475	[
476	'label' => esc_html__( 'Content', 'elementor' ),
477	'tab' => Controls_Manager::TAB_STYLE,
478	]
479	);
480
481	$this->add_responsive_control(
482	'text_align',
483	[
484	'label' => esc_html__( 'Alignment', 'elementor' ),
485	'type' => Controls_Manager::CHOOSE,
486	'options' => [
487	'left' => [
488	'title' => esc_html__( 'Left', 'elementor' ),
489	'icon' => 'eicon-text-align-left',
490	],
491	'center' => [
492	'title' => esc_html__( 'Center', 'elementor' ),
493	'icon' => 'eicon-text-align-center',
494	],
495	'right' => [
496	'title' => esc_html__( 'Right', 'elementor' ),
497	'icon' => 'eicon-text-align-right',
498	],
499	'justify' => [
500	'title' => esc_html__( 'Justified', 'elementor' ),
501	'icon' => 'eicon-text-align-justify',
502	],
503	],
504	'selectors' => [
505	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
506	],
507	]
508	);
509
510	$this->add_control(
511	'content_vertical_alignment',
512	[
513	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
514	'type' => Controls_Manager::SELECT,
515	'options' => [
516	'top' => esc_html__( 'Top', 'elementor' ),
517	'middle' => esc_html__( 'Middle', 'elementor' ),
518	'bottom' => esc_html__( 'Bottom', 'elementor' ),
519	],
520	'default' => 'top',
521	'prefix_class' => 'elementor-vertical-align-',
522	]
523	);
524
525	$this->add_control(
526	'heading_title',
527	[
528	'label' => esc_html__( 'Title', 'elementor' ),
529	'type' => Controls_Manager::HEADING,
530	'separator' => 'before',
531	]
532	);
533
534	$this->add_responsive_control(
535	'title_bottom_space',
536	[
537	'label' => esc_html__( 'Spacing', 'elementor' ),
538	'type' => Controls_Manager::SLIDER,
539	'range' => [
540	'px' => [
541	'min' => 0,
542	'max' => 100,
543	],
544	],
545	'selectors' => [
546	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
547	],
548	]
549	);
550
551	$this->add_control(
552	'title_color',
553	[
554	'label' => esc_html__( 'Color', 'elementor' ),
555	'type' => Controls_Manager::COLOR,
556	'default' => '',
557	'selectors' => [
558	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
559	],
560	'global' => [
561	'default' => Global_Colors::COLOR_PRIMARY,
562	],
563	]
564	);
565
566	$this->add_group_control(
567	Group_Control_Typography::get_type(),
568	[
569	'name' => 'title_typography',
570	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
571	'global' => [
572	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
573	],
574	]
575	);
576
577	$this->add_group_control(
578	Group_Control_Text_Stroke::get_type(),
579	[
580	'name' => 'text_stroke',
581	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
582	]
583	);
584
585	$this->add_group_control(
586	Group_Control_Text_Shadow::get_type(),
587	[
588	'name' => 'title_shadow',
589	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
590	]
591	);
592
593	$this->add_control(
594	'heading_description',
595	[
596	'label' => esc_html__( 'Description', 'elementor' ),
597	'type' => Controls_Manager::HEADING,
598	'separator' => 'before',
599	]
600	);
601
602	$this->add_control(
603	'description_color',
604	[
605	'label' => esc_html__( 'Color', 'elementor' ),
606	'type' => Controls_Manager::COLOR,
607	'default' => '',
608	'selectors' => [
609	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
610	],
611	'global' => [
612	'default' => Global_Colors::COLOR_TEXT,
613	],
614	]
615	);
616
617	$this->add_group_control(
618	Group_Control_Typography::get_type(),
619	[
620	'name' => 'description_typography',
621	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
622	'global' => [
623	'default' => Global_Typography::TYPOGRAPHY_TEXT,
624	],
625	]
626	);
627
628	$this->add_group_control(
629	Group_Control_Text_Shadow::get_type(),
630	[
631	'name' => 'description_shadow',
632	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
633	]
634	);
635
636	$this->end_controls_section();
637	}
638
639	/**
640	* Render icon box widget output on the frontend.
641	*
642	* Written in PHP and used to generate the final HTML.
643	*
644	* @since 1.0.0
645	* @access protected
646	*/
647	protected function render() {
648	$settings = $this->get_settings_for_display();
649
650	$this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
651
652	$icon_tag = 'span';
653
654	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
655	// add old default
656	$settings['icon'] = 'fa fa-star';
657	}
658
659	$has_icon = ! empty( $settings['icon'] );
660
661	if ( ! empty( $settings['link']['url'] ) ) {
662	$icon_tag = 'a';
663
664	$this->add_link_attributes( 'link', $settings['link'] );
665	}
666
667	if ( $has_icon ) {
668	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
669	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
670	}
671
672	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
673
674	$this->add_inline_editing_attributes( 'title_text', 'none' );
675	$this->add_inline_editing_attributes( 'description_text' );
676	if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
677	$has_icon = true;
678	}
679	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
680	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
681
682	?>
683	<div class="elementor-icon-box-wrapper">
684	<?php if ( $has_icon ) : ?>
685	<div class="elementor-icon-box-icon">
686	<<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>>
687	<?php
688	if ( $is_new \|\| $migrated ) {
689	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
690	} elseif ( ! empty( $settings['icon'] ) ) {
691	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
692	}
693	?>
694	</<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
695	</div>
696	<?php endif; ?>
697	<div class="elementor-icon-box-content">
698	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
699	<<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
700	<?php $this->print_unescaped_setting( 'title_text' ); ?>
701	</<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
702	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
703	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
704	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
705	<?php $this->print_unescaped_setting( 'description_text' ); ?>
706	</p>
707	<?php endif; ?>
708	</div>
709	</div>
710	<?php
711	}
712
713	/**
714	* Render icon box widget output in the editor.
715	*
716	* Written as a Backbone JavaScript template and used to generate the live preview.
717	*
718	* @since 2.9.0
719	* @access protected
720	*/
721	protected function content_template() {
722	?>
723	<#
724	var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
725	iconTag = link ? 'a' : 'span',
726	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
727	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
728
729	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
730
731	view.addInlineEditingAttributes( 'title_text', 'none' );
732	view.addInlineEditingAttributes( 'description_text' );
733	#>
734	<div class="elementor-icon-box-wrapper">
735	<?php // settings.icon is needed for older version ?>
736	<# if ( settings.icon \|\| settings.selected_icon.value ) { #>
737	<div class="elementor-icon-box-icon">
738	<{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
739	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
740	{{{ iconHTML.value }}}
741	<# } else { #>
742	<i class="{{ settings.icon }}" aria-hidden="true"></i>
743	<# } #>
744	</{{{ iconTag }}}>
745	</div>
746	<# } #>
747	<div class="elementor-icon-box-content">
748	<# var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); #>
749	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
750	<{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
751	</{{{ titleSizeTag }}}>
752	<# if ( settings.description_text ) { #>
753	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
754	<# } #>
755	</div>
756	</div>
757	<?php
758	}
759
760	public function on_import( $element ) {
761	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
762	}
763	}
764