WordPress.org
Get WordPress

Plugin Directory

Changeset 3457342


Ignore:
Timestamp:
02/09/2026 06:16:13 PM (13 days ago)
Author:
a1tools
Message:

Version 1.4.5 - Elementor widget CSS fix and Custom Colors style option

Location:
a1-tools/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • a1-tools/trunk/a1-tools.php

    r3457328 r3457342  
    44 * Plugin URI:        https://tools.a-1chimney.com
    55 * Description:       Connects your WordPress site to the A1 Tools platform for centralized management of contact information, social media links, and business details.
    6  * Version:           1.4.4
     6 * Version:           1.4.5
    77 * Requires at least: 5.0
    88 * Requires PHP:      7.4
    … …  
    2121
    2222// Plugin constants.
    23 define( 'A1TOOLS_VERSION', '1.4.4' );
     23define( 'A1TOOLS_VERSION', '1.4.5' );
    2424define( 'A1TOOLS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
    2525define( 'A1TOOLS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );

  • a1-tools/trunk/includes/class-a1-tools-elementor-widget.php

    r3453100 r3457342  
    5353
    5454    /**
     55     * Get available social platforms from API.
     56     */
     57    private function get_available_platforms() {
     58        $vars = function_exists( 'a1tools_get_site_variables' ) ? a1tools_get_site_variables() : null;
     59
     60        $all_platforms = array(
     61            'facebook_url'        => array( 'label' => 'Facebook', 'icon' => 'fab fa-facebook-f', 'color' => '#1877F2' ),
     62            'instagram_url'       => array( 'label' => 'Instagram', 'icon' => 'fab fa-instagram', 'color' => '#E4405F' ),
     63            'youtube_url'         => array( 'label' => 'YouTube', 'icon' => 'fab fa-youtube', 'color' => '#FF0000' ),
     64            'twitter_url'         => array( 'label' => 'Twitter', 'icon' => 'fab fa-x-twitter', 'color' => '#000000' ),
     65            'linkedin_url'        => array( 'label' => 'LinkedIn', 'icon' => 'fab fa-linkedin-in', 'color' => '#0A66C2' ),
     66            'tiktok_url'          => array( 'label' => 'TikTok', 'icon' => 'fab fa-tiktok', 'color' => '#000000' ),
     67            'yelp_url'            => array( 'label' => 'Yelp', 'icon' => 'fab fa-yelp', 'color' => '#D32323' ),
     68            'google_business_url' => array( 'label' => 'Google', 'icon' => 'fab fa-google', 'color' => '#4285F4' ),
     69            'pinterest_url'       => array( 'label' => 'Pinterest', 'icon' => 'fab fa-pinterest-p', 'color' => '#E60023' ),
     70            'bbb_url'             => array( 'label' => 'BBB', 'icon' => 'fas fa-shield-alt', 'color' => '#006CB7' ),
     71            'nextdoor_url'        => array( 'label' => 'Nextdoor', 'icon' => 'fas fa-home', 'color' => '#8ED500' ),
     72            'houzz_url'           => array( 'label' => 'Houzz', 'icon' => 'fab fa-houzz', 'color' => '#4DBC15' ),
     73            'angi_url'            => array( 'label' => 'Angi', 'icon' => 'fas fa-tools', 'color' => '#FF6153' ),
     74            'thumbtack_url'       => array( 'label' => 'Thumbtack', 'icon' => 'fas fa-thumbtack', 'color' => '#009FD9' ),
     75            'homeadvisor_url'     => array( 'label' => 'HomeAdvisor', 'icon' => 'fas fa-home', 'color' => '#EF6C00' ),
     76        );
     77
     78        $available = array();
     79        if ( $vars ) {
     80            foreach ( $all_platforms as $key => $data ) {
     81                if ( ! empty( $vars[ $key ] ) ) {
     82                    $available[ $key ] = array_merge( $data, array( 'url' => $vars[ $key ] ) );
     83                }
     84            }
     85        }
     86
     87        return $available;
     88    }
     89
     90    /**
    5591     * Register widget controls.
    5692     */
    … …  
    65101        );
    66102
    67         $this->add_control(
    68             'info_notice',
    69             array(
    70                 'type'            => \Elementor\Controls_Manager::RAW_HTML,
    71                 'raw'             => __( 'Social media URLs are pulled from your A1 Tools site variables. Configure them in the A1 Tools dashboard.', 'a1-tools' ),
    72                 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
    73             )
    74         );
     103        // Show which platforms are available
     104        $platforms = $this->get_available_platforms();
     105        if ( ! empty( $platforms ) ) {
     106            $platform_names = array_map( function( $p ) { return $p['label']; }, $platforms );
     107            $this->add_control(
     108                'info_notice',
     109                array(
     110                    'type'            => \Elementor\Controls_Manager::RAW_HTML,
     111                    'raw'             => sprintf(
     112                        __( '<strong>Available platforms:</strong> %s<br><br><em>Configure more in the A1 Tools dashboard.</em>', 'a1-tools' ),
     113                        implode( ', ', $platform_names )
     114                    ),
     115                    'content_classes' => 'elementor-panel-alert elementor-panel-alert-success',
     116                )
     117            );
     118        } else {
     119            $this->add_control(
     120                'info_notice',
     121                array(
     122                    'type'            => \Elementor\Controls_Manager::RAW_HTML,
     123                    'raw'             => __( '<strong>No social media URLs configured.</strong><br><br>Add them in the A1 Tools dashboard under Site Variables.', 'a1-tools' ),
     124                    'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
     125                )
     126            );
     127        }
    75128
    76129        $this->end_controls_section();
    … …  
    97150                    'light'   => __( 'Light Background', 'a1-tools' ),
    98151                    'dark'    => __( 'Dark Background', 'a1-tools' ),
     152                    'custom'  => __( 'Custom Colors', 'a1-tools' ),
    99153                ),
    100154            )
    … …  
    195249                ),
    196250                'default'   => 'left',
    197                 'selectors' => array(
    198                     '{{WRAPPER}} .a1tools-social-icons-wrapper' => 'justify-content: {{VALUE}};',
    199                 ),
    200             )
    201         );
    202 
    203         $this->add_control(
    204             'custom_color',
    205             array(
    206                 'label'       => __( 'Custom Color', 'a1-tools' ),
    207                 'type'        => \Elementor\Controls_Manager::COLOR,
    208                 'description' => __( 'Override icon/background colors with a custom color', 'a1-tools' ),
     251            )
     252        );
     253
     254        // Custom Colors Section (only shown when style is "custom")
     255        $this->add_control(
     256            'custom_icon_color',
     257            array(
     258                'label'     => __( 'Icon Color', 'a1-tools' ),
     259                'type'      => \Elementor\Controls_Manager::COLOR,
     260                'default'   => '#ffffff',
     261                'condition' => array(
     262                    'icon_style' => 'custom',
     263                ),
     264            )
     265        );
     266
     267        $this->add_control(
     268            'custom_bg_color',
     269            array(
     270                'label'     => __( 'Background Color', 'a1-tools' ),
     271                'type'      => \Elementor\Controls_Manager::COLOR,
     272                'default'   => '#F7941E',
     273                'condition' => array(
     274                    'icon_style' => 'custom',
     275                ),
     276            )
     277        );
     278
     279        $this->add_control(
     280            'custom_border_color',
     281            array(
     282                'label'     => __( 'Border Color', 'a1-tools' ),
     283                'type'      => \Elementor\Controls_Manager::COLOR,
     284                'default'   => '',
     285                'condition' => array(
     286                    'icon_style' => 'custom',
     287                ),
     288            )
     289        );
     290
     291        $this->add_control(
     292            'custom_border_width',
     293            array(
     294                'label'      => __( 'Border Width', 'a1-tools' ),
     295                'type'       => \Elementor\Controls_Manager::SLIDER,
     296                'size_units' => array( 'px' ),
     297                'range'      => array(
     298                    'px' => array(
     299                        'min'  => 0,
     300                        'max'  => 10,
     301                        'step' => 1,
     302                    ),
     303                ),
     304                'default'    => array(
     305                    'unit' => 'px',
     306                    'size' => 0,
     307                ),
     308                'condition'  => array(
     309                    'icon_style' => 'custom',
     310                ),
     311            )
     312        );
     313
     314        $this->add_control(
     315            'custom_hover_icon_color',
     316            array(
     317                'label'     => __( 'Hover Icon Color', 'a1-tools' ),
     318                'type'      => \Elementor\Controls_Manager::COLOR,
     319                'default'   => '',
     320                'condition' => array(
     321                    'icon_style' => 'custom',
     322                ),
     323            )
     324        );
     325
     326        $this->add_control(
     327            'custom_hover_bg_color',
     328            array(
     329                'label'     => __( 'Hover Background Color', 'a1-tools' ),
     330                'type'      => \Elementor\Controls_Manager::COLOR,
     331                'default'   => '',
     332                'condition' => array(
     333                    'icon_style' => 'custom',
     334                ),
     335            )
     336        );
     337
     338        $this->add_control(
     339            'custom_hover_border_color',
     340            array(
     341                'label'     => __( 'Hover Border Color', 'a1-tools' ),
     342                'type'      => \Elementor\Controls_Manager::COLOR,
     343                'default'   => '',
     344                'condition' => array(
     345                    'icon_style' => 'custom',
     346                ),
    209347            )
    210348        );
    … …  
    244382     */
    245383    protected function render() {
    246         $settings = $this->get_settings_for_display();
    247 
    248         // Build shortcode attributes
    249         $atts = array(
    250             'style'     => $settings['icon_style'],
    251             'shape'     => $settings['shape'],
    252             'size'      => $settings['size']['size'],
    253             'icon_size' => $settings['icon_size']['size'],
    254             'spacing'   => $settings['spacing']['size'],
    255             'alignment' => $settings['alignment'],
    256             'hover'     => $settings['hover_effect'],
    257         );
    258 
    259         if ( ! empty( $settings['custom_color'] ) ) {
    260             $atts['color'] = $settings['custom_color'];
    261         }
    262 
    263         // Use the existing shortcode function.
    264         if ( function_exists( 'a1tools_shortcode_social_links' ) ) {
    265             // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Shortcode output is escaped internally.
    266             echo a1tools_shortcode_social_links( $atts );
    267         } else {
    268             echo '<p>' . esc_html__( 'A1 Tools plugin is not properly loaded.', 'a1-tools' ) . '</p>';
    269         }
     384        $settings  = $this->get_settings_for_display();
     385        $platforms = $this->get_available_platforms();
     386
     387        if ( empty( $platforms ) ) {
     388            return;
     389        }
     390
     391        // Get settings
     392        $style        = ! empty( $settings['icon_style'] ) ? $settings['icon_style'] : 'default';
     393        $shape        = ! empty( $settings['shape'] ) ? $settings['shape'] : 'rounded';
     394        $size         = ! empty( $settings['size']['size'] ) ? (int) $settings['size']['size'] : 40;
     395        $icon_size    = ! empty( $settings['icon_size']['size'] ) ? (int) $settings['icon_size']['size'] : 18;
     396        $spacing      = isset( $settings['spacing']['size'] ) ? (int) $settings['spacing']['size'] : 8;
     397        $alignment    = ! empty( $settings['alignment'] ) ? $settings['alignment'] : 'left';
     398        $hover_effect = ! empty( $settings['hover_effect'] ) ? $settings['hover_effect'] : 'scale';
     399
     400        // Custom style colors
     401        $custom_icon_color        = ! empty( $settings['custom_icon_color'] ) ? $settings['custom_icon_color'] : '#ffffff';
     402        $custom_bg_color          = ! empty( $settings['custom_bg_color'] ) ? $settings['custom_bg_color'] : '#F7941E';
     403        $custom_border_color      = ! empty( $settings['custom_border_color'] ) ? $settings['custom_border_color'] : '';
     404        $custom_border_width      = isset( $settings['custom_border_width']['size'] ) ? (int) $settings['custom_border_width']['size'] : 0;
     405        $custom_hover_icon_color  = ! empty( $settings['custom_hover_icon_color'] ) ? $settings['custom_hover_icon_color'] : '';
     406        $custom_hover_bg_color    = ! empty( $settings['custom_hover_bg_color'] ) ? $settings['custom_hover_bg_color'] : '';
     407        $custom_hover_border_color = ! empty( $settings['custom_hover_border_color'] ) ? $settings['custom_hover_border_color'] : '';
     408
     409        // Generate unique ID for this widget instance
     410        $widget_id = 'a1tools-elementor-' . $this->get_id();
     411
     412        // Border radius based on shape
     413        $border_radius = '8px';
     414        if ( 'circle' === $shape ) {
     415            $border_radius = '50%';
     416        } elseif ( 'square' === $shape ) {
     417            $border_radius = '0';
     418        }
     419
     420        // Build CSS
     421        $css = '#' . esc_attr( $widget_id ) . ' { text-align:' . esc_attr( $alignment ) . '; }';
     422        $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { ';
     423        $css .= 'width:' . $size . 'px;height:' . $size . 'px;';
     424        $css .= 'margin:0 ' . ( $spacing / 2 ) . 'px ' . $spacing . 'px;';
     425        $css .= 'font-size:' . $icon_size . 'px;';
     426        $css .= 'display:inline-flex;align-items:center;justify-content:center;';
     427        $css .= 'text-decoration:none;transition:all 0.3s ease;';
     428        $css .= 'border-radius:' . esc_attr( $border_radius ) . ';';
     429        $css .= '}';
     430
     431        // Style-specific CSS
     432        if ( 'custom' === $style ) {
     433            $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { ';
     434            $css .= 'color:' . esc_attr( $custom_icon_color ) . ';';
     435            $css .= 'background-color:' . esc_attr( $custom_bg_color ) . ';';
     436            if ( $custom_border_width > 0 && $custom_border_color ) {
     437                $css .= 'border:' . $custom_border_width . 'px solid ' . esc_attr( $custom_border_color ) . ';';
     438            }
     439            $css .= '}';
     440
     441            // Custom hover colors
     442            $hover_css_parts = array();
     443            if ( $custom_hover_icon_color ) {
     444                $hover_css_parts[] = 'color:' . esc_attr( $custom_hover_icon_color );
     445            }
     446            if ( $custom_hover_bg_color ) {
     447                $hover_css_parts[] = 'background-color:' . esc_attr( $custom_hover_bg_color );
     448            }
     449            if ( $custom_hover_border_color && $custom_border_width > 0 ) {
     450                $hover_css_parts[] = 'border-color:' . esc_attr( $custom_hover_border_color );
     451            }
     452            if ( ! empty( $hover_css_parts ) ) {
     453                $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon:hover { ' . implode( ';', $hover_css_parts ) . '; }';
     454            }
     455        } elseif ( 'default' === $style || 'official' === $style ) {
     456            $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { color: #fff; }';
     457        } elseif ( 'outline' === $style ) {
     458            $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { background: transparent; border: 2px solid; }';
     459        } elseif ( 'minimal' === $style ) {
     460            $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { background: transparent; }';
     461        } elseif ( 'light' === $style ) {
     462            $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { background: #f5f5f5; }';
     463        } elseif ( 'dark' === $style ) {
     464            $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon { background: #333; color: #fff; }';
     465        }
     466
     467        // Hover effects (only for non-custom styles, or in addition to custom hover colors)
     468        if ( 'custom' !== $style || empty( $hover_css_parts ) ) {
     469            if ( 'scale' === $hover_effect ) {
     470                $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon:hover { transform: scale(1.1); }';
     471            } elseif ( 'lift' === $hover_effect ) {
     472                $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }';
     473            } elseif ( 'rotate' === $hover_effect ) {
     474                $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon:hover { transform: rotate(15deg); }';
     475            } elseif ( 'pulse' === $hover_effect ) {
     476                $css .= '#' . esc_attr( $widget_id ) . ' .a1tools-social-icon:hover { animation: a1tools-pulse 0.5s ease; }';
     477                $css .= '@keyframes a1tools-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }';
     478            }
     479        }
     480
     481        // Output inline CSS
     482        echo '<style>' . $css . '</style>';
     483
     484        // Output HTML
     485        echo '<div id="' . esc_attr( $widget_id ) . '" class="a1tools-social-icons-styled">';
     486
     487        foreach ( $platforms as $key => $data ) {
     488            $inline_style = '';
     489
     490            // For non-custom styles, apply platform-specific colors
     491            if ( 'custom' !== $style ) {
     492                $item_color = $data['color'];
     493                if ( 'default' === $style || 'official' === $style ) {
     494                    $inline_style = 'background-color:' . esc_attr( $item_color ) . ';';
     495                } elseif ( 'outline' === $style ) {
     496                    $inline_style = 'border-color:' . esc_attr( $item_color ) . ';color:' . esc_attr( $item_color ) . ';';
     497                } elseif ( 'minimal' === $style || 'light' === $style ) {
     498                    $inline_style = 'color:' . esc_attr( $item_color ) . ';';
     499                }
     500            }
     501
     502            echo '<a href="' . esc_url( $data['url'] ) . '" class="a1tools-social-icon" target="_blank" rel="noopener noreferrer" title="' . esc_attr( $data['label'] ) . '" style="' . esc_attr( $inline_style ) . '">';
     503            echo '<i class="' . esc_attr( $data['icon'] ) . '" aria-hidden="true"></i>';
     504            echo '<span class="screen-reader-text">' . esc_html( $data['label'] ) . '</span>';
     505            echo '</a>';
     506        }
     507
     508        echo '</div>';
    270509    }
    271510
    272511    /**
    273512     * Render widget output in the editor.
     513     * Uses PHP to get actual available platforms.
    274514     */
    275515    protected function content_template() {
     516        // Get available platforms for the editor preview
     517        $platforms = $this->get_available_platforms();
     518
     519        // Convert to JS-friendly format
     520        $js_platforms = array();
     521        foreach ( $platforms as $key => $data ) {
     522            // Extract just the icon class name (e.g., "fa-facebook-f" from "fab fa-facebook-f")
     523            $icon_parts = explode( ' ', $data['icon'] );
     524            $icon_class = end( $icon_parts );
     525            $icon_prefix = count( $icon_parts ) > 1 ? $icon_parts[0] : 'fab';
     526
     527            $js_platforms[] = array(
     528                'icon'   => $icon_class,
     529                'prefix' => $icon_prefix,
     530                'color'  => $data['color'],
     531                'name'   => $data['label'],
     532            );
     533        }
     534
     535        // If no platforms available, show a placeholder
     536        if ( empty( $js_platforms ) ) {
     537            ?>
     538            <div style="padding: 20px; text-align: center; background: #f5f5f5; border-radius: 4px;">
     539                <p style="margin: 0; color: #666;"><?php esc_html_e( 'No social media URLs configured. Add them in A1 Tools dashboard.', 'a1-tools' ); ?></p>
     540            </div>
     541            <?php
     542            return;
     543        }
    276544        ?>
    277545        <#
    … …  
    282550        var spacing = settings.spacing.size || 8;
    283551        var alignment = settings.alignment || 'left';
    284         var hover = settings.hover_effect || 'scale';
    285         var customColor = settings.custom_color || '';
     552
     553        // Custom style colors
     554        var customIconColor = settings.custom_icon_color || '#ffffff';
     555        var customBgColor = settings.custom_bg_color || '#F7941E';
     556        var customBorderColor = settings.custom_border_color || '';
     557        var customBorderWidth = settings.custom_border_width ? settings.custom_border_width.size : 0;
    286558
    287559        var borderRadius = shape === 'circle' ? '50%' : (shape === 'rounded' ? '8px' : '0');
    288560        var justifyContent = alignment === 'center' ? 'center' : (alignment === 'right' ? 'flex-end' : 'flex-start');
    289561
    290         // Sample social platforms for preview
    291         var platforms = [
    292             { icon: 'fa-facebook-f', color: '#1877F2', name: 'Facebook' },
    293             { icon: 'fa-instagram', color: '#E4405F', name: 'Instagram' },
    294             { icon: 'fa-youtube', color: '#FF0000', name: 'YouTube' },
    295             { icon: 'fa-linkedin-in', color: '#0A66C2', name: 'LinkedIn' }
    296         ];
     562        // Actual available platforms from the site
     563        var platforms = <?php echo wp_json_encode( $js_platforms ); ?>;
    297564        #>
    298565        <div class="a1tools-social-icons-wrapper" style="display: flex; flex-wrap: wrap; gap: {{ spacing }}px; justify-content: {{ justifyContent }};">
    … …  
    302569                var border = 'none';
    303570
    304                 if (customColor) {
    305                     if (style === 'outline' || style === 'minimal') {
    306                         iconColor = customColor;
    307                         bgColor = style === 'outline' ? 'transparent' : 'transparent';
    308                         border = style === 'outline' ? '2px solid ' + customColor : 'none';
    309                     } else {
    310                         bgColor = customColor;
    311                         iconColor = '#fff';
     571                if (style === 'custom') {
     572                    bgColor = customBgColor;
     573                    iconColor = customIconColor;
     574                    if (customBorderWidth > 0 && customBorderColor) {
     575                        border = customBorderWidth + 'px solid ' + customBorderColor;
    312576                    }
    313577                } else {
    … …  
    337601            #>
    338602            <a href="#" style="display: inline-flex; align-items: center; justify-content: center; width: {{ size }}px; height: {{ size }}px; background: {{ bgColor }}; color: {{ iconColor }}; border-radius: {{ borderRadius }}; border: {{ border }}; text-decoration: none; transition: all 0.3s ease;">
    339                 <i class="fab {{ platform.icon }}" style="font-size: {{ iconSize }}px;"></i>
     603                <i class="{{ platform.prefix }} {{ platform.icon }}" style="font-size: {{ iconSize }}px;"></i>
    340604            </a>
    341605            <# }); #>

  • a1-tools/trunk/readme.txt

    r3457328 r3457342  
    44Requires at least: 5.0
    55Tested up to: 6.9
    6 Stable tag: 1.4.4
     6Stable tag: 1.4.5
    77Requires PHP: 7.4
    88License: GPLv2 or later
    … …  
    151151
    152152== Changelog ==
     153
     154= 1.4.5 =
     155* Rewrote Elementor Social Icons widget to render CSS directly for proper styling
     156* Editor preview now shows actual configured social platforms instead of hardcoded samples
     157* Added "Available platforms" info panel in Elementor widget settings
     158* Fixed CSS not applying on frontend when using Elementor widget
    153159
    154160= 1.4.4 =
Note: See TracChangeset for help on using the changeset viewer.