vvja-1.0.1/templates/views-view-vvja.html.twig

{#
  @file
  Template for rendering a Views Vanilla Javascript Accordion.

  Available variables:
  - options: The options array containing settings for the accordion.
  - rows: An array of row items to be displayed in the accordion.
  - attributes: A list of HTML attributes for the wrapper div.

  Options settings:
  - unique_id: A unique identifier for the accordion instance.
  - global_toggle: Whether to display expand/collapse all buttons.
  - single_toggle: Whether to display toggle indicators for each section.
  - first_toggle: Whether to have the first section open by default.
  - animation: Animation type for the accordion panels.
  - transition_speed: allows users to select different speeds for the accordion.
  - exclusive_panel: allows users to have one panel open only.
#}
{# Set unique ID for the accordion instance #}
{% set unique_id = options.unique_id %}
{% set vvja_id = 'vvja-' ~ unique_id %}
{% set max_width = options.accordion_item_width %}

{# Display or hide expand all options based on configuration #}
{% set exclusive_panel = options.exclusive_panel %}
{% set global_toggle = options.global_toggle %}
{% set show_global_toggle = global_toggle and not exclusive_panel %}
{% set single_toggle = options.single_toggle %}
{% set first_toggle = options.first_toggle %}
{% set vvja_animation = options.animation %}
{% set transition_speed = options.transition_speed ~ 's' %}
{% set acc_id = 'vvja-inner-' ~ unique_id %}
{% set acc_id_btn = 'vvja-button-' ~ unique_id %}
{% set acc_id_pan = 'vvja-pane-' ~ unique_id %}

{# Deep linking configuration #}
{% set deeplink_config = {
  enabled: deeplink_enabled|default(false),
  identifier: deeplink_identifier|default('')
} %}

{% set classes = [
  'vvja',
  vvja_id,
  global_toggle ? 'global-toggle-on' : '',
  single_toggle ? 'single-toggle-on' : '',
  first_toggle ? 'first-toggle-on' : '',
  options.accordion_item_width != 0 ? 'max-w' : ''
] %}

{# Render the accordion. #}
<div {{ attributes.addClass(classes).setAttribute('id', vvja_id) }}>
  <div id="{{ acc_id }}" class="vvja-inner" {% if max_width > 0 %} style="--box-width: {{ max_width }}"{% endif %} data-exclusive="{{ exclusive_panel ? 'true' : 'false' }}" data-first-toggle="{{ first_toggle ? 'true' : 'false' }}"{% if deeplink_config.enabled and deeplink_config.identifier %} data-deeplink-enabled="true" data-deeplink-id="{{ deeplink_config.identifier }}"{% endif %}>

    {# Render global expand/collapse buttons if enabled #}
    {% if show_global_toggle %}
    <div class="global-toggle">
      <button class="button group-toggle" aria-expanded="false" aria-controls="{{ vvja_id }}" aria-label="{{ 'Expand or Collapse all sections'|t }}">
        <span class="group-toggle">
          <span aria-hidden="true" class="group-toggle-inner b-minus vvja-hidden">{{ include('@vvja/svg/collapse-all.svg') }}</span>
          <span aria-hidden="false" class="group-toggle-inner b-plus">{{ include('@vvja/svg/expand-all.svg') }}</span>
          <span class="visually-hidden">{{ 'Expand or Collapse all sections'|t }}</span>
        </span>
      </button>
    </div>
    {% endif %}

    {# Loop through each row and render the accordion structure #}
    {% for key, row in rows %}
    {% set row_content = row.content|render %}
    {# Use the unique tag or CSS class to split the content #}
    {% set split_content = row_content|split('<div class="vvja-separator"></div>') %}
    {% set button_content = split_content[0] %}
    {% set pane_content = split_content[1]|default('') %}
    <div id="vvja-item-{{ unique_id }}-{{ key + 1 }}" role="region" class="vvja-item closed">

      {# Render the button #}
      {% if deeplink_config.enabled and deeplink_config.identifier %}
        {# Deep linking enabled - use anchor link #}
        <a id="{{ acc_id_btn }}-{{ key + 1 }}" href="#accordion-{{ deeplink_config.identifier }}-{{ key + 1 }}" class="button vvja-button" role="button" aria-label="{{ button_content|striptags|trim|t }}" aria-expanded="false" aria-controls="{{ acc_id_pan }}-{{ key + 1 }}-pane">
          <span class="btn-inner">{{ button_content|safe_html }}</span>
          {% if single_toggle %}
            <span class="single-toggle">
              <span aria-hidden="true" class="single-toggle-inner b-minus vvja-hidden">{{ include('@vvja/svg/collapse-content.svg') }}</span>
              <span aria-hidden="false" class="single-toggle-inner b-plus">{{ include('@vvja/svg/expand-content.svg') }}</span>
              <span class="visually-hidden">{{ 'Close or Open tab @id-pane'|t({'@id': acc_id_pan ~ '-' ~ (key + 1)}) }}</span>
            </span>
          {% endif %}
        </a>
      {% else %}
        {# Default button #}
        <button id="{{ acc_id_btn }}-{{ key + 1 }}" class="button vvja-button" aria-label="{{ button_content|striptags|trim|t }}" aria-expanded="false" aria-controls="{{ acc_id_pan }}-{{ key + 1 }}-pane" type="button">
          <span class="btn-inner">{{ button_content|safe_html }}</span>
          {% if single_toggle %}
            <span class="single-toggle">
              <span aria-hidden="true" class="single-toggle-inner b-minus vvja-hidden">{{ include('@vvja/svg/collapse-content.svg') }}</span>
              <span aria-hidden="false" class="single-toggle-inner b-plus">{{ include('@vvja/svg/expand-content.svg') }}</span>
              <span class="visually-hidden">{{ 'Close or Open tab @id-pane'|t({'@id': acc_id_pan ~ '-' ~ (key + 1)}) }}</span>
            </span>
          {% endif %}
        </button>
      {% endif %}

      {# Render the accordion pane #}
      <div id="{{ acc_id_pan }}-{{ key + 1 }}-pane" class="vvja-pane{{ vvja_animation != 'none' ? ' ' ~ vvja_animation : '' }}" aria-labelledby="{{ acc_id_btn }}-{{ key + 1 }}" aria-hidden="true" data-index="{{ key + 1 }}" style="--transition-speed: {{ transition_speed }};">
        {{ pane_content|safe_html }}
      </div>

    </div>
    {% endfor %}

  </div>
</div>