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