templates/areas/wysiwyg/view.html.twig line 269

Open in your IDE?
  1. {% set enable_accordion = pimcore_checkbox('enable_accordion').getValue() %}
  2. {% set accordion_title = pimcore_input('accordion_title').getData() %}
  3. {% set accordion_style = pimcore_select('accordion_style').getData() %}
  4. {% set title_font_size = pimcore_select('title_font_size').getData() %}
  5. {% set initially_expanded = pimcore_checkbox('initially_expanded').getValue() %}
  6. {% set single_expansion = pimcore_checkbox('single_expansion').getValue() %}
  8. {% if enable_accordion %}
  9.     <style>
  10.         /* Base Accordion Styles */
  11.         .wysiwyg-accordion {
  12.             --accordion-border-color: #e9ecef;
  13.             --accordion-text-color: #212529;
  14.             --accordion-active-color: var(--bs-primary, #0d6efd);
  15.             --accordion-bg: #fff;
  16.             --accordion-hover-bg: #f8f9fa;
  17.             --accordion-icon-size: 24px;
  18.             --accordion-icon-right-spacing: 8px; /* New spacing variable */
  19.         }
  20.         
  21.         .wysiwyg-accordion .accordion-button {
  22.             padding: 1rem 0;
  23.             background: none;
  24.             font-size: 1rem;
  25.             font-weight: 400;
  26.             color: var(--accordion-text-color);
  27.             border: none;
  28.             width: 100%;
  29.             text-align: left;
  30.             position: relative;
  31.             padding-right: calc(var(--accordion-icon-size) + var(--accordion-icon-right-spacing) * 2);
  32.         }
  34.         /* Font Size Variations */
  35.         .wysiwyg-accordion .accordion-button.font-small {
  36.             font-size: 14px;
  37.         }
  38.         .wysiwyg-accordion .accordion-button.font-default {
  39.             font-size: 16px;
  40.         }
  41.         .wysiwyg-accordion .accordion-button.font-medium {
  42.             font-size: 18px;
  43.         }
  44.         .wysiwyg-accordion .accordion-button.font-large {
  45.             font-size: 20px;
  46.         }
  47.         .wysiwyg-accordion .accordion-button.font-xlarge {
  48.             font-size: 24px;
  49.         }
  51.         /* Custom Plus/Minus Icon */
  52.         .wysiwyg-accordion .accordion-button::after {
  53.             display: none; /* Hide default bootstrap arrow */
  54.         }
  56.         .wysiwyg-accordion .accordion-button::before,
  57.         .wysiwyg-accordion .accordion-button::after {
  58.             content: '';
  59.             position: absolute;
  60.             right: var(--accordion-icon-right-spacing);
  61.             top: 50%;
  62.             background-color: currentColor;
  63.             transition: transform 0.2s ease, opacity 0.2s ease;
  64.         }
  66.         /* Horizontal line */
  67.         .wysiwyg-accordion .accordion-button::before {
  68.             width: 16px;
  69.             height: 2px;
  70.             margin-top: -1px;
  71.         }
  73.         /* Vertical line (plus) */
  74.         .wysiwyg-accordion .accordion-button::after {
  75.             width: 2px;
  76.             height: 16px;
  77.             margin-right: 7px;
  78.             margin-top: -8px;
  79.             display: block;
  80.         }
  82.         /* Animation for minus state */
  83.         .wysiwyg-accordion .accordion-button:not(.collapsed)::after {
  84.             transform: rotate(90deg);
  85.             opacity: 0;
  86.         }
  88.         .wysiwyg-accordion .accordion-body {
  89.             padding: 0.5rem 0 1.5rem;
  90.             font-size: 0.9rem;
  91.             line-height: 1.6;
  92.             color: var(--accordion-text-color);
  93.         }
  95.         /* Minimal Style - Like in the image */
  96.         .wysiwyg-accordion .accordion-item.minimal {
  97.             border-bottom: 1px solid var(--accordion-border-color);
  98.             background: transparent;
  99.             margin: 0;
  100.             padding: 0;
  101.         }
  103.         .wysiwyg-accordion .accordion-item.minimal .accordion-button {
  104.             transition: color 0.2s ease;
  105.         }
  107.         .wysiwyg-accordion .accordion-item.minimal .accordion-button:hover {
  108.             color: var(--accordion-active-color);
  109.         }
  111.         .wysiwyg-accordion .accordion-item.minimal .accordion-button:not(.collapsed) {
  112.             color: var(--accordion-active-color);
  113.         }
  115.         /* Modern Style */
  116.         .wysiwyg-accordion .accordion-item.modern {
  117.             border-bottom: 1px solid var(--accordion-border-color);
  118.             background: transparent;
  119.         }
  121.         .wysiwyg-accordion .accordion-item.modern .accordion-button {
  122.             padding: 1.25rem 0;
  123.         }
  125.         .wysiwyg-accordion .accordion-item.modern .accordion-button:not(.collapsed) {
  126.             color: var(--accordion-active-color);
  127.         }
  129.         .wysiwyg-accordion .accordion-item.modern .accordion-body {
  130.             padding: 0 0 1.25rem;
  131.         }
  133.         /* Card Style */
  134.         .wysiwyg-accordion .accordion-item.card {
  135.             border: 1px solid var(--accordion-border-color);
  136.             border-radius: 0.25rem;
  137.             margin-bottom: 0.5rem;
  138.         }
  140.         .wysiwyg-accordion .accordion-item.card .accordion-button {
  141.             padding: 1rem 1.25rem;
  142.             padding-right: calc(1.25rem + var(--accordion-icon-size));
  143.         }
  145.         .wysiwyg-accordion .accordion-item.card .accordion-button:not(.collapsed) {
  146.             background-color: var(--accordion-hover-bg);
  147.             color: var(--accordion-active-color);
  148.         }
  150.         .wysiwyg-accordion .accordion-item.card .accordion-body {
  151.             padding: 0 1.25rem 1rem;
  152.         }
  154.         /* Floating Style */
  155.         .wysiwyg-accordion .accordion-item.floating {
  156.             border: 1px solid var(--accordion-border-color);
  157.             border-radius: 0.25rem;
  158.             margin-bottom: 0.5rem;
  159.             transition: border-color 0.2s ease;
  160.         }
  162.         .wysiwyg-accordion .accordion-item.floating:hover {
  163.             border-color: var(--accordion-active-color);
  164.         }
  166.         .wysiwyg-accordion .accordion-item.floating .accordion-button {
  167.             padding: 1rem 1.25rem;
  168.             padding-right: calc(1.25rem + var(--accordion-icon-size));
  169.         }
  171.         .wysiwyg-accordion .accordion-item.floating .accordion-button:not(.collapsed) {
  172.             color: var(--accordion-active-color);
  173.         }
  175.         .wysiwyg-accordion .accordion-item.floating .accordion-body {
  176.             padding: 0 1.25rem 1rem;
  177.         }
  179.         /* Bordered Style */
  180.         .wysiwyg-accordion .accordion-item.bordered {
  181.             border-bottom: 2px solid var(--accordion-border-color);
  182.             margin: 0;
  183.             transition: border-color 0.2s ease;
  184.         }
  186.         .wysiwyg-accordion .accordion-item.bordered:hover {
  187.             border-color: var(--accordion-active-color);
  188.         }
  190.         .wysiwyg-accordion .accordion-item.bordered .accordion-button:not(.collapsed) {
  191.             color: var(--accordion-active-color);
  192.         }
  194.         /* Common Focus States */
  195.         .wysiwyg-accordion .accordion-button:focus {
  196.             box-shadow: none;
  197.             outline: none;
  198.         }
  199.         
  200.         /* Smooth Animation */
  201.         .wysiwyg-accordion .accordion-collapse {
  202.             transition: height 0.2s ease;
  203.         }
  205.         /* Dark Mode Support */
  206.         @media (prefers-color-scheme: dark) {
  207.             .wysiwyg-accordion {
  208.                 --accordion-border-color: rgba(255,255,255,0.1);
  209.                 --accordion-text-color: #fff;
  210.                 --accordion-bg: #1a1a1a;
  211.                 --accordion-hover-bg: #2a2a2a;
  212.             }
  213.         }
  214.     </style>
  216.     <div class="wysiwyg-accordion mb-4">
  217.         {% set accordion_id = 'accordion_' ~ (editmode ? 'preview' : random()) %}
  218.         {% set content_id = 'content_' ~ (editmode ? 'preview' : random()) %}
  219.         
  220.         <div class="accordion{% if single_expansion %} single-expansion{% endif %}" 
  221.              id="{{ accordion_id }}"
  222.              {% if single_expansion %}data-single-expansion="true"{% endif %}>
  223.             <div class="accordion-item {{ accordion_style }}">
  224.                 <h2 class="accordion-header m-0">
  225.                     <button class="accordion-button font-{{ title_font_size|default('default') }} {{ not initially_expanded ? 'collapsed' : '' }}" 
  226.                             type="button" 
  227.                             data-bs-toggle="collapse" 
  228.                             data-bs-target="#{{ content_id }}" 
  229.                             aria-expanded="{{ initially_expanded ? 'true' : 'false' }}"
  230.                             aria-controls="{{ content_id }}">
  231.                         {{ accordion_title }}
  232.                     </button>
  233.                 </h2>
  234.                 <div id="{{ content_id }}" 
  235.                      class="accordion-collapse collapse {{ initially_expanded ? 'show' : '' }}"
  236.                      {% if single_expansion %}
  237.                          data-bs-parent=".single-expansion"
  238.                      {% else %}
  239.                          data-bs-parent="#{{ accordion_id }}"
  240.                      {% endif %}>
  241.                     <div class="accordion-body">
  242.                         {{ pimcore_wysiwyg("wysiwyg-area") }}
  243.                     </div>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.     </div>
  249.     {% if single_expansion %}
  250.         <script>
  251.             document.addEventListener('DOMContentLoaded', function() {
  252.                 // Wenn Single Expansion aktiv ist, schließe alle anderen Accordions beim Öffnen eines neuen
  253.                 const accordions = document.querySelectorAll('.single-expansion .accordion-collapse');
  254.                 accordions.forEach(collapse => {
  255.                     collapse.addEventListener('show.bs.collapse', function() {
  256.                         const otherAccordions = document.querySelectorAll('.single-expansion .accordion-collapse.show');
  257.                         otherAccordions.forEach(other => {
  258.                             if (other !== collapse) {
  259.                                 bootstrap.Collapse.getInstance(other).hide();
  260.                             }
  261.                         });
  262.                     });
  263.                 });
  264.             });
  265.         </script>
  266.     {% endif %}
  267. {% else %}
  268.     <div class="wysiwyg-area mb-4">
  269.         {{ pimcore_wysiwyg("wysiwyg-area") }}
  270.     </div>
  271. {% endif %}