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 -371 1.0.7 → 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 [
@@ -382,9 +388,9 @@
382 388 'tab' => Controls_Manager::TAB_STYLE,
383 389 ]
384 390 );
385 391
386 - $this->add_control(
392 + $this->add_responsive_control(
387 393 'item_spacing',
388 394 [
389 395 'label' => __('Item Gap', 'uicore-elements'),
390 396 'type' => Controls_Manager::SLIDER,
@@ -397,9 +403,9 @@
397 403 'default' => [
398 404 'size' => 5,
399 405 ],
400 406 'selectors' => [
401 - '{{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}};',
402 408 ],
403 409 ]
404 410 );
405 411
@@ -404,154 +410,154 @@
404 410 );
405 411
406 412 $this->start_controls_tabs('tabs_item_style');
407 413
408 - $this->start_controls_tab(
409 - 'tab_item_normal',
410 - [
411 - 'label' => __('Normal', 'uicore-elements'),
412 - ]
413 - );
414 + $this->start_controls_tab(
415 + 'tab_item_normal',
416 + [
417 + 'label' => __('Normal', 'uicore-elements'),
418 + ]
419 + );
414 420
415 - $this->add_group_control(
416 - Group_Control_Background::get_type(),
417 - [
418 - 'name' => 'item_background',
419 - 'selector' => '{{WRAPPER}} .ui-e-item',
420 - ]
421 - );
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 + );
422 428
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 - );
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 + );
432 438
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 - );
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 + );
444 450
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 - );
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 + );
464 470
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 - );
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 + );
472 478
473 - $this->end_controls_tab();
479 + $this->end_controls_tab();
474 480
475 - $this->start_controls_tab(
476 - 'tab_item_hover',
477 - [
478 - 'label' => __('Hover', 'uicore-elements'),
479 - ]
480 - );
481 + $this->start_controls_tab(
482 + 'tab_item_hover',
483 + [
484 + 'label' => __('Hover', 'uicore-elements'),
485 + ]
486 + );
481 487
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 - );
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 + );
489 495
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 - );
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 + );
503 509
504 - $this->end_controls_tab();
510 + $this->end_controls_tab();
505 511
506 - $this->start_controls_tab(
507 - 'tab_item_active',
508 - [
509 - 'label' => __('Active', 'uicore-elements'),
510 - ]
511 - );
512 + $this->start_controls_tab(
513 + 'tab_item_active',
514 + [
515 + 'label' => __('Active', 'uicore-elements'),
516 + ]
517 + );
512 518
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 - );
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 + );
520 526
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 - );
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 + );
528 534
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 - );
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 + );
538 544
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 - );
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 + );
550 556
551 - $this->end_controls_tab();
557 + $this->end_controls_tab();
552 558
553 - $this->end_controls_tabs();
559 + $this->end_controls_tabs();
554 560
555 561 $this->end_controls_section();
556 562
557 563 $this->start_controls_section(
@@ -581,13 +587,12 @@
581 587 'icon' => 'eicon-text-align-right',
582 588 ],
583 589 ],
584 590 'default' => is_rtl() ? 'flex-end' : 'flex-start',
585 - 'default' => 'flex-start',
586 591 'toggle' => false,
587 592 'label_block' => false,
588 593 'selectors' => [
589 - '{{WRAPPER}} .ui-e-title-text' => 'justify-content: {{VALUE}};',
594 + '{{WRAPPER}} .ui-e-accordion-title-text' => 'justify-content: {{VALUE}};',
590 595 ],
591 596 ]
592 597 );
593 598
@@ -605,9 +610,9 @@
605 610 [
606 611 'label' => __('Title Color', 'uicore-elements'),
607 612 'type' => Controls_Manager::COLOR,
608 613 'selectors' => [
609 - '{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
614 + '{{WRAPPER}} .ui-e-accordion-title' => 'color: {{VALUE}};',
610 615 '{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
611 616 ],
612 617 ]
613 618 );
@@ -615,9 +620,9 @@
615 620 $this->add_group_control(
616 621 Group_Control_Background::get_type(),
617 622 [
618 623 'name' => 'title_background',
619 - 'selector' => '{{WRAPPER}} .ui-e-title',
624 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
620 625 ]
621 626 );
622 627
623 628 $this->add_group_control(
@@ -625,9 +630,9 @@
625 630 [
626 631 'name' => 'title_border',
627 632 'placeholder' => '1px',
628 633 'default' => '1px',
629 - 'selector' => '{{WRAPPER}} .ui-e-title',
634 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
630 635 ]
631 636 );
632 637
633 638 $this->add_responsive_control(
@@ -636,9 +641,9 @@
636 641 'label' => __('Border Radius', 'uicore-elements'),
637 642 'type' => Controls_Manager::DIMENSIONS,
638 643 'size_units' => ['px', '%'],
639 644 'selectors' => [
640 - '{{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;',
641 646 ],
642 647 ]
643 648 );
644 649
@@ -648,9 +653,9 @@
648 653 'label' => __('Padding', 'uicore-elements'),
649 654 'type' => Controls_Manager::DIMENSIONS,
650 655 'size_units' => ['px', 'em', '%'],
651 656 'selectors' => [
652 - '{{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}};',
653 658 ],
654 659 ]
655 660 );
656 661
@@ -657,9 +662,9 @@
657 662 $this->add_group_control(
658 663 Group_Control_Typography::get_type(),
659 664 [
660 665 'name' => 'title_typography',
661 - 'selector' => '{{WRAPPER}} .ui-e-title',
666 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
662 667 ]
663 668 );
664 669
665 670 $this->add_group_control(
@@ -665,9 +670,9 @@
665 670 $this->add_group_control(
666 671 Group_Control_Box_Shadow::get_type(),
667 672 [
668 673 'name' => 'title_shadow',
669 - 'selector' => '{{WRAPPER}} .ui-e-title',
674 + 'selector' => '{{WRAPPER}} .ui-e-accordion-title',
670 675 ]
671 676 );
672 677
673 678 $this->end_controls_tab();
@@ -684,10 +689,10 @@
684 689 [
685 690 'label' => __('Title Color', 'uicore-elements'),
686 691 'type' => Controls_Manager::COLOR,
687 692 '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}};',
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}};',
690 695 ],
691 696 ]
692 697 );
693 698
@@ -694,9 +699,9 @@
694 699 $this->add_group_control(
695 700 Group_Control_Background::get_type(),
696 701 [
697 702 'name' => 'hover_title_background',
698 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-title',
703 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title',
699 704 ]
700 705 );
701 706
702 707 $this->add_control(
@@ -707,9 +712,9 @@
707 712 'condition' => [
708 713 'title_border_border!' => '',
709 714 ],
710 715 'selectors' => [
711 - '{{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}};',
712 717 ],
713 718 ]
714 719 );
715 720
@@ -727,10 +732,10 @@
727 732 [
728 733 'label' => __('Title Color', 'uicore-elements'),
729 734 'type' => Controls_Manager::COLOR,
730 735 '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}};',
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}};',
733 738 ],
734 739 ]
735 740 );
736 741
@@ -737,9 +742,9 @@
737 742 $this->add_group_control(
738 743 Group_Control_Background::get_type(),
739 744 [
740 745 'name' => 'active_title_background',
741 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
746 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
742 747 ]
743 748 );
744 749
745 750 $this->add_group_control(
@@ -745,9 +750,9 @@
745 750 $this->add_group_control(
746 751 Group_Control_Box_Shadow::get_type(),
747 752 [
748 753 'name' => 'active_title_shadow',
749 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
754 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
750 755 ]
751 756 );
752 757
753 758 $this->add_group_control(
@@ -755,9 +760,9 @@
755 760 [
756 761 'name' => 'active_title_border',
757 762 'placeholder' => '1px',
758 763 'default' => '1px',
759 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
764 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
760 765 ]
761 766 );
762 767
763 768 $this->add_responsive_control(
@@ -766,9 +771,9 @@
766 771 'label' => __('Border Radius', 'uicore-elements'),
767 772 'type' => Controls_Manager::DIMENSIONS,
768 773 'size_units' => ['px', '%'],
769 774 'selectors' => [
770 - '{{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;',
771 776 ],
772 777 ]
773 778 );
774 779
@@ -832,11 +837,11 @@
832 837 'max' => 50,
833 838 ],
834 839 ],
835 840 'default' => [
836 - 'unit' => 'px',
837 - 'size' => 5,
838 - ],
841 + 'unit' => 'px',
842 + 'size' => 5,
843 + ],
839 844 'selectors' => [
840 845 '{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
841 846 ],
842 847 ]
@@ -856,10 +861,10 @@
856 861 [
857 862 'label' => __('Title Icon Color', 'uicore-elements'),
858 863 'type' => Controls_Manager::COLOR,
859 864 '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}};',
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}};',
862 867 ],
863 868 ]
864 869 );
865 870
@@ -877,10 +882,10 @@
877 882 [
878 883 'label' => __('Title Icon Color', 'uicore-elements'),
879 884 'type' => Controls_Manager::COLOR,
880 885 '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}};',
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}};',
883 888 ],
884 889 ]
885 890 );
886 891
@@ -936,10 +941,10 @@
936 941 [
937 942 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
938 943 'type' => Controls_Manager::COLOR,
939 944 'selectors' => [
940 - '{{WRAPPER}} .ui-e-icon' => 'color: {{VALUE}};',
941 - '{{WRAPPER}} .ui-e-icon svg' => 'fill: {{VALUE}};',
945 + '{{WRAPPER}} .ui-e-accordion-icon' => 'color: {{VALUE}};',
946 + '{{WRAPPER}} .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
942 947 ],
943 948 ]
944 949 );
945 950
@@ -946,9 +951,9 @@
946 951 $this->add_group_control(
947 952 Group_Control_Background::get_type(),
948 953 [
949 954 'name' => 'icon_background_color',
950 - 'selector' => '{{WRAPPER}} .ui-e-icon'
955 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon'
951 956 ]
952 957 );
953 958
954 959 $this->add_group_control(
@@ -954,9 +959,9 @@
954 959 $this->add_group_control(
955 960 Group_Control_Border::get_type(),
956 961 [
957 962 'name' => 'icon_border',
958 - 'selector' => '{{WRAPPER}} .ui-e-icon',
963 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
959 964 ]
960 965 );
961 966
962 967 $this->add_responsive_control(
@@ -965,9 +970,9 @@
965 970 'label' => esc_html__('Border Radius', 'uicore-elements'),
966 971 'type' => Controls_Manager::DIMENSIONS,
967 972 'size_units' => ['px', '%'],
968 973 'selectors' => [
969 - '{{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}};',
970 975 ],
971 976 ]
972 977 );
973 978
@@ -978,9 +983,9 @@
978 983 'type' => Controls_Manager::DIMENSIONS,
979 984 'size_units' => ['px', 'em', '%'],
980 985 'selectors' => [
981 986 // 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}};',
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}};',
983 988 ],
984 989 ]
985 990 );
986 991
@@ -995,13 +1000,13 @@
995 1000 'max' => 100,
996 1001 ],
997 1002 ],
998 1003 'default' => [
999 - 'unit' => 'px',
1000 - 'size' => 15,
1001 - ],
1004 + 'unit' => 'px',
1005 + 'size' => 15,
1006 + ],
1002 1007 'selectors' => [
1003 - '{{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}};',
1004 1009 ],
1005 1010 ]
1006 1011 );
1007 1012
@@ -1016,9 +1021,9 @@
1016 1021 'max' => 50,
1017 1022 ],
1018 1023 ],
1019 1024 'selectors' => [
1020 - '{{WRAPPER}} .ui-e-title' => 'gap: {{SIZE}}{{UNIT}};',
1025 + '{{WRAPPER}} .ui-e-accordion-title' => 'gap: {{SIZE}}{{UNIT}};',
1021 1026 ]
1022 1027 ]
1023 1028 );
1024 1029
@@ -1025,9 +1030,9 @@
1025 1030 $this->add_group_control(
1026 1031 Group_Control_Box_Shadow::get_type(),
1027 1032 [
1028 1033 'name' => 'icon_box_shadow',
1029 - 'selector' => '{{WRAPPER}} .ui-e-icon',
1034 + 'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
1030 1035 ]
1031 1036 );
1032 1037
1033 1038 $this->end_controls_tab();
@@ -1044,10 +1049,10 @@
1044 1049 [
1045 1050 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1046 1051 'type' => Controls_Manager::COLOR,
1047 1052 'selectors' => [
1048 - '{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'color: {{VALUE}};',
1049 - '{{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}};',
1050 1055 ],
1051 1056 ]
1052 1057 );
1053 1058
@@ -1054,9 +1059,9 @@
1054 1059 $this->add_group_control(
1055 1060 Group_Control_Background::get_type(),
1056 1061 [
1057 1062 'name' => 'icon_hover_background_color',
1058 - 'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-icon'
1063 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon'
1059 1064 ]
1060 1065 );
1061 1066
1062 1067 $this->add_control(
@@ -1067,9 +1072,9 @@
1067 1072 'condition' => [
1068 1073 'icon_border_border!' => '',
1069 1074 ],
1070 1075 'selectors' => [
1071 - '{{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}};',
1072 1077 ],
1073 1078 ]
1074 1079 );
1075 1080
@@ -1087,10 +1092,10 @@
1087 1092 [
1088 1093 'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1089 1094 'type' => Controls_Manager::COLOR,
1090 1095 '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}};',
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}};',
1093 1098 ],
1094 1099 ]
1095 1100 );
1096 1101
@@ -1097,9 +1102,9 @@
1097 1102 $this->add_group_control(
1098 1103 Group_Control_Background::get_type(),
1099 1104 [
1100 1105 'name' => 'icon_active_background_color',
1101 - 'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon'
1106 + 'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon'
1102 1107 ]
1103 1108 );
1104 1109
1105 1110 $this->add_control(
@@ -1110,9 +1115,9 @@
1110 1115 'condition' => [
1111 1116 'icon_border_border!' => '',
1112 1117 ],
1113 1118 'selectors' => [
1114 - '{{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}};',
1115 1120 ],
1116 1121 ]
1117 1122 );
1118 1123
@@ -1135,9 +1140,9 @@
1135 1140 [
1136 1141 'label' => __('Text Color', 'uicore-elements'),
1137 1142 'type' => Controls_Manager::COLOR,
1138 1143 'selectors' => [
1139 - '{{WRAPPER}} .ui-e-content' => 'color: {{VALUE}};',
1144 + '{{WRAPPER}} .ui-e-accordion-content' => 'color: {{VALUE}};',
1140 1145 ],
1141 1146 ]
1142 1147 );
1143 1148
@@ -1144,9 +1149,9 @@
1144 1149 $this->add_group_control(
1145 1150 Group_Control_Background::get_type(),
1146 1151 [
1147 1152 'name' => 'content_background_color',
1148 - 'selector' => '{{WRAPPER}} .ui-e-content',
1153 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1149 1154 ]
1150 1155 );
1151 1156
1152 1157 $this->add_group_control(
@@ -1153,9 +1158,9 @@
1153 1158 Group_Control_Border::get_type(),
1154 1159 [
1155 1160 'name' => 'content_border',
1156 1161 'label' => __('Border', 'uicore-elements'),
1157 - 'selector' => '{{WRAPPER}} .ui-e-content',
1162 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1158 1163 ]
1159 1164 );
1160 1165
1161 1166 $this->add_responsive_control(
@@ -1176,9 +1181,9 @@
1176 1181 'label' => __('Padding', 'uicore-elements'),
1177 1182 'type' => Controls_Manager::DIMENSIONS,
1178 1183 'size_units' => ['px', 'em', '%'],
1179 1184 'selectors' => [
1180 - '{{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}};',
1181 1186 ],
1182 1187 ]
1183 1188 );
1184 1189
@@ -1193,13 +1198,13 @@
1193 1198 'max' => 100,
1194 1199 ],
1195 1200 ],
1196 1201 'default' => [
1197 - 'unit' => 'px',
1198 - 'size' => 15,
1199 - ],
1202 + 'unit' => 'px',
1203 + 'size' => 15,
1204 + ],
1200 1205 'selectors' => [
1201 - '{{WRAPPER}} .ui-e-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1206 + '{{WRAPPER}} .ui-e-accordion-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1202 1207 ],
1203 1208 ]
1204 1209 );
1205 1210
@@ -1206,9 +1211,9 @@
1206 1211 $this->add_group_control(
1207 1212 Group_Control_Typography::get_type(),
1208 1213 [
1209 1214 'name' => 'content_typography',
1210 - 'selector' => '{{WRAPPER}} .ui-e-content',
1215 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1211 1216 ]
1212 1217 );
1213 1218
1214 1219 $this->add_group_control(
@@ -1215,9 +1220,9 @@
1215 1220 Group_Control_Box_Shadow::get_type(),
1216 1221 [
1217 1222 'name' => 'content_shadow',
1218 1223 'label' => __('Box Shadow', 'uicore-elements'),
1219 - 'selector' => '{{WRAPPER}} .ui-e-content',
1224 + 'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1220 1225 ]
1221 1226 );
1222 1227
1223 1228 $this->add_responsive_control(
@@ -1238,10 +1243,11 @@
1238 1243 'title' => __('Right', 'uicore-elements'),
1239 1244 'icon' => 'eicon-text-align-right',
1240 1245 ],
1241 1246 ],
1247 + 'default' => is_rtl() ? 'right' : 'left',
1242 1248 'selectors' => [
1243 - '{{WRAPPER}} .ui-e-content' => 'text-align: {{VALUE}};',
1249 + '{{WRAPPER}} .ui-e-accordion-content' => 'text-align: {{VALUE}};',
1244 1250 ],
1245 1251 ]
1246 1252 );
1247 1253
@@ -1247,87 +1253,87 @@
1247 1253
1248 1254 $this->end_controls_section();
1249 1255
1250 1256 $this->start_controls_section(
1251 - 'section_animation',
1252 - [
1253 - 'label' => esc_html__('Animations', 'uicore-elements'),
1254 - 'tab' => Controls_Manager::TAB_STYLE,
1255 - ]
1256 - );
1257 + 'section_animation',
1258 + [
1259 + 'label' => esc_html__('Animations', 'uicore-elements'),
1260 + 'tab' => Controls_Manager::TAB_STYLE,
1261 + ]
1262 + );
1257 1263
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' => '',
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' => '',
1272 1278 'render_type' => 'template',
1273 - 'frontend_available' => true,
1274 - ]
1275 - );
1279 + 'frontend_available' => true,
1280 + ]
1281 + );
1276 1282
1277 1283 $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' => '',
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' => '',
1290 1296 'render_type' => 'template',
1291 - ]
1292 - );
1297 + ]
1298 + );
1293 1299
1294 1300 $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' =>[
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' => [
1315 1321 'icon_animation' => 'ui-e-animation-ico-spin',
1316 1322 ]
1317 - ]
1318 - );
1323 + ]
1324 + );
1319 1325
1320 - $this->end_controls_section();
1326 + $this->end_controls_section();
1321 1327 }
1322 1328 protected function render()
1323 1329 {
1324 1330
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.
1331 + $settings = $this->get_settings_for_display();
1332 + $ID = 'ui-e-accordion-' . $this->get_id();
1327 1333
1328 1334 // Sets schema atts if active
1329 - if ($settings['schema_activity'] == 'yes') {
1335 + if ($this->is_option('schema_activity', 'yes')) {
1330 1336 $this->add_render_attribute('accordion', 'itemscope');
1331 1337 $this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1332 1338 }
1333 1339
@@ -1332,148 +1338,155 @@
1332 1338 }
1333 1339
1334 1340 $titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1335 1341
1336 - ?>
1337 - <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'); ?>>
1338 1344
1339 - <?php foreach ($settings['tabs'] as $index => $item) : // loop throught the repeater
1345 + <?php foreach ($settings['tabs'] as $index => $item) :
1340 1346
1341 - $loopCounter = $index + 1;
1347 + $loopCounter = $index + 1;
1342 1348
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 - }
1349 + // Builds the accordion ID
1350 + $acc_id = $item['tab_title']
1351 + ? 'ui-e-' . sanitize_title($item['tab_title'])
1352 + : $ID . $loopCounter;
1355 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 + }
1356 1360
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);
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);
1360 1364
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' : '');
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' : '');
1366 1371
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 - }
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');
1383 1389 }
1384 - $this->add_inline_editing_attributes($tab_content_setting_key, 'advanced'); // Allow content inline editing
1390 + }
1385 1391
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 - ]);
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 + ]);
1396 1403
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');
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');
1402 1409
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);
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);
1406 1413
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');
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 +
1411 1419 // 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);?>>
1420 + } else {
1421 + $schema_text = $schema_name = '';
1422 + }
1423 + ?>
1424 + <div <?php $this->print_render_attribute_string($item_key); ?>>
1417 1425
1418 - <<?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); ?>>
1419 1427
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">
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">
1422 1432
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 class="ui-e-accordion-icon-closed">
1434 + <?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1433 1435 </span>
1434 - <?php endif; ?>
1435 1436
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']); ?>
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']); ?>
1440 1441 </span>
1441 1442 <?php endif; ?>
1442 - <?php echo esc_html($item['tab_title']); ?>
1443 +
1443 1444 </span>
1445 + <?php endif; ?>
1444 1446
1445 - </<?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>
1446 1457
1447 - <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1448 - <?php
1449 - if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1458 + </<?php echo Helper::esc_tag($titleTag) ?>>
1450 1459
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 - }
1460 + <div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1461 + <?php
1462 + if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1457 1463
1458 - 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 + }
1459 1470
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>
1471 + echo wp_kses_post($this->parse_text_editor($item['tab_content']));
1472 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 + ?>
1473 1484 </div>
1474 - <?php endforeach; ?>
1475 - </div>
1476 - <?php
1485 +
1486 + </div>
1487 + <?php endforeach; ?>
1488 + </div>
1489 +<?php
1477 1490 }
1478 1491 }
1479 1492 \Elementor\Plugin::instance()->widgets_manager->register(new Accordion());