templates/areas/akkordeon/view.html.twig line 1

Open in your IDE?
  1. {# settings #}
  2. {% extends ('areas_shared/settings.html.twig') %}
  4. {% block content %}
  6.     {# default margin #}
  7.     {% if marginBottom.isEmpty() %}
  8.         {% do marginBottom.setDataFromResource('full-margin-bottom') %}
  9.     {% endif %}
  11.     {# default background color #}
  12.     {% if backgroundColor.isEmpty() %}
  13.         {% do backgroundColor.setDataFromResource('background-white') %}
  14.     {% endif %}
  16.     {# first accordion open #}
  17.     {% set firstAccordionOpen = pimcore_checkbox('firstAccordionOpen') %}
  19.     {# only one accordion open #}
  20.     {% set onlyOneAccordionOpen = pimcore_checkbox('onlyOneAccordionOpen') %}
  22.     {% if onlyOneAccordionOpen.checked %}
  23.         {% set onlyOneAccordionOpenClass = 'only-one-open' %}
  24.     {% else %}
  25.         {% set onlyOneAccordionOpenClass = '' %}
  26.     {% endif %}
  28.     {# title #}
  29.     {% set title = pimcore_input('title', {
  30.         'placeholder': 'Titel'
  31.     }) %}
  33.     {# editmode #}
  34.     {% if editmode %}
  35.         <div class="editmode">
  36.             <div class="accordion-container">
  37.                 <div class="accordion-button">
  38.                     <span class="accordion-button-text">Akkordeon</span>
  39.                     {{ include('svg/editmode/setting.html.twig') }}
  40.                 </div>
  41.                 <div class="panel">
  42.                     <div class="settings-container">
  43.                         
  44.                         <div class="setting input">
  45.                             <label>Anker:</label>
  46.                             {{ anchor|raw }}
  47.                         </div>
  49.                         <div class="setting checkbox">
  50.                             <label>{{ firstAccordionOpen|raw }} Erstes Akkordeon geöffnet</label>
  51.                         </div>
  53.                         <div class="setting checkbox">
  54.                             <label>{{ onlyOneAccordionOpen|raw }} Nur ein Akkordeon offen</label>
  55.                         </div>
  57.                         <div class="setting select">
  58.                             <label>Abstand unten:</label>
  59.                             {{ marginBottom|raw }}
  60.                         </div>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     {% endif %}
  68.     <div class="akkordeon-brick brick-container {{ backgroundColor.data }} {{ marginBottom.data }}">
  70.         {# anchor #}
  71.         {% if anchor.data %}
  72.             <div class="anchor" id="{{ anchor.data }}"></div>
  73.         {% endif %}
  75.         <div class="container-1420">
  76.             <div class="content"> 
  77.                
  78.                 {# title #}
  79.                 {% if editmode or title.data %}
  80.                     <div class="title">
  81.                         <h3>
  82.                             {{ title|raw }}
  83.                         </h3>
  84.                     </div>
  85.                 {% endif %}
  87.                 {# accordions #}
  88.                 {% for i in pimcore_block('accordionBlock').iterator %}
  90.                     {# link #}
  91.                     {# {% set accordionLink = pimcore_link('accordionLink') %} #}
  93.                     {# initial open #}
  94.                     {% if not editmode and firstAccordionOpen.checked and pimcore_block('accordionBlock').current == 0 %}
  95.                         {% set firstAccordionOpenButtonClass = 'active' %}
  96.                         {% set firstAccordionOpenPanelClass = 'initial-open active' %}
  97.                     {% else %}
  98.                         {% set firstAccordionOpenButtonClass = '' %}
  99.                         {% set firstAccordionOpenPanelClass = '' %}
  100.                     {% endif %}
  102.                     <div class="accordion-container">
  104.                         {# button #}
  105.                         <div class="accordion-button {{ onlyOneAccordionOpenClass }} {{ firstAccordionOpenButtonClass }} {% if editmode %}text-cursor{% endif %}">
  106.                             
  107.                             <div class="vertical">
  108.                                 {{ include('svg/akkordeon/akkordeon-vertical-icon.html.twig') }}
  109.                             </div>
  110.                             
  111.                             <div class="horizontal">
  112.                                 {{ include('svg/akkordeon/akkordeon-horizontal-icon.html.twig') }}
  113.                             </div>
  115.                             <h3 class="accordion-button-text">
  116.                                 {{ pimcore_textarea('accordionTitle', {
  117.                                     'placeholder': 'Titel',
  118.                                     'nl2br': true,
  119.                                     'required': true
  120.                                 }) }}
  121.                             </h3>
  122.                         </div>
  124.                         {# panel #}
  125.                         <div class="panel {{ firstAccordionOpenPanelClass }} {% if editmode %}always-open{% endif %}">
  126.                             <div class="panel-content">
  128.                                 <div class="accordion-text wysiwyg">
  129.                                     {{ pimcore_wysiwyg('accordionText', {
  130.                                         'placeholder': 'Text'
  131.                                     }) }}
  132.                                 </div>
  134.                                 {# <div class="accordion-link">
  135.                                     {% if editmode %}
  136.                                         <div class="link">
  137.                                             {{ accordionLink|raw }}
  138.                                         </div>
  139.                                     {% elseif accordionLink.href %}
  140.                                         {% if accordionLink.target %}    
  141.                                             {% set target = 'target="' ~ accordionLink.target ~ '"' %}
  142.                                         {% else %}
  143.                                             {% set target = '' %}
  144.                                         {% endif %}
  146.                                         <div class="link">
  147.                                             <div class="link-arrow">
  148.                                                 <a href="{{ accordionLink.href }}" {{ target|raw }}><span>{{ accordionLink.text }}</span> {{ include('layout/components/svg/link/arrow-right.html.twig') }}</a>
  149.                                             </div>
  150.                                         </div>
  151.                                     {% endif %}
  152.                                 </div> #}
  154.                             </div>
  155.                         </div>
  157.                     </div>
  158.                 {% endfor %}
  160.             </div>
  161.         </div>
  162.     </div>
  164. {% endblock %}