PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.5.3
Easy Elements for Elementor – Addons & Website Templates v1.5.3
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / social-icon / social.php

social.php in Easy Elements for Elementor – Addons & Website Templates 1.5.3, at widgets/social-icon/social.php

616 lines 16.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace Easyel\EasyElements\Widgets;
3 use Elementor\Controls_Manager;
4 use Elementor\Widget_Base;
5 use Elementor\Group_Control_Typography;
6 use Elementor\Group_Control_Border;
7 use Elementor\Group_Control_Box_Shadow;
8
9 if ( ! defined( 'ABSPATH' ) ) {
10 exit;
11 }
12
13 /**
14 *
15 * Handles the social icon widget functionality for Elementor.
16 */
17 class Easyel_Social_Icon_Widget extends \Elementor\Widget_Base {
18
19 /**
20 * Get widget style dependencies
21 *
22 * Loads the CSS file for the widget styling
23 *
24 * @return array Array of style handles
25 */
26
27 /**
28 * Get widget name
29 *
30 * @return string Widget name
31 */
32 public function get_name() {
33 return 'eel-social-icon';
34 }
35
36 /**
37 * Get widget title
38 *
39 * @return string Widget title
40 */
41 public function get_title() {
42 return __( 'Social Icon', 'easy-elements' );
43 }
44
45 /**
46 * Get widget icon
47 *
48 * @return string Widget icon
49 */
50 public function get_icon() {
51 return 'easyicon easyelIcon-social-icons';
52 }
53
54 /**
55 * Get widget categories
56 *
57 * @return array Widget categories
58 */
59 public function get_categories() {
60 return [ 'easyelements_category' ];
61 }
62
63 public function get_style_depends() {
64 return [
65 'eel-social-icon',
66 ];
67 }
68
69
70 /**
71 * Register widget controls
72 *
73 * Defines all the controls for the widget
74 */
75
76 public function get_keywords() {
77 return [ 'social', 'icon', 'link', 'click', 'share' ];
78 }
79 protected function register_controls() {
80 // ========================================
81 // CONTENT SECTION - Social Settings
82 // ========================================
83 $this->start_controls_section(
84 'content_section',
85 [
86 'label' => esc_html__( 'Social Settings', 'easy-elements' ),
87 'tab' => Controls_Manager::TAB_CONTENT,
88 ]
89 );
90
91 $repeater = new \Elementor\Repeater();
92
93 // Link Title Field
94 $repeater->add_control(
95 'link_title',
96 [
97 'label' => esc_html__( 'Link Title', 'easy-elements' ),
98 'type' => Controls_Manager::TEXT,
99 'default' => esc_html__( 'Social Link', 'easy-elements' ),
100 ]
101 );
102
103 // Link URL Field
104 $repeater->add_control(
105 'link_url',
106 [
107 'label' => esc_html__( 'Link URL', 'easy-elements' ),
108 'type' => Controls_Manager::URL,
109 'default' => [
110 'url' => '#',
111 'is_external' => false,
112 'nofollow' => false,
113 ],
114 ]
115 );
116
117 // Icon Field
118 $repeater->add_control(
119 'icon',
120 [
121 'label' => esc_html__( 'Icon', 'easy-elements' ),
122 'type' => Controls_Manager::ICONS,
123 'default' => [
124 'value' => 'fab fa-facebook-f',
125 'library' => 'fa-brands',
126 ],
127 ]
128 );
129
130 // Background Color Field
131 $repeater->add_control(
132 'background_color',
133 [
134 'label' => esc_html__( 'Background Color', 'easy-elements' ),
135 'type' => Controls_Manager::COLOR,
136 'default' => '#1877F2',
137 ]
138 );
139
140 // Background (classic + gradient)
141 $repeater->add_group_control(
142 \Elementor\Group_Control_Background::get_type(),
143 [
144 'name' => 'background_color_group',
145 'label' => esc_html__( 'Background', 'easy-elements' ),
146 'types' => [ 'classic', 'gradient' ],
147 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.eel-social-button',
148 ]
149 );
150
151 // Icon Color Field
152 $repeater->add_control(
153 'icon_color',
154 [
155 'label' => esc_html__( 'Icon Color', 'easy-elements' ),
156 'type' => Controls_Manager::COLOR,
157 'default' => '#ffffff',
158 ]
159 );
160
161 // Hover Background Color Field
162 $repeater->add_control(
163 'hover_background_color',
164 [
165 'label' => esc_html__( 'Hover Background Color', 'easy-elements' ),
166 'type' => Controls_Manager::COLOR,
167 'default' => '#166fe5',
168 ]
169 );
170
171 // Hover Background (classic + gradient)
172 $repeater->add_group_control(
173 \Elementor\Group_Control_Background::get_type(),
174 [
175 'name' => 'hover_background_color_group',
176 'label' => esc_html__( 'Hover Background', 'easy-elements' ),
177 'types' => [ 'classic', 'gradient' ],
178 'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.eel-social-button:hover',
179 ]
180 );
181
182 // Hover Icon Color Field
183 $repeater->add_control(
184 'hover_icon_color',
185 [
186 'label' => esc_html__( 'Hover Icon Color', 'easy-elements' ),
187 'type' => Controls_Manager::COLOR,
188 'default' => '#ffffff',
189 ]
190 );
191
192 $this->add_control(
193 'social_links',
194 [
195 'label' => esc_html__( 'Social Links', 'easy-elements' ),
196 'type' => Controls_Manager::REPEATER,
197 'fields' => $repeater->get_controls(),
198 // Default social links
199 'default' => [
200 [
201 'link_title' => esc_html__( 'Facebook', 'easy-elements' ),
202 'link_url' => [ 'url' => '#' ],
203 'icon' => [ 'value' => 'fab fa-facebook-f' ],
204 'background_color' => '#1877F2',
205 'icon_color' => '#ffffff',
206 'hover_background_color' => '#166fe5',
207 'hover_icon_color' => '#ffffff',
208 ],
209 [
210 'link_title' => esc_html__( 'Twitter', 'easy-elements' ),
211 'link_url' => [ 'url' => '#' ],
212 'icon' => [ 'value' => 'fab fa-twitter' ],
213 'background_color' => '#1DA1F2',
214 'icon_color' => '#ffffff',
215 'hover_background_color' => '#1a91da',
216 'hover_icon_color' => '#ffffff',
217 ],
218 [
219 'link_title' => esc_html__( 'Instagram', 'easy-elements' ),
220 'link_url' => [ 'url' => '#' ],
221 'icon' => [ 'value' => 'fab fa-instagram' ],
222 'background_color' => '#E4405F',
223 'icon_color' => '#ffffff',
224 'hover_background_color' => '#d63384',
225 'hover_icon_color' => '#ffffff',
226 ],
227 ],
228 'title_field' => '{{{ link_title }}}',
229 ]
230 );
231
232 // Color Mode Control
233 $this->add_control(
234 'color_mode',
235 [
236 'label' => esc_html__( 'Color Mode', 'easy-elements' ),
237 'type' => Controls_Manager::SELECT,
238 'default' => 'custom',
239 'options' => [
240 'custom' => esc_html__( 'Custom Colors (Per Item)', 'easy-elements' ),
241 'global' => esc_html__( 'Global Colors', 'easy-elements' ),
242 ],
243 'separator' => 'before',
244 ]
245 );
246
247 $this->end_controls_section();
248
249 // ========================================
250 // STYLE SECTION - Buttons Style
251 // ========================================
252 $this->start_controls_section(
253 'buttons_style_section',
254 [
255 'label' => esc_html__( 'Buttons Style', 'easy-elements' ),
256 'tab' => Controls_Manager::TAB_STYLE,
257 ]
258 );
259
260 // Button Size Control
261 $this->add_responsive_control(
262 'button_size',
263 [
264 'label' => esc_html__( 'Button Size', 'easy-elements' ),
265 'type' => Controls_Manager::SLIDER,
266 'size_units' => [ 'px', 'em' ],
267 'range' => [
268 'px' => [
269 'min' => 30,
270 'max' => 100,
271 'step' => 1,
272 ],
273 'em' => [
274 'min' => 2,
275 'max' => 6,
276 'step' => 0.1,
277 ],
278 ],
279 'default' => [
280 'unit' => 'px',
281 'size' => 45,
282 ],
283 'selectors' => [
284 '{{WRAPPER}} .eel-social-button' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
285 ],
286 ]
287 );
288
289 // Button Spacing Control
290 $this->add_responsive_control(
291 'button_spacing',
292 [
293 'label' => esc_html__( 'Button Spacing', 'easy-elements' ),
294 'type' => Controls_Manager::SLIDER,
295 'size_units' => [ 'px', 'em' ],
296 'range' => [
297 'px' => [
298 'min' => 0,
299 'max' => 50,
300 'step' => 1,
301 ],
302 'em' => [
303 'min' => 0,
304 'max' => 3,
305 'step' => 0.1,
306 ],
307 ],
308 'default' => [
309 'unit' => 'px',
310 'size' => 10,
311 ],
312 'selectors' => [
313 '{{WRAPPER}} .eel-social-buttons' => 'gap: {{SIZE}}{{UNIT}};',
314 ],
315 ]
316 );
317
318 // Border Radius Control
319 $this->add_control(
320 'button_border_radius',
321 [
322 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
323 'type' => Controls_Manager::DIMENSIONS,
324 'size_units' => [ 'px', '%' ],
325 'default' => [
326 'top' => '50',
327 'right' => '50',
328 'bottom' => '50',
329 'left' => '50',
330 'unit' => '%',
331 'isLinked' => true,
332 ],
333 'selectors' => [
334 '{{WRAPPER}} .eel-social-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
335 ],
336 ]
337 );
338
339 // 1. Start the Tabs Wrapper
340 $this->start_controls_tabs( 'tabs_button_border_style' );
341
342 // ---- NORMAL STATE TAB ----
343 $this->start_controls_tab(
344 'tab_button_border_normal',
345 [
346 'label' => esc_html__( 'Normal', 'easy-elements' ),
347 ]
348 );
349
350 $this->add_group_control(
351 Group_Control_Border::get_type(),
352 [
353 'name' => 'button_border',
354 'selector' => '{{WRAPPER}} .eel-social-button',
355 ]
356 );
357
358 $this->end_controls_tab();
359
360 // ---- HOVER STATE TAB ----
361 $this->start_controls_tab(
362 'tab_button_border_hover',
363 [
364 'label' => esc_html__( 'Hover', 'easy-elements' ),
365 ]
366 );
367
368 $this->add_group_control(
369 Group_Control_Border::get_type(),
370 [
371 'name' => 'button_border_hover', // Must be a unique name
372 'selector' => '{{WRAPPER}} .eel-social-button:hover', // Targeted with :hover
373 ]
374 );
375
376 $this->end_controls_tab();
377
378 $this->end_controls_tabs(); // Close the Tabs Wrapper
379
380 // Box Shadow Control
381 $this->add_group_control(
382 Group_Control_Box_Shadow::get_type(),
383 [
384 'name' => 'button_box_shadow',
385 'selector' => '{{WRAPPER}} .eel-social-button',
386 ]
387 );
388
389 // Global Background Color Control (only when global mode is selected)
390 $this->add_control(
391 'button_background_color',
392 [
393 'label' => esc_html__( 'Background Color', 'easy-elements' ),
394 'type' => Controls_Manager::COLOR,
395 'default' => '#1877F2',
396 'condition' => [
397 'color_mode' => 'global',
398 ],
399 'selectors' => [
400 '{{WRAPPER}} .eel-social-button' => 'background-color: {{VALUE}} !important;',
401 ],
402 ]
403 );
404
405 // Global Background (classic + gradient)
406 $this->add_group_control(
407 \Elementor\Group_Control_Background::get_type(),
408 [
409 'name' => 'button_background_color_group',
410 'label' => esc_html__( 'Background', 'easy-elements' ),
411 'types' => [ 'classic', 'gradient' ],
412 'selector' => '{{WRAPPER}} .eel-social-button',
413 'condition' => [
414 'color_mode' => 'global',
415 ],
416 ]
417 );
418
419 // Global Hover Background Color Control
420 $this->add_control(
421 'button_background_hover_color',
422 [
423 'label' => esc_html__( 'Hover Background Color', 'easy-elements' ),
424 'type' => Controls_Manager::COLOR,
425 'default' => '#166fe5',
426 'condition' => [
427 'color_mode' => 'global',
428 ],
429 'selectors' => [
430 '{{WRAPPER}} .eel-social-button:hover' => 'background-color: {{VALUE}} !important; border-color: {{VALUE}} !important;',
431 ],
432 ]
433 );
434
435 // Global Hover Background (classic + gradient)
436 $this->add_group_control(
437 \Elementor\Group_Control_Background::get_type(),
438 [
439 'name' => 'button_background_hover_color_group',
440 'label' => esc_html__( 'Hover Background', 'easy-elements' ),
441 'types' => [ 'classic', 'gradient' ],
442 'selector' => '{{WRAPPER}} .eel-social-button:hover',
443 'condition' => [
444 'color_mode' => 'global',
445 ],
446 ]
447 );
448
449 // Global Icon Color Control
450 $this->add_control(
451 'button_icon_color',
452 [
453 'label' => esc_html__( 'Icon Color', 'easy-elements' ),
454 'type' => Controls_Manager::COLOR,
455 'default' => '#ffffff',
456 'condition' => [
457 'color_mode' => 'global',
458 ],
459 'selectors' => [
460 '{{WRAPPER}} .eel-social-button i' => 'color: {{VALUE}};',
461 '{{WRAPPER}} .eel-social-button svg' => 'fill: {{VALUE}};',
462 ],
463 ]
464 );
465
466 // Global Hover Icon Color Control
467 $this->add_control(
468 'button_icon_hover_color',
469 [
470 'label' => esc_html__( 'Hover Icon Color', 'easy-elements' ),
471 'type' => Controls_Manager::COLOR,
472 'default' => '#ffffff',
473 'condition' => [
474 'color_mode' => 'global',
475 ],
476 'selectors' => [
477 '{{WRAPPER}} .eel-social-button:hover i' => 'color: {{VALUE}} !important;',
478 '{{WRAPPER}} .eel-social-button:hover svg' => 'fill: {{VALUE}} !important;',
479 ],
480 ]
481 );
482
483 // Icon Size Control
484 $this->add_responsive_control(
485 'icon_size',
486 [
487 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
488 'type' => Controls_Manager::SLIDER,
489 'size_units' => [ 'px', 'em' ],
490 'range' => [
491 'px' => [
492 'min' => 10,
493 'max' => 50,
494 'step' => 1,
495 ],
496 'em' => [
497 'min' => 0.5,
498 'max' => 3,
499 'step' => 0.1,
500 ],
501 ],
502 'default' => [
503 'unit' => 'px',
504 'size' => 18,
505 ],
506 'selectors' => [
507 '{{WRAPPER}} .eel-social-button i' => 'font-size: {{SIZE}}{{UNIT}};',
508 '{{WRAPPER}} .eel-social-button svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
509 ],
510 ]
511 );
512
513 $this->end_controls_section();
514 }
515
516 /**
517 * Render widget output on the frontend
518 *
519 * Generates the HTML markup for the social icons
520 */
521 protected function render() {
522 $settings = $this->get_settings_for_display();
523
524 if ( empty( $settings['social_links'] ) ) {
525 return;
526 }
527
528 $color_mode = $settings['color_mode'] ?? 'custom';
529
530 echo '<div class="eel-social-share"><div class="eel-social-buttons">';
531
532 $custom_css = '';
533
534 foreach ( $settings['social_links'] as $index => $link ) {
535 $link_title = $link['link_title'] ?? '';
536 $link_url = $link['link_url']['url'] ?? '#';
537 $is_external = $link['link_url']['is_external'] ?? false;
538 $nofollow = $link['link_url']['nofollow'] ?? false;
539
540 $target = $is_external ? '_blank' : '_self';
541 $rel = '';
542
543 if ( $is_external && $nofollow ) {
544 $rel = 'nofollow noopener';
545 } elseif ( $is_external ) {
546 $rel = 'noopener';
547 } elseif ( $nofollow ) {
548 $rel = 'nofollow';
549 }
550
551
552 $unique_class = 'eel-social-custom-' . $index;
553 $repeater_class = ! empty( $link['_id'] ) ? 'elementor-repeater-item-' . $link['_id'] : '';
554
555 $hover_bg = '#166fe5';
556 $hover_icon = '#ffffff';
557 $bg_color = '#1877F2';
558 $icon_color = '#ffffff';
559
560 if ( 'custom' === $color_mode ) {
561 $bg_color = $link['background_color'] ?? $bg_color;
562 $icon_color = $link['icon_color'] ?? $icon_color;
563 $hover_bg = $link['hover_background_color'] ?? $hover_bg;
564 $hover_icon = $link['hover_icon_color'] ?? $hover_icon;
565 }
566
567 $inline_style = sprintf(
568 'background-color: %s; color: %s;',
569 esc_attr( $bg_color ),
570 esc_attr( $icon_color )
571 );
572
573 echo '<a href="' . esc_url( $link_url ) . '" class="eel-social-button ' . esc_attr( trim( $unique_class . ' ' . $repeater_class ) ) . '"';
574 echo ' target="' . esc_attr( $target ) . '"';
575 if ( $rel ) {
576 echo ' rel="' . esc_attr( $rel ) . '"';
577 }
578 echo ' title="' . esc_attr( $link_title ) . '"';
579 echo ' style="' . esc_attr( $inline_style ) . '"';
580 echo '>';
581 if ( $color_mode === 'custom' ) {
582 \Elementor\Icons_Manager::render_icon(
583 $link['icon'],
584 [
585 'aria-hidden' => 'true',
586 'style' => 'color:' . esc_attr( $icon_color ) . '; fill:' . esc_attr( $icon_color ) . ';',
587 ]
588 );
589 }else{
590 \Elementor\Icons_Manager::render_icon($link['icon'],['aria-hidden' => 'true']);
591 }
592
593 echo '</a>';
594
595 if ( 'custom' === $color_mode ) {
596 $custom_css .= sprintf(
597 '.%1$s:hover{background-color:%2$s!important;}.%1$s:hover i,.%1$s:hover svg{color:%3$s!important;fill:%3$s!important;}',
598 esc_attr( $unique_class ),
599 esc_attr( $hover_bg ),
600 esc_attr( $hover_icon )
601 );
602 }
603 }
604
605 echo '</div></div>';
606
607 if ( ! empty( $custom_css ) ) {
608 $handle = 'easyel-social-share-inline';
609 wp_register_style( $handle, false, [], EASYELEMENTS_VER );
610 wp_enqueue_style( $handle );
611 wp_add_inline_style( $handle, $custom_css );
612 }
613 }
614
615 }
616