addControl( 'social_icon', [ 'label' => __('Icon'), 'type' => ControlsManager::ICONS, 'fa4compatibility' => 'social', 'default' => [ 'value' => 'fab fa-instagram', 'library' => 'fa-brands', ], 'recommended' => [ 'fa-brands' => [ 'android', 'apple', 'behance', 'bitbucket', 'codepen', 'delicious', 'deviantart', 'digg', 'dribbble', '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', 'tiktok', 'tripadvisor', 'tumblr', 'twitch', 'twitter', 'viber', 'vimeo', 'vk', 'weibo', 'weixin', 'whatsapp', 'xing', 'yelp', 'youtube', '500px', ], 'fa-solid' => [ 'envelope', 'link', 'rss', ], ], ] ); $repeater->addControl( 'link', [ 'label' => __('Link'), 'type' => ControlsManager::URL, 'default' => [ 'is_external' => 'true', ], 'dynamic' => [ 'active' => true, ], 'placeholder' => __('https://your-link.com'), ] ); $repeater->addControl( 'item_icon_color', [ 'label' => __('Color'), 'type' => ControlsManager::SELECT, 'default' => 'default', 'options' => [ 'default' => __('Official Color'), 'custom' => __('Custom'), ], ] ); $repeater->addControl( 'item_icon_primary_color', [ 'label' => __('Primary Color'), 'type' => ControlsManager::COLOR, 'condition' => [ 'item_icon_color' => 'custom', ], 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}}.elementor-social-icon' => 'background-color: {{VALUE}};', ], ] ); $repeater->addControl( 'item_icon_secondary_color', [ 'label' => __('Secondary Color'), 'type' => ControlsManager::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}};', ], ] ); return $repeater->getControls(); } /** * Register social icons widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 */ protected function _registerControls() { $this->startControlsSection( 'section_social_icon', [ 'label' => __('Social Icons'), ] ); $this->addControl( 'social_icon_list', [ 'type' => ControlsManager::REPEATER, 'fields' => $this->getSocialIconListControls(), '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->addControl( 'shape', [ 'label' => __('Shape'), 'type' => ControlsManager::SELECT, 'default' => 'rounded', 'options' => [ 'rounded' => __('Rounded'), 'square' => __('Square'), 'circle' => __('Circle'), ], 'prefix_class' => 'elementor-shape-', ] ); $this->addResponsiveControl( 'align', [ 'label' => __('Alignment'), 'type' => ControlsManager::CHOOSE, 'options' => [ 'left' => [ 'title' => __('Left'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => __('Center'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => __('Right'), 'icon' => 'eicon-text-align-right', ], ], 'default' => 'center', 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}};', ], ] ); $this->addControl( 'view', [ 'label' => __('View'), 'type' => ControlsManager::HIDDEN, 'default' => 'traditional', ] ); $this->endControlsSection(); $this->startControlsSection( 'section_social_style', [ 'label' => __('Icon'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'icon_color', [ 'label' => __('Color'), 'type' => ControlsManager::SELECT, 'default' => 'default', 'options' => [ 'default' => __('Official Color'), 'custom' => __('Custom'), ], ] ); $this->addControl( 'icon_primary_color', [ 'label' => __('Primary Color'), 'type' => ControlsManager::COLOR, 'condition' => [ 'icon_color' => 'custom', ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon' => 'background-color: {{VALUE}};', ], ] ); $this->addControl( 'icon_secondary_color', [ 'label' => __('Secondary Color'), 'type' => ControlsManager::COLOR, 'condition' => [ 'icon_color' => 'custom', ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon i' => 'color: {{VALUE}};', '{{WRAPPER}} .elementor-social-icon svg' => 'fill: {{VALUE}};', ], ] ); $this->addResponsiveControl( 'icon_size', [ 'label' => __('Size'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'min' => 6, 'max' => 300, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->addResponsiveControl( 'icon_padding', [ 'label' => __('Padding'), 'type' => ControlsManager::SLIDER, 'selectors' => [ '{{WRAPPER}} .elementor-social-icon' => 'padding: {{SIZE}}{{UNIT}};', ], 'default' => [ 'unit' => 'em', ], 'tablet_default' => [ 'unit' => 'em', ], 'mobile_default' => [ 'unit' => 'em', ], 'range' => [ 'em' => [ 'min' => 0, 'max' => 5, ], ], ] ); $icon_spacing = is_rtl() ? 'margin-left: {{SIZE}}{{UNIT}};' : 'margin-right: {{SIZE}}{{UNIT}};'; $this->addResponsiveControl( 'icon_spacing', [ 'label' => __('Spacing'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon:not(:last-child)' => $icon_spacing, ], ] ); $this->addGroupControl( GroupControlBorder::getType(), [ 'name' => 'image_border', // We know this mistake - TODO: 'icon_border' (for hover control condition also) 'selector' => '{{WRAPPER}} .elementor-social-icon', 'separator' => 'before', ] ); $this->addControl( 'border_radius', [ 'label' => __('Border Radius'), 'type' => ControlsManager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => [ '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_social_hover', [ 'label' => __('Icon Hover'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'hover_primary_color', [ 'label' => __('Primary Color'), 'type' => ControlsManager::COLOR, 'condition' => [ 'icon_color' => 'custom', ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};', ], ] ); $this->addControl( 'hover_secondary_color', [ 'label' => __('Secondary Color'), 'type' => ControlsManager::COLOR, 'condition' => [ 'icon_color' => 'custom', ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};', '{{WRAPPER}} .elementor-social-icon:hover svg' => 'fill: {{VALUE}};', ], ] ); $this->addControl( 'hover_border_color', [ 'label' => __('Border Color'), 'type' => ControlsManager::COLOR, 'condition' => [ 'image_border_border!' => '', ], 'selectors' => [ '{{WRAPPER}} .elementor-social-icon:hover' => 'border-color: {{VALUE}};', ], ] ); $this->addControl( 'hover_animation', [ 'label' => __('Hover Animation'), 'type' => ControlsManager::HOVER_ANIMATION, ] ); $this->endControlsSection(); } protected function getSocialBrand(array &$item) { $social = ''; if (!empty($item['social']) && !isset($item['__fa4_migrated']['social'])) { $social = str_replace('fa fa-', '', $item['social']); } elseif (!empty($item['social_icon']['value'])) { if ('svg' !== $item['social_icon']['library']) { $social = explode(' ', $item['social_icon']['value'], 2); $social = !empty($social[1]) ? str_replace(['fa-', '-'], ['', ' '], $social[1]) : ''; } elseif (!empty($item['social_icon']['value']['url'])) { $social = basename(strtolower($item['social_icon']['value']['url']), '.svg'); } } return $social; } /** * Render social icons widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 */ protected function render() { $settings = $this->getSettingsForDisplay(); $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']; } ?>
$item) { $social = $this->getSocialBrand($item); $this->addRenderAttribute("link_$index", 'class', [ 'elementor-icon', 'elementor-social-icon', 'elementor-social-icon-' . str_replace(' ', '-', $social) . $class_animation, 'elementor-repeater-item-' . $item['_id'], ]); $this->addLinkAttributes("link_$index", $item['link']); ?> printRenderAttributeString("link_$index"); ?>> 'social_icon']); ?>
<# _.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 ); #> {{{ social }}} {{{ elementor.helpers.getBcIcon(view, item, 'social', {selected: 'social_icon'}) }}} <# } ); #>