elementor / includes / widgets / social-icons.php

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

665 lines 15.5 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->add_control(
321	'view',
322	[
323	'label' => esc_html__( 'View', 'elementor' ),
324	'type' => Controls_Manager::HIDDEN,
325	'default' => 'traditional',
326	]
327	);
328
329	$this->end_controls_section();
330
331	$this->start_controls_section(
332	'section_social_style',
333	[
334	'label' => esc_html__( 'Icon', 'elementor' ),
335	'tab' => Controls_Manager::TAB_STYLE,
336	]
337	);
338
339	$this->add_control(
340	'icon_color',
341	[
342	'label' => esc_html__( 'Color', 'elementor' ),
343	'type' => Controls_Manager::SELECT,
344	'default' => 'default',
345	'options' => [
346	'default' => esc_html__( 'Official Color', 'elementor' ),
347	'custom' => esc_html__( 'Custom', 'elementor' ),
348	],
349	]
350	);
351
352	$this->add_control(
353	'icon_primary_color',
354	[
355	'label' => esc_html__( 'Primary Color', 'elementor' ),
356	'type' => Controls_Manager::COLOR,
357	'condition' => [
358	'icon_color' => 'custom',
359	],
360	'selectors' => [
361	'{{WRAPPER}} .elementor-social-icon' => 'background-color: {{VALUE}};',
362	],
363	]
364	);
365
366	$this->add_control(
367	'icon_secondary_color',
368	[
369	'label' => esc_html__( 'Secondary Color', 'elementor' ),
370	'type' => Controls_Manager::COLOR,
371	'condition' => [
372	'icon_color' => 'custom',
373	],
374	'selectors' => [
375	'{{WRAPPER}} .elementor-social-icon i' => 'color: {{VALUE}};',
376	'{{WRAPPER}} .elementor-social-icon svg' => 'fill: {{VALUE}};',
377	],
378	]
379	);
380
381	$this->add_responsive_control(
382	'icon_size',
383	[
384	'label' => esc_html__( 'Size', 'elementor' ),
385	'type' => Controls_Manager::SLIDER,
386	// The `%' and `em` units are not supported as the widget implements icons differently then other icons.
387	'size_units' => [ 'px', 'rem', 'vw', 'custom' ],
388	'range' => [
389	'px' => [
390	'min' => 6,
391	'max' => 300,
392	],
393	],
394	'selectors' => [
395	'{{WRAPPER}}' => '--icon-size: {{SIZE}}{{UNIT}}',
396	],
397	]
398	);
399
400	$this->add_responsive_control(
401	'icon_padding',
402	[
403	'label' => esc_html__( 'Padding', 'elementor' ),
404	'type' => Controls_Manager::SLIDER,
405	'selectors' => [
406	'{{WRAPPER}} .elementor-social-icon' => '--icon-padding: {{SIZE}}{{UNIT}}',
407	],
408	'default' => [
409	'unit' => 'em',
410	],
411	'tablet_default' => [
412	'unit' => 'em',
413	],
414	'mobile_default' => [
415	'unit' => 'em',
416	],
417	'range' => [
418	'em' => [
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	'range' => [
432	'px' => [
433	'min' => 0,
434	'max' => 100,
435	],
436	],
437	'default' => [
438	'size' => 5,
439	],
440	'selectors' => [
441	'{{WRAPPER}}' => '--grid-column-gap: {{SIZE}}{{UNIT}}',
442	],
443	]
444	);
445
446	$this->add_responsive_control(
447	'row_gap',
448	[
449	'label' => esc_html__( 'Rows Gap', 'elementor' ),
450	'type' => Controls_Manager::SLIDER,
451	'default' => [
452	'size' => 0,
453	],
454	'selectors' => [
455	'{{WRAPPER}}' => '--grid-row-gap: {{SIZE}}{{UNIT}}',
456	],
457	]
458	);
459
460	$this->add_group_control(
461	Group_Control_Border::get_type(),
462	[
463	'name' => 'image_border', // We know this mistake - TODO: 'icon_border' (for hover control condition also)
464	'selector' => '{{WRAPPER}} .elementor-social-icon',
465	'separator' => 'before',
466	]
467	);
468
469	$this->add_responsive_control(
470	'border_radius',
471	[
472	'label' => esc_html__( 'Border Radius', 'elementor' ),
473	'type' => Controls_Manager::DIMENSIONS,
474	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
475	'selectors' => [
476	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
477	],
478	]
479	);
480
481	$this->end_controls_section();
482
483	$this->start_controls_section(
484	'section_social_hover',
485	[
486	'label' => esc_html__( 'Icon Hover', 'elementor' ),
487	'tab' => Controls_Manager::TAB_STYLE,
488	]
489	);
490
491	$this->add_control(
492	'hover_primary_color',
493	[
494	'label' => esc_html__( 'Primary Color', 'elementor' ),
495	'type' => Controls_Manager::COLOR,
496	'default' => '',
497	'condition' => [
498	'icon_color' => 'custom',
499	],
500	'selectors' => [
501	'{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};',
502	],
503	]
504	);
505
506	$this->add_control(
507	'hover_secondary_color',
508	[
509	'label' => esc_html__( 'Secondary Color', 'elementor' ),
510	'type' => Controls_Manager::COLOR,
511	'default' => '',
512	'condition' => [
513	'icon_color' => 'custom',
514	],
515	'selectors' => [
516	'{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};',
517	'{{WRAPPER}} .elementor-social-icon:hover svg' => 'fill: {{VALUE}};',
518	],
519	]
520	);
521
522	$this->add_control(
523	'hover_border_color',
524	[
525	'label' => esc_html__( 'Border Color', 'elementor' ),
526	'type' => Controls_Manager::COLOR,
527	'default' => '',
528	'condition' => [
529	'image_border_border!' => '',
530	],
531	'selectors' => [
532	'{{WRAPPER}} .elementor-social-icon:hover' => 'border-color: {{VALUE}};',
533	],
534	]
535	);
536
537	$this->add_control(
538	'hover_animation',
539	[
540	'label' => esc_html__( 'Hover Animation', 'elementor' ),
541	'type' => Controls_Manager::HOVER_ANIMATION,
542	]
543	);
544
545	$this->end_controls_section();
546
547	}
548
549	/**
550	* Render social icons widget output on the frontend.
551	*
552	* Written in PHP and used to generate the final HTML.
553	*
554	* @since 1.0.0
555	* @access protected
556	*/
557	protected function render() {
558	$settings = $this->get_settings_for_display();
559	$fallback_defaults = [
560	'fa fa-facebook',
561	'fa fa-twitter',
562	'fa fa-google-plus',
563	];
564
565	$class_animation = '';
566
567	if ( ! empty( $settings['hover_animation'] ) ) {
568	$class_animation = ' elementor-animation-' . $settings['hover_animation'];
569	}
570
571	$migration_allowed = Icons_Manager::is_migration_allowed();
572
573	?>
574	<div class="elementor-social-icons-wrapper elementor-grid">
575	<?php
576	foreach ( $settings['social_icon_list'] as $index => $item ) {
577	$migrated = isset( $item['__fa4_migrated']['social_icon'] );
578	$is_new = empty( $item['social'] ) && $migration_allowed;
579	$social = '';
580
581	// add old default
582	if ( empty( $item['social'] ) && ! $migration_allowed ) {
583	$item['social'] = isset( $fallback_defaults[ $index ] ) ? $fallback_defaults[ $index ] : 'fa fa-wordpress';
584	}
585
586	if ( ! empty( $item['social'] ) ) {
587	$social = str_replace( 'fa fa-', '', $item['social'] );
588	}
589
590	if ( ( $is_new \|\| $migrated ) && 'svg' !== $item['social_icon']['library'] ) {
591	$social = explode( ' ', $item['social_icon']['value'], 2 );
592	if ( empty( $social[1] ) ) {
593	$social = '';
594	} else {
595	$social = str_replace( 'fa-', '', $social[1] );
596	}
597	}
598	if ( 'svg' === $item['social_icon']['library'] ) {
599	$social = get_post_meta( $item['social_icon']['value']['id'], '_wp_attachment_image_alt', true );
600	}
601
602	$link_key = 'link_' . $index;
603
604	$this->add_render_attribute( $link_key, 'class', [
605	'elementor-icon',
606	'elementor-social-icon',
607	'elementor-social-icon-' . $social . $class_animation,
608	'elementor-repeater-item-' . $item['_id'],
609	] );
610
611	$this->add_link_attributes( $link_key, $item['link'] );
612
613	?>
614	<span class="elementor-grid-item">
615	<a <?php $this->print_render_attribute_string( $link_key ); ?>>
616	<span class="elementor-screen-only"><?php echo esc_html( ucwords( $social ) ); ?></span>
617	<?php
618	if ( $is_new \|\| $migrated ) {
619	Icons_Manager::render_icon( $item['social_icon'] );
620	} else { ?>
621	<i class="<?php echo esc_attr( $item['social'] ); ?>"></i>
622	<?php } ?>
623	</a>
624	</span>
625	<?php } ?>
626	</div>
627	<?php
628	}
629
630	/**
631	* Render social icons widget output in the editor.
632	*
633	* Written as a Backbone JavaScript template and used to generate the live preview.
634	*
635	* @since 2.9.0
636	* @access protected
637	*/
638	protected function content_template() {
639	?>
640	<# var iconsHTML = {}; #>
641	<div class="elementor-social-icons-wrapper elementor-grid">
642	<# _.each( settings.social_icon_list, function( item, index ) {
643	var link = item.link ? item.link.url : '',
644	migrated = elementor.helpers.isIconMigrated( item, 'social_icon' );
645	social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
646	#>
647	<span class="elementor-grid-item">
648	<a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
649	<span class="elementor-screen-only">{{{ social }}}</span>
650	<#
651	iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );
652	if ( ( ! item.social \|\| migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
653	{{{ iconsHTML[ index ].value }}}
654	<# } else { #>
655	<i class="{{ item.social }}"></i>
656	<# }
657	#>
658	</a>
659	</span>
660	<# } ); #>
661	</div>
662	<?php
663	}
664	}
665