elementor / includes / widgets / social-icons.php

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

663 lines 15.0 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 __( '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 1.0.0
79	* @access protected
80	*/
81	protected function _register_controls() {
82	$this->start_controls_section(
83	'section_social_icon',
84	[
85	'label' => __( 'Social Icons', 'elementor' ),
86	]
87	);
88
89	$repeater = new Repeater();
90
91	$repeater->add_control(
92	'social_icon',
93	[
94	'label' => __( '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' => __( 'Link', 'elementor' ),
171	'type' => Controls_Manager::URL,
172	'default' => [
173	'is_external' => 'true',
174	],
175	'dynamic' => [
176	'active' => true,
177	],
178	'placeholder' => __( 'https://your-link.com', 'elementor' ),
179	]
180	);
181
182	$repeater->add_control(
183	'item_icon_color',
184	[
185	'label' => __( 'Color', 'elementor' ),
186	'type' => Controls_Manager::SELECT,
187	'default' => 'default',
188	'options' => [
189	'default' => __( 'Official Color', 'elementor' ),
190	'custom' => __( 'Custom', 'elementor' ),
191	],
192	]
193	);
194
195	$repeater->add_control(
196	'item_icon_primary_color',
197	[
198	'label' => __( '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' => __( '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' => __( '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' => __( 'Shape', 'elementor' ),
258	'type' => Controls_Manager::SELECT,
259	'default' => 'rounded',
260	'options' => [
261	'rounded' => __( 'Rounded', 'elementor' ),
262	'square' => __( 'Square', 'elementor' ),
263	'circle' => __( 'Circle', 'elementor' ),
264	],
265	'prefix_class' => 'elementor-shape-',
266	]
267	);
268
269	$this->add_responsive_control(
270	'columns',
271	[
272	'label' => __( 'Columns', 'elementor' ),
273	'type' => Controls_Manager::SELECT,
274	'default' => '0',
275	'options' => [
276	'0' => __( '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' => __( 'Alignment', 'elementor' ),
298	'type' => Controls_Manager::CHOOSE,
299	'options' => [
300	'left' => [
301	'title' => __( 'Left', 'elementor' ),
302	'icon' => 'eicon-text-align-left',
303	],
304	'center' => [
305	'title' => __( 'Center', 'elementor' ),
306	'icon' => 'eicon-text-align-center',
307	],
308	'right' => [
309	'title' => __( 'Right', 'elementor' ),
310	'icon' => 'eicon-text-align-right',
311	],
312	],
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' => __( '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' => __( 'Icon', 'elementor' ),
335	'tab' => Controls_Manager::TAB_STYLE,
336	]
337	);
338
339	$this->add_control(
340	'icon_color',
341	[
342	'label' => __( 'Color', 'elementor' ),
343	'type' => Controls_Manager::SELECT,
344	'default' => 'default',
345	'options' => [
346	'default' => __( 'Official Color', 'elementor' ),
347	'custom' => __( 'Custom', 'elementor' ),
348	],
349	]
350	);
351
352	$this->add_control(
353	'icon_primary_color',
354	[
355	'label' => __( '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' => __( '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' => __( 'Size', 'elementor' ),
385	'type' => Controls_Manager::SLIDER,
386	'range' => [
387	'px' => [
388	'min' => 6,
389	'max' => 300,
390	],
391	],
392	'selectors' => [
393	'{{WRAPPER}}' => '--icon-size: {{SIZE}}{{UNIT}}',
394	],
395	]
396	);
397
398	$this->add_responsive_control(
399	'icon_padding',
400	[
401	'label' => __( 'Padding', 'elementor' ),
402	'type' => Controls_Manager::SLIDER,
403	'selectors' => [
404	'{{WRAPPER}} .elementor-social-icon' => '--icon-padding: {{SIZE}}{{UNIT}}',
405	],
406	'default' => [
407	'unit' => 'em',
408	],
409	'tablet_default' => [
410	'unit' => 'em',
411	],
412	'mobile_default' => [
413	'unit' => 'em',
414	],
415	'range' => [
416	'em' => [
417	'min' => 0,
418	'max' => 5,
419	],
420	],
421	]
422	);
423
424	$this->add_responsive_control(
425	'icon_spacing',
426	[
427	'label' => __( 'Spacing', 'elementor' ),
428	'type' => Controls_Manager::SLIDER,
429	'range' => [
430	'px' => [
431	'min' => 0,
432	'max' => 100,
433	],
434	],
435	'default' => [
436	'size' => 5,
437	],
438	'selectors' => [
439	'{{WRAPPER}}' => '--grid-column-gap: {{SIZE}}{{UNIT}}',
440	],
441	]
442	);
443
444	$this->add_responsive_control(
445	'row_gap',
446	[
447	'label' => __( 'Rows Gap', 'elementor' ),
448	'type' => Controls_Manager::SLIDER,
449	'default' => [
450	'size' => 0,
451	],
452	'selectors' => [
453	'{{WRAPPER}}' => '--grid-row-gap: {{SIZE}}{{UNIT}}',
454	],
455	]
456	);
457
458	$this->add_group_control(
459	Group_Control_Border::get_type(),
460	[
461	'name' => 'image_border', // We know this mistake - TODO: 'icon_border' (for hover control condition also)
462	'selector' => '{{WRAPPER}} .elementor-social-icon',
463	'separator' => 'before',
464	]
465	);
466
467	$this->add_control(
468	'border_radius',
469	[
470	'label' => __( 'Border Radius', 'elementor' ),
471	'type' => Controls_Manager::DIMENSIONS,
472	'size_units' => [ 'px', '%' ],
473	'selectors' => [
474	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
475	],
476	]
477	);
478
479	$this->end_controls_section();
480
481	$this->start_controls_section(
482	'section_social_hover',
483	[
484	'label' => __( 'Icon Hover', 'elementor' ),
485	'tab' => Controls_Manager::TAB_STYLE,
486	]
487	);
488
489	$this->add_control(
490	'hover_primary_color',
491	[
492	'label' => __( 'Primary Color', 'elementor' ),
493	'type' => Controls_Manager::COLOR,
494	'default' => '',
495	'condition' => [
496	'icon_color' => 'custom',
497	],
498	'selectors' => [
499	'{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};',
500	],
501	]
502	);
503
504	$this->add_control(
505	'hover_secondary_color',
506	[
507	'label' => __( 'Secondary Color', 'elementor' ),
508	'type' => Controls_Manager::COLOR,
509	'default' => '',
510	'condition' => [
511	'icon_color' => 'custom',
512	],
513	'selectors' => [
514	'{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};',
515	'{{WRAPPER}} .elementor-social-icon:hover svg' => 'fill: {{VALUE}};',
516	],
517	]
518	);
519
520	$this->add_control(
521	'hover_border_color',
522	[
523	'label' => __( 'Border Color', 'elementor' ),
524	'type' => Controls_Manager::COLOR,
525	'default' => '',
526	'condition' => [
527	'image_border_border!' => '',
528	],
529	'selectors' => [
530	'{{WRAPPER}} .elementor-social-icon:hover' => 'border-color: {{VALUE}};',
531	],
532	]
533	);
534
535	$this->add_control(
536	'hover_animation',
537	[
538	'label' => __( 'Hover Animation', 'elementor' ),
539	'type' => Controls_Manager::HOVER_ANIMATION,
540	]
541	);
542
543	$this->end_controls_section();
544
545	}
546
547	/**
548	* Render social icons widget output on the frontend.
549	*
550	* Written in PHP and used to generate the final HTML.
551	*
552	* @since 1.0.0
553	* @access protected
554	*/
555	protected function render() {
556	$settings = $this->get_settings_for_display();
557	$fallback_defaults = [
558	'fa fa-facebook',
559	'fa fa-twitter',
560	'fa fa-google-plus',
561	];
562
563	$class_animation = '';
564
565	if ( ! empty( $settings['hover_animation'] ) ) {
566	$class_animation = ' elementor-animation-' . $settings['hover_animation'];
567	}
568
569	$migration_allowed = Icons_Manager::is_migration_allowed();
570
571	?>
572	<div class="elementor-social-icons-wrapper elementor-grid">
573	<?php
574	foreach ( $settings['social_icon_list'] as $index => $item ) {
575	$migrated = isset( $item['__fa4_migrated']['social_icon'] );
576	$is_new = empty( $item['social'] ) && $migration_allowed;
577	$social = '';
578
579	// add old default
580	if ( empty( $item['social'] ) && ! $migration_allowed ) {
581	$item['social'] = isset( $fallback_defaults[ $index ] ) ? $fallback_defaults[ $index ] : 'fa fa-wordpress';
582	}
583
584	if ( ! empty( $item['social'] ) ) {
585	$social = str_replace( 'fa fa-', '', $item['social'] );
586	}
587
588	if ( ( $is_new \|\| $migrated ) && 'svg' !== $item['social_icon']['library'] ) {
589	$social = explode( ' ', $item['social_icon']['value'], 2 );
590	if ( empty( $social[1] ) ) {
591	$social = '';
592	} else {
593	$social = str_replace( 'fa-', '', $social[1] );
594	}
595	}
596	if ( 'svg' === $item['social_icon']['library'] ) {
597	$social = get_post_meta( $item['social_icon']['value']['id'], '_wp_attachment_image_alt', true );
598	}
599
600	$link_key = 'link_' . $index;
601
602	$this->add_render_attribute( $link_key, 'class', [
603	'elementor-icon',
604	'elementor-social-icon',
605	'elementor-social-icon-' . $social . $class_animation,
606	'elementor-repeater-item-' . $item['_id'],
607	] );
608
609	$this->add_link_attributes( $link_key, $item['link'] );
610
611	?>
612	<div class="elementor-grid-item">
613	<a <?php echo $this->get_render_attribute_string( $link_key ); ?>>
614	<span class="elementor-screen-only"><?php echo ucwords( $social ); ?></span>
615	<?php
616	if ( $is_new \|\| $migrated ) {
617	Icons_Manager::render_icon( $item['social_icon'] );
618	} else { ?>
619	<i class="<?php echo esc_attr( $item['social'] ); ?>"></i>
620	<?php } ?>
621	</a>
622	</div>
623	<?php } ?>
624	</div>
625	<?php
626	}
627
628	/**
629	* Render social icons widget output in the editor.
630	*
631	* Written as a Backbone JavaScript template and used to generate the live preview.
632	*
633	* @since 2.9.0
634	* @access protected
635	*/
636	protected function content_template() {
637	?>
638	<# var iconsHTML = {}; #>
639	<div class="elementor-social-icons-wrapper elementor-grid">
640	<# _.each( settings.social_icon_list, function( item, index ) {
641	var link = item.link ? item.link.url : '',
642	migrated = elementor.helpers.isIconMigrated( item, 'social_icon' );
643	social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
644	#>
645	<div class="elementor-grid-item">
646	<a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
647	<span class="elementor-screen-only">{{{ social }}}</span>
648	<#
649	iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );
650	if ( ( ! item.social \|\| migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
651	{{{ iconsHTML[ index ].value }}}
652	<# } else { #>
653	<i class="{{ item.social }}"></i>
654	<# }
655	#>
656	</a>
657	</div>
658	<# } ); #>
659	</div>
660	<?php
661	}
662	}
663