balmet.com

social-icons.php (15745B)

---

 <?php
 namespace Elementor;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
 
 /**
  * Elementor social icons widget.
  *
  * Elementor widget that displays icons to social pages like Facebook and Twitter.
  *
  * @since 1.0.0
  */
 class Widget_Social_Icons extends Widget_Base {
 
 	/**
 	 * Get widget name.
 	 *
 	 * Retrieve social icons widget name.
 	 *
 	 * @since 1.0.0
 	 * @access public
 	 *
 	 * @return string Widget name.
 	 */
 	public function get_name() {
 		return 'social-icons';
 	}
 
 	/**
 	 * Get widget title.
 	 *
 	 * Retrieve social icons widget title.
 	 *
 	 * @since 1.0.0
 	 * @access public
 	 *
 	 * @return string Widget title.
 	 */
 	public function get_title() {
 		return esc_html__( 'Social Icons', 'elementor' );
 	}
 
 	/**
 	 * Get widget icon.
 	 *
 	 * Retrieve social icons widget icon.
 	 *
 	 * @since 1.0.0
 	 * @access public
 	 *
 	 * @return string Widget icon.
 	 */
 	public function get_icon() {
 		return 'eicon-social-icons';
 	}
 
 	/**
 	 * Get widget keywords.
 	 *
 	 * Retrieve the list of keywords the widget belongs to.
 	 *
 	 * @since 2.1.0
 	 * @access public
 	 *
 	 * @return array Widget keywords.
 	 */
 	public function get_keywords() {
 		return [ 'social', 'icon', 'link' ];
 	}
 
 	/**
 	 * Register social icons widget controls.
 	 *
 	 * Adds different input fields to allow the user to change and customize the widget settings.
 	 *
 	 * @since 3.1.0
 	 * @access protected
 	 */
 	protected function register_controls() {
 		$this->start_controls_section(
 			'section_social_icon',
 			[
 				'label' => esc_html__( 'Social Icons', 'elementor' ),
 			]
 		);
 
 		$repeater = new Repeater();
 
 		$repeater->add_control(
 			'social_icon',
 			[
 				'label' => esc_html__( 'Icon', 'elementor' ),
 				'type' => Controls_Manager::ICONS,
 				'fa4compatibility' => 'social',
 				'default' => [
 					'value' => 'fab fa-wordpress',
 					'library' => 'fa-brands',
 				],
 				'recommended' => [
 					'fa-brands' => [
 						'android',
 						'apple',
 						'behance',
 						'bitbucket',
 						'codepen',
 						'delicious',
 						'deviantart',
 						'digg',
 						'dribbble',
 						'elementor',
 						'facebook',
 						'flickr',
 						'foursquare',
 						'free-code-camp',
 						'github',
 						'gitlab',
 						'globe',
 						'houzz',
 						'instagram',
 						'jsfiddle',
 						'linkedin',
 						'medium',
 						'meetup',
 						'mix',
 						'mixcloud',
 						'odnoklassniki',
 						'pinterest',
 						'product-hunt',
 						'reddit',
 						'shopping-cart',
 						'skype',
 						'slideshare',
 						'snapchat',
 						'soundcloud',
 						'spotify',
 						'stack-overflow',
 						'steam',
 						'telegram',
 						'thumb-tack',
 						'tripadvisor',
 						'tumblr',
 						'twitch',
 						'twitter',
 						'viber',
 						'vimeo',
 						'vk',
 						'weibo',
 						'weixin',
 						'whatsapp',
 						'wordpress',
 						'xing',
 						'yelp',
 						'youtube',
 						'500px',
 					],
 					'fa-solid' => [
 						'envelope',
 						'link',
 						'rss',
 					],
 				],
 			]
 		);
 
 		$repeater->add_control(
 			'link',
 			[
 				'label' => esc_html__( 'Link', 'elementor' ),
 				'type' => Controls_Manager::URL,
 				'default' => [
 					'is_external' => 'true',
 				],
 				'dynamic' => [
 					'active' => true,
 				],
 				'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
 			]
 		);
 
 		$repeater->add_control(
 			'item_icon_color',
 			[
 				'label' => esc_html__( 'Color', 'elementor' ),
 				'type' => Controls_Manager::SELECT,
 				'default' => 'default',
 				'options' => [
 					'default' => esc_html__( 'Official Color', 'elementor' ),
 					'custom' => esc_html__( 'Custom', 'elementor' ),
 				],
 			]
 		);
 
 		$repeater->add_control(
 			'item_icon_primary_color',
 			[
 				'label' => esc_html__( 'Primary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'condition' => [
 					'item_icon_color' => 'custom',
 				],
 				'selectors' => [
 					'{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon' => 'background-color: {{VALUE}};',
 				],
 			]
 		);
 
 		$repeater->add_control(
 			'item_icon_secondary_color',
 			[
 				'label' => esc_html__( 'Secondary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'condition' => [
 					'item_icon_color' => 'custom',
 				],
 				'selectors' => [
 					'{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon i' => 'color: {{VALUE}};',
 					'{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon svg' => 'fill: {{VALUE}};',
 				],
 			]
 		);
 
 		$this->add_control(
 			'social_icon_list',
 			[
 				'label' => esc_html__( 'Social Icons', 'elementor' ),
 				'type' => Controls_Manager::REPEATER,
 				'fields' => $repeater->get_controls(),
 				'default' => [
 					[
 						'social_icon' => [
 							'value' => 'fab fa-facebook',
 							'library' => 'fa-brands',
 						],
 					],
 					[
 						'social_icon' => [
 							'value' => 'fab fa-twitter',
 							'library' => 'fa-brands',
 						],
 					],
 					[
 						'social_icon' => [
 							'value' => 'fab fa-youtube',
 							'library' => 'fa-brands',
 						],
 					],
 				],
 				'title_field' => '<# var migrated = "undefined" !== typeof __fa4_migrated, social = ( "undefined" === typeof social ) ? false : social; #>{{{ elementor.helpers.getSocialNetworkNameFromIcon( social_icon, social, true, migrated, true ) }}}',
 			]
 		);
 
 		$this->add_control(
 			'shape',
 			[
 				'label' => esc_html__( 'Shape', 'elementor' ),
 				'type' => Controls_Manager::SELECT,
 				'default' => 'rounded',
 				'options' => [
 					'rounded' => esc_html__( 'Rounded', 'elementor' ),
 					'square' => esc_html__( 'Square', 'elementor' ),
 					'circle' => esc_html__( 'Circle', 'elementor' ),
 				],
 				'prefix_class' => 'elementor-shape-',
 			]
 		);
 
 		$this->add_responsive_control(
 			'columns',
 			[
 				'label' => esc_html__( 'Columns', 'elementor' ),
 				'type' => Controls_Manager::SELECT,
 				'default' => '0',
 				'options' => [
 					'0' => esc_html__( 'Auto', 'elementor' ),
 					'1' => '1',
 					'2' => '2',
 					'3' => '3',
 					'4' => '4',
 					'5' => '5',
 					'6' => '6',
 				],
 				'prefix_class' => 'elementor-grid%s-',
 				'selectors' => [
 					'{{WRAPPER}}' => '--grid-template-columns: repeat({{VALUE}}, auto);',
 				],
 			]
 		);
 
 		$start = is_rtl() ? 'end' : 'start';
 		$end = is_rtl() ? 'start' : 'end';
 
 		$this->add_responsive_control(
 			'align',
 			[
 				'label' => esc_html__( 'Alignment', 'elementor' ),
 				'type' => Controls_Manager::CHOOSE,
 				'options' => [
 					'left'    => [
 						'title' => esc_html__( 'Left', 'elementor' ),
 						'icon' => 'eicon-text-align-left',
 					],
 					'center' => [
 						'title' => esc_html__( 'Center', 'elementor' ),
 						'icon' => 'eicon-text-align-center',
 					],
 					'right' => [
 						'title' => esc_html__( 'Right', 'elementor' ),
 						'icon' => 'eicon-text-align-right',
 					],
 				],
 				'prefix_class' => 'e-grid-align%s-',
 				'default' => 'center',
 				'selectors' => [
 					'{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}}',
 				],
 			]
 		);
 
 		$this->add_control(
 			'view',
 			[
 				'label' => esc_html__( 'View', 'elementor' ),
 				'type' => Controls_Manager::HIDDEN,
 				'default' => 'traditional',
 			]
 		);
 
 		$this->end_controls_section();
 
 		$this->start_controls_section(
 			'section_social_style',
 			[
 				'label' => esc_html__( 'Icon', 'elementor' ),
 				'tab' => Controls_Manager::TAB_STYLE,
 			]
 		);
 
 		$this->add_control(
 			'icon_color',
 			[
 				'label' => esc_html__( 'Color', 'elementor' ),
 				'type' => Controls_Manager::SELECT,
 				'default' => 'default',
 				'options' => [
 					'default' => esc_html__( 'Official Color', 'elementor' ),
 					'custom' => esc_html__( 'Custom', 'elementor' ),
 				],
 			]
 		);
 
 		$this->add_control(
 			'icon_primary_color',
 			[
 				'label' => esc_html__( 'Primary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'condition' => [
 					'icon_color' => 'custom',
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon' => 'background-color: {{VALUE}};',
 				],
 			]
 		);
 
 		$this->add_control(
 			'icon_secondary_color',
 			[
 				'label' => esc_html__( 'Secondary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'condition' => [
 					'icon_color' => 'custom',
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon i' => 'color: {{VALUE}};',
 					'{{WRAPPER}} .elementor-social-icon svg' => 'fill: {{VALUE}};',
 				],
 			]
 		);
 
 		$this->add_responsive_control(
 			'icon_size',
 			[
 				'label' => esc_html__( 'Size', 'elementor' ),
 				'type' => Controls_Manager::SLIDER,
 				'range' => [
 					'px' => [
 						'min' => 6,
 						'max' => 300,
 					],
 				],
 				'selectors' => [
 					'{{WRAPPER}}' => '--icon-size: {{SIZE}}{{UNIT}}',
 				],
 			]
 		);
 
 		$this->add_responsive_control(
 			'icon_padding',
 			[
 				'label' => esc_html__( 'Padding', 'elementor' ),
 				'type' => Controls_Manager::SLIDER,
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon' => '--icon-padding: {{SIZE}}{{UNIT}}',
 				],
 				'default' => [
 					'unit' => 'em',
 				],
 				'tablet_default' => [
 					'unit' => 'em',
 				],
 				'mobile_default' => [
 					'unit' => 'em',
 				],
 				'range' => [
 					'em' => [
 						'min' => 0,
 						'max' => 5,
 					],
 				],
 			]
 		);
 
 		$this->add_responsive_control(
 			'icon_spacing',
 			[
 				'label' => esc_html__( 'Spacing', 'elementor' ),
 				'type' => Controls_Manager::SLIDER,
 				'range' => [
 					'px' => [
 						'min' => 0,
 						'max' => 100,
 					],
 				],
 				'default' => [
 					'size' => 5,
 				],
 				'selectors' => [
 					'{{WRAPPER}}' => '--grid-column-gap: {{SIZE}}{{UNIT}}',
 				],
 			]
 		);
 
 		$this->add_responsive_control(
 			'row_gap',
 			[
 				'label' => esc_html__( 'Rows Gap', 'elementor' ),
 				'type' => Controls_Manager::SLIDER,
 				'default' => [
 					'size' => 0,
 				],
 				'selectors' => [
 					'{{WRAPPER}}' => '--grid-row-gap: {{SIZE}}{{UNIT}}',
 				],
 			]
 		);
 
 		$this->add_group_control(
 			Group_Control_Border::get_type(),
 			[
 				'name' => 'image_border', // We know this mistake - TODO: 'icon_border' (for hover control condition also)
 				'selector' => '{{WRAPPER}} .elementor-social-icon',
 				'separator' => 'before',
 			]
 		);
 
 		$this->add_control(
 			'border_radius',
 			[
 				'label' => esc_html__( 'Border Radius', 'elementor' ),
 				'type' => Controls_Manager::DIMENSIONS,
 				'size_units' => [ 'px', '%' ],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
 				],
 			]
 		);
 
 		$this->end_controls_section();
 
 		$this->start_controls_section(
 			'section_social_hover',
 			[
 				'label' => esc_html__( 'Icon Hover', 'elementor' ),
 				'tab' => Controls_Manager::TAB_STYLE,
 			]
 		);
 
 		$this->add_control(
 			'hover_primary_color',
 			[
 				'label' => esc_html__( 'Primary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'default' => '',
 				'condition' => [
 					'icon_color' => 'custom',
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};',
 				],
 			]
 		);
 
 		$this->add_control(
 			'hover_secondary_color',
 			[
 				'label' => esc_html__( 'Secondary Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'default' => '',
 				'condition' => [
 					'icon_color' => 'custom',
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};',
 					'{{WRAPPER}} .elementor-social-icon:hover svg' => 'fill: {{VALUE}};',
 				],
 			]
 		);
 
 		$this->add_control(
 			'hover_border_color',
 			[
 				'label' => esc_html__( 'Border Color', 'elementor' ),
 				'type' => Controls_Manager::COLOR,
 				'default' => '',
 				'condition' => [
 					'image_border_border!' => '',
 				],
 				'selectors' => [
 					'{{WRAPPER}} .elementor-social-icon:hover' => 'border-color: {{VALUE}};',
 				],
 			]
 		);
 
 		$this->add_control(
 			'hover_animation',
 			[
 				'label' => esc_html__( 'Hover Animation', 'elementor' ),
 				'type' => Controls_Manager::HOVER_ANIMATION,
 			]
 		);
 
 		$this->end_controls_section();
 
 	}
 
 	/**
 	 * Render social icons widget output on the frontend.
 	 *
 	 * Written in PHP and used to generate the final HTML.
 	 *
 	 * @since 1.0.0
 	 * @access protected
 	 */
 	protected function render() {
 		$settings = $this->get_settings_for_display();
 		$fallback_defaults = [
 			'fa fa-facebook',
 			'fa fa-twitter',
 			'fa fa-google-plus',
 		];
 
 		$class_animation = '';
 
 		if ( ! empty( $settings['hover_animation'] ) ) {
 			$class_animation = ' elementor-animation-' . $settings['hover_animation'];
 		}
 
 		$migration_allowed = Icons_Manager::is_migration_allowed();
 
 		?>
 		<div class="elementor-social-icons-wrapper elementor-grid">
 			<?php
 			foreach ( $settings['social_icon_list'] as $index => $item ) {
 				$migrated = isset( $item['__fa4_migrated']['social_icon'] );
 				$is_new = empty( $item['social'] ) && $migration_allowed;
 				$social = '';
 
 				// add old default
 				if ( empty( $item['social'] ) && ! $migration_allowed ) {
 					$item['social'] = isset( $fallback_defaults[ $index ] ) ? $fallback_defaults[ $index ] : 'fa fa-wordpress';
 				}
 
 				if ( ! empty( $item['social'] ) ) {
 					$social = str_replace( 'fa fa-', '', $item['social'] );
 				}
 
 				if ( ( $is_new || $migrated ) && 'svg' !== $item['social_icon']['library'] ) {
 					$social = explode( ' ', $item['social_icon']['value'], 2 );
 					if ( empty( $social[1] ) ) {
 						$social = '';
 					} else {
 						$social = str_replace( 'fa-', '', $social[1] );
 					}
 				}
 				if ( 'svg' === $item['social_icon']['library'] ) {
 					$social = get_post_meta( $item['social_icon']['value']['id'], '_wp_attachment_image_alt', true );
 				}
 
 				$link_key = 'link_' . $index;
 
 				$this->add_render_attribute( $link_key, 'class', [
 					'elementor-icon',
 					'elementor-social-icon',
 					'elementor-social-icon-' . $social . $class_animation,
 					'elementor-repeater-item-' . $item['_id'],
 				] );
 
 				$this->add_link_attributes( $link_key, $item['link'] );
 
 				?>
 				<span class="elementor-grid-item">
 					<a <?php $this->print_render_attribute_string( $link_key ); ?>>
 						<span class="elementor-screen-only"><?php echo esc_html( ucwords( $social ) ); ?></span>
 						<?php
 						if ( $is_new || $migrated ) {
 							Icons_Manager::render_icon( $item['social_icon'] );
 						} else { ?>
 							<i class="<?php echo esc_attr( $item['social'] ); ?>"></i>
 						<?php } ?>
 					</a>
 				</span>
 			<?php } ?>
 		</div>
 		<?php
 	}
 
 	/**
 	 * Render social icons widget output in the editor.
 	 *
 	 * Written as a Backbone JavaScript template and used to generate the live preview.
 	 *
 	 * @since 2.9.0
 	 * @access protected
 	 */
 	protected function content_template() {
 		?>
 		<# var iconsHTML = {}; #>
 		<div class="elementor-social-icons-wrapper elementor-grid">
 			<# _.each( settings.social_icon_list, function( item, index ) {
 				var link = item.link ? item.link.url : '',
 					migrated = elementor.helpers.isIconMigrated( item, 'social_icon' );
 					social = elementor.helpers.getSocialNetworkNameFromIcon( item.social_icon, item.social, false, migrated );
 				#>
 				<span class="elementor-grid-item">
 					<a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }} elementor-repeater-item-{{item._id}}" href="{{ link }}">
 						<span class="elementor-screen-only">{{{ social }}}</span>
 						<#
 							iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.social_icon, {}, 'i', 'object' );
 							if ( ( ! item.social || migrated ) && iconsHTML[ index ] && iconsHTML[ index ].rendered ) { #>
 								{{{ iconsHTML[ index ].value }}}
 							<# } else { #>
 								<i class="{{ item.social }}"></i>
 							<# }
 						#>
 					</a>
 				</span>
 			<# } ); #>
 		</div>
 		<?php
 	}
 }