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

Open in your IDE?
  1. {% if prefix is not defined %}
  2.     {% set prefix = null %}
  3. {% endif %}
  5. {% if editmode %}
  6.     <div class="editmode">
  7.         <div class="title">
  8.             Tabs
  9.         </div>
  10.         <div class="options">
  11.             <label>
  12.                 Tabs-Stil<br/>
  13.                 {{ pimcore_select(prefix ~ '_brick_tabs_option_style', {
  14.                     'store': [
  15.                         ['default', 'Linie'],
  16.                         ['tabs-clean', 'Kachel'],
  17.                         ['tabs-folder', 'Rahmen'],
  18.                         ['tabs-vertical', 'Vertikal']
  19.                     ],
  20.                     'defaultValue' : 'default'
  21.                 }) }}
  22.             </label>
  23.         </div>
  24.         <div class="content">
  25.             {{ pimcore_input(prefix ~ '_brick_tabs_headline', {'placeholder': 'Überschrift'}) }}
  26.             <br/>
  27.             {% for i in pimcore_block(prefix ~ '_brick_tabs_block').iterator %}
  28.                 {{ pimcore_input(prefix ~ '_brick_tabs_tabtitle', {'placeholder': 'Tab-Titel'}) }}
  29.                 {{ pimcore_input(prefix ~ '_brick_tabs_headline', {'placeholder': 'Unterzeile'}) }}
  30.                 {{ pimcore_wysiwyg(prefix ~ '_brick_tabs_copy', {'placeholder': 'Fließtext'}) }}
  31.                 <label>
  32.                     Bild<br />
  33.                     {{ pimcore_image(prefix ~ '_brick_tabs_img', {'width': 300}) }}
  34.                 </label>
  35.                 <label>
  36.                     Video<br />
  37.                     {{ pimcore_video(prefix ~ '_brick_tabs_video', {'width': 300}) }}
  38.                 </label>
  39.                 {{ pimcore_link(prefix ~ '_brick_tabs_link') }}
  40.             {% endfor %}
  41.         </div>
  42.     </div>
  43. {% else %}
  44.     {% set tabStyle = pimcore_select(prefix ~ '_brick_tabs_option_style').getData() %}
  45.     {% set randString = date().timestamp~'-'~random() %}
  46.     <section class="brick_tabs">
  47.         <div class="container">
  48.             <div class="row">
  49.                 {% if not pimcore_input(prefix ~ '_brick_tabs_headline').isEmpty() %}
  50.                     <div class="col-12">
  51.                         <h2 class="mb-3">
  52.                             {{ pimcore_input(prefix ~ '_brick_tabs_headline') }}
  53.                         </h2>
  54.                     </div>
  55.                 {% endif %}
  56.                 <div class="col-12">
  57.                     <div class="tabs {{ tabStyle }}">
  58.                         {# START OPEN div #}
  59.                         {% if tabStyle == 'tabs-vertical' %}
  60.                         <div class="row">
  61.                             <div class="col-md-3">
  62.                                 {% endif %}
  63.                                 {# END OPEN div #}
  65.                                 {% set block2 = pimcore_block(prefix ~ '_brick_tabs_block', {'manual':true}).start() %}
  66.                                 <ul class="nav nav-tabs {{ tabStyle == 'tabs-vertical' ? 'flex-column' : '' }}"
  67.                                     id="{{ randString }}">
  68.                                     {% for b in block2.iterator %}
  69.                                         {% do block2.blockConstruct() %}
  70.                                         {% do block2.blockStart() %}
  71.                                         {% set tabId = 'tab' ~ randString ~ block2.getCurrent() %}
  72.                                         <li class="nav-item">
  73.                                             <a data-toggle="tab" href="#{{ tabId }}"
  74.                                                class="nav-link {{ block2.getCurrent() == 0 ? 'active' : '' }}">
  75.                                                 {{ pimcore_input(prefix ~ '_brick_tabs_tabtitle') }}
  76.                                             </a>
  77.                                         </li>
  78.                                         {% do block2.blockEnd() %}
  79.                                         {% do block2.blockDestruct() %}
  80.                                     {% endfor %}
  81.                                 </ul>
  82.                                 {% do block2.end() %}
  84.                                 {# START middleDIV #}
  85.                                 {% if tabStyle == 'tabs-vertical' %}
  86.                             </div>
  87.                             <div class="col-md-9">
  88.                                 {% endif %}
  89.                                 {# closs Middle DIV #}
  91.                                 {% set block = pimcore_block(prefix ~ '_brick_tabs_block', {'manual':true}).start() %}
  92.                                 <div class="tab-content" id="{{ randString }}Content">
  94.                                     {% for b in block.iterator %}
  95.                                         {% do block2.blockConstruct() %}
  96.                                         {% do block2.blockStart() %}
  98.                                         {% set tabIdContent = 'tab' ~ randString ~ block.getCurrent() %}
  99.                                         <div id="{{ tabIdContent }}"
  100.                                              class="tab-pane fade {{ block.getCurrent() == 0 ? 'active show' : '' }}">
  101.                                             {% if not pimcore_input(prefix ~ '_brick_tabs_headline').isEmpty() %}
  102.                                                 <h3>{{ pimcore_input(prefix ~ '_brick_tabs_headline') }}</h3>
  103.                                             {% endif %}
  105.                                             {% if not pimcore_wysiwyg(prefix ~ '_brick_tabs_copy').isEmpty() %}
  106.                                                 {{ pimcore_wysiwyg(prefix ~ '_brick_tabs_copy') }}
  107.                                             {% endif %}
  109.                                             {% if not pimcore_image(prefix ~ '_brick_tabs_img').isEmpty() %}
  110.                                                 {{ pimcore_image(prefix ~ '_brick_tabs_img') }}
  111.                                             {% endif %}
  112.                                                 {% if not pimcore_video(prefix ~ '_brick_tabs_video').isEmpty() %}
  113.                                                 {{ pimcore_video(prefix ~ '_brick_tabs_video') }}
  114.                                             {% endif %}
  115.                                             {{ pimcore_link(prefix ~ '_brick_tabs_link') }}
  116.                                         </div>
  117.                                         {% do block2.blockEnd() %}
  118.                                         {% do block2.blockDestruct() %}
  119.                                     {% endfor %}
  121.                                 </div>
  122.                                 {% do block2.end() %}
  124.                                 {# START CLOSE DIV #}
  125.                                 {% if tabStyle == 'tabs-vertical' %}
  126.                             </div>
  127.                         </div>
  128.                         {% endif %}
  129.                         {# END closE div #}
  130.                     </div>
  131.                 </div>
  132.             </div>
  133.         </div>
  134.     </section>
  136. {% endif %}