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 +384 -375 1.2.0 → 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,12 +52,13 @@
51 52 public function get_scripts()
52 53 {
53 54 return ['accordion'];
54 55 }
55 - // TODO: remove or set as false, after 3.30, when the full deprecation of widget innet wrapper is ready
56 - public function has_widget_inner_wrapper(): bool {
57 - return true;
58 - }
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 + }
59 61 protected function register_controls()
60 62 {
61 63 $this->start_controls_section(
62 64 'section_title',
@@ -103,19 +105,19 @@
103 105 ]
104 106 );
105 107
106 108 $repeater->add_control(
107 - 'section_id',
108 - [
109 - 'label' => esc_html__( 'Section ID', 'uicore-elements' ),
110 - 'type' => Controls_Manager::TEXT,
111 - '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'),
112 114 'condition' => [
113 115 'source' => 'sectionId'
114 116 ],
115 117 'dynamic' => ['active' => true],
116 - ]
117 - );
118 + ]
119 + );
118 120
119 121 $repeater->add_control(
120 122 'repeater_icon',
121 123 [
@@ -386,9 +388,9 @@
386 388 'tab' => Controls_Manager::TAB_STYLE,
387 389 ]
388 390 );
389 391
390 - $this->add_control(
392 + $this->add_responsive_control(
391 393 'item_spacing',
392 394 [
393 395 'label' => __('Item Gap', 'uicore-elements'),
394 396 'type' => Controls_Manager::SLIDER,
@@ -401,9 +403,9 @@
401 403 'default' => [
402 404 'size' => 5,
403 405 ],
404 406 'selectors' => [
405 - '{{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}};',
406 408 ],
407 409 ]
408 410 );
409 411
@@ -408,154 +410,154 @@
408 410 );
409 411
410 412 $this->start_controls_tabs('tabs_item_style');
411 413
412 - $this->start_controls_tab(
413 - 'tab_item_normal',
414 - [
415 - 'label' => __('Normal', 'uicore-elements'),
416 - ]
417 - );
414 + $this->start_controls_tab(
415 + 'tab_item_normal',
416 + [
417 + 'label' => __('Normal', 'uicore-elements'),
418 + ]
419 + );
418 420
419 - $this->add_group_control(
420 - Group_Control_Background::get_type(),
421 - [
422 - 'name' => 'item_background',
423 - 'selector' => '{{WRAPPER}} .ui-e-item',
424 - ]
425 - );
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 + );
426 428
427 - $this->add_group_control(
428 - Group_Control_Border::get_type(),
429 - [
430 - 'name' => 'item_border',
431 - 'placeholder' => '1px',
432 - 'default' => '1px',
433 - 'selector' => '{{WRAPPER}} .ui-e-item',
434 - ]
435 - );
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 + );
436 438
437 - $this->add_responsive_control(
438 - 'item_radius',
439 - [
440 - 'label' => __('Border Radius', 'uicore-elements'),
441 - 'type' => Controls_Manager::DIMENSIONS,
442 - 'size_units' => ['px', '%'],
443 - 'selectors' => [
444 - '{{WRAPPER}} .ui-e-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
445 - ],
446 - ]
447 - );
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 + );
448 450
449 - $this->add_responsive_control(
450 - 'item_padding',
451 - [
452 - 'label' => __('Padding', 'uicore-elements'),
453 - 'type' => Controls_Manager::DIMENSIONS,
454 - 'size_units' => ['px', 'em', '%'],
455 - 'default' => [
456 - 'top' => 15,
457 - 'right' => 15,
458 - 'bottom' => 15,
459 - 'left' => 15,
460 - 'unit' => 'px',
461 - 'isLinked' => true,
462 - ],
463 - 'selectors' => [
464 - '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
465 - ],
466 - ]
467 - );
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 + );
468 470
469 - $this->add_group_control(
470 - Group_Control_Box_Shadow::get_type(),
471 - [
472 - 'name' => 'item_shadow',
473 - 'selector' => '{{WRAPPER}} .ui-e-item',
474 - ]
475 - );
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 + );
476 478
477 - $this->end_controls_tab();
479 + $this->end_controls_tab();
478 480
479 - $this->start_controls_tab(
480 - 'tab_item_hover',
481 - [
482 - 'label' => __('Hover', 'uicore-elements'),
483 - ]
484 - );
481 + $this->start_controls_tab(
482 + 'tab_item_hover',
483 + [
484 + 'label' => __('Hover', 'uicore-elements'),
485 + ]
486 + );
485 487
486 - $this->add_group_control(
487 - Group_Control_Background::get_type(),
488 - [
489 - 'name' => 'hover_item_background',
490 - 'selector' => '{{WRAPPER}} .ui-e-item:hover',
491 - ]
492 - );
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 + );
493 495
494 - $this->add_control(
495 - 'item_hover_border_color',
496 - [
497 - 'label' => __('Border Color', 'uicore-elements'),
498 - 'type' => Controls_Manager::COLOR,
499 - 'condition' => [
500 - 'item_border_border!' => '',
501 - ],
502 - 'selectors' => [
503 - '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
504 - ],
505 - ]
506 - );
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 + );
507 509
508 - $this->end_controls_tab();
510 + $this->end_controls_tab();
509 511
510 - $this->start_controls_tab(
511 - 'tab_item_active',
512 - [
513 - 'label' => __('Active', 'uicore-elements'),
514 - ]
515 - );
512 + $this->start_controls_tab(
513 + 'tab_item_active',
514 + [
515 + 'label' => __('Active', 'uicore-elements'),
516 + ]
517 + );
516 518
517 - $this->add_group_control(
518 - Group_Control_Background::get_type(),
519 - [
520 - 'name' => 'active_item_background',
521 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
522 - ]
523 - );
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 + );
524 526
525 - $this->add_group_control(
526 - Group_Control_Box_Shadow::get_type(),
527 - [
528 - 'name' => 'active_item_shadow',
529 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
530 - ]
531 - );
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 + );
532 534
533 - $this->add_group_control(
534 - Group_Control_Border::get_type(),
535 - [
536 - 'name' => 'active_item_border',
537 - 'placeholder' => '1px',
538 - 'default' => '1px',
539 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
540 - ]
541 - );
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 + );
542 544
543 - $this->add_responsive_control(
544 - 'active_item_radius',
545 - [
546 - 'label' => __('Border Radius', 'uicore-elements'),
547 - 'type' => Controls_Manager::DIMENSIONS,
548 - 'size_units' => ['px', '%'],
549 - 'selectors' => [
550 - '{{WRAPPER}} .ui-e-item.ui-open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
551 - ],
552 - ]
553 - );
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 + );
554 556
555 - $this->end_controls_tab();
557 + $this->end_controls_tab();
556 558
557 - $this->end_controls_tabs();
559 + $this->end_controls_tabs();
558 560
559 561 $this->end_controls_section();
560 562
561 563 $this->start_controls_section(
@@ -585,13 +587,12 @@
585 587 'icon' => 'eicon-text-align-right',
586 588 ],
587 589 ],
588 590 'default' => is_rtl() ? 'flex-end' : 'flex-start',
589 - 'default' => 'flex-start',
590 591 'toggle' => false,
591 592 'label_block' => false,
592 593 'selectors' => [
593 - '{{WRAPPER}} .ui-e-title-text' => 'justify-content: {{VALUE}};',
594 + '{{WRAPPER}} .ui-e-accordion-title-text' => 'justify-content: {{VALUE}};',
594 595 ],
595 596 ]
596 597 );
597 598
@@ -609,9 +610,9 @@
609 610 [
610 611 'label' => __('Title Color', 'uicore-elements'),
611 612 'type' => Controls_Manager::COLOR,
612 613 'selectors' => [
613 - '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
614 + '{{WRAPPER}} .ui-e-accordion-title' => 'color: {{VALUE}};',
614 615 '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
615 616 ],
616 617 ]
617 618 );
@@ -619,9 +620,9 @@
619 620 $this->add_group_control(
620 621 Group_Control_Background::get_type(),
621 622 [
622 623 'name' => 'title_background',
623 - 'selector' => '{{WRAPPER}} .ui-e-title',
624 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
624 625 ]
625 626 );
626 627
627 628 $this->add_group_control(
@@ -629,9 +630,9 @@
629 630 [
630 631 'name' => 'title_border',
631 632 'placeholder' => '1px',
632 633 'default' => '1px',
633 - 'selector' => '{{WRAPPER}} .ui-e-title',
634 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
634 635 ]
635 636 );
636 637
637 638 $this->add_responsive_control(
@@ -640,9 +641,9 @@
640 641 'label' => __('Border Radius', 'uicore-elements'),
641 642 'type' => Controls_Manager::DIMENSIONS,
642 643 'size_units' => ['px', '%'],
643 644 'selectors' => [
644 - '{{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;',
645 646 ],
646 647 ]
647 648 );
648 649
@@ -652,9 +653,9 @@
652 653 'label' => __('Padding', 'uicore-elements'),
653 654 'type' => Controls_Manager::DIMENSIONS,
654 655 'size_units' => ['px', 'em', '%'],
655 656 'selectors' => [
656 - '{{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}};',
657 658 ],
658 659 ]
659 660 );
660 661
@@ -661,9 +662,9 @@
661 662 $this->add_group_control(
662 663 Group_Control_Typography::get_type(),
663 664 [
664 665 'name' => 'title_typography',
665 - 'selector' => '{{WRAPPER}} .ui-e-title',
666 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
666 667 ]
667 668 );
668 669
669 670 $this->add_group_control(
@@ -669,9 +670,9 @@
669 670 $this->add_group_control(
670 671 Group_Control_Box_Shadow::get_type(),
671 672 [
672 673 'name' => 'title_shadow',
673 - 'selector' => '{{WRAPPER}} .ui-e-title',
674 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
674 675 ]
675 676 );
676 677
677 678 $this->end_controls_tab();
@@ -688,10 +689,10 @@
688 689 [
689 690 'label' => __('Title Color', 'uicore-elements'),
690 691 'type' => Controls_Manager::COLOR,
691 692 'selectors' => [
692 - '{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'color: {{VALUE}};',
693 - '{{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}};',
694 695 ],
695 696 ]
696 697 );
697 698
@@ -698,9 +699,9 @@
698 699 $this->add_group_control(
699 700 Group_Control_Background::get_type(),
700 701 [
701 702 'name' => 'hover_title_background',
702 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-title',
703 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title',
703 704 ]
704 705 );
705 706
706 707 $this->add_control(
@@ -711,9 +712,9 @@
711 712 'condition' => [
712 713 'title_border_border!' => '',
713 714 ],
714 715 'selectors' => [
715 - '{{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}};',
716 717 ],
717 718 ]
718 719 );
719 720
@@ -731,10 +732,10 @@
731 732 [
732 733 'label' => __('Title Color', 'uicore-elements'),
733 734 'type' => Controls_Manager::COLOR,
734 735 'selectors' => [
735 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title' => 'color: {{VALUE}};',
736 - '{{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}};',
737 738 ],
738 739 ]
739 740 );
740 741
@@ -741,9 +742,9 @@
741 742 $this->add_group_control(
742 743 Group_Control_Background::get_type(),
743 744 [
744 745 'name' => 'active_title_background',
745 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
746 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
746 747 ]
747 748 );
748 749
749 750 $this->add_group_control(
@@ -749,9 +750,9 @@
749 750 $this->add_group_control(
750 751 Group_Control_Box_Shadow::get_type(),
751 752 [
752 753 'name' => 'active_title_shadow',
753 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
754 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
754 755 ]
755 756 );
756 757
757 758 $this->add_group_control(
@@ -759,9 +760,9 @@
759 760 [
760 761 'name' => 'active_title_border',
761 762 'placeholder' => '1px',
762 763 'default' => '1px',
763 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
764 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
764 765 ]
765 766 );
766 767
767 768 $this->add_responsive_control(
@@ -770,9 +771,9 @@
770 771 'label' => __('Border Radius', 'uicore-elements'),
771 772 'type' => Controls_Manager::DIMENSIONS,
772 773 'size_units' => ['px', '%'],
773 774 'selectors' => [
774 - '{{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;',
775 776 ],
776 777 ]
777 778 );
778 779
@@ -836,11 +837,11 @@
836 837 'max' => 50,
837 838 ],
838 839 ],
839 840 'default' => [
840 - 'unit' => 'px',
841 - 'size' => 5,
842 - ],
841 + 'unit' => 'px',
842 + 'size' => 5,
843 + ],
843 844 'selectors' => [
844 845 '{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
845 846 ],
846 847 ]
@@ -860,10 +861,10 @@
860 861 [
861 862 'label' => __('Title Icon Color', 'uicore-elements'),
862 863 'type' => Controls_Manager::COLOR,
863 864 'selectors' => [
864 - '{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon i' => 'color: {{VALUE}};',
865 - '{{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}};',
866 867 ],
867 868 ]
868 869 );
869 870
@@ -881,10 +882,10 @@
881 882 [
882 883 'label' => __('Title Icon Color', 'uicore-elements'),
883 884 'type' => Controls_Manager::COLOR,
884 885 'selectors' => [
885 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon i' => 'color: {{VALUE}};',
886 - '{{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}};',
887 888 ],
888 889 ]
889 890 );
890 891
@@ -940,10 +941,10 @@
940 941 [
941 942 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
942 943 'type' => Controls_Manager::COLOR,
943 944 'selectors' => [
944 - '{{WRAPPER}} .ui-e-icon' => 'color: {{VALUE}};',
945 - '{{WRAPPER}} .ui-e-icon svg' => 'fill: {{VALUE}};',
945 + '{{WRAPPER}} .ui-e-accordion-icon' => 'color: {{VALUE}};',
946 + '{{WRAPPER}} .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
946 947 ],
947 948 ]
948 949 );
949 950
@@ -950,9 +951,9 @@
950 951 $this->add_group_control(
951 952 Group_Control_Background::get_type(),
952 953 [
953 954 'name' => 'icon_background_color',
954 - 'selector' => '{{WRAPPER}} .ui-e-icon'
955 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon'
955 956 ]
956 957 );
957 958
958 959 $this->add_group_control(
@@ -958,9 +959,9 @@
958 959 $this->add_group_control(
959 960 Group_Control_Border::get_type(),
960 961 [
961 962 'name' => 'icon_border',
962 - 'selector' => '{{WRAPPER}} .ui-e-icon',
963 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
963 964 ]
964 965 );
965 966
966 967 $this->add_responsive_control(
@@ -969,9 +970,9 @@
969 970 'label' => esc_html__('Border Radius', 'uicore-elements'),
970 971 'type' => Controls_Manager::DIMENSIONS,
971 972 'size_units' => ['px', '%'],
972 973 'selectors' => [
973 - '{{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}};',
974 975 ],
975 976 ]
976 977 );
977 978
@@ -982,9 +983,9 @@
982 983 'type' => Controls_Manager::DIMENSIONS,
983 984 'size_units' => ['px', 'em', '%'],
984 985 'selectors' => [
985 986 // set as css variables because animations may need some particular value, such as pad-top for fade icon animation
986 - '{{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}};',
987 988 ],
988 989 ]
989 990 );
990 991
@@ -999,13 +1000,13 @@
999 1000 'max' => 100,
1000 1001 ],
1001 1002 ],
1002 1003 'default' => [
1003 - 'unit' => 'px',
1004 - 'size' => 15,
1005 - ],
1004 + 'unit' => 'px',
1005 + 'size' => 15,
1006 + ],
1006 1007 'selectors' => [
1007 - '{{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}};',
1008 1009 ],
1009 1010 ]
1010 1011 );
1011 1012
@@ -1020,9 +1021,9 @@
1020 1021 'max' => 50,
1021 1022 ],
1022 1023 ],
1023 1024 'selectors' => [
1024 - '{{WRAPPER}} .ui-e-title' => 'gap: {{SIZE}}{{UNIT}};',
1025 + '{{WRAPPER}} .ui-e-accordion-title' => 'gap: {{SIZE}}{{UNIT}};',
1025 1026 ]
1026 1027 ]
1027 1028 );
1028 1029
@@ -1029,9 +1030,9 @@
1029 1030 $this->add_group_control(
1030 1031 Group_Control_Box_Shadow::get_type(),
1031 1032 [
1032 1033 'name' => 'icon_box_shadow',
1033 - 'selector' => '{{WRAPPER}} .ui-e-icon',
1034 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
1034 1035 ]
1035 1036 );
1036 1037
1037 1038 $this->end_controls_tab();
@@ -1048,10 +1049,10 @@
1048 1049 [
1049 1050 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1050 1051 'type' => Controls_Manager::COLOR,
1051 1052 'selectors' => [
1052 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'color: {{VALUE}};',
1053 - '{{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}};',
1054 1055 ],
1055 1056 ]
1056 1057 );
1057 1058
@@ -1058,9 +1059,9 @@
1058 1059 $this->add_group_control(
1059 1060 Group_Control_Background::get_type(),
1060 1061 [
1061 1062 'name' => 'icon_hover_background_color',
1062 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-icon'
1063 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon'
1063 1064 ]
1064 1065 );
1065 1066
1066 1067 $this->add_control(
@@ -1071,9 +1072,9 @@
1071 1072 'condition' => [
1072 1073 'icon_border_border!' => '',
1073 1074 ],
1074 1075 'selectors' => [
1075 - '{{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}};',
1076 1077 ],
1077 1078 ]
1078 1079 );
1079 1080
@@ -1091,10 +1092,10 @@
1091 1092 [
1092 1093 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1093 1094 'type' => Controls_Manager::COLOR,
1094 1095 'selectors' => [
1095 - '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon' => 'color: {{VALUE}};',
1096 - '{{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}};',
1097 1098 ],
1098 1099 ]
1099 1100 );
1100 1101
@@ -1101,9 +1102,9 @@
1101 1102 $this->add_group_control(
1102 1103 Group_Control_Background::get_type(),
1103 1104 [
1104 1105 'name' => 'icon_active_background_color',
1105 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon'
1106 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon'
1106 1107 ]
1107 1108 );
1108 1109
1109 1110 $this->add_control(
@@ -1114,9 +1115,9 @@
1114 1115 'condition' => [
1115 1116 'icon_border_border!' => '',
1116 1117 ],
1117 1118 'selectors' => [
1118 - '{{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}};',
1119 1120 ],
1120 1121 ]
1121 1122 );
1122 1123
@@ -1139,9 +1140,9 @@
1139 1140 [
1140 1141 'label' => __('Text Color', 'uicore-elements'),
1141 1142 'type' => Controls_Manager::COLOR,
1142 1143 'selectors' => [
1143 - '{{WRAPPER}} .ui-e-content' => 'color: {{VALUE}};',
1144 + '{{WRAPPER}} .ui-e-accordion-content' => 'color: {{VALUE}};',
1144 1145 ],
1145 1146 ]
1146 1147 );
1147 1148
@@ -1148,9 +1149,9 @@
1148 1149 $this->add_group_control(
1149 1150 Group_Control_Background::get_type(),
1150 1151 [
1151 1152 'name' => 'content_background_color',
1152 - 'selector' => '{{WRAPPER}} .ui-e-content',
1153 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1153 1154 ]
1154 1155 );
1155 1156
1156 1157 $this->add_group_control(
@@ -1157,9 +1158,9 @@
1157 1158 Group_Control_Border::get_type(),
1158 1159 [
1159 1160 'name' => 'content_border',
1160 1161 'label' => __('Border', 'uicore-elements'),
1161 - 'selector' => '{{WRAPPER}} .ui-e-content',
1162 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1162 1163 ]
1163 1164 );
1164 1165
1165 1166 $this->add_responsive_control(
@@ -1180,9 +1181,9 @@
1180 1181 'label' => __('Padding', 'uicore-elements'),
1181 1182 'type' => Controls_Manager::DIMENSIONS,
1182 1183 'size_units' => ['px', 'em', '%'],
1183 1184 'selectors' => [
1184 - '{{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}};',
1185 1186 ],
1186 1187 ]
1187 1188 );
1188 1189
@@ -1197,13 +1198,13 @@
1197 1198 'max' => 100,
1198 1199 ],
1199 1200 ],
1200 1201 'default' => [
1201 - 'unit' => 'px',
1202 - 'size' => 15,
1203 - ],
1202 + 'unit' => 'px',
1203 + 'size' => 15,
1204 + ],
1204 1205 'selectors' => [
1205 - '{{WRAPPER}} .ui-e-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1206 + '{{WRAPPER}} .ui-e-accordion-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1206 1207 ],
1207 1208 ]
1208 1209 );
1209 1210
@@ -1210,9 +1211,9 @@
1210 1211 $this->add_group_control(
1211 1212 Group_Control_Typography::get_type(),
1212 1213 [
1213 1214 'name' => 'content_typography',
1214 - 'selector' => '{{WRAPPER}} .ui-e-content',
1215 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1215 1216 ]
1216 1217 );
1217 1218
1218 1219 $this->add_group_control(
@@ -1219,9 +1220,9 @@
1219 1220 Group_Control_Box_Shadow::get_type(),
1220 1221 [
1221 1222 'name' => 'content_shadow',
1222 1223 'label' => __('Box Shadow', 'uicore-elements'),
1223 - 'selector' => '{{WRAPPER}} .ui-e-content',
1224 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1224 1225 ]
1225 1226 );
1226 1227
1227 1228 $this->add_responsive_control(
@@ -1242,10 +1243,11 @@
1242 1243 'title' => __('Right', 'uicore-elements'),
1243 1244 'icon' => 'eicon-text-align-right',
1244 1245 ],
1245 1246 ],
1247 + 'default' => is_rtl() ? 'right' : 'left',
1246 1248 'selectors' => [
1247 - '{{WRAPPER}} .ui-e-content' => 'text-align: {{VALUE}};',
1249 + '{{WRAPPER}} .ui-e-accordion-content' => 'text-align: {{VALUE}};',
1248 1250 ],
1249 1251 ]
1250 1252 );
1251 1253
@@ -1251,87 +1253,87 @@
1251 1253
1252 1254 $this->end_controls_section();
1253 1255
1254 1256 $this->start_controls_section(
1255 - 'section_animation',
1256 - [
1257 - 'label' => esc_html__('Animations', 'uicore-elements'),
1258 - 'tab' => Controls_Manager::TAB_STYLE,
1259 - ]
1260 - );
1257 + 'section_animation',
1258 + [
1259 + 'label' => esc_html__('Animations', 'uicore-elements'),
1260 + 'tab' => Controls_Manager::TAB_STYLE,
1261 + ]
1262 + );
1261 1263
1262 - $this->add_control(
1263 - 'accordion_animation',
1264 - [
1265 - 'label' => esc_html__( 'Accordion Animation', 'uicore-elements' ),
1266 - 'type' => \Elementor\Controls_Manager::SELECT,
1267 - 'default' => 'ui-e-animation-acc-basic',
1268 - 'options' => [
1269 - '' => esc_html__( 'None', 'uicore-elements' ),
1270 - 'ui-e-animation-acc-basic' => esc_html__( 'Basic', 'uicore-elements' ),
1271 - 'ui-e-animation-acc-slow' => esc_html__( 'Slow', 'uicore-elements' ),
1272 - 'ui-e-animation-acc-expand' => esc_html__( 'Expand', 'uicore-elements' ),
1273 - 'ui-e-animation-acc-overshadow' => esc_html__( 'Overshadow', 'uicore-elements'),
1274 - ],
1275 - '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' => '',
1276 1278 'render_type' => 'template',
1277 - 'frontend_available' => true,
1278 - ]
1279 - );
1279 + 'frontend_available' => true,
1280 + ]
1281 + );
1280 1282
1281 1283 $this->add_control(
1282 - 'icon_animation',
1283 - [
1284 - 'label' => esc_html__( 'Icon Animation', 'uicore-elements' ),
1285 - 'type' => \Elementor\Controls_Manager::SELECT,
1286 - 'default' => 'ui-e-animation-ico-fade',
1287 - 'options' => [
1288 - '' => esc_html__( 'None', 'uicore-elements' ),
1289 - 'ui-e-animation-ico-fade' => esc_html__( 'Fade', 'uicore-elements' ),
1290 - 'ui-e-animation-ico-spin' => esc_html__( 'Spin', 'uicore-elements' ),
1291 - 'ui-e-animation-ico-slide' => esc_html__( 'Slide', 'uicore-elements' ),
1292 - ],
1293 - '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' => '',
1294 1296 'render_type' => 'template',
1295 - ]
1296 - );
1297 + ]
1298 + );
1297 1299
1298 1300 $this->add_control(
1299 - 'icon_spin_value',
1300 - [
1301 - 'label' => esc_html__( 'Icon Rotation', 'uicore-elements' ),
1302 - 'type' => \Elementor\Controls_Manager::SLIDER,
1303 - 'size_units' => ['deg', ''],
1304 - 'range' => [
1305 - 'deg' => [
1306 - 'min' => 0,
1307 - 'max' => 360,
1308 - 'step' => 1,
1309 - ],
1310 - ],
1311 - 'default' => [
1312 - 'unit' => 'deg',
1313 - 'size' => 315,
1314 - ],
1315 - 'selectors' => [
1316 - '{{WRAPPER}} .ui-e-icon' => '--ui-e-spin:{{SIZE}}deg;',
1317 - ],
1318 - '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' => [
1319 1321 'icon_animation' => 'ui-e-animation-ico-spin',
1320 1322 ]
1321 - ]
1322 - );
1323 + ]
1324 + );
1323 1325
1324 - $this->end_controls_section();
1326 + $this->end_controls_section();
1325 1327 }
1326 1328 protected function render()
1327 1329 {
1328 1330
1329 - $settings = $this->get_settings_for_display(); // Get settings
1330 - $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.
1331 + $settings = $this->get_settings_for_display();
1332 + $ID = 'ui-e-accordion-' . $this->get_id();
1331 1333
1332 1334 // Sets schema atts if active
1333 - if ($settings['schema_activity'] == 'yes') {
1335 + if ($this->is_option('schema_activity', 'yes')) {
1334 1336 $this->add_render_attribute('accordion', 'itemscope');
1335 1337 $this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1336 1338 }
1337 1339
@@ -1336,148 +1338,155 @@
1336 1338 }
1337 1339
1338 1340 $titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1339 1341
1340 - ?>
1341 - <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'); ?>>
1342 1344
1343 - <?php foreach ($settings['tabs'] as $index => $item) : // loop throught the repeater
1345 + <?php foreach ($settings['tabs'] as $index => $item) :
1344 1346
1345 - $loopCounter = $index + 1;
1347 + $loopCounter = $index + 1;
1346 1348
1347 - // Builds the accordion ID
1348 - if($item['tab_title']){
1349 - $acc_id = 'ui-e-' . sanitize_title($item['tab_title']); // filters so it can be used as ID, also prefixing it
1350 - } else {
1351 - $acc_id = $ID . $loopCounter; // If it hasn't title, uses the widget ID plus the loop counter iteration
1352 - }
1353 - // Build the Aria ID
1354 - if('sectionId' == $item['source']){
1355 - $aria_id = 'ui-' . preg_replace('/#/', '', $item['section_id']);
1356 - } else {
1357 - $aria_id = 'ui-e-acc-' . $loopCounter;
1358 - }
1349 + // Builds the accordion ID
1350 + $acc_id = $item['tab_title']
1351 + ? 'ui-e-' . sanitize_title($item['tab_title'])
1352 + : $ID . $loopCounter;
1359 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 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);
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 1364
1365 - // Render title atts
1366 - $this->add_render_attribute($tab_title_setting_key, [
1367 - 'class' => ['ui-e-title'],
1368 - ]);
1369 - $this->add_render_attribute($tab_title_setting_key, 'class', ('right' == $settings['icon_align']) ? 'ui-right' : '');
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' : '');
1370 1371
1371 - // Render content atts
1372 - $this->add_render_attribute($tab_content_setting_key, [
1373 - 'class' => ['ui-e-content'],
1374 - '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)
1375 - 'aria-labelledby' => $acc_id,
1376 - 'id' => $aria_id
1377 - ]);
1378 - // Check if the current accordion item uses sectionId as source
1379 - if ('sectionId' == $item['source']) {
1380 - // and also check if an ID was set
1381 - if($item['section_id'] != ''){
1382 - $this->add_render_attribute($tab_content_setting_key, ['class' => ['ui-section-id']]); // class used by JS
1383 - $sectionWarning = "The element with ID <em>{$item['section_id']}</em> is going to be inserted here on the front-end";
1384 - } else {
1385 - $sectionWarning = esc_html__( "You didn't define an ID.", 'uicore-elements' );
1386 - }
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');
1387 1389 }
1388 - $this->add_inline_editing_attributes($tab_content_setting_key, 'advanced'); // Allow content inline editing
1390 + }
1389 1391
1390 - // Render item atts
1391 - $item_key = 'ui-e-item-' . $index;
1392 - $this->add_render_attribute($item_key, [
1393 - 'class' => ($loopCounter === $settings['active_item']) ? 'ui-e-item ui-open' : 'ui-e-item',
1394 - 'role' => 'button',
1395 - 'tabindex' => '0',
1396 - 'aria-expanded' => ($loopCounter === $settings['active_item']) ? 'true' : 'false',
1397 - 'aria-controls' => $aria_id,
1398 - 'id' => $acc_id,
1399 - ]);
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 + ]);
1400 1403
1401 - // Render schema atts if active
1402 - if ($settings['schema_activity'] == 'yes') {
1403 - $this->add_render_attribute($item_key, 'itemscope');
1404 - $this->add_render_attribute($item_key, 'itemprop', 'mainEntity');
1405 - $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');
1406 1409
1407 - $this->add_render_attribute($tab_content_setting_key, 'itemscope');
1408 - $this->add_render_attribute($tab_content_setting_key, 'itemprop', 'acceptedAnswer', true);
1409 - $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);
1410 1413
1411 - $schema_text = $this->get_repeater_setting_key('schema_text', 'tabs', $index);
1412 - $schema_name = $this->get_repeater_setting_key('schema_name', 'tabs', $index);
1413 - $this->add_render_attribute($schema_text, 'itemprop', 'text');
1414 - $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 +
1415 1419 // Sets the variables to empty to avoid undefined variable problems
1416 - } else {
1417 - $schema_text = $schema_name = '';
1418 - }
1419 - ?>
1420 - <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); ?>>
1421 1425
1422 - <<?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); ?>>
1423 1427
1424 - <?php if ($settings['accordion_icon']['value']) : ?>
1425 - <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">
1426 1432
1427 - <span class="ui-e-icon-closed">
1428 - <?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1429 - </span>
1430 -
1431 - <?php if($settings['icon_animation'] != 'ui-e-animation-ico-spin') : //spin animation dismiss the opened accordion icon ?>
1432 - <span class="ui-e-icon-opened">
1433 - <?php Icons_Manager::render_icon($settings['accordion_active_icon'], ['aria-hidden' => 'true']); ?>
1434 - </span>
1435 - <?php endif; ?>
1436 -
1433 + <span class="ui-e-accordion-icon-closed">
1434 + <?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1437 1435 </span>
1438 - <?php endif; ?>
1439 1436
1440 - <span class="ui-e-title-text" <?php $this->print_render_attribute_string($schema_name) ;?>>
1441 - <?php if (!empty($item['repeater_icon']['value']) and $settings['show_custom_icon'] == 'yes') : ?>
1442 - <span class="ui-e-custom-icon">
1443 - <?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']); ?>
1444 1441 </span>
1445 1442 <?php endif; ?>
1446 - <?php echo esc_html($item['tab_title']); ?>
1443 +
1447 1444 </span>
1445 + <?php endif; ?>
1448 1446
1449 - </<?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>
1450 1457
1451 - <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1452 - <?php
1453 - if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1458 + </<?php echo Helper::esc_tag($titleTag) ?>>
1454 1459
1455 - // if schema is active, creates a wrapper for the itemprop structure
1456 - if($settings['schema_activity'] == 'yes') {
1457 - ?>
1458 - <div <?php $this->print_render_attribute_string($schema_text);?> >
1459 - <?php
1460 - }
1460 + <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1461 + <?php
1462 + if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1461 1463
1462 - 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 + }
1463 1470
1464 - if($settings['schema_activity'] == 'yes') {
1465 - ?>
1466 - </div>
1467 - <?php
1468 - }
1469 - }
1470 - // if source is sectionId and we're inside editor, returns a warning for context. The sectionId content is moved via JS
1471 - if ('sectionId' == $item['source'] && Plugin::$instance->editor->is_edit_mode()) {
1472 - echo wp_kses($sectionWarning, ['em' => []]);
1473 - }
1474 - ?>
1475 - </div>
1471 + echo wp_kses_post($this->parse_text_editor($item['tab_content']));
1476 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 + ?>
1477 1484 </div>
1478 - <?php endforeach; ?>
1479 - </div>
1480 - <?php
1485 +
1486 + </div>
1487 + <?php endforeach; ?>
1488 + </div>
1489 +<?php
1481 1490 }
1482 1491 }
1483 1492 \Elementor\Plugin::instance()->widgets_manager->register(new Accordion());