PluginProbe
WPB Addons for Elementor – News Ticker, Timeline, Team & More Widgets / 1.2
WPB Addons for Elementor – News Ticker, Timeline, Team & More Widgets v1.2
trunk 1.0.8.7 1.0.8.8 1.0.8.9 1.0.9 1.2 1.3 1.4 1.5 1.6 1.7
wpb-elementor-addons / templates / content_box.php

content_box.php in WPB Addons for Elementor – News Ticker, Timeline, Team & More Widgets 1.2, at templates/content_box.php

1,040 lines 31.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * @author WpBean
4 * @version 1.0
5 */
6
7 if ( ! defined( 'ABSPATH' ) ) {
8 exit; // Exit if accessed directly.
9 }
10
11 use Elementor\Controls_Manager;
12 use Elementor\Group_Control_Border;
13 use Elementor\Group_Control_Box_Shadow;
14 use Elementor\Group_Control_Image_Size;
15 use Elementor\Group_Control_Typography;
16
17
18 class WPB_EA_Widget_Content_Box extends \Elementor\Widget_Base {
19
20 public function get_name() {
21 return 'wpb-our-content-box';
22 }
23
24 public function get_title() {
25 return esc_html__( 'WPB Content Box', 'wpb-elementor-addons' );
26 }
27
28 public function get_icon() {
29 return 'eicon-info-box';
30 }
31
32 public function get_categories() {
33 return array( 'wpb_ea_widgets' );
34 }
35
36 /**
37 * Retrieve the list of scripts the counter widget depended on.
38 *
39 * Used to set scripts dependencies required to run the widget.
40 *
41 * @since 1.3.0
42 * @access public
43 *
44 * @return array Widget scripts dependencies.
45 */
46 public function get_script_depends() {
47 return array(
48 'wpb-ea-owl-carousel',
49 'wpb-ea-super-js',
50 );
51 }
52
53 protected function register_controls() {
54
55 $wpb_ea_primary_color = wpb_ea_get_option( 'wpb_ea_primary_color', 'wpb_ea_style', '#3878ff' );
56
57 // content box section
58 $this->start_controls_section(
59 'wpb_ea_content_box_content',
60 array(
61 'label' => esc_html__( 'Content Box', 'wpb-elementor-addons' ),
62 )
63 );
64
65 // content box conent type
66 $this->add_control(
67 'wpb_ea_content_box_content_type',
68 array(
69 'label' => esc_html__( 'Content Type', 'wpb-elementor-addons' ),
70 'type' => Controls_Manager::SELECT,
71 'default' => 'slider',
72 'options' => array(
73 'slider' => esc_html__( 'Slider', 'wpb-elementor-addons' ),
74 'grid' => esc_html__( 'Grid', 'wpb-elementor-addons' ),
75 ),
76 'separator' => 'after',
77 )
78 );
79
80 $repeater = new \Elementor\Repeater();
81
82 $repeater->add_control(
83 'image',
84 array(
85 'label' => esc_html__( 'Image', 'wpb-elementor-addons' ),
86 'type' => Controls_Manager::MEDIA,
87 )
88 );
89
90 $repeater->add_control(
91 'wpb_ea_content_box_title',
92 array(
93 'label' => esc_html__( 'Title', 'wpb-elementor-addons' ),
94 'type' => \Elementor\Controls_Manager::TEXT,
95 'label_block' => true,
96 'placeholder' => esc_html__( 'Place your title text here.', 'wpb-elementor-addons' ),
97 'default' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
98 )
99 );
100
101 $repeater->add_control(
102 'wpb_ea_content_box_text',
103 array(
104 'label' => esc_html__( 'Description', 'wpb-elementor-addons' ),
105 'type' => \Elementor\Controls_Manager::WYSIWYG,
106 'placeholder' => esc_html__( 'Place your description text here.', 'wpb-elementor-addons' ),
107 'default' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries.', 'wpb-elementor-addons' ),
108 )
109 );
110
111 $repeater->add_control(
112 'wpb_ea_content_box_item_bg',
113 array(
114 'label' => esc_html__( 'Item Background', 'wpb-elementor-addons' ),
115 'type' => \Elementor\Controls_Manager::SELECT,
116 'default' => 'default',
117 'options' => array(
118 'default' => esc_html__( 'White', 'wpb-elementor-addons' ),
119 'blue' => esc_html__( 'Blue', 'wpb-elementor-addons' ),
120 'purple' => esc_html__( 'Purple', 'wpb-elementor-addons' ),
121 'red' => esc_html__( 'Red', 'wpb-elementor-addons' ),
122 'orange' => esc_html__( 'Orange', 'wpb-elementor-addons' ),
123 'coral' => esc_html__( 'Coral', 'wpb-elementor-addons' ),
124 'sky_blue' => esc_html__( 'Sky blue', 'wpb-elementor-addons' ),
125 'wet_asphalt' => esc_html__( 'Grey', 'wpb-elementor-addons' ),
126 'tomato' => esc_html__( 'Bruschetta Tomato', 'wpb-elementor-addons' ),
127 ),
128 )
129 );
130
131 // content box field options
132 $this->add_control(
133 'wpb_ea_content_box_items',
134 array(
135 'label' => esc_html__( 'Content Items', 'wpb-elementor-addons' ),
136 'type' => \Elementor\Controls_Manager::REPEATER,
137 'default' => array(
138 array(
139 'wpb_ea_content_box_title' => esc_html__( 'Content Box 1', 'wpb-elementor-addons' ),
140 'wpb_ea_content_box_text' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
141 ),
142 array(
143 'wpb_ea_content_box_title' => esc_html__( 'Content Box 2', 'wpb-elementor-addons' ),
144 'wpb_ea_content_box_text' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
145 ),
146 array(
147 'wpb_ea_content_box_title' => esc_html__( 'Content Box 3', 'wpb-elementor-addons' ),
148 'wpb_ea_content_box_text' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
149 ),
150 array(
151 'wpb_ea_content_box_title' => esc_html__( 'Content Box 4', 'wpb-elementor-addons' ),
152 'wpb_ea_content_box_text' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
153 ),
154 array(
155 'wpb_ea_content_box_title' => esc_html__( 'Content Box 5', 'wpb-elementor-addons' ),
156 'wpb_ea_content_box_text' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
157 ),
158 array(
159 'wpb_ea_content_box_title' => esc_html__( 'Content Box 6', 'wpb-elementor-addons' ),
160 'wpb_ea_content_box_text' => esc_html__( 'Lorem Ipsum is placeholder text commonly used in the graphic, print.', 'wpb-elementor-addons' ),
161 ),
162 ),
163 'fields' => $repeater->get_controls(),
164 'title_field' => '{{{ wpb_ea_content_box_title }}}',
165 )
166 );
167
168 // content box extra CSS heading
169 $this->add_control(
170 'wpb_ea_content_box_extra_css_heading',
171 array(
172 'label' => esc_html__( 'Extra CSS', 'wpb-elementor-addons' ),
173 'type' => Controls_Manager::HEADING,
174 'separator' => 'before',
175 )
176 );
177
178 // extra CSS class
179 $this->add_control(
180 'extra_css',
181 array(
182 'label' => esc_html__( 'Extra CSS clss', 'wpb-elementor-addons' ),
183 'type' => Controls_Manager::TEXT,
184 'description' => esc_html__( 'Put your extra CSS class if you need.', 'wpb-elementor-addons' ),
185 'placeholder' => esc_html__( 'your-extra-css-class', 'wpb-elementor-addons' ),
186 )
187 );
188
189 $this->end_controls_section();
190
191 /**
192 * -------------------------------------------
193 * content box settings tab starts here
194 * -------------------------------------------
195 */
196
197 /**
198 * -------------------------------------------
199 * content box item's carousel section
200 * -------------------------------------------
201 */
202 $this->start_controls_section(
203 'wpb_ea_content_box_carousel_settings',
204 array(
205 'label' => esc_html__( 'Carousel Settings', 'wpb-elementor-addons' ),
206 'tab' => Controls_Manager::TAB_SETTINGS,
207 'condition' => array(
208 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
209 ),
210 )
211 );
212
213 // show navigation?
214 $this->add_control(
215 'arrows',
216 array(
217 'type' => Controls_Manager::SWITCHER,
218 'label' => esc_html__( 'Show Prev/Next Arrows?', 'wpb-elementor-addons' ),
219 'default' => 'yes',
220 'return_value' => 'yes',
221 )
222 );
223
224 // show pagination?
225 $this->add_control(
226 'dots',
227 array(
228 'type' => Controls_Manager::SWITCHER,
229 'label' => esc_html__( 'Show dot indicators for navigation?', 'wpb-elementor-addons' ),
230 'default' => 'no',
231 'return_value' => 'yes',
232 )
233 );
234
235 // pause on hover?
236 $this->add_control(
237 'pause_on_hover',
238 array(
239 'type' => Controls_Manager::SWITCHER,
240 'label' => esc_html__( 'Pause on Hover?', 'wpb-elementor-addons' ),
241 'default' => 'no',
242 'return_value' => 'yes',
243 )
244 );
245
246 // slider autoplay?
247 $this->add_control(
248 'autoplay',
249 array(
250 'type' => Controls_Manager::SWITCHER,
251 'label' => esc_html__( 'Autoplay?', 'wpb-elementor-addons' ),
252 'default' => 'no',
253 'return_value' => 'yes',
254 'description' => esc_html__( 'Show the carousel autoplay as in a slideshow.', 'wpb-elementor-addons' ),
255 )
256 );
257
258 // slider loop?
259 $this->add_control(
260 'loop',
261 array(
262 'type' => Controls_Manager::SWITCHER,
263 'label' => esc_html__( 'Loop?', 'wpb-elementor-addons' ),
264 'default' => 'no',
265 'return_value' => 'yes',
266 'description' => esc_html__( 'Show the carousel loop as in a slideshow.', 'wpb-elementor-addons' ),
267 )
268 );
269
270 // margin between two slider items
271 $this->add_control(
272 'slidergap',
273 array(
274 'label' => esc_html__( 'Gap between the slider items', 'wpb-elementor-addons' ),
275 'type' => Controls_Manager::SLIDER,
276 'default' => array(
277 'size' => 30,
278 ),
279 'range' => array(
280 'px' => array(
281 'min' => 0,
282 'max' => 300,
283 ),
284 ),
285 )
286 );
287
288 // margin below the slider item
289 $this->add_control(
290 'slider_item_margin_bottom',
291 array(
292 'label' => esc_html__( 'Gap below the slider item', 'wpb-elementor-addons' ),
293 'type' => \Elementor\Controls_Manager::SLIDER,
294 'range' => array(
295 'px' => array(
296 'min' => 0,
297 'max' => 300,
298 ),
299 ),
300 'selectors' => array(
301 '{{WRAPPER}} .wpb-ea-content-items-slider .wpb-ea-content-box' => 'margin-bottom: {{SIZE}}{{UNIT}};',
302 ),
303 )
304 );
305
306 $this->end_controls_section();
307
308 /**
309 * -------------------------------------------
310 * content box item's responsive section
311 * -------------------------------------------
312 */
313 $this->start_controls_section(
314 'section_responsive',
315 array(
316 'label' => esc_html__( 'Responsive Options', 'wpb-elementor-addons' ),
317 'tab' => Controls_Manager::TAB_SETTINGS,
318 )
319 );
320
321 $this->add_control(
322 'heading_desktop',
323 array(
324 'label' => esc_html__( 'Desktop', 'wpb-elementor-addons' ),
325 'type' => Controls_Manager::HEADING,
326 )
327 );
328
329 // content box type grid desktop column
330 $this->add_control(
331 'content_box_type_grid_desktop_column',
332 array(
333 'label' => esc_html__( 'Number of Columns', 'wpb-elementor-addons' ),
334 'type' => Controls_Manager::SELECT,
335 'default' => 3,
336 'options' => array(
337 6 => esc_html__( '6 Columns', 'wpb-elementor-addons' ),
338 4 => esc_html__( '4 Columns', 'wpb-elementor-addons' ),
339 3 => esc_html__( '3 Columns', 'wpb-elementor-addons' ),
340 2 => esc_html__( '2 Columns', 'wpb-elementor-addons' ),
341 1 => esc_html__( '1 Columns', 'wpb-elementor-addons' ),
342 ),
343 'condition' => array(
344 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'grid',
345 ),
346 )
347 );
348
349 // number of items in desktop
350 $this->add_control(
351 'desktop_columns',
352 array(
353 'label' => esc_html__( 'Columns per row', 'wpb-elementor-addons' ),
354 'type' => Controls_Manager::NUMBER,
355 'min' => 1,
356 'max' => 8,
357 'step' => 1,
358 'default' => 3,
359 'condition' => array(
360 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
361 ),
362 )
363 );
364
365 $this->add_control(
366 'small_heading_desktop',
367 array(
368 'label' => esc_html__( 'Desktop Small', 'wpb-elementor-addons' ),
369 'type' => Controls_Manager::HEADING,
370 'separator' => 'before',
371 'condition' => array(
372 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
373 ),
374 )
375 );
376
377 // number of items in small desktop
378 $this->add_control(
379 'small_desktop_columns',
380 array(
381 'label' => esc_html__( 'Columns per row', 'wpb-elementor-addons' ),
382 'type' => Controls_Manager::NUMBER,
383 'min' => 1,
384 'max' => 7,
385 'step' => 1,
386 'default' => 3,
387 'condition' => array(
388 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
389 ),
390 )
391 );
392
393 $this->add_control(
394 'heading_tablet',
395 array(
396 'label' => esc_html__( 'Tablet', 'wpb-elementor-addons' ),
397 'type' => Controls_Manager::HEADING,
398 'separator' => 'before',
399 )
400 );
401
402 // number of items in tablet
403 $this->add_control(
404 'tablet_display_columns',
405 array(
406 'label' => esc_html__( 'Columns per row', 'wpb-elementor-addons' ),
407 'type' => Controls_Manager::NUMBER,
408 'min' => 1,
409 'max' => 5,
410 'step' => 1,
411 'default' => 2,
412 'condition' => array(
413 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
414 ),
415 )
416 );
417
418 // content box type grid tablet column
419 $this->add_control(
420 'content_box_type_grid_tablet_column',
421 array(
422 'label' => esc_html__( 'Column', 'wpb-elementor-addons' ),
423 'type' => Controls_Manager::SELECT,
424 'default' => 2,
425 'options' => array(
426 6 => esc_html__( '6 Columns', 'wpb-elementor-addons' ),
427 4 => esc_html__( '4 Columns', 'wpb-elementor-addons' ),
428 3 => esc_html__( '3 Columns', 'wpb-elementor-addons' ),
429 2 => esc_html__( '2 Columns', 'wpb-elementor-addons' ),
430 1 => esc_html__( '1 Columns', 'wpb-elementor-addons' ),
431 ),
432 'condition' => array(
433 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'grid',
434 ),
435 )
436 );
437
438 $this->add_control(
439 'heading_mobile',
440 array(
441 'label' => esc_html__( 'Mobile Phone', 'wpb-elementor-addons' ),
442 'type' => Controls_Manager::HEADING,
443 'separator' => 'before',
444 'condition' => array(
445 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
446 ),
447 )
448 );
449
450 // number of items in mobile
451 $this->add_control(
452 'mobile_display_columns',
453 array(
454 'label' => esc_html__( 'Columns per row', 'wpb-elementor-addons' ),
455 'type' => Controls_Manager::NUMBER,
456 'min' => 1,
457 'max' => 3,
458 'step' => 1,
459 'default' => 1,
460 'condition' => array(
461 '.wpb_ea_content_box.wpb_ea_content_box_content_type' => 'slider',
462 ),
463 )
464 );
465
466 $this->end_controls_section();
467
468 /**
469 * -------------------------------------------
470 * content box settings tab ends here
471 * -------------------------------------------
472 */
473
474 /**
475 * -------------------------------------------
476 * content box style tab starts here
477 * -------------------------------------------
478 */
479
480 /**
481 * -------------------------------------------
482 * content box style
483 * -------------------------------------------
484 */
485 $this->start_controls_section(
486 'wpb_ea_content_box_style_section',
487 array(
488 'label' => esc_html__( 'Content Box Style', 'wpb-elementor-addons' ),
489 'tab' => Controls_Manager::TAB_STYLE,
490 )
491 );
492
493 // content box background color
494 $this->add_control(
495 'wpb_ea_content_box_bg_color',
496 array(
497 'label' => esc_html__( 'Background Color', 'wpb-elementor-addons' ),
498 'type' => \Elementor\Controls_Manager::COLOR,
499 'default' => '#ffffff',
500 'selectors' => array(
501 '{{WRAPPER}} .wpb-ea-content-box' => 'background-color: {{VALUE}};',
502 ),
503 )
504 );
505
506 // content box padding
507 $this->add_control(
508 'wpb_ea_content_box_padding',
509 array(
510 'label' => esc_html__( 'Padding', 'wpb-elementor-addons' ),
511 'type' => \Elementor\Controls_Manager::DIMENSIONS,
512 'size_units' => array( 'px', 'em', '%' ),
513 'default' => array(
514 'top' => 27,
515 'bottom' => 27,
516 'left' => 30,
517 'right' => 30,
518 ),
519 'selectors' => array(
520 '{{WRAPPER}} .wpb-ea-content-box .wpb-ea-content-box-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
521 ),
522 )
523 );
524
525 // content box margin
526 $this->add_control(
527 'wpb_ea_content_box_margin',
528 array(
529 'label' => esc_html__( 'Margin', 'wpb-elementor-addons' ),
530 'type' => \Elementor\Controls_Manager::DIMENSIONS,
531 'size_units' => array( 'px', 'em', '%' ),
532 'default' => array(
533 'bottom' => 30,
534 ),
535 'selectors' => array(
536 '{{WRAPPER}} .wpb-ea-content-items-grid .wpb-ea-content-box' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
537 ),
538 'condition' => array(
539 '.wpb_ea_content_box_content.wpb_ea_content_box_content_type' => 'grid',
540 ),
541 )
542 );
543
544 // content box border type
545 $this->add_group_control(
546 Group_Control_Border::get_type(),
547 array(
548 'name' => 'wpb_ea_content_box_border_type',
549 'label' => esc_html__( 'Border Type', 'wpb-elementor-addons' ),
550 'selector' => '{{WRAPPER}} .wpb-ea-content-box',
551 )
552 );
553
554 // content box border radius
555 $this->add_control(
556 'wpb_ea_content_box_border_radius',
557 array(
558 'label' => esc_html__( 'Border Radius', 'wpb-elementor-addons' ),
559 'type' => Controls_Manager::SLIDER,
560 'range' => array(
561 'px' => array(
562 'max' => 50,
563 ),
564 ),
565 'selectors' => array(
566 '{{WRAPPER}} .wpb-ea-content-box' => 'border-radius: {{SIZE}}px;',
567 ),
568 )
569 );
570
571 // content box box shadow
572 $this->add_group_control(
573 Group_Control_Box_Shadow::get_type(),
574 array(
575 'name' => 'wpb_ea_custom_content_box_shadow',
576 'label' => esc_html__( 'Box Shadow', 'wpb-elementor-addons' ),
577 'selector' => '{{WRAPPER}} .wpb-ea-content-items-grid .wpb-ea-content-box',
578 )
579 );
580
581 // content box alignment
582 $this->add_responsive_control(
583 'wpb_ea_content_box_align',
584 array(
585 'label' => esc_html__( 'Alignment', 'wpb-elementor-addons' ),
586 'type' => \Elementor\Controls_Manager::CHOOSE,
587 'options' => array(
588 'left' => array(
589 'title' => esc_html__( 'Left', 'wpb-elementor-addons' ),
590 'icon' => 'fa fa-align-left',
591 ),
592 'center' => array(
593 'title' => esc_html__( 'Center', 'wpb-elementor-addons' ),
594 'icon' => 'fa fa-align-center',
595 ),
596 'right' => array(
597 'title' => esc_html__( 'Right', 'wpb-elementor-addons' ),
598 'icon' => 'fa fa-align-right',
599 ),
600 'justify' => array(
601 'title' => esc_html__( 'Justified', 'wpb-elementor-addons' ),
602 'icon' => 'fa fa-align-justify',
603 ),
604 ),
605 'default' => 'left',
606 'selectors' => array(
607 '{{WRAPPER}} .wpb-ea-content-box-inner' => 'text-align: {{VALUE}};',
608 ),
609 )
610 );
611
612 $this->end_controls_section();
613
614 /**
615 * -------------------------------------------
616 * content box image style
617 * -------------------------------------------
618 */
619 $this->start_controls_section(
620 'wpb_ea_content_box_image_style',
621 array(
622 'label' => esc_html__( 'Image', 'wpb-elementor-addons' ),
623 'tab' => Controls_Manager::TAB_STYLE,
624 )
625 );
626
627 // content box image enable(lightbox)
628 $this->add_control(
629 'wpb_ea_content_box_image_lightbox_enable',
630 array(
631 'label' => esc_html__( 'Enable Lightbox', 'wpb-elementor-addons' ),
632 'type' => Controls_Manager::SWITCHER,
633 'default' => 'no',
634 'return_value' => 'yes',
635 )
636 );
637
638 // content box image type
639 $this->add_group_control(
640 Group_Control_Image_Size::get_type(),
641 array(
642 'name' => 'image_size',
643 'label' => esc_html__( 'Image Size', 'wpb-elementor-addons' ),
644 'default' => 'medium_large',
645 )
646 );
647
648 // content box image custom height?
649 $this->add_control(
650 'wpb_ea_content_box_custom_image_height',
651 array(
652 'label' => esc_html__( 'Custom Height?', 'wpb-elementor-addons' ),
653 'type' => \Elementor\Controls_Manager::SWITCHER,
654 'default' => 'no',
655 'return_value' => 'yes',
656 )
657 );
658
659 // content box image height
660 $this->add_control(
661 'wpb_ea_content_box_image_height',
662 array(
663 'label' => esc_html__( 'Image height', 'wpb-elementor-addons' ),
664 'type' => Controls_Manager::SLIDER,
665 'default' => array(
666 'size' => 270,
667 ),
668 'range' => array(
669 'px' => array(
670 'min' => 1,
671 'max' => 1000,
672 'step' => 1,
673 ),
674 ),
675 'selectors' => array(
676 '{{WRAPPER}} .wpb-ea-content-box img' => 'height: {{SIZE}}{{UNIT}};',
677 ),
678 'condition' => array(
679 '.wpb_ea_content_box_custom_image_height' => 'yes',
680 ),
681 )
682 );
683
684 // content box image padding
685 $this->add_control(
686 'wpb_ea_content_box_image_padding_style',
687 array(
688 'label' => esc_html__( 'Padding', 'wpb-elementor-addons' ),
689 'type' => \Elementor\Controls_Manager::DIMENSIONS,
690 'size_units' => array( 'px' ),
691 'selectors' => array(
692 '{{WRAPPER}} .wpb-ea-content-box img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
693 ),
694 )
695 );
696
697 // content box image margin
698 $this->add_control(
699 'wpb_ea_content_box_image_margin_style',
700 array(
701 'label' => esc_html__( 'Margin', 'wpb-elementor-addons' ),
702 'type' => \Elementor\Controls_Manager::DIMENSIONS,
703 'size_units' => array( 'px' ),
704 'selectors' => array(
705 '{{WRAPPER}} .wpb-ea-content-box img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
706 ),
707 )
708 );
709
710 // content box image border type
711 $this->add_group_control(
712 Group_Control_Border::get_type(),
713 array(
714 'name' => 'wpb_ea_content_box_image_border_type',
715 'label' => esc_html__( 'Border Type', 'wpb-elementor-addons' ),
716 'selector' => '{{WRAPPER}} .wpb-ea-content-box img',
717 )
718 );
719
720 // content box image border radius
721 $this->add_control(
722 'wpb_ea_content_box_image_border_radius_style',
723 array(
724 'label' => esc_html__( 'Border Radius', 'wpb-elementor-addons' ),
725 'type' => \Elementor\Controls_Manager::DIMENSIONS,
726 'size_units' => array( 'px', '%' ),
727 'selectors' => array(
728 '{{WRAPPER}} .wpb-ea-content-box img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
729 ),
730 )
731 );
732
733 // content box image box shadow
734 $this->add_group_control(
735 \Elementor\Group_Control_Box_Shadow::get_type(),
736 array(
737 'name' => 'wpb_ea_content_box_image_box_shadow_style',
738 'selector' => '{{WRAPPER}} .wpb-ea-content-box img',
739 'separator' => '',
740 )
741 );
742
743 $this->end_controls_section();
744
745 /**
746 * -------------------------------------------
747 * content box content style
748 * -------------------------------------------
749 */
750 $this->start_controls_section(
751 'wpb_ea_content_box_typography_section',
752 array(
753 'label' => esc_html__( 'Content Style', 'wpb-elementor-addons' ),
754 'tab' => Controls_Manager::TAB_STYLE,
755 )
756 );
757
758 // content box title style
759 $this->add_control(
760 'wpb_ea_content_box_title_style',
761 array(
762 'label' => esc_html__( 'Title', 'wpb-elementor-addons' ),
763 'type' => Controls_Manager::HEADING,
764 )
765 );
766
767 // content box title color
768 $this->add_control(
769 'wpb_ea_content_box_title_color',
770 array(
771 'label' => esc_html__( 'Color', 'wpb-elementor-addons' ),
772 'type' => \Elementor\Controls_Manager::COLOR,
773 'default' => '#000000',
774 'selectors' => array(
775 '{{WRAPPER}} .wpb-ea-content-box-inner h3' => 'color: {{VALUE}};',
776 ),
777 )
778 );
779
780 // content box title typography
781 $this->add_group_control(
782 Group_Control_Typography::get_type(),
783 array(
784 'name' => 'wpb_ea_content_box_title_typography',
785 'selector' => '{{WRAPPER}} .wpb-ea-content-box-inner h3',
786 )
787 );
788
789 // content box title margin
790 $this->add_control(
791 'wpb_ea_content_box_title_margin',
792 array(
793 'label' => esc_html__( 'Margin', 'wpb-elementor-addons' ),
794 'type' => \Elementor\Controls_Manager::DIMENSIONS,
795 'size_units' => array( 'px' ),
796 'selectors' => array(
797 '{{WRAPPER}} .wpb-ea-content-box-inner h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
798 ),
799 )
800 );
801
802 // content box description style
803 $this->add_control(
804 'wpb_ea_content_box_description_style',
805 array(
806 'label' => esc_html__( 'Description Style', 'wpb-elementor-addons' ),
807 'type' => Controls_Manager::HEADING,
808 'separator' => 'before',
809 )
810 );
811
812 // content box description color
813 $this->add_control(
814 'wpb_ea_content_box_description_color',
815 array(
816 'label' => esc_html__( 'Description Color', 'wpb-elementor-addons' ),
817 'type' => \Elementor\Controls_Manager::COLOR,
818 'default' => '#777777',
819 'selectors' => array(
820 '{{WRAPPER}} .wpb-ea-content-box-inner span.wpb-ea-content-box-text p' => 'color: {{VALUE}};',
821 ),
822 )
823 );
824
825 // content box description typography
826 $this->add_group_control(
827 Group_Control_Typography::get_type(),
828 array(
829 'name' => 'wpb_ea_content_box_description_typography',
830 'selector' => '{{WRAPPER}} .wpb-ea-content-box-inner span.wpb-ea-content-box-text p',
831 )
832 );
833
834 // content box description margin
835 $this->add_control(
836 'wpb_ea_content_box_description_margin',
837 array(
838 'label' => esc_html__( 'Margin', 'wpb-elementor-addons' ),
839 'type' => \Elementor\Controls_Manager::DIMENSIONS,
840 'size_units' => array( 'px' ),
841 'selectors' => array(
842 '{{WRAPPER}} .wpb-ea-content-box-text p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
843 ),
844 )
845 );
846
847 $this->end_controls_section();
848
849 /**
850 * -------------------------------------------
851 * content box carousel style
852 * -------------------------------------------
853 */
854 $this->start_controls_section(
855 'wpb_ea_content_box_carousel_setting_style_options',
856 array(
857 'label' => esc_html__( 'Carousel', 'wpb-elementor-addons' ),
858 'tab' => Controls_Manager::TAB_STYLE,
859 'condition' => array(
860 '.wpb_ea_content_box_content.wpb_ea_content_box_content_type' => 'slider',
861 ),
862 )
863 );
864
865 // navigation background color
866 $this->add_control(
867 'wpb_ea_content_box_carousel_navigation_bg_color',
868 array(
869 'type' => \Elementor\Controls_Manager::COLOR,
870 'label' => esc_html__( 'Navigation Background Color', 'wpb-elementor-addons' ),
871 'default' => $wpb_ea_primary_color,
872 'selectors' => array(
873 '{{WRAPPER}} .wpb-ea-content-items-slider.owl-theme .owl-nav [class*=owl-]' => 'background: {{VALUE}};',
874 ),
875 'condition' => array(
876 '.wpb_ea_content_box_carousel_settings.arrows!' => '',
877 ),
878
879 )
880 );
881
882 // navigation color
883 $this->add_control(
884 'wpb_ea_content_box_carousel_navigation_color',
885 array(
886 'type' => \Elementor\Controls_Manager::COLOR,
887 'label' => esc_html__( 'Navigation Color', 'wpb-elementor-addons' ),
888 'default' => '#ffffff',
889 'selectors' => array(
890 '{{WRAPPER}} .wpb-ea-content-items-slider .owl-prev .fa' => 'color: {{VALUE}};',
891 '{{WRAPPER}} .wpb-ea-content-items-slider .owl-next .fa' => 'color: {{VALUE}};',
892 ),
893 'condition' => array(
894 '.wpb_ea_content_box_carousel_settings.arrows!' => '',
895 ),
896 )
897 );
898
899 // pagination background color
900 $this->add_control(
901 'wpb_ea_content_box_carousel_pagination_bg_color',
902 array(
903 'type' => \Elementor\Controls_Manager::COLOR,
904 'label' => esc_html__( 'Pagination Color', 'wpb-elementor-addons' ),
905 'default' => $wpb_ea_primary_color,
906 'selectors' => array(
907 '{{WRAPPER}} .wpb-ea-content-items-slider.owl-theme .owl-dots .owl-dot span' => 'border-color: {{VALUE}}; background-color: {{VALUE}};',
908 ),
909 'condition' => array(
910 '.wpb_ea_content_box_carousel_settings.dots!' => '',
911 ),
912 )
913 );
914
915 $this->end_controls_section();
916
917 /**
918 * -------------------------------------------
919 * content box style tab ends here
920 * -------------------------------------------
921 */
922 }
923
924 // render image function
925 private function render_image( $item, $settings ) {
926 $image_id = $item['image']['id'];
927 $image_size = $settings['image_size_size'];
928 if ( 'custom' === $image_size ) {
929 $image_src = Group_Control_Image_Size::get_attachment_image_src( $image_id, 'image_size', $settings );
930 } else {
931 $image_src = wp_get_attachment_image_src( $image_id, $image_size );
932 if ( ! empty( $image_src ) ) {
933 $image_src = $image_src[0];
934 }
935 }
936
937 return sprintf( '<img src="%s" alt="%s" />', esc_url( $image_src ), esc_html( $item['wpb_ea_content_box_text'] ) );
938 }
939
940 protected function render() {
941 $settings = $this->get_settings_for_display();
942 $extra_css = $settings['extra_css'];
943 if ( $extra_css ) {
944 $extra_css = $extra_css . ' ';
945 }
946
947 // slider attributes
948 $stop = $settings['pause_on_hover'];
949 $autoplay = $settings['autoplay'];
950 $loop = $settings['loop'];
951 $slidergap = ( ! empty( $settings['slidergap']['size'] ) ? $settings['slidergap']['size'] : '' );
952 $items = $settings['desktop_columns'];
953 $desktopsmall = $settings['small_desktop_columns'];
954 $tablet = $settings['tablet_display_columns'];
955 $mobile = $settings['mobile_display_columns'];
956 $navigation = $settings['arrows'];
957 $pagination = $settings['dots'];
958 $slider_attr = array(
959 'data-stop' => ( $stop == 'yes' ? 'true' : 'false' ),
960 'data-loop' => ( $loop == 'yes' ? 'true' : 'false' ),
961 'data-autoplay' => ( $autoplay == 'yes' ? 'true' : 'false' ),
962 'data-slidergap' => $slidergap,
963 'data-items' => $items,
964 'data-desktopsmall' => $desktopsmall,
965 'data-tablet' => $tablet,
966 'data-mobile' => $mobile,
967 'data-navigation' => ( $navigation == 'yes' ? 'true' : 'false' ),
968 'data-pagination' => ( $pagination == 'yes' ? 'true' : 'false' ),
969 'data-direction' => ( is_rtl() ? 'true' : '' ),
970 );
971
972 // content box type grid column options
973 if ( $settings['wpb_ea_content_box_content_type'] == 'grid' ) {
974 $grid_desktop_column = 12 / $settings['content_box_type_grid_desktop_column'];
975 $grid_tablet_column = 12 / $settings['content_box_type_grid_tablet_column'];
976 $grid_column = 'col-lg-' . esc_attr( $grid_desktop_column ) . ' col-md-' . esc_attr( $grid_tablet_column );
977 }
978
979 if ( is_array( $settings['wpb_ea_content_box_items'] ) ) :
980 echo '<div class="' . esc_attr( $extra_css ) . 'wpb-ea-content-items-' . ( $settings['wpb_ea_content_box_content_type'] == 'slider' ? 'slider owl-carousel owl-theme" ' . wp_kses_data( wpb_ea_owl_carousel_data_attr_implode( $slider_attr ) ) : 'grid ea-row"' ) . '>';
981 foreach ( $settings['wpb_ea_content_box_items'] as $item ) :
982 echo $settings['wpb_ea_content_box_content_type'] == 'grid' ? '<div class="' . esc_attr( $grid_column ) . '">' : '';
983 echo '<div class="wpb-ea-content-box wpb-ea-content-box-bg-' . esc_attr( $item['wpb_ea_content_box_item_bg'] ) . '">';
984 if ( ! empty( $item['image']['url'] ) ) {
985 echo '<div class="wpb-ea-content-box-image">';
986 if ( ( $settings['wpb_ea_content_box_image_lightbox_enable'] == 'yes' ) ) {
987 echo '<a href="' . esc_url( $item['image']['url'] ) . '" class="elementor-clickable">';
988 }
989 echo wp_kses_post( $this->render_image( $item, $settings ) );
990 if ( $settings['wpb_ea_content_box_image_lightbox_enable'] == 'yes' ) {
991 echo '</a>';
992 }
993 echo '</div>';
994 }
995
996 echo '<div class="wpb-ea-content-box-inner">';
997 if ( ! empty( $item['wpb_ea_content_box_title'] ) ) :
998 echo '<h3 class="wpb-ea-content-box-title">' . esc_html( $item['wpb_ea_content_box_title'] ) . '</h3>';
999 endif;
1000
1001 if ( ! empty( $item['wpb_ea_content_box_text'] ) ) :
1002 echo '<span class="wpb-ea-content-box-text">' . wp_kses_post( wpautop( ( $item['wpb_ea_content_box_text'] ), true ) ) . '</span>';
1003 endif;
1004 echo '</div>';
1005 echo '</div>';
1006
1007 echo $settings['wpb_ea_content_box_content_type'] == 'grid' ? '</div>' : '';
1008 endforeach;
1009 echo '</div>';
1010 endif;
1011 }
1012
1013 /**
1014 * Retrieve image widget link URL.
1015 *
1016 * @since 1.0.0
1017 * @access private
1018 *
1019 * @param array $settings
1020 *
1021 * @return array|string|false An array/string containing the link URL, or false if no link.
1022 */
1023 private function get_link_url( $settings ) {
1024 if ( 'none' === $settings['link_to'] ) {
1025 return false;
1026 }
1027
1028 if ( 'custom' === $settings['link_to'] ) {
1029 if ( empty( $settings['link']['url'] ) ) {
1030 return false;
1031 }
1032 return $settings['link'];
1033 }
1034
1035 return array(
1036 'url' => $settings['image']['url'],
1037 );
1038 }
1039 }
1040