Plugin Directory

source: ht-mega-for-elementor/tags/2.5.0/includes/widgets/htmega_popover.php

Last change on this file was 3048999, checked in by devitemsllc, 14 months ago

Update to version 2.4.7 from GitHub

File size: 39.1 KB
Line 
1<?php
2namespace Elementor;
3
4// Elementor Classes
5if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
6
7class HTMega_Elementor_Widget_Popover extends Widget_Base {
8
9    public function get_name() {
10        return 'htmega-popover-addons';
11    }
12   
13    public function get_title() {
14        return __( 'Popover', 'htmega-addons' );
15    }
16
17    public function get_icon() {
18        return 'htmega-icon eicon-info-box';
19    }
20
21    public function get_style_depends(){
22        return [
23            'htmega-widgets',
24        ];
25    }
26
27    public function get_script_depends() {
28        return [
29            'htmega-widgets-scripts',
30        ];
31    }
32
33    public function get_categories() {
34        return [ 'htmega-addons' ];
35    }
36
37    public function get_keywords() {
38        return ['popover', 'tooltip', 'pop over', 'popovers', 'htmega', 'ht mega', 'addons','widget'];
39    }
40
41    public function get_help_url() {
42        return 'https://wphtmega.com/docs/creative-widgets/popover-widget/';
43    }
44    protected function register_controls() {
45
46        $this->start_controls_section(
47            'popover_content',
48            [
49                'label' => __( 'Popover Button', 'htmega-addons' ),
50            ]
51        );
52            $this->add_responsive_control(
53                'popover_button_type',
54                [
55                    'label' => esc_html__( 'Button Type', 'htmega-addons' ),
56                    'type' => Controls_Manager::CHOOSE,
57                    'label_block' => false,
58                    'options' => [
59                        'icon' => [
60                            'title' => esc_html__( 'Icon', 'htmega-addons' ),
61                            'icon' => 'eicon-info-circle',
62                        ],
63                        'text' => [
64                            'title' => esc_html__( 'Text', 'htmega-addons' ),
65                            'icon' => 'eicon-animation-text',
66                        ],
67                        'image' => [
68                            'title' => esc_html__( 'Image', 'htmega-addons' ),
69                            'icon' => 'eicon-image-bold',
70                        ],
71                    ],
72                    'default' => 'text',
73                ]
74            );
75
76            $this->add_control(
77                'popover_button_txt',
78                [
79                    'label' => esc_html__( 'Button Text', 'htmega-addons' ),
80                    'type' => Controls_Manager::TEXT,
81                    'label_block' => true,
82                    'default' => esc_html__( 'Popover', 'htmega-addons' ),
83                    'condition' => [
84                        'popover_button_type' => [ 'text' ]
85                    ],
86                    'dynamic' => [ 'active' => true ]
87                ]
88            );
89
90            $this->add_control(
91                'popover_button_icon',
92                [
93                    'label' => esc_html__( 'Icon', 'htmega-addons' ),
94                    'type' => Controls_Manager::ICONS,
95                    'default' => [
96                        'value'=>'fas fa-home',
97                        'library' => 'solid',
98                    ],
99                    'condition' => [
100                        'popover_button_type' => [ 'icon' ]
101                    ]
102                ]
103            );
104
105            $this->add_control(
106                'popover_button_img',
107                [
108                    'label' => __('Image','htmega-addons'),
109                    'type'=>Controls_Manager::MEDIA,
110                    'dynamic' => [
111                        'active' => true,
112                    ],
113                    'condition' => [
114                        'popover_button_type' => [ 'image' ]
115                    ]
116                ]
117            );
118
119            $this->add_group_control(
120                Group_Control_Image_Size::get_type(),
121                [
122                    'name' => 'popover_button_imgsize',
123                    'default' => 'large',
124                    'separator' => 'none',
125                    'condition' => [
126                        'popover_button_type' => [ 'image' ]
127                    ]
128                ]
129            );
130
131            $this->add_control(
132                'show_link',
133                [
134                    'label' => __( 'Show Link', 'htmega-addons' ),
135                    'type' => Controls_Manager::SWITCHER,
136                    'label_on' => __( 'Show', 'htmega-addons' ),
137                    'label_off' => __( 'Hide', 'htmega-addons' ),
138                    'return_value' => 'yes',
139                    'default' => 'no',
140                ]
141            );
142
143            $this->add_control(
144                'button_link',
145                [
146                    'label' => __( 'Link', 'htmega-addons' ),
147                    'type' => Controls_Manager::URL,
148                    'placeholder' => __( 'https://your-link.com', 'htmega-addons' ),
149                    'show_external' => true,
150                    'default' => [
151                        'url' => '',
152                        'is_external' => true,
153                        'nofollow' => true,
154                    ],
155                    'condition'=>[
156                        'show_link'=>'yes',
157                    ]
158                ]
159            );
160
161        $this->end_controls_section();
162
163        // Popover options
164        $this->start_controls_section(
165            'popover_options',
166            [
167                'label' => __( 'Popover Options', 'htmega-addons' ),
168            ]
169        );
170            $this->add_control(
171                'popover_text',
172                [
173                    'label' => esc_html__( 'Popover Text', 'htmega-addons' ),
174                    'type' => Controls_Manager::TEXTAREA,
175                    'label_block' => true,
176                    'default' => esc_html__( 'Popover content Here', 'htmega-addons' ),
177                    'dynamic' => [ 'active' => true ]
178                ]
179            );
180
181            $this->add_control(
182                'popover_header_text',
183                [
184                    'label' => esc_html__( 'Popover Header Text', 'htmega-addons' ),
185                    'type' => Controls_Manager::TEXT,
186                    'label_block' => true,
187                    'default' => esc_html__( 'Popover Header Here', 'htmega-addons' ),
188                    'dynamic' => [ 'active' => true ]
189                ]
190            );
191
192            $this->add_control(
193              'popover_dir',
194                [
195                    'label'         => esc_html__( 'Direction', 'htmega-addons' ),
196                    'type'          => Controls_Manager::SELECT,
197                    'default'       => 'right',
198                    'label_block'   => false,
199                    'options'       => [
200                        'left'      => esc_html__( 'Left', 'htmega-addons' ),
201                        'right'     => esc_html__( 'Right', 'htmega-addons' ),
202                        'top'       => esc_html__( 'Top', 'htmega-addons' ),
203                        'bottom'    => esc_html__( 'Bottom', 'htmega-addons' ),
204                    ],
205                ]
206            );
207
208            $this->add_control(
209                'show_popover',
210                [
211                    'label' => __( 'Active', 'htmega-addons' ),
212                    'type' => Controls_Manager::SWITCHER,
213                    'label_on' => __( 'Show', 'htmega-addons' ),
214                    'label_off' => __( 'Hide', 'htmega-addons' ),
215                    'return_value' => 'yes',
216                    'default' => 'yes',
217                ]
218            );
219
220            $this->add_responsive_control(
221                'popover_space',
222                [
223                    'label' => __( 'Space With Button', 'htmega-addons' ),
224                    'type' => Controls_Manager::SLIDER,
225                    'size_units' => [ 'px', '%' ],
226                    'range' => [
227                        'px' => [
228                            'min' => 0,
229                            'max' => 1200,
230                            'step' => 1,
231                        ],
232                        '%' => [
233                            'min' => 0,
234                            'max' => 100,
235                        ],
236                    ],
237                    'default' => [
238                        'unit' => 'px',
239                        'size' => 12,
240                    ],
241                    'selectors' => [
242                        '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=top]' => 'top: -{{SIZE}}{{UNIT}} !important;',
243                        '{{WRAPPER}} .htb-bs-popover-top' => 'top: -{{SIZE}}{{UNIT}} !important;',
244                        '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=bottom]' => 'top: {{SIZE}}{{UNIT}} !important;',
245                        '{{WRAPPER}} .htb-bs-popover-bottom' => 'top: {{SIZE}}{{UNIT}} !important;',
246                        '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=right]' => 'left: {{SIZE}}{{UNIT}} !important;',
247                        '{{WRAPPER}} .htb-bs-popover-right' => 'left: {{SIZE}}{{UNIT}} !important;',
248                        '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=left]' => 'left: {{SIZE}}{{UNIT}} !important;',
249                        '{{WRAPPER}} .htb-bs-popover-left' => 'left: -{{SIZE}}{{UNIT}} !important;',
250                    ],
251                ]
252            );
253
254        $this->end_controls_section();
255
256        // Style tab section
257        $this->start_controls_section(
258            'popover_style_section',
259            [
260                'label' => __( 'Style', 'htmega-addons' ),
261                'tab' => Controls_Manager::TAB_STYLE,
262            ]
263        );
264
265            $this->add_responsive_control(
266                'popover_style_section_align',
267                [
268                    'label' => __( 'Alignment', 'htmega-addons' ),
269                    'type' => Controls_Manager::CHOOSE,
270                    'options' => [
271                        'left' => [
272                            'title' => __( 'Left', 'htmega-addons' ),
273                            'icon' => 'eicon-text-align-left',
274                        ],
275                        'center' => [
276                            'title' => __( 'Center', 'htmega-addons' ),
277                            'icon' => 'eicon-text-align-center',
278                        ],
279                        'right' => [
280                            'title' => __( 'Right', 'htmega-addons' ),
281                            'icon' => 'eicon-text-align-right',
282                        ],
283                        'justify' => [
284                            'title' => __( 'Justified', 'htmega-addons' ),
285                            'icon' => 'eicon-text-align-justify',
286                        ],
287                    ],
288                    'selectors' => [
289                        '{{WRAPPER}} .htmega-popover' => 'text-align: {{VALUE}};',
290                    ],
291                    'default' => 'center',
292                    'separator' =>'before',
293                ]
294            );
295
296            $this->add_responsive_control(
297                'popover_style_section_padding',
298                [
299                    'label' => __( 'Padding', 'htmega-addons' ),
300                    'type' => Controls_Manager::DIMENSIONS,
301                    'size_units' => [ 'px', '%', 'em' ],
302                    'selectors' => [
303                        '{{WRAPPER}} .htmega-popover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
304                    ],
305                    'separator' =>'before',
306                ]
307            );
308
309            $this->add_responsive_control(
310                'popover_style_section_margin',
311                [
312                    'label' => __( 'Margin', 'htmega-addons' ),
313                    'type' => Controls_Manager::DIMENSIONS,
314                    'size_units' => [ 'px', '%', 'em' ],
315                    'selectors' => [
316                        '{{WRAPPER}} .htmega-popover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
317                    ],
318                    'separator' =>'before',
319                ]
320            );
321           
322        $this->end_controls_section();
323
324        // Button Style tab section
325        $this->start_controls_section(
326            'popover_button_section',
327            [
328                'label' => __( 'Button', 'htmega-addons' ),
329                'tab' => Controls_Manager::TAB_STYLE,
330            ]
331        );
332           
333            $this->start_controls_tabs('button_style_tabs');
334
335                $this->start_controls_tab(
336                    'button_style_normal_tab',
337                    [
338                        'label' => __( 'Normal', 'htmega-addons' ),
339                    ]
340                );
341                    $this->add_control(
342                        'button_color',
343                        [
344                            'label' => __( 'Color', 'htmega-addons' ),
345                            'type' => Controls_Manager::COLOR,
346                            'default' => '#ffffff',
347                            'selectors' => [
348                                '{{WRAPPER}} .htmega-popover span' => 'color: {{VALUE}};',
349                                '{{WRAPPER}} .htmega-popover span a' => 'color: {{VALUE}};',
350                                '{{WRAPPER}} .htmega-popover span svg path,{{WRAPPER}} .htmega-popover span a svg path' => 'fill: {{VALUE}}; transition:all 0.3s ease-in-out;',
351                            ],
352                        ]
353                    );
354
355                    $this->add_group_control(
356                        Group_Control_Typography::get_type(),
357                        [
358                            'name' => 'button_typography',
359                            'selector' => '{{WRAPPER}} .htmega-popover span',
360                            'condition'=>[
361                                'popover_button_type'=>'text',
362                            ]
363                        ]
364                    );
365
366                    $this->add_control(
367                        'button_icon_fontsize',
368                        [
369                            'label' => __( 'Icon Size', 'htmega-addons' ),
370                            'type' => Controls_Manager::SLIDER,
371                            'size_units' => [ 'px', '%' ],
372                            'range' => [
373                                'px' => [
374                                    'min' => 0,
375                                    'max' => 100,
376                                    'step' => 1,
377                                ],
378                                '%' => [
379                                    'min' => 0,
380                                    'max' => 100,
381                                ],
382                            ],
383                            'default' => [
384                                'unit' => 'px',
385                                'size' => 20,
386                            ],
387                            'selectors' => [
388                                '{{WRAPPER}} .htmega-popover span i' => 'font-size: {{SIZE}}{{UNIT}};',
389                                '{{WRAPPER}} .htmega-popover span svg' => 'width: {{SIZE}}{{UNIT}};',
390                            ],
391                            'condition'=>[
392                                'popover_button_type'=>'icon',
393                                'popover_button_icon[value]!'=>'',
394                            ]
395                        ]
396                    );
397
398                    $this->add_group_control(
399                        Group_Control_Background::get_type(),
400                        [
401                            'name' => 'button_background',
402                            'label' => __( 'Background', 'htmega-addons' ),
403                            'types' => [ 'classic', 'gradient' ],
404                            'selector' => '{{WRAPPER}} .htmega-popover span',
405                        ]
406                    );
407
408                    $this->add_group_control(
409                        Group_Control_Border::get_type(),
410                        [
411                            'name' => 'button_border',
412                            'label' => __( 'Border', 'htmega-addons' ),
413                            'selector' => '{{WRAPPER}} .htmega-popover span',
414                        ]
415                    );
416
417                    $this->add_responsive_control(
418                        'button_border_radius',
419                        [
420                            'label' => esc_html__( 'Border Radius', 'htmega-addons' ),
421                            'type' => Controls_Manager::DIMENSIONS,
422                            'selectors' => [
423                                '{{WRAPPER}} .htmega-popover span' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
424                            ],
425                        ]
426                    );
427
428                    $this->add_responsive_control(
429                        'button_margin',
430                        [
431                            'label' => __( 'Margin', 'htmega-addons' ),
432                            'type' => Controls_Manager::DIMENSIONS,
433                            'size_units' => [ 'px', '%', 'em' ],
434                            'selectors' => [
435                                '{{WRAPPER}} .htmega-popover span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
436                            ],
437                            'separator' =>'before',
438                        ]
439                    );
440
441                    $this->add_responsive_control(
442                        'button_padding',
443                        [
444                            'label' => __( 'Padding', 'htmega-addons' ),
445                            'type' => Controls_Manager::DIMENSIONS,
446                            'size_units' => [ 'px', '%', 'em' ],
447                            'selectors' => [
448                                '{{WRAPPER}} .htmega-popover span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
449                            ],
450                            'separator' =>'before',
451                        ]
452                    );
453
454                $this->end_controls_tab(); // Normal tab end
455
456                // Hover Tab start
457                $this->start_controls_tab(
458                    'button_style_hover_tab',
459                    [
460                        'label' => __( 'Hover', 'htmega-addons' ),
461                    ]
462                );
463                    $this->add_control(
464                        'button_hover_color',
465                        [
466                            'label' => __( 'Color', 'htmega-addons' ),
467                            'type' => Controls_Manager::COLOR,
468                            'default' => '#ffffff',
469                            'selectors' => [
470                                '{{WRAPPER}} .htmega-popover span:hover' => 'color: {{VALUE}};',
471                                '{{WRAPPER}} .htmega-popover span:hover svg path' => 'fill: {{VALUE}};',
472                            ],
473                        ]
474                    );
475
476                    $this->add_group_control(
477                        Group_Control_Background::get_type(),
478                        [
479                            'name' => 'button_hover_background',
480                            'label' => __( 'Background', 'htmega-addons' ),
481                            'types' => [ 'classic', 'gradient' ],
482                            'selector' => '{{WRAPPER}} .htmega-popover span:hover',
483                        ]
484                    );
485
486                    $this->add_group_control(
487                        Group_Control_Border::get_type(),
488                        [
489                            'name' => 'button_hover_border',
490                            'label' => __( 'Border', 'htmega-addons' ),
491                            'selector' => '{{WRAPPER}} .htmega-popover span:hover',
492                        ]
493                    );
494
495                $this->end_controls_tab();// Hover tab end
496
497            $this->end_controls_tabs();
498
499        $this->end_controls_section();
500
501        // Popover Style tab section
502        $this->start_controls_section(
503            'hover_popover_style_section',
504            [
505                'label' => __( 'Popover', 'htmega-addons' ),
506                'tab' => Controls_Manager::TAB_STYLE,
507            ]
508        );
509           
510            $this->start_controls_tabs('hover_popover_style_tabs');
511
512                $this->start_controls_tab(
513                    'hover_popover_area_tab',
514                    [
515                        'label' => __( 'Area', 'htmega-addons' ),
516                    ]
517                );
518                    $this->add_responsive_control(
519                        'hover_popover_area_width',
520                        [
521                            'label' => __( 'Width', 'htmega-addons' ),
522                            'type' => Controls_Manager::SLIDER,
523                            'size_units' => [ 'px', '%' ],
524                            'range' => [
525                                'px' => [
526                                    'min' => 0,
527                                    'max' => 1200,
528                                    'step' => 1,
529                                ],
530                                '%' => [
531                                    'min' => 0,
532                                    'max' => 100,
533                                ],
534                            ],
535                            'default' => [
536                                'unit' => 'px',
537                                'size' => 330,
538                            ],
539                            'selectors' => [
540                                '{{WRAPPER}} .htb-popover' => 'max-width: {{SIZE}}{{UNIT}};',
541                            ],
542                        ]
543                    );
544
545                    $this->add_group_control(
546                        Group_Control_Background::get_type(),
547                        [
548                            'name' => 'hover_popover_area_background',
549                            'label' => __( 'Background', 'htmega-addons' ),
550                            'types' => [ 'classic', 'gradient' ],
551                            'selector' => '{{WRAPPER}} .htb-popover',
552                        ]
553                    );
554
555                    $this->add_group_control(
556                        Group_Control_Box_Shadow::get_type(),
557                        [
558                            'name' => 'hover_popover_area_box_shadow',
559                            'label' => __( 'Box Shadow', 'htmega-addons' ),
560                            'selector' => '{{WRAPPER}} .htb-popover',
561                            'separator'=>'before',
562                        ]
563                    );
564
565                    $this->add_group_control(
566                        Group_Control_Border::get_type(),
567                        [
568                            'name' => 'hover_popover_area_border',
569                            'label' => __( 'Border', 'htmega-addons' ),
570                            'selector' => '{{WRAPPER}} .htb-popover',
571                        ]
572                    );
573
574                    $this->add_responsive_control(
575                        'hover_popover_area_border_radius',
576                        [
577                            'label' => esc_html__( 'Border Radius', 'htmega-addons' ),
578                            'type' => Controls_Manager::DIMENSIONS,
579                            'selectors' => [
580                                '{{WRAPPER}} .htb-popover' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
581                            ],
582                        ]
583                    );
584
585                $this->end_controls_tab();
586
587                // Header area tab
588                $this->start_controls_tab(
589                    'hover_popover_header_tab',
590                    [
591                        'label' => __( 'Header', 'htmega-addons' ),
592                        'condition'=>[
593                            'popover_header_text!'=>'',
594                        ],
595                    ]
596                );
597                   
598                    $this->add_group_control(
599                        Group_Control_Typography::get_type(),
600                        [
601                            'name' => 'hover_popover_header_typography',
602                            'selector' => '{{WRAPPER}} .htb-popover .htb-popover-header',
603                        ]
604                    );
605
606                    $this->add_control(
607                        'hover_popover_header_color',
608                        [
609                            'label' => __( 'Color', 'htmega-addons' ),
610                            'type' => Controls_Manager::COLOR,
611                            'default' => '#262626',
612                            'selectors' => [
613                                '{{WRAPPER}} .htb-popover .htb-popover-header' => 'color: {{VALUE}} !important;',
614                            ],
615                        ]
616                    );
617
618                    $this->add_responsive_control(
619                        'hover_popover_header_padding',
620                        [
621                            'label' => __( 'Padding', 'htmega-addons' ),
622                            'type' => Controls_Manager::DIMENSIONS,
623                            'size_units' => [ 'px', '%', 'em' ],
624                            'selectors' => [
625                                '{{WRAPPER}} .htb-popover .htb-popover-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
626                            ],
627                            'separator' =>'before',
628                        ]
629                    );
630
631                    $this->add_group_control(
632                        Group_Control_Background::get_type(),
633                        [
634                            'name' => 'hover_popover_header_background',
635                            'label' => __( 'Background', 'htmega-addons' ),
636                            'types' => [ 'classic', 'gradient' ],
637                            'selector' => '{{WRAPPER}} .htb-popover .htb-popover-header',
638                        ]
639                    );
640
641                    $this->add_group_control(
642                        Group_Control_Border::get_type(),
643                        [
644                            'name' => 'hover_popover_header_border',
645                            'label' => __( 'Border', 'htmega-addons' ),
646                            'selector' => '{{WRAPPER}} .htb-popover .htb-popover-header',
647                        ]
648                    );
649
650                    $this->add_responsive_control(
651                        'hover_popover_header_border_radius',
652                        [
653                            'label' => esc_html__( 'Border Radius', 'htmega-addons' ),
654                            'type' => Controls_Manager::DIMENSIONS,
655                            'selectors' => [
656                                '{{WRAPPER}} .htb-popover .htb-popover-header' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
657                            ],
658                        ]
659                    );
660
661                    $this->add_responsive_control(
662                        'hover_popover_header_align',
663                        [
664                            'label' => __( 'Alignment', 'htmega-addons' ),
665                            'type' => Controls_Manager::CHOOSE,
666                            'options' => [
667                                'left' => [
668                                    'title' => __( 'Left', 'htmega-addons' ),
669                                    'icon' => 'eicon-text-align-left',
670                                ],
671                                'center' => [
672                                    'title' => __( 'Center', 'htmega-addons' ),
673                                    'icon' => 'eicon-text-align-center',
674                                ],
675                                'right' => [
676                                    'title' => __( 'Right', 'htmega-addons' ),
677                                    'icon' => 'eicon-text-align-right',
678                                ],
679                                'justify' => [
680                                    'title' => __( 'Justified', 'htmega-addons' ),
681                                    'icon' => 'eicon-text-align-justify',
682                                ],
683                            ],
684                            'selectors' => [
685                                '{{WRAPPER}} .htb-popover .htb-popover-header' => 'text-align: {{VALUE}};',
686                            ],
687                            'default' => 'left',
688                            'separator' =>'before',
689                        ]
690                    );
691
692                $this->end_controls_tab();
693
694                // Content area tab
695                $this->start_controls_tab(
696                    'hover_popover_content_tab',
697                    [
698                        'label' => __( 'Content', 'htmega-addons' ),
699                    ]
700                );
701
702                    $this->add_group_control(
703                        Group_Control_Typography::get_type(),
704                        [
705                            'name' => 'hover_popover_content_typography',
706                            'selector' => '{{WRAPPER}} .htb-popover .htb-popover-body',
707                        ]
708                    );
709
710                    $this->add_control(
711                        'hover_popover_content_color',
712                        [
713                            'label' => __( 'Color', 'htmega-addons' ),
714                            'type' => Controls_Manager::COLOR,
715                            'default' => '#262626',
716                            'selectors' => [
717                                '{{WRAPPER}} .htb-popover .htb-popover-body' => 'color: {{VALUE}};',
718                            ],
719                        ]
720                    );
721
722                    $this->add_responsive_control(
723                        'hover_popover_content_padding',
724                        [
725                            'label' => __( 'Padding', 'htmega-addons' ),
726                            'type' => Controls_Manager::DIMENSIONS,
727                            'size_units' => [ 'px', '%', 'em' ],
728                            'selectors' => [
729                                '{{WRAPPER}} .htb-popover .htb-popover-body' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
730                            ],
731                            'separator' =>'before',
732                        ]
733                    );
734
735                    $this->add_group_control(
736                        Group_Control_Background::get_type(),
737                        [
738                            'name' => 'hover_popover_content_background',
739                            'label' => __( 'Background', 'htmega-addons' ),
740                            'types' => [ 'classic', 'gradient' ],
741                            'selector' => '{{WRAPPER}} .htb-popover .htb-popover-body',
742                        ]
743                    );
744
745                    $this->add_group_control(
746                        Group_Control_Border::get_type(),
747                        [
748                            'name' => 'hover_popover_content_border',
749                            'label' => __( 'Border', 'htmega-addons' ),
750                            'selector' => '{{WRAPPER}} .htb-popover .htb-popover-body',
751                        ]
752                    );
753
754                    $this->add_responsive_control(
755                        'hover_popover_content_border_radius',
756                        [
757                            'label' => esc_html__( 'Border Radius', 'htmega-addons' ),
758                            'type' => Controls_Manager::DIMENSIONS,
759                            'selectors' => [
760                                '{{WRAPPER}} .htb-popover .htb-popover-body' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
761                            ],
762                        ]
763                    );
764
765                    $this->add_responsive_control(
766                        'hover_popover_content_align',
767                        [
768                            'label' => __( 'Alignment', 'htmega-addons' ),
769                            'type' => Controls_Manager::CHOOSE,
770                            'options' => [
771                                'left' => [
772                                    'title' => __( 'Left', 'htmega-addons' ),
773                                    'icon' => 'eicon-text-align-left',
774                                ],
775                                'center' => [
776                                    'title' => __( 'Center', 'htmega-addons' ),
777                                    'icon' => 'eicon-text-align-center',
778                                ],
779                                'right' => [
780                                    'title' => __( 'Right', 'htmega-addons' ),
781                                    'icon' => 'eicon-text-align-right',
782                                ],
783                                'justify' => [
784                                    'title' => __( 'Justified', 'htmega-addons' ),
785                                    'icon' => 'eicon-text-align-justify',
786                                ],
787                            ],
788                            'selectors' => [
789                                '{{WRAPPER}} .htb-popover .htb-popover-body' => 'text-align: {{VALUE}};',
790                            ],
791                            'default' => 'left',
792                            'separator' =>'before',
793                        ]
794                    );
795
796                $this->end_controls_tab();
797
798                // Arrow area tab
799                $this->start_controls_tab(
800                    'hover_popover_arrow_tab',
801                    [
802                        'label' => __( 'Arrow', 'htmega-addons' ),
803                    ]
804                );
805
806                    $this->add_control(
807                        'hover_popover_arrow_color',
808                        [
809                            'label' => __( 'Arrow Border Color', 'htmega-addons' ),
810                            'type' => Controls_Manager::COLOR,
811                            'default' => '#e0e0e0',
812                            'selectors' => [
813                                '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=top] .htb-arrow::before' => 'border-top-color: {{VALUE}} !important;',
814                                '{{WRAPPER}} .htb-bs-popover-top .htb-arrow::before' => 'border-top-color: {{VALUE}} !important;',
815                                '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=bottom] .htb-arrow::before' => 'border-bottom-color: {{VALUE}} !important;',
816                                '{{WRAPPER}} .htb-bs-popover-bottom .htb-arrow::before' => 'border-bottom-color: {{VALUE}} !important;',
817                                '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=left] .htb-arrow::before' => 'border-left-color: {{VALUE}} !important;',
818                                '{{WRAPPER}} .htb-bs-popover-left .htb-arrow::before' => 'border-left-color: {{VALUE}} !important;',
819                                '{{WRAPPER}} .htb-bs-popover-auto[x-placement^=right] .htb-arrow::before' => 'border-right-color: {{VALUE}} !important;',
820                                '{{WRAPPER}} .htb-bs-popover-right .htb-arrow::before' => 'border-right-color: {{VALUE}} !important;',
821                            ],
822                        ]
823                    );
824
825                    $this->add_control(
826                        'hover_popover_arrow_bg_color',
827                        [
828                            'label' => __( 'Arrow Background Color', 'htmega-addons' ),
829                            'type' => Controls_Manager::COLOR,
830                            'default' => '#ffffff',
831                            'selectors' => [
832                                '{{WRAPPER}} .htb-popover.htb-bs-popover-auto[x-placement^="top"] .htb-arrow::after' => 'border-top-color: {{VALUE}} !important;',
833                                '{{WRAPPER}} .htb-popover.htb-bs-popover-top .htb-arrow::after' => 'border-top-color: {{VALUE}} !important;',
834                                '{{WRAPPER}} .htb-popover.htb-bs-popover-auto[x-placement^="bottom"] .htb-arrow::after' => 'border-top-color: {{VALUE}} !important;',
835                                '{{WRAPPER}} .htb-popover.htb-bs-popover-bottom .htb-arrow::after' => 'border-bottom-color: {{VALUE}} !important;',
836                                '{{WRAPPER}} .htb-popover.htb-bs-popover-auto[x-placement^="left"] .htb-arrow::after' => 'border-left-color: {{VALUE}} !important;',
837                                '{{WRAPPER}} .htb-popover.htb-bs-popover-left .htb-arrow::after' => 'border-left-color: {{VALUE}} !important;',
838                                '{{WRAPPER}} .htb-popover.htb-bs-popover-auto[x-placement^="right"] .htb-arrow::after' => 'border-right-color: {{VALUE}} !important;',
839                                '{{WRAPPER}} .htb-popover.htb-bs-popover-right .htb-arrow::after' => 'border-right-color: {{VALUE}} !important;',
840                            ],
841                        ]
842                    );
843
844                $this->end_controls_tab();
845
846            $this->end_controls_tabs();
847
848        $this->end_controls_section();
849
850    }
851
852    protected function render( $instance = [] ) {
853
854        $settings   = $this->get_settings_for_display();
855        $id = $this->get_id();
856        $this->add_render_attribute( 'htmega_popover_attr', 'class', 'htmega-popover htmega-popover-container-'.$id );
857
858        ?>
859           
860            <div <?php echo $this->get_render_attribute_string( 'htmega_popover_attr' ); ?>>
861                <?php
862
863                    $button_txt = $active_class = '';
864                    if( isset( $settings['popover_button_txt'] ) ){
865                        $button_txt = wp_kses_post( $settings['popover_button_txt'] );
866                    }
867                    if( isset( $settings['popover_button_icon']['value'] ) ){
868                        $button_txt = HTMega_Icon_manager::render_icon( $settings['popover_button_icon'], [ 'aria-hidden' => 'true' ] );
869                    }
870                    if( isset( $settings['popover_button_img']['url'] ) ){
871                        $button_txt = Group_Control_Image_Size::get_attachment_image_html( $settings, 'popover_button_imgsize', 'popover_button_img' );
872                    }
873                    if( $settings['show_popover'] == 'yes' ){
874                        $active_class = 'show';
875                    }
876
877                    // Button Generate
878                    if ( isset(  $settings['button_link']['url'] ) && ! empty( $settings['button_link']['url'] ) ) {
879                        $this->add_render_attribute( 'url', 'href', esc_url( $settings['button_link']['url'] ) );
880
881                        if ( $settings['button_link']['is_external'] ) {
882                            $this->add_render_attribute( 'url', 'target', '_blank' );
883                        }
884
885                        if ( ! empty( $settings['button_link']['nofollow'] ) ) {
886                            $this->add_render_attribute( 'url', 'rel', 'nofollow' );
887                        }
888                        $button_txt = sprintf( '<a %1$s>%2$s</a>', $this->get_render_attribute_string( 'url' ), $button_txt );
889                    }
890
891                    echo sprintf('<span class="%1$s" data-container=".htmega-popover-container-%6$s" data-toggle="popover" data-placement="%2$s" data-content="%3$s" title="%4$s">%5$s</span>', esc_attr( $active_class ), esc_attr( $settings['popover_dir'] ), htmega_kses_desc( $settings['popover_text'] ), htmega_kses_title( $settings['popover_header_text'] ),  $button_txt, esc_attr( $id ) );
892                ?>
893            </div>
894
895        <?php
896
897    }
898
899}
900
Note: See TracBrowser for help on using the repository browser.