PluginProbe
UiCore Elements – Free widgets and templates for Elementor / 1.3.18
UiCore Elements – Free widgets and templates for Elementor v1.3.18
1.3.18 1.3.17 1.3.16 trunk 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.2.0 1.2.1 1.2.2 1.2.3 All 42 releases
← All changes | includes/widgets/accordion.php +1492 -1484 1.0.0 → 1.3.18 View file →
@@ -1,1484 +1,1492 @@
1 -<?php
2 -namespace UiCoreElements;
3 -
4 -use Elementor\Repeater;
5 -use Elementor\Controls_Manager;
6 -use Elementor\Group_Control_Border;
7 -use Elementor\Group_Control_Typography;
8 -use Elementor\Group_Control_Background;
9 -use Elementor\Group_Control_Box_Shadow;
10 -use Elementor\Plugin;
11 -use Elementor\Icons_Manager;
12 -
13 -use UiCoreElements\UiCoreWidget;
14 -
15 -defined('ABSPATH') || exit();
16 -
17 -/**
18 - * Accordion
19 - *
20 - * @author Lucas Marini Falbo <[email protected]>
21 - * @since 1.0.0
22 - */
23 -
24 -class Accordion extends UiCoreWidget
25 -{
26 -
27 - public function get_name()
28 - {
29 - return 'uicore-accordion';
30 - }
31 - public function get_title()
32 - {
33 - return __('Accordion', 'uicore-elements');
34 - }
35 - public function get_icon()
36 - {
37 - return 'eicon-accordion ui-e-widget';
38 - }
39 - public function get_categories()
40 - {
41 - return ['uicore'];
42 - }
43 - public function get_keywords()
44 - {
45 - return ['accordion', 'tabs', 'toggle', 'uicore'];
46 - }
47 - public function get_styles()
48 - {
49 - return ['accordion'];
50 - }
51 - public function get_scripts()
52 - {
53 - return ['accordion'];
54 - }
55 - protected function register_controls()
56 - {
57 - $this->start_controls_section(
58 - 'section_title',
59 - [
60 - 'label' => __('Accordion', 'uicore-elements'),
61 - ]
62 - );
63 -
64 - $repeater = new Repeater();
65 -
66 - $repeater->add_control(
67 - 'tab_title',
68 - [
69 - 'label' => __('Title & Content', 'uicore-elements'),
70 - 'type' => Controls_Manager::TEXT,
71 - 'dynamic' => ['active' => true],
72 - 'default' => __('Accordion Title', 'uicore-elements'),
73 - 'label_block' => true,
74 - ]
75 - );
76 -
77 - $repeater->add_control(
78 - 'source',
79 - [
80 - 'label' => esc_html__('Select Source', 'uicore-elements'),
81 - 'type' => Controls_Manager::SELECT,
82 - 'default' => 'custom',
83 - 'options' => [
84 - 'custom' => esc_html__('Custom Content', 'uicore-elements'),
85 - 'sectionId' => esc_html__('Section ID', 'uicore-elements'),
86 - ],
87 - ]
88 - );
89 -
90 - $repeater->add_control(
91 - 'tab_content',
92 - [
93 - 'label' => __('Content', 'uicore-elements'),
94 - 'type' => Controls_Manager::WYSIWYG,
95 - 'dynamic' => ['active' => true],
96 - 'default' => __('Accordion Content', 'uicore-elements'),
97 - 'show_label' => false,
98 - 'condition' => ['source' => 'custom'],
99 - ]
100 - );
101 -
102 - $repeater->add_control(
103 - 'section_id',
104 - [
105 - 'label' => esc_html__( 'Section ID', 'uicore-elements' ),
106 - 'type' => Controls_Manager::TEXT,
107 - 'placeholder' => esc_html__( 'CSS ID from an element', 'uicore-elements' ),
108 - 'condition' => [
109 - 'source' => 'sectionId'
110 - ],
111 - 'dynamic' => ['active' => true],
112 - ]
113 - );
114 -
115 - $repeater->add_control(
116 - 'repeater_icon',
117 - [
118 - 'label' => __('Title Icon', 'uicore-elements'),
119 - 'type' => Controls_Manager::ICONS,
120 - 'label_block' => false,
121 - 'skin' => 'inline',
122 - ]
123 - );
124 -
125 - $this->add_control(
126 - 'tabs',
127 - [
128 - 'label' => __('Items', 'uicore-elements'),
129 - 'type' => Controls_Manager::REPEATER,
130 - 'fields' => $repeater->get_controls(),
131 - 'default' => [
132 - [
133 - 'tab_title' => __('Accordion #1', 'uicore-elements'),
134 - 'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
135 - ],
136 - [
137 - 'tab_title' => __('Accordion #2', 'uicore-elements'),
138 - 'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
139 - ],
140 - [
141 - 'tab_title' => __('Accordion #3', 'uicore-elements'),
142 - 'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
143 - ],
144 - ],
145 - 'title_field' => '{{{ tab_title }}}',
146 - ]
147 - );
148 -
149 - $this->add_control(
150 - 'title_html_tag',
151 - [
152 - 'label' => __('Title HTML Tag', 'uicore-elements'),
153 - 'type' => Controls_Manager::SELECT,
154 - 'options' => [
155 - 'h1' => 'H1',
156 - 'h2' => 'H2',
157 - 'h3' => 'H3',
158 - 'h4' => 'H4',
159 - 'h5' => 'H5',
160 - 'h6' => 'H6',
161 - 'span' => 'span',
162 - 'p' => 'p',
163 - 'div' => 'div',
164 - ],
165 - 'default' => 'h5',
166 - ]
167 - );
168 -
169 - $this->add_control(
170 - 'accordion_icon',
171 - [
172 - 'label' => __('Icon', 'uicore-elements'),
173 - 'type' => Controls_Manager::ICONS,
174 - 'default' => [
175 - 'value' => 'fas fa-plus',
176 - 'library' => 'fa-solid',
177 - ],
178 - 'recommended' => [
179 - 'fa-solid' => [
180 - 'chevron-down',
181 - 'angle-down',
182 - 'angle-double-down',
183 - 'caret-down',
184 - 'caret-square-down',
185 - ],
186 - 'fa-regular' => [
187 - 'caret-square-down',
188 - ],
189 - ],
190 - 'label_block' => false,
191 - 'skin' => 'inline',
192 - ]
193 - );
194 -
195 - $this->add_control(
196 - 'accordion_active_icon',
197 - [
198 - 'label' => __('Active Icon', 'uicore-elements'),
199 - 'type' => Controls_Manager::ICONS,
200 - 'default' => [
201 - 'value' => 'fas fa-minus',
202 - 'library' => 'fa-solid',
203 - ],
204 - 'recommended' => [
205 - 'fa-solid' => [
206 - 'chevron-up',
207 - 'angle-up',
208 - 'angle-double-up',
209 - 'caret-up',
210 - 'caret-square-up',
211 - ],
212 - 'fa-regular' => [
213 - 'caret-square-up',
214 - ],
215 - ],
216 - 'label_block' => false,
217 - 'skin' => 'inline',
218 - 'condition' => [
219 - 'accordion_icon[value]!' => '',
220 - 'icon_animation!' => 'ui-e-animation-ico-spin'
221 - ],
222 - ]
223 - );
224 -
225 - $this->add_control(
226 - 'show_custom_icon',
227 - [
228 - 'label' => esc_html__('Show Title Icon', 'uicore-elements'),
229 - 'type' => Controls_Manager::SWITCHER,
230 - 'separator' => 'before'
231 - ]
232 - );
233 -
234 - $this->end_controls_section();
235 -
236 - $this->start_controls_section(
237 - 'section_content_additional',
238 - [
239 - 'label' => __('Additional', 'uicore-elements'),
240 - ]
241 - );
242 -
243 - $this->add_control(
244 - 'collapsible',
245 - [
246 - 'label' => __('Collapse All Items', 'uicore-elements'),
247 - 'type' => Controls_Manager::SWITCHER,
248 - 'default' => 'true',
249 - 'return_value' => 'true',
250 - 'frontend_available' => true,
251 - ]
252 - );
253 -
254 - $this->add_control(
255 - 'multiple',
256 - [
257 - 'label' => __('Multiple Open', 'uicore-elements'),
258 - 'type' => Controls_Manager::SWITCHER,
259 - 'return_value' => 'true',
260 - 'frontend_available' => true,
261 - ]
262 - );
263 -
264 - $this->add_control(
265 - 'active_item',
266 - [
267 - 'label' => __('Active Item', 'uicore-elements'),
268 - 'type' => Controls_Manager::NUMBER,
269 - 'min' => 1,
270 - 'max' => 20,
271 - 'default' => 1,
272 - ]
273 - );
274 -
275 - $this->add_control(
276 - 'active_hash',
277 - [
278 - 'label' => esc_html__('Hash Location', 'uicore-elements'),
279 - 'type' => Controls_Manager::SWITCHER,
280 - 'default' => 'no',
281 - 'frontend_available' => true,
282 - ]
283 - );
284 -
285 - $this->add_control(
286 - 'active_scrollspy',
287 - [
288 - 'label' => esc_html__('Scrollspy', 'uicore-elements'),
289 - 'type' => Controls_Manager::SWITCHER,
290 - 'default' => 'no',
291 - 'return' => 'yes',
292 - 'frontend_available' => true,
293 - 'condition' => [
294 - 'active_hash' => 'yes'
295 - ]
296 - ]
297 - );
298 -
299 - $this->add_control(
300 - 'hash_top_offset',
301 - [
302 - 'label' => esc_html__('Top Offset ', 'uicore-elements'),
303 - 'type' => Controls_Manager::SLIDER,
304 - 'size_units' => ['px', ''],
305 - 'range' => [
306 - 'px' => [
307 - 'min' => 0,
308 - 'max' => 200,
309 - 'step' => 5,
310 - ],
311 -
312 - ],
313 - 'default' => [
314 - 'unit' => 'px',
315 - 'size' => 70,
316 - ],
317 - 'condition' => [
318 - 'active_hash' => 'yes',
319 - 'active_scrollspy' => 'yes',
320 - ],
321 - 'frontend_available' => true,
322 - ]
323 - );
324 -
325 - $this->add_control(
326 - 'hash_scrollspy_delay',
327 - [
328 - 'label' => esc_html__('Scrollspy Delay', 'uicore-elements'),
329 - 'type' => Controls_Manager::SLIDER,
330 - 'size_units' => ['ms', ''],
331 - 'range' => [
332 - 'ms' => [
333 - 'min' => 100,
334 - 'max' => 5000,
335 - 'step' => 50,
336 - ],
337 - ],
338 - 'default' => [
339 - 'unit' => 'ms',
340 - 'size' => 1000,
341 - ],
342 - 'condition' => [
343 - 'active_hash' => 'yes',
344 - 'active_scrollspy' => 'yes',
345 - ],
346 - 'frontend_available' => true,
347 - ]
348 - );
349 -
350 - $this->add_control(
351 - 'hash_scrollspy_duration',
352 - [
353 - 'label' => esc_html__('Scrollspy Duration', 'uicore-elements'),
354 - 'type' => Controls_Manager::SLIDER,
355 - 'size_units' => ['ms', ''],
356 - 'range' => [
357 - 'ms' => [
358 - 'min' => 100,
359 - 'max' => 5000,
360 - 'step' => 50,
361 - ],
362 - ],
363 - 'default' => [
364 - 'unit' => 'ms',
365 - 'size' => 800,
366 - ],
367 - 'condition' => [
368 - 'active_hash' => 'yes',
369 - 'active_scrollspy' => 'yes',
370 - ],
371 - 'frontend_available' => true,
372 - ]
373 - );
374 -
375 - $this->add_control(
376 - 'schema_activity',
377 - [
378 - 'label' => esc_html__('FAQ Schema', 'uicore-elements'),
379 - 'description' => esc_html__('Avoid activating schema for multiple Accordions on the same page to prevent errors in Google indexing. Activate schema only for the Accordion you intend to display in search results.', 'uicore-elements'),
380 - 'type' => Controls_Manager::SWITCHER,
381 - 'separator' => 'before',
382 - ]
383 - );
384 -
385 - $this->end_controls_section();
386 -
387 - //Style
388 - $this->start_controls_section(
389 - 'section_toggle_style_item',
390 - [
391 - 'label' => __('Item', 'uicore-elements'),
392 - 'tab' => Controls_Manager::TAB_STYLE,
393 - ]
394 - );
395 -
396 - $this->add_control(
397 - 'item_spacing',
398 - [
399 - 'label' => __('Item Gap', 'uicore-elements'),
400 - 'type' => Controls_Manager::SLIDER,
401 - 'range' => [
402 - 'px' => [
403 - 'min' => 0,
404 - 'max' => 100,
405 - ],
406 - ],
407 - 'default' => [
408 - 'size' => 5,
409 - ],
410 - 'selectors' => [
411 - '{{WRAPPER}} .ui-e-item + .ui-e-item' => 'margin-top: {{SIZE}}{{UNIT}};',
412 - ],
413 - ]
414 - );
415 -
416 - $this->start_controls_tabs('tabs_item_style');
417 -
418 - $this->start_controls_tab(
419 - 'tab_item_normal',
420 - [
421 - 'label' => __('Normal', 'uicore-elements'),
422 - ]
423 - );
424 -
425 - $this->add_group_control(
426 - Group_Control_Background::get_type(),
427 - [
428 - 'name' => 'item_background',
429 - 'selector' => '{{WRAPPER}} .ui-e-item',
430 - ]
431 - );
432 -
433 - $this->add_group_control(
434 - Group_Control_Border::get_type(),
435 - [
436 - 'name' => 'item_border',
437 - 'placeholder' => '1px',
438 - 'default' => '1px',
439 - 'selector' => '{{WRAPPER}} .ui-e-item',
440 - ]
441 - );
442 -
443 - $this->add_responsive_control(
444 - 'item_radius',
445 - [
446 - 'label' => __('Border Radius', 'uicore-elements'),
447 - 'type' => Controls_Manager::DIMENSIONS,
448 - 'size_units' => ['px', '%'],
449 - 'selectors' => [
450 - '{{WRAPPER}} .ui-e-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
451 - ],
452 - ]
453 - );
454 -
455 - $this->add_responsive_control(
456 - 'item_padding',
457 - [
458 - 'label' => __('Padding', 'uicore-elements'),
459 - 'type' => Controls_Manager::DIMENSIONS,
460 - 'size_units' => ['px', 'em', '%'],
461 - 'default' => [
462 - 'top' => 15,
463 - 'right' => 15,
464 - 'bottom' => 15,
465 - 'left' => 15,
466 - 'unit' => 'px',
467 - 'isLinked' => true,
468 - ],
469 - 'selectors' => [
470 - '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
471 - ],
472 - ]
473 - );
474 -
475 - $this->add_group_control(
476 - Group_Control_Box_Shadow::get_type(),
477 - [
478 - 'name' => 'item_shadow',
479 - 'selector' => '{{WRAPPER}} .ui-e-item',
480 - ]
481 - );
482 -
483 - $this->end_controls_tab();
484 -
485 - $this->start_controls_tab(
486 - 'tab_item_hover',
487 - [
488 - 'label' => __('Hover', 'uicore-elements'),
489 - ]
490 - );
491 -
492 - $this->add_group_control(
493 - Group_Control_Background::get_type(),
494 - [
495 - 'name' => 'hover_item_background',
496 - 'selector' => '{{WRAPPER}} .ui-e-item:hover',
497 - ]
498 - );
499 -
500 - $this->add_control(
501 - 'item_hover_border_color',
502 - [
503 - 'label' => __('Border Color', 'uicore-elements'),
504 - 'type' => Controls_Manager::COLOR,
505 - 'condition' => [
506 - 'item_border_border!' => '',
507 - ],
508 - 'selectors' => [
509 - '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
510 - ],
511 - ]
512 - );
513 -
514 - $this->end_controls_tab();
515 -
516 - $this->start_controls_tab(
517 - 'tab_item_active',
518 - [
519 - 'label' => __('Active', 'uicore-elements'),
520 - ]
521 - );
522 -
523 - $this->add_group_control(
524 - Group_Control_Background::get_type(),
525 - [
526 - 'name' => 'active_item_background',
527 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
528 - ]
529 - );
530 -
531 - $this->add_group_control(
532 - Group_Control_Box_Shadow::get_type(),
533 - [
534 - 'name' => 'active_item_shadow',
535 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
536 - ]
537 - );
538 -
539 - $this->add_group_control(
540 - Group_Control_Border::get_type(),
541 - [
542 - 'name' => 'active_item_border',
543 - 'placeholder' => '1px',
544 - 'default' => '1px',
545 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
546 - ]
547 - );
548 -
549 - $this->add_responsive_control(
550 - 'active_item_radius',
551 - [
552 - 'label' => __('Border Radius', 'uicore-elements'),
553 - 'type' => Controls_Manager::DIMENSIONS,
554 - 'size_units' => ['px', '%'],
555 - 'selectors' => [
556 - '{{WRAPPER}} .ui-e-item.ui-open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
557 - ],
558 - ]
559 - );
560 -
561 - $this->end_controls_tab();
562 -
563 - $this->end_controls_tabs();
564 -
565 - $this->end_controls_section();
566 -
567 - $this->start_controls_section(
568 - 'section_toggle_style_title',
569 - [
570 - 'label' => __('Title', 'uicore-elements'),
571 - 'tab' => Controls_Manager::TAB_STYLE,
572 - ]
573 - );
574 -
575 - $this->add_responsive_control(
576 - 'title_alignment',
577 - [
578 - 'label' => __('Alignment', 'uicore-elements'),
579 - 'type' => Controls_Manager::CHOOSE,
580 - 'options' => [
581 - 'flex-start' => [
582 - 'title' => __('Left', 'uicore-elements'),
583 - 'icon' => 'eicon-text-align-left',
584 - ],
585 - 'center' => [
586 - 'title' => __('Center', 'uicore-elements'),
587 - 'icon' => 'eicon-text-align-center',
588 - ],
589 - 'flex-end' => [
590 - 'title' => __('Right', 'uicore-elements'),
591 - 'icon' => 'eicon-text-align-right',
592 - ],
593 - ],
594 - 'default' => is_rtl() ? 'flex-end' : 'flex-start',
595 - 'default' => 'flex-start',
596 - 'toggle' => false,
597 - 'label_block' => false,
598 - 'selectors' => [
599 - '{{WRAPPER}} .ui-e-title-text' => 'justify-content: {{VALUE}};',
600 - ],
601 - ]
602 - );
603 -
604 - $this->start_controls_tabs('tabs_title_style');
605 -
606 - $this->start_controls_tab(
607 - 'tab_title_normal',
608 - [
609 - 'label' => __('Normal', 'uicore-elements'),
610 - ]
611 - );
612 -
613 - $this->add_control(
614 - 'title_color',
615 - [
616 - 'label' => __('Title Color', 'uicore-elements'),
617 - 'type' => Controls_Manager::COLOR,
618 - 'selectors' => [
619 - '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
620 - '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
621 - ],
622 - ]
623 - );
624 -
625 - $this->add_group_control(
626 - Group_Control_Background::get_type(),
627 - [
628 - 'name' => 'title_background',
629 - 'selector' => '{{WRAPPER}} .ui-e-title',
630 - ]
631 - );
632 -
633 - $this->add_group_control(
634 - Group_Control_Border::get_type(),
635 - [
636 - 'name' => 'title_border',
637 - 'placeholder' => '1px',
638 - 'default' => '1px',
639 - 'selector' => '{{WRAPPER}} .ui-e-title',
640 - ]
641 - );
642 -
643 - $this->add_responsive_control(
644 - 'title_radius',
645 - [
646 - 'label' => __('Border Radius', 'uicore-elements'),
647 - 'type' => Controls_Manager::DIMENSIONS,
648 - 'size_units' => ['px', '%'],
649 - 'selectors' => [
650 - '{{WRAPPER}} .ui-e-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
651 - ],
652 - ]
653 - );
654 -
655 - $this->add_responsive_control(
656 - 'title_padding',
657 - [
658 - 'label' => __('Padding', 'uicore-elements'),
659 - 'type' => Controls_Manager::DIMENSIONS,
660 - 'size_units' => ['px', 'em', '%'],
661 - 'selectors' => [
662 - '{{WRAPPER}} .ui-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
663 - ],
664 - ]
665 - );
666 -
667 - $this->add_group_control(
668 - Group_Control_Typography::get_type(),
669 - [
670 - 'name' => 'title_typography',
671 - 'selector' => '{{WRAPPER}} .ui-e-title',
672 - ]
673 - );
674 -
675 - $this->add_group_control(
676 - Group_Control_Box_Shadow::get_type(),
677 - [
678 - 'name' => 'title_shadow',
679 - 'selector' => '{{WRAPPER}} .ui-e-title',
680 - ]
681 - );
682 -
683 - $this->end_controls_tab();
684 -
685 - $this->start_controls_tab(
686 - 'tab_title_hover',
687 - [
688 - 'label' => __('Hover', 'uicore-elements'),
689 - ]
690 - );
691 -
692 - $this->add_control(
693 - 'hover_title_color',
694 - [
695 - 'label' => __('Title Color', 'uicore-elements'),
696 - 'type' => Controls_Manager::COLOR,
697 - 'selectors' => [
698 - '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'color: {{VALUE}};',
699 - '{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
700 - ],
701 - ]
702 - );
703 -
704 - $this->add_group_control(
705 - Group_Control_Background::get_type(),
706 - [
707 - 'name' => 'hover_title_background',
708 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-title',
709 - ]
710 - );
711 -
712 - $this->add_control(
713 - 'title_hover_border_color',
714 - [
715 - 'label' => __('Border Color', 'uicore-elements'),
716 - 'type' => Controls_Manager::COLOR,
717 - 'condition' => [
718 - 'title_border_border!' => '',
719 - ],
720 - 'selectors' => [
721 - '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'border-color: {{VALUE}};',
722 - ],
723 - ]
724 - );
725 -
726 - $this->end_controls_tab();
727 -
728 - $this->start_controls_tab(
729 - 'tab_title_active',
730 - [
731 - 'label' => __('Active', 'uicore-elements'),
732 - ]
733 - );
734 -
735 - $this->add_control(
736 - 'active_title_color',
737 - [
738 - 'label' => __('Title Color', 'uicore-elements'),
739 - 'type' => Controls_Manager::COLOR,
740 - 'selectors' => [
741 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title' => 'color: {{VALUE}};',
742 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
743 - ],
744 - ]
745 - );
746 -
747 - $this->add_group_control(
748 - Group_Control_Background::get_type(),
749 - [
750 - 'name' => 'active_title_background',
751 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
752 - ]
753 - );
754 -
755 - $this->add_group_control(
756 - Group_Control_Box_Shadow::get_type(),
757 - [
758 - 'name' => 'active_title_shadow',
759 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
760 - ]
761 - );
762 -
763 - $this->add_group_control(
764 - Group_Control_Border::get_type(),
765 - [
766 - 'name' => 'active_title_border',
767 - 'placeholder' => '1px',
768 - 'default' => '1px',
769 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
770 - ]
771 - );
772 -
773 - $this->add_responsive_control(
774 - 'active_title_radius',
775 - [
776 - 'label' => __('Border Radius', 'uicore-elements'),
777 - 'type' => Controls_Manager::DIMENSIONS,
778 - 'size_units' => ['px', '%'],
779 - 'selectors' => [
780 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
781 - ],
782 - ]
783 - );
784 -
785 - $this->end_controls_tab();
786 -
787 - $this->end_controls_tabs();
788 -
789 - $this->end_controls_section();
790 -
791 - $this->start_controls_section(
792 - 'section_style_title_icon',
793 - [
794 - 'label' => __('Title Icon', 'uicore-elements'),
795 - 'tab' => Controls_Manager::TAB_STYLE,
796 - 'condition' => [
797 - 'show_custom_icon' => 'yes'
798 - ]
799 - ]
800 - );
801 -
802 - $this->start_controls_tabs('tabs_title_icon_style');
803 -
804 - $this->start_controls_tab(
805 - 'tab_title_icon_normal',
806 - [
807 - 'label' => __('Normal', 'uicore-elements'),
808 - ]
809 - );
810 -
811 - $this->add_control(
812 - 'title_icon_color',
813 - [
814 - 'label' => __('Title Icon Color', 'uicore-elements'),
815 - 'type' => Controls_Manager::COLOR,
816 - 'selectors' => [
817 - '{{WRAPPER}} .ui-e-custom-icon i' => 'color: {{VALUE}};',
818 - '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
819 - ],
820 - ]
821 - );
822 -
823 - $this->add_responsive_control(
824 - 'title_icon_size',
825 - [
826 - 'label' => esc_html__('Size', 'uicore-elements'),
827 - 'type' => Controls_Manager::SLIDER,
828 - 'selectors' => [
829 - '{{WRAPPER}} .ui-e-custom-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
830 - '{{WRAPPER}} .ui-e-custom-icon svg' => 'width: {{SIZE}}{{UNIT}};',
831 - ],
832 - ]
833 - );
834 -
835 - $this->add_responsive_control(
836 - 'icon_indent',
837 - [
838 - 'label' => esc_html__('Spacing', 'uicore-elements'),
839 - 'type' => Controls_Manager::SLIDER,
840 - 'range' => [
841 - 'px' => [
842 - 'max' => 50,
843 - ],
844 - ],
845 - 'default' => [
846 - 'unit' => 'px',
847 - 'size' => 5,
848 - ],
849 - 'selectors' => [
850 - '{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
851 - ],
852 - ]
853 - );
854 -
855 - $this->end_controls_tab();
856 -
857 - $this->start_controls_tab(
858 - 'tab_title_icon_hover',
859 - [
860 - 'label' => __('Hover', 'uicore-elements'),
861 - ]
862 - );
863 -
864 - $this->add_control(
865 - 'title_hover_icon_color',
866 - [
867 - 'label' => __('Title Icon Color', 'uicore-elements'),
868 - 'type' => Controls_Manager::COLOR,
869 - 'selectors' => [
870 - '{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon i' => 'color: {{VALUE}};',
871 - '{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
872 - ],
873 - ]
874 - );
875 -
876 - $this->end_controls_tab();
877 -
878 - $this->start_controls_tab(
879 - 'tab_title_icon_active',
880 - [
881 - 'label' => __('Active', 'uicore-elements'),
882 - ]
883 - );
884 -
885 - $this->add_control(
886 - 'title_active_icon_color',
887 - [
888 - 'label' => __('Title Icon Color', 'uicore-elements'),
889 - 'type' => Controls_Manager::COLOR,
890 - 'selectors' => [
891 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon i' => 'color: {{VALUE}};',
892 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
893 - ],
894 - ]
895 - );
896 -
897 - $this->end_controls_tab();
898 -
899 - $this->end_controls_tabs();
900 -
901 - $this->end_controls_section();
902 -
903 - $this->start_controls_section(
904 - 'section_toggle_style_icon',
905 - [
906 - 'label' => __('Open & Close Icon', 'uicore-elements'),
907 - 'tab' => Controls_Manager::TAB_STYLE,
908 - 'condition' => [
909 - 'accordion_icon[value]!' => '',
910 - ],
911 - ]
912 - );
913 -
914 - $this->add_control(
915 - 'icon_align',
916 - [
917 - 'label' => __('Alignment', 'uicore-elements'),
918 - 'type' => Controls_Manager::CHOOSE,
919 - 'options' => [
920 - 'left' => [
921 - 'title' => __('Start', 'uicore-elements'),
922 - 'icon' => 'eicon-h-align-left',
923 - ],
924 - 'right' => [
925 - 'title' => __('End', 'uicore-elements'),
926 - 'icon' => 'eicon-h-align-right',
927 - ],
928 - ],
929 - 'default' => is_rtl() ? 'left' : 'right',
930 - 'toggle' => false,
931 - 'label_block' => false,
932 - ]
933 - );
934 -
935 - $this->start_controls_tabs('tabs_icon_style');
936 -
937 - $this->start_controls_tab(
938 - 'tab_icon_normal',
939 - [
940 - 'label' => __('Normal', 'uicore-elements'),
941 - ]
942 - );
943 -
944 - $this->add_control(
945 - 'icon_color',
946 - [
947 - 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
948 - 'type' => Controls_Manager::COLOR,
949 - 'selectors' => [
950 - '{{WRAPPER}} .ui-e-icon' => 'color: {{VALUE}};',
951 - '{{WRAPPER}} .ui-e-icon svg' => 'fill: {{VALUE}};',
952 - ],
953 - ]
954 - );
955 -
956 - $this->add_group_control(
957 - Group_Control_Background::get_type(),
958 - [
959 - 'name' => 'icon_background_color',
960 - 'selector' => '{{WRAPPER}} .ui-e-icon'
961 - ]
962 - );
963 -
964 - $this->add_group_control(
965 - Group_Control_Border::get_type(),
966 - [
967 - 'name' => 'icon_border',
968 - 'selector' => '{{WRAPPER}} .ui-e-icon',
969 - ]
970 - );
971 -
972 - $this->add_responsive_control(
973 - 'icon_border_radius',
974 - [
975 - 'label' => esc_html__('Border Radius', 'uicore-elements'),
976 - 'type' => Controls_Manager::DIMENSIONS,
977 - 'size_units' => ['px', '%'],
978 - 'selectors' => [
979 - '{{WRAPPER}} .ui-e-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
980 - ],
981 - ]
982 - );
983 -
984 - $this->add_responsive_control(
985 - 'icon_padding',
986 - [
987 - 'label' => esc_html__('Padding', 'uicore-elements'),
988 - 'type' => Controls_Manager::DIMENSIONS,
989 - 'size_units' => ['px', 'em', '%'],
990 - 'selectors' => [
991 - // set as css variables because animations may need some particular value, such as pad-top for fade icon animation
992 - '{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-pad-top: {{TOP}}{{UNIT}}; --ui-e-icon-pad-right: {{RIGHT}}{{UNIT}}; --ui-e-icon-pad-bot: {{BOTTOM}}{{UNIT}}; --ui-e-icon-pad-left: {{LEFT}}{{UNIT}};',
993 - ],
994 - ]
995 - );
996 -
997 - $this->add_responsive_control(
998 - 'icon_size',
999 - [
1000 - 'label' => __('Icon Size', 'uicore-elements'),
1001 - 'type' => Controls_Manager::SLIDER,
1002 - 'range' => [
1003 - 'px' => [
1004 - 'min' => 10,
1005 - 'max' => 100,
1006 - ],
1007 - ],
1008 - 'default' => [
1009 - 'unit' => 'px',
1010 - 'size' => 15,
1011 - ],
1012 - 'selectors' => [
1013 - '{{WRAPPER}} .ui-e-title .ui-e-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
1014 - ],
1015 - ]
1016 - );
1017 -
1018 - $this->add_responsive_control(
1019 - 'icon_spacing',
1020 - [
1021 - 'label' => __('Icon Spacing', 'uicore-elements'),
1022 - 'type' => Controls_Manager::SLIDER,
1023 - 'range' => [
1024 - 'px' => [
1025 - 'min' => 0,
1026 - 'max' => 50,
1027 - ],
1028 - ],
1029 - 'selectors' => [
1030 - '{{WRAPPER}} .ui-e-title' => 'gap: {{SIZE}}{{UNIT}};',
1031 - ]
1032 - ]
1033 - );
1034 -
1035 - $this->add_group_control(
1036 - Group_Control_Box_Shadow::get_type(),
1037 - [
1038 - 'name' => 'icon_box_shadow',
1039 - 'selector' => '{{WRAPPER}} .ui-e-icon',
1040 - ]
1041 - );
1042 -
1043 - $this->end_controls_tab();
1044 -
1045 - $this->start_controls_tab(
1046 - 'tab_icon_hover',
1047 - [
1048 - 'label' => __('Hover', 'uicore-elements'),
1049 - ]
1050 - );
1051 -
1052 - $this->add_control(
1053 - 'icon_hover_color',
1054 - [
1055 - 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1056 - 'type' => Controls_Manager::COLOR,
1057 - 'selectors' => [
1058 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'color: {{VALUE}};',
1059 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon svg' => 'fill: {{VALUE}};',
1060 - ],
1061 - ]
1062 - );
1063 -
1064 - $this->add_group_control(
1065 - Group_Control_Background::get_type(),
1066 - [
1067 - 'name' => 'icon_hover_background_color',
1068 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-icon'
1069 - ]
1070 - );
1071 -
1072 - $this->add_control(
1073 - 'icon_hover_border_color',
1074 - [
1075 - 'label' => esc_html__('Border Color', 'uicore-elements'),
1076 - 'type' => Controls_Manager::COLOR,
1077 - 'condition' => [
1078 - 'icon_border_border!' => '',
1079 - ],
1080 - 'selectors' => [
1081 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'border-color: {{VALUE}};',
1082 - ],
1083 - ]
1084 - );
1085 -
1086 - $this->end_controls_tab();
1087 -
1088 - $this->start_controls_tab(
1089 - 'tab_icon_active',
1090 - [
1091 - 'label' => __('Active', 'uicore-elements'),
1092 - ]
1093 - );
1094 -
1095 - $this->add_control(
1096 - 'icon_active_color',
1097 - [
1098 - 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1099 - 'type' => Controls_Manager::COLOR,
1100 - 'selectors' => [
1101 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon' => 'color: {{VALUE}};',
1102 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon svg' => 'fill: {{VALUE}};',
1103 - ],
1104 - ]
1105 - );
1106 -
1107 - $this->add_group_control(
1108 - Group_Control_Background::get_type(),
1109 - [
1110 - 'name' => 'icon_active_background_color',
1111 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon'
1112 - ]
1113 - );
1114 -
1115 - $this->add_control(
1116 - 'icon_active_border_color',
1117 - [
1118 - 'label' => esc_html__('Border Color', 'uicore-elements'),
1119 - 'type' => Controls_Manager::COLOR,
1120 - 'condition' => [
1121 - 'icon_border_border!' => '',
1122 - ],
1123 - 'selectors' => [
1124 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon' => 'border-color: {{VALUE}};',
1125 - ],
1126 - ]
1127 - );
1128 -
1129 - $this->end_controls_tab();
1130 -
1131 - $this->end_controls_tabs();
1132 -
1133 - $this->end_controls_section();
1134 -
1135 - $this->start_controls_section(
1136 - 'section_toggle_style_content',
1137 - [
1138 - 'label' => __('Content', 'uicore-elements'),
1139 - 'tab' => Controls_Manager::TAB_STYLE,
1140 - ]
1141 - );
1142 -
1143 - $this->add_control(
1144 - 'content_color',
1145 - [
1146 - 'label' => __('Text Color', 'uicore-elements'),
1147 - 'type' => Controls_Manager::COLOR,
1148 - 'selectors' => [
1149 - '{{WRAPPER}} .ui-e-content' => 'color: {{VALUE}};',
1150 - ],
1151 - ]
1152 - );
1153 -
1154 - $this->add_group_control(
1155 - Group_Control_Background::get_type(),
1156 - [
1157 - 'name' => 'content_background_color',
1158 - 'selector' => '{{WRAPPER}} .ui-e-content',
1159 - ]
1160 - );
1161 -
1162 - $this->add_group_control(
1163 - Group_Control_Border::get_type(),
1164 - [
1165 - 'name' => 'content_border',
1166 - 'label' => __('Border', 'uicore-elements'),
1167 - 'selector' => '{{WRAPPER}} .ui-e-content',
1168 - ]
1169 - );
1170 -
1171 - $this->add_responsive_control(
1172 - 'content_radius',
1173 - [
1174 - 'label' => __('Border Radius', 'uicore-elements'),
1175 - 'type' => Controls_Manager::DIMENSIONS,
1176 - 'size_units' => ['px', '%'],
1177 - 'selectors' => [
1178 - '{{WRAPPER}} .ui-e-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1179 - ],
1180 - ]
1181 - );
1182 -
1183 - $this->add_responsive_control(
1184 - 'content_padding',
1185 - [
1186 - 'label' => __('Padding', 'uicore-elements'),
1187 - 'type' => Controls_Manager::DIMENSIONS,
1188 - 'size_units' => ['px', 'em', '%'],
1189 - 'selectors' => [
1190 - '{{WRAPPER}} .ui-e-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1191 - ],
1192 - ]
1193 - );
1194 -
1195 - $this->add_responsive_control(
1196 - 'content_spacing',
1197 - [
1198 - 'label' => __('Spacing', 'uicore-elements'),
1199 - 'type' => Controls_Manager::SLIDER,
1200 - 'range' => [
1201 - 'px' => [
1202 - 'min' => 0,
1203 - 'max' => 100,
1204 - ],
1205 - ],
1206 - 'default' => [
1207 - 'unit' => 'px',
1208 - 'size' => 15,
1209 - ],
1210 - 'selectors' => [
1211 - '{{WRAPPER}} .ui-e-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1212 - ],
1213 - ]
1214 - );
1215 -
1216 - $this->add_group_control(
1217 - Group_Control_Typography::get_type(),
1218 - [
1219 - 'name' => 'content_typography',
1220 - 'selector' => '{{WRAPPER}} .ui-e-content',
1221 - ]
1222 - );
1223 -
1224 - $this->add_group_control(
1225 - Group_Control_Box_Shadow::get_type(),
1226 - [
1227 - 'name' => 'content_shadow',
1228 - 'label' => __('Box Shadow', 'uicore-elements'),
1229 - 'selector' => '{{WRAPPER}} .ui-e-content',
1230 - ]
1231 - );
1232 -
1233 - $this->add_responsive_control(
1234 - 'align',
1235 - [
1236 - 'label' => __('Alignment', 'uicore-elements'),
1237 - 'type' => Controls_Manager::CHOOSE,
1238 - 'options' => [
1239 - 'left' => [
1240 - 'title' => __('Left', 'uicore-elements'),
1241 - 'icon' => 'eicon-text-align-left',
1242 - ],
1243 - 'center' => [
1244 - 'title' => __('Center', 'uicore-elements'),
1245 - 'icon' => 'eicon-text-align-center',
1246 - ],
1247 - 'right' => [
1248 - 'title' => __('Right', 'uicore-elements'),
1249 - 'icon' => 'eicon-text-align-right',
1250 - ],
1251 - ],
1252 - 'selectors' => [
1253 - '{{WRAPPER}} .ui-e-content' => 'text-align: {{VALUE}};',
1254 - ],
1255 - ]
1256 - );
1257 -
1258 - $this->end_controls_section();
1259 -
1260 - $this->start_controls_section(
1261 - 'section_animation',
1262 - [
1263 - 'label' => esc_html__('Animations', 'uicore-elements'),
1264 - 'tab' => Controls_Manager::TAB_STYLE,
1265 - ]
1266 - );
1267 -
1268 - $this->add_control(
1269 - 'accordion_animation',
1270 - [
1271 - 'label' => esc_html__( 'Accordion Animation', 'uicore-elements' ),
1272 - 'type' => \Elementor\Controls_Manager::SELECT,
1273 - 'default' => 'ui-e-animation-acc-basic',
1274 - 'options' => [
1275 - '' => esc_html__( 'None', 'uicore-elements' ),
1276 - 'ui-e-animation-acc-basic' => esc_html__( 'Basic', 'uicore-elements' ),
1277 - 'ui-e-animation-acc-slow' => esc_html__( 'Slow', 'uicore-elements' ),
1278 - 'ui-e-animation-acc-expand' => esc_html__( 'Expand', 'uicore-elements' ),
1279 - 'ui-e-animation-acc-overshadow' => esc_html__( 'Overshadow', 'uicore-elements'),
1280 - ],
1281 - 'prefix_class' => '',
1282 - 'render_type' => 'template',
1283 - 'frontend_available' => true,
1284 - ]
1285 - );
1286 -
1287 - $this->add_control(
1288 - 'icon_animation',
1289 - [
1290 - 'label' => esc_html__( 'Icon Animation', 'uicore-elements' ),
1291 - 'type' => \Elementor\Controls_Manager::SELECT,
1292 - 'default' => 'ui-e-animation-ico-fade',
1293 - 'options' => [
1294 - '' => esc_html__( 'None', 'uicore-elements' ),
1295 - 'ui-e-animation-ico-fade' => esc_html__( 'Fade', 'uicore-elements' ),
1296 - 'ui-e-animation-ico-spin' => esc_html__( 'Spin', 'uicore-elements' ),
1297 - 'ui-e-animation-ico-slide' => esc_html__( 'Slide', 'uicore-elements' ),
1298 - ],
1299 - 'prefix_class' => '',
1300 - 'render_type' => 'template',
1301 - ]
1302 - );
1303 -
1304 - $this->add_control(
1305 - 'icon_spin_value',
1306 - [
1307 - 'label' => esc_html__( 'Icon Rotation', 'uicore-elements' ),
1308 - 'type' => \Elementor\Controls_Manager::SLIDER,
1309 - 'size_units' => ['deg', ''],
1310 - 'range' => [
1311 - 'deg' => [
1312 - 'min' => 0,
1313 - 'max' => 360,
1314 - 'step' => 1,
1315 - ],
1316 - ],
1317 - 'default' => [
1318 - 'unit' => 'deg',
1319 - 'size' => 315,
1320 - ],
1321 - 'selectors' => [
1322 - '{{WRAPPER}} .ui-e-icon' => '--ui-e-spin:{{SIZE}}deg;',
1323 - ],
1324 - 'condition' =>[
1325 - 'icon_animation' => 'ui-e-animation-ico-spin',
1326 - ]
1327 - ]
1328 - );
1329 -
1330 - $this->end_controls_section();
1331 - }
1332 - protected function render()
1333 - {
1334 -
1335 - $settings = $this->get_settings_for_display(); // Get settings
1336 -
1337 - $ID = 'ui-e-accordion-' . $this->get_id(); // Sets the accordion item ID that will'be used to implemenet hash features and also if the item has no title.
1338 -
1339 - // Sets schema atts if active
1340 - if ($settings['schema_activity'] == 'yes') {
1341 - $this->add_render_attribute('accordion', 'itemscope');
1342 - $this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1343 - }
1344 -
1345 - $titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1346 -
1347 - ?>
1348 - <div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion');?>>
1349 -
1350 - <?php foreach ($settings['tabs'] as $index => $item) : // loop throught the repeater
1351 -
1352 - $loopCounter = $index + 1;
1353 -
1354 - // Builds the accordion unique ID (should be helper function)
1355 - if($item['tab_title']){ // If it has a title, used it as ID, filtering the string to be syntactically suitable
1356 - $accID = $item['tab_title'];
1357 - $accID = strtolower($accID); // lowercase everything
1358 - $accID = preg_replace("/[^a-z0-9_\s-]/", "", $accID); // removes especial characters
1359 - $accID = preg_replace("/[\s-]+/", " ", $accID); // remove multiple dashes/whitespaces
1360 - $accID = preg_replace("/[\s_]/", "-", $accID); // convert whitespaces and underscore to dash
1361 - $accID = 'ui-e-' . $accID; // and finally prefix it
1362 - } else { // If it hasn't title, uses the widget ID plus the loop counter iteration
1363 - $accID = $ID . $loopCounter;
1364 - }
1365 -
1366 - // Creates the title and content atts
1367 - $tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index);
1368 - $tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
1369 -
1370 - // Render title atts
1371 - $this->add_render_attribute($tab_title_setting_key, [
1372 - 'class' => ['ui-e-title'],
1373 - 'id' => $accID,
1374 - ]);
1375 - $this->add_render_attribute($tab_title_setting_key, 'class', ('right' == $settings['icon_align']) ? 'ui-right' : '');
1376 -
1377 - // Render content atts
1378 - $this->add_render_attribute($tab_content_setting_key, [
1379 - 'class' => ['ui-e-content'],
1380 - 'style' => ($loopCounter === $settings['active_item']) ? '' : 'display:none;', // keep content hide if item not active (has to be set inline so jquery can take control over it)
1381 - ]);
1382 - if ('sectionId' == $item['source']) { // Check if the current accordion item uses sectionId as source
1383 - if($item['section_id'] != ''){ // and also check if an ID was set
1384 - $this->add_render_attribute($tab_content_setting_key, [
1385 - 'class' => ['ui-section-id'], // sets the class searched for the accordion script
1386 - 'id' => 'ui-' . preg_replace('/#/', '', $item['section_id']), // adds the ID with prefix since it shouldn't exist two or more equal IDs on the same page. Also, since users might or not add the hash on control, we work without it and filters with preg_replace()
1387 - ]);
1388 - $sectionWarning = "The element with ID <em>{$item['section_id']}</em> is going to be inserted here on the front-end"; // and creates a message to populate the accordion content
1389 - } else {
1390 - $sectionWarning = esc_html__( "You didn't define an ID.", 'uicore-elements' );
1391 - }
1392 -
1393 - }
1394 - $this->add_inline_editing_attributes($tab_content_setting_key, 'advanced'); // Allow content inline editing
1395 -
1396 - // Render item atts
1397 - $item_key = 'ui-e-item-' . $index;
1398 - $this->add_render_attribute($item_key, [
1399 - 'class' => ($loopCounter === $settings['active_item']) ? 'ui-e-item ui-open' : 'ui-e-item',
1400 - ]);
1401 -
1402 - // Render schema atts if active
1403 - if ($settings['schema_activity'] == 'yes') {
1404 - $this->add_render_attribute($item_key, 'itemscope');
1405 - $this->add_render_attribute($item_key, 'itemprop', 'mainEntity');
1406 - $this->add_render_attribute($item_key, 'itemtype', 'https://schema.org/Question');
1407 -
1408 - $this->add_render_attribute($tab_content_setting_key, 'itemscope');
1409 - $this->add_render_attribute($tab_content_setting_key, 'itemprop', 'acceptedAnswer', true);
1410 - $this->add_render_attribute($tab_content_setting_key, 'itemtype', 'https://schema.org/Answer', true);
1411 -
1412 - $schema_text = $this->get_repeater_setting_key('schema_text', 'tabs', $index);
1413 - $schema_name = $this->get_repeater_setting_key('schema_name', 'tabs', $index);
1414 - $this->add_render_attribute($schema_text, 'itemprop', 'text');
1415 - $this->add_render_attribute($schema_name, 'itemprop', 'name');
1416 - // Sets the variables to empty to avoid undefined variable problems
1417 - } else {
1418 - $schema_text = $schema_name = '';
1419 - }
1420 - ?>
1421 - <div <?php $this->print_render_attribute_string($item_key);?>>
1422 -
1423 - <<?php echo esc_html($titleTag)?> <?php $this->print_render_attribute_string($tab_title_setting_key);?>>
1424 -
1425 - <?php if ($settings['accordion_icon']['value']) : ?>
1426 - <span class="ui-e-icon ui-e-<?php esc_attr($settings['icon_align']); ?>" aria-hidden="true">
1427 -
1428 - <span class="ui-e-icon-closed">
1429 - <?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1430 - </span>
1431 -
1432 - <?php if($settings['icon_animation'] != 'ui-e-animation-ico-spin') : //spin animation dismiss the opened accordion icon ?>
1433 - <span class="ui-e-icon-opened">
1434 - <?php Icons_Manager::render_icon($settings['accordion_active_icon'], ['aria-hidden' => 'true']); ?>
1435 - </span>
1436 - <?php endif; ?>
1437 -
1438 - </span>
1439 - <?php endif; ?>
1440 -
1441 - <span class="ui-e-title-text" <?php $this->print_render_attribute_string($schema_name) ;?>>
1442 - <?php if (!empty($item['repeater_icon']['value']) and $settings['show_custom_icon'] == 'yes') : ?>
1443 - <span class="ui-e-custom-icon">
1444 - <?php Icons_Manager::render_icon($item['repeater_icon'], ['aria-hidden' => 'true']); ?>
1445 - </span>
1446 - <?php endif; ?>
1447 - <?php esc_html($item['tab_title']); ?>
1448 - </span>
1449 -
1450 - </<?php esc_html($titleTag)?>>
1451 -
1452 - <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1453 - <?php
1454 - if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1455 -
1456 - // if schema is active, creates a wrapper for the itemprop structure
1457 - if($settings['schema_activity'] == 'yes') {
1458 - ?>
1459 - <div <?php $this->print_render_attribute_string($schema_text);?> >
1460 - <?php
1461 - }
1462 -
1463 - echo $this->parse_text_editor($item['tab_content']);// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1464 -
1465 - if($settings['schema_activity'] == 'yes') {
1466 - ?>
1467 - </div>
1468 - <?php
1469 - }
1470 - }
1471 - // if source is sectionId and we're inside editor, returns a warning for context. The sectionId content is moved via JS
1472 - if ('sectionId' == $item['source'] && Plugin::$instance->editor->is_edit_mode()) {
1473 - echo wp_kses($sectionWarning, ['em' => []]);
1474 - }
1475 - ?>
1476 - </div>
1477 -
1478 - </div>
1479 - <?php endforeach; ?>
1480 - </div>
1481 - <?php
1482 - }
1483 -}
1484 -\Elementor\Plugin::instance()->widgets_manager->register(new Accordion());
1 +<?php
2 +
3 +namespace UiCoreElements;
4 +
5 +use Elementor\Repeater;
6 +use Elementor\Controls_Manager;
7 +use Elementor\Group_Control_Border;
8 +use Elementor\Group_Control_Typography;
9 +use Elementor\Group_Control_Background;
10 +use Elementor\Group_Control_Box_Shadow;
11 +use Elementor\Plugin;
12 +use Elementor\Icons_Manager;
13 +
14 +use UiCoreElements\UiCoreWidget;
15 +
16 +defined('ABSPATH') || exit();
17 +
18 +/**
19 + * Accordion
20 + *
21 + * @author Lucas Marini Falbo <[email protected]>
22 + * @since 1.0.0
23 + */
24 +
25 +class Accordion extends UiCoreWidget
26 +{
27 +
28 + public function get_name()
29 + {
30 + return 'uicore-accordion';
31 + }
32 + public function get_title()
33 + {
34 + return __('Accordion', 'uicore-elements');
35 + }
36 + public function get_icon()
37 + {
38 + return 'eicon-accordion ui-e-widget';
39 + }
40 + public function get_categories()
41 + {
42 + return ['uicore'];
43 + }
44 + public function get_keywords()
45 + {
46 + return ['accordion', 'tabs', 'toggle', 'uicore'];
47 + }
48 + public function get_styles()
49 + {
50 + return ['accordion'];
51 + }
52 + public function get_scripts()
53 + {
54 + return ['accordion'];
55 + }
56 + // TODO: remove after Optmized Markup experiment is merged to the core
57 + public function has_widget_inner_wrapper(): bool
58 + {
59 + return true;
60 + }
61 + protected function register_controls()
62 + {
63 + $this->start_controls_section(
64 + 'section_title',
65 + [
66 + 'label' => __('Accordion', 'uicore-elements'),
67 + ]
68 + );
69 +
70 + $repeater = new Repeater();
71 +
72 + $repeater->add_control(
73 + 'tab_title',
74 + [
75 + 'label' => __('Title & Content', 'uicore-elements'),
76 + 'type' => Controls_Manager::TEXT,
77 + 'dynamic' => ['active' => true],
78 + 'default' => __('Accordion Title', 'uicore-elements'),
79 + 'label_block' => true,
80 + ]
81 + );
82 +
83 + $repeater->add_control(
84 + 'source',
85 + [
86 + 'label' => esc_html__('Select Source', 'uicore-elements'),
87 + 'type' => Controls_Manager::SELECT,
88 + 'default' => 'custom',
89 + 'options' => [
90 + 'custom' => esc_html__('Custom Content', 'uicore-elements'),
91 + 'sectionId' => esc_html__('Section ID', 'uicore-elements'),
92 + ],
93 + ]
94 + );
95 +
96 + $repeater->add_control(
97 + 'tab_content',
98 + [
99 + 'label' => __('Content', 'uicore-elements'),
100 + 'type' => Controls_Manager::WYSIWYG,
101 + 'dynamic' => ['active' => true],
102 + 'default' => __('Accordion Content', 'uicore-elements'),
103 + 'show_label' => false,
104 + 'condition' => ['source' => 'custom'],
105 + ]
106 + );
107 +
108 + $repeater->add_control(
109 + 'section_id',
110 + [
111 + 'label' => esc_html__('Section ID', 'uicore-elements'),
112 + 'type' => Controls_Manager::TEXT,
113 + 'placeholder' => esc_html__('CSS ID from an element', 'uicore-elements'),
114 + 'condition' => [
115 + 'source' => 'sectionId'
116 + ],
117 + 'dynamic' => ['active' => true],
118 + ]
119 + );
120 +
121 + $repeater->add_control(
122 + 'repeater_icon',
123 + [
124 + 'label' => __('Title Icon', 'uicore-elements'),
125 + 'type' => Controls_Manager::ICONS,
126 + 'label_block' => false,
127 + 'skin' => 'inline',
128 + ]
129 + );
130 +
131 + $this->add_control(
132 + 'tabs',
133 + [
134 + 'label' => __('Items', 'uicore-elements'),
135 + 'type' => Controls_Manager::REPEATER,
136 + 'fields' => $repeater->get_controls(),
137 + 'default' => [
138 + [
139 + 'tab_title' => __('Accordion #1', 'uicore-elements'),
140 + 'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
141 + ],
142 + [
143 + 'tab_title' => __('Accordion #2', 'uicore-elements'),
144 + 'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
145 + ],
146 + [
147 + 'tab_title' => __('Accordion #3', 'uicore-elements'),
148 + 'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
149 + ],
150 + ],
151 + 'title_field' => '{{{ tab_title }}}',
152 + ]
153 + );
154 +
155 + $this->add_control(
156 + 'title_html_tag',
157 + [
158 + 'label' => __('Title HTML Tag', 'uicore-elements'),
159 + 'type' => Controls_Manager::SELECT,
160 + 'options' => Helper::get_title_tags(),
161 + 'default' => 'h5',
162 + ]
163 + );
164 +
165 + $this->add_control(
166 + 'accordion_icon',
167 + [
168 + 'label' => __('Icon', 'uicore-elements'),
169 + 'type' => Controls_Manager::ICONS,
170 + 'default' => [
171 + 'value' => 'fas fa-plus',
172 + 'library' => 'fa-solid',
173 + ],
174 + 'recommended' => [
175 + 'fa-solid' => [
176 + 'chevron-down',
177 + 'angle-down',
178 + 'angle-double-down',
179 + 'caret-down',
180 + 'caret-square-down',
181 + ],
182 + 'fa-regular' => [
183 + 'caret-square-down',
184 + ],
185 + ],
186 + 'label_block' => false,
187 + 'skin' => 'inline',
188 + ]
189 + );
190 +
191 + $this->add_control(
192 + 'accordion_active_icon',
193 + [
194 + 'label' => __('Active Icon', 'uicore-elements'),
195 + 'type' => Controls_Manager::ICONS,
196 + 'default' => [
197 + 'value' => 'fas fa-minus',
198 + 'library' => 'fa-solid',
199 + ],
200 + 'recommended' => [
201 + 'fa-solid' => [
202 + 'chevron-up',
203 + 'angle-up',
204 + 'angle-double-up',
205 + 'caret-up',
206 + 'caret-square-up',
207 + ],
208 + 'fa-regular' => [
209 + 'caret-square-up',
210 + ],
211 + ],
212 + 'label_block' => false,
213 + 'skin' => 'inline',
214 + 'condition' => [
215 + 'accordion_icon[value]!' => '',
216 + 'icon_animation!' => 'ui-e-animation-ico-spin'
217 + ],
218 + ]
219 + );
220 +
221 + $this->add_control(
222 + 'show_custom_icon',
223 + [
224 + 'label' => esc_html__('Show Title Icon', 'uicore-elements'),
225 + 'type' => Controls_Manager::SWITCHER,
226 + 'separator' => 'before'
227 + ]
228 + );
229 +
230 + $this->end_controls_section();
231 +
232 + $this->start_controls_section(
233 + 'section_content_additional',
234 + [
235 + 'label' => __('Additional', 'uicore-elements'),
236 + ]
237 + );
238 +
239 + $this->add_control(
240 + 'collapsible',
241 + [
242 + 'label' => __('Collapse All Items', 'uicore-elements'),
243 + 'type' => Controls_Manager::SWITCHER,
244 + 'default' => 'true',
245 + 'return_value' => 'true',
246 + 'frontend_available' => true,
247 + ]
248 + );
249 +
250 + $this->add_control(
251 + 'multiple',
252 + [
253 + 'label' => __('Multiple Open', 'uicore-elements'),
254 + 'type' => Controls_Manager::SWITCHER,
255 + 'return_value' => 'true',
256 + 'frontend_available' => true,
257 + ]
258 + );
259 +
260 + $this->add_control(
261 + 'active_item',
262 + [
263 + 'label' => __('Active Item', 'uicore-elements'),
264 + 'type' => Controls_Manager::NUMBER,
265 + 'min' => 1,
266 + 'max' => 20,
267 + 'default' => 1,
268 + ]
269 + );
270 +
271 + $this->add_control(
272 + 'active_hash',
273 + [
274 + 'label' => esc_html__('Hash Location', 'uicore-elements'),
275 + 'type' => Controls_Manager::SWITCHER,
276 + 'default' => 'no',
277 + 'frontend_available' => true,
278 + ]
279 + );
280 +
281 + $this->add_control(
282 + 'active_scrollspy',
283 + [
284 + 'label' => esc_html__('Scrollspy', 'uicore-elements'),
285 + 'type' => Controls_Manager::SWITCHER,
286 + 'default' => 'no',
287 + 'return' => 'yes',
288 + 'frontend_available' => true,
289 + 'condition' => [
290 + 'active_hash' => 'yes'
291 + ]
292 + ]
293 + );
294 +
295 + $this->add_control(
296 + 'hash_top_offset',
297 + [
298 + 'label' => esc_html__('Top Offset ', 'uicore-elements'),
299 + 'type' => Controls_Manager::SLIDER,
300 + 'size_units' => ['px', ''],
301 + 'range' => [
302 + 'px' => [
303 + 'min' => 0,
304 + 'max' => 200,
305 + 'step' => 5,
306 + ],
307 +
308 + ],
309 + 'default' => [
310 + 'unit' => 'px',
311 + 'size' => 70,
312 + ],
313 + 'condition' => [
314 + 'active_hash' => 'yes',
315 + 'active_scrollspy' => 'yes',
316 + ],
317 + 'frontend_available' => true,
318 + ]
319 + );
320 +
321 + $this->add_control(
322 + 'hash_scrollspy_delay',
323 + [
324 + 'label' => esc_html__('Scrollspy Delay', 'uicore-elements'),
325 + 'type' => Controls_Manager::SLIDER,
326 + 'size_units' => ['ms', ''],
327 + 'range' => [
328 + 'ms' => [
329 + 'min' => 100,
330 + 'max' => 5000,
331 + 'step' => 50,
332 + ],
333 + ],
334 + 'default' => [
335 + 'unit' => 'ms',
336 + 'size' => 1000,
337 + ],
338 + 'condition' => [
339 + 'active_hash' => 'yes',
340 + 'active_scrollspy' => 'yes',
341 + ],
342 + 'frontend_available' => true,
343 + ]
344 + );
345 +
346 + $this->add_control(
347 + 'hash_scrollspy_duration',
348 + [
349 + 'label' => esc_html__('Scrollspy Duration', 'uicore-elements'),
350 + 'type' => Controls_Manager::SLIDER,
351 + 'size_units' => ['ms', ''],
352 + 'range' => [
353 + 'ms' => [
354 + 'min' => 100,
355 + 'max' => 5000,
356 + 'step' => 50,
357 + ],
358 + ],
359 + 'default' => [
360 + 'unit' => 'ms',
361 + 'size' => 800,
362 + ],
363 + 'condition' => [
364 + 'active_hash' => 'yes',
365 + 'active_scrollspy' => 'yes',
366 + ],
367 + 'frontend_available' => true,
368 + ]
369 + );
370 +
371 + $this->add_control(
372 + 'schema_activity',
373 + [
374 + 'label' => esc_html__('FAQ Schema', 'uicore-elements'),
375 + 'description' => esc_html__('Avoid activating schema for multiple Accordions on the same page to prevent errors in Google indexing. Activate schema only for the Accordion you intend to display in search results.', 'uicore-elements'),
376 + 'type' => Controls_Manager::SWITCHER,
377 + 'separator' => 'before',
378 + ]
379 + );
380 +
381 + $this->end_controls_section();
382 +
383 + //Style
384 + $this->start_controls_section(
385 + 'section_toggle_style_item',
386 + [
387 + 'label' => __('Item', 'uicore-elements'),
388 + 'tab' => Controls_Manager::TAB_STYLE,
389 + ]
390 + );
391 +
392 + $this->add_responsive_control(
393 + 'item_spacing',
394 + [
395 + 'label' => __('Item Gap', 'uicore-elements'),
396 + 'type' => Controls_Manager::SLIDER,
397 + 'range' => [
398 + 'px' => [
399 + 'min' => 0,
400 + 'max' => 100,
401 + ],
402 + ],
403 + 'default' => [
404 + 'size' => 5,
405 + ],
406 + 'selectors' => [
407 + '{{WRAPPER}} .ui-e-accordion-item + .ui-e-accordion-item' => 'margin-top: {{SIZE}}{{UNIT}};',
408 + ],
409 + ]
410 + );
411 +
412 + $this->start_controls_tabs('tabs_item_style');
413 +
414 + $this->start_controls_tab(
415 + 'tab_item_normal',
416 + [
417 + 'label' => __('Normal', 'uicore-elements'),
418 + ]
419 + );
420 +
421 + $this->add_group_control(
422 + Group_Control_Background::get_type(),
423 + [
424 + 'name' => 'item_background',
425 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item',
426 + ]
427 + );
428 +
429 + $this->add_group_control(
430 + Group_Control_Border::get_type(),
431 + [
432 + 'name' => 'item_border',
433 + 'placeholder' => '1px',
434 + 'default' => '1px',
435 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item',
436 + ]
437 + );
438 +
439 + $this->add_responsive_control(
440 + 'item_radius',
441 + [
442 + 'label' => __('Border Radius', 'uicore-elements'),
443 + 'type' => Controls_Manager::DIMENSIONS,
444 + 'size_units' => ['px', '%'],
445 + 'selectors' => [
446 + '{{WRAPPER}} .ui-e-accordion-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
447 + ],
448 + ]
449 + );
450 +
451 + $this->add_responsive_control(
452 + 'item_padding',
453 + [
454 + 'label' => __('Padding', 'uicore-elements'),
455 + 'type' => Controls_Manager::DIMENSIONS,
456 + 'size_units' => ['px', 'em', '%'],
457 + 'default' => [
458 + 'top' => 15,
459 + 'right' => 15,
460 + 'bottom' => 15,
461 + 'left' => 15,
462 + 'unit' => 'px',
463 + 'isLinked' => true,
464 + ],
465 + 'selectors' => [
466 + '{{WRAPPER}} .ui-e-accordion-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
467 + ],
468 + ]
469 + );
470 +
471 + $this->add_group_control(
472 + Group_Control_Box_Shadow::get_type(),
473 + [
474 + 'name' => 'item_shadow',
475 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item',
476 + ]
477 + );
478 +
479 + $this->end_controls_tab();
480 +
481 + $this->start_controls_tab(
482 + 'tab_item_hover',
483 + [
484 + 'label' => __('Hover', 'uicore-elements'),
485 + ]
486 + );
487 +
488 + $this->add_group_control(
489 + Group_Control_Background::get_type(),
490 + [
491 + 'name' => 'hover_item_background',
492 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover',
493 + ]
494 + );
495 +
496 + $this->add_control(
497 + 'item_hover_border_color',
498 + [
499 + 'label' => __('Border Color', 'uicore-elements'),
500 + 'type' => Controls_Manager::COLOR,
501 + 'condition' => [
502 + 'item_border_border!' => '',
503 + ],
504 + 'selectors' => [
505 + '{{WRAPPER}} .ui-e-accordion-item:hover' => 'border-color: {{VALUE}};',
506 + ],
507 + ]
508 + );
509 +
510 + $this->end_controls_tab();
511 +
512 + $this->start_controls_tab(
513 + 'tab_item_active',
514 + [
515 + 'label' => __('Active', 'uicore-elements'),
516 + ]
517 + );
518 +
519 + $this->add_group_control(
520 + Group_Control_Background::get_type(),
521 + [
522 + 'name' => 'active_item_background',
523 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open',
524 + ]
525 + );
526 +
527 + $this->add_group_control(
528 + Group_Control_Box_Shadow::get_type(),
529 + [
530 + 'name' => 'active_item_shadow',
531 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open',
532 + ]
533 + );
534 +
535 + $this->add_group_control(
536 + Group_Control_Border::get_type(),
537 + [
538 + 'name' => 'active_item_border',
539 + 'placeholder' => '1px',
540 + 'default' => '1px',
541 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open',
542 + ]
543 + );
544 +
545 + $this->add_responsive_control(
546 + 'active_item_radius',
547 + [
548 + 'label' => __('Border Radius', 'uicore-elements'),
549 + 'type' => Controls_Manager::DIMENSIONS,
550 + 'size_units' => ['px', '%'],
551 + 'selectors' => [
552 + '{{WRAPPER}} .ui-e-accordion-item.ui-open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
553 + ],
554 + ]
555 + );
556 +
557 + $this->end_controls_tab();
558 +
559 + $this->end_controls_tabs();
560 +
561 + $this->end_controls_section();
562 +
563 + $this->start_controls_section(
564 + 'section_toggle_style_title',
565 + [
566 + 'label' => __('Title', 'uicore-elements'),
567 + 'tab' => Controls_Manager::TAB_STYLE,
568 + ]
569 + );
570 +
571 + $this->add_responsive_control(
572 + 'title_alignment',
573 + [
574 + 'label' => __('Alignment', 'uicore-elements'),
575 + 'type' => Controls_Manager::CHOOSE,
576 + 'options' => [
577 + 'flex-start' => [
578 + 'title' => __('Left', 'uicore-elements'),
579 + 'icon' => 'eicon-text-align-left',
580 + ],
581 + 'center' => [
582 + 'title' => __('Center', 'uicore-elements'),
583 + 'icon' => 'eicon-text-align-center',
584 + ],
585 + 'flex-end' => [
586 + 'title' => __('Right', 'uicore-elements'),
587 + 'icon' => 'eicon-text-align-right',
588 + ],
589 + ],
590 + 'default' => is_rtl() ? 'flex-end' : 'flex-start',
591 + 'toggle' => false,
592 + 'label_block' => false,
593 + 'selectors' => [
594 + '{{WRAPPER}} .ui-e-accordion-title-text' => 'justify-content: {{VALUE}};',
595 + ],
596 + ]
597 + );
598 +
599 + $this->start_controls_tabs('tabs_title_style');
600 +
601 + $this->start_controls_tab(
602 + 'tab_title_normal',
603 + [
604 + 'label' => __('Normal', 'uicore-elements'),
605 + ]
606 + );
607 +
608 + $this->add_control(
609 + 'title_color',
610 + [
611 + 'label' => __('Title Color', 'uicore-elements'),
612 + 'type' => Controls_Manager::COLOR,
613 + 'selectors' => [
614 + '{{WRAPPER}} .ui-e-accordion-title' => 'color: {{VALUE}};',
615 + '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
616 + ],
617 + ]
618 + );
619 +
620 + $this->add_group_control(
621 + Group_Control_Background::get_type(),
622 + [
623 + 'name' => 'title_background',
624 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
625 + ]
626 + );
627 +
628 + $this->add_group_control(
629 + Group_Control_Border::get_type(),
630 + [
631 + 'name' => 'title_border',
632 + 'placeholder' => '1px',
633 + 'default' => '1px',
634 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
635 + ]
636 + );
637 +
638 + $this->add_responsive_control(
639 + 'title_radius',
640 + [
641 + 'label' => __('Border Radius', 'uicore-elements'),
642 + 'type' => Controls_Manager::DIMENSIONS,
643 + 'size_units' => ['px', '%'],
644 + 'selectors' => [
645 + '{{WRAPPER}} .ui-e-accordion-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
646 + ],
647 + ]
648 + );
649 +
650 + $this->add_responsive_control(
651 + 'title_padding',
652 + [
653 + 'label' => __('Padding', 'uicore-elements'),
654 + 'type' => Controls_Manager::DIMENSIONS,
655 + 'size_units' => ['px', 'em', '%'],
656 + 'selectors' => [
657 + '{{WRAPPER}} .ui-e-accordion-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
658 + ],
659 + ]
660 + );
661 +
662 + $this->add_group_control(
663 + Group_Control_Typography::get_type(),
664 + [
665 + 'name' => 'title_typography',
666 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
667 + ]
668 + );
669 +
670 + $this->add_group_control(
671 + Group_Control_Box_Shadow::get_type(),
672 + [
673 + 'name' => 'title_shadow',
674 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
675 + ]
676 + );
677 +
678 + $this->end_controls_tab();
679 +
680 + $this->start_controls_tab(
681 + 'tab_title_hover',
682 + [
683 + 'label' => __('Hover', 'uicore-elements'),
684 + ]
685 + );
686 +
687 + $this->add_control(
688 + 'hover_title_color',
689 + [
690 + 'label' => __('Title Color', 'uicore-elements'),
691 + 'type' => Controls_Manager::COLOR,
692 + 'selectors' => [
693 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title' => 'color: {{VALUE}};',
694 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
695 + ],
696 + ]
697 + );
698 +
699 + $this->add_group_control(
700 + Group_Control_Background::get_type(),
701 + [
702 + 'name' => 'hover_title_background',
703 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title',
704 + ]
705 + );
706 +
707 + $this->add_control(
708 + 'title_hover_border_color',
709 + [
710 + 'label' => __('Border Color', 'uicore-elements'),
711 + 'type' => Controls_Manager::COLOR,
712 + 'condition' => [
713 + 'title_border_border!' => '',
714 + ],
715 + 'selectors' => [
716 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title' => 'border-color: {{VALUE}};',
717 + ],
718 + ]
719 + );
720 +
721 + $this->end_controls_tab();
722 +
723 + $this->start_controls_tab(
724 + 'tab_title_active',
725 + [
726 + 'label' => __('Active', 'uicore-elements'),
727 + ]
728 + );
729 +
730 + $this->add_control(
731 + 'active_title_color',
732 + [
733 + 'label' => __('Title Color', 'uicore-elements'),
734 + 'type' => Controls_Manager::COLOR,
735 + 'selectors' => [
736 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title' => 'color: {{VALUE}};',
737 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
738 + ],
739 + ]
740 + );
741 +
742 + $this->add_group_control(
743 + Group_Control_Background::get_type(),
744 + [
745 + 'name' => 'active_title_background',
746 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
747 + ]
748 + );
749 +
750 + $this->add_group_control(
751 + Group_Control_Box_Shadow::get_type(),
752 + [
753 + 'name' => 'active_title_shadow',
754 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
755 + ]
756 + );
757 +
758 + $this->add_group_control(
759 + Group_Control_Border::get_type(),
760 + [
761 + 'name' => 'active_title_border',
762 + 'placeholder' => '1px',
763 + 'default' => '1px',
764 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
765 + ]
766 + );
767 +
768 + $this->add_responsive_control(
769 + 'active_title_radius',
770 + [
771 + 'label' => __('Border Radius', 'uicore-elements'),
772 + 'type' => Controls_Manager::DIMENSIONS,
773 + 'size_units' => ['px', '%'],
774 + 'selectors' => [
775 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
776 + ],
777 + ]
778 + );
779 +
780 + $this->end_controls_tab();
781 +
782 + $this->end_controls_tabs();
783 +
784 + $this->end_controls_section();
785 +
786 + $this->start_controls_section(
787 + 'section_style_title_icon',
788 + [
789 + 'label' => __('Title Icon', 'uicore-elements'),
790 + 'tab' => Controls_Manager::TAB_STYLE,
791 + 'condition' => [
792 + 'show_custom_icon' => 'yes'
793 + ]
794 + ]
795 + );
796 +
797 + $this->start_controls_tabs('tabs_title_icon_style');
798 +
799 + $this->start_controls_tab(
800 + 'tab_title_icon_normal',
801 + [
802 + 'label' => __('Normal', 'uicore-elements'),
803 + ]
804 + );
805 +
806 + $this->add_control(
807 + 'title_icon_color',
808 + [
809 + 'label' => __('Title Icon Color', 'uicore-elements'),
810 + 'type' => Controls_Manager::COLOR,
811 + 'selectors' => [
812 + '{{WRAPPER}} .ui-e-custom-icon i' => 'color: {{VALUE}};',
813 + '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
814 + ],
815 + ]
816 + );
817 +
818 + $this->add_responsive_control(
819 + 'title_icon_size',
820 + [
821 + 'label' => esc_html__('Size', 'uicore-elements'),
822 + 'type' => Controls_Manager::SLIDER,
823 + 'selectors' => [
824 + '{{WRAPPER}} .ui-e-custom-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
825 + '{{WRAPPER}} .ui-e-custom-icon svg' => 'width: {{SIZE}}{{UNIT}};',
826 + ],
827 + ]
828 + );
829 +
830 + $this->add_responsive_control(
831 + 'icon_indent',
832 + [
833 + 'label' => esc_html__('Spacing', 'uicore-elements'),
834 + 'type' => Controls_Manager::SLIDER,
835 + 'range' => [
836 + 'px' => [
837 + 'max' => 50,
838 + ],
839 + ],
840 + 'default' => [
841 + 'unit' => 'px',
842 + 'size' => 5,
843 + ],
844 + 'selectors' => [
845 + '{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
846 + ],
847 + ]
848 + );
849 +
850 + $this->end_controls_tab();
851 +
852 + $this->start_controls_tab(
853 + 'tab_title_icon_hover',
854 + [
855 + 'label' => __('Hover', 'uicore-elements'),
856 + ]
857 + );
858 +
859 + $this->add_control(
860 + 'title_hover_icon_color',
861 + [
862 + 'label' => __('Title Icon Color', 'uicore-elements'),
863 + 'type' => Controls_Manager::COLOR,
864 + 'selectors' => [
865 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-custom-icon i' => 'color: {{VALUE}};',
866 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
867 + ],
868 + ]
869 + );
870 +
871 + $this->end_controls_tab();
872 +
873 + $this->start_controls_tab(
874 + 'tab_title_icon_active',
875 + [
876 + 'label' => __('Active', 'uicore-elements'),
877 + ]
878 + );
879 +
880 + $this->add_control(
881 + 'title_active_icon_color',
882 + [
883 + 'label' => __('Title Icon Color', 'uicore-elements'),
884 + 'type' => Controls_Manager::COLOR,
885 + 'selectors' => [
886 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-custom-icon i' => 'color: {{VALUE}};',
887 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
888 + ],
889 + ]
890 + );
891 +
892 + $this->end_controls_tab();
893 +
894 + $this->end_controls_tabs();
895 +
896 + $this->end_controls_section();
897 +
898 + $this->start_controls_section(
899 + 'section_toggle_style_icon',
900 + [
901 + 'label' => __('Open & Close Icon', 'uicore-elements'),
902 + 'tab' => Controls_Manager::TAB_STYLE,
903 + 'condition' => [
904 + 'accordion_icon[value]!' => '',
905 + ],
906 + ]
907 + );
908 +
909 + $this->add_control(
910 + 'icon_align',
911 + [
912 + 'label' => __('Alignment', 'uicore-elements'),
913 + 'type' => Controls_Manager::CHOOSE,
914 + 'options' => [
915 + 'left' => [
916 + 'title' => __('Start', 'uicore-elements'),
917 + 'icon' => 'eicon-h-align-left',
918 + ],
919 + 'right' => [
920 + 'title' => __('End', 'uicore-elements'),
921 + 'icon' => 'eicon-h-align-right',
922 + ],
923 + ],
924 + 'default' => is_rtl() ? 'left' : 'right',
925 + 'toggle' => false,
926 + 'label_block' => false,
927 + ]
928 + );
929 +
930 + $this->start_controls_tabs('tabs_icon_style');
931 +
932 + $this->start_controls_tab(
933 + 'tab_icon_normal',
934 + [
935 + 'label' => __('Normal', 'uicore-elements'),
936 + ]
937 + );
938 +
939 + $this->add_control(
940 + 'icon_color',
941 + [
942 + 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
943 + 'type' => Controls_Manager::COLOR,
944 + 'selectors' => [
945 + '{{WRAPPER}} .ui-e-accordion-icon' => 'color: {{VALUE}};',
946 + '{{WRAPPER}} .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
947 + ],
948 + ]
949 + );
950 +
951 + $this->add_group_control(
952 + Group_Control_Background::get_type(),
953 + [
954 + 'name' => 'icon_background_color',
955 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon'
956 + ]
957 + );
958 +
959 + $this->add_group_control(
960 + Group_Control_Border::get_type(),
961 + [
962 + 'name' => 'icon_border',
963 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
964 + ]
965 + );
966 +
967 + $this->add_responsive_control(
968 + 'icon_border_radius',
969 + [
970 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
971 + 'type' => Controls_Manager::DIMENSIONS,
972 + 'size_units' => ['px', '%'],
973 + 'selectors' => [
974 + '{{WRAPPER}} .ui-e-accordion-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
975 + ],
976 + ]
977 + );
978 +
979 + $this->add_responsive_control(
980 + 'icon_padding',
981 + [
982 + 'label' => esc_html__('Padding', 'uicore-elements'),
983 + 'type' => Controls_Manager::DIMENSIONS,
984 + 'size_units' => ['px', 'em', '%'],
985 + 'selectors' => [
986 + // set as css variables because animations may need some particular value, such as pad-top for fade icon animation
987 + '{{WRAPPER}} .ui-e-accordion-icon' => '--ui-e-icon-pad-top: {{TOP}}{{UNIT}}; --ui-e-icon-pad-right: {{RIGHT}}{{UNIT}}; --ui-e-icon-pad-bot: {{BOTTOM}}{{UNIT}}; --ui-e-icon-pad-left: {{LEFT}}{{UNIT}};',
988 + ],
989 + ]
990 + );
991 +
992 + $this->add_responsive_control(
993 + 'icon_size',
994 + [
995 + 'label' => __('Icon Size', 'uicore-elements'),
996 + 'type' => Controls_Manager::SLIDER,
997 + 'range' => [
998 + 'px' => [
999 + 'min' => 10,
1000 + 'max' => 100,
1001 + ],
1002 + ],
1003 + 'default' => [
1004 + 'unit' => 'px',
1005 + 'size' => 15,
1006 + ],
1007 + 'selectors' => [
1008 + '{{WRAPPER}} .ui-e-accordion-title .ui-e-accordion-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
1009 + ],
1010 + ]
1011 + );
1012 +
1013 + $this->add_responsive_control(
1014 + 'icon_spacing',
1015 + [
1016 + 'label' => __('Icon Spacing', 'uicore-elements'),
1017 + 'type' => Controls_Manager::SLIDER,
1018 + 'range' => [
1019 + 'px' => [
1020 + 'min' => 0,
1021 + 'max' => 50,
1022 + ],
1023 + ],
1024 + 'selectors' => [
1025 + '{{WRAPPER}} .ui-e-accordion-title' => 'gap: {{SIZE}}{{UNIT}};',
1026 + ]
1027 + ]
1028 + );
1029 +
1030 + $this->add_group_control(
1031 + Group_Control_Box_Shadow::get_type(),
1032 + [
1033 + 'name' => 'icon_box_shadow',
1034 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
1035 + ]
1036 + );
1037 +
1038 + $this->end_controls_tab();
1039 +
1040 + $this->start_controls_tab(
1041 + 'tab_icon_hover',
1042 + [
1043 + 'label' => __('Hover', 'uicore-elements'),
1044 + ]
1045 + );
1046 +
1047 + $this->add_control(
1048 + 'icon_hover_color',
1049 + [
1050 + 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1051 + 'type' => Controls_Manager::COLOR,
1052 + 'selectors' => [
1053 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon' => 'color: {{VALUE}};',
1054 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
1055 + ],
1056 + ]
1057 + );
1058 +
1059 + $this->add_group_control(
1060 + Group_Control_Background::get_type(),
1061 + [
1062 + 'name' => 'icon_hover_background_color',
1063 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon'
1064 + ]
1065 + );
1066 +
1067 + $this->add_control(
1068 + 'icon_hover_border_color',
1069 + [
1070 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1071 + 'type' => Controls_Manager::COLOR,
1072 + 'condition' => [
1073 + 'icon_border_border!' => '',
1074 + ],
1075 + 'selectors' => [
1076 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon' => 'border-color: {{VALUE}};',
1077 + ],
1078 + ]
1079 + );
1080 +
1081 + $this->end_controls_tab();
1082 +
1083 + $this->start_controls_tab(
1084 + 'tab_icon_active',
1085 + [
1086 + 'label' => __('Active', 'uicore-elements'),
1087 + ]
1088 + );
1089 +
1090 + $this->add_control(
1091 + 'icon_active_color',
1092 + [
1093 + 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1094 + 'type' => Controls_Manager::COLOR,
1095 + 'selectors' => [
1096 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon' => 'color: {{VALUE}};',
1097 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
1098 + ],
1099 + ]
1100 + );
1101 +
1102 + $this->add_group_control(
1103 + Group_Control_Background::get_type(),
1104 + [
1105 + 'name' => 'icon_active_background_color',
1106 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon'
1107 + ]
1108 + );
1109 +
1110 + $this->add_control(
1111 + 'icon_active_border_color',
1112 + [
1113 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1114 + 'type' => Controls_Manager::COLOR,
1115 + 'condition' => [
1116 + 'icon_border_border!' => '',
1117 + ],
1118 + 'selectors' => [
1119 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon' => 'border-color: {{VALUE}};',
1120 + ],
1121 + ]
1122 + );
1123 +
1124 + $this->end_controls_tab();
1125 +
1126 + $this->end_controls_tabs();
1127 +
1128 + $this->end_controls_section();
1129 +
1130 + $this->start_controls_section(
1131 + 'section_toggle_style_content',
1132 + [
1133 + 'label' => __('Content', 'uicore-elements'),
1134 + 'tab' => Controls_Manager::TAB_STYLE,
1135 + ]
1136 + );
1137 +
1138 + $this->add_control(
1139 + 'content_color',
1140 + [
1141 + 'label' => __('Text Color', 'uicore-elements'),
1142 + 'type' => Controls_Manager::COLOR,
1143 + 'selectors' => [
1144 + '{{WRAPPER}} .ui-e-accordion-content' => 'color: {{VALUE}};',
1145 + ],
1146 + ]
1147 + );
1148 +
1149 + $this->add_group_control(
1150 + Group_Control_Background::get_type(),
1151 + [
1152 + 'name' => 'content_background_color',
1153 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1154 + ]
1155 + );
1156 +
1157 + $this->add_group_control(
1158 + Group_Control_Border::get_type(),
1159 + [
1160 + 'name' => 'content_border',
1161 + 'label' => __('Border', 'uicore-elements'),
1162 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1163 + ]
1164 + );
1165 +
1166 + $this->add_responsive_control(
1167 + 'content_radius',
1168 + [
1169 + 'label' => __('Border Radius', 'uicore-elements'),
1170 + 'type' => Controls_Manager::DIMENSIONS,
1171 + 'size_units' => ['px', '%'],
1172 + 'selectors' => [
1173 + '{{WRAPPER}} .ui-e-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1174 + ],
1175 + ]
1176 + );
1177 +
1178 + $this->add_responsive_control(
1179 + 'content_padding',
1180 + [
1181 + 'label' => __('Padding', 'uicore-elements'),
1182 + 'type' => Controls_Manager::DIMENSIONS,
1183 + 'size_units' => ['px', 'em', '%'],
1184 + 'selectors' => [
1185 + '{{WRAPPER}} .ui-e-accordion-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1186 + ],
1187 + ]
1188 + );
1189 +
1190 + $this->add_responsive_control(
1191 + 'content_spacing',
1192 + [
1193 + 'label' => __('Spacing', 'uicore-elements'),
1194 + 'type' => Controls_Manager::SLIDER,
1195 + 'range' => [
1196 + 'px' => [
1197 + 'min' => 0,
1198 + 'max' => 100,
1199 + ],
1200 + ],
1201 + 'default' => [
1202 + 'unit' => 'px',
1203 + 'size' => 15,
1204 + ],
1205 + 'selectors' => [
1206 + '{{WRAPPER}} .ui-e-accordion-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1207 + ],
1208 + ]
1209 + );
1210 +
1211 + $this->add_group_control(
1212 + Group_Control_Typography::get_type(),
1213 + [
1214 + 'name' => 'content_typography',
1215 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1216 + ]
1217 + );
1218 +
1219 + $this->add_group_control(
1220 + Group_Control_Box_Shadow::get_type(),
1221 + [
1222 + 'name' => 'content_shadow',
1223 + 'label' => __('Box Shadow', 'uicore-elements'),
1224 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1225 + ]
1226 + );
1227 +
1228 + $this->add_responsive_control(
1229 + 'align',
1230 + [
1231 + 'label' => __('Alignment', 'uicore-elements'),
1232 + 'type' => Controls_Manager::CHOOSE,
1233 + 'options' => [
1234 + 'left' => [
1235 + 'title' => __('Left', 'uicore-elements'),
1236 + 'icon' => 'eicon-text-align-left',
1237 + ],
1238 + 'center' => [
1239 + 'title' => __('Center', 'uicore-elements'),
1240 + 'icon' => 'eicon-text-align-center',
1241 + ],
1242 + 'right' => [
1243 + 'title' => __('Right', 'uicore-elements'),
1244 + 'icon' => 'eicon-text-align-right',
1245 + ],
1246 + ],
1247 + 'default' => is_rtl() ? 'right' : 'left',
1248 + 'selectors' => [
1249 + '{{WRAPPER}} .ui-e-accordion-content' => 'text-align: {{VALUE}};',
1250 + ],
1251 + ]
1252 + );
1253 +
1254 + $this->end_controls_section();
1255 +
1256 + $this->start_controls_section(
1257 + 'section_animation',
1258 + [
1259 + 'label' => esc_html__('Animations', 'uicore-elements'),
1260 + 'tab' => Controls_Manager::TAB_STYLE,
1261 + ]
1262 + );
1263 +
1264 + $this->add_control(
1265 + 'accordion_animation',
1266 + [
1267 + 'label' => esc_html__('Accordion Animation', 'uicore-elements'),
1268 + 'type' => \Elementor\Controls_Manager::SELECT,
1269 + 'default' => 'ui-e-animation-acc-basic',
1270 + 'options' => [
1271 + '' => esc_html__('None', 'uicore-elements'),
1272 + 'ui-e-animation-acc-basic' => esc_html__('Basic', 'uicore-elements'),
1273 + 'ui-e-animation-acc-slow' => esc_html__('Slow', 'uicore-elements'),
1274 + 'ui-e-animation-acc-expand' => esc_html__('Expand', 'uicore-elements'),
1275 + 'ui-e-animation-acc-overshadow' => esc_html__('Overshadow', 'uicore-elements'),
1276 + ],
1277 + 'prefix_class' => '',
1278 + 'render_type' => 'template',
1279 + 'frontend_available' => true,
1280 + ]
1281 + );
1282 +
1283 + $this->add_control(
1284 + 'icon_animation',
1285 + [
1286 + 'label' => esc_html__('Icon Animation', 'uicore-elements'),
1287 + 'type' => \Elementor\Controls_Manager::SELECT,
1288 + 'default' => 'ui-e-animation-ico-fade',
1289 + 'options' => [
1290 + '' => esc_html__('None', 'uicore-elements'),
1291 + 'ui-e-animation-ico-fade' => esc_html__('Fade', 'uicore-elements'),
1292 + 'ui-e-animation-ico-spin' => esc_html__('Spin', 'uicore-elements'),
1293 + 'ui-e-animation-ico-slide' => esc_html__('Slide', 'uicore-elements'),
1294 + ],
1295 + 'prefix_class' => '',
1296 + 'render_type' => 'template',
1297 + ]
1298 + );
1299 +
1300 + $this->add_control(
1301 + 'icon_spin_value',
1302 + [
1303 + 'label' => esc_html__('Icon Rotation', 'uicore-elements'),
1304 + 'type' => \Elementor\Controls_Manager::SLIDER,
1305 + 'size_units' => ['deg', ''],
1306 + 'range' => [
1307 + 'deg' => [
1308 + 'min' => 0,
1309 + 'max' => 360,
1310 + 'step' => 1,
1311 + ],
1312 + ],
1313 + 'default' => [
1314 + 'unit' => 'deg',
1315 + 'size' => 315,
1316 + ],
1317 + 'selectors' => [
1318 + '{{WRAPPER}} .ui-e-accordion-icon' => '--ui-e-spin:{{SIZE}}deg;',
1319 + ],
1320 + 'condition' => [
1321 + 'icon_animation' => 'ui-e-animation-ico-spin',
1322 + ]
1323 + ]
1324 + );
1325 +
1326 + $this->end_controls_section();
1327 + }
1328 + protected function render()
1329 + {
1330 +
1331 + $settings = $this->get_settings_for_display();
1332 + $ID = 'ui-e-accordion-' . $this->get_id();
1333 +
1334 + // Sets schema atts if active
1335 + if ($this->is_option('schema_activity', 'yes')) {
1336 + $this->add_render_attribute('accordion', 'itemscope');
1337 + $this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1338 + }
1339 +
1340 + $titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1341 +
1342 +?>
1343 + <div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion'); ?>>
1344 +
1345 + <?php foreach ($settings['tabs'] as $index => $item) :
1346 +
1347 + $loopCounter = $index + 1;
1348 +
1349 + // Builds the accordion ID
1350 + $acc_id = $item['tab_title']
1351 + ? 'ui-e-' . sanitize_title($item['tab_title'])
1352 + : $ID . $loopCounter;
1353 +
1354 + // Build the Aria ID
1355 + if ('sectionId' == $item['source']) {
1356 + $aria_id = 'ui-' . preg_replace('/#/', '', $item['section_id']);
1357 + } else {
1358 + $aria_id = 'ui-e-acc-' . $loopCounter;
1359 + }
1360 +
1361 + // Creates the title and content atts
1362 + $tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index);
1363 + $tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
1364 +
1365 + // Render title atts
1366 + // TODO: remove `ui-e-title` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1367 + $this->add_render_attribute($tab_title_setting_key, [
1368 + 'class' => ['ui-e-accordion-title ui-e-title'],
1369 + ]);
1370 + $this->add_render_attribute($tab_title_setting_key, 'class', ('right' == $settings['icon_align']) ? 'ui-right' : '');
1371 +
1372 + // Render content atts
1373 + // TODO: remove `ui-e-content` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1374 + $this->add_render_attribute($tab_content_setting_key, [
1375 + 'class' => ['ui-e-accordion-content ui-e-content'],
1376 + 'style' => ($loopCounter === $settings['active_item']) ? '' : 'display:none;', // keep content hide if item not active (has to be set inline so jquery can take control over it)
1377 + 'aria-labelledby' => $acc_id,
1378 + 'id' => $aria_id
1379 + ]);
1380 +
1381 + // Check if the current accordion item uses sectionId as source
1382 + if ('sectionId' == $item['source']) {
1383 + // and also check if an ID was set
1384 + if ($item['section_id'] != '') {
1385 + $this->add_render_attribute($tab_content_setting_key, ['class' => ['ui-section-id']]); // class used by JS
1386 + $sectionWarning = "The element with ID <em>{$item['section_id']}</em> is going to be inserted here on the front-end";
1387 + } else {
1388 + $sectionWarning = esc_html__("You didn't define an ID.", 'uicore-elements');
1389 + }
1390 + }
1391 +
1392 + // Render item atts
1393 + // TODO: remove `ui-e-item` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1394 + $item_key = 'ui-e-item-' . $index;
1395 + $this->add_render_attribute($item_key, [
1396 + 'class' => ($loopCounter === $settings['active_item']) ? 'ui-e-accordion-item ui-e-item ui-open' : 'ui-e-accordion-item ui-e-item',
1397 + 'role' => 'button',
1398 + 'tabindex' => '0',
1399 + 'aria-expanded' => ($loopCounter === $settings['active_item']) ? 'true' : 'false',
1400 + 'aria-controls' => $aria_id,
1401 + 'id' => $acc_id,
1402 + ]);
1403 +
1404 + // Render schema atts if active
1405 + if ($this->is_option('schema_activity', 'yes')) {
1406 + $this->add_render_attribute($item_key, 'itemscope');
1407 + $this->add_render_attribute($item_key, 'itemprop', 'mainEntity');
1408 + $this->add_render_attribute($item_key, 'itemtype', 'https://schema.org/Question');
1409 +
1410 + $this->add_render_attribute($tab_content_setting_key, 'itemscope');
1411 + $this->add_render_attribute($tab_content_setting_key, 'itemprop', 'acceptedAnswer', true);
1412 + $this->add_render_attribute($tab_content_setting_key, 'itemtype', 'https://schema.org/Answer', true);
1413 +
1414 + $schema_text = $this->get_repeater_setting_key('schema_text', 'tabs', $index);
1415 + $schema_name = $this->get_repeater_setting_key('schema_name', 'tabs', $index);
1416 + $this->add_render_attribute($schema_text, 'itemprop', 'text');
1417 + $this->add_render_attribute($schema_name, 'itemprop', 'name');
1418 +
1419 + // Sets the variables to empty to avoid undefined variable problems
1420 + } else {
1421 + $schema_text = $schema_name = '';
1422 + }
1423 + ?>
1424 + <div <?php $this->print_render_attribute_string($item_key); ?>>
1425 +
1426 + <<?php echo Helper::esc_tag($titleTag) ?> <?php $this->print_render_attribute_string($tab_title_setting_key); ?>>
1427 +
1428 + <?php if ($settings['accordion_icon']['value']) :
1429 + // TODO: remove `ui-e-icon` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1430 + ?>
1431 + <span class="ui-e-accordion-icon ui-e-icon ui-e-<?php echo esc_attr($settings['icon_align']); ?>" aria-hidden="true">
1432 +
1433 + <span class="ui-e-accordion-icon-closed">
1434 + <?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1435 + </span>
1436 +
1437 + <?php if ($settings['icon_animation'] != 'ui-e-animation-ico-spin') : //spin animation dismiss the opened accordion icon
1438 + ?>
1439 + <span class="ui-e-accordion-icon-opened">
1440 + <?php Icons_Manager::render_icon($settings['accordion_active_icon'], ['aria-hidden' => 'true']); ?>
1441 + </span>
1442 + <?php endif; ?>
1443 +
1444 + </span>
1445 + <?php endif; ?>
1446 +
1447 + <?php // TODO: remove `ui-e-title-text` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1448 + ?>
1449 + <span class="ui-e-accordion-title-text ui-e-title-text" <?php $this->print_render_attribute_string($schema_name); ?>>
1450 + <?php if (!empty($item['repeater_icon']['value']) && $this->is_option('show_custom_icon', 'yes')) : ?>
1451 + <span class="ui-e-custom-icon">
1452 + <?php Icons_Manager::render_icon($item['repeater_icon'], ['aria-hidden' => 'true']); ?>
1453 + </span>
1454 + <?php endif; ?>
1455 + <?php echo esc_html($item['tab_title']); ?>
1456 + </span>
1457 +
1458 + </<?php echo Helper::esc_tag($titleTag) ?>>
1459 +
1460 + <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1461 + <?php
1462 + if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1463 +
1464 + // if schema is active, creates a wrapper for the itemprop structure
1465 + if ($this->is_option('schema_activity', 'yes')) {
1466 + ?>
1467 + <div <?php $this->print_render_attribute_string($schema_text); ?>>
1468 + <?php
1469 + }
1470 +
1471 + echo wp_kses_post($this->parse_text_editor($item['tab_content']));
1472 +
1473 + if ($this->is_option('schema_activity', 'yes')) {
1474 + ?>
1475 + </div>
1476 + <?php
1477 + }
1478 + }
1479 + // if source is sectionId and we're inside editor, returns a warning for context. The sectionId content is moved via JS
1480 + if ('sectionId' == $item['source'] && $this->is_edit_mode()) {
1481 + echo wp_kses($sectionWarning, ['em' => []]);
1482 + }
1483 + ?>
1484 + </div>
1485 +
1486 + </div>
1487 + <?php endforeach; ?>
1488 + </div>
1489 +<?php
1490 + }
1491 +}
1492 +\Elementor\Plugin::instance()->widgets_manager->register(new Accordion());