You are here

Home » API reference » A11Y Paragraphs Tabs 8

paragraph--a11y-paragraphs-tabs-wrapper.html.twig in A11Y Paragraphs Tabs 8

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.

File

templates/paragraph--a11y-paragraphs-tabs-wrapper.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * A11Y Paragraphs Tab Wrapper paragraph template.

  5.  *

  6.  * Available variables:

  7.  * - paragraph: Full paragraph entity.

  8.  *   Only method names starting with "get", "has", or "is" and a few common

  9.  *   methods such as "id", "label", and "bundle" are available. For example:

  10.  *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.

  11.  *   - paragraph.id(): The paragraph ID.

  12.  *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".

  13.  *   - paragraph.getOwnerId(): The user ID of the paragraph author.

  14.  *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties

  15.  *   and methods for the paragraph object.

  16.  * - content: All paragraph items. Use {{ content }} to print them all,

  17.  *   or print a subset such as {{ content.field_example }}. Use

  18.  *   {{ content|without('field_example') }} to temporarily suppress the printing

  19.  *   of a given child element.

  20.  *   - content.field_a11y_para_tabs_sec_title: Formatted Text field used for the Section Title.

  21.  *   - content.field_a11y_para_tabs_tabs_panel: Paragraph Reference Field used to reference the Tabs Panel paragraph.

  22.  *   - content.field_a11y_para_tabs_tab_title: Formatted Text field used for the Tab panel Title.

  23.  *   - content.field_a11y_para_tabs_tab_content: Paragraph Reference Field used to reference the Tab Content paragraph.

  24.  *   - content.field_a11y_para_tabs_text_area: Text Formatted Long field used for adding text.

  25.  * - attributes: HTML attributes for the containing element.

  26.  *   The attributes.class element may contain one or more of the following

  27.  *   classes:

  28.  *   - paragraphs: The current template type (also known as a "theming hook").

  29.  *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an

  30.  *     "Image" it would result in "paragraphs--type--image". Note that the machine

  31.  *     name will often be in a short form of the human readable label.

  32.  *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a

  33.  *     preview would result in: "paragraphs--view-mode--preview", and

  34.  *     default: "paragraphs--view-mode--default".

  35.  * - view_mode: View mode; for example, "preview" or "full".

  36.  * - logged_in: Flag for authenticated user status. Will be true when the

  37.  *   current user is a logged-in member.

  38.  * - is_admin: Flag for admin user status. Will be true when the current user

  39.  *   is an administrator. 

  40.  *

  41.  */

  42. #}

  43. 

  44. {# Attach CSS/JS Libraries #}

  45. {{ attach_library('a11y_paragraphs_tabs/assets') }}

  46. {{ attach_library('a11y_paragraphs_tabs/a11y-accordion-tabs') }}

  47. 

  48. {# Sets Unique ID for Accordion from Paragraph ID. #}

  49. {% set section_id = 'section' ~ paragraph.id.value %}

  50. {% set tab_id = 'tab' ~ paragraph.id.value %}

  51. 

  52. {% block paragraph %}

  53. {% block content %}

  54.   <div{{ attributes }}>

  55.   	<div class="a11y-paragraphs-tabs__wrapper">

  56.   		<div class="a11y-paragraphs-tabs__section-title">

  57.   			{{ content.field_a11y_para_tabs_sec_title }}</br>

  58.   		</div>

  59.   		<div class="a11y-paragraphs-tabs__section-container">

  60. 

  61. 			  <div class="accordion-tabs js-tabs">

  62. 		    	

  63.           <ul role="tablist" class="tabs-tab-list">

  64. 

  65.             {# Loops through the tab sections to print the tab section titles. #}

  66.             {% for key, item in content.field_a11y_para_tabs_tabs_panel if key|first != '#' %}

  67. 

  68.               <li role="presentation">

  69.                 <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>

  70.               </li>

  71.             

  72.             {% endfor %}

  73.           

  74.           </ul>

  75. 

  76.           <div>

  77.           

  78.             {# Loops through the tab sections again to print the tab section bodies. #}

  79.             {% for key, item in content.field_a11y_para_tabs_tabs_panel if key|first != '#' %}

  80. 

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

  82. 

  83.                 <div class="accordeon-trigger js-accordeon-trigger" aria-controls="{{ section_id }}-{{ key + 1 }}" aria-expanded="true" tabindex="0">

  84.                   {{ item['#paragraph'].field_a11y_para_tabs_tab_title.value }}

  85.                 </div>

  86. 

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

  88. 

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

  90. 

  91.                     {# Use the same render array as item and set the '#paragraph'. #}

  92.                     {% set section_body = item %}

  93. 

  94.                     {% set lang = section_body['#paragraph'].langcode[0].value %}

  95.                   

  96.                     {# Check if a translation exists #}

  97.                     {% if section_body['#paragraph'].field_a11y_para_tabs_tab_content[body_key].entity.hasTranslation(lang) %}

  98. 

  99.                       {# Load the entity for the current translation #}

  100.                       {% set section_translation= section_body['#paragraph'].field_a11y_para_tabs_tab_content[body_key].entity.getTranslation(lang) %}

  101.                   

  102.                     {% else %}

  103.                     

  104.                       {# Load the source entity #}

  105.                       {% set section_translation= section_body['#paragraph'].field_a11y_para_tabs_tab_content[body_key].entity %}

  106. 

  107.                     {% endif %}

  108. 

  109.                     {% set section_body = section_body|merge({'#paragraph': section_translation}) %}

  110.                   

  111.                     {# Remove the cache keys so it doesn't repeat the first value. #}

  112.                     {% set section_body = section_body|merge({'#cache': {}}) %}

  113.                   

  114.                     {# Print the compiled section body. #}

  115.                     {{ section_body }}

  116.                   

  117.                   {% endfor %}

  118. 

  119.                 </div>

  120. 

  121.               </section>

  122. 

  123.             {% endfor %}

  124. 

  125.           </div>

  126. 		  	</div>

  127. 		  </div>

  128. 	  </div>

  129.   </div>

  130. {% endblock %}

  131. {% endblock paragraph %}