elementor / includes / widgets / social-icons.php

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

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