elementor / includes / widgets / social-icons.php

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

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