paragraph--a11y-paragraphs-tabs-wrapper.html.twig

{#
/**
 * @file
 * A11Y Paragraphs Tab Wrapper paragraph template.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
 *   - paragraph.id(): The paragraph ID.
 *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
 *   - paragraph.getOwnerId(): The user ID of the paragraph author.
 *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
 *   and methods for the paragraph object.
 * - content: All paragraph items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 *   - content.field_a11y_para_tabs_sec_title: Formatted Text field used for the Section Title.
 *   - content.field_a11y_para_tabs_tabs_panel: Paragraph Reference Field used to reference the Tabs Panel paragraph.
 *   - content.field_a11y_para_tabs_tab_title: Formatted Text field used for the Tab panel Title.
 *   - content.field_a11y_para_tabs_tab_content: Paragraph Reference Field used to reference the Tab Content paragraph.
 *   - content.field_a11y_para_tabs_text_area: Text Formatted Long field used for adding text.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class element may contain one or more of the following
 *   classes:
 *   - paragraphs: The current template type (also known as a "theming hook").
 *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
 *     "Image" it would result in "paragraphs--type--image". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
 *     preview would result in: "paragraphs--view-mode--preview", and
 *     default: "paragraphs--view-mode--default".
 * - view_mode: View mode; for example, "preview" or "full".
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 * - is_admin: Flag for admin user status. Will be true when the current user
 *   is an administrator. 
 *
 */
#}

{# Attach CSS/JS Libraries #}
{{ attach_library('a11y_paragraphs_tabs/assets') }}
{{ attach_library('a11y_paragraphs_tabs/a11y-accordion-tabs') }}

{# Sets Unique ID for Accordion from Paragraph ID. #}
{% set section_id = 'section' ~ paragraph.id.value %}
{% set tab_id = 'tab' ~ paragraph.id.value %}

{% block paragraph %}
{% block content %}
  <div{{ attributes }}>
  	<div class="a11y-paragraphs-tabs__wrapper">
  		<div class="a11y-paragraphs-tabs__section-title">
  			{{ content.field_a11y_para_tabs_sec_title }}</br>
  		</div>
  		<div class="a11y-paragraphs-tabs__section-container">

			  <div class="accordion-tabs js-tabs">
		    	
          <ul role="tablist" class="tabs-tab-list">

            {# Loops through the tab sections to print the tab section titles. #}
            {% for key, item in content.field_a11y_para_tabs_tabs_panel if key|first != '#' %}

              <li role="presentation">
                <a href="#{{ section_id }}-{{ key + 1 }}" role="tab" id="{{ tab_id }}-{{ key + 1 }}" aria-controls="{{ section_id }}-{{ key + 1 }}" aria-selected="true" class="tabs-trigger js-tabs-trigger">{{ item['#paragraph'].field_a11y_para_tabs_tab_title.value }}</a>
              </li>
            
            {% endfor %}
          
          </ul>

          <div>
          
            {# Loops through the tab sections again to print the tab section bodies. #}
            {% for key, item in content.field_a11y_para_tabs_tabs_panel if key|first != '#' %}

              <section id="{{ section_id }}-{{ key + 1 }}" role="tabpanel" aria-labelledby="{{ tab_id }}-{{ key + 1 }}" class="tabs-panel js-tabs-panel" tabindex="0">

                <div class="accordeon-trigger js-accordeon-trigger" aria-controls="{{ section_id }}-{{ key + 1 }}" aria-expanded="true" tabindex="0">
                  {{ item['#paragraph'].field_a11y_para_tabs_tab_title.value }}
                </div>

                <div class="content" aria-hidden="false">

                  {% for body_key, body_item in item['#paragraph'].field_a11y_para_tabs_tab_content %}

                    {# Use the same render array as item and set the '#paragraph'. #}
                    {% set section_body = item %}

                    {% set lang = section_body['#paragraph'].langcode[0].value %}
                  
                    {# Check if a translation exists #}
                    {% if section_body['#paragraph'].field_a11y_para_tabs_tab_content[body_key].entity.hasTranslation(lang) %}

                      {# Load the entity for the current translation #}
                      {% set section_translation= section_body['#paragraph'].field_a11y_para_tabs_tab_content[body_key].entity.getTranslation(lang) %}
                  
                    {% else %}
                    
                      {# Load the source entity #}
                      {% set section_translation= section_body['#paragraph'].field_a11y_para_tabs_tab_content[body_key].entity %}

                    {% endif %}

                    {% set section_body = section_body|merge({'#paragraph': section_translation}) %}
                  
                    {# Remove the cache keys so it doesn't repeat the first value. #}
                    {% set section_body = section_body|merge({'#cache': {}}) %}
                  
                    {# Print the compiled section body. #}
                    {{ section_body }}
                  
                  {% endfor %}

                </div>

              </section>

            {% endfor %}

          </div>
		  	</div>
		  </div>
	  </div>
  </div>
{% endblock %}
{% endblock paragraph %}