elementor / includes / widgets / social-icons.php

social-icons.php in Elementor Website Builder – more than just a page builder 3.23.0-dev2, at includes/widgets/social-icons.php

680 lines 15.8 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	/**
9	* Elementor social icons widget.
10	*
11	* Elementor widget that displays icons to social pages like Facebook and Twitter.
12	*
13	* @since 1.0.0
14	*/
15	class Widget_Social_Icons extends Widget_Base {
16
17	/**
18	* Get widget name.
19	*
20	* Retrieve social icons widget name.
21	*
22	* @since 1.0.0
23	* @access public
24	*
25	* @return string Widget name.
26	*/
27	public function get_name() {
28	return 'social-icons';
29	}
30
31	/**
32	* Get widget title.
33	*
34	* Retrieve social icons widget title.
35	*
36	* @since 1.0.0
37	* @access public
38	*
39	* @return string Widget title.
40	*/
41	public function get_title() {
42	return esc_html__( 'Social Icons', 'elementor' );
43	}
44
45	/**
46	* Get widget icon.
47	*
48	* Retrieve social icons widget icon.
49	*
50	* @since 1.0.0
51	* @access public
52	*
53	* @return string Widget icon.
54	*/
55	public function get_icon() {
56	return 'eicon-social-icons';
57	}
58
59	/**
60	* Get widget keywords.
61	*
62	* Retrieve the list of keywords the widget belongs to.
63	*
64	* @since 2.1.0
65	* @access public
66	*
67	* @return array Widget keywords.
68	*/
69	public function get_keywords() {
70	return [ 'social', 'icon', 'link' ];
71	}
72
73	protected function is_dynamic_content(): bool {
74	return false;
75	}
76
77	/**
78	* Register social icons widget controls.
79	*
80	* Adds different input fields to allow the user to change and customize the widget settings.
81	*
82	* @since 3.1.0
83	* @access protected
84	*/
85	protected function register_controls() {
86	$this->start_controls_section(
87	'section_social_icon',
88	[
89	'label' => esc_html__( 'Social Icons', 'elementor' ),
90	]
91	);
92
93	$repeater = new Repeater();
94
95	$repeater->add_control(
96	'social_icon',
97	[
98	'label' => esc_html__( 'Icon', 'elementor' ),
99	'type' => Controls_Manager::ICONS,
100	'fa4compatibility' => 'social',
101	'default' => [
102	'value' => 'fab fa-wordpress',
103	'library' => 'fa-brands',
104	],
105	'recommended' => [
106	'fa-brands' => [
107	'android',
108	'apple',
109	'behance',
110	'bitbucket',
111	'codepen',
112	'delicious',
113	'deviantart',
114	'digg',
115	'dribbble',
116	'elementor',
117	'facebook',
118	'flickr',
119	'foursquare',
120	'free-code-camp',
121	'github',
122	'gitlab',
123	'globe',
124	'houzz',
125	'instagram',
126	'jsfiddle',
127	'linkedin',
128	'medium',
129	'meetup',
130	'mix',
131	'mixcloud',
132	'odnoklassniki',
133	'pinterest',
134	'product-hunt',
135	'reddit',
136	'shopping-cart',
137	'skype',
138	'slideshare',
139	'snapchat',
140	'soundcloud',
141	'spotify',
142	'stack-overflow',
143	'steam',
144	'telegram',
145	'thumb-tack',
146	'threads',
147	'tripadvisor',
148	'tumblr',
149	'twitch',
150	'twitter',
151	'viber',
152	'vimeo',
153	'vk',
154	'weibo',
155	'weixin',
156	'whatsapp',
157	'wordpress',
158	'xing',
159	'x-twitter',
160	'yelp',
161	'youtube',
162	'500px',
163	],
164	'fa-solid' => [
165	'envelope',
166	'link',
167	'rss',
168	],
169	],
170	]
171	);
172
173	$repeater->add_control(
174	'link',
175	[
176	'label' => esc_html__( 'Link', 'elementor' ),
177	'type' => Controls_Manager::URL,
178	'default' => [
179	'is_external' => 'true',
180	],
181	'dynamic' => [
182	'active' => true,
183	],
184	]
185	);
186
187	$repeater->add_control(
188	'item_icon_color',
189	[
190	'label' => esc_html__( 'Color', 'elementor' ),
191	'type' => Controls_Manager::SELECT,
192	'default' => 'default',
193	'options' => [
194	'default' => esc_html__( 'Official Color', 'elementor' ),
195	'custom' => esc_html__( 'Custom', 'elementor' ),
196	],
197	]
198	);
199
200	$repeater->add_control(
201	'item_icon_primary_color',
202	[
203	'label' => esc_html__( 'Primary Color', 'elementor' ),
204	'type' => Controls_Manager::COLOR,
205	'condition' => [
206	'item_icon_color' => 'custom',
207	],
208	'selectors' => [
209	'{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon' => 'background-color: {{VALUE}};',
210	],
211	]
212	);
213
214	$repeater->add_control(
215	'item_icon_secondary_color',
216	[
217	'label' => esc_html__( 'Secondary Color', 'elementor' ),
218	'type' => Controls_Manager::COLOR,
219	'condition' => [
220	'item_icon_color' => 'custom',
221	],
222	'selectors' => [
223	'{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon i' => 'color: {{VALUE}};',
224	'{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon svg' => 'fill: {{VALUE}};',
225	],
226	]
227	);
228
229	$this->add_control(
230	'social_icon_list',
231	[
232	'label' => esc_html__( 'Social Icons', 'elementor' ),
233	'type' => Controls_Manager::REPEATER,
234	'fields' => $repeater->get_controls(),
235	'default' => [
236	[
237	'social_icon' => [
238	'value' => 'fab fa-facebook',
239	'library' => 'fa-brands',
240	],
241	],
242	[
243	'social_icon' => [
244	'value' => 'fab fa-twitter',
245	'library' => 'fa-brands',
246	],
247	],
248	[
249	'social_icon' => [
250	'value' => 'fab fa-youtube',
251	'library' => 'fa-brands',
252	],
253	],
254	],
255	'title_field' => '<# var migrated = "undefined" !== typeof __fa4_migrated, social = ( "undefined" === typeof social ) ? false : social; #>{{{ elementor.helpers.getSocialNetworkNameFromIcon( social_icon, social, true, migrated, true ) }}}',
256	]
257	);
258
259	$this->add_control(
260	'shape',
261	[
262	'label' => esc_html__( 'Shape', 'elementor' ),
263	'type' => Controls_Manager::SELECT,
264	'default' => 'rounded',
265	'options' => [
266	'rounded' => esc_html__( 'Rounded', 'elementor' ),
267	'square' => esc_html__( 'Square', 'elementor' ),
268	'circle' => esc_html__( 'Circle', 'elementor' ),
269	],
270	'prefix_class' => 'elementor-shape-',
271	]
272	);
273
274	$this->add_responsive_control(
275	'columns',
276	[
277	'label' => esc_html__( 'Columns', 'elementor' ),
278	'type' => Controls_Manager::SELECT,
279	'default' => '0',
280	'options' => [
281	'0' => esc_html__( 'Auto', 'elementor' ),
282	'1' => '1',
283	'2' => '2',
284	'3' => '3',
285	'4' => '4',
286	'5' => '5',
287	'6' => '6',
288	],
289	'prefix_class' => 'elementor-grid%s-',
290	'selectors' => [
291	'{{WRAPPER}}' => '--grid-template-columns: repeat({{VALUE}}, auto);',
292	],
293	]
294	);
295
296	$start = is_rtl() ? 'end' : 'start';
297	$end = is_rtl() ? 'start' : 'end';
298
299	$this->add_responsive_control(
300	'align',
301	[
302	'label' => esc_html__( 'Alignment', 'elementor' ),
303	'type' => Controls_Manager::CHOOSE,
304	'options' => [
305	'left' => [
306	'title' => esc_html__( 'Left', 'elementor' ),
307	'icon' => 'eicon-text-align-left',
308	],
309	'center' => [
310	'title' => esc_html__( 'Center', 'elementor' ),
311	'icon' => 'eicon-text-align-center',
312	],
313	'right' => [
314	'title' => esc_html__( 'Right', 'elementor' ),
315	'icon' => 'eicon-text-align-right',
316	],
317	],
318	'prefix_class' => 'e-grid-align%s-',
319	'default' => 'center',
320	'selectors' => [
321	'{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}}',
322	],
323	]
324	);
325
326	$this->end_controls_section();
327
328	$this->start_controls_section(
329	'section_social_style',
330	[
331	'label' => esc_html__( 'Icon', 'elementor' ),
332	'tab' => Controls_Manager::TAB_STYLE,
333	]
334	);
335
336	$this->add_control(
337	'icon_color',
338	[
339	'label' => esc_html__( 'Color', 'elementor' ),
340	'type' => Controls_Manager::SELECT,
341	'default' => 'default',
342	'options' => [
343	'default' => esc_html__( 'Official Color', 'elementor' ),
344	'custom' => esc_html__( 'Custom', 'elementor' ),
345	],
346	]
347	);
348
349	$this->add_control(
350	'icon_primary_color',
351	[
352	'label' => esc_html__( 'Primary Color', 'elementor' ),
353	'type' => Controls_Manager::COLOR,
354	'condition' => [
355	'icon_color' => 'custom',
356	],
357	'selectors' => [
358	'{{WRAPPER}} .elementor-social-icon' => 'background-color: {{VALUE}};',
359	],
360	]
361	);
362
363	$this->add_control(
364	'icon_secondary_color',
365	[
366	'label' => esc_html__( 'Secondary Color', 'elementor' ),
367	'type' => Controls_Manager::COLOR,
368	'condition' => [
369	'icon_color' => 'custom',
370	],
371	'selectors' => [
372	'{{WRAPPER}} .elementor-social-icon i' => 'color: {{VALUE}};',
373	'{{WRAPPER}} .elementor-social-icon svg' => 'fill: {{VALUE}};',
374	],
375	]
376	);
377
378	$this->add_responsive_control(
379	'icon_size',
380	[
381	'label' => esc_html__( 'Size', 'elementor' ),
382	'type' => Controls_Manager::SLIDER,
383	// The `%' and `em` units are not supported as the widget implements icons differently then other icons.
384	'size_units' => [ 'px', 'rem', 'vw', 'custom' ],
385	'range' => [
386	'px' => [
387	'min' => 6,
388	'max' => 300,
389	],
390	],
391	'selectors' => [
392	'{{WRAPPER}}' => '--icon-size: {{SIZE}}{{UNIT}}',
393	],
394	]
395	);
396
397	$this->add_responsive_control(
398	'icon_padding',
399	[
400	'label' => esc_html__( 'Padding', 'elementor' ),
401	'type' => Controls_Manager::SLIDER,
402	// The `%' unit is not supported.
403	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
404	'selectors' => [
405	'{{WRAPPER}} .elementor-social-icon' => '--icon-padding: {{SIZE}}{{UNIT}}',
406	],
407	'default' => [
408	'unit' => 'em',
409	],
410	'tablet_default' => [
411	'unit' => 'em',
412	],
413	'mobile_default' => [
414	'unit' => 'em',
415	],
416	'range' => [
417	'px' => [
418	'max' => 50,
419	],
420	'em' => [
421	'min' => 0,
422	'max' => 5,
423	],
424	'rem' => [
425	'min' => 0,
426	'max' => 5,
427	],
428	],
429	]
430	);
431
432	$this->add_responsive_control(
433	'icon_spacing',
434	[
435	'label' => esc_html__( 'Spacing', 'elementor' ),
436	'type' => Controls_Manager::SLIDER,
437	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
438	'range' => [
439	'px' => [
440	'max' => 100,
441	],
442	'em' => [
443	'min' => 0,
444	'max' => 10,
445	],
446	'rem' => [
447	'min' => 0,
448	'max' => 10,
449	],
450	],
451	'default' => [
452	'size' => 5,
453	],
454	'selectors' => [
455	'{{WRAPPER}}' => '--grid-column-gap: {{SIZE}}{{UNIT}}',
456	],
457	]
458	);
459
460	$this->add_responsive_control(
461	'row_gap',
462	[
463	'label' => esc_html__( 'Rows Gap', 'elementor' ),
464	'type' => Controls_Manager::SLIDER,
465	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
466	'default' => [
467	'size' => 0,
468	],
469	'selectors' => [
470	'{{WRAPPER}}' => '--grid-row-gap: {{SIZE}}{{UNIT}}',
471	],
472	]
473	);
474
475	$this->add_group_control(
476	Group_Control_Border::get_type(),
477	[
478	'name' => 'image_border', // We know this mistake - TODO: 'icon_border' (for hover control condition also)
479	'selector' => '{{WRAPPER}} .elementor-social-icon',
480	'separator' => 'before',
481	]
482	);
483
484	$this->add_responsive_control(
485	'border_radius',
486	[
487	'label' => esc_html__( 'Border Radius', 'elementor' ),
488	'type' => Controls_Manager::DIMENSIONS,
489	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
490	'selectors' => [
491	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
492	],
493	]
494	);
495
496	$this->end_controls_section();
497
498	$this->start_controls_section(
499	'section_social_hover',
500	[
501	'label' => esc_html__( 'Icon Hover', 'elementor' ),
502	'tab' => Controls_Manager::TAB_STYLE,
503	]
504	);
505
506	$this->add_control(
507	'hover_primary_color',
508	[
509	'label' => esc_html__( 'Primary Color', 'elementor' ),
510	'type' => Controls_Manager::COLOR,
511	'default' => '',
512	'condition' => [
513	'icon_color' => 'custom',
514	],
515	'selectors' => [
516	'{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};',
517	],
518	]
519	);
520
521	$this->add_control(
522	'hover_secondary_color',
523	[
524	'label' => esc_html__( 'Secondary Color', 'elementor' ),
525	'type' => Controls_Manager::COLOR,
526	'default' => '',
527	'condition' => [
528	'icon_color' => 'custom',
529	],
530	'selectors' => [
531	'{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};',
532	'{{WRAPPER}} .elementor-social-icon:hover svg' => 'fill: {{VALUE}};',
533	],
534	]
535	);
536
537	$this->add_control(
538	'hover_border_color',
539	[
540	'label' => esc_html__( 'Border Color', 'elementor' ),
541	'type' => Controls_Manager::COLOR,
542	'default' => '',
543	'condition' => [
544	'image_border_border!' => '',
545	],
546	'selectors' => [
547	'{{WRAPPER}} .elementor-social-icon:hover' => 'border-color: {{VALUE}};',
548	],
549	]
550	);
551
552	$this->add_control(
553	'hover_animation',
554	[
555	'label' => esc_html__( 'Hover Animation', 'elementor' ),
556	'type' => Controls_Manager::HOVER_ANIMATION,
557	]
558	);
559
560	$this->end_controls_section();
561
562	}
563
564	/**
565	* Render social icons widget output on the frontend.
566	*
567	* Written in PHP and used to generate the final HTML.
568	*
569	* @since 1.0.0
570	* @access protected
571	*/
572	protected function render() {
573	$settings = $this->get_settings_for_display();
574	$fallback_defaults = [
575	'fa fa-facebook',
576	'fa fa-twitter',
577	'fa fa-google-plus',
578	];
579
580	$class_animation = '';
581
582	if ( ! empty( $settings['hover_animation'] ) ) {
583	$class_animation = ' elementor-animation-' . $settings['hover_animation'];
584	}
585
586	$migration_allowed = Icons_Manager::is_migration_allowed();
587
588	?>
589	<div class="elementor-social-icons-wrapper elementor-grid">
590	<?php
591	foreach ( $settings['social_icon_list'] as $index => $item ) {
592	$migrated = isset( $item['__fa4_migrated']['social_icon'] );
593	$is_new = empty( $item['social'] ) && $migration_allowed;
594	$social = '';
595
596	// add old default
597	if ( empty( $item['social'] ) && ! $migration_allowed ) {
598	$item['social'] = isset( $fallback_defaults[ $index ] ) ? $fallback_defaults[ $index ] : 'fa fa-wordpress';
599	}
600
601	if ( ! empty( $item['social'] ) ) {
602	$social = str_replace( 'fa fa-', '', $item['social'] );
603	}
604
605	if ( ( $is_new \|\| $migrated ) && 'svg' !== $item['social_icon']['library'] ) {
606	$social = explode( ' ', $item['social_icon']['value'], 2 );
607	if ( empty( $social[1] ) ) {
608	$social = '';
609	} else {
610	$social = str_replace( 'fa-', '', $social[1] );
611	}
612	}
613	if ( 'svg' === $item['social_icon']['library'] ) {
614	$social = get_post_meta( $item['social_icon']['value']['id'], '_wp_attachment_image_alt', true );
615	}
616
617	$link_key = 'link_' . $index;
618
619	$this->add_render_attribute( $link_key, 'class', [
620	'elementor-icon',
621	'elementor-social-icon',
622	'elementor-social-icon-' . $social . $class_animation,
623	'elementor-repeater-item-' . $item['_id'],
624	] );
625
626	$this->add_link_attributes( $link_key, $item['link'] );
627
628	?>
629	<span class="elementor-grid-item">
630	<a <?php $this->print_render_attribute_string( $link_key ); ?>>
631	<span class="elementor-screen-only"><?php echo esc_html( ucwords( $social ) ); ?></span>
632	<?php
633	if ( $is_new \|\| $migrated ) {
634	Icons_Manager::render_icon( $item['social_icon'] );
635	} else { ?>
636	<i class="<?php echo esc_attr( $item['social'] ); ?>"></i>
637	<?php } ?>
638	</a>
639	</span>
640	<?php } ?>
641	</div>
642	<?php
643	}
644
645	/**
646	* Render social icons widget output in the editor.
647	*
648	* Written as a Backbone JavaScript template and used to generate the live preview.
649	*
650	* @since 2.9.0
651	* @access protected
652	*/
653	protected function content_template() {
654	?>
655	<# var iconsHTML = {}; #>
656	<div class="elementor-social-icons-wrapper elementor-grid">
657	<# _.each( settings.social_icon_list, function( item, index ) {
658	var link = item.link ? item.link.url : '',
659	migrated = elementor.helpers.isIconMigrated( item, 'social_icon' );
660	social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
661	#>
662	<span class="elementor-grid-item">
663	<a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
664	<span class="elementor-screen-only">{{{ social }}}</span>
665	<#
666	iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );
667	if ( ( ! item.social \|\| migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
668	{{{ iconsHTML[ index ].value }}}
669	<# } else { #>
670	<i class="{{ item.social }}"></i>
671	<# }
672	#>
673	</a>
674	</span>
675	<# } ); #>
676	</div>
677	<?php
678	}
679	}
680