array( 'label' => 'Facebook', 'icon' => 'fab fa-facebook-f', 'color' => '#1877F2' ),
'instagram_url' => array( 'label' => 'Instagram', 'icon' => 'fab fa-instagram', 'color' => '#E4405F' ),
'youtube_url' => array( 'label' => 'YouTube', 'icon' => 'fab fa-youtube', 'color' => '#FF0000' ),
'twitter_url' => array( 'label' => 'Twitter', 'icon' => 'fab fa-x-twitter', 'color' => '#000000' ),
'linkedin_url' => array( 'label' => 'LinkedIn', 'icon' => 'fab fa-linkedin-in', 'color' => '#0A66C2' ),
'tiktok_url' => array( 'label' => 'TikTok', 'icon' => 'fab fa-tiktok', 'color' => '#000000' ),
'yelp_url' => array( 'label' => 'Yelp', 'icon' => 'fab fa-yelp', 'color' => '#D32323' ),
'google_business_url' => array( 'label' => 'Google', 'icon' => 'fab fa-google', 'color' => '#4285F4' ),
'pinterest_url' => array( 'label' => 'Pinterest', 'icon' => 'fab fa-pinterest-p', 'color' => '#E60023' ),
'bbb_url' => array( 'label' => 'BBB', 'icon' => 'fas fa-shield-alt', 'color' => '#006CB7' ),
'nextdoor_url' => array( 'label' => 'Nextdoor', 'icon' => 'fas fa-home', 'color' => '#8ED500' ),
'houzz_url' => array( 'label' => 'Houzz', 'icon' => 'fab fa-houzz', 'color' => '#4DBC15' ),
'angi_url' => array( 'label' => 'Angi', 'icon' => 'fas fa-tools', 'color' => '#FF6153' ),
'thumbtack_url' => array( 'label' => 'Thumbtack', 'icon' => 'fas fa-thumbtack', 'color' => '#009FD9' ),
'homeadvisor_url' => array( 'label' => 'HomeAdvisor', 'icon' => 'fas fa-home', 'color' => '#EF6C00' ),
);
$available = array();
if ( $vars ) {
foreach ( $all_platforms as $key => $data ) {
if ( ! empty( $vars[ $key ] ) ) {
$available[ $key ] = array_merge( $data, array( 'url' => $vars[ $key ] ) );
}
}
}
return $available;
}
/**
* Register widget controls.
*/
protected function register_controls() {
// Content Section
$this->start_controls_section(
'content_section',
array(
'label' => __( 'Content', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
)
);
// Show which platforms are available
$platforms = $this->get_available_platforms();
if ( ! empty( $platforms ) ) {
$platform_names = array_map( function( $p ) { return $p['label']; }, $platforms );
$this->add_control(
'info_notice',
array(
'type' => \Elementor\Controls_Manager::RAW_HTML,
'raw' => sprintf(
__( 'Available platforms: %s
Configure more in the A1 Tools dashboard.', 'a1-tools' ),
implode( ', ', $platform_names )
),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-success',
)
);
} else {
$this->add_control(
'info_notice',
array(
'type' => \Elementor\Controls_Manager::RAW_HTML,
'raw' => __( 'No social media URLs configured.
Add them in the A1 Tools dashboard under Site Variables.', 'a1-tools' ),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
)
);
}
$this->end_controls_section();
// Style Section
$this->start_controls_section(
'style_section',
array(
'label' => __( 'Style', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'icon_style',
array(
'label' => __( 'Style', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'default',
'options' => array(
'default' => __( 'Official Colors', 'a1-tools' ),
'outline' => __( 'Outline', 'a1-tools' ),
'minimal' => __( 'Minimal (Icons Only)', 'a1-tools' ),
'light' => __( 'Light Background', 'a1-tools' ),
'dark' => __( 'Dark Background', 'a1-tools' ),
'custom' => __( 'Custom Colors', 'a1-tools' ),
),
)
);
$this->add_control(
'shape',
array(
'label' => __( 'Shape', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'rounded',
'options' => array(
'rounded' => __( 'Rounded', 'a1-tools' ),
'circle' => __( 'Circle', 'a1-tools' ),
'square' => __( 'Square', 'a1-tools' ),
),
)
);
$this->add_control(
'size',
array(
'label' => __( 'Button Size', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'min' => 20,
'max' => 100,
'step' => 1,
),
),
'default' => array(
'unit' => 'px',
'size' => 40,
),
)
);
$this->add_control(
'icon_size',
array(
'label' => __( 'Icon Size', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'min' => 10,
'max' => 50,
'step' => 1,
),
),
'default' => array(
'unit' => 'px',
'size' => 18,
),
)
);
$this->add_control(
'spacing',
array(
'label' => __( 'Spacing', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'min' => 0,
'max' => 30,
'step' => 1,
),
),
'default' => array(
'unit' => 'px',
'size' => 8,
),
)
);
$this->add_responsive_control(
'alignment',
array(
'label' => __( 'Alignment', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'a1-tools' ),
'icon' => 'eicon-text-align-left',
),
'center' => array(
'title' => __( 'Center', 'a1-tools' ),
'icon' => 'eicon-text-align-center',
),
'right' => array(
'title' => __( 'Right', 'a1-tools' ),
'icon' => 'eicon-text-align-right',
),
),
'default' => 'left',
)
);
// Custom Colors Section (only shown when style is "custom")
$this->add_control(
'custom_icon_color',
array(
'label' => __( 'Icon Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#ffffff',
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->add_control(
'custom_bg_color',
array(
'label' => __( 'Background Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#F7941E',
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->add_control(
'custom_border_color',
array(
'label' => __( 'Border Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '',
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->add_control(
'custom_border_width',
array(
'label' => __( 'Border Width', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'min' => 0,
'max' => 10,
'step' => 1,
),
),
'default' => array(
'unit' => 'px',
'size' => 0,
),
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->add_control(
'custom_hover_icon_color',
array(
'label' => __( 'Hover Icon Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '',
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->add_control(
'custom_hover_bg_color',
array(
'label' => __( 'Hover Background Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '',
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->add_control(
'custom_hover_border_color',
array(
'label' => __( 'Hover Border Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '',
'condition' => array(
'icon_style' => 'custom',
),
)
);
$this->end_controls_section();
// Hover Effects Section
$this->start_controls_section(
'hover_section',
array(
'label' => __( 'Hover Effects', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'hover_effect',
array(
'label' => __( 'Hover Effect', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'scale',
'options' => array(
'none' => __( 'None', 'a1-tools' ),
'scale' => __( 'Scale Up', 'a1-tools' ),
'lift' => __( 'Lift (Shadow)', 'a1-tools' ),
'rotate' => __( 'Rotate', 'a1-tools' ),
'pulse' => __( 'Pulse', 'a1-tools' ),
),
)
);
$this->end_controls_section();
}
/**
* Render widget output on the frontend.
*/
protected function render() {
$settings = $this->get_settings_for_display();
$platforms = $this->get_available_platforms();
if ( empty( $platforms ) ) {
return;
}
// Get settings
$style = ! empty( $settings['icon_style'] ) ? $settings['icon_style'] : 'default';
$shape = ! empty( $settings['shape'] ) ? $settings['shape'] : 'rounded';
$size = ! empty( $settings['size']['size'] ) ? (int) $settings['size']['size'] : 40;
$icon_size = ! empty( $settings['icon_size']['size'] ) ? (int) $settings['icon_size']['size'] : 18;
$spacing = isset( $settings['spacing']['size'] ) ? (int) $settings['spacing']['size'] : 8;
$alignment = ! empty( $settings['alignment'] ) ? $settings['alignment'] : 'left';
$hover_effect = ! empty( $settings['hover_effect'] ) ? $settings['hover_effect'] : 'scale';
// Custom style colors - these can be hex colors OR CSS variables from Elementor global colors
$custom_icon_color = ! empty( $settings['custom_icon_color'] ) ? $settings['custom_icon_color'] : '#ffffff';
$custom_bg_color = ! empty( $settings['custom_bg_color'] ) ? $settings['custom_bg_color'] : '#F7941E';
$custom_border_color = ! empty( $settings['custom_border_color'] ) ? $settings['custom_border_color'] : '';
$custom_border_width = isset( $settings['custom_border_width']['size'] ) ? (int) $settings['custom_border_width']['size'] : 0;
$custom_hover_icon_color = ! empty( $settings['custom_hover_icon_color'] ) ? $settings['custom_hover_icon_color'] : '';
$custom_hover_bg_color = ! empty( $settings['custom_hover_bg_color'] ) ? $settings['custom_hover_bg_color'] : '';
$custom_hover_border_color = ! empty( $settings['custom_hover_border_color'] ) ? $settings['custom_hover_border_color'] : '';
// Generate unique ID for this widget instance
$widget_id = 'a1tools-elementor-' . $this->get_id();
// Border radius based on shape
$border_radius = '8px';
if ( 'circle' === $shape ) {
$border_radius = '50%';
} elseif ( 'square' === $shape ) {
$border_radius = '0';
}
// Build CSS - use high specificity selectors to ensure styles apply
$selector = '#' . esc_attr( $widget_id );
$css = $selector . ' { text-align:' . esc_attr( $alignment ) . '; line-height: 0; }';
$css .= $selector . ' .a1tools-social-icon { ';
$css .= 'width:' . $size . 'px;';
$css .= 'height:' . $size . 'px;';
$css .= 'margin:0 ' . ( $spacing / 2 ) . 'px ' . $spacing . 'px;';
$css .= 'font-size:' . $icon_size . 'px;';
$css .= 'line-height:' . $size . 'px;';
$css .= 'display:inline-flex;';
$css .= 'align-items:center;';
$css .= 'justify-content:center;';
$css .= 'vertical-align:middle;';
$css .= 'text-decoration:none;';
$css .= 'transition:all 0.3s ease;';
$css .= 'border-radius:' . esc_attr( $border_radius ) . ';';
$css .= 'box-sizing:border-box;';
$css .= '}';
// Icon element styling - ensure it inherits color properly
$css .= $selector . ' .a1tools-social-icon i { ';
$css .= 'display:flex;';
$css .= 'align-items:center;';
$css .= 'justify-content:center;';
$css .= 'width:100%;';
$css .= 'height:100%;';
$css .= 'line-height:1;';
$css .= '}';
// Style-specific CSS
if ( 'custom' === $style ) {
// Apply custom colors with high specificity
$css .= $selector . ' .a1tools-social-icon,';
$css .= $selector . ' .a1tools-social-icon i { ';
$css .= 'color:' . $custom_icon_color . ' !important;';
$css .= '}';
$css .= $selector . ' .a1tools-social-icon { ';
$css .= 'background-color:' . $custom_bg_color . ' !important;';
if ( $custom_border_width > 0 && $custom_border_color ) {
$css .= 'border:' . $custom_border_width . 'px solid ' . $custom_border_color . ' !important;';
} else {
$css .= 'border:none;';
}
$css .= '}';
// Custom hover colors
if ( $custom_hover_icon_color || $custom_hover_bg_color || $custom_hover_border_color ) {
$css .= $selector . ' .a1tools-social-icon:hover,';
$css .= $selector . ' .a1tools-social-icon:hover i { ';
if ( $custom_hover_icon_color ) {
$css .= 'color:' . $custom_hover_icon_color . ' !important;';
}
$css .= '}';
$css .= $selector . ' .a1tools-social-icon:hover { ';
if ( $custom_hover_bg_color ) {
$css .= 'background-color:' . $custom_hover_bg_color . ' !important;';
}
if ( $custom_hover_border_color && $custom_border_width > 0 ) {
$css .= 'border-color:' . $custom_hover_border_color . ' !important;';
}
$css .= '}';
}
} elseif ( 'default' === $style || 'official' === $style ) {
$css .= $selector . ' .a1tools-social-icon,' . $selector . ' .a1tools-social-icon i { color: #fff; }';
} elseif ( 'outline' === $style ) {
$css .= $selector . ' .a1tools-social-icon { background: transparent; border: 2px solid; }';
} elseif ( 'minimal' === $style ) {
$css .= $selector . ' .a1tools-social-icon { background: transparent; }';
} elseif ( 'light' === $style ) {
$css .= $selector . ' .a1tools-social-icon { background: #f5f5f5; }';
} elseif ( 'dark' === $style ) {
$css .= $selector . ' .a1tools-social-icon,' . $selector . ' .a1tools-social-icon i { background: #333; color: #fff; }';
}
// Hover effects
if ( 'scale' === $hover_effect ) {
$css .= $selector . ' .a1tools-social-icon:hover { transform: scale(1.1); }';
} elseif ( 'lift' === $hover_effect ) {
$css .= $selector . ' .a1tools-social-icon:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }';
} elseif ( 'rotate' === $hover_effect ) {
$css .= $selector . ' .a1tools-social-icon:hover { transform: rotate(15deg); }';
} elseif ( 'pulse' === $hover_effect ) {
$css .= $selector . ' .a1tools-social-icon:hover { animation: a1tools-pulse 0.5s ease; }';
$css .= '@keyframes a1tools-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }';
}
// Output inline CSS
echo '';
// Output HTML
echo '';
}
/**
* Render widget output in the editor.
* Uses PHP to get actual available platforms.
*/
protected function content_template() {
// Get available platforms for the editor preview
$platforms = $this->get_available_platforms();
// Convert to JS-friendly format
$js_platforms = array();
foreach ( $platforms as $key => $data ) {
// Extract just the icon class name (e.g., "fa-facebook-f" from "fab fa-facebook-f")
$icon_parts = explode( ' ', $data['icon'] );
$icon_class = end( $icon_parts );
$icon_prefix = count( $icon_parts ) > 1 ? $icon_parts[0] : 'fab';
$js_platforms[] = array(
'icon' => $icon_class,
'prefix' => $icon_prefix,
'color' => $data['color'],
'name' => $data['label'],
);
}
// If no platforms available, show a placeholder
if ( empty( $js_platforms ) ) {
?>
<#
var style = settings.icon_style || 'default';
var shape = settings.shape || 'rounded';
var size = settings.size.size || 40;
var iconSize = settings.icon_size.size || 18;
var spacing = settings.spacing.size || 8;
var alignment = settings.alignment || 'left';
// Custom style colors
var customIconColor = settings.custom_icon_color || '#ffffff';
var customBgColor = settings.custom_bg_color || '#F7941E';
var customBorderColor = settings.custom_border_color || '';
var customBorderWidth = settings.custom_border_width ? settings.custom_border_width.size : 0;
var borderRadius = shape === 'circle' ? '50%' : (shape === 'rounded' ? '8px' : '0');
var justifyContent = alignment === 'center' ? 'center' : (alignment === 'right' ? 'flex-end' : 'flex-start');
// Actual available platforms from the site
var platforms = ;
#>