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 +385 -377 1.0.3 → 1.3.18 View file →
@@ -1,5 +1,6 @@
1 1 <?php
2 +
2 3 namespace UiCoreElements;
3 4
4 5 use Elementor\Repeater;
5 6 use Elementor\Controls_Manager;
@@ -51,8 +52,13 @@
51 52 public function get_scripts()
52 53 {
53 54 return ['accordion'];
54 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 + }
55 61 protected function register_controls()
56 62 {
57 63 $this->start_controls_section(
58 64 'section_title',
@@ -99,19 +105,19 @@
99 105 ]
100 106 );
101 107
102 108 $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' ),
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'),
108 114 'condition' => [
109 115 'source' => 'sectionId'
110 116 ],
111 117 'dynamic' => ['active' => true],
112 - ]
113 - );
118 + ]
119 + );
114 120
115 121 $repeater->add_control(
116 122 'repeater_icon',
117 123 [
@@ -150,19 +156,9 @@
150 156 'title_html_tag',
151 157 [
152 158 'label' => __('Title HTML Tag', 'uicore-elements'),
153 159 '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 - ],
160 + 'options' => Helper::get_title_tags(),
165 161 'default' => 'h5',
166 162 ]
167 163 );
168 164
@@ -392,9 +388,9 @@
392 388 'tab' => Controls_Manager::TAB_STYLE,
393 389 ]
394 390 );
395 391
396 - $this->add_control(
392 + $this->add_responsive_control(
397 393 'item_spacing',
398 394 [
399 395 'label' => __('Item Gap', 'uicore-elements'),
400 396 'type' => Controls_Manager::SLIDER,
@@ -407,9 +403,9 @@
407 403 'default' => [
408 404 'size' => 5,
409 405 ],
410 406 'selectors' => [
411 - '{{WRAPPER}} .ui-e-item + .ui-e-item' => 'margin-top: {{SIZE}}{{UNIT}};',
407 + '{{WRAPPER}} .ui-e-accordion-item + .ui-e-accordion-item' => 'margin-top: {{SIZE}}{{UNIT}};',
412 408 ],
413 409 ]
414 410 );
415 411
@@ -414,154 +410,154 @@
414 410 );
415 411
416 412 $this->start_controls_tabs('tabs_item_style');
417 413
418 - $this->start_controls_tab(
419 - 'tab_item_normal',
420 - [
421 - 'label' => __('Normal', 'uicore-elements'),
422 - ]
423 - );
414 + $this->start_controls_tab(
415 + 'tab_item_normal',
416 + [
417 + 'label' => __('Normal', 'uicore-elements'),
418 + ]
419 + );
424 420
425 - $this->add_group_control(
426 - Group_Control_Background::get_type(),
427 - [
428 - 'name' => 'item_background',
429 - 'selector' => '{{WRAPPER}} .ui-e-item',
430 - ]
431 - );
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 + );
432 428
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 - );
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 + );
442 438
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 - );
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 + );
454 450
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 - );
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 + );
474 470
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 - );
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 + );
482 478
483 - $this->end_controls_tab();
479 + $this->end_controls_tab();
484 480
485 - $this->start_controls_tab(
486 - 'tab_item_hover',
487 - [
488 - 'label' => __('Hover', 'uicore-elements'),
489 - ]
490 - );
481 + $this->start_controls_tab(
482 + 'tab_item_hover',
483 + [
484 + 'label' => __('Hover', 'uicore-elements'),
485 + ]
486 + );
491 487
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 - );
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 + );
499 495
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 - );
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 + );
513 509
514 - $this->end_controls_tab();
510 + $this->end_controls_tab();
515 511
516 - $this->start_controls_tab(
517 - 'tab_item_active',
518 - [
519 - 'label' => __('Active', 'uicore-elements'),
520 - ]
521 - );
512 + $this->start_controls_tab(
513 + 'tab_item_active',
514 + [
515 + 'label' => __('Active', 'uicore-elements'),
516 + ]
517 + );
522 518
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 - );
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 + );
530 526
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 - );
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 + );
538 534
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 - );
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 + );
548 544
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 - );
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 + );
560 556
561 - $this->end_controls_tab();
557 + $this->end_controls_tab();
562 558
563 - $this->end_controls_tabs();
559 + $this->end_controls_tabs();
564 560
565 561 $this->end_controls_section();
566 562
567 563 $this->start_controls_section(
@@ -591,13 +587,12 @@
591 587 'icon' => 'eicon-text-align-right',
592 588 ],
593 589 ],
594 590 'default' => is_rtl() ? 'flex-end' : 'flex-start',
595 - 'default' => 'flex-start',
596 591 'toggle' => false,
597 592 'label_block' => false,
598 593 'selectors' => [
599 - '{{WRAPPER}} .ui-e-title-text' => 'justify-content: {{VALUE}};',
594 + '{{WRAPPER}} .ui-e-accordion-title-text' => 'justify-content: {{VALUE}};',
600 595 ],
601 596 ]
602 597 );
603 598
@@ -615,9 +610,9 @@
615 610 [
616 611 'label' => __('Title Color', 'uicore-elements'),
617 612 'type' => Controls_Manager::COLOR,
618 613 'selectors' => [
619 - '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
614 + '{{WRAPPER}} .ui-e-accordion-title' => 'color: {{VALUE}};',
620 615 '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
621 616 ],
622 617 ]
623 618 );
@@ -625,9 +620,9 @@
625 620 $this->add_group_control(
626 621 Group_Control_Background::get_type(),
627 622 [
628 623 'name' => 'title_background',
629 - 'selector' => '{{WRAPPER}} .ui-e-title',
624 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
630 625 ]
631 626 );
632 627
633 628 $this->add_group_control(
@@ -635,9 +630,9 @@
635 630 [
636 631 'name' => 'title_border',
637 632 'placeholder' => '1px',
638 633 'default' => '1px',
639 - 'selector' => '{{WRAPPER}} .ui-e-title',
634 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
640 635 ]
641 636 );
642 637
643 638 $this->add_responsive_control(
@@ -646,9 +641,9 @@
646 641 'label' => __('Border Radius', 'uicore-elements'),
647 642 'type' => Controls_Manager::DIMENSIONS,
648 643 'size_units' => ['px', '%'],
649 644 'selectors' => [
650 - '{{WRAPPER}} .ui-e-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
645 + '{{WRAPPER}} .ui-e-accordion-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
651 646 ],
652 647 ]
653 648 );
654 649
@@ -658,9 +653,9 @@
658 653 'label' => __('Padding', 'uicore-elements'),
659 654 'type' => Controls_Manager::DIMENSIONS,
660 655 'size_units' => ['px', 'em', '%'],
661 656 'selectors' => [
662 - '{{WRAPPER}} .ui-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
657 + '{{WRAPPER}} .ui-e-accordion-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
663 658 ],
664 659 ]
665 660 );
666 661
@@ -667,9 +662,9 @@
667 662 $this->add_group_control(
668 663 Group_Control_Typography::get_type(),
669 664 [
670 665 'name' => 'title_typography',
671 - 'selector' => '{{WRAPPER}} .ui-e-title',
666 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
672 667 ]
673 668 );
674 669
675 670 $this->add_group_control(
@@ -675,9 +670,9 @@
675 670 $this->add_group_control(
676 671 Group_Control_Box_Shadow::get_type(),
677 672 [
678 673 'name' => 'title_shadow',
679 - 'selector' => '{{WRAPPER}} .ui-e-title',
674 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
680 675 ]
681 676 );
682 677
683 678 $this->end_controls_tab();
@@ -694,10 +689,10 @@
694 689 [
695 690 'label' => __('Title Color', 'uicore-elements'),
696 691 'type' => Controls_Manager::COLOR,
697 692 '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}};',
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}};',
700 695 ],
701 696 ]
702 697 );
703 698
@@ -704,9 +699,9 @@
704 699 $this->add_group_control(
705 700 Group_Control_Background::get_type(),
706 701 [
707 702 'name' => 'hover_title_background',
708 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-title',
703 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title',
709 704 ]
710 705 );
711 706
712 707 $this->add_control(
@@ -717,9 +712,9 @@
717 712 'condition' => [
718 713 'title_border_border!' => '',
719 714 ],
720 715 'selectors' => [
721 - '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'border-color: {{VALUE}};',
716 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title' => 'border-color: {{VALUE}};',
722 717 ],
723 718 ]
724 719 );
725 720
@@ -737,10 +732,10 @@
737 732 [
738 733 'label' => __('Title Color', 'uicore-elements'),
739 734 'type' => Controls_Manager::COLOR,
740 735 '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}};',
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}};',
743 738 ],
744 739 ]
745 740 );
746 741
@@ -747,9 +742,9 @@
747 742 $this->add_group_control(
748 743 Group_Control_Background::get_type(),
749 744 [
750 745 'name' => 'active_title_background',
751 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
746 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
752 747 ]
753 748 );
754 749
755 750 $this->add_group_control(
@@ -755,9 +750,9 @@
755 750 $this->add_group_control(
756 751 Group_Control_Box_Shadow::get_type(),
757 752 [
758 753 'name' => 'active_title_shadow',
759 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
754 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
760 755 ]
761 756 );
762 757
763 758 $this->add_group_control(
@@ -765,9 +760,9 @@
765 760 [
766 761 'name' => 'active_title_border',
767 762 'placeholder' => '1px',
768 763 'default' => '1px',
769 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
764 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
770 765 ]
771 766 );
772 767
773 768 $this->add_responsive_control(
@@ -776,9 +771,9 @@
776 771 'label' => __('Border Radius', 'uicore-elements'),
777 772 'type' => Controls_Manager::DIMENSIONS,
778 773 'size_units' => ['px', '%'],
779 774 'selectors' => [
780 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
775 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
781 776 ],
782 777 ]
783 778 );
784 779
@@ -842,11 +837,11 @@
842 837 'max' => 50,
843 838 ],
844 839 ],
845 840 'default' => [
846 - 'unit' => 'px',
847 - 'size' => 5,
848 - ],
841 + 'unit' => 'px',
842 + 'size' => 5,
843 + ],
849 844 'selectors' => [
850 845 '{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
851 846 ],
852 847 ]
@@ -866,10 +861,10 @@
866 861 [
867 862 'label' => __('Title Icon Color', 'uicore-elements'),
868 863 'type' => Controls_Manager::COLOR,
869 864 '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}};',
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}};',
872 867 ],
873 868 ]
874 869 );
875 870
@@ -887,10 +882,10 @@
887 882 [
888 883 'label' => __('Title Icon Color', 'uicore-elements'),
889 884 'type' => Controls_Manager::COLOR,
890 885 '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}};',
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}};',
893 888 ],
894 889 ]
895 890 );
896 891
@@ -946,10 +941,10 @@
946 941 [
947 942 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
948 943 'type' => Controls_Manager::COLOR,
949 944 'selectors' => [
950 - '{{WRAPPER}} .ui-e-icon' => 'color: {{VALUE}};',
951 - '{{WRAPPER}} .ui-e-icon svg' => 'fill: {{VALUE}};',
945 + '{{WRAPPER}} .ui-e-accordion-icon' => 'color: {{VALUE}};',
946 + '{{WRAPPER}} .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
952 947 ],
953 948 ]
954 949 );
955 950
@@ -956,9 +951,9 @@
956 951 $this->add_group_control(
957 952 Group_Control_Background::get_type(),
958 953 [
959 954 'name' => 'icon_background_color',
960 - 'selector' => '{{WRAPPER}} .ui-e-icon'
955 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon'
961 956 ]
962 957 );
963 958
964 959 $this->add_group_control(
@@ -964,9 +959,9 @@
964 959 $this->add_group_control(
965 960 Group_Control_Border::get_type(),
966 961 [
967 962 'name' => 'icon_border',
968 - 'selector' => '{{WRAPPER}} .ui-e-icon',
963 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
969 964 ]
970 965 );
971 966
972 967 $this->add_responsive_control(
@@ -975,9 +970,9 @@
975 970 'label' => esc_html__('Border Radius', 'uicore-elements'),
976 971 'type' => Controls_Manager::DIMENSIONS,
977 972 'size_units' => ['px', '%'],
978 973 'selectors' => [
979 - '{{WRAPPER}} .ui-e-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
974 + '{{WRAPPER}} .ui-e-accordion-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
980 975 ],
981 976 ]
982 977 );
983 978
@@ -988,9 +983,9 @@
988 983 'type' => Controls_Manager::DIMENSIONS,
989 984 'size_units' => ['px', 'em', '%'],
990 985 'selectors' => [
991 986 // 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}};',
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}};',
993 988 ],
994 989 ]
995 990 );
996 991
@@ -1005,13 +1000,13 @@
1005 1000 'max' => 100,
1006 1001 ],
1007 1002 ],
1008 1003 'default' => [
1009 - 'unit' => 'px',
1010 - 'size' => 15,
1011 - ],
1004 + 'unit' => 'px',
1005 + 'size' => 15,
1006 + ],
1012 1007 'selectors' => [
1013 - '{{WRAPPER}} .ui-e-title .ui-e-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
1008 + '{{WRAPPER}} .ui-e-accordion-title .ui-e-accordion-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
1014 1009 ],
1015 1010 ]
1016 1011 );
1017 1012
@@ -1026,9 +1021,9 @@
1026 1021 'max' => 50,
1027 1022 ],
1028 1023 ],
1029 1024 'selectors' => [
1030 - '{{WRAPPER}} .ui-e-title' => 'gap: {{SIZE}}{{UNIT}};',
1025 + '{{WRAPPER}} .ui-e-accordion-title' => 'gap: {{SIZE}}{{UNIT}};',
1031 1026 ]
1032 1027 ]
1033 1028 );
1034 1029
@@ -1035,9 +1030,9 @@
1035 1030 $this->add_group_control(
1036 1031 Group_Control_Box_Shadow::get_type(),
1037 1032 [
1038 1033 'name' => 'icon_box_shadow',
1039 - 'selector' => '{{WRAPPER}} .ui-e-icon',
1034 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
1040 1035 ]
1041 1036 );
1042 1037
1043 1038 $this->end_controls_tab();
@@ -1054,10 +1049,10 @@
1054 1049 [
1055 1050 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1056 1051 'type' => Controls_Manager::COLOR,
1057 1052 'selectors' => [
1058 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'color: {{VALUE}};',
1059 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon svg' => 'fill: {{VALUE}};',
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}};',
1060 1055 ],
1061 1056 ]
1062 1057 );
1063 1058
@@ -1064,9 +1059,9 @@
1064 1059 $this->add_group_control(
1065 1060 Group_Control_Background::get_type(),
1066 1061 [
1067 1062 'name' => 'icon_hover_background_color',
1068 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-icon'
1063 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon'
1069 1064 ]
1070 1065 );
1071 1066
1072 1067 $this->add_control(
@@ -1077,9 +1072,9 @@
1077 1072 'condition' => [
1078 1073 'icon_border_border!' => '',
1079 1074 ],
1080 1075 'selectors' => [
1081 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'border-color: {{VALUE}};',
1076 + '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon' => 'border-color: {{VALUE}};',
1082 1077 ],
1083 1078 ]
1084 1079 );
1085 1080
@@ -1097,10 +1092,10 @@
1097 1092 [
1098 1093 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1099 1094 'type' => Controls_Manager::COLOR,
1100 1095 '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}};',
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}};',
1103 1098 ],
1104 1099 ]
1105 1100 );
1106 1101
@@ -1107,9 +1102,9 @@
1107 1102 $this->add_group_control(
1108 1103 Group_Control_Background::get_type(),
1109 1104 [
1110 1105 'name' => 'icon_active_background_color',
1111 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon'
1106 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon'
1112 1107 ]
1113 1108 );
1114 1109
1115 1110 $this->add_control(
@@ -1120,9 +1115,9 @@
1120 1115 'condition' => [
1121 1116 'icon_border_border!' => '',
1122 1117 ],
1123 1118 'selectors' => [
1124 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon' => 'border-color: {{VALUE}};',
1119 + '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon' => 'border-color: {{VALUE}};',
1125 1120 ],
1126 1121 ]
1127 1122 );
1128 1123
@@ -1145,9 +1140,9 @@
1145 1140 [
1146 1141 'label' => __('Text Color', 'uicore-elements'),
1147 1142 'type' => Controls_Manager::COLOR,
1148 1143 'selectors' => [
1149 - '{{WRAPPER}} .ui-e-content' => 'color: {{VALUE}};',
1144 + '{{WRAPPER}} .ui-e-accordion-content' => 'color: {{VALUE}};',
1150 1145 ],
1151 1146 ]
1152 1147 );
1153 1148
@@ -1154,9 +1149,9 @@
1154 1149 $this->add_group_control(
1155 1150 Group_Control_Background::get_type(),
1156 1151 [
1157 1152 'name' => 'content_background_color',
1158 - 'selector' => '{{WRAPPER}} .ui-e-content',
1153 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1159 1154 ]
1160 1155 );
1161 1156
1162 1157 $this->add_group_control(
@@ -1163,9 +1158,9 @@
1163 1158 Group_Control_Border::get_type(),
1164 1159 [
1165 1160 'name' => 'content_border',
1166 1161 'label' => __('Border', 'uicore-elements'),
1167 - 'selector' => '{{WRAPPER}} .ui-e-content',
1162 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1168 1163 ]
1169 1164 );
1170 1165
1171 1166 $this->add_responsive_control(
@@ -1186,9 +1181,9 @@
1186 1181 'label' => __('Padding', 'uicore-elements'),
1187 1182 'type' => Controls_Manager::DIMENSIONS,
1188 1183 'size_units' => ['px', 'em', '%'],
1189 1184 'selectors' => [
1190 - '{{WRAPPER}} .ui-e-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1185 + '{{WRAPPER}} .ui-e-accordion-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1191 1186 ],
1192 1187 ]
1193 1188 );
1194 1189
@@ -1203,13 +1198,13 @@
1203 1198 'max' => 100,
1204 1199 ],
1205 1200 ],
1206 1201 'default' => [
1207 - 'unit' => 'px',
1208 - 'size' => 15,
1209 - ],
1202 + 'unit' => 'px',
1203 + 'size' => 15,
1204 + ],
1210 1205 'selectors' => [
1211 - '{{WRAPPER}} .ui-e-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1206 + '{{WRAPPER}} .ui-e-accordion-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1212 1207 ],
1213 1208 ]
1214 1209 );
1215 1210
@@ -1216,9 +1211,9 @@
1216 1211 $this->add_group_control(
1217 1212 Group_Control_Typography::get_type(),
1218 1213 [
1219 1214 'name' => 'content_typography',
1220 - 'selector' => '{{WRAPPER}} .ui-e-content',
1215 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1221 1216 ]
1222 1217 );
1223 1218
1224 1219 $this->add_group_control(
@@ -1225,9 +1220,9 @@
1225 1220 Group_Control_Box_Shadow::get_type(),
1226 1221 [
1227 1222 'name' => 'content_shadow',
1228 1223 'label' => __('Box Shadow', 'uicore-elements'),
1229 - 'selector' => '{{WRAPPER}} .ui-e-content',
1224 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1230 1225 ]
1231 1226 );
1232 1227
1233 1228 $this->add_responsive_control(
@@ -1248,10 +1243,11 @@
1248 1243 'title' => __('Right', 'uicore-elements'),
1249 1244 'icon' => 'eicon-text-align-right',
1250 1245 ],
1251 1246 ],
1247 + 'default' => is_rtl() ? 'right' : 'left',
1252 1248 'selectors' => [
1253 - '{{WRAPPER}} .ui-e-content' => 'text-align: {{VALUE}};',
1249 + '{{WRAPPER}} .ui-e-accordion-content' => 'text-align: {{VALUE}};',
1254 1250 ],
1255 1251 ]
1256 1252 );
1257 1253
@@ -1257,88 +1253,87 @@
1257 1253
1258 1254 $this->end_controls_section();
1259 1255
1260 1256 $this->start_controls_section(
1261 - 'section_animation',
1262 - [
1263 - 'label' => esc_html__('Animations', 'uicore-elements'),
1264 - 'tab' => Controls_Manager::TAB_STYLE,
1265 - ]
1266 - );
1257 + 'section_animation',
1258 + [
1259 + 'label' => esc_html__('Animations', 'uicore-elements'),
1260 + 'tab' => Controls_Manager::TAB_STYLE,
1261 + ]
1262 + );
1267 1263
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' => '',
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' => '',
1282 1278 'render_type' => 'template',
1283 - 'frontend_available' => true,
1284 - ]
1285 - );
1279 + 'frontend_available' => true,
1280 + ]
1281 + );
1286 1282
1287 1283 $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' => '',
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' => '',
1300 1296 'render_type' => 'template',
1301 - ]
1302 - );
1297 + ]
1298 + );
1303 1299
1304 1300 $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' =>[
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' => [
1325 1321 'icon_animation' => 'ui-e-animation-ico-spin',
1326 1322 ]
1327 - ]
1328 - );
1323 + ]
1324 + );
1329 1325
1330 - $this->end_controls_section();
1326 + $this->end_controls_section();
1331 1327 }
1332 1328 protected function render()
1333 1329 {
1334 1330
1335 - $settings = $this->get_settings_for_display(); // Get settings
1331 + $settings = $this->get_settings_for_display();
1332 + $ID = 'ui-e-accordion-' . $this->get_id();
1336 1333
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 1334 // Sets schema atts if active
1340 - if ($settings['schema_activity'] == 'yes') {
1335 + if ($this->is_option('schema_activity', 'yes')) {
1341 1336 $this->add_render_attribute('accordion', 'itemscope');
1342 1337 $this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1343 1338 }
1344 1339
@@ -1343,142 +1338,155 @@
1343 1338 }
1344 1339
1345 1340 $titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1346 1341
1347 - ?>
1348 - <div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion');?>>
1342 +?>
1343 + <div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion'); ?>>
1349 1344
1350 - <?php foreach ($settings['tabs'] as $index => $item) : // loop throught the repeater
1345 + <?php foreach ($settings['tabs'] as $index => $item) :
1351 1346
1352 - $loopCounter = $index + 1;
1347 + $loopCounter = $index + 1;
1353 1348
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 - }
1349 + // Builds the accordion ID
1350 + $acc_id = $item['tab_title']
1351 + ? 'ui-e-' . sanitize_title($item['tab_title'])
1352 + : $ID . $loopCounter;
1365 1353
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);
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 + }
1369 1360
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' : '');
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);
1376 1364
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 - }
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' : '');
1392 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');
1393 1389 }
1394 - $this->add_inline_editing_attributes($tab_content_setting_key, 'advanced'); // Allow content inline editing
1390 + }
1395 1391
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 - ]);
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 + ]);
1401 1403
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');
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');
1407 1409
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);
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);
1411 1413
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');
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 +
1416 1419 // 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);?>>
1420 + } else {
1421 + $schema_text = $schema_name = '';
1422 + }
1423 + ?>
1424 + <div <?php $this->print_render_attribute_string($item_key); ?>>
1422 1425
1423 - <<?php echo esc_html($titleTag)?> <?php $this->print_render_attribute_string($tab_title_setting_key);?>>
1426 + <<?php echo Helper::esc_tag($titleTag) ?> <?php $this->print_render_attribute_string($tab_title_setting_key); ?>>
1424 1427
1425 - <?php if ($settings['accordion_icon']['value']) : ?>
1426 - <span class="ui-e-icon ui-e-<?php echo esc_attr($settings['icon_align']); ?>" aria-hidden="true">
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">
1427 1432
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 -
1433 + <span class="ui-e-accordion-icon-closed">
1434 + <?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1438 1435 </span>
1439 - <?php endif; ?>
1440 1436
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']); ?>
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']); ?>
1445 1441 </span>
1446 1442 <?php endif; ?>
1447 - <?php echo esc_html($item['tab_title']); ?>
1443 +
1448 1444 </span>
1445 + <?php endif; ?>
1449 1446
1450 - </<?php echo esc_html($titleTag)?>>
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>
1451 1457
1452 - <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1453 - <?php
1454 - if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1458 + </<?php echo Helper::esc_tag($titleTag) ?>>
1455 1459
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 - }
1460 + <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1461 + <?php
1462 + if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1462 1463
1463 - echo $this->parse_text_editor($item['tab_content']);// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
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 + }
1464 1470
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>
1471 + echo wp_kses_post($this->parse_text_editor($item['tab_content']));
1477 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 + ?>
1478 1484 </div>
1479 - <?php endforeach; ?>
1480 - </div>
1481 - <?php
1485 +
1486 + </div>
1487 + <?php endforeach; ?>
1488 + </div>
1489 +<?php
1482 1490 }
1483 1491 }
1484 1492 \Elementor\Plugin::instance()->widgets_manager->register(new Accordion());