elementor / includes / widgets / social-icons.php

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

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