PluginProbe ʕ •ᴥ•ʔ
ElementsKit Elementor Addons – Advanced Widgets & Templates Addons for Elementor / 3.7.9
ElementsKit Elementor Addons – Advanced Widgets & Templates Addons for Elementor v3.7.9
3.9.7 3.9.5 3.9.6 3.9.3 2.1.0 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.2.0 2.2.1 2.2.2 2.2.3 2.2.4 2.3.0 2.3.1 2.3.1.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.4.0 2.5.0 2.5.1 2.5.10 2.5.2 2.5.3 2.5.4 2.5.5 2.5.6 2.5.7 2.5.8 2.5.9 2.6.0 2.6.1 2.6.2 2.6.3 2.7.0 2.7.2 2.7.3 2.7.4 2.7.5 2.8.0 2.8.1 2.8.5 2.8.6 2.8.7 2.8.8 2.9.0 2.9.1 2.9.2 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.2.0 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6 3.2.7 3.2.8 3.2.9 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.3.6 3.3.7 3.3.8 3.3.9 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.6 3.4.7 3.4.8 3.4.9 3.5.0 3.5.1 3.5.2 3.5.3 3.5.4 3.5.5 3.5.6 3.6.0 3.6.1 3.7.0 3.7.1 3.7.2 3.7.3 3.7.4 3.7.5 3.7.6 3.7.7 3.7.8 3.7.9 3.8.0 3.8.1 3.8.2 3.9.0 3.9.1 3.9.2 trunk 1.2.6 1.2.7 1.2.9 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.8 1.3.9 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.7 1.4.8 1.4.9 1.5.0 1.5.1 1.5.10 1.5.11 1.5.12 1.5.2 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 2.0.0 2.0.1 2.0.10 2.0.11 2.0.12 2.0.13 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8 2.0.9 2.0.9.1 2.0.9.2 2.0.9.3
elementskit-lite / widgets / image-accordion / image-accordion.php
elementskit-lite / widgets / image-accordion Last commit date
image-accordion-handler.php 3 years ago image-accordion.php 1 year ago
image-accordion.php
1122 lines
1 <?php
2 namespace Elementor;
3
4 use \Elementor\ElementsKit_Widget_Image_Accordion_Handler as Handler;
5 use \ElementsKit_Lite\Modules\Controls\Controls_Manager as ElementsKit_Controls_Manager;
6
7 if ( ! defined( 'ABSPATH' ) ) exit;
8
9
10 class ElementsKit_Widget_Image_Accordion extends Widget_Base {
11 use \ElementsKit_Lite\Widgets\Widget_Notice;
12
13 public $base;
14
15 public function get_name() {
16 return Handler::get_name();
17 }
18
19 public function get_title() {
20 return Handler::get_title();
21 }
22
23 public function get_icon() {
24 return Handler::get_icon();
25 }
26
27 public function get_categories() {
28 return Handler::get_categories();
29 }
30
31 public function get_keywords() {
32 return Handler::get_keywords();
33 }
34
35 public function get_help_url() {
36 return 'https://wpmet.com/doc/image-accordion/';
37 }
38 protected function is_dynamic_content(): bool {
39 return false;
40 }
41
42 protected function register_controls() {
43
44 $this->start_controls_section(
45 'ekit_img_accordion_content_tab',
46 [
47 'label' => esc_html__('Content', 'elementskit-lite'),
48 'tab' => Controls_Manager::TAB_CONTENT,
49 ]
50 );
51 $repeater = new \Elementor\Repeater();
52
53 $repeater->add_control(
54 'ekit_img_accordion_active',
55 [
56 'label' => esc_html__('Active ? ', 'elementskit-lite'),
57 'type' => Controls_Manager::SWITCHER,
58 'default' => 'no',
59 'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
60 'label_off' => esc_html__( 'No', 'elementskit-lite' ),
61 ]
62 );
63
64 $repeater->add_control(
65 'ekit_img_accordion_bg',
66 [
67 'label' => esc_html__( 'Background Image', 'elementskit-lite' ),
68 'type' => Controls_Manager::MEDIA,
69 'dynamic' => [
70 'active' => true,
71 ],
72 'default' => [
73 'url' => Utils::get_placeholder_image_src(),
74 'id' => -1
75 ],
76 ]
77 );
78
79 $repeater->add_control(
80 'ekit_img_accordion_title',
81 [
82 'label' => esc_html__('Title', 'elementskit-lite'),
83 'type' => Controls_Manager::TEXT,
84 'dynamic' => [
85 'active' => true,
86 ],
87 'label_block' => true,
88 'default' => esc_html__('Image accordion Title', 'elementskit-lite'),
89 ]
90 );
91
92 $repeater->add_control(
93 'ekit_img_accordion_enable_icon',
94 [
95 'label' => esc_html__( 'Enable Icon', 'elementskit-lite' ),
96 'type' => Controls_Manager::SWITCHER,
97 'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
98 'label_off' => esc_html__( 'No', 'elementskit-lite' ),
99 'return_value' => 'yes',
100 'default' => '',
101 ]
102 );
103
104 $repeater->add_control(
105 'ekit_img_accordion_title_icons',
106 [
107 'label' => esc_html__('Icon for title', 'elementskit-lite'),
108 'type' => Controls_Manager::ICONS,
109 'fa4compatibility' => 'ekit_img_accordion_title_icon',
110 'default' => [
111 'value' => '',
112 ],
113 'condition' => [
114 'ekit_img_accordion_enable_icon' => 'yes',
115 ]
116 ]
117 );
118
119 $repeater->add_control(
120 'ekit_img_accordion_title_icon_position',
121 [
122 'label' => esc_html__( 'Icon Position', 'elementskit-lite' ),
123 'type' => Controls_Manager::SELECT,
124 'default' => 'left',
125 'options' => [
126 'left' => esc_html__( 'Before', 'elementskit-lite' ),
127 'right' => esc_html__( 'After', 'elementskit-lite' ),
128 ],
129 'condition' => [
130 'ekit_img_accordion_title_icons!' => '',
131 'ekit_img_accordion_enable_icon' => 'yes',
132 ],
133 ]
134 );
135
136 $repeater->add_control(
137 'ekit_img_accordion_enable_wrap_link',
138 [
139 'label' => esc_html__( 'Enable Wrap Link', 'elementskit-lite' ),
140 'type' => Controls_Manager::SWITCHER,
141 'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
142 'label_off' => esc_html__( 'No', 'elementskit-lite' ),
143 'return_value' => 'yes',
144 'default' => 'no',
145 'separator' => 'before',
146 ]
147 );
148
149 $repeater->add_control(
150 'ekit_img_accordion_wrap_link_url',
151 [
152 'label' => esc_html__('Wrap URL', 'elementskit-lite'),
153 'type' => Controls_Manager::URL,
154 'dynamic' => [
155 'active' => true,
156 ],
157 'condition' => [
158 'ekit_img_accordion_enable_wrap_link' => 'yes',
159 ],
160 ]
161 );
162
163 $repeater->add_control(
164 'ekit_img_accordion_enable_button',
165 [
166 'label' => esc_html__( 'Enable Button', 'elementskit-lite' ),
167 'type' => Controls_Manager::SWITCHER,
168 'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
169 'label_off' => esc_html__( 'No', 'elementskit-lite' ),
170 'return_value' => 'yes',
171 'default' => 'yes',
172 'separator' => 'before',
173 ]
174 );
175
176 $repeater->add_control(
177 'ekit_img_accordion_button_label',
178 [
179 'label' => esc_html__('Button Label', 'elementskit-lite'),
180 'type' => Controls_Manager::TEXT,
181 'dynamic' => [
182 'active' => true,
183 ],
184 'label_block' => true,
185 'default' => esc_html__('Read More','elementskit-lite'),
186 'condition' => [
187 'ekit_img_accordion_enable_button' => 'yes',
188 ],
189 ]
190 );
191
192 $repeater->add_control(
193 'ekit_img_accordion_button_url',
194 [
195 'label' => esc_html__('Button URL', 'elementskit-lite'),
196 'type' => Controls_Manager::URL,
197 'dynamic' => [
198 'active' => true,
199 ],
200 'condition' => [
201 'ekit_img_accordion_enable_button' => 'yes',
202 ],
203 ]
204 );
205
206 $repeater->add_control(
207 'ekit_img_accordion_enable_pupup',
208 [
209 'label' => esc_html__( 'Enable Popup', 'elementskit-lite' ),
210 'type' => Controls_Manager::SWITCHER,
211 'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
212 'label_off' => esc_html__( 'No', 'elementskit-lite' ),
213 'return_value' => 'yes',
214 'default' => '',
215 'separator' => 'before',
216 ]
217 );
218
219 $repeater->add_control(
220 'ekit_img_accordion_pup_up_icons',
221 [
222 'label' => esc_html__('Pupup Icon', 'elementskit-lite'),
223 'type' => Controls_Manager::ICONS,
224 'fa4compatibility' => 'ekit_img_accordion_pup_up_icon',
225 'default' => [
226 'value' => 'icon icon-plus',
227 'library' => 'ekiticons'
228 ],
229 'label_block' => true,
230 'condition' => [
231 'ekit_img_accordion_enable_pupup' => 'yes'
232 ]
233 ]
234 );
235
236 $repeater->add_control(
237 'ekit_img_accordion_enable_project_link',
238 [
239 'label' => esc_html__( 'Enable Project Link', 'elementskit-lite' ),
240 'type' => Controls_Manager::SWITCHER,
241 'label_on' => esc_html__( 'Yes', 'elementskit-lite' ),
242 'label_off' => esc_html__( 'No', 'elementskit-lite' ),
243 'return_value' => 'yes',
244 'separator' => 'before',
245 ]
246 );
247
248 $repeater->add_control(
249 'ekit_img_accordion_project_link',
250 [
251 'label' => esc_html__( 'Project Link', 'elementskit-lite' ),
252 'type' => Controls_Manager::URL,
253 'dynamic' => [
254 'active' => true,
255 ],
256 'placeholder' => esc_html__( 'https://wpmet.com', 'elementskit-lite' ),
257 'condition' => [
258 'ekit_img_accordion_enable_project_link' => 'yes'
259 ],
260 ]
261 );
262
263 $repeater->add_control(
264 'ekit_img_accordion_project_link_icons',
265 [
266 'label' => esc_html__('Project Link Icon', 'elementskit-lite'),
267 'type' => Controls_Manager::ICONS,
268 'fa4compatibility' => 'ekit_img_accordion_project_link_icon',
269 'default' => [
270 'value' => 'icon icon icon-link',
271 'library' => 'ekiticons'
272 ],
273 'label_block' => true,
274 'condition' => [
275 'ekit_img_accordion_enable_project_link' => 'yes'
276 ],
277 ]
278 );
279
280 $this->add_control(
281 'ekit_img_accordion_items',
282 [
283 'label' => esc_html__('Accordion Items', 'elementskit-lite'),
284 'type' => Controls_Manager::REPEATER,
285 'default' => [
286 [ 'ekit_img_accordion_title' => esc_html__('This is title','elementskit-lite') ],
287 [ 'ekit_img_accordion_icon' => esc_attr('icon icon-minus') ],
288 [ 'ekit_img_accordion_link' => esc_url('#') ],
289 [ 'ekit_img_accordion_button_label' => esc_html__('Read More','elementskit-lite') ],
290 ],
291 'fields' => $repeater->get_controls(),
292 'title_field' => '{{ ekit_img_accordion_title }}',
293 ]
294 );
295
296 $this->add_responsive_control(
297 'items_style',
298 [
299 'label' => esc_html__('Style', 'elementskit-lite'),
300 'type' => Controls_Manager::SELECT,
301 'options' => [
302 '' => esc_html__('Default', 'elementskit-lite'),
303 'horizontal' => esc_html__('Horizontal', 'elementskit-lite'),
304 'vertical' => esc_html__('Vertical', 'elementskit-lite'),
305 ],
306 'default' => 'horizontal',
307 'prefix_class' => 'ekit-image-accordion%s-',
308 ]
309 );
310
311 $this->add_control(
312 'active_behavior',
313 [
314 'label' => esc_html__('Active Behaivor', 'elementskit-lite'),
315 'type' => Controls_Manager::SELECT,
316 'options' => [
317 'click' => esc_html__('Click', 'elementskit-lite'),
318 'hover' => esc_html__('Hover', 'elementskit-lite'),
319 ],
320 'default' => 'click',
321 'prefix_class' => 'ekit-image-accordion-',
322 ]
323 );
324 $this->end_controls_section();
325
326 /** Tab Style (Image accordion General Style) */
327 $this->start_controls_section(
328 'ekit_img_accordion_general_settings',
329 [
330 'label' => esc_html__( 'General', 'elementskit-lite' ),
331 'tab' => Controls_Manager::TAB_STYLE
332 ]
333 );
334
335 $this->add_responsive_control(
336 'ekit_img_accordion_min_height',
337 [
338 'label' => esc_html__( 'Min Height', 'elementskit-lite' ),
339 'type' => Controls_Manager::SLIDER,
340 'size_units' => [ 'px' ],
341
342 'range' => [
343 'px' => [
344 'min' => 0,
345 'max' => 1000,
346 ],
347 ],
348 'default' => [
349 'unit' => 'px',
350 'size' => 460,
351 ],
352 'selectors' => [
353 '{{WRAPPER}} .elementskit-single-image-accordion' => 'min-height: {{SIZE}}{{UNIT}};',
354 '{{WRAPPER}} .elementskit-image-accordion-wraper' => 'height: {{SIZE}}{{UNIT}};',
355 ],
356 ]
357 );
358
359
360 $this->add_responsive_control(
361 'ekit_img_accordion_gutter',
362 [
363 'label' => esc_html__( 'Gutter', 'elementskit-lite' ),
364 'type' => Controls_Manager::SLIDER,
365 'range' => [
366 'px' => [
367 'min' => 0,
368 'max' => 100,
369 ],
370 ],
371 'selectors' => [
372 '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-single-image-accordion' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: {{SIZE}}{{UNIT}};',
373 '{{WRAPPER}} .elementskit-image-accordion-wraper' => 'margin-left: -{{SIZE}}{{UNIT}}; margin-right: -{{SIZE}}{{UNIT}};',
374 ],
375 ]
376 );
377
378 $this->add_control(
379 'ekit_img_accordion_active_background_text',
380 [
381 'label' => esc_html__( 'Active Item Background', 'elementskit-lite' ),
382 'type' => Controls_Manager::HEADING,
383 'separator' => 'before'
384 ]
385 );
386
387 $this->add_group_control(
388 Group_Control_Background::get_type(),
389 array(
390 'name' => 'ekit_img_accordion_bg_active_color',
391 'selector' => '{{WRAPPER}} .elementskit-single-image-accordion:before',
392 )
393 );
394 $this->add_responsive_control(
395 'ekit_img_accordion_container_padding',
396 [
397 'label' => esc_html__( 'Padding', 'elementskit-lite' ),
398 'type' => Controls_Manager::DIMENSIONS,
399 'size_units' => [ 'px', 'em', '%' ],
400 'separator' => 'before',
401 'selectors' => [
402 '{{WRAPPER}} .elementskit-image-accordion-wraper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
403 ],
404 ]
405 );
406
407 $this->add_responsive_control(
408 'ekit_img_accordion_container_margin',
409 [
410 'label' => esc_html__( 'Margin', 'elementskit-lite' ),
411 'type' => Controls_Manager::DIMENSIONS,
412 'size_units' => [ 'px', 'em', '%' ],
413 'selectors' => [
414 '{{WRAPPER}} .elementskit-image-accordion-wraper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
415 ],
416 ]
417 );
418 $this->add_group_control(
419 Group_Control_Border::get_type(),
420 [
421 'name' => 'ekit_img_accordion_border_group',
422 'label' => esc_html__( 'Border', 'elementskit-lite' ),
423 'selector' => '{{WRAPPER}} .elementskit-image-accordion-wraper',
424 ]
425 );
426
427 $this->add_control(
428 'ekit_img_accordion_border_radius',
429 [
430 'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
431 'type' => Controls_Manager::SLIDER,
432 'range' => [
433 'px' => [
434 'max' => 500,
435 ],
436 ],
437 'selectors' => [
438 '{{WRAPPER}} .elementskit-image-accordion-wraper' => 'border-radius: {{SIZE}}px;',
439 ],
440 ]
441 );
442 $this->add_group_control(
443 Group_Control_Box_Shadow::get_type(),
444 [
445 'name' => 'ekit_img_accordion_shadow',
446 'selector' => '{{WRAPPER}} .elementskit-image-accordion-wraper',
447 ]
448 );
449
450 $this->end_controls_section();
451
452
453 /** Tab Style (Image accordion Content Style) */
454 $this->start_controls_section(
455 'ekit_img_accordion_section_img_accordion_title_settings',
456 [
457 'label' => esc_html__( 'Title', 'elementskit-lite' ),
458 'tab' => Controls_Manager::TAB_STYLE
459 ]
460 );
461
462 $this->add_control(
463 'ekit_img_accordion_section_img_accordion_icon_title',
464 [
465 'label' => esc_html_x( 'Margin', 'Border Control', 'elementskit-lite' ),
466 'type' => Controls_Manager::DIMENSIONS,
467 'default' => [
468 'top' => '0',
469 'bottom' => '20',
470 'left' => '0',
471 'right' => '0',
472 'unit' => 'px',
473 ],
474 'selectors' => [
475 '{{WRAPPER}} .elementskit-single-image-accordion .elementskit-accordion-title-wraper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
476 ],
477 ]
478 );
479 $this->add_control(
480 'ekit_img_accordion_section_img_accordion_title_icon_spacing',
481 [
482 'label' => esc_html_x( 'Title Icon Spacing', 'Border Control', 'elementskit-lite' ),
483 'type' => Controls_Manager::DIMENSIONS,
484 'selectors' => [
485 '{{WRAPPER}} .elementskit-single-image-accordion .elementskit-accordion-title-wraper .icon-title > i, {{WRAPPER}} .elementskit-single-image-accordion .elementskit-accordion-title-wraper .icon-title > svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
486 ],
487 ]
488 );
489 $this->add_control(
490 'ekit_img_accordion_title_color',
491 [
492 'label' => esc_html__( 'Color', 'elementskit-lite' ),
493 'type' => Controls_Manager::COLOR,
494 'default' => '#fff',
495 'selectors' => [
496 '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-accordion-title-wraper .elementskit-accordion-title ' => 'color: {{VALUE}};',
497 '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-accordion-title-wraper .elementskit-accordion-title svg path' => 'stroke: {{VALUE}}; fill: {{VALUE}};',
498 ],
499 ]
500 );
501
502 $this->add_responsive_control(
503 'ekit_img_accordion_title_icon_size',
504 [
505 'label' => esc_html__( 'Icon Size', 'elementskit-lite' ),
506 'type' => Controls_Manager::SLIDER,
507 'size_units' => [ 'px', '%' ],
508 'range' => [
509 'px' => [
510 'min' => 1,
511 'max' => 100,
512 'step' => 5,
513 ],
514 '%' => [
515 'min' => 1,
516 'max' => 100,
517 ],
518 ],
519 'selectors' => [
520 '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-accordion-title-wraper .elementskit-accordion-title i' => 'font-size: {{SIZE}}{{UNIT}};',
521 '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-accordion-title-wraper .elementskit-accordion-title svg' => 'max-width: {{SIZE}}{{UNIT}}; height: auto',
522 ],
523 ]
524 );
525
526 $this->add_group_control(
527 Group_Control_Typography::get_type(),
528 [
529 'name' => 'ekit_img_accordion_title_typography_group',
530 'selector' => '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-accordion-title-wraper .elementskit-accordion-title',
531 ]
532 );
533
534 $this->end_controls_section();
535
536 /** Tab Style (Image accordion Content Style) */
537 $this->start_controls_section(
538 'ekit_img_accordion_section_img_accordion_content_settings',
539 [
540 'label' => esc_html__( 'Content', 'elementskit-lite' ),
541 'tab' => Controls_Manager::TAB_STYLE
542 ]
543 );
544 $this->add_responsive_control(
545 'ekit_img_accordion_section_img_accordion_content_align',
546 [
547 'label' =>esc_html__( 'Alignment', 'elementskit-lite' ),
548 'type' => Controls_Manager::CHOOSE,
549 'options' => [
550 'left' => [
551 'title' =>esc_html__( 'Left', 'elementskit-lite' ),
552 'icon' => 'eicon-text-align-left',
553 ],
554 'center' => [
555 'title' =>esc_html__( 'Center', 'elementskit-lite' ),
556 'icon' => 'eicon-text-align-center',
557 ],
558 'right' => [
559 'title' =>esc_html__( 'Right', 'elementskit-lite' ),
560 'icon' => 'eicon-text-align-right',
561 ],
562 ],
563 'selectors' => [
564 '{{WRAPPER}} .elementskit-single-image-accordion .elementskit-accordion-content' => 'text-align: {{VALUE}};'
565 ],
566 'default' => 'center',
567 ]
568 );
569 $this->add_responsive_control(
570 'ekit_img_accordion_section_img_accordion_content_padding',
571 [
572 'label' =>esc_html__( 'Padding', 'elementskit-lite' ),
573 'type' => Controls_Manager::DIMENSIONS,
574 'size_units' => [ 'px', 'em', '%' ],
575 'selectors' => [
576 '{{WRAPPER}} .elementskit-single-image-accordion .elementskit-accordion-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
577 ],
578 ]
579 );
580
581 $this->add_responsive_control(
582 'ekit_img_accordion_section_img_accordion_content_position',
583 [
584 'label' => esc_html__( 'Vertical Position', 'elementskit-lite' ),
585 'type' => Controls_Manager::CHOOSE,
586 'label_block' => false,
587 'options' => [
588 'flex-start' => [
589 'title' => esc_html__( 'Top', 'elementskit-lite' ),
590 'icon' => 'eicon-v-align-top',
591 ],
592 'center' => [
593 'title' => esc_html__( 'Center', 'elementskit-lite' ),
594 'icon' => 'eicon-v-align-middle',
595 ],
596 'flex-end' => [
597 'title' => esc_html__( 'Bottom', 'elementskit-lite' ),
598 'icon' => 'eicon-v-align-bottom',
599 ],
600 ],
601 'default' => 'center',
602 'selectors' => [
603 '{{WRAPPER}} .elementskit-image-accordion-wraper .elementskit-single-image-accordion' => 'align-items: {{VALUE}}',
604 ],
605 ]
606 );
607
608
609 $this->end_controls_section();
610
611 // Button
612 $this->start_controls_section(
613 'ekit_img_accordion_button_style_settings',
614 [
615 'label' => esc_html__( 'Button', 'elementskit-lite' ),
616 'tab' => Controls_Manager::TAB_STYLE,
617 ]
618 );
619
620 $this->add_responsive_control(
621 'ekit_img_accordion_text_padding',
622 [
623 'label' =>esc_html__( 'Padding', 'elementskit-lite' ),
624 'type' => Controls_Manager::DIMENSIONS,
625 'size_units' => [ 'px', 'em', '%' ],
626 'default' => [
627 'top' => 15,
628 'right' => 20,
629 'bottom' => 15,
630 'left' => 20,
631 'unit' => 'px',
632 'isLinked' => true,
633 ],
634 'selectors' => [
635 '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
636 ],
637 ]
638 );
639
640 $this->add_group_control(
641 Group_Control_Typography::get_type(),
642 [
643 'name' => 'ekit_img_accordion_btn_typography',
644 'label' =>esc_html__( 'Typography', 'elementskit-lite' ),
645 'selector' => '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn',
646 ]
647 );
648
649 $this->start_controls_tabs( 'ekit_img_accordion_tabs_button_style' );
650
651 $this->start_controls_tab(
652 'ekit_img_accordion_tab_button_normal',
653 [
654 'label' =>esc_html__( 'Normal', 'elementskit-lite' ),
655 ]
656 );
657
658 $this->add_control(
659 'ekit_img_accordion_btn_text_color',
660 [
661 'label' =>esc_html__( 'Text Color', 'elementskit-lite' ),
662 'type' => Controls_Manager::COLOR,
663 'default' => '#ffffff',
664 'selectors' => [
665 '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn' => 'color: {{VALUE}};',
666 ],
667 ]
668 );
669 $this->add_group_control(
670 Group_Control_Background::get_type(),
671 array(
672 'name' => 'ekit_img_accordion_btn_bg_color_group',
673 'label' => esc_html__( 'Background', 'elementskit-lite' ),
674 'selector' => '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn',
675 'fields_options' => [
676 'background' => [
677 'color' => [
678 'default' => '#fff'
679 ],
680 ],
681
682 ],
683
684 )
685 );
686
687 $this->add_control(
688 'ekit_img_accordion_btn_border_color',
689 [
690 'label' => esc_html__( 'Border', 'elementskit-lite' ),
691 'type' => Controls_Manager::HEADING,
692 'separator' => 'before',
693
694 ]
695 );
696
697 $this->add_group_control(
698 Group_Control_Border::get_type(),
699 [
700 'name' => 'ekit_img_accordion_btn_border_group',
701 'label' => esc_html__( 'Border', 'elementskit-lite' ),
702 'selector' => '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn',
703 'fields_options' => [
704 'border' => [
705 'default' => 'solid',
706 ],
707 'width' => [
708 'default' => [
709 'top' => '1',
710 'right' => '1',
711 'bottom' => '1',
712 'left' => '1',
713 'unit' => 'px'
714 ],
715 ],
716 'color' => [
717 'default' => '#ffffff',
718 ],
719 ],
720 ]
721 );
722 $this->add_control(
723 'ekit_img_accordion_btn_border_radius',
724 [
725 'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
726 'type' => Controls_Manager::DIMENSIONS,
727 'size_units' => [ 'px', '%' ],
728 'default' => ['top' => '5', 'bottom' => '5', 'left' => '5', 'right' => '5', 'unit' => 'px'],
729 'selectors' => [
730 '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
731 ],
732 ]
733 );
734
735 $this->end_controls_tab();
736
737 $this->start_controls_tab(
738 'ekit_img_accordion_btn_tab_button_hover',
739 [
740 'label' =>esc_html__( 'Hover', 'elementskit-lite' ),
741 ]
742 );
743
744 $this->add_control(
745 'ekit_img_accordion_btn_hover_color',
746 [
747 'label' =>esc_html__( 'Text Color', 'elementskit-lite' ),
748 'type' => Controls_Manager::COLOR,
749 'default' => '#fff',
750 'selectors' => [
751 '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn:hover' => 'color: {{VALUE}};',
752 ],
753 ]
754 );
755
756 $this->add_group_control(
757 Group_Control_Background::get_type(),
758 array(
759 'name' => 'ekit_img_accordion_btn_bg_hover_color_group',
760 'selector' => '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn:hover',
761 )
762 );
763 $this->add_control(
764 'ekit_img_accordion_btn_border_color_hover',
765 [
766 'label' => esc_html__( 'Border', 'elementskit-lite' ),
767 'type' => Controls_Manager::HEADING,
768 'separator' => 'before',
769 ]
770 );
771
772 $this->add_group_control(
773 Group_Control_Border::get_type(),
774 [
775 'name' => 'ekit_img_accordion_btn_border_hover_group',
776 'label' => esc_html__( 'Border', 'elementskit-lite' ),
777 'selector' => '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn:hover',
778 ]
779 );
780 $this->add_control(
781 'btn_border_radius_hover',
782 [
783 'label' => esc_html__( 'Border Radius', 'elementskit-lite' ),
784 'type' => Controls_Manager::DIMENSIONS,
785 'size_units' => [ 'px', '%' ],
786 'selectors' => [
787 '{{WRAPPER}} .elementskit-accordion-content .elementskit-btn:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
788 ],
789 ]
790 );
791 $this->end_controls_tab();
792 $this->end_controls_tabs();
793 $this->end_controls_section();
794 // PopUp
795
796 $this->start_controls_section(
797 'ekit_img_accordion_style_section',
798 [
799 'label' => esc_html__( 'Action Icon', 'elementskit-lite' ),
800 'tab' => Controls_Manager::TAB_STYLE,
801 ]
802 );
803
804 $this->add_control(
805 'actions_width',
806 [
807 'label' => esc_html__( 'Width', 'elementskit-lite' ),
808 'type' => Controls_Manager::SLIDER,
809 'selectors' => [
810 '{{WRAPPER}} .ekit-image-accordion-actions > a' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
811 ]
812 ]
813 );
814
815 $this->add_control(
816 'ekit_img_accordion_section_img_accordion_icon_left_spacing',
817 [
818 'label' => esc_html__( 'Icon Left Spacing', 'elementskit-lite' ),
819 'type' => Controls_Manager::SLIDER,
820 'range' => [
821 'px' => [
822 'min' => 0,
823 'max' => 100,
824 ],
825 ],
826 'selectors' => [
827 '{{WRAPPER}} .elementskit-single-image-accordion .elementskit-icon-wraper > a:not(:last-child)' => 'margin-right: {{SIZE}}px',
828 ],
829 ]
830 );
831
832 $this->add_control(
833 'ekit_img_accordion_section_img_accordion_icon_spacing',
834 [
835 'label' => esc_html_x( 'Icon Container Spacing', 'Border Control', 'elementskit-lite' ),
836 'type' => Controls_Manager::DIMENSIONS,
837 'selectors' => [
838 '{{WRAPPER}} .elementskit-single-image-accordion .elementskit-icon-wraper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
839 ],
840 ]
841 );
842
843 $this->add_control(
844 'actions_border_width',
845 [
846 'label' => esc_html__( 'Border Width', 'elementskit-lite' ),
847 'type' => Controls_Manager::NUMBER,
848 'placeholder' => '1',
849 'selectors' => [
850 '{{WRAPPER}} .ekit-image-accordion-actions > a' => 'border-width: {{VALUE}}px;',
851 ],
852 ]
853 );
854
855 $this->start_controls_tabs('ekit_img_accordion_pup_up_style_tabs');
856
857 $this->start_controls_tab(
858 'ekit_img_accordion_pupup_normal_tab',
859 [
860 'label' => esc_html__( 'Normal', 'elementskit-lite' ),
861 ]
862 );
863 $this->add_control(
864 'ekit_img_accordion_pup_up_icon_color',
865 [
866 'label' => esc_html__( 'Popup Icon Color', 'elementskit-lite' ),
867 'type' => Controls_Manager::COLOR,
868 'selectors' => [
869 '{{WRAPPER}} .elementskit-icon-wraper a:first-child' => 'color: {{VALUE}};',
870 '{{WRAPPER}} .elementskit-icon-wraper a:first-child svg path' => 'fill: {{VALUE}};',
871 ],
872 ]
873 );
874
875 $this->add_control(
876 'ekit_img_accordion_pup_up_project_color',
877 [
878 'label' => esc_html__( 'Link Icon Color', 'elementskit-lite' ),
879 'type' => Controls_Manager::COLOR,
880 'selectors' => [
881 '{{WRAPPER}} .elementskit-icon-wraper a:last-child' => 'color: {{VALUE}};',
882 '{{WRAPPER}} .elementskit-icon-wraper a:last-child svg path' => 'fill: {{VALUE}};',
883 ],
884 ]
885 );
886
887 $this->add_control(
888 'action_btn_bg',
889 [
890 'label' => esc_html__( 'Background Color', 'elementskit-lite' ),
891 'type' => Controls_Manager::COLOR,
892 'selectors' => [
893 '{{WRAPPER}} .ekit-image-accordion-actions > a' => 'background-color: {{VALUE}}; border-color: {{VALUE}};',
894 ],
895 ]
896 );
897
898 $this->end_controls_tab();
899
900 $this->start_controls_tab(
901 'ekit_img_accordion_pup_up_hover_tab',
902 [
903 'label' => esc_html__( 'Hover', 'elementskit-lite' ),
904 ]
905 );
906
907 $this->add_control(
908 'ekit_img_accordion_pup_up_icon_color_hover',
909 [
910 'label' => esc_html__( 'Popup Icon color', 'elementskit-lite' ),
911 'type' => Controls_Manager::COLOR,
912 'selectors' => [
913 '{{WRAPPER}} .elementskit-icon-wraper a:first-child:hover' => 'color: {{VALUE}}',
914 '{{WRAPPER}} .elementskit-icon-wraper a:first-child:hover svg path' => 'fill: {{VALUE}};',
915 ],
916 ]
917 );
918
919 $this->add_control(
920 'ekit_img_accordion_pup_up_project_color_hover',
921 [
922 'label' => esc_html__( 'Link Icon color', 'elementskit-lite' ),
923 'type' => Controls_Manager::COLOR,
924 'selectors' => [
925 '{{WRAPPER}} .elementskit-icon-wraper a:last-child:hover' => 'color: {{VALUE}};',
926 '{{WRAPPER}} .elementskit-icon-wraper a:last-child:hover svg path' => 'fill: {{VALUE}};',
927 ],
928 ]
929 );
930
931 $this->add_control(
932 'action_btn_bg_hover',
933 [
934 'label' => esc_html__( 'Background Color (Hover)', 'elementskit-lite' ),
935 'type' => Controls_Manager::COLOR,
936 'selectors' => [
937 '{{WRAPPER}} .ekit-image-accordion-actions > a:hover' => 'background-color: {{VALUE}}; border-color: {{VALUE}};',
938 ],
939 ]
940 );
941
942 $this->end_controls_tab();
943
944 $this->end_controls_tabs();
945
946 $this->end_controls_section();
947
948 $this->insert_pro_message();
949 }
950
951 protected function render( ) {
952 echo '<div class="ekit-wid-con" >';
953 $this->render_raw();
954 echo '</div>';
955 }
956
957 protected function render_raw( ) {
958 $settings = $this->get_settings_for_display();
959 extract($settings);
960 ?>
961 <div class="ekit-image-accordion elementskit-image-accordion-wraper">
962 <?php foreach ( $ekit_img_accordion_items as $key => $item ) :
963
964 $this->add_render_attribute( 'wrap-input-' . $key,[
965 'type' => 'radio',
966 'name' => 'ekit_ia_' . $this->get_id(),
967 'id' => 'ekit_ia_' . $this->get_id() .'_'. $key,
968 'class' => 'elementskit-single-image-accordion--input',
969 ] );
970
971 if($item['ekit_img_accordion_active'] == 'yes') {
972 $this->add_render_attribute( 'wrap-input-' . $key, 'checked', 'checked' );
973 }
974
975 $this->add_render_attribute( 'wrap-link-' . $key, [
976 'for' => 'ekit_ia_' . $this->get_id() .'_'. $key,
977 'class' => 'elementskit-single-image-accordion ekit-image-accordion-item',
978 'style' => 'background-image: url('.esc_url($item['ekit_img_accordion_bg']['url']).')',
979 ] );
980
981 // enabling wrap link
982 if(isset($item['ekit_img_accordion_enable_wrap_link']) && $item['ekit_img_accordion_enable_wrap_link'] == 'yes') {
983 $wrap_link = $item['ekit_img_accordion_wrap_link_url'] ?? [];
984 $wrap_link['url'] = !empty($wrap_link['url']) ? esc_url($wrap_link['url']) : '';
985
986 $this->add_render_attribute( 'wrap-link-' . $key, 'data-link', wp_json_encode($wrap_link) );
987 $this->add_render_attribute( 'wrap-link-' . $key, 'data-behavior', $active_behavior );
988 $this->add_render_attribute( 'wrap-link-' . $key, 'data-active', $item['ekit_img_accordion_active'] );
989 }
990 ?>
991 <input <?php $this->print_render_attribute_string( 'wrap-input-' . $key ); ?> hidden>
992 <label <?php $this->print_render_attribute_string( 'wrap-link-' . $key ); ?>>
993 <span class="elementskit-accordion-content">
994 <?php if($item['ekit_img_accordion_enable_pupup'] == 'yes' || $item['ekit_img_accordion_enable_project_link'] == 'yes') {
995 if (!empty($item['ekit_img_accordion_project_link']['url'])) {
996 $this->add_link_attributes( 'projectlink', $item['ekit_img_accordion_project_link'] );
997 }
998 ?>
999 <span class="elementskit-icon-wraper ekit-image-accordion-actions">
1000 <?php if($item['ekit_img_accordion_enable_pupup'] == 'yes') {
1001
1002 $this->add_lightbox_data_attributes( 'link' . $key,
1003 $item['ekit_img_accordion_bg']['id'],
1004 $item['ekit_img_accordion_enable_pupup'],
1005 $this->get_id()
1006 );
1007
1008 $this->add_render_attribute( 'link' . $key,
1009 [
1010 'href' => esc_url($item['ekit_img_accordion_bg']['url']),
1011 'aria-label' => "pupup-button",
1012 'class' => "icon-outline circle",
1013 ]
1014 );
1015 ?>
1016 <a <?php $this->print_render_attribute_string( 'link' . $key ); ?>>
1017 <?php
1018 $migrated = isset( $item['__fa4_migrated']['ekit_img_accordion_pup_up_icons'] );
1019 // Check if its a new widget without previously selected icon using the old Icon control
1020 $is_new = empty( $item['ekit_img_accordion_pup_up_icon'] );
1021 if ( $is_new || $migrated ) {
1022
1023 // new icon
1024 Icons_Manager::render_icon( $item['ekit_img_accordion_pup_up_icons'], [ 'aria-hidden' => 'true'] );
1025 } else {
1026 ?>
1027 <i class="<?php echo esc_attr($item['ekit_img_accordion_pup_up_icon']); ?>" aria-hidden="true"></i>
1028 <?php
1029 }
1030 ?>
1031 </a>
1032 <?php } ?>
1033 <?php if($item['ekit_img_accordion_enable_project_link'] == 'yes') {
1034 if ( ! empty( $item['ekit_img_accordion_project_link']['url'] ) ) {
1035 $this->add_link_attributes( 'button-2' . $key, $item['ekit_img_accordion_project_link'] );
1036 $this->add_render_attribute( 'button-2' . $key, ['role' => "link", 'aria-label' => "button-link"] );
1037 }
1038 ?>
1039 <a <?php $this->print_render_attribute_string( 'button-2' . esc_attr($key) ); ?> class="icon-outline circle">
1040 <?php
1041 $migrated = isset( $item['__fa4_migrated']['ekit_img_accordion_project_link_icons'] );
1042 // Check if its a new widget without previously selected icon using the old Icon control
1043 $is_new = empty( $item['ekit_img_accordion_project_link_icon'] );
1044 if ( $is_new || $migrated ) {
1045
1046 // new icon
1047 Icons_Manager::render_icon( $item['ekit_img_accordion_project_link_icons'], [ 'aria-hidden' => 'true'] );
1048 } else {
1049 ?>
1050 <i class="<?php echo esc_attr($item['ekit_img_accordion_project_link_icon']); ?>" aria-hidden="true"></i>
1051 <?php
1052 }
1053 ?>
1054 </a>
1055 <?php } ?>
1056 </span>
1057 <?php } ?>
1058 <span class="elementskit-accordion-title-wraper">
1059 <span class="elementskit-accordion-title <?php echo esc_attr($item['ekit_img_accordion_title_icons'] != '') ? 'icon-title' : ''?>">
1060 <?php if($item['ekit_img_accordion_enable_icon'] == 'yes'): ?>
1061 <?php if($item['ekit_img_accordion_title_icon_position'] == 'left'): ?>
1062 <!-- same-1 -->
1063 <?php
1064
1065 $migrated = isset( $item['__fa4_migrated']['ekit_img_accordion_title_icons'] );
1066 // Check if its a new widget without previously selected icon using the old Icon control
1067 $is_new = empty( $item['ekit_img_accordion_title_icon'] );
1068 if ( $is_new || $migrated ) {
1069
1070 // new icon
1071 Icons_Manager::render_icon( $item['ekit_img_accordion_title_icons'], [ 'aria-hidden' => 'true'] );
1072 } else {
1073 ?>
1074 <i class="<?php echo esc_attr($item['ekit_img_accordion_title_icon']); ?>" aria-hidden="true"></i>
1075 <?php
1076 }
1077 ?>
1078 <?php endif; ?>
1079 <?php endif; ?>
1080
1081 <?php echo esc_html($item['ekit_img_accordion_title']); ?>
1082
1083 <?php if($item['ekit_img_accordion_enable_icon'] == 'yes'): ?>
1084 <?php if($item['ekit_img_accordion_title_icon_position'] == 'right'): ?>
1085 <!-- same-1 -->
1086 <?php
1087
1088 $migrated = isset( $item['__fa4_migrated']['ekit_img_accordion_title_icons'] );
1089 // Check if its a new widget without previously selected icon using the old Icon control
1090 $is_new = empty( $item['ekit_img_accordion_title_icon'] );
1091 if ( $is_new || $migrated ) {
1092
1093 // new icon
1094 Icons_Manager::render_icon( $item['ekit_img_accordion_title_icons'], [ 'aria-hidden' => 'true'] );
1095 } else {
1096 ?>
1097 <i class="<?php echo esc_attr($item['ekit_img_accordion_title_icon']); ?>" aria-hidden="true"></i>
1098 <?php
1099 }
1100 ?>
1101 <?php endif; ?>
1102 <?php endif; ?>
1103 </span>
1104 </span>
1105 <?php if($item['ekit_img_accordion_enable_button'] == 'yes') :
1106 if ( ! empty( $item['ekit_img_accordion_button_url']['url'] ) ) {
1107 $this->add_link_attributes( 'button-' . $key, $item['ekit_img_accordion_button_url'] );
1108 }
1109 ?>
1110 <span class="elementskit-btn-wraper">
1111 <a class="ekit-image-accordion--btn elementskit-btn whitespace--normal" <?php $this->print_render_attribute_string( 'button-' . esc_attr($key) ); ?>>
1112 <?php echo esc_html($item['ekit_img_accordion_button_label']); ?>
1113 </a>
1114 </span>
1115 <?php endif; ?>
1116 </span>
1117 </label>
1118 <?php endforeach; ?>
1119 </div>
1120 <?php }
1121 }
1122