elementor / includes / widgets / icon-box.php

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

766 lines 19.2 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	'size_units' => [ 'px', '%', 'em', 'rem' ],
352	'default' => [
353	'size' => 15,
354	],
355	'range' => [
356	'px' => [
357	'min' => 0,
358	'max' => 100,
359	],
360	],
361	'selectors' => [
362	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
363	],
364	]
365	);
366
367	$this->add_responsive_control(
368	'icon_size',
369	[
370	'label' => esc_html__( 'Size', 'elementor' ),
371	'type' => Controls_Manager::SLIDER,
372	'size_units' => [ 'px', '%', 'em', 'rem' ],
373	'range' => [
374	'px' => [
375	'min' => 6,
376	'max' => 300,
377	],
378	],
379	'selectors' => [
380	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
381	],
382	]
383	);
384
385	$this->add_responsive_control(
386	'icon_padding',
387	[
388	'label' => esc_html__( 'Padding', 'elementor' ),
389	'type' => Controls_Manager::SLIDER,
390	'selectors' => [
391	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
392	],
393	'range' => [
394	'em' => [
395	'min' => 0,
396	'max' => 5,
397	],
398	],
399	'condition' => [
400	'view!' => 'default',
401	],
402	]
403	);
404
405	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
406
407	$rotate_device_args = [];
408
409	$rotate_device_settings = [
410	'default' => [
411	'unit' => 'deg',
412	'size' => '',
413	],
414	];
415
416	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
417	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
418	}
419
420	$this->add_responsive_control(
421	'rotate',
422	[
423	'label' => esc_html__( 'Rotate', 'elementor' ),
424	'type' => Controls_Manager::SLIDER,
425	'size_units' => [ 'deg' ],
426	'range' => [
427	'deg' => [
428	'min' => 0,
429	'max' => 360,
430	'step' => 1,
431	],
432	],
433	'default' => [
434	'unit' => 'deg',
435	'size' => '',
436	],
437	'device_args' => $rotate_device_args,
438	'selectors' => [
439	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
440	],
441	]
442	);
443
444	$this->add_responsive_control(
445	'border_width',
446	[
447	'label' => esc_html__( 'Border Width', 'elementor' ),
448	'type' => Controls_Manager::DIMENSIONS,
449	'selectors' => [
450	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
451	],
452	'condition' => [
453	'view' => 'framed',
454	],
455	]
456	);
457
458	$this->add_responsive_control(
459	'border_radius',
460	[
461	'label' => esc_html__( 'Border Radius', 'elementor' ),
462	'type' => Controls_Manager::DIMENSIONS,
463	'size_units' => [ 'px', '%', 'em' ],
464	'selectors' => [
465	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
466	],
467	'condition' => [
468	'view!' => 'default',
469	],
470	]
471	);
472
473	$this->end_controls_section();
474
475	$this->start_controls_section(
476	'section_style_content',
477	[
478	'label' => esc_html__( 'Content', 'elementor' ),
479	'tab' => Controls_Manager::TAB_STYLE,
480	]
481	);
482
483	$this->add_responsive_control(
484	'text_align',
485	[
486	'label' => esc_html__( 'Alignment', 'elementor' ),
487	'type' => Controls_Manager::CHOOSE,
488	'options' => [
489	'left' => [
490	'title' => esc_html__( 'Left', 'elementor' ),
491	'icon' => 'eicon-text-align-left',
492	],
493	'center' => [
494	'title' => esc_html__( 'Center', 'elementor' ),
495	'icon' => 'eicon-text-align-center',
496	],
497	'right' => [
498	'title' => esc_html__( 'Right', 'elementor' ),
499	'icon' => 'eicon-text-align-right',
500	],
501	'justify' => [
502	'title' => esc_html__( 'Justified', 'elementor' ),
503	'icon' => 'eicon-text-align-justify',
504	],
505	],
506	'selectors' => [
507	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
508	],
509	]
510	);
511
512	$this->add_control(
513	'content_vertical_alignment',
514	[
515	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
516	'type' => Controls_Manager::SELECT,
517	'options' => [
518	'top' => esc_html__( 'Top', 'elementor' ),
519	'middle' => esc_html__( 'Middle', 'elementor' ),
520	'bottom' => esc_html__( 'Bottom', 'elementor' ),
521	],
522	'default' => 'top',
523	'prefix_class' => 'elementor-vertical-align-',
524	]
525	);
526
527	$this->add_control(
528	'heading_title',
529	[
530	'label' => esc_html__( 'Title', 'elementor' ),
531	'type' => Controls_Manager::HEADING,
532	'separator' => 'before',
533	]
534	);
535
536	$this->add_responsive_control(
537	'title_bottom_space',
538	[
539	'label' => esc_html__( 'Spacing', 'elementor' ),
540	'type' => Controls_Manager::SLIDER,
541	'range' => [
542	'px' => [
543	'min' => 0,
544	'max' => 100,
545	],
546	],
547	'selectors' => [
548	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
549	],
550	]
551	);
552
553	$this->add_control(
554	'title_color',
555	[
556	'label' => esc_html__( 'Color', 'elementor' ),
557	'type' => Controls_Manager::COLOR,
558	'default' => '',
559	'selectors' => [
560	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
561	],
562	'global' => [
563	'default' => Global_Colors::COLOR_PRIMARY,
564	],
565	]
566	);
567
568	$this->add_group_control(
569	Group_Control_Typography::get_type(),
570	[
571	'name' => 'title_typography',
572	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
573	'global' => [
574	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
575	],
576	]
577	);
578
579	$this->add_group_control(
580	Group_Control_Text_Stroke::get_type(),
581	[
582	'name' => 'text_stroke',
583	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
584	]
585	);
586
587	$this->add_group_control(
588	Group_Control_Text_Shadow::get_type(),
589	[
590	'name' => 'title_shadow',
591	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
592	]
593	);
594
595	$this->add_control(
596	'heading_description',
597	[
598	'label' => esc_html__( 'Description', 'elementor' ),
599	'type' => Controls_Manager::HEADING,
600	'separator' => 'before',
601	]
602	);
603
604	$this->add_control(
605	'description_color',
606	[
607	'label' => esc_html__( 'Color', 'elementor' ),
608	'type' => Controls_Manager::COLOR,
609	'default' => '',
610	'selectors' => [
611	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
612	],
613	'global' => [
614	'default' => Global_Colors::COLOR_TEXT,
615	],
616	]
617	);
618
619	$this->add_group_control(
620	Group_Control_Typography::get_type(),
621	[
622	'name' => 'description_typography',
623	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
624	'global' => [
625	'default' => Global_Typography::TYPOGRAPHY_TEXT,
626	],
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Text_Shadow::get_type(),
632	[
633	'name' => 'description_shadow',
634	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
635	]
636	);
637
638	$this->end_controls_section();
639	}
640
641	/**
642	* Render icon box widget output on the frontend.
643	*
644	* Written in PHP and used to generate the final HTML.
645	*
646	* @since 1.0.0
647	* @access protected
648	*/
649	protected function render() {
650	$settings = $this->get_settings_for_display();
651
652	$this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
653
654	$icon_tag = 'span';
655
656	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
657	// add old default
658	$settings['icon'] = 'fa fa-star';
659	}
660
661	$has_icon = ! empty( $settings['icon'] );
662
663	if ( ! empty( $settings['link']['url'] ) ) {
664	$icon_tag = 'a';
665
666	$this->add_link_attributes( 'link', $settings['link'] );
667	}
668
669	if ( $has_icon ) {
670	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
671	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
672	}
673
674	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
675
676	$this->add_inline_editing_attributes( 'title_text', 'none' );
677	$this->add_inline_editing_attributes( 'description_text' );
678	if ( ! $has_icon && ! empty( $settings['selected_icon']['value'] ) ) {
679	$has_icon = true;
680	}
681	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
682	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
683
684	?>
685	<div class="elementor-icon-box-wrapper">
686	<?php if ( $has_icon ) : ?>
687	<div class="elementor-icon-box-icon">
688	<<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?> <?php $this->print_render_attribute_string( 'link' ); ?>>
689	<?php
690	if ( $is_new \|\| $migrated ) {
691	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
692	} elseif ( ! empty( $settings['icon'] ) ) {
693	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
694	}
695	?>
696	</<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
697	</div>
698	<?php endif; ?>
699	<div class="elementor-icon-box-content">
700	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
701	<<?php Utils::print_validated_html_tag( $icon_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
702	<?php $this->print_unescaped_setting( 'title_text' ); ?>
703	</<?php Utils::print_validated_html_tag( $icon_tag ); ?>>
704	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
705	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
706	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
707	<?php $this->print_unescaped_setting( 'description_text' ); ?>
708	</p>
709	<?php endif; ?>
710	</div>
711	</div>
712	<?php
713	}
714
715	/**
716	* Render icon box widget output in the editor.
717	*
718	* Written as a Backbone JavaScript template and used to generate the live preview.
719	*
720	* @since 2.9.0
721	* @access protected
722	*/
723	protected function content_template() {
724	?>
725	<#
726	var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
727	iconTag = link ? 'a' : 'span',
728	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
729	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
730
731	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
732
733	view.addInlineEditingAttributes( 'title_text', 'none' );
734	view.addInlineEditingAttributes( 'description_text' );
735	#>
736	<div class="elementor-icon-box-wrapper">
737	<?php // settings.icon is needed for older version ?>
738	<# if ( settings.icon \|\| settings.selected_icon.value ) { #>
739	<div class="elementor-icon-box-icon">
740	<{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
741	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
742	{{{ iconHTML.value }}}
743	<# } else { #>
744	<i class="{{ settings.icon }}" aria-hidden="true"></i>
745	<# } #>
746	</{{{ iconTag }}}>
747	</div>
748	<# } #>
749	<div class="elementor-icon-box-content">
750	<# var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); #>
751	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
752	<{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
753	</{{{ titleSizeTag }}}>
754	<# if ( settings.description_text ) { #>
755	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
756	<# } #>
757	</div>
758	</div>
759	<?php
760	}
761
762	public function on_import( $element ) {
763	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
764	}
765	}
766