elementor / includes / widgets / social-icons.php

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

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