elementor / includes / widgets / icon-box.php

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

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