PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.0
Elementor Website Builder – more than just a page builder v3.0.0
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
elementor / includes / widgets / social-icons.php

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

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